insights/products/mcp_analytics/frontend/mcpAnalyticsToolQualityLogic.ts

import { MakeLogicType, actions, afterMount, kea, listeners, path, reducers, selectors } from 'kea'
import { loaders } from 'kea-loaders'
import { actionToUrl, combineUrl, router, urlToAction } from 'kea-router'

import api from 'lib/api'
import { dateFilterToText, getDefaultInterval } from 'lib/utils/dateFilters'
import { teamLogic } from 'scenes/teamLogic'
import { urls } from 'scenes/urls'

import {
    MCPToolCategoryCountItem,
    MCPToolCategoryItem,
    MCPToolQualityDailyStatItem,
    MCPToolQualityRowItem,
    NodeKind,
} from '~/queries/schema/schema-general'
import { IntervalType } from '~/types'

import { buildBucketKeys, lastBucketIsInProgress, normalizeBucket } from './timeBuckets'

export interface CategoryCount {
    category: string
    calls: number
}

export interface ScopeShare {
    inScope: number
    total: number
    pct: number | null
}

export type SortDirection = 'ASC' | 'DESC'

export interface SortState {
    column: string
    direction: SortDirection
}

export interface DateFilter {
    dateFrom: string | null
    dateTo: string | null
}

// Carry the selected window across navigation as date_from / date_to, mirroring the tab's
// actionToUrl. Only set them when present so a cleared range stays out of the URL.
export function mcpDateSearchParams(dateFilter: DateFilter): Record<string, string> {
    const params: Record<string, string> = {}
    if (dateFilter.dateFrom) {
        params.date_from = dateFilter.dateFrom
    }
    if (dateFilter.dateTo) {
        params.date_to = dateFilter.dateTo
    }
    return params
}

// Link from the Tool quality tab to an individual tool's report, keeping the date filter so
// the tool page opens on the same window.
export function mcpToolReportUrl(tool: string, dateFilter: DateFilter): string {
    return combineUrl(urls.mcpAnalyticsTool(tool), mcpDateSearchParams(dateFilter)).url
}

// Link back from a tool report to the Tool quality tab, restoring the date filter.
export function mcpToolQualityUrlWithDates(dateFilter: DateFilter): string {
    return combineUrl(urls.mcpAnalyticsToolQuality(), mcpDateSearchParams(dateFilter)).url
}

export interface ToolQualityRow {
    tool: string
    total_calls: number
    errors: number
    error_rate_pct: number
    p50_duration_ms: number
    p95_duration_ms: number
    p99_duration_ms: number
    users: number
    sessions: number
    first_seen: string
    last_seen: string
}

export interface DailyToolStat {
    day: string
    calls: number
    errors: number
    p50: number
    p95: number
    p99: number
}

export interface DailyChartData {
    labels: string[]
    calls: number[]
    errors: number[]
    successRate: number[]
    p50: number[]
    p95: number[]
    p99: number[]
}

const DEFAULT_DATE_FILTER: DateFilter = { dateFrom: '-7d', dateTo: null }
const DEFAULT_SORT: SortState = { column: 'total_calls', direction: 'DESC' }

// Pivot per-bucket rows onto the full set of interval buckets spanning the selected window:
// Datastore only returns buckets that had events, so `bucketKeys` (built from the window at the
// active interval) keeps the x-axis linear and covering the whole range regardless of granularity.
// Counts fill with 0 (genuinely no activity); rate and latency fill with NaN so the chart skips the
// point instead of drawing a misleading dip to zero. Rows match by normalized bucket key, so day,
// hour, and minute intervals all line up.
export function buildDailyChartData(dailyStats: DailyToolStat[], bucketKeys: string[]): DailyChartData {
    const byBucket = new Map(dailyStats.map((r) => [normalizeBucket(r.day), r]))
    const rows = bucketKeys.map((k) => byBucket.get(k))
    return {
        labels: bucketKeys,
        calls: rows.map((r) => r?.calls ?? 0),
        errors: rows.map((r) => r?.errors ?? 0),
        successRate: rows.map((r) => (r && r.calls ? ((r.calls - r.errors) / r.calls) * 100 : NaN)),
        p50: rows.map((r) => (r ? r.p50 : NaN)),
        p95: rows.map((r) => (r ? r.p95 : NaN)),
        p99: rows.map((r) => (r ? r.p99 : NaN)),
    }
}

function sortToolRows(rows: ToolQualityRow[], sort: SortState): ToolQualityRow[] {
    const direction = sort.direction === 'ASC' ? 1 : -1
    const column = sort.column as keyof ToolQualityRow
    return [...rows].sort((a, b) => {
        const aValue = a[column]
        const bValue = b[column]
        if (typeof aValue === 'number' && typeof bValue === 'number') {
            return (aValue - bValue) * direction
        }
        return String(aValue).localeCompare(String(bValue)) * direction
    })
}

// Generated by kea-typegen. Update if you're an agent, ignore if you're human.
export interface mcpAnalyticsToolQualityLogicValues {
    availableCategories: string[]
    availableCategoriesLoading: boolean
    categoryCounts: CategoryCount[]
    categoryCountsLoading: boolean
    dailyChartData: DailyChartData
    dailyStats: DailyToolStat[]
    dailyStatsLoading: boolean
    dateFilter: DateFilter
    dateRangeLabel: string
    filteredRows: ToolQualityRow[]
    incompleteTail: boolean
    interval: IntervalType
    scopeShare: ScopeShare
    searchTerm: string
    selectedCategories: string[]
    selectedTool: string | null
    toolQualitySort: SortState
    toolRows: ToolQualityRow[]
    toolRowsLoading: boolean
}

// Generated by kea-typegen. Update if you're an agent, ignore if you're human.
export interface mcpAnalyticsToolQualityLogicActions {
    loadAvailableCategories: () => any
    loadAvailableCategoriesFailure: (
        error: string,
        errorObject?: any
    ) => {
        error: string
        errorObject?: any
    }
    loadAvailableCategoriesSuccess: (
        availableCategories: string[],
        payload?: any
    ) => {
        availableCategories: string[]
        payload?: any
    }
    loadCategoryCounts: () => any
    loadCategoryCountsFailure: (
        error: string,
        errorObject?: any
    ) => {
        error: string
        errorObject?: any
    }
    loadCategoryCountsSuccess: (
        categoryCounts: CategoryCount[],
        payload?: any
    ) => {
        categoryCounts: CategoryCount[]
        payload?: any
    }
    loadDailyStats: (_: void) => void
    loadDailyStatsFailure: (
        error: string,
        errorObject?: any
    ) => {
        error: string
        errorObject?: any
    }
    loadDailyStatsSuccess: (
        dailyStats: DailyToolStat[],
        payload?: void
    ) => {
        dailyStats: DailyToolStat[]
        payload?: void
    }
    loadToolRows: (_: void) => void
    loadToolRowsFailure: (
        error: string,
        errorObject?: any
    ) => {
        error: string
        errorObject?: any
    }
    loadToolRowsSuccess: (
        toolRows: ToolQualityRow[],
        payload?: void
    ) => {
        toolRows: ToolQualityRow[]
        payload?: void
    }
    reloadAll: () => {
        value: true
    }
    setDateFilter: (
        dateFrom: string | null,
        dateTo: string | null
    ) => {
        dateFrom: string | null
        dateTo: string | null
    }
    setSearchTerm: (searchTerm: string) => {
        searchTerm: string
    }
    setSelectedCategories: (categories: string[]) => {
        categories: string[]
    }
    setSelectedTool: (tool: string | null) => {
        tool: string | null
    }
    setToolQualitySort: (
        column: string,
        direction: SortDirection
    ) => {
        column: string
        direction: SortDirection
    }
}

// Generated by kea-typegen. Update if you're an agent, ignore if you're human.
export interface mcpAnalyticsToolQualityLogicMeta {
    __keaTypeGenInternalSelectorTypes: {
        dateRangeLabel: (dateFilter: DateFilter) => string
        interval: (dateFilter: DateFilter) => IntervalType
        scopeShare: (categoryCounts: CategoryCount[], selectedCategories: string[]) => ScopeShare
        filteredRows: (toolRows: ToolQualityRow[], toolQualitySort: SortState, searchTerm: string) => ToolQualityRow[]
        dailyChartData: (
            dailyStats: DailyToolStat[],
            dateFilter: DateFilter,
            interval: IntervalType,
            timezone: string
        ) => DailyChartData
        incompleteTail: (dailyChartData: DailyChartData, interval: IntervalType, timezone: string) => boolean
    }
}

export type mcpAnalyticsToolQualityLogicType = MakeLogicType<
    mcpAnalyticsToolQualityLogicValues,
    mcpAnalyticsToolQualityLogicActions,
    Record<string, any>,
    mcpAnalyticsToolQualityLogicMeta
>

export const mcpAnalyticsToolQualityLogic = kea<mcpAnalyticsToolQualityLogicType>([
    path(['products', 'mcp_analytics', 'frontend', 'mcpAnalyticsToolQualityLogic']),

    actions({
        setToolQualitySort: (column: string, direction: SortDirection) => ({ column, direction }),
        setDateFilter: (dateFrom: string | null, dateTo: string | null) => ({ dateFrom, dateTo }),
        setSelectedCategories: (categories: string[]) => ({ categories }),
        setSelectedTool: (tool: string | null) => ({ tool }),
        setSearchTerm: (searchTerm: string) => ({ searchTerm }),
        reloadAll: true,
    }),

    reducers({
        toolQualitySort: [
            DEFAULT_SORT,
            {
                setToolQualitySort: (_, { column, direction }): SortState => ({ column, direction }),
            },
        ],
        dateFilter: [
            DEFAULT_DATE_FILTER,
            {
                setDateFilter: (_, { dateFrom, dateTo }): DateFilter => ({ dateFrom, dateTo }),
            },
        ],
        selectedCategories: [
            [] as string[],
            {
                setSelectedCategories: (_, { categories }): string[] => categories,
            },
        ],
        selectedTool: [
            null as string | null,
            {
                setSelectedTool: (_, { tool }): string | null => tool,
            },
        ],
        searchTerm: [
            '',
            {
                setSearchTerm: (_, { searchTerm }): string => searchTerm,
            },
        ],
    }),

    loaders(({ values }) => ({
        availableCategories: [
            [] as string[],
            {
                loadAvailableCategories: async (): Promise<string[]> => {
                    // Fixed 30-day window so the scope selector lists every category regardless of the tab filter.
                    const response = (await api.query({
                        kind: NodeKind.MCPToolCategoriesQuery,
                        dateRange: { date_from: '-30d' },
                    })) as { results?: MCPToolCategoryItem[] }
                    return (response.results ?? []).map((r) => r.category).filter(Boolean)
                },
            },
        ],
        categoryCounts: [
            [] as CategoryCount[],
            {
                loadCategoryCounts: async (): Promise<CategoryCount[]> => {
                    const response = (await api.query({
                        kind: NodeKind.MCPToolCategoryCountsQuery,
                        dateRange: { date_from: values.dateFilter.dateFrom, date_to: values.dateFilter.dateTo },
                    })) as { results?: MCPToolCategoryCountItem[] }
                    return (response.results ?? []).map((r) => ({ category: r.category, calls: r.calls }))
                },
            },
        ],
        toolRows: [
            [] as ToolQualityRow[],
            {
                loadToolRows: async (_: void, breakpoint): Promise<ToolQualityRow[]> => {
                    await breakpoint(100)
                    // Fixed server-side order (total_calls DESC); column sorting happens client-side.
                    const response = (await api.query({
                        kind: NodeKind.MCPToolQualityRowsQuery,
                        dateRange: { date_from: values.dateFilter.dateFrom, date_to: values.dateFilter.dateTo },
                        categories: values.selectedCategories,
                    })) as { results?: MCPToolQualityRowItem[] }
                    breakpoint()
                    return (response.results ?? []).map((r) => ({
                        tool: r.tool,
                        total_calls: r.total_calls,
                        errors: r.errors,
                        error_rate_pct: r.error_rate_pct,
                        p50_duration_ms: r.p50_duration_ms,
                        p95_duration_ms: r.p95_duration_ms,
                        p99_duration_ms: r.p99_duration_ms,
                        users: r.users,
                        sessions: r.sessions,
                        first_seen: r.first_seen,
                        last_seen: r.last_seen,
                    }))
                },
            },
        ],
        dailyStats: [
            [] as DailyToolStat[],
            {
                loadDailyStats: async (_: void, breakpoint): Promise<DailyToolStat[]> => {
                    await breakpoint(100)
                    const response = (await api.query({
                        kind: NodeKind.MCPToolQualityDailyStatsQuery,
                        dateRange: { date_from: values.dateFilter.dateFrom, date_to: values.dateFilter.dateTo },
                        interval: values.interval,
                        categories: values.selectedCategories,
                        ...(values.selectedTool ? { toolName: values.selectedTool } : {}),
                    })) as { results?: MCPToolQualityDailyStatItem[] }
                    breakpoint()
                    return (response.results ?? []).map((r) => ({
                        day: r.day,
                        calls: r.calls,
                        errors: r.errors,
                        p50: r.p50,
                        p95: r.p95,
                        p99: r.p99,
                    }))
                },
            },
        ],
    })),

    selectors({
        // Human-readable label for the active window (e.g. "Last 7 days"), used by
        // the scope-share headline so it never falls out of sync with the filter.
        dateRangeLabel: [
            (s) => [s.dateFilter],
            (dateFilter: DateFilter): string =>
                dateFilterToText(dateFilter.dateFrom, dateFilter.dateTo, 'the selected range') ?? 'the selected range',
        ],
        // Grouping interval for the daily chart — Insights's standard auto-choice, so a sub-day window
        // (e.g. last 12 hours) buckets hourly instead of collapsing to a single day point.
        interval: [
            (s) => [s.dateFilter],
            (dateFilter: DateFilter): IntervalType => getDefaultInterval(dateFilter.dateFrom, dateFilter.dateTo),
        ],
        scopeShare: [
            (s) => [s.categoryCounts, s.selectedCategories],
            (categoryCounts: CategoryCount[], selectedCategories: string[]): ScopeShare => {
                const total = categoryCounts.reduce((acc, row) => acc + row.calls, 0)
                const selected = new Set(selectedCategories)
                const inScope = categoryCounts
                    .filter((row) => selected.has(row.category))
                    .reduce((acc, row) => acc + row.calls, 0)
                return { inScope, total, pct: total > 0 ? (inScope / total) * 100 : null }
            },
        ],
        filteredRows: [
            (s) => [s.toolRows, s.toolQualitySort, s.searchTerm],
            (toolRows: ToolQualityRow[], sort: SortState, searchTerm: string): ToolQualityRow[] => {
                const term = searchTerm.trim().toLowerCase()
                const filtered = term ? toolRows.filter((row) => row.tool.toLowerCase().includes(term)) : toolRows
                return sortToolRows(filtered, sort)
            },
        ],
        dailyChartData: [
            (s) => [s.dailyStats, s.dateFilter, s.interval, teamLogic.selectors.timezone],
            (
                dailyStats: DailyToolStat[],
                dateFilter: DateFilter,
                interval: IntervalType,
                timezone: string
            ): DailyChartData => {
                const bucketKeys = buildBucketKeys(dateFilter.dateFrom, dateFilter.dateTo, timezone, interval)
                return buildDailyChartData(dailyStats, bucketKeys)
            },
        ],
        // The charts dash the final segment when it is the current, still-collecting interval, so a
        // partial day doesn't read as a fall in calls or a latency improvement.
        incompleteTail: [
            (s) => [s.dailyChartData, s.interval, teamLogic.selectors.timezone],
            (dailyChartData: DailyChartData, interval: IntervalType, timezone: string): boolean =>
                lastBucketIsInProgress(dailyChartData.labels, timezone, interval),
        ],
    }),

    listeners(({ actions, values }) => ({
        // Both scope filters refetch the table and the charts; a date change also
        // refreshes the category counts so the "share of MCP usage" headline tracks
        // the same window.
        setDateFilter: () => {
            actions.reloadAll()
            actions.loadCategoryCounts()
        },
        setSelectedCategories: () => {
            actions.reloadAll()
        },
        reloadAll: () => {
            actions.loadToolRows()
            actions.loadDailyStats()
        },
        setSelectedTool: () => {
            actions.loadDailyStats()
        },
        // A category or date change can reload rows that no longer include the
        // selected tool — drop the selection instead of charting an empty scope
        loadToolRowsSuccess: ({ toolRows }) => {
            if (values.selectedTool && !toolRows.some((row) => row.tool === values.selectedTool)) {
                actions.setSelectedTool(null)
            }
        },
    })),

    actionToUrl(({ values }) => {
        const syncUrl = (): [string, Record<string, any>, Record<string, any>, { replace: boolean }] => {
            const { currentLocation } = router.values
            const searchParams = { ...currentLocation.searchParams }
            if (values.selectedTool) {
                searchParams.tool = values.selectedTool
            } else {
                delete searchParams.tool
            }
            if (values.selectedCategories.length > 0) {
                searchParams.categories = values.selectedCategories
            } else {
                delete searchParams.categories
            }
            if (values.dateFilter.dateFrom) {
                searchParams.date_from = values.dateFilter.dateFrom
            } else {
                delete searchParams.date_from
            }
            if (values.dateFilter.dateTo) {
                searchParams.date_to = values.dateFilter.dateTo
            } else {
                delete searchParams.date_to
            }
            return [currentLocation.pathname, searchParams, currentLocation.hashParams, { replace: true }]
        }
        return {
            setSelectedTool: syncUrl,
            setDateFilter: syncUrl,
            setSelectedCategories: syncUrl,
        }
    }),

    urlToAction(({ actions, values }) => ({
        [urls.mcpAnalyticsToolQuality()]: (_, searchParams) => {
            const tool = typeof searchParams.tool === 'string' && searchParams.tool ? searchParams.tool : null
            if (tool !== values.selectedTool) {
                actions.setSelectedTool(tool)
            }
            const categories = Array.isArray(searchParams.categories)
                ? searchParams.categories.map(String)
                : typeof searchParams.categories === 'string' && searchParams.categories
                  ? [searchParams.categories]
                  : []
            if (JSON.stringify(categories) !== JSON.stringify(values.selectedCategories)) {
                actions.setSelectedCategories(categories)
            }
            const dateFrom =
                typeof searchParams.date_from === 'string' ? searchParams.date_from : values.dateFilter.dateFrom
            const dateTo = typeof searchParams.date_to === 'string' ? searchParams.date_to : null
            if (dateFrom !== values.dateFilter.dateFrom || dateTo !== values.dateFilter.dateTo) {
                actions.setDateFilter(dateFrom, dateTo)
            }
        },
    })),

    afterMount(({ actions }) => {
        actions.loadAvailableCategories()
        actions.loadCategoryCounts()
        actions.loadToolRows()
        actions.loadDailyStats()
    }),
])