|
| 1 | +/** |
| 2 | + * CacheHintDialog — shown when a resumed (or long-idle) session's context |
| 3 | + * cache has almost certainly expired, so the next turn re-sends the whole |
| 4 | + * history uncached. Offers compact / new session / continue / never. |
| 5 | + * |
| 6 | + * Layout mirrors the list-dialog spec (DESIGN.md): top border, title, hint, |
| 7 | + * body line, then options with right-column descriptions. |
| 8 | + */ |
1 | 9 |
|
2 | | -export type CacheHintAction = string; |
3 | | -export class CacheHintDialogComponent { |
4 | | - constructor(..._args: any[]) {} |
5 | | - render(): string[] { return []; } |
| 10 | +import { |
| 11 | + Container, |
| 12 | + matchesKey, |
| 13 | + Key, |
| 14 | + truncateToWidth, |
| 15 | + visibleWidth, |
| 16 | + type Focusable, |
| 17 | +} from '@pymodel/pi-tui'; |
| 18 | +import { SELECT_POINTER } from '#/tui/constant/symbols'; |
| 19 | +import { currentTheme } from '#/tui/theme'; |
| 20 | +import { formatIdleDuration } from '#/tui/utils/cache-hint'; |
| 21 | +import { SearchableList } from '#/tui/utils/searchable-list'; |
| 22 | +import { formatTokenCount } from '#/utils/usage/usage-format'; |
| 23 | + |
| 24 | +export type CacheHintAction = 'compact' | 'new' | 'continue' | 'never'; |
| 25 | + |
| 26 | +interface CacheHintOption { |
| 27 | + readonly value: CacheHintAction; |
| 28 | + readonly label: string; |
| 29 | + readonly description?: string; |
| 30 | +} |
| 31 | + |
| 32 | +const OPTIONS: readonly CacheHintOption[] = [ |
| 33 | + { |
| 34 | + value: 'compact', |
| 35 | + label: 'Compact and continue', |
| 36 | + description: 'one-time compact cost · cheapest way to keep this topic', |
| 37 | + }, |
| 38 | + { |
| 39 | + value: 'new', |
| 40 | + label: 'Start a new session', |
| 41 | + description: 'zero context cost · best for a new task', |
| 42 | + }, |
| 43 | + { |
| 44 | + value: 'continue', |
| 45 | + label: 'Continue as-is', |
| 46 | + description: 'full history kept · highest cost per turn', |
| 47 | + }, |
| 48 | + { value: 'never', label: "Don't ask me again" }, |
| 49 | +]; |
| 50 | + |
| 51 | +export interface CacheHintDialogOptions { |
| 52 | + readonly idleSeconds: number; |
| 53 | + readonly totalTokens: number; |
| 54 | + readonly onSelect: (action: CacheHintAction) => void; |
| 55 | + readonly onCancel: () => void; |
| 56 | +} |
| 57 | + |
| 58 | +export class CacheHintDialogComponent extends Container implements Focusable { |
| 59 | + focused = false; |
| 60 | + private readonly opts: CacheHintDialogOptions; |
| 61 | + private readonly list: SearchableList<CacheHintOption>; |
| 62 | + |
| 63 | + constructor(opts: CacheHintDialogOptions) { |
| 64 | + super(); |
| 65 | + this.opts = opts; |
| 66 | + this.list = new SearchableList({ |
| 67 | + items: OPTIONS, |
| 68 | + toSearchText: (o) => o.label, |
| 69 | + initialIndex: 0, |
| 70 | + searchable: false, |
| 71 | + }); |
| 72 | + } |
| 73 | + |
| 74 | + handleInput(data: string): void { |
| 75 | + if (matchesKey(data, Key.escape)) { |
| 76 | + this.opts.onCancel(); |
| 77 | + return; |
| 78 | + } |
| 79 | + if (matchesKey(data, Key.enter)) { |
| 80 | + const chosen = this.list.selected(); |
| 81 | + if (chosen !== undefined) this.opts.onSelect(chosen.value); |
| 82 | + return; |
| 83 | + } |
| 84 | + this.list.handleKey(data); |
| 85 | + } |
| 86 | + |
| 87 | + override render(width: number): string[] { |
| 88 | + const view = this.list.view(); |
| 89 | + const title = `This session has been idle for ${formatIdleDuration(this.opts.idleSeconds)} and is ~${formatTokenCount(this.opts.totalTokens)} tokens.`; |
| 90 | + const lines: string[] = [ |
| 91 | + currentTheme.fg('primary', '─'.repeat(width)), |
| 92 | + currentTheme.boldFg('primary', ` ${title}`), |
| 93 | + currentTheme.fg('textMuted', ' ↑↓ navigate · Enter select · Esc cancel'), |
| 94 | + '', |
| 95 | + currentTheme.fg( |
| 96 | + 'text', |
| 97 | + ' Cache expired — the next message re-sends the entire history at full price.', |
| 98 | + ), |
| 99 | + ]; |
| 100 | + |
| 101 | + const maxLabelWidth = Math.max(...OPTIONS.map((o) => visibleWidth(o.label))); |
| 102 | + for (let i = view.page.start; i < view.page.end; i++) { |
| 103 | + const opt = view.items[i]!; |
| 104 | + const isSelected = i === view.selectedIndex; |
| 105 | + const pointer = isSelected ? SELECT_POINTER : ' '; |
| 106 | + let line = currentTheme.fg(isSelected ? 'primary' : 'textDim', ` ${pointer} `); |
| 107 | + line += isSelected |
| 108 | + ? currentTheme.boldFg('primary', opt.label) |
| 109 | + : currentTheme.fg('text', opt.label); |
| 110 | + if (opt.description !== undefined) { |
| 111 | + const gap = maxLabelWidth - visibleWidth(opt.label) + 4; |
| 112 | + line += ' '.repeat(gap) + currentTheme.fg('textMuted', opt.description); |
| 113 | + } |
| 114 | + lines.push(line); |
| 115 | + } |
| 116 | + |
| 117 | + lines.push(''); |
| 118 | + lines.push(currentTheme.fg('primary', '─'.repeat(width))); |
| 119 | + return lines.map((line) => truncateToWidth(line, width)); |
| 120 | + } |
6 | 121 | } |
7 | | -export class CacheHintDialog extends CacheHintDialogComponent {} |
|
0 commit comments