diff --git a/src/client/components/overviewTokens.tsx b/src/client/components/overviewTokens.tsx index fbfe936..b77f414 100644 --- a/src/client/components/overviewTokens.tsx +++ b/src/client/components/overviewTokens.tsx @@ -40,7 +40,7 @@ export function makeOverviewTokens(kit: ViewKit, Donut: (props: DonutProps) => R count: p.key === 'output' ? `${fmt(p.value)} · ${t('tokens.outputNote')}` : '≈' + fmt(p.value), })) return ( -
+
{t('tokens.title')}
diff --git a/src/client/components/richText.tsx b/src/client/components/richText.tsx index 544790f..65a068b 100644 --- a/src/client/components/richText.tsx +++ b/src/client/components/richText.tsx @@ -123,13 +123,13 @@ export function makeRichText(kit: ViewKit): RichKit { const seg = (m: RichMode, label: string, tip: string) => ( ) return ( - + {seg('raw', t('rich.raw'), t('rich.toRaw'))} {seg('md', t('rich.md'), t('rich.toMd'))} diff --git a/src/client/components/statsContext.tsx b/src/client/components/statsContext.tsx index 957688e..0f2f28b 100644 --- a/src/client/components/statsContext.tsx +++ b/src/client/components/statsContext.tsx @@ -461,7 +461,7 @@ export function makeStatsContext( const topTools = props.tools.slice(0, 3) const moreTools = props.tools.length - topTools.length return ( -
+
{t('stats.title')}
diff --git a/src/client/components/statsTiming.tsx b/src/client/components/statsTiming.tsx index 9da56cb..bd13186 100644 --- a/src/client/components/statsTiming.tsx +++ b/src/client/components/statsTiming.tsx @@ -183,7 +183,7 @@ export function makeStatsTiming(kit: ViewKit, Donut: (props: DonutProps) => Reac ].filter(row => !row.dim) } return ( -
+
{t('timing.title')} {tps !== null && ( diff --git a/src/client/components/statsTokens.tsx b/src/client/components/statsTokens.tsx index 87a07f2..42f6d16 100644 --- a/src/client/components/statsTokens.tsx +++ b/src/client/components/statsTokens.tsx @@ -66,7 +66,7 @@ export function makeStatsTokens(kit: ViewKit, Donut: (props: DonutProps) => Reac count: p.key === 'output' ? `${fmt(p.value)} · ${t('tokens.outputNote')}` : '≈' + fmt(p.value), })) return ( -
+
{t('tokens.title')} {hit !== null && ( diff --git a/src/client/styles/detailSections.css b/src/client/styles/detailSections.css index 1be8aca..9e2affe 100644 --- a/src/client/styles/detailSections.css +++ b/src/client/styles/detailSections.css @@ -48,10 +48,6 @@ .lc-ts-arg-val { color: var(--dsw-alias-label-primary); font-family: var(--ds-font-family-code, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; scrollbar-width: thin; } .lc-ts-json { display: flex; flex-direction: column; gap: 4px; } .lc-ts-json-toggle { align-self: flex-start; border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font: inherit; font-size: 11px; padding: 0; cursor: pointer; transition: color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); } -.lc-rich-seg { margin-left: auto; display: flex; gap: 2px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l2); border-radius: 6px; padding: 1px; } -.lc-rich-seg-btn { border: 0; background: transparent; color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: 5px; cursor: pointer; font-family: inherit; transition: color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); } -.lc-rich-seg-btn:hover { color: var(--dsw-alias-label-primary); } -.lc-rich-seg-on, .lc-rich-seg-on:hover { background: var(--dsw-alias-button-primary-fill); color: var(--dsw-alias-label-primary-foreground); } .lc-rich-copy, .lc-find-btn { display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--dsw-alias-label-secondary); padding: 2px; border-radius: 5px; cursor: pointer; transition: color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); } .lc-rich-copy:hover, .lc-find-btn:hover { color: var(--dsw-alias-label-primary); } .lc-rich-copy-on, .lc-rich-copy-on:hover { color: var(--dsw-alias-state-success-primary); } diff --git a/src/client/styles/stats.css b/src/client/styles/stats.css index ce6f92c..7da38a6 100644 --- a/src/client/styles/stats.css +++ b/src/client/styles/stats.css @@ -5,11 +5,6 @@ * — section heading, donut, slice list, plugin-info rows. */ .lc-stat { background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; padding: 6px 6px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } -/* The clickable cost cell: the same framed cell as an anchor opening the - models.dev listing in a new tab — reset the link chrome so it reads as the - card it visually is, with the pointer as the only affordance. */ -a.lc-stat { color: inherit; text-decoration: none; cursor: pointer; } -a.lc-stat:hover { border-color: var(--dsw-alias-label-secondary); } .lc-stat-label { color: var(--dsw-alias-label-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lc-stat-value { color: var(--dsw-alias-label-primary); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .lc-stat-sub { color: var(--dsw-alias-label-secondary); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } diff --git a/tests/client/components/browser.spec.ts b/tests/client/components/browser.spec.ts index 2854b61..8d240a4 100644 --- a/tests/client/components/browser.spec.ts +++ b/tests/client/components/browser.spec.ts @@ -390,12 +390,14 @@ describe('ContextBrowser header epochs', () => { // The single system row is already expanded. assert.equal(queryAll(m.container, '.lc-br-content').length, 1) assert.ok(queryAll(m.container, '.lc-ts-desc-md').length >= 1, 'markdown view by default') - const rawBtn = queryAll(m.container, '.lc-rich-seg-btn')[0] + // Scope to the detail body: the header's own granularity toggles wear the + // same shared lc-gran classes. + const rawBtn = queryAll(body, '.lc-gran-btn')[0] assert.equal(text(rawBtn), 'Raw') await click(rawBtn) const lines = queryAll(m.container, '.lc-ts-line').map(line => line.textContent) assert.deepEqual(lines, ['SYS B', 'second line']) - await click(queryAll(m.container, '.lc-rich-seg-btn')[1]) + await click(queryAll(body, '.lc-gran-btn')[1]) assert.ok(queryAll(m.container, '.lc-ts-desc-md').length >= 1, 'markdown restored') await click(catRow(m, 'system')) assert.equal(queryAll(m.container, '.lc-br-body').length, 0) diff --git a/tests/client/components/richText.spec.ts b/tests/client/components/richText.spec.ts index 490746e..25ba32c 100644 --- a/tests/client/components/richText.spec.ts +++ b/tests/client/components/richText.spec.ts @@ -61,14 +61,14 @@ describe('RichSwitch', () => { test('two segments with titles; the active mode carries the on class; clicks report the pick', async () => { const picks: RichMode[] = [] const m = await mount(h(RichSwitch, { mode: 'md', onPick: m2 => picks.push(m2) })) - const buttons = queryAll(m.container, '.lc-rich-seg-btn') + const buttons = queryAll(m.container, '.lc-gran-btn') assert.equal(buttons.length, 2) assert.equal(buttons[0].textContent, 'Raw') assert.equal(buttons[0].getAttribute('title'), 'View Raw Text') - assert.ok(!buttons[0].className.includes('lc-rich-seg-on')) + assert.ok(!buttons[0].className.includes('lc-gran-on')) assert.equal(buttons[1].textContent, 'Markdown') assert.equal(buttons[1].getAttribute('title'), 'View as Markdown') - assert.ok(buttons[1].className.includes('lc-rich-seg-on')) + assert.ok(buttons[1].className.includes('lc-gran-on')) await click(buttons[0]) await click(buttons[1]) assert.deepEqual(picks, ['raw', 'md']) @@ -77,9 +77,9 @@ describe('RichSwitch', () => { test('raw mode marks the raw segment active instead', async () => { const m = await mount(h(RichSwitch, { mode: 'raw', onPick: () => {} })) - const buttons = queryAll(m.container, '.lc-rich-seg-btn') - assert.ok(buttons[0].className.includes('lc-rich-seg-on')) - assert.ok(!buttons[1].className.includes('lc-rich-seg-on')) + const buttons = queryAll(m.container, '.lc-gran-btn') + assert.ok(buttons[0].className.includes('lc-gran-on')) + assert.ok(!buttons[1].className.includes('lc-gran-on')) await m.unmount() }) }) @@ -88,10 +88,10 @@ describe('useRichMode', () => { test('defaults to markdown and flips to raw via the switch', async () => { const m = await mount(h(Harness, { text: SAMPLE })) assert.ok(query(m.container, '.lc-ts-desc-md')) - const buttons = queryAll(m.container, '.lc-rich-seg-btn') + const buttons = queryAll(m.container, '.lc-gran-btn') await click(buttons[0]) // Raw assert.equal(rawText(m.container), SAMPLE) - await click(queryAll(m.container, '.lc-rich-seg-btn')[1]) // back to Markdown + await click(queryAll(m.container, '.lc-gran-btn')[1]) // back to Markdown assert.equal(query(m.container, '.lc-ts-desc-md h1').textContent, 'Title') await m.unmount() })