refactor(ui): hand the chat meta row back to Astryx primitives by Astro-Han · Pull Request #2358 · apache/maka

Astro-Han · 2026-08-06T17:55:55Z

Summary

The row under a chat message reimplemented parts Astryx already ships, and every visible defect in it traced back to one of those reimplementations.

Time. A hand-rolled <small> carried a native title and aria-hidden, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now Timestamp — a semantic <time datetime> with a copyable hover card, and exactly what ChatMessageMetadata's own docs put in that slot. formatClockTime had no other caller and is deleted.
Icons. Four separate 12 literals became one named constant at 14. --icon-size reserves 12–14 for "dense meta" and this row is dense meta; 14 is also where the same position already sits most often across the app. A size must be passed at all because Astryx's sm button bounds the icon slot at 16px without resizing the glyph — measured, an unsized lucide icon renders 16×24, squashed.
Tooltips. Each button was wrapped in a <Tooltip> element. Button takes a tooltip prop and attaches the same behaviour through a hook, which is what its source recommends. The display: contents wrapper is gone and aria-describedby now resolves — previously it computed to nothing, which is why call sites carried hand-written aria-label fallbacks.
Hover gate. It sat on the whole row and so covered the time too, contrary to what the comment directly above it claimed. It moves to the footer slot, so the time stays visible. Astryx's · separator is dropped rather than gated: with the time always present and the actions fading in beside it, the bullet added a mark without adding a distinction.
Spacing. The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not the 12px of the time, so it sat tighter against the bubble than its margin suggested.

Behaviour change worth knowing: the hour cycle now follows the host locale instead of a hardcoded hour12: false. Most locales are unaffected (14:32 in zh / en-GB / ja / de / fr); en-US renders 2:32 PM. The hour also loses its leading zero (9:05, not 09:05), which is why tabular-nums stays on that element.

Refs #2359 — the icon sizing policy this lands against is unenforced repo-wide (145 hardcoded sizes across 11 values). This PR deliberately does not attempt that sweep.

Verification

npm run -w @maka/ui test — 442 passing
npm run -w @maka/ui typecheck, npm --workspace @maka/desktop run typecheck — clean
npm run lint, npm run format:check — clean
node scripts/check-dead-css.mjs --check, node scripts/check-a11y.mjs — clean
Not run: Playwright E2E and the desktop main-process suite — this change is renderer-only presentation with no journey or IPC surface.

Checked against computed styles in Storybook (Product/Shell Official AppShell → Native Conversation) rather than by eye:

	result
time element	`<time datetime="…">`, no `aria-hidden`, opacity 1 at rest
separator	`display: none`
icon	14×14 in a 16px slot, 28px button, stroke 1.75 (the globally governed value)
tooltip wiring	button is a direct child of the meta row, `aria-describedby` resolves
spacing	row `margin-top: 6px`

Review focus

pointer-events: none was tried on the transparent actions — a transparent button still takes clicks — and reverted. It makes the pointer fall through to the ancestor whose :hover is what restores the button, so being clickable again depends on the browser redoing hit-testing on a later mouse event. Continuous movement gets there; a pointer that jumps onto the button and stops could not be reproduced on this surface, so the fix could not be demonstrated safe. The pre-existing behaviour is left untouched and the reasoning is recorded in the CSS.

The row below a message reimplemented parts Astryx already ships, and each visible defect traced to one of those reimplementations. - The time was a hand-rolled `<small>` carrying a native `title` and `aria-hidden`, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now `Timestamp`, which is what `ChatMessageMetadata`'s own docs put in that slot: a semantic `<time datetime>` with a copyable hover card. `formatClockTime` had no other caller and is gone; its `hour12: false` was the app overriding a preference that belongs to the reader's system, so the hour cycle now follows the host locale (`14:32` in zh/en-GB/ja/de/fr, `2:32 PM` in en-US) and the hour loses its leading zero. - Footer icons were four separate `12` literals. They are now one named constant at 14 — the top of the range `--icon-size` reserves for "dense meta", and where the same position already sits most often across the app. A size has to be passed at all because Astryx's `sm` button bounds the icon slot at 16px without resizing the glyph: measured, an unsized lucide icon renders 16×24, squashed. - Tooltips wrapped each button in a `<Tooltip>` element. `Button` takes a `tooltip` prop and attaches the same behaviour through a hook, which is what its source recommends — the `display: contents` wrapper is gone and `aria-describedby` now resolves. - The hover gate sat on the row and so covered the time too, contrary to what the comment above it claimed. It moves to the footer slot, so the time stays put. Astryx's `·` separator between the slots is dropped outright: with the time always present and the actions fading in beside it, the two already read as separate and the bullet only adds a mark. - The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not of the 12px time, so it sat tighter against the bubble than the margin suggested. Verified in Storybook against computed styles: `<time>` with a datetime, no `aria-hidden`, opacity 1 at rest; separator `display: none`; icons 14×14 in a 16px slot at the globally governed 1.75 stroke; buttons direct children of the meta row with `aria-describedby` set. A transparent action is still clickable. `pointer-events: none` was tried and reverted: it depends on the browser redoing hit-testing after the ancestor `:hover` restores the button, and the jump-and-stop case could not be reproduced on this surface to prove it safe.

Astro-Han · 2026-08-06T17:55:55Z

Summary

The row under a chat message reimplemented parts Astryx already ships, and every visible defect in it traced back to one of those reimplementations.

Time. A hand-rolled <small> carried a native title and aria-hidden, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now Timestamp — a semantic <time datetime> with a copyable hover card, and exactly what ChatMessageMetadata's own docs put in that slot. formatClockTime had no other caller and is deleted.
Icons. Four separate 12 literals became one named constant at 14. --icon-size reserves 12–14 for "dense meta" and this row is dense meta; 14 is also where the same position already sits most often across the app. A size must be passed at all because Astryx's sm button bounds the icon slot at 16px without resizing the glyph — measured, an unsized lucide icon renders 16×24, squashed.
Tooltips. Each button was wrapped in a <Tooltip> element. Button takes a tooltip prop and attaches the same behaviour through a hook, which is what its source recommends. The display: contents wrapper is gone and aria-describedby now resolves — previously it computed to nothing, which is why call sites carried hand-written aria-label fallbacks.
Hover gate. It sat on the whole row and so covered the time too, contrary to what the comment directly above it claimed. It moves to the footer slot, so the time stays visible. Astryx's · separator is dropped rather than gated: with the time always present and the actions fading in beside it, the bullet added a mark without adding a distinction.
Spacing. The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not the 12px of the time, so it sat tighter against the bubble than its margin suggested.

Behaviour change worth knowing: the hour cycle now follows the host locale instead of a hardcoded hour12: false. Most locales are unaffected (14:32 in zh / en-GB / ja / de / fr); en-US renders 2:32 PM. The hour also loses its leading zero (9:05, not 09:05), which is why tabular-nums stays on that element.

Refs #2359 — the icon sizing policy this lands against is unenforced repo-wide (145 hardcoded sizes across 11 values). This PR deliberately does not attempt that sweep.

Verification

npm run -w @maka/ui test — 442 passing
npm run -w @maka/ui typecheck, npm --workspace @maka/desktop run typecheck — clean
npm run lint, npm run format:check — clean
node scripts/check-dead-css.mjs --check, node scripts/check-a11y.mjs — clean
Not run: Playwright E2E and the desktop main-process suite — this change is renderer-only presentation with no journey or IPC surface.

Checked against computed styles in Storybook (Product/Shell Official AppShell → Native Conversation) rather than by eye:

	result
time element	`<time datetime="…">`, no `aria-hidden`, opacity 1 at rest
separator	`display: none`
icon	14×14 in a 16px slot, 28px button, stroke 1.75 (the globally governed value)
tooltip wiring	button is a direct child of the meta row, `aria-describedby` resolves
spacing	row `margin-top: 6px`

Review focus

pointer-events: none was tried on the transparent actions — a transparent button still takes clicks — and reverted. It makes the pointer fall through to the ancestor whose :hover is what restores the button, so being clickable again depends on the browser redoing hit-testing on a later mouse event. Continuous movement gets there; a pointer that jumps onto the button and stops could not be reproduced on this surface, so the fix could not be demonstrated safe. The pre-existing behaviour is left untouched and the reasoning is recorded in the CSS.

The row below a message reimplemented parts Astryx already ships, and each visible defect traced to one of those reimplementations. - The time was a hand-rolled `<small>` carrying a native `title` and `aria-hidden`, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now `Timestamp`, which is what `ChatMessageMetadata`'s own docs put in that slot: a semantic `<time datetime>` with a copyable hover card. `formatClockTime` had no other caller and is gone; its `hour12: false` was the app overriding a preference that belongs to the reader's system, so the hour cycle now follows the host locale (`14:32` in zh/en-GB/ja/de/fr, `2:32 PM` in en-US) and the hour loses its leading zero. - Footer icons were four separate `12` literals. They are now one named constant at 14 — the top of the range `--icon-size` reserves for "dense meta", and where the same position already sits most often across the app. A size has to be passed at all because Astryx's `sm` button bounds the icon slot at 16px without resizing the glyph: measured, an unsized lucide icon renders 16×24, squashed. - Tooltips wrapped each button in a `<Tooltip>` element. `Button` takes a `tooltip` prop and attaches the same behaviour through a hook, which is what its source recommends — the `display: contents` wrapper is gone and `aria-describedby` now resolves. - The hover gate sat on the row and so covered the time too, contrary to what the comment above it claimed. It moves to the footer slot, so the time stays put. Astryx's `·` separator between the slots is dropped outright: with the time always present and the actions fading in beside it, the two already read as separate and the bullet only adds a mark. - The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not of the 12px time, so it sat tighter against the bubble than the margin suggested. Verified in Storybook against computed styles: `<time>` with a datetime, no `aria-hidden`, opacity 1 at rest; separator `display: none`; icons 14×14 in a 16px slot at the globally governed 1.75 stroke; buttons direct children of the meta row with `aria-describedby` set. A transparent action is still clickable. `pointer-events: none` was tried and reverted: it depends on the browser redoing hit-testing after the ancestor `:hover` restores the button, and the jump-and-stop case could not be reproduced on this surface to prove it safe.

Astro-Han · 2026-08-06T17:55:55Z

Summary

The row under a chat message reimplemented parts Astryx already ships, and every visible defect in it traced back to one of those reimplementations.

Time. A hand-rolled <small> carried a native title and aria-hidden, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now Timestamp — a semantic <time datetime> with a copyable hover card, and exactly what ChatMessageMetadata's own docs put in that slot. formatClockTime had no other caller and is deleted.
Icons. Four separate 12 literals became one named constant at 14. --icon-size reserves 12–14 for "dense meta" and this row is dense meta; 14 is also where the same position already sits most often across the app. A size must be passed at all because Astryx's sm button bounds the icon slot at 16px without resizing the glyph — measured, an unsized lucide icon renders 16×24, squashed.
Tooltips. Each button was wrapped in a <Tooltip> element. Button takes a tooltip prop and attaches the same behaviour through a hook, which is what its source recommends. The display: contents wrapper is gone and aria-describedby now resolves — previously it computed to nothing, which is why call sites carried hand-written aria-label fallbacks.
Hover gate. It sat on the whole row and so covered the time too, contrary to what the comment directly above it claimed. It moves to the footer slot, so the time stays visible. Astryx's · separator is dropped rather than gated: with the time always present and the actions fading in beside it, the bullet added a mark without adding a distinction.
Spacing. The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not the 12px of the time, so it sat tighter against the bubble than its margin suggested.

Behaviour change worth knowing: the hour cycle now follows the host locale instead of a hardcoded hour12: false. Most locales are unaffected (14:32 in zh / en-GB / ja / de / fr); en-US renders 2:32 PM. The hour also loses its leading zero (9:05, not 09:05), which is why tabular-nums stays on that element.

Refs #2359 — the icon sizing policy this lands against is unenforced repo-wide (145 hardcoded sizes across 11 values). This PR deliberately does not attempt that sweep.

Verification

npm run -w @maka/ui test — 442 passing
npm run -w @maka/ui typecheck, npm --workspace @maka/desktop run typecheck — clean
npm run lint, npm run format:check — clean
node scripts/check-dead-css.mjs --check, node scripts/check-a11y.mjs — clean
Not run: Playwright E2E and the desktop main-process suite — this change is renderer-only presentation with no journey or IPC surface.

Checked against computed styles in Storybook (Product/Shell Official AppShell → Native Conversation) rather than by eye:

	result
time element	`<time datetime="…">`, no `aria-hidden`, opacity 1 at rest
separator	`display: none`
icon	14×14 in a 16px slot, 28px button, stroke 1.75 (the globally governed value)
tooltip wiring	button is a direct child of the meta row, `aria-describedby` resolves
spacing	row `margin-top: 6px`

Review focus

pointer-events: none was tried on the transparent actions — a transparent button still takes clicks — and reverted. It makes the pointer fall through to the ancestor whose :hover is what restores the button, so being clickable again depends on the browser redoing hit-testing on a later mouse event. Continuous movement gets there; a pointer that jumps onto the button and stops could not be reproduced on this surface, so the fix could not be demonstrated safe. The pre-existing behaviour is left untouched and the reasoning is recorded in the CSS.

The row below a message reimplemented parts Astryx already ships, and each visible defect traced to one of those reimplementations. - The time was a hand-rolled `<small>` carrying a native `title` and `aria-hidden`, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now `Timestamp`, which is what `ChatMessageMetadata`'s own docs put in that slot: a semantic `<time datetime>` with a copyable hover card. `formatClockTime` had no other caller and is gone; its `hour12: false` was the app overriding a preference that belongs to the reader's system, so the hour cycle now follows the host locale (`14:32` in zh/en-GB/ja/de/fr, `2:32 PM` in en-US) and the hour loses its leading zero. - Footer icons were four separate `12` literals. They are now one named constant at 14 — the top of the range `--icon-size` reserves for "dense meta", and where the same position already sits most often across the app. A size has to be passed at all because Astryx's `sm` button bounds the icon slot at 16px without resizing the glyph: measured, an unsized lucide icon renders 16×24, squashed. - Tooltips wrapped each button in a `<Tooltip>` element. `Button` takes a `tooltip` prop and attaches the same behaviour through a hook, which is what its source recommends — the `display: contents` wrapper is gone and `aria-describedby` now resolves. - The hover gate sat on the row and so covered the time too, contrary to what the comment above it claimed. It moves to the footer slot, so the time stays put. Astryx's `·` separator between the slots is dropped outright: with the time always present and the actions fading in beside it, the two already read as separate and the bullet only adds a mark. - The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not of the 12px time, so it sat tighter against the bubble than the margin suggested. Verified in Storybook against computed styles: `<time>` with a datetime, no `aria-hidden`, opacity 1 at rest; separator `display: none`; icons 14×14 in a 16px slot at the globally governed 1.75 stroke; buttons direct children of the meta row with `aria-describedby` set. A transparent action is still clickable. `pointer-events: none` was tried and reverted: it depends on the browser redoing hit-testing after the ancestor `:hover` restores the button, and the jump-and-stop case could not be reproduced on this surface to prove it safe.

Astro-Han · 2026-08-06T17:55:55Z

Summary

The row under a chat message reimplemented parts Astryx already ships, and every visible defect in it traced back to one of those reimplementations.

Time. A hand-rolled <small> carried a native title and aria-hidden, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now Timestamp — a semantic <time datetime> with a copyable hover card, and exactly what ChatMessageMetadata's own docs put in that slot. formatClockTime had no other caller and is deleted.
Icons. Four separate 12 literals became one named constant at 14. --icon-size reserves 12–14 for "dense meta" and this row is dense meta; 14 is also where the same position already sits most often across the app. A size must be passed at all because Astryx's sm button bounds the icon slot at 16px without resizing the glyph — measured, an unsized lucide icon renders 16×24, squashed.
Tooltips. Each button was wrapped in a <Tooltip> element. Button takes a tooltip prop and attaches the same behaviour through a hook, which is what its source recommends. The display: contents wrapper is gone and aria-describedby now resolves — previously it computed to nothing, which is why call sites carried hand-written aria-label fallbacks.
Hover gate. It sat on the whole row and so covered the time too, contrary to what the comment directly above it claimed. It moves to the footer slot, so the time stays visible. Astryx's · separator is dropped rather than gated: with the time always present and the actions fading in beside it, the bullet added a mark without adding a distinction.
Spacing. The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not the 12px of the time, so it sat tighter against the bubble than its margin suggested.

Behaviour change worth knowing: the hour cycle now follows the host locale instead of a hardcoded hour12: false. Most locales are unaffected (14:32 in zh / en-GB / ja / de / fr); en-US renders 2:32 PM. The hour also loses its leading zero (9:05, not 09:05), which is why tabular-nums stays on that element.

Refs #2359 — the icon sizing policy this lands against is unenforced repo-wide (145 hardcoded sizes across 11 values). This PR deliberately does not attempt that sweep.

Verification

npm run -w @maka/ui test — 442 passing
npm run -w @maka/ui typecheck, npm --workspace @maka/desktop run typecheck — clean
npm run lint, npm run format:check — clean
node scripts/check-dead-css.mjs --check, node scripts/check-a11y.mjs — clean
Not run: Playwright E2E and the desktop main-process suite — this change is renderer-only presentation with no journey or IPC surface.

Checked against computed styles in Storybook (Product/Shell Official AppShell → Native Conversation) rather than by eye:

	result
time element	`<time datetime="…">`, no `aria-hidden`, opacity 1 at rest
separator	`display: none`
icon	14×14 in a 16px slot, 28px button, stroke 1.75 (the globally governed value)
tooltip wiring	button is a direct child of the meta row, `aria-describedby` resolves
spacing	row `margin-top: 6px`

Review focus

pointer-events: none was tried on the transparent actions — a transparent button still takes clicks — and reverted. It makes the pointer fall through to the ancestor whose :hover is what restores the button, so being clickable again depends on the browser redoing hit-testing on a later mouse event. Continuous movement gets there; a pointer that jumps onto the button and stops could not be reproduced on this surface, so the fix could not be demonstrated safe. The pre-existing behaviour is left untouched and the reasoning is recorded in the CSS.

The row below a message reimplemented parts Astryx already ships, and each visible defect traced to one of those reimplementations. - The time was a hand-rolled `<small>` carrying a native `title` and `aria-hidden`, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now `Timestamp`, which is what `ChatMessageMetadata`'s own docs put in that slot: a semantic `<time datetime>` with a copyable hover card. `formatClockTime` had no other caller and is gone; its `hour12: false` was the app overriding a preference that belongs to the reader's system, so the hour cycle now follows the host locale (`14:32` in zh/en-GB/ja/de/fr, `2:32 PM` in en-US) and the hour loses its leading zero. - Footer icons were four separate `12` literals. They are now one named constant at 14 — the top of the range `--icon-size` reserves for "dense meta", and where the same position already sits most often across the app. A size has to be passed at all because Astryx's `sm` button bounds the icon slot at 16px without resizing the glyph: measured, an unsized lucide icon renders 16×24, squashed. - Tooltips wrapped each button in a `<Tooltip>` element. `Button` takes a `tooltip` prop and attaches the same behaviour through a hook, which is what its source recommends — the `display: contents` wrapper is gone and `aria-describedby` now resolves. - The hover gate sat on the row and so covered the time too, contrary to what the comment above it claimed. It moves to the footer slot, so the time stays put. Astryx's `·` separator between the slots is dropped outright: with the time always present and the actions fading in beside it, the two already read as separate and the bullet only adds a mark. - The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not of the 12px time, so it sat tighter against the bubble than the margin suggested. Verified in Storybook against computed styles: `<time>` with a datetime, no `aria-hidden`, opacity 1 at rest; separator `display: none`; icons 14×14 in a 16px slot at the globally governed 1.75 stroke; buttons direct children of the meta row with `aria-describedby` set. A transparent action is still clickable. `pointer-events: none` was tried and reverted: it depends on the browser redoing hit-testing after the ancestor `:hover` restores the button, and the jump-and-stop case could not be reproduced on this surface to prove it safe.

Astro-Han · 2026-08-06T17:55:55Z

Summary

The row under a chat message reimplemented parts Astryx already ships, and every visible defect in it traced back to one of those reimplementations.

Time. A hand-rolled <small> carried a native title and aria-hidden, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now Timestamp — a semantic <time datetime> with a copyable hover card, and exactly what ChatMessageMetadata's own docs put in that slot. formatClockTime had no other caller and is deleted.
Icons. Four separate 12 literals became one named constant at 14. --icon-size reserves 12–14 for "dense meta" and this row is dense meta; 14 is also where the same position already sits most often across the app. A size must be passed at all because Astryx's sm button bounds the icon slot at 16px without resizing the glyph — measured, an unsized lucide icon renders 16×24, squashed.
Tooltips. Each button was wrapped in a <Tooltip> element. Button takes a tooltip prop and attaches the same behaviour through a hook, which is what its source recommends. The display: contents wrapper is gone and aria-describedby now resolves — previously it computed to nothing, which is why call sites carried hand-written aria-label fallbacks.
Hover gate. It sat on the whole row and so covered the time too, contrary to what the comment directly above it claimed. It moves to the footer slot, so the time stays visible. Astryx's · separator is dropped rather than gated: with the time always present and the actions fading in beside it, the bullet added a mark without adding a distinction.
Spacing. The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not the 12px of the time, so it sat tighter against the bubble than its margin suggested.

Behaviour change worth knowing: the hour cycle now follows the host locale instead of a hardcoded hour12: false. Most locales are unaffected (14:32 in zh / en-GB / ja / de / fr); en-US renders 2:32 PM. The hour also loses its leading zero (9:05, not 09:05), which is why tabular-nums stays on that element.

Refs #2359 — the icon sizing policy this lands against is unenforced repo-wide (145 hardcoded sizes across 11 values). This PR deliberately does not attempt that sweep.

Verification

npm run -w @maka/ui test — 442 passing
npm run -w @maka/ui typecheck, npm --workspace @maka/desktop run typecheck — clean
npm run lint, npm run format:check — clean
node scripts/check-dead-css.mjs --check, node scripts/check-a11y.mjs — clean
Not run: Playwright E2E and the desktop main-process suite — this change is renderer-only presentation with no journey or IPC surface.

Checked against computed styles in Storybook (Product/Shell Official AppShell → Native Conversation) rather than by eye:

	result
time element	`<time datetime="…">`, no `aria-hidden`, opacity 1 at rest
separator	`display: none`
icon	14×14 in a 16px slot, 28px button, stroke 1.75 (the globally governed value)
tooltip wiring	button is a direct child of the meta row, `aria-describedby` resolves
spacing	row `margin-top: 6px`

Review focus

pointer-events: none was tried on the transparent actions — a transparent button still takes clicks — and reverted. It makes the pointer fall through to the ancestor whose :hover is what restores the button, so being clickable again depends on the browser redoing hit-testing on a later mouse event. Continuous movement gets there; a pointer that jumps onto the button and stops could not be reproduced on this surface, so the fix could not be demonstrated safe. The pre-existing behaviour is left untouched and the reasoning is recorded in the CSS.

The row below a message reimplemented parts Astryx already ships, and each visible defect traced to one of those reimplementations. - The time was a hand-rolled `<small>` carrying a native `title` and `aria-hidden`, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now `Timestamp`, which is what `ChatMessageMetadata`'s own docs put in that slot: a semantic `<time datetime>` with a copyable hover card. `formatClockTime` had no other caller and is gone; its `hour12: false` was the app overriding a preference that belongs to the reader's system, so the hour cycle now follows the host locale (`14:32` in zh/en-GB/ja/de/fr, `2:32 PM` in en-US) and the hour loses its leading zero. - Footer icons were four separate `12` literals. They are now one named constant at 14 — the top of the range `--icon-size` reserves for "dense meta", and where the same position already sits most often across the app. A size has to be passed at all because Astryx's `sm` button bounds the icon slot at 16px without resizing the glyph: measured, an unsized lucide icon renders 16×24, squashed. - Tooltips wrapped each button in a `<Tooltip>` element. `Button` takes a `tooltip` prop and attaches the same behaviour through a hook, which is what its source recommends — the `display: contents` wrapper is gone and `aria-describedby` now resolves. - The hover gate sat on the row and so covered the time too, contrary to what the comment above it claimed. It moves to the footer slot, so the time stays put. Astryx's `·` separator between the slots is dropped outright: with the time always present and the actions fading in beside it, the two already read as separate and the bullet only adds a mark. - The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not of the 12px time, so it sat tighter against the bubble than the margin suggested. Verified in Storybook against computed styles: `<time>` with a datetime, no `aria-hidden`, opacity 1 at rest; separator `display: none`; icons 14×14 in a 16px slot at the globally governed 1.75 stroke; buttons direct children of the meta row with `aria-describedby` set. A transparent action is still clickable. `pointer-events: none` was tried and reverted: it depends on the browser redoing hit-testing after the ancestor `:hover` restores the button, and the jump-and-stop case could not be reproduced on this surface to prove it safe.

Astro-Han · 2026-08-06T17:55:55Z

Summary

The row under a chat message reimplemented parts Astryx already ships, and every visible defect in it traced back to one of those reimplementations.

Time. A hand-rolled <small> carried a native title and aria-hidden, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now Timestamp — a semantic <time datetime> with a copyable hover card, and exactly what ChatMessageMetadata's own docs put in that slot. formatClockTime had no other caller and is deleted.
Icons. Four separate 12 literals became one named constant at 14. --icon-size reserves 12–14 for "dense meta" and this row is dense meta; 14 is also where the same position already sits most often across the app. A size must be passed at all because Astryx's sm button bounds the icon slot at 16px without resizing the glyph — measured, an unsized lucide icon renders 16×24, squashed.
Tooltips. Each button was wrapped in a <Tooltip> element. Button takes a tooltip prop and attaches the same behaviour through a hook, which is what its source recommends. The display: contents wrapper is gone and aria-describedby now resolves — previously it computed to nothing, which is why call sites carried hand-written aria-label fallbacks.
Hover gate. It sat on the whole row and so covered the time too, contrary to what the comment directly above it claimed. It moves to the footer slot, so the time stays visible. Astryx's · separator is dropped rather than gated: with the time always present and the actions fading in beside it, the bullet added a mark without adding a distinction.
Spacing. The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not the 12px of the time, so it sat tighter against the bubble than its margin suggested.

Behaviour change worth knowing: the hour cycle now follows the host locale instead of a hardcoded hour12: false. Most locales are unaffected (14:32 in zh / en-GB / ja / de / fr); en-US renders 2:32 PM. The hour also loses its leading zero (9:05, not 09:05), which is why tabular-nums stays on that element.

Refs #2359 — the icon sizing policy this lands against is unenforced repo-wide (145 hardcoded sizes across 11 values). This PR deliberately does not attempt that sweep.

Verification

npm run -w @maka/ui test — 442 passing
npm run -w @maka/ui typecheck, npm --workspace @maka/desktop run typecheck — clean
npm run lint, npm run format:check — clean
node scripts/check-dead-css.mjs --check, node scripts/check-a11y.mjs — clean
Not run: Playwright E2E and the desktop main-process suite — this change is renderer-only presentation with no journey or IPC surface.

Checked against computed styles in Storybook (Product/Shell Official AppShell → Native Conversation) rather than by eye:

	result
time element	`<time datetime="…">`, no `aria-hidden`, opacity 1 at rest
separator	`display: none`
icon	14×14 in a 16px slot, 28px button, stroke 1.75 (the globally governed value)
tooltip wiring	button is a direct child of the meta row, `aria-describedby` resolves
spacing	row `margin-top: 6px`

Review focus

pointer-events: none was tried on the transparent actions — a transparent button still takes clicks — and reverted. It makes the pointer fall through to the ancestor whose :hover is what restores the button, so being clickable again depends on the browser redoing hit-testing on a later mouse event. Continuous movement gets there; a pointer that jumps onto the button and stops could not be reproduced on this surface, so the fix could not be demonstrated safe. The pre-existing behaviour is left untouched and the reasoning is recorded in the CSS.

The row below a message reimplemented parts Astryx already ships, and each visible defect traced to one of those reimplementations. - The time was a hand-rolled `<small>` carrying a native `title` and `aria-hidden`, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now `Timestamp`, which is what `ChatMessageMetadata`'s own docs put in that slot: a semantic `<time datetime>` with a copyable hover card. `formatClockTime` had no other caller and is gone; its `hour12: false` was the app overriding a preference that belongs to the reader's system, so the hour cycle now follows the host locale (`14:32` in zh/en-GB/ja/de/fr, `2:32 PM` in en-US) and the hour loses its leading zero. - Footer icons were four separate `12` literals. They are now one named constant at 14 — the top of the range `--icon-size` reserves for "dense meta", and where the same position already sits most often across the app. A size has to be passed at all because Astryx's `sm` button bounds the icon slot at 16px without resizing the glyph: measured, an unsized lucide icon renders 16×24, squashed. - Tooltips wrapped each button in a `<Tooltip>` element. `Button` takes a `tooltip` prop and attaches the same behaviour through a hook, which is what its source recommends — the `display: contents` wrapper is gone and `aria-describedby` now resolves. - The hover gate sat on the row and so covered the time too, contrary to what the comment above it claimed. It moves to the footer slot, so the time stays put. Astryx's `·` separator between the slots is dropped outright: with the time always present and the actions fading in beside it, the two already read as separate and the bullet only adds a mark. - The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not of the 12px time, so it sat tighter against the bubble than the margin suggested. Verified in Storybook against computed styles: `<time>` with a datetime, no `aria-hidden`, opacity 1 at rest; separator `display: none`; icons 14×14 in a 16px slot at the globally governed 1.75 stroke; buttons direct children of the meta row with `aria-describedby` set. A transparent action is still clickable. `pointer-events: none` was tried and reverted: it depends on the browser redoing hit-testing after the ancestor `:hover` restores the button, and the jump-and-stop case could not be reproduced on this surface to prove it safe.

Astro-Han · 2026-08-06T17:55:55Z

Summary

The row under a chat message reimplemented parts Astryx already ships, and every visible defect in it traced back to one of those reimplementations.

Time. A hand-rolled <small> carried a native title and aria-hidden, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now Timestamp — a semantic <time datetime> with a copyable hover card, and exactly what ChatMessageMetadata's own docs put in that slot. formatClockTime had no other caller and is deleted.
Icons. Four separate 12 literals became one named constant at 14. --icon-size reserves 12–14 for "dense meta" and this row is dense meta; 14 is also where the same position already sits most often across the app. A size must be passed at all because Astryx's sm button bounds the icon slot at 16px without resizing the glyph — measured, an unsized lucide icon renders 16×24, squashed.
Tooltips. Each button was wrapped in a <Tooltip> element. Button takes a tooltip prop and attaches the same behaviour through a hook, which is what its source recommends. The display: contents wrapper is gone and aria-describedby now resolves — previously it computed to nothing, which is why call sites carried hand-written aria-label fallbacks.
Hover gate. It sat on the whole row and so covered the time too, contrary to what the comment directly above it claimed. It moves to the footer slot, so the time stays visible. Astryx's · separator is dropped rather than gated: with the time always present and the actions fading in beside it, the bullet added a mark without adding a distinction.
Spacing. The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not the 12px of the time, so it sat tighter against the bubble than its margin suggested.

Behaviour change worth knowing: the hour cycle now follows the host locale instead of a hardcoded hour12: false. Most locales are unaffected (14:32 in zh / en-GB / ja / de / fr); en-US renders 2:32 PM. The hour also loses its leading zero (9:05, not 09:05), which is why tabular-nums stays on that element.

Refs #2359 — the icon sizing policy this lands against is unenforced repo-wide (145 hardcoded sizes across 11 values). This PR deliberately does not attempt that sweep.

Verification

npm run -w @maka/ui test — 442 passing
npm run -w @maka/ui typecheck, npm --workspace @maka/desktop run typecheck — clean
npm run lint, npm run format:check — clean
node scripts/check-dead-css.mjs --check, node scripts/check-a11y.mjs — clean
Not run: Playwright E2E and the desktop main-process suite — this change is renderer-only presentation with no journey or IPC surface.

Checked against computed styles in Storybook (Product/Shell Official AppShell → Native Conversation) rather than by eye:

	result
time element	`<time datetime="…">`, no `aria-hidden`, opacity 1 at rest
separator	`display: none`
icon	14×14 in a 16px slot, 28px button, stroke 1.75 (the globally governed value)
tooltip wiring	button is a direct child of the meta row, `aria-describedby` resolves
spacing	row `margin-top: 6px`

Review focus

pointer-events: none was tried on the transparent actions — a transparent button still takes clicks — and reverted. It makes the pointer fall through to the ancestor whose :hover is what restores the button, so being clickable again depends on the browser redoing hit-testing on a later mouse event. Continuous movement gets there; a pointer that jumps onto the button and stops could not be reproduced on this surface, so the fix could not be demonstrated safe. The pre-existing behaviour is left untouched and the reasoning is recorded in the CSS.

The row below a message reimplemented parts Astryx already ships, and each visible defect traced to one of those reimplementations. - The time was a hand-rolled `<small>` carrying a native `title` and `aria-hidden`, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now `Timestamp`, which is what `ChatMessageMetadata`'s own docs put in that slot: a semantic `<time datetime>` with a copyable hover card. `formatClockTime` had no other caller and is gone; its `hour12: false` was the app overriding a preference that belongs to the reader's system, so the hour cycle now follows the host locale (`14:32` in zh/en-GB/ja/de/fr, `2:32 PM` in en-US) and the hour loses its leading zero. - Footer icons were four separate `12` literals. They are now one named constant at 14 — the top of the range `--icon-size` reserves for "dense meta", and where the same position already sits most often across the app. A size has to be passed at all because Astryx's `sm` button bounds the icon slot at 16px without resizing the glyph: measured, an unsized lucide icon renders 16×24, squashed. - Tooltips wrapped each button in a `<Tooltip>` element. `Button` takes a `tooltip` prop and attaches the same behaviour through a hook, which is what its source recommends — the `display: contents` wrapper is gone and `aria-describedby` now resolves. - The hover gate sat on the row and so covered the time too, contrary to what the comment above it claimed. It moves to the footer slot, so the time stays put. Astryx's `·` separator between the slots is dropped outright: with the time always present and the actions fading in beside it, the two already read as separate and the bullet only adds a mark. - The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not of the 12px time, so it sat tighter against the bubble than the margin suggested. Verified in Storybook against computed styles: `<time>` with a datetime, no `aria-hidden`, opacity 1 at rest; separator `display: none`; icons 14×14 in a 16px slot at the globally governed 1.75 stroke; buttons direct children of the meta row with `aria-describedby` set. A transparent action is still clickable. `pointer-events: none` was tried and reverted: it depends on the browser redoing hit-testing after the ancestor `:hover` restores the button, and the jump-and-stop case could not be reproduced on this surface to prove it safe.

Astro-Han · 2026-08-06T17:55:55Z

Summary

The row under a chat message reimplemented parts Astryx already ships, and every visible defect in it traced back to one of those reimplementations.

Time. A hand-rolled <small> carried a native title and aria-hidden, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now Timestamp — a semantic <time datetime> with a copyable hover card, and exactly what ChatMessageMetadata's own docs put in that slot. formatClockTime had no other caller and is deleted.
Icons. Four separate 12 literals became one named constant at 14. --icon-size reserves 12–14 for "dense meta" and this row is dense meta; 14 is also where the same position already sits most often across the app. A size must be passed at all because Astryx's sm button bounds the icon slot at 16px without resizing the glyph — measured, an unsized lucide icon renders 16×24, squashed.
Tooltips. Each button was wrapped in a <Tooltip> element. Button takes a tooltip prop and attaches the same behaviour through a hook, which is what its source recommends. The display: contents wrapper is gone and aria-describedby now resolves — previously it computed to nothing, which is why call sites carried hand-written aria-label fallbacks.
Hover gate. It sat on the whole row and so covered the time too, contrary to what the comment directly above it claimed. It moves to the footer slot, so the time stays visible. Astryx's · separator is dropped rather than gated: with the time always present and the actions fading in beside it, the bullet added a mark without adding a distinction.
Spacing. The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not the 12px of the time, so it sat tighter against the bubble than its margin suggested.

Behaviour change worth knowing: the hour cycle now follows the host locale instead of a hardcoded hour12: false. Most locales are unaffected (14:32 in zh / en-GB / ja / de / fr); en-US renders 2:32 PM. The hour also loses its leading zero (9:05, not 09:05), which is why tabular-nums stays on that element.

Refs #2359 — the icon sizing policy this lands against is unenforced repo-wide (145 hardcoded sizes across 11 values). This PR deliberately does not attempt that sweep.

Verification

npm run -w @maka/ui test — 442 passing
npm run -w @maka/ui typecheck, npm --workspace @maka/desktop run typecheck — clean
npm run lint, npm run format:check — clean
node scripts/check-dead-css.mjs --check, node scripts/check-a11y.mjs — clean
Not run: Playwright E2E and the desktop main-process suite — this change is renderer-only presentation with no journey or IPC surface.

Checked against computed styles in Storybook (Product/Shell Official AppShell → Native Conversation) rather than by eye:

	result
time element	`<time datetime="…">`, no `aria-hidden`, opacity 1 at rest
separator	`display: none`
icon	14×14 in a 16px slot, 28px button, stroke 1.75 (the globally governed value)
tooltip wiring	button is a direct child of the meta row, `aria-describedby` resolves
spacing	row `margin-top: 6px`

Review focus

pointer-events: none was tried on the transparent actions — a transparent button still takes clicks — and reverted. It makes the pointer fall through to the ancestor whose :hover is what restores the button, so being clickable again depends on the browser redoing hit-testing on a later mouse event. Continuous movement gets there; a pointer that jumps onto the button and stops could not be reproduced on this surface, so the fix could not be demonstrated safe. The pre-existing behaviour is left untouched and the reasoning is recorded in the CSS.

The row below a message reimplemented parts Astryx already ships, and each visible defect traced to one of those reimplementations. - The time was a hand-rolled `<small>` carrying a native `title` and `aria-hidden`, so the absolute reading was mouse-only and the visible one was hidden from assistive tech. It is now `Timestamp`, which is what `ChatMessageMetadata`'s own docs put in that slot: a semantic `<time datetime>` with a copyable hover card. `formatClockTime` had no other caller and is gone; its `hour12: false` was the app overriding a preference that belongs to the reader's system, so the hour cycle now follows the host locale (`14:32` in zh/en-GB/ja/de/fr, `2:32 PM` in en-US) and the hour loses its leading zero. - Footer icons were four separate `12` literals. They are now one named constant at 14 — the top of the range `--icon-size` reserves for "dense meta", and where the same position already sits most often across the app. A size has to be passed at all because Astryx's `sm` button bounds the icon slot at 16px without resizing the glyph: measured, an unsized lucide icon renders 16×24, squashed. - Tooltips wrapped each button in a `<Tooltip>` element. `Button` takes a `tooltip` prop and attaches the same behaviour through a hook, which is what its source recommends — the `display: contents` wrapper is gone and `aria-describedby` now resolves. - The hover gate sat on the row and so covered the time too, contrary to what the comment above it claimed. It moves to the footer slot, so the time stays put. Astryx's `·` separator between the slots is dropped outright: with the time always present and the actions fading in beside it, the two already read as separate and the bullet only adds a mark. - The row's top margin goes 4px → 6px. Its box is the 28px height of the buttons, not of the 12px time, so it sat tighter against the bubble than the margin suggested. Verified in Storybook against computed styles: `<time>` with a datetime, no `aria-hidden`, opacity 1 at rest; separator `display: none`; icons 14×14 in a 16px slot at the globally governed 1.75 stroke; buttons direct children of the meta row with `aria-describedby` set. A transparent action is still clickable. `pointer-events: none` was tried and reverted: it depends on the browser redoing hit-testing after the ancestor `:hover` restores the button, and the jump-and-stop case could not be reproduced on this surface to prove it safe.

This was referenced Aug 6, 2026
Converge icon sizes onto a governed scale #2359
Open
Sidebar rows nest a <button> inside a <button> #2360
Closed

Astro-Han marked this pull request as ready for review August 7, 2026 03:35

Astro-Han merged commit e4168f2 into mainAug 7, 2026
19 of 23 checks passed