diff --git a/app/builders/v2/reports/drilldown_builder.rb b/app/builders/v2/reports/drilldown_builder.rb
new file mode 100644
index 000000000..a3d2c073d
--- /dev/null
+++ b/app/builders/v2/reports/drilldown_builder.rb
@@ -0,0 +1,213 @@
+class V2::Reports::DrilldownBuilder
+  include DateRangeHelper
+  include TimezoneHelper
+
+  DEFAULT_GROUP_BY = 'day'.freeze
+  DEFAULT_PAGE = 1
+  DEFAULT_PER_PAGE = 25
+  MAX_PER_PAGE = 100
+  SUPPORTED_GROUP_BY = %w[hour day week month year].freeze
+  SUPPORTED_DIMENSION_TYPES = %w[account inbox agent label team].freeze
+  MESSAGE_METRICS = {
+    'incoming_messages_count' => :incoming,
+    'outgoing_messages_count' => :outgoing
+  }.freeze
+  MESSAGE_EVENT_METRICS = %w[avg_first_response_time reply_time].freeze
+
+  pattr_initialize :account, :params
+
+  def self.supported_dimension_type?(type) = SUPPORTED_DIMENSION_TYPES.include?((type.presence || 'account').to_s)
+
+  def build
+    records = paginated_records.to_a
+    { meta: meta, payload: records.map { |record| record_serializer(records).serialize(record) } }
+  end
+
+  private
+
+  def meta
+    {
+      metric: metric,
+      record_type: record_type,
+      bucket: {
+        since: bucket_range.begin.to_i,
+        until: bucket_range.end.to_i
+      },
+      current_page: current_page,
+      per_page: per_page,
+      total_count: paginated_records.total_count,
+      conversation_count: conversation_count
+    }
+  end
+
+  def conversation_count
+    return paginated_records.total_count if conversation_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
+
+  def drilldown_scope
+    if message_metric?
+      message_scope
+    elsif conversation_metric?
+      conversation_scope
+    else
+      reporting_event_scope
+    end
+  end
+
+  def message_scope
+    scope.messages
+         .where(account_id: account.id, created_at: bucket_range)
+         .public_send(MESSAGE_METRICS.fetch(metric))
+         .includes(:sender, conversation: [:assignee, :contact, :inbox])
+         .reorder(created_at: :desc)
+  end
+
+  def conversation_scope
+    scope.conversations
+         .where(account_id: account.id, created_at: bucket_range)
+         .includes(:assignee, :contact, :inbox)
+         .order(created_at: :desc)
+  end
+
+  def reporting_event_scope
+    events = scope.reporting_events
+                  .where(account_id: account.id, name: raw_event_name, created_at: bucket_range)
+                  .includes(:user, :inbox, conversation: [:assignee, :contact, :inbox])
+                  .order(created_at: :desc)
+
+    if raw_count_strategy == :exclude_bot_handoffs
+      events = events.where.not(conversation_id: bot_handoff_conversation_ids_subquery)
+    elsif raw_count_strategy == :distinct_conversation
+      events = events.where(id: distinct_conversation_event_ids(events))
+    end
+
+    events
+  end
+
+  def bot_handoff_conversation_ids_subquery
+    scope.reporting_events
+         .where(account_id: account.id, name: :conversation_bot_handoff, created_at: range)
+         .where.not(conversation_id: nil)
+         .select(:conversation_id)
+  end
+
+  def distinct_conversation_event_ids(events)
+    events.reorder(nil)
+          .where.not(conversation_id: nil)
+          .select('MAX(reporting_events.id)')
+          .group(:conversation_id)
+  end
+
+  def record_serializer(records)
+    @record_serializer ||= V2::Reports::DrilldownRecordSerializer.new(
+      account,
+      metric,
+      use_business_hours?,
+      records
+    )
+  end
+
+  def bucket_range
+    @bucket_range ||= begin
+      bucket_start = Time.zone.at(params[:bucket_timestamp].to_i).in_time_zone(timezone)
+      bucket_end = bucket_end_for(bucket_start)
+      requested_start = Time.zone.at(params[:since].to_i)
+      requested_end = Time.zone.at(params[:until].to_i)
+
+      [bucket_start, requested_start].max...[bucket_end, requested_end].min
+    end
+  end
+
+  def bucket_end_for(bucket_start)
+    {
+      'hour' => bucket_start + 1.hour,
+      'day' => bucket_start + 1.day,
+      'week' => bucket_start + 1.week,
+      'month' => bucket_start + 1.month,
+      'year' => bucket_start + 1.year
+    }.fetch(group_by)
+  end
+
+  def scope
+    case dimension_type
+    when 'account' then account
+    when 'inbox' then inbox
+    when 'agent' then user
+    when 'label' then label
+    when 'team' then team
+    else
+      raise ArgumentError, "Unsupported drilldown dimension type: #{dimension_type}"
+    end
+  end
+
+  def inbox = @inbox ||= account.inboxes.find(params[:id])
+
+  def user = @user ||= account.users.find(params[:id])
+
+  def label = @label ||= account.labels.find(params[:id])
+
+  def team = @team ||= account.teams.find(params[:id])
+
+  def metric
+    params[:metric].to_s
+  end
+
+  def report_metric
+    @report_metric ||= Reports::ReportMetricRegistry.fetch(metric)
+  end
+
+  def raw_event_name
+    report_metric&.raw_event_name
+  end
+
+  def raw_count_strategy
+    report_metric&.raw_count_strategy
+  end
+
+  def record_type
+    return 'message' if message_metric? || MESSAGE_EVENT_METRICS.include?(metric)
+
+    'conversation'
+  end
+
+  def message_metric?
+    MESSAGE_METRICS.key?(metric)
+  end
+
+  def conversation_metric?
+    metric == 'conversations_count'
+  end
+
+  def dimension_type
+    (params[:type].presence || 'account').to_s
+  end
+
+  def group_by
+    @group_by ||= SUPPORTED_GROUP_BY.include?(params[:group_by].to_s) ? params[:group_by].to_s : DEFAULT_GROUP_BY
+  end
+
+  def timezone
+    @timezone ||= timezone_name_from_offset(params[:timezone_offset])
+  end
+
+  def current_page
+    [params[:page].to_i, DEFAULT_PAGE].max
+  end
+
+  def per_page
+    requested_per_page = params[:per_page].to_i
+    requested_per_page = DEFAULT_PER_PAGE if requested_per_page <= 0
+
+    [requested_per_page, MAX_PER_PAGE].min
+  end
+
+  def use_business_hours?
+    ActiveModel::Type::Boolean.new.cast(params[:business_hours])
+  end
+end
diff --git a/app/builders/v2/reports/drilldown_record_serializer.rb b/app/builders/v2/reports/drilldown_record_serializer.rb
new file mode 100644
index 000000000..04edf65b4
--- /dev/null
+++ b/app/builders/v2/reports/drilldown_record_serializer.rb
@@ -0,0 +1,199 @@
+class V2::Reports::DrilldownRecordSerializer
+  MESSAGE_EVENT_METRICS = %w[avg_first_response_time reply_time].freeze
+
+  attr_reader :account, :metric, :use_business_hours, :records
+
+  def initialize(account, metric, use_business_hours, records = [])
+    @account = account
+    @metric = metric
+    @use_business_hours = use_business_hours
+    @records = records
+  end
+
+  def serialize(record)
+    return serialize_message(record) if record.is_a?(Message)
+    return serialize_conversation_event(record) if record.is_a?(ReportingEvent)
+
+    serialize_conversation(record)
+  end
+
+  private
+
+  def serialize_message(message, metric_value: nil, occurred_at: nil)
+    {
+      record_type: 'message',
+      conversation: conversation_attributes(message.conversation),
+      message: message_attributes(message),
+      metric_value: metric_value,
+      occurred_at: (occurred_at || message.created_at).to_i
+    }
+  end
+
+  def serialize_conversation_event(event)
+    inferred_message = inferred_message_for(event)
+    if inferred_message.present?
+      return serialize_message(
+        inferred_message,
+        metric_value: event_metric_value(event),
+        occurred_at: event_timestamp(event)
+      )
+    end
+
+    serialize_conversation(
+      event.conversation,
+      metric_value: event_metric_value(event),
+      occurred_at: event_timestamp(event),
+      event_name: event.name
+    )
+  end
+
+  def serialize_conversation(conversation, metric_value: nil, occurred_at: nil, event_name: nil)
+    serialized_record = {
+      record_type: 'conversation',
+      conversation: conversation_attributes(conversation),
+      message: nil,
+      metric_value: metric_value,
+      occurred_at: (occurred_at || conversation&.created_at)&.to_i
+    }
+    serialized_record[:event_name] = event_name if event_name.present?
+    serialized_record
+  end
+
+  def conversation_attributes(conversation)
+    return {} if conversation.blank?
+
+    {
+      id: conversation.id,
+      display_id: conversation.display_id,
+      contact_id: conversation.contact_id,
+      contact_name: conversation.contact&.name,
+      inbox_id: conversation.inbox_id,
+      inbox_name: conversation.inbox&.name,
+      assignee_id: conversation.assignee_id,
+      assignee_name: conversation.assignee&.name,
+      status: conversation.status,
+      created_at: conversation.created_at.to_i,
+      last_activity_at: conversation.last_activity_at.to_i,
+      last_message: last_message_attributes(conversation)
+    }
+  end
+
+  def message_attributes(message)
+    {
+      id: message.id,
+      content: message.content,
+      message_type: message.message_type,
+      sender_name: message.sender&.try(:name),
+      created_at: message.created_at.to_i
+    }
+  end
+
+  def last_message_attributes(conversation)
+    message = latest_messages_by_conversation_id[conversation.id]
+    return if message.blank?
+
+    message_attributes(message)
+  end
+
+  def inferred_message_for(event)
+    return unless MESSAGE_EVENT_METRICS.include?(metric)
+    return if event.conversation.blank? || event.event_end_time.blank?
+
+    inferred_messages_by_event_id[event.id]
+  end
+
+  def first_response_event_with_user?(event)
+    metric == 'avg_first_response_time' && event.user_id.present?
+  end
+
+  def message_inference_range(event)
+    (event.event_end_time - 1.second)..(event.event_end_time + 1.second)
+  end
+
+  def event_metric_value(event)
+    use_business_hours ? event.value_in_business_hours : event.value
+  end
+
+  def event_timestamp(event)
+    event.event_end_time || event.created_at
+  end
+
+  def latest_messages_by_conversation_id
+    @latest_messages_by_conversation_id ||= if conversation_ids.blank?
+                                              {}
+                                            else
+                                              latest_messages.index_by(&:conversation_id)
+                                            end
+  end
+
+  def latest_messages
+    Message
+      .where(account_id: account.id, conversation_id: conversation_ids)
+      .where.not(message_type: :activity)
+      .select('DISTINCT ON (messages.conversation_id) messages.*')
+      .reorder(Arel.sql('messages.conversation_id, messages.created_at DESC, messages.id DESC'))
+      .includes(:sender)
+  end
+
+  def inferred_messages_by_event_id
+    @inferred_messages_by_event_id ||= inference_events.each_with_object({}) do |event, messages_by_event_id|
+      messages_by_event_id[event.id] = inferred_message_candidates.find do |message|
+        message_matches_event?(message, event)
+      end
+    end
+  end
+
+  def inferred_message_candidates
+    @inferred_message_candidates ||= if inference_events.blank?
+                                       []
+                                     else
+                                       inferred_messages.to_a
+                                     end
+  end
+
+  def inferred_messages
+    Message
+      .where(account_id: account.id, conversation_id: inference_events.map(&:conversation_id).uniq)
+      .where(created_at: inference_time_range)
+      .where(message_type: %i[outgoing template])
+      .includes(:sender)
+      .reorder(created_at: :desc, id: :desc)
+  end
+
+  def message_matches_event?(message, event)
+    message.conversation_id == event.conversation_id &&
+      message.created_at.between?(
+        message_inference_range(event).begin,
+        message_inference_range(event).end
+      ) &&
+      message_sender_matches_event?(message, event)
+  end
+
+  def message_sender_matches_event?(message, event)
+    return true unless first_response_event_with_user?(event)
+
+    message.sender_id == event.user_id && message.sender_type == 'User'
+  end
+
+  def inference_time_range
+    event_end_times = inference_events.map(&:event_end_time)
+
+    (event_end_times.min - 1.second)..(event_end_times.max + 1.second)
+  end
+
+  def inference_events
+    @inference_events ||= records.select do |record|
+      record.is_a?(ReportingEvent) && record.conversation_id.present? && record.event_end_time.present?
+    end
+  end
+
+  def conversation_ids
+    @conversation_ids ||= records.filter_map { |record| conversation_id_for(record) }.uniq
+  end
+
+  def conversation_id_for(record)
+    return record.conversation_id if record.is_a?(Message) || record.is_a?(ReportingEvent)
+
+    record.id
+  end
+end
diff --git a/app/controllers/api/v2/accounts/reports_controller.rb b/app/controllers/api/v2/accounts/reports_controller.rb
index 192b3619c..93be19eb9 100644
--- a/app/controllers/api/v2/accounts/reports_controller.rb
+++ b/app/controllers/api/v2/accounts/reports_controller.rb
@@ -51,6 +51,13 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
     generate_csv('conversation_traffic_reports', 'api/v2/accounts/reports/conversation_traffic')
   end
 
+  def drilldown
+    return head :unauthorized unless Current.account_user.administrator?
+    return head :unprocessable_entity unless valid_drilldown_params?
+
+    render json: V2::Reports::DrilldownBuilder.new(Current.account, drilldown_params).build
+  end
+
   def conversations
     return head :unprocessable_entity if params[:type].blank?
 
@@ -133,6 +140,22 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
                         })
   end
 
+  def drilldown_params
+    permitted_params = params.permit(
+      :metric, :id, :since, :until, :group_by, :timezone_offset, :bucket_timestamp, :page, :per_page
+    ).to_h.symbolize_keys
+    permitted_params.merge(
+      type: (params[:type].presence || 'account').to_sym,
+      business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours])
+    )
+  end
+
+  def valid_drilldown_params?
+    %i[metric bucket_timestamp since until].all? { |param| params[param].present? } &&
+      Reports::ReportMetricRegistry.supported?(params[:metric]) &&
+      V2::Reports::DrilldownBuilder.supported_dimension_type?(params[:type]) && Reports::DrilldownTimestampValidator.valid?(params)
+  end
+
   def conversation_params
     {
       type: params[:type].to_sym,
diff --git a/app/javascript/dashboard/api/reports.js b/app/javascript/dashboard/api/reports.js
index 00f040f8e..daa0cb11d 100644
--- a/app/javascript/dashboard/api/reports.js
+++ b/app/javascript/dashboard/api/reports.js
@@ -31,6 +31,42 @@ class ReportsAPI extends ApiClient {
     });
   }
 
+  getDrilldown({
+    metric,
+    bucketTimestamp,
+    from,
+    to,
+    type = 'account',
+    id,
+    groupBy,
+    businessHours,
+    page,
+    perPage,
+    signal,
+  }) {
+    const requestConfig = {
+      params: {
+        metric,
+        bucket_timestamp: bucketTimestamp,
+        since: from,
+        until: to,
+        type,
+        id,
+        group_by: groupBy,
+        business_hours: businessHours,
+        timezone_offset: getTimeOffset(),
+        page,
+        per_page: perPage,
+      },
+    };
+
+    if (signal) {
+      requestConfig.signal = signal;
+    }
+
+    return axios.get(`${this.url}/drilldown`, requestConfig);
+  }
+
   // eslint-disable-next-line default-param-last
   getSummary(since, until, type = 'account', id, groupBy, businessHours) {
     return axios.get(`${this.url}/summary`, {
diff --git a/app/javascript/dashboard/api/specs/reports.spec.js b/app/javascript/dashboard/api/specs/reports.spec.js
index e458633d0..178c98a70 100644
--- a/app/javascript/dashboard/api/specs/reports.spec.js
+++ b/app/javascript/dashboard/api/specs/reports.spec.js
@@ -1,6 +1,8 @@
 import reportsAPI from '../reports';
 import ApiClient from '../ApiClient';
 
+const timezoneOffset = () => -new Date().getTimezoneOffset() / 60;
+
 describe('#Reports API', () => {
   it('creates correct instance', () => {
     expect(reportsAPI).toBeInstanceOf(ApiClient);
@@ -11,6 +13,7 @@ describe('#Reports API', () => {
     expect(reportsAPI).toHaveProperty('update');
     expect(reportsAPI).toHaveProperty('delete');
     expect(reportsAPI).toHaveProperty('getReports');
+    expect(reportsAPI).toHaveProperty('getDrilldown');
     expect(reportsAPI).toHaveProperty('getSummary');
     expect(reportsAPI).toHaveProperty('getAgentReports');
     expect(reportsAPI).toHaveProperty('getLabelReports');
@@ -42,11 +45,14 @@ describe('#Reports API', () => {
       });
       expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports', {
         params: {
+          business_hours: undefined,
+          group_by: undefined,
+          id: undefined,
           metric: 'conversations_count',
           since: 1621103400,
           until: 1621621800,
           type: 'account',
-          timezone_offset: -0,
+          timezone_offset: timezoneOffset(),
         },
       });
     });
@@ -59,13 +65,70 @@ describe('#Reports API', () => {
           group_by: undefined,
           id: undefined,
           since: 1621103400,
-          timezone_offset: -0,
+          timezone_offset: timezoneOffset(),
           type: 'account',
           until: 1621621800,
         },
       });
     });
 
+    it('#getDrilldown', () => {
+      reportsAPI.getDrilldown({
+        metric: 'incoming_messages_count',
+        bucketTimestamp: 1621103400,
+        from: 1621103400,
+        to: 1621621800,
+        type: 'inbox',
+        id: 1,
+        groupBy: 'day',
+        businessHours: false,
+        page: 2,
+        perPage: 25,
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/drilldown', {
+        params: {
+          metric: 'incoming_messages_count',
+          bucket_timestamp: 1621103400,
+          since: 1621103400,
+          until: 1621621800,
+          type: 'inbox',
+          id: 1,
+          group_by: 'day',
+          business_hours: false,
+          timezone_offset: timezoneOffset(),
+          page: 2,
+          per_page: 25,
+        },
+      });
+    });
+
+    it('#getDrilldown with abort signal', () => {
+      const controller = new AbortController();
+
+      reportsAPI.getDrilldown({
+        metric: 'incoming_messages_count',
+        bucketTimestamp: 1621103400,
+        signal: controller.signal,
+      });
+
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/drilldown', {
+        params: {
+          metric: 'incoming_messages_count',
+          bucket_timestamp: 1621103400,
+          since: undefined,
+          until: undefined,
+          type: 'account',
+          id: undefined,
+          group_by: undefined,
+          business_hours: undefined,
+          timezone_offset: timezoneOffset(),
+          page: undefined,
+          per_page: undefined,
+        },
+        signal: controller.signal,
+      });
+    });
+
     it('#getAgentReports', () => {
       reportsAPI.getAgentReports({
         from: 1621103400,
diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index 2ffa0ef11..0171b9620 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -121,6 +121,26 @@
       "CLEAR_FILTER": "Clear filter",
       "EMPTY_LIST": "No results found"
     },
+    "DRILLDOWN": {
+      "TITLE": "{metric} details",
+      "RESULT_COUNT_CONVERSATION": "{count} conversation | {count} conversations",
+      "RESULT_COUNT_MESSAGE": "{count} message | {count} messages",
+      "EMPTY": "No records found for this bar.",
+      "ERROR": "Could not load records. Please try again.",
+      "ADMIN_ONLY": "Only administrators can drill down into report records.",
+      "LOAD_MORE": "Load more",
+      "CLOSE": "Close details",
+      "PREVIOUS_BUCKET": "Previous bar",
+      "NEXT_BUCKET": "Next bar",
+      "UNKNOWN_CONTACT": "Unknown contact",
+      "UNKNOWN_INBOX": "Unknown inbox",
+      "UNASSIGNED_AGENT": "Unassigned",
+      "NO_MESSAGE_CONTENT": "No message content",
+      "MESSAGE_CREATED_AT": "Message created at {time}",
+      "EVENT_OCCURRED_AT": "Event occurred at {time}",
+      "INCOMING_MESSAGE": "Incoming message",
+      "OUTGOING_MESSAGE": "Outgoing message"
+    },
     "PAGINATION": {
       "RESULTS": "Showing {start} to {end} of {total} results",
       "PER_PAGE_TEMPLATE": "{size} / page"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
index 03b7290d6..2a1cd18c8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
@@ -101,6 +101,9 @@ export default {
       summary-fetching-key="getBotSummaryFetchingStatus"
       :group-by="groupBy"
       :report-keys="reportKeys"
+      :from="from"
+      :to="to"
+      :business-hours="businessHours"
     />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 9794d97e4..ea1e80e70 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -121,6 +121,11 @@ export default {
       show-group-by
       @filter-change="onFilterChange"
     />
-    <ReportContainer :group-by="groupBy" />
+    <ReportContainer
+      :group-by="groupBy"
+      :from="from"
+      :to="to"
+      :business-hours="businessHours"
+    />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
index c44ab58e5..ccd71b3a4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
@@ -5,16 +5,38 @@ import { GROUP_BY_FILTER, METRIC_CHART } from './constants';
 import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
 import { formatTime } from '@chatwoot/utils';
+import { useAlert } from 'dashboard/composables';
 import ChartStats from './components/ChartElements/ChartStats.vue';
 import BarChart from 'shared/components/charts/BarChart.vue';
+import ReportDrilldownDrawer from './components/ReportDrilldownDrawer.vue';
 
 export default {
-  components: { ChartStats, BarChart },
+  components: { ChartStats, BarChart, ReportDrilldownDrawer },
   props: {
     groupBy: {
       type: Object,
       default: () => ({}),
     },
+    from: {
+      type: Number,
+      default: 0,
+    },
+    to: {
+      type: Number,
+      default: 0,
+    },
+    reportType: {
+      type: String,
+      default: 'account',
+    },
+    selectedItemId: {
+      type: [String, Number],
+      default: null,
+    },
+    businessHours: {
+      type: Boolean,
+      default: false,
+    },
     accountSummaryKey: {
       type: String,
       default: 'getAccountSummary',
@@ -42,10 +64,27 @@ export default {
     );
     return { calculateTrend, isAverageMetricType };
   },
+  data() {
+    return {
+      drilldownRequest: null,
+      drilldownMetric: null,
+      drilldownIndex: null,
+    };
+  },
   computed: {
     ...mapGetters({
       accountReport: 'getAccountReports',
+      currentRole: 'getCurrentRole',
     }),
+    isAdmin() {
+      return this.currentRole === 'administrator';
+    },
+    canDrilldownPrev() {
+      return this.findDrillableIndex(this.drilldownIndex - 1, -1) !== null;
+    },
+    canDrilldownNext() {
+      return this.findDrillableIndex(this.drilldownIndex + 1, 1) !== null;
+    },
     metrics() {
       const reportKeys = Object.keys(this.reportKeys);
       const infoText = {
@@ -139,6 +178,82 @@ export default {
 
       return options;
     },
+    isDrilldownEnabled() {
+      return !!(this.from && this.to);
+    },
+    onChartElementClick(metric, event) {
+      if (!this.isDrilldownEnabled()) return;
+
+      const dataPoint = this.accountReport.data[metric.KEY]?.[event.dataIndex];
+      if (!this.canOpenDrilldown(metric, dataPoint)) return;
+      if (!this.isAdmin) {
+        useAlert(this.$t('REPORT.DRILLDOWN.ADMIN_ONLY'));
+        return;
+      }
+
+      this.openDrilldownAt(metric, event.dataIndex);
+    },
+    openDrilldownAt(metric, dataIndex) {
+      const dataPoint = this.accountReport.data[metric.KEY]?.[dataIndex];
+      if (!this.canOpenDrilldown(metric, dataPoint)) return;
+
+      const labels = this.getCollection(metric).labels || [];
+
+      this.drilldownMetric = metric;
+      this.drilldownIndex = dataIndex;
+      this.drilldownRequest = {
+        metric: metric.KEY,
+        metricName: metric.NAME,
+        bucketLabel: labels[dataIndex],
+        bucketTimestamp: dataPoint.timestamp,
+        bucketValue: dataPoint.value,
+        isAverageMetric: this.isAverageMetricType(metric.KEY),
+        from: this.from,
+        to: this.to,
+        type: this.reportType,
+        id: this.selectedItemId,
+        groupBy: this.groupBy?.period,
+        businessHours: this.businessHours,
+      };
+    },
+    navigateDrilldown(direction) {
+      const nextIndex = this.findDrillableIndex(
+        this.drilldownIndex + direction,
+        direction
+      );
+      if (nextIndex === null) return;
+
+      this.openDrilldownAt(this.drilldownMetric, nextIndex);
+    },
+    findDrillableIndex(startIndex, step) {
+      if (!this.drilldownMetric) return null;
+
+      const data = this.accountReport.data[this.drilldownMetric.KEY] || [];
+      for (
+        let index = startIndex;
+        index >= 0 && index < data.length;
+        index += step
+      ) {
+        if (this.canOpenDrilldown(this.drilldownMetric, data[index]))
+          return index;
+      }
+
+      return null;
+    },
+    canOpenDrilldown(metric, dataPoint) {
+      if (!dataPoint) return false;
+
+      if (this.isAverageMetricType(metric.KEY)) {
+        return dataPoint.count > 0;
+      }
+
+      return dataPoint.value > 0;
+    },
+    closeDrilldown() {
+      this.drilldownRequest = null;
+      this.drilldownMetric = null;
+      this.drilldownIndex = null;
+    },
   },
 };
 </script>
@@ -168,6 +283,8 @@ export default {
             v-if="accountReport.data[metric.KEY].length"
             :collection="getCollection(metric)"
             :chart-options="getChartOptions(metric)"
+            :clickable="isDrilldownEnabled()"
+            @element-click="onChartElementClick(metric, $event)"
           />
           <span v-else class="text-sm text-n-slate-10">
             {{ $t('REPORT.NO_ENOUGH_DATA') }}
@@ -176,4 +293,23 @@ export default {
       </div>
     </div>
   </div>
+  <ReportDrilldownDrawer
+    :id="drilldownRequest?.id"
+    :open="!!drilldownRequest"
+    :metric="drilldownRequest?.metric"
+    :metric-name="drilldownRequest?.metricName"
+    :bucket-label="drilldownRequest?.bucketLabel"
+    :bucket-timestamp="drilldownRequest?.bucketTimestamp"
+    :bucket-value="drilldownRequest?.bucketValue"
+    :is-average-metric="drilldownRequest?.isAverageMetric"
+    :from="drilldownRequest?.from"
+    :to="drilldownRequest?.to"
+    :type="drilldownRequest?.type"
+    :group-by="drilldownRequest?.groupBy"
+    :business-hours="drilldownRequest?.businessHours"
+    :can-prev="canDrilldownPrev"
+    :can-next="canDrilldownNext"
+    @navigate="navigateDrilldown"
+    @close="closeDrilldown"
+  />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue
new file mode 100644
index 000000000..327db6291
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue
@@ -0,0 +1,279 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { formatTime } from '@chatwoot/utils';
+import format from 'date-fns/format';
+import fromUnixTime from 'date-fns/fromUnixTime';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
+import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
+
+const props = defineProps({
+  record: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+const route = useRoute();
+
+const conversation = computed(() => props.record.conversation || {});
+const message = computed(() => props.record.message || {});
+const isMessageRecord = computed(() => props.record.record_type === 'message');
+const isEventBackedConversationRecord = computed(
+  () => !isMessageRecord.value && !!props.record.event_name
+);
+const conversationDisplayId = computed(() => conversation.value.display_id);
+const conversationNumber = computed(() => `#${conversationDisplayId.value}`);
+const messageDirection = computed(() => message.value.message_type);
+
+const formatTimestamp = timestamp => {
+  if (!timestamp) return '';
+
+  return format(fromUnixTime(timestamp), 'dd MMM yyyy, h:mm a');
+};
+
+const compactTimestamp = timestamp => {
+  if (!timestamp) return '';
+
+  return shortTimestamp(dynamicTime(timestamp)).trim();
+};
+
+const metricValue = computed(() => {
+  const value = props.record.metric_value;
+  if (value === null || value === undefined) return '';
+
+  return formatTime(value) || `${value}`;
+});
+
+const previewText = computed(() => {
+  if (message.value.content) return message.value.content;
+  if (conversation.value.last_message?.content) {
+    return conversation.value.last_message.content;
+  }
+
+  return t('REPORT.DRILLDOWN.NO_MESSAGE_CONTENT');
+});
+
+const showPreview = computed(() => {
+  return isMessageRecord.value || conversation.value.last_message;
+});
+
+const messageCreatedTooltip = computed(() =>
+  t('REPORT.DRILLDOWN.MESSAGE_CREATED_AT', {
+    time: formatTimestamp(message.value.created_at),
+  })
+);
+
+const eventOccurredTooltip = computed(() =>
+  t('REPORT.DRILLDOWN.EVENT_OCCURRED_AT', {
+    time: formatTimestamp(props.record.occurred_at),
+  })
+);
+
+const directionDetails = computed(() => {
+  const direction = messageDirection.value;
+  if (!direction) return null;
+
+  const isIncoming = direction === 'incoming';
+  return {
+    icon: isIncoming ? 'i-lucide-arrow-down-left' : 'i-lucide-arrow-up-right',
+    tooltip: isIncoming
+      ? t('REPORT.DRILLDOWN.INCOMING_MESSAGE')
+      : t('REPORT.DRILLDOWN.OUTGOING_MESSAGE'),
+  };
+});
+
+const conversationPath = computed(() => {
+  if (!conversationDisplayId.value) return '';
+
+  const path = conversationUrl({
+    accountId: route.params.accountId,
+    id: conversationDisplayId.value,
+  });
+  const params =
+    isMessageRecord.value && message.value.id
+      ? { messageId: message.value.id }
+      : null;
+
+  return frontendURL(path, params);
+});
+
+const contactPath = computed(() => {
+  if (!conversation.value.contact_id) return '';
+
+  return frontendURL(
+    `accounts/${route.params.accountId}/contacts/${conversation.value.contact_id}`
+  );
+});
+
+const inboxPath = computed(() => {
+  if (!conversation.value.inbox_id) return '';
+
+  return frontendURL(
+    `accounts/${route.params.accountId}/inbox/${conversation.value.inbox_id}`
+  );
+});
+
+const agentPath = computed(() => {
+  if (!conversation.value.assignee_id) return '';
+
+  return frontendURL(
+    `accounts/${route.params.accountId}/reports/agents/${conversation.value.assignee_id}`
+  );
+});
+
+const metadataItems = computed(() => [
+  {
+    key: 'contact',
+    icon: 'i-lucide-contact',
+    label:
+      conversation.value.contact_name || t('REPORT.DRILLDOWN.UNKNOWN_CONTACT'),
+    path: contactPath.value,
+  },
+  {
+    key: 'inbox',
+    icon: 'i-lucide-inbox',
+    label: conversation.value.inbox_name || t('REPORT.DRILLDOWN.UNKNOWN_INBOX'),
+    path: inboxPath.value,
+  },
+  {
+    key: 'agent',
+    icon: 'i-lucide-user-round',
+    label:
+      conversation.value.assignee_name ||
+      t('REPORT.DRILLDOWN.UNASSIGNED_AGENT'),
+    path: agentPath.value,
+  },
+]);
+
+const metadataAttributes = item => {
+  if (!item.path) return {};
+
+  return {
+    href: item.path,
+    target: '_blank',
+    rel: 'noopener noreferrer',
+  };
+};
+
+const metadataItemClass = item => [
+  'flex min-w-0 items-center gap-1 text-n-slate-10',
+  item.path ? 'group hover:text-n-blue-11 hover:underline' : '',
+];
+
+const metadataIconClass = item => [
+  'size-3 shrink-0 text-n-slate-9',
+  item.path ? 'group-hover:text-n-blue-11' : '',
+];
+
+const stopMetadataLinkClick = (event, item) => {
+  if (item.path) {
+    event.stopPropagation();
+  }
+};
+
+const openInNewTab = url => {
+  if (!url) return;
+
+  window.open(url, '_blank', 'noopener,noreferrer');
+};
+
+const openRecord = () => {
+  openInNewTab(conversationPath.value);
+};
+</script>
+
+<template>
+  <article
+    role="link"
+    tabindex="0"
+    class="cursor-pointer rounded-md border border-n-weak bg-n-solid-2 p-3 hover:bg-n-alpha-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-n-brand"
+    @click="openRecord"
+    @keydown.enter.self.prevent="openRecord"
+    @keydown.space.self.prevent="openRecord"
+  >
+    <div class="flex items-start justify-between gap-2">
+      <div class="min-w-0">
+        <div
+          class="flex items-center gap-2 text-sm font-medium leading-5 text-n-slate-12"
+        >
+          <span>{{ conversationNumber }}</span>
+          <span
+            v-if="conversation.status"
+            class="rounded bg-n-alpha-2 px-1.5 py-0.5 text-xs capitalize text-n-slate-11"
+          >
+            {{ conversation.status }}
+          </span>
+          <span
+            v-if="directionDetails"
+            v-tooltip.top="directionDetails.tooltip"
+            :aria-label="directionDetails.tooltip"
+            class="flex size-5 items-center justify-center rounded bg-n-alpha-2 text-n-slate-11"
+          >
+            <Icon :icon="directionDetails.icon" class="size-3" />
+          </span>
+          <span
+            v-if="metricValue"
+            class="rounded bg-n-alpha-2 px-1.5 py-0.5 text-xs text-n-slate-11"
+          >
+            {{ metricValue }}
+          </span>
+        </div>
+      </div>
+      <div
+        class="ml-2 flex shrink-0 items-center justify-end gap-1 text-right text-xs leading-4 text-n-slate-10"
+      >
+        <span
+          v-if="isMessageRecord"
+          v-tooltip.left="messageCreatedTooltip"
+          :aria-label="messageCreatedTooltip"
+          class="whitespace-nowrap"
+        >
+          {{ compactTimestamp(message.created_at) }}
+        </span>
+        <TimeAgo
+          v-else
+          :is-auto-refresh-enabled="false"
+          :conversation-id="conversation.id"
+          :last-activity-timestamp="conversation.last_activity_at"
+          :created-at-timestamp="conversation.created_at"
+          class="font-440 !text-xs !text-n-slate-10"
+        />
+        <span
+          v-if="isEventBackedConversationRecord"
+          v-tooltip.left="eventOccurredTooltip"
+          :aria-label="eventOccurredTooltip"
+          class="whitespace-nowrap rounded bg-n-alpha-2 px-1 py-0.5 text-[11px] leading-4 text-n-slate-10"
+        >
+          {{ compactTimestamp(record.occurred_at) }}
+        </span>
+      </div>
+    </div>
+
+    <p
+      v-if="showPreview"
+      class="mt-2 line-clamp-1 text-sm leading-5 text-n-slate-12"
+    >
+      {{ previewText }}
+    </p>
+
+    <div class="mt-2 grid grid-cols-3 gap-2">
+      <component
+        :is="item.path ? 'a' : 'span'"
+        v-for="item in metadataItems"
+        :key="item.key"
+        class="text-body-main"
+        v-bind="metadataAttributes(item)"
+        :class="metadataItemClass(item)"
+        @click="stopMetadataLinkClick($event, item)"
+      >
+        <Icon :icon="item.icon" :class="metadataIconClass(item)" />
+        <span class="truncate">{{ item.label }}</span>
+      </component>
+    </div>
+  </article>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownDrawer.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownDrawer.vue
new file mode 100644
index 000000000..0b245a35a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportDrilldownDrawer.vue
@@ -0,0 +1,312 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
+import { formatTime } from '@chatwoot/utils';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import { useReportDrilldown } from '../composables/useReportDrilldown';
+import ReportDrilldownCard from './ReportDrilldownCard.vue';
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  metric: { type: String, default: '' },
+  metricName: { type: String, default: '' },
+  bucketLabel: { type: String, default: '' },
+  bucketTimestamp: { type: Number, default: null },
+  from: { type: Number, default: null },
+  to: { type: Number, default: null },
+  type: { type: String, default: 'account' },
+  id: { type: [String, Number], default: null },
+  groupBy: { type: String, default: '' },
+  businessHours: { type: Boolean, default: false },
+  bucketValue: { type: Number, default: null },
+  isAverageMetric: { type: Boolean, default: false },
+  canPrev: { type: Boolean, default: false },
+  canNext: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['close', 'navigate']);
+
+const { t } = useI18n();
+const drawerRef = ref(null);
+const {
+  records,
+  meta,
+  isFetching,
+  isFetchingMore,
+  hasError,
+  hasRecords,
+  hasMore,
+  open: openDrilldown,
+  close,
+  loadMore,
+} = useReportDrilldown();
+
+let previousActiveElement = null;
+
+const isOpen = computed(() => props.open);
+
+const title = computed(() => props.metricName || '');
+
+const bucketValue = computed(() => {
+  if (props.bucketValue === null) return '';
+
+  return props.isAverageMetric
+    ? formatTime(props.bucketValue)
+    : `${props.bucketValue}`;
+});
+
+// The headline stat already shows the conversation count for conversation-count
+// metrics (e.g. conversations_count), so the subtitle count would be redundant.
+const isStatConversationCount = computed(
+  () =>
+    !props.isAverageMetric &&
+    meta.value.record_type === 'conversation' &&
+    props.bucketValue === meta.value.conversation_count
+);
+
+const conversationCount = computed(() => {
+  if (!meta.value.conversation_count || isStatConversationCount.value)
+    return '';
+
+  return t('REPORT.DRILLDOWN.RESULT_COUNT_CONVERSATION', {
+    count: meta.value.conversation_count,
+  });
+});
+
+// Timing metrics (e.g. reply time) show a duration as the stat, so the underlying
+// message count adds context. Skip it when it just mirrors the conversation count
+// (e.g. first response time has one response message per conversation).
+const messageCount = computed(() => {
+  if (
+    !props.isAverageMetric ||
+    meta.value.record_type !== 'message' ||
+    !meta.value.total_count ||
+    meta.value.total_count === meta.value.conversation_count
+  ) {
+    return '';
+  }
+
+  return t('REPORT.DRILLDOWN.RESULT_COUNT_MESSAGE', {
+    count: meta.value.total_count,
+  });
+});
+
+const subtitle = computed(() =>
+  [props.bucketLabel, conversationCount.value, messageCount.value]
+    .filter(Boolean)
+    .join(' ⋅ ')
+);
+
+const restoreFocus = () => {
+  if (previousActiveElement?.isConnected) {
+    previousActiveElement.focus();
+  }
+  previousActiveElement = null;
+};
+
+const closeDrawer = () => {
+  close();
+  emit('close');
+  restoreFocus();
+};
+
+const recordKey = record =>
+  `${record.record_type}-${record.message?.id || record.conversation?.id}-${
+    record.occurred_at
+  }`;
+
+const rememberActiveElement = () => {
+  if (previousActiveElement) return;
+
+  previousActiveElement =
+    document.activeElement instanceof HTMLElement
+      ? document.activeElement
+      : null;
+};
+
+const focusDrawer = () => {
+  nextTick(() => drawerRef.value?.focus());
+};
+
+const fetchDrilldown = () => {
+  openDrilldown({
+    metric: props.metric,
+    bucketTimestamp: props.bucketTimestamp,
+    from: props.from,
+    to: props.to,
+    type: props.type,
+    id: props.id,
+    groupBy: props.groupBy,
+    businessHours: props.businessHours,
+  });
+};
+
+const navigate = direction => {
+  if (direction < 0 && !props.canPrev) return;
+  if (direction > 0 && !props.canNext) return;
+
+  emit('navigate', direction);
+};
+
+const onKeydown = event => {
+  if (!isOpen.value) return;
+
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    event.stopPropagation();
+    closeDrawer();
+  } else if (event.key === 'ArrowLeft') {
+    navigate(-1);
+  } else if (event.key === 'ArrowRight') {
+    navigate(1);
+  }
+};
+
+useEventListener(document, 'keydown', onKeydown);
+
+watch(
+  () => props.open,
+  isDrawerOpen => {
+    if (!isDrawerOpen) {
+      close();
+      restoreFocus();
+      return;
+    }
+
+    rememberActiveElement();
+    fetchDrilldown();
+    focusDrawer();
+  },
+  { immediate: true }
+);
+
+watch(
+  () => [props.metric, props.bucketTimestamp],
+  () => {
+    if (props.open) fetchDrilldown();
+  }
+);
+
+onBeforeUnmount(() => {
+  restoreFocus();
+});
+</script>
+
+<template>
+  <Teleport 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 right-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="bucketValue"
+                class="mt-1 text-xl font-semibold text-n-slate-12"
+              >
+                {{ bucketValue }}
+              </p>
+              <div
+                class="text-sm text-n-slate-11"
+                :class="{
+                  'mt-2': bucketValue,
+                  'mt-1': !bucketValue,
+                }"
+              >
+                {{ subtitle }}
+              </div>
+            </div>
+            <div class="flex shrink-0 items-center gap-1">
+              <Button
+                ghost
+                slate
+                size="sm"
+                icon="i-ph-caret-left"
+                :disabled="!canPrev"
+                :aria-label="$t('REPORT.DRILLDOWN.PREVIOUS_BUCKET')"
+                @click="navigate(-1)"
+              />
+              <Button
+                ghost
+                slate
+                size="sm"
+                icon="i-ph-caret-right"
+                :disabled="!canNext"
+                :aria-label="$t('REPORT.DRILLDOWN.NEXT_BUCKET')"
+                @click="navigate(1)"
+              />
+              <Button
+                ghost
+                slate
+                size="sm"
+                icon="i-ph-x"
+                :aria-label="$t('REPORT.DRILLDOWN.CLOSE')"
+                @click="closeDrawer"
+              />
+            </div>
+          </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('REPORT.DRILLDOWN.ERROR') }}
+            </div>
+
+            <div
+              v-else-if="!hasRecords"
+              class="flex h-40 items-center justify-center text-sm text-n-slate-10"
+            >
+              {{ $t('REPORT.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('REPORT.DRILLDOWN.LOAD_MORE')"
+                :is-loading="isFetchingMore"
+                @click="loadMore"
+              />
+            </div>
+          </div>
+        </aside>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
index e54c9f53e..7b30ee128 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -69,6 +69,9 @@ export default {
     isAgentType() {
       return this.type === 'agent';
     },
+    selectedFilterId() {
+      return this.selectedFilter?.id || null;
+    },
     reportKeys() {
       return {
         CONVERSATIONS: 'conversations_count',
@@ -181,5 +184,10 @@ export default {
     v-if="filterItemsList.length"
     :group-by="groupBy"
     :report-keys="reportKeys"
+    :from="from"
+    :to="to"
+    :report-type="type"
+    :selected-item-id="selectedFilterId"
+    :business-hours="businessHours"
   />
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownCard.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownCard.spec.js
new file mode 100644
index 000000000..7fda49a36
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownCard.spec.js
@@ -0,0 +1,195 @@
+import { mount } from '@vue/test-utils';
+import ReportDrilldownCard from '../ReportDrilldownCard.vue';
+
+vi.mock('vue-router', () => ({
+  useRoute: () => ({
+    params: {
+      accountId: 1,
+    },
+  }),
+}));
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key, params = {}) => {
+      if (key === 'REPORT.DRILLDOWN.MESSAGE_CREATED_AT') {
+        return `Message created at ${params.time}`;
+      }
+      if (key === 'REPORT.DRILLDOWN.EVENT_OCCURRED_AT') {
+        return `Event occurred at ${params.time}`;
+      }
+      if (key === 'REPORT.DRILLDOWN.INCOMING_MESSAGE') {
+        return 'Incoming message';
+      }
+      if (key === 'REPORT.DRILLDOWN.OUTGOING_MESSAGE') {
+        return 'Outgoing message';
+      }
+      return key;
+    },
+  }),
+}));
+
+vi.mock('shared/helpers/timeHelper', () => ({
+  dynamicTime: timestamp => {
+    const timestamps = {
+      1621103500: '2 minutes ago',
+      1621103400: '4 days ago',
+      1621103700: '4 days ago',
+    };
+    return timestamps[timestamp] || 'less than a minute ago';
+  },
+  shortTimestamp: time => {
+    const timestamps = {
+      '2 minutes ago': '2m',
+      '4 days ago': '4d',
+    };
+    return timestamps[time] || 'now';
+  },
+  dateFormat: timestamp => `date-${timestamp}`,
+}));
+
+describe('ReportDrilldownCard.vue', () => {
+  const record = {
+    record_type: 'message',
+    conversation: {
+      id: 10,
+      display_id: 42,
+      contact_id: 11,
+      contact_name: 'Jane',
+      inbox_id: 12,
+      inbox_name: 'Website',
+      assignee_id: 13,
+      assignee_name: 'Alex',
+      status: 'open',
+      created_at: 1621103400,
+      last_activity_at: 1621103700,
+      last_message: {
+        id: 100,
+        content: 'Latest reply',
+        message_type: 'outgoing',
+        created_at: 1621103600,
+      },
+    },
+    message: {
+      id: 99,
+      content: 'Need help',
+      message_type: 'incoming',
+      created_at: 1621103500,
+    },
+    metric_value: null,
+    occurred_at: 1621103500,
+  };
+
+  const mountCard = (props = {}) =>
+    mount(ReportDrilldownCard, {
+      props: {
+        record,
+        ...props,
+      },
+      global: {
+        mocks: {
+          $t: key => key,
+        },
+      },
+    });
+
+  beforeEach(() => {
+    vi.spyOn(window, 'open').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.restoreAllMocks();
+  });
+
+  it('opens the card conversation link in a new tab', async () => {
+    const wrapper = mountCard();
+
+    expect(wrapper.text()).toContain('#42');
+    expect(wrapper.text()).toContain('Need help');
+    expect(wrapper.find('.i-lucide-arrow-down-left').exists()).toBe(true);
+    expect(wrapper.find('[aria-label="Incoming message"]').exists()).toBe(true);
+
+    await wrapper.find('[role="link"]').trigger('click');
+
+    expect(window.open).toHaveBeenCalledWith(
+      '/app/accounts/1/conversations/42?messageId=99',
+      '_blank',
+      'noopener,noreferrer'
+    );
+  });
+
+  it('renders only message created timestamp for message rows', () => {
+    const wrapper = mountCard();
+    const messageCreatedLabel = wrapper
+      .findAll('[aria-label]')
+      .map(timestamp => timestamp.attributes('aria-label'))
+      .find(label => label.includes('Message created at'));
+
+    expect(wrapper.text()).toContain('2m');
+    expect(wrapper.text()).not.toContain('4d • 4d');
+    expect(messageCreatedLabel).toContain('Message created at');
+  });
+
+  it('renders separate contact, inbox, and agent links', async () => {
+    const wrapper = mountCard();
+    const links = wrapper.findAll('a');
+
+    expect(links.map(link => link.attributes('href'))).toEqual([
+      '/app/accounts/1/contacts/11',
+      '/app/accounts/1/inbox/12',
+      '/app/accounts/1/reports/agents/13',
+    ]);
+    expect(links.every(link => link.attributes('target') === '_blank')).toBe(
+      true
+    );
+    expect(
+      links.every(link => link.classes().includes('text-n-slate-10'))
+    ).toBe(true);
+    expect(
+      links.every(link => !link.classes().includes('text-n-blue-11'))
+    ).toBe(true);
+    expect(wrapper.find('.i-lucide-contact').exists()).toBe(true);
+    expect(wrapper.find('.i-lucide-inbox').exists()).toBe(true);
+    expect(wrapper.find('.i-lucide-user-round').exists()).toBe(true);
+
+    await links[0].trigger('click');
+
+    expect(window.open).not.toHaveBeenCalled();
+  });
+
+  it('renders the last message for conversation rows', () => {
+    const wrapper = mountCard({
+      record: {
+        ...record,
+        record_type: 'conversation',
+        message: null,
+        occurred_at: 1621103500,
+      },
+    });
+
+    expect(wrapper.text()).toContain('Latest reply');
+    expect(wrapper.text()).toContain('4d • 4d');
+  });
+
+  it('renders event time alongside TimeAgo for event-backed conversation rows', () => {
+    const wrapper = mountCard({
+      record: {
+        ...record,
+        record_type: 'conversation',
+        message: null,
+        event_name: 'conversation_bot_handoff',
+        occurred_at: 1621103500,
+      },
+    });
+    const eventOccurredLabel = wrapper
+      .findAll('[aria-label]')
+      .map(timestamp => timestamp.attributes('aria-label'))
+      .find(label => label.includes('Event occurred at'));
+
+    expect(wrapper.text()).toContain('Latest reply');
+    expect(wrapper.text()).toContain('4d • 4d');
+    expect(wrapper.text()).toContain('2m');
+    expect(eventOccurredLabel).toContain('Event occurred at');
+  });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js
new file mode 100644
index 000000000..d6cec362f
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/ReportDrilldownDrawer.spec.js
@@ -0,0 +1,329 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { formatTime } from '@chatwoot/utils';
+import ReportsAPI from 'dashboard/api/reports';
+import ReportDrilldownDrawer from '../ReportDrilldownDrawer.vue';
+
+vi.mock('dashboard/api/reports', () => ({
+  default: {
+    getDrilldown: vi.fn(),
+  },
+}));
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key, params = {}) => {
+      if (key === 'REPORT.DRILLDOWN.TITLE') {
+        return `${params.metric} details`;
+      }
+      if (key === 'REPORT.DRILLDOWN.RESULT_COUNT_CONVERSATION') {
+        return `${params.count} conversations`;
+      }
+      if (key === 'REPORT.DRILLDOWN.RESULT_COUNT_MESSAGE') {
+        return `${params.count} messages`;
+      }
+      return key;
+    },
+  }),
+}));
+
+describe('ReportDrilldownDrawer.vue', () => {
+  const request = {
+    metric: 'incoming_messages_count',
+    metricName: 'Messages received',
+    bucketLabel: '20-May',
+    bucketTimestamp: 1621103400,
+    from: 1621103400,
+    to: 1621621800,
+    type: 'account',
+    groupBy: 'day',
+    businessHours: false,
+  };
+
+  const payload = [
+    {
+      record_type: 'message',
+      conversation: {
+        id: 10,
+        display_id: 42,
+        contact_id: 11,
+        contact_name: 'Jane',
+        inbox_id: 12,
+        inbox_name: 'Website',
+        assignee_id: 13,
+        assignee_name: 'Alex',
+        status: 'open',
+        created_at: 1621103400,
+        last_activity_at: 1621103700,
+        last_message: {
+          id: 100,
+          content: 'Latest reply',
+          message_type: 'outgoing',
+          created_at: 1621103600,
+        },
+      },
+      message: {
+        id: 99,
+        content: 'Need help',
+        message_type: 'incoming',
+        created_at: 1621103500,
+      },
+      metric_value: null,
+      occurred_at: 1621103500,
+    },
+  ];
+
+  const mountDrawer = options =>
+    mount(ReportDrilldownDrawer, {
+      props: { open: true, ...request, ...options?.props },
+      attachTo: options?.attachTo,
+      global: {
+        stubs: {
+          Teleport: true,
+          Transition: false,
+          Spinner: true,
+          Button: {
+            props: ['label'],
+            emits: ['click'],
+            template:
+              '<button @click="$emit(\'click\')">{{ label }}<slot /></button>',
+          },
+          ReportDrilldownCard: {
+            props: ['record'],
+            template:
+              '<div data-testid="drilldown-card">#{{ record.conversation.display_id }}</div>',
+          },
+        },
+        mocks: {
+          $t: key => key,
+        },
+      },
+    });
+
+  beforeEach(() => {
+    ReportsAPI.getDrilldown.mockResolvedValue({
+      data: {
+        meta: {
+          total_count: 1,
+          current_page: 1,
+          record_type: 'message',
+          conversation_count: 1,
+        },
+        payload,
+      },
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.restoreAllMocks();
+  });
+
+  it('loads and renders drilldown cards for the request', async () => {
+    const wrapper = mountDrawer();
+    await flushPromises();
+
+    expect(ReportsAPI.getDrilldown).toHaveBeenCalledWith(
+      expect.objectContaining({
+        metric: 'incoming_messages_count',
+        bucketTimestamp: 1621103400,
+        page: 1,
+      })
+    );
+    expect(wrapper.text()).toContain('Messages received');
+    expect(wrapper.text()).toContain('1 conversations');
+    expect(wrapper.find('[data-testid="drilldown-card"]').text()).toBe('#42');
+  });
+
+  it('shows the bucket aggregate value for average metrics', async () => {
+    const wrapper = mountDrawer({
+      props: {
+        metric: 'avg_first_response_time',
+        metricName: 'First response time',
+        isAverageMetric: true,
+        bucketValue: 2580,
+      },
+    });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain(formatTime(2580));
+  });
+
+  it('shows both conversation and message counts when they differ (reply time)', async () => {
+    ReportsAPI.getDrilldown.mockResolvedValue({
+      data: {
+        meta: {
+          total_count: 8,
+          current_page: 1,
+          record_type: 'message',
+          conversation_count: 5,
+        },
+        payload,
+      },
+    });
+    const wrapper = mountDrawer({
+      props: {
+        metric: 'reply_time',
+        isAverageMetric: true,
+        bucketValue: 2580,
+      },
+    });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain('5 conversations');
+    expect(wrapper.text()).toContain('8 messages');
+  });
+
+  it('hides the message count when it matches the conversation count (first response time)', async () => {
+    ReportsAPI.getDrilldown.mockResolvedValue({
+      data: {
+        meta: {
+          total_count: 5,
+          current_page: 1,
+          record_type: 'message',
+          conversation_count: 5,
+        },
+        payload,
+      },
+    });
+    const wrapper = mountDrawer({
+      props: {
+        metric: 'avg_first_response_time',
+        isAverageMetric: true,
+        bucketValue: 2580,
+      },
+    });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain('5 conversations');
+    expect(wrapper.text()).not.toContain('messages');
+  });
+
+  it('shows the plain count as the bucket value for count metrics', async () => {
+    const wrapper = mountDrawer({ props: { bucketValue: 128 } });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain('128');
+    expect(wrapper.text()).not.toContain(formatTime(128));
+  });
+
+  it('hides the redundant subtitle count for conversation-count metrics', async () => {
+    ReportsAPI.getDrilldown.mockResolvedValue({
+      data: {
+        meta: {
+          total_count: 5,
+          current_page: 1,
+          record_type: 'conversation',
+          conversation_count: 5,
+        },
+        payload,
+      },
+    });
+    const wrapper = mountDrawer({
+      props: { metric: 'conversations_count', bucketValue: 5 },
+    });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain('5');
+    expect(wrapper.text()).not.toContain('conversations');
+  });
+
+  it('keeps the subtitle count when it differs from the stat value', async () => {
+    ReportsAPI.getDrilldown.mockResolvedValue({
+      data: {
+        meta: {
+          total_count: 8,
+          current_page: 1,
+          record_type: 'conversation',
+          conversation_count: 5,
+        },
+        payload,
+      },
+    });
+    const wrapper = mountDrawer({
+      props: { metric: 'resolutions_count', bucketValue: 8 },
+    });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain('5 conversations');
+  });
+
+  it('emits close when the drawer close button is clicked', async () => {
+    const wrapper = mountDrawer();
+    await flushPromises();
+
+    await wrapper.get('[aria-label="REPORT.DRILLDOWN.CLOSE"]').trigger('click');
+
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+
+  it('emits navigate when the next button is clicked', async () => {
+    const wrapper = mountDrawer({ props: { canNext: true } });
+    await flushPromises();
+
+    await wrapper
+      .get('[aria-label="REPORT.DRILLDOWN.NEXT_BUCKET"]')
+      .trigger('click');
+
+    expect(wrapper.emitted('navigate')).toStrictEqual([[1]]);
+  });
+
+  it('does not emit navigate past the available range', async () => {
+    const wrapper = mountDrawer({ props: { canPrev: false } });
+    await flushPromises();
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+
+    expect(wrapper.emitted('navigate')).toBeUndefined();
+  });
+
+  it('moves focus into the drawer when opened', async () => {
+    const target = document.createElement('div');
+    document.body.appendChild(target);
+    const wrapper = mountDrawer({ attachTo: target });
+    await flushPromises();
+    await nextTick();
+
+    expect(document.activeElement).toBe(
+      wrapper.find('[role="dialog"]').element
+    );
+
+    wrapper.unmount();
+    target.remove();
+  });
+
+  it('closes on Escape even when focus is outside the drawer', async () => {
+    const target = document.createElement('div');
+    document.body.appendChild(target);
+    const wrapper = mountDrawer({ attachTo: target });
+    await flushPromises();
+
+    document.body.focus();
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+
+    expect(wrapper.emitted('close')).toBeTruthy();
+
+    wrapper.unmount();
+    target.remove();
+  });
+
+  it('restores focus to the previously focused element when closed', async () => {
+    const opener = document.createElement('button');
+    const target = document.createElement('div');
+    document.body.appendChild(opener);
+    document.body.appendChild(target);
+    opener.focus();
+
+    const wrapper = mountDrawer({ attachTo: target });
+    await flushPromises();
+    await nextTick();
+
+    await wrapper.get('[aria-label="REPORT.DRILLDOWN.CLOSE"]').trigger('click');
+
+    expect(document.activeElement).toBe(opener);
+
+    wrapper.unmount();
+    target.remove();
+    opener.remove();
+  });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/composables/specs/useReportDrilldown.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/composables/specs/useReportDrilldown.spec.js
new file mode 100644
index 000000000..b83742b9b
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/composables/specs/useReportDrilldown.spec.js
@@ -0,0 +1,124 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import ReportsAPI from 'dashboard/api/reports';
+import { useReportDrilldown } from '../useReportDrilldown';
+
+vi.mock('dashboard/api/reports', () => ({
+  default: {
+    getDrilldown: vi.fn(),
+  },
+}));
+
+const deferredPromise = () => {
+  let resolve;
+  let reject;
+  const promise = new Promise((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise;
+    reject = rejectPromise;
+  });
+
+  return { promise, resolve, reject };
+};
+
+const drilldownRequest = overrides => ({
+  metric: 'conversations_count',
+  bucketTimestamp: 1,
+  from: 1621103400,
+  to: 1621621800,
+  type: 'account',
+  groupBy: 'day',
+  businessHours: false,
+  ...overrides,
+});
+
+describe('useReportDrilldown', () => {
+  const mountComposable = () =>
+    mount({
+      setup() {
+        return useReportDrilldown();
+      },
+      template: '<div />',
+    });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('does not request drilldown again for an identical active request', async () => {
+    const request = deferredPromise();
+    ReportsAPI.getDrilldown.mockReturnValue(request.promise);
+
+    const wrapper = mountComposable();
+    wrapper.vm.open(drilldownRequest());
+    wrapper.vm.open(drilldownRequest());
+
+    expect(ReportsAPI.getDrilldown).toHaveBeenCalledTimes(1);
+  });
+
+  it('aborts an in-flight request when a newer request is opened', async () => {
+    const firstRequest = deferredPromise();
+    const secondRequest = deferredPromise();
+    let firstSignal;
+
+    ReportsAPI.getDrilldown
+      .mockImplementationOnce(({ signal }) => {
+        firstSignal = signal;
+        return firstRequest.promise;
+      })
+      .mockReturnValueOnce(secondRequest.promise);
+
+    const wrapper = mountComposable();
+    wrapper.vm.open(drilldownRequest({ bucketTimestamp: 1 }));
+    wrapper.vm.open(drilldownRequest({ bucketTimestamp: 2 }));
+
+    expect(firstSignal.aborted).toBe(true);
+  });
+
+  it('passes an abort signal to drilldown requests', async () => {
+    const request = deferredPromise();
+    ReportsAPI.getDrilldown.mockReturnValue(request.promise);
+
+    const wrapper = mountComposable();
+    wrapper.vm.open(drilldownRequest());
+
+    expect(ReportsAPI.getDrilldown).toHaveBeenCalledWith(
+      expect.objectContaining({
+        page: 1,
+        signal: expect.any(AbortSignal),
+      })
+    );
+  });
+
+  it('ignores stale responses when a newer request is opened first', async () => {
+    const firstRequest = deferredPromise();
+    const secondRequest = deferredPromise();
+    ReportsAPI.getDrilldown
+      .mockReturnValueOnce(firstRequest.promise)
+      .mockReturnValueOnce(secondRequest.promise);
+
+    const wrapper = mountComposable();
+    wrapper.vm.open(drilldownRequest({ bucketTimestamp: 1 }));
+    wrapper.vm.open(drilldownRequest({ bucketTimestamp: 2 }));
+
+    secondRequest.resolve({
+      data: {
+        meta: { current_page: 1, total_count: 1 },
+        payload: [{ id: 'second' }],
+      },
+    });
+    await flushPromises();
+
+    expect(wrapper.vm.records).toEqual([{ id: 'second' }]);
+    expect(wrapper.vm.meta).toEqual({ current_page: 1, total_count: 1 });
+
+    firstRequest.resolve({
+      data: {
+        meta: { current_page: 1, total_count: 1 },
+        payload: [{ id: 'first' }],
+      },
+    });
+    await flushPromises();
+
+    expect(wrapper.vm.records).toEqual([{ id: 'second' }]);
+    expect(wrapper.vm.meta).toEqual({ current_page: 1, total_count: 1 });
+  });
+});
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js b/app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js
new file mode 100644
index 000000000..7c37cd9cc
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown.js
@@ -0,0 +1,138 @@
+import { computed, ref } from 'vue';
+import ReportsAPI from 'dashboard/api/reports';
+
+export function useReportDrilldown() {
+  const activeRequest = ref(null);
+  const records = ref([]);
+  const meta = ref({});
+  const isFetching = ref(false);
+  const isFetchingMore = ref(false);
+  const hasError = ref(false);
+  let requestToken = 0;
+  let activeRequestController = null;
+  let activeRequestFingerprint = null;
+
+  const hasRecords = computed(() => records.value.length > 0);
+  const hasMore = computed(() => {
+    return records.value.length < (meta.value.total_count || 0);
+  });
+
+  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 abortActiveRequest = () => {
+    if (!activeRequestController) return;
+
+    activeRequestController.abort();
+    activeRequestController = null;
+  };
+
+  const isAbortError = error =>
+    error?.name === 'AbortError' ||
+    error?.name === 'CanceledError' ||
+    error?.code === 'ERR_CANCELED';
+
+  const fetchPage = async (page, token = requestToken) => {
+    if (!activeRequest.value) return;
+
+    const request = activeRequest.value;
+    const controller = new AbortController();
+    const loadingState = page === 1 ? isFetching : isFetchingMore;
+    activeRequestController = controller;
+    loadingState.value = true;
+    hasError.value = false;
+
+    try {
+      const response = await ReportsAPI.getDrilldown({
+        ...request,
+        page,
+        signal: controller.signal,
+      });
+      if (!isCurrentRequest(token)) return;
+
+      meta.value = response.data.meta || {};
+      records.value =
+        page === 1
+          ? response.data.payload || []
+          : [...records.value, ...(response.data.payload || [])];
+    } catch (error) {
+      if (!isCurrentRequest(token) || isAbortError(error)) return;
+
+      hasError.value = true;
+    } finally {
+      if (activeRequestController === controller) {
+        activeRequestController = null;
+      }
+
+      if (isCurrentRequest(token)) {
+        loadingState.value = false;
+      }
+    }
+  };
+
+  const open = async request => {
+    const fingerprint = requestFingerprint(request);
+    if (activeRequestFingerprint === fingerprint) return;
+
+    abortActiveRequest();
+    requestToken += 1;
+    activeRequestFingerprint = fingerprint;
+    activeRequest.value = request;
+    records.value = [];
+    meta.value = {};
+    hasError.value = false;
+    isFetchingMore.value = false;
+    await fetchPage(1, requestToken);
+  };
+
+  const close = () => {
+    abortActiveRequest();
+    requestToken += 1;
+    activeRequestFingerprint = null;
+    activeRequest.value = null;
+    records.value = [];
+    meta.value = {};
+    hasError.value = false;
+    isFetching.value = false;
+    isFetchingMore.value = false;
+  };
+
+  const loadMore = () => {
+    if (
+      !activeRequest.value ||
+      !hasMore.value ||
+      isFetching.value ||
+      isFetchingMore.value
+    ) {
+      return;
+    }
+
+    fetchPage((meta.value.current_page || 1) + 1, requestToken);
+  };
+
+  return {
+    activeRequest,
+    records,
+    meta,
+    isFetching,
+    isFetchingMore,
+    hasError,
+    hasRecords,
+    hasMore,
+    open,
+    close,
+    loadMore,
+  };
+}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/specs/ReportContainer.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/specs/ReportContainer.spec.js
new file mode 100644
index 000000000..b45102611
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/specs/ReportContainer.spec.js
@@ -0,0 +1,179 @@
+import { shallowMount } from '@vue/test-utils';
+import { useAlert } from 'dashboard/composables';
+import ReportContainer from '../ReportContainer.vue';
+
+vi.mock('dashboard/composables', () => ({
+  useAlert: vi.fn(),
+}));
+
+vi.mock('dashboard/composables/useReportMetrics', () => ({
+  useReportMetrics: () => ({
+    calculateTrend: () => 0,
+    isAverageMetricType: key =>
+      ['avg_first_response_time', 'avg_resolution_time', 'reply_time'].includes(
+        key
+      ),
+  }),
+}));
+
+describe('ReportContainer.vue', () => {
+  const mountComponent = ({
+    dataPoint = { value: 2, timestamp: 1621103400 },
+    data,
+    reportKey = 'conversations_count',
+    role = 'administrator',
+  } = {}) =>
+    shallowMount(ReportContainer, {
+      props: {
+        from: 1621103400,
+        to: 1621621800,
+        groupBy: { period: 'day' },
+        reportType: 'inbox',
+        selectedItemId: 1,
+        businessHours: true,
+        reportKeys: {
+          CONVERSATIONS: reportKey,
+        },
+      },
+      global: {
+        mocks: {
+          $t: key => key,
+          $store: {
+            getters: {
+              getAccountReports: {
+                isFetching: {
+                  [reportKey]: false,
+                },
+                data: {
+                  [reportKey]: data || [dataPoint],
+                },
+              },
+              getCurrentRole: role,
+            },
+          },
+        },
+        stubs: {
+          ChartStats: true,
+          ReportDrilldownDrawer: {
+            name: 'ReportDrilldownDrawer',
+            props: [
+              'open',
+              'metric',
+              'metricName',
+              'bucketLabel',
+              'bucketTimestamp',
+              'bucketValue',
+              'isAverageMetric',
+              'from',
+              'to',
+              'type',
+              'id',
+              'groupBy',
+              'businessHours',
+              'canPrev',
+              'canNext',
+            ],
+            emits: ['navigate', 'close'],
+            template: '<div />',
+          },
+          BarChart: {
+            name: 'BarChart',
+            props: ['collection', 'chartOptions', 'clickable'],
+            emits: ['elementClick'],
+            template:
+              '<button data-test-id="bar-chart" @click="$emit(\'elementClick\', { dataIndex: 0, label: \'20-May\', value: 2 })" />',
+          },
+        },
+      },
+    });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('opens a drilldown request with report context when a non-zero bar is clicked', async () => {
+    const wrapper = mountComponent();
+
+    await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
+
+    const drawer = wrapper.findComponent({ name: 'ReportDrilldownDrawer' });
+    expect(drawer.props('open')).toBe(true);
+    expect(drawer.props()).toMatchObject({
+      metric: 'conversations_count',
+      metricName: 'REPORT.METRICS.CONVERSATIONS.NAME',
+      bucketLabel: '15-May',
+      bucketTimestamp: 1621103400,
+      from: 1621103400,
+      to: 1621621800,
+      type: 'inbox',
+      id: 1,
+      groupBy: 'day',
+      businessHours: true,
+    });
+  });
+
+  it('shows an alert and does not open drilldown for non-admin users', async () => {
+    const wrapper = mountComponent({ role: 'agent' });
+
+    await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
+
+    expect(useAlert).toHaveBeenCalledWith('REPORT.DRILLDOWN.ADMIN_ONLY');
+    expect(
+      wrapper.findComponent({ name: 'ReportDrilldownDrawer' }).props('open')
+    ).toBe(false);
+  });
+
+  it('does not open drilldown for zero-value count bars', async () => {
+    const wrapper = mountComponent({
+      dataPoint: { value: 0, timestamp: 1621103400 },
+    });
+
+    await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
+
+    expect(
+      wrapper.findComponent({ name: 'ReportDrilldownDrawer' }).props('open')
+    ).toBe(false);
+  });
+
+  it('opens average metric drilldown when the bucket has contributing records', async () => {
+    const wrapper = mountComponent({
+      reportKey: 'avg_first_response_time',
+      dataPoint: { value: 90, count: 2, timestamp: 1621103400 },
+    });
+
+    await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
+
+    const drawer = wrapper.findComponent({ name: 'ReportDrilldownDrawer' });
+    expect(drawer.props('open')).toBe(true);
+    expect(drawer.props()).toMatchObject({
+      metric: 'avg_first_response_time',
+      bucketTimestamp: 1621103400,
+    });
+  });
+
+  it('navigates to adjacent drillable buckets within the report range', async () => {
+    const wrapper = mountComponent({
+      data: [
+        { value: 2, timestamp: 1621103400 },
+        { value: 0, timestamp: 1621189800 },
+        { value: 5, timestamp: 1621276200 },
+      ],
+    });
+
+    await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
+
+    const drawer = wrapper.findComponent({ name: 'ReportDrilldownDrawer' });
+    // Opened on the first bucket: no previous, but a later drillable bucket exists.
+    expect(drawer.props('bucketTimestamp')).toBe(1621103400);
+    expect(drawer.props('canPrev')).toBe(false);
+    expect(drawer.props('canNext')).toBe(true);
+
+    // Skips the zero-value middle bucket and lands on the last drillable one.
+    drawer.vm.$emit('navigate', 1);
+    await wrapper.vm.$nextTick();
+
+    expect(drawer.props('bucketTimestamp')).toBe(1621276200);
+    expect(drawer.props('canPrev')).toBe(true);
+    expect(drawer.props('canNext')).toBe(false);
+  });
+});
diff --git a/app/javascript/shared/components/charts/BarChart.vue b/app/javascript/shared/components/charts/BarChart.vue
index dd01e586d..5baa856e8 100644
--- a/app/javascript/shared/components/charts/BarChart.vue
+++ b/app/javascript/shared/components/charts/BarChart.vue
@@ -19,8 +19,14 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  clickable: {
+    type: Boolean,
+    default: false,
+  },
 });
 
+const emit = defineEmits(['elementClick']);
+
 ChartJS.register(Title, Tooltip, BarElement, CategoryScale, LinearScale);
 
 const fontFamily =
@@ -67,8 +73,39 @@ const defaultChartOptions = {
   },
 };
 
+const handleClick = (event, elements, chart) => {
+  props.chartOptions.onClick?.(event, elements, chart);
+
+  if (!props.clickable || !elements.length) return;
+
+  const { datasetIndex, index } = elements[0];
+  const dataset = props.collection.datasets?.[datasetIndex] || {};
+
+  emit('elementClick', {
+    datasetIndex,
+    dataIndex: index,
+    dataset,
+    label: props.collection.labels?.[index],
+    value: dataset.data?.[index],
+  });
+};
+
+const handleHover = (event, elements, chart) => {
+  props.chartOptions.onHover?.(event, elements, chart);
+
+  if (!event?.native?.target) return;
+
+  event.native.target.style.cursor =
+    props.clickable && elements.length ? 'pointer' : 'default';
+};
+
 const options = computed(() => {
-  return { ...defaultChartOptions, ...props.chartOptions };
+  return {
+    ...defaultChartOptions,
+    ...props.chartOptions,
+    onClick: handleClick,
+    onHover: handleHover,
+  };
 });
 </script>
 
diff --git a/app/javascript/shared/components/specs/BarChart.spec.js b/app/javascript/shared/components/specs/BarChart.spec.js
new file mode 100644
index 000000000..dc2774ace
--- /dev/null
+++ b/app/javascript/shared/components/specs/BarChart.spec.js
@@ -0,0 +1,52 @@
+import { shallowMount } from '@vue/test-utils';
+import BarChart from '../charts/BarChart.vue';
+
+vi.mock('vue-chartjs', () => ({
+  Bar: {
+    name: 'Bar',
+    props: ['data', 'options'],
+    template: '<canvas />',
+  },
+}));
+
+describe('BarChart.vue', () => {
+  it('emits the clicked chart element when clickable', () => {
+    const wrapper = shallowMount(BarChart, {
+      props: {
+        clickable: true,
+        collection: {
+          labels: ['20-May'],
+          datasets: [{ type: 'bar', data: [3] }],
+        },
+      },
+    });
+
+    const options = wrapper.findComponent({ name: 'Bar' }).props('options');
+    options.onClick({}, [{ datasetIndex: 0, index: 0 }], {});
+
+    expect(wrapper.emitted('elementClick')[0][0]).toEqual({
+      datasetIndex: 0,
+      dataIndex: 0,
+      dataset: { type: 'bar', data: [3] },
+      label: '20-May',
+      value: 3,
+    });
+  });
+
+  it('does not emit when chart is not clickable', () => {
+    const wrapper = shallowMount(BarChart, {
+      props: {
+        clickable: false,
+        collection: {
+          labels: ['20-May'],
+          datasets: [{ type: 'bar', data: [3] }],
+        },
+      },
+    });
+
+    const options = wrapper.findComponent({ name: 'Bar' }).props('options');
+    options.onClick({}, [{ datasetIndex: 0, index: 0 }], {});
+
+    expect(wrapper.emitted('elementClick')).toBeUndefined();
+  });
+});
diff --git a/app/services/reports/drilldown_timestamp_validator.rb b/app/services/reports/drilldown_timestamp_validator.rb
new file mode 100644
index 000000000..d6371c2d9
--- /dev/null
+++ b/app/services/reports/drilldown_timestamp_validator.rb
@@ -0,0 +1,53 @@
+module Reports::DrilldownTimestampValidator
+  extend TimezoneHelper
+
+  TIMESTAMP_PARAMS = %i[bucket_timestamp since until].freeze
+  DEFAULT_GROUP_BY = V2::Reports::DrilldownBuilder::DEFAULT_GROUP_BY
+  SUPPORTED_GROUP_BY = V2::Reports::DrilldownBuilder::SUPPORTED_GROUP_BY
+
+  module_function
+
+  def valid?(params)
+    timestamps = TIMESTAMP_PARAMS.index_with { |param| integer_param(params[param]) }
+    return false if timestamps.values.any?(&:nil?)
+    return false unless timestamps[:since] < timestamps[:until]
+
+    bucket_overlaps_requested_range?(params, timestamps)
+  end
+
+  def integer_param(value)
+    return unless value.to_s.match?(/\A\d+\z/)
+
+    value.to_i
+  end
+
+  def bucket_overlaps_requested_range?(params, timestamps)
+    bucket_start = Time.zone.at(timestamps[:bucket_timestamp]).in_time_zone(timezone(params))
+    bucket_end = bucket_end_for(bucket_start, group_by(params))
+    requested_start = Time.zone.at(timestamps[:since])
+    requested_end = Time.zone.at(timestamps[:until])
+
+    bucket_start < requested_end && bucket_end > requested_start
+  rescue ArgumentError, RangeError
+    false
+  end
+
+  def bucket_end_for(bucket_start, group_by)
+    {
+      'hour' => bucket_start + 1.hour,
+      'day' => bucket_start + 1.day,
+      'week' => bucket_start + 1.week,
+      'month' => bucket_start + 1.month,
+      'year' => bucket_start + 1.year
+    }.fetch(group_by)
+  end
+
+  def group_by(params)
+    group = params[:group_by].to_s
+    SUPPORTED_GROUP_BY.include?(group) ? group : DEFAULT_GROUP_BY
+  end
+
+  def timezone(params)
+    timezone_name_from_offset(params[:timezone_offset])
+  end
+end
diff --git a/config/initializers/rack_attack.rb b/config/initializers/rack_attack.rb
index ca818c080..e08a6a6e1 100644
--- a/config/initializers/rack_attack.rb
+++ b/config/initializers/rack_attack.rb
@@ -224,8 +224,30 @@ class Rack::Attack
     match_data[:account_id] if match_data.present?
   end
 
+  reports_api_user_level_limit = ENV.fetch('RATE_LIMIT_REPORTS_API_USER_LEVEL', '100').to_i
+  reports_drilldown_api_user_level_limit = ENV.fetch(
+    'RATE_LIMIT_REPORTS_DRILLDOWN_API_USER_LEVEL',
+    [(reports_api_user_level_limit / 10), 1].max
+  ).to_i
+
+  # Throttle drilldown requests by individual user (based on uid)
+  throttle('/api/v2/accounts/:account_id/reports/drilldown/user',
+           limit: reports_drilldown_api_user_level_limit, period: 1.minute) do |req|
+    match_data = %r{\A/api/v2/accounts/(?<account_id>\d+)/reports/drilldown\z}.match(req.path_without_extensions)
+    next unless match_data.present? && req.get?
+
+    # Extract user identification (uid for web, api_access_token for API requests)
+    user_uid = req.get_header('HTTP_UID')
+    api_access_token = req.get_header('HTTP_API_ACCESS_TOKEN') || req.get_header('api_access_token')
+
+    # Use uid if present, otherwise fallback to api_access_token for tracking
+    user_identifier = user_uid.presence || api_access_token.presence
+
+    "#{user_identifier}:#{match_data[:account_id]}" if user_identifier.present?
+  end
+
   # Throttle by individual user (based on uid)
-  throttle('/api/v2/accounts/:account_id/reports/user', limit: ENV.fetch('RATE_LIMIT_REPORTS_API_USER_LEVEL', '100').to_i, period: 1.minute) do |req|
+  throttle('/api/v2/accounts/:account_id/reports/user', limit: reports_api_user_level_limit, period: 1.minute) do |req|
     match_data = %r{/api/v2/accounts/(?<account_id>\d+)/reports}.match(req.path)
     # Extract user identification (uid for web, api_access_token for API requests)
     user_uid = req.get_header('HTTP_UID')
diff --git a/config/routes.rb b/config/routes.rb
index 64e1df440..7c41b73cd 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -501,6 +501,7 @@ Rails.application.routes.draw do
               get :conversations
               get :conversations_summary
               get :conversation_traffic
+              get :drilldown
               get :bot_metrics
               get :inbox_label_matrix
               get :first_response_time_distribution
diff --git a/spec/builders/v2/reports/drilldown_builder_spec.rb b/spec/builders/v2/reports/drilldown_builder_spec.rb
new file mode 100644
index 000000000..babeabc58
--- /dev/null
+++ b/spec/builders/v2/reports/drilldown_builder_spec.rb
@@ -0,0 +1,230 @@
+require 'rails_helper'
+
+RSpec.describe V2::Reports::DrilldownBuilder do
+  subject(:drilldown) { described_class.new(account, params).build }
+
+  let(:account) { create(:account) }
+  let(:inbox) { create(:inbox, account: account) }
+  let(:current_time) { Time.zone.parse('2026-05-20 12:00') }
+  let(:bucket_start) { current_time.beginning_of_day }
+  let(:bucket_end) { bucket_start + 1.day }
+  let(:metric) { 'conversations_count' }
+  let(:params) do
+    {
+      metric: metric,
+      type: filter_type,
+      id: filter_id,
+      since: bucket_start.to_i.to_s,
+      until: bucket_end.to_i.to_s,
+      bucket_timestamp: bucket_start.to_i.to_s,
+      group_by: 'day',
+      timezone_offset: '0',
+      business_hours: false
+    }
+  end
+  let(:filter_type) { :account }
+  let(:filter_id) { nil }
+
+  before do
+    travel_to current_time
+  end
+
+  describe '#build' do
+    context 'with conversation count metric' do
+      it 'returns conversations created in the clicked bucket' do
+        conversation = create(
+          :conversation,
+          account: account,
+          inbox: inbox,
+          created_at: bucket_start + 2.hours,
+          last_activity_at: bucket_start + 4.hours
+        )
+        last_message = create(
+          :message,
+          account: account,
+          inbox: inbox,
+          conversation: conversation,
+          message_type: :incoming,
+          content: 'Latest customer note',
+          created_at: bucket_start + 3.hours
+        )
+        conversation.update!(last_activity_at: bucket_start + 4.hours)
+        create(:conversation, account: account, inbox: inbox, created_at: bucket_start - 1.hour)
+
+        expect(drilldown[:meta]).to include(metric: 'conversations_count', record_type: 'conversation', total_count: 1)
+        expect(drilldown[:meta][:bucket]).to eq({ since: bucket_start.to_i, until: bucket_end.to_i })
+        expect(drilldown[:payload].first[:conversation][:display_id]).to eq(conversation.display_id)
+        expect(drilldown[:payload].first[:conversation][:created_at]).to eq(
+          (bucket_start + 2.hours).to_i
+        )
+        expect(drilldown[:payload].first[:conversation][:last_activity_at]).to eq(
+          (bucket_start + 4.hours).to_i
+        )
+        expect(drilldown[:payload].first[:conversation][:last_message][:id]).to eq(last_message.id)
+        expect(drilldown[:payload].first[:conversation][:last_message][:content]).to eq('Latest customer note')
+      end
+
+      it 'loads latest messages in one query for the page conversations' do
+        first_conversation = create(:conversation, account: account, inbox: inbox, created_at: bucket_start + 2.hours)
+        second_conversation = create(:conversation, account: account, inbox: inbox, created_at: bucket_start + 3.hours)
+        first_message = create(:message, account: account, inbox: inbox, conversation: first_conversation, created_at: bucket_start + 4.hours)
+        second_message = create(:message, account: account, inbox: inbox, conversation: second_conversation, created_at: bucket_start + 5.hours)
+
+        message_queries = []
+        subscriber = ActiveSupport::Notifications.subscribe('sql.active_record') do |_name, _started, _finished, _unique_id, payload|
+          message_queries << payload[:sql] if payload[:sql].match?(/\ASELECT .*FROM "messages"/m) && !payload[:cached]
+        end
+
+        payload = drilldown[:payload]
+
+        expect(payload.map { |row| row[:conversation][:last_message][:id] }).to contain_exactly(
+          first_message.id,
+          second_message.id
+        )
+        expect(message_queries.size).to eq(1)
+      ensure
+        ActiveSupport::Notifications.unsubscribe(subscriber) if subscriber
+      end
+
+      context 'when filtering by agent' do
+        let(:metric) { 'conversations_count' }
+        let(:filter_type) { :agent }
+        let(:filter_id) { agent.id }
+        let(:agent) { create(:user, account: account) }
+        let(:other_agent) { create(:user, account: account) }
+
+        it 'returns only conversations assigned to the selected agent' do
+          conversation = create(:conversation, account: account, inbox: inbox, assignee: agent, created_at: bucket_start + 2.hours)
+          create(:conversation, account: account, inbox: inbox, assignee: other_agent, created_at: bucket_start + 3.hours)
+
+          expect(drilldown[:meta][:total_count]).to eq(1)
+          expect(drilldown[:payload].first[:conversation][:id]).to eq(conversation.id)
+        end
+      end
+    end
+
+    context 'with message count metric' do
+      let(:metric) { 'incoming_messages_count' }
+
+      it 'returns messages created in the clicked bucket' do
+        conversation = create(:conversation, account: account, inbox: inbox)
+        message = create(:message, account: account, inbox: inbox, conversation: conversation,
+                                   message_type: :incoming, content: 'Need help', created_at: bucket_start + 1.hour)
+        create(:message, account: account, inbox: inbox, conversation: conversation,
+                         message_type: :outgoing, created_at: bucket_start + 2.hours)
+
+        expect(drilldown[:meta]).to include(record_type: 'message', total_count: 1)
+        expect(drilldown[:payload].first[:record_type]).to eq('message')
+        expect(drilldown[:payload].first[:message][:id]).to eq(message.id)
+        expect(drilldown[:payload].first[:message][:content]).to eq('Need help')
+      end
+    end
+
+    context 'with first response time metric' do
+      let(:metric) { 'avg_first_response_time' }
+      let(:agent) { create(:user, account: account) }
+
+      it 'infers the related outgoing message and uses the selected metric value' do
+        conversation = create(:conversation, account: account, inbox: inbox)
+        message = create(:message, account: account, inbox: inbox, conversation: conversation,
+                                   sender: agent, message_type: :outgoing, created_at: bucket_start + 2.hours)
+        create(:reporting_event, account: account, inbox: inbox, conversation: conversation, user: agent,
+                                 name: 'first_response', value: 120, value_in_business_hours: 45,
+                                 created_at: bucket_start + 2.hours, event_end_time: message.created_at)
+
+        params[:business_hours] = true
+
+        expect(drilldown[:meta]).to include(record_type: 'message', total_count: 1)
+        expect(drilldown[:payload].first[:record_type]).to eq('message')
+        expect(drilldown[:payload].first[:message][:id]).to eq(message.id)
+        expect(drilldown[:payload].first[:metric_value]).to eq(45)
+      end
+
+      it 'loads inferred and latest messages in two queries for the page events' do
+        first_conversation = create(:conversation, account: account, inbox: inbox)
+        second_conversation = create(:conversation, account: account, inbox: inbox)
+        first_message = create(:message, account: account, inbox: inbox, conversation: first_conversation,
+                                         sender: agent, message_type: :outgoing, created_at: bucket_start + 2.hours)
+        second_message = create(:message, account: account, inbox: inbox, conversation: second_conversation,
+                                          sender: agent, message_type: :outgoing, created_at: bucket_start + 3.hours)
+        create(:reporting_event, account: account, inbox: inbox, conversation: first_conversation, user: agent,
+                                 name: 'first_response', value: 120, created_at: bucket_start + 2.hours,
+                                 event_end_time: first_message.created_at)
+        create(:reporting_event, account: account, inbox: inbox, conversation: second_conversation, user: agent,
+                                 name: 'first_response', value: 90, created_at: bucket_start + 3.hours,
+                                 event_end_time: second_message.created_at)
+
+        message_queries = []
+        subscriber = ActiveSupport::Notifications.subscribe('sql.active_record') do |_name, _started, _finished, _unique_id, payload|
+          message_queries << payload[:sql] if payload[:sql].match?(/\ASELECT .*FROM "messages"/m) && !payload[:cached]
+        end
+
+        payload = drilldown[:payload]
+
+        expect(payload.map { |row| row[:message][:id] }).to contain_exactly(
+          first_message.id,
+          second_message.id
+        )
+        expect(message_queries.size).to eq(2)
+      ensure
+        ActiveSupport::Notifications.unsubscribe(subscriber) if subscriber
+      end
+
+      it 'falls back to the conversation when no matching message is found' do
+        conversation = create(:conversation, account: account, inbox: inbox)
+        create(:reporting_event, account: account, inbox: inbox, conversation: conversation, user: agent,
+                                 name: 'first_response', value: 120, created_at: bucket_start + 2.hours,
+                                 event_end_time: bucket_start + 2.hours)
+
+        expect(drilldown[:payload].first[:record_type]).to eq('conversation')
+        expect(drilldown[:payload].first[:conversation][:id]).to eq(conversation.id)
+      end
+    end
+
+    context 'with bot handoff count metric' do
+      let(:metric) { 'bot_handoffs_count' }
+
+      it 'returns one row per handoff conversation' do
+        first_conversation = create(:conversation, account: account, inbox: inbox)
+        second_conversation = create(:conversation, account: account, inbox: inbox)
+
+        create(:reporting_event, account: account, inbox: inbox, conversation: first_conversation,
+                                 name: 'conversation_bot_handoff', created_at: bucket_start + 1.hour)
+        create(:reporting_event, account: account, inbox: inbox, conversation: first_conversation,
+                                 name: 'conversation_bot_handoff', created_at: bucket_start + 2.hours)
+        create(:reporting_event, account: account, inbox: inbox, conversation: second_conversation,
+                                 name: 'conversation_bot_handoff', created_at: bucket_start + 3.hours)
+
+        expect(drilldown[:meta][:total_count]).to eq(2)
+        expect(drilldown[:payload].map { |row| row[:conversation][:id] }).to contain_exactly(
+          first_conversation.id,
+          second_conversation.id
+        )
+        expect(drilldown[:payload].pluck(:event_name)).to all(eq('conversation_bot_handoff'))
+      end
+    end
+
+    context 'with bot resolution count metric' do
+      let(:metric) { 'bot_resolutions_count' }
+
+      before do
+        params[:until] = (bucket_start + 2.days).to_i.to_s
+      end
+
+      it 'excludes conversations with handoffs anywhere in the selected report range' do
+        resolved_conversation = create(:conversation, account: account, inbox: inbox)
+        handed_off_conversation = create(:conversation, account: account, inbox: inbox)
+
+        create(:reporting_event, account: account, inbox: inbox, conversation: resolved_conversation,
+                                 name: 'conversation_bot_resolved', created_at: bucket_start + 1.hour)
+        create(:reporting_event, account: account, inbox: inbox, conversation: handed_off_conversation,
+                                 name: 'conversation_bot_resolved', created_at: bucket_start + 2.hours)
+        create(:reporting_event, account: account, inbox: inbox, conversation: handed_off_conversation,
+                                 name: 'conversation_bot_handoff', created_at: bucket_start + 1.day)
+
+        expect(drilldown[:meta][:total_count]).to eq(1)
+        expect(drilldown[:payload].first[:conversation][:id]).to eq(resolved_conversation.id)
+      end
+    end
+  end
+end
diff --git a/spec/controllers/api/v2/accounts/report_controller_spec.rb b/spec/controllers/api/v2/accounts/report_controller_spec.rb
index 6202946a1..044a22d7a 100644
--- a/spec/controllers/api/v2/accounts/report_controller_spec.rb
+++ b/spec/controllers/api/v2/accounts/report_controller_spec.rb
@@ -233,6 +233,107 @@ RSpec.describe 'Reports API', type: :request do
     end
   end
 
+  describe 'GET /api/v2/accounts/:account_id/reports/drilldown' do
+    let(:params) do
+      super().merge(
+        metric: 'conversations_count',
+        type: :account,
+        since: start_of_today.to_s,
+        until: end_of_today.to_s,
+        bucket_timestamp: start_of_today.to_s,
+        group_by: 'day'
+      )
+    end
+
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown"
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      it 'returns unauthorized for agents' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params,
+            headers: agent.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+
+      it 'returns drilldown records for the selected bucket' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params,
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:success)
+        json_response = response.parsed_body
+
+        expect(json_response['meta']['metric']).to eq('conversations_count')
+        expect(json_response['meta']['record_type']).to eq('conversation')
+        expect(json_response['meta']['total_count']).to eq(10)
+        expect(json_response['payload'].first['conversation']).to include('display_id', 'contact_name', 'inbox_name')
+      end
+
+      it 'returns unprocessable entity for missing bucket timestamp' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params.except(:bucket_timestamp),
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+      end
+
+      it 'returns unprocessable entity for invalid bucket timestamp' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params.merge(bucket_timestamp: 'abc'),
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+      end
+
+      it 'returns unprocessable entity for bucket timestamp outside the requested range' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params.merge(bucket_timestamp: end_of_today.to_s),
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+      end
+
+      it 'returns drilldown records for a partial first weekly bucket' do
+        range_start = Time.zone.local(2026, 5, 20, 12)
+        range_end = Time.zone.local(2026, 5, 27, 12)
+        week_start = range_start.beginning_of_week(:sunday)
+
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params.merge(
+              since: range_start.to_i.to_s,
+              until: range_end.to_i.to_s,
+              bucket_timestamp: week_start.to_i.to_s,
+              group_by: 'week'
+            ),
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:success)
+      end
+
+      it 'returns unprocessable entity for unsupported drilldown type' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params.merge(type: :unsupported),
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+      end
+    end
+  end
+
   describe 'GET /api/v2/accounts/:account_id/reports/agents' do
     context 'when it is an unauthenticated user' do
       it 'returns unauthorized' do
diff --git a/spec/enterprise/controllers/enterprise/api/v2/accounts/reports_controller_spec.rb b/spec/enterprise/controllers/enterprise/api/v2/accounts/reports_controller_spec.rb
index ff05af909..a49e2b456 100644
--- a/spec/enterprise/controllers/enterprise/api/v2/accounts/reports_controller_spec.rb
+++ b/spec/enterprise/controllers/enterprise/api/v2/accounts/reports_controller_spec.rb
@@ -64,4 +64,28 @@ RSpec.describe 'Enterprise Reports API', type: :request do
       end
     end
   end
+
+  describe 'GET /api/v2/accounts/:account_id/reports/drilldown' do
+    context 'when it is an agent with report_manage permission' do
+      let(:params) do
+        super().merge(
+          metric: 'conversations_count',
+          type: :account,
+          since: start_of_today.to_s,
+          until: end_of_today.to_s,
+          bucket_timestamp: start_of_today.to_s,
+          group_by: 'day'
+        )
+      end
+
+      it 'returns unauthorized' do
+        get "/api/v2/accounts/#{account.id}/reports/drilldown",
+            params: params,
+            headers: agent_with_role.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+  end
 end