fix(tui): stabilize FaceTicker elapsed width to prevent composer drift

This commit is contained in:
adybag14-cyber 2026-05-06 01:19:22 +01:00 committed by Teknium
parent e45df2e81e
commit ca5febfed1
2 changed files with 13 additions and 2 deletions

View file

@ -1,6 +1,6 @@
import { describe, expect, it } from 'vitest'
import { padVerb, VERB_PAD_LEN } from '../components/appChrome.js'
import { DURATION_PAD_LEN, padTickerDuration, padVerb, VERB_PAD_LEN } from '../components/appChrome.js'
import { VERBS } from '../content/verbs.js'
describe('FaceTicker verb padding', () => {
@ -16,3 +16,12 @@ describe('FaceTicker verb padding', () => {
}
})
})
describe('FaceTicker duration padding', () => {
it('keeps elapsed segment width stable across second/minute boundaries', () => {
const samples = [9000, 10000, 59000, 60000, 61000, 3599000]
const lens = samples.map(ms => padTickerDuration(ms).length)
expect(new Set(lens)).toEqual(new Set([DURATION_PAD_LEN]))
})
})

View file

@ -23,7 +23,9 @@ const HEART_COLORS = ['#ff5fa2', '#ff4d6d']
// Keep verb segment width stable so status-bar content to the right doesn't
// jitter when the ticker rotates between short/long verbs.
export const VERB_PAD_LEN = VERBS.reduce((max, v) => Math.max(max, v.length), 0) + 1 // + ellipsis
export const DURATION_PAD_LEN = 7 // e.g. " 9s", "1m 05s", "59m 59s"
export const padVerb = (verb: string) => `${verb}`.padEnd(VERB_PAD_LEN, ' ')
export const padTickerDuration = (ms: number) => fmtDuration(ms).padStart(DURATION_PAD_LEN, ' ')
// Compact alternates for the `emoji` and `ascii` indicator styles.
// Each entry is a fixed-width (display-width) glyph.
@ -108,7 +110,7 @@ function FaceTicker({ color, startedAt }: { color: string; startedAt?: null | nu
const { frame } = renderIndicator(style, tick)
const verb = VERBS[verbTick % VERBS.length] ?? ''
const verbSegment = showVerb ? ` ${padVerb(verb)}` : ''
const durationSegment = startedAt ? `· ${fmtDuration(now - startedAt)}` : ''
const durationSegment = startedAt ? `· ${padTickerDuration(now - startedAt)}` : ''
return (
<Text color={color}>