Function ContextDialog

lib/tui/dialogs.tsx:28–97

(props: {
    api: TuiApi
    state: SessionState
    messages: WithParts[]
    onBack: () => void
})

}

export function ContextDialog(props: {
    api: TuiApi
    state: SessionState
    messages: WithParts[]
    onBack: () => void
}) {
    const theme = props.api.theme.current
    const breakdown = analyzeContextTokens(props.state, props.messages)
    const total = Math.max(0, breakdown.total)
    const activePruned = breakdown.prunedToolCount + breakdown.prunedMessageCount

    return (
        <DcpFrame api={props.api} title="Context" eyebrow="DCP" onBack={props.onBack}>
            <Card theme={theme} title="Current">
                <Metric
                    theme={theme}
                    label="Total in context"
                    value={`~${formatTokenCount(total)}`}
                    hint="tokens"
                />
                <Metric
                    theme={theme}
                    label="Tools in context"
                    value={`${breakdown.toolsInContextCount}`}
                />
                <Metric theme={theme} label="Active pruned targets" value={`${activePruned}`} />
                <Metric
                    theme={theme}
                    label="Tokens pruned"
                    value={`~${formatTokenCount(breakdown.prunedTokens)}`}
                    hint="tokens"
                />
            </Card>
            <Card theme={theme} title="Breakdown">
                <Progress
                    theme={theme}
                    label="System"
                    value={breakdown.system}
                    total={total}
                    color="primary"
                    detail={`~${formatTokenCount(breakdown.system)} tokens`}
                />
                <Progress
                    theme={theme}
                    label="User"
                    value={breakdown.user}
                    total={total}
                    color="primary"
                    detail={`~${formatTokenCount(breakdown.user)} tokens`}
                />
                <Progress
                    theme={theme}
                    label="Assistant"
                    value={breakdown.assistant}
                    total={total}
                    color="primary"
                    detail={`~${formatTokenCount(breakdown.assistant)} tokens`}
                />