Skip to content

feat: animate online machine halos at a constant speed - #1742

Merged
Lampese merged 2 commits into
mainfrom
codex/machine-online-pulse
Oct 19, 2026
Merged

Lampese merged 2 commits into
mainfrom
codex/machine-online-pulse

Conversation

@Lampese

@Lampese Lampese commented Oct 19, 2026

Copy link
Copy Markdown
Contributor

Related issue

Same-repository UI enhancement requested by the user.

Problem / pressure

The machine cards' online mark was static. The user requested an animated indicator with a constant expansion and contraction speed.

Summary

Animate a separate halo around the solid online dot: 1.4 seconds to expand, 1.4 seconds to contract, using linear timing. The centre stays fully visible and the dot keeps its existing layout box. Offline machines have no animated halo, and reduced motion keeps the online halo static.

The existing isOnline value still owns connection state. The animation adds no polling, timers, dependencies, or React updates per frame. A controlled Storybook preview makes online/offline transitions inspectable on the real card.

Visual explanation

WorkspaceMachineAccordionRow
└─ Status dot: fixed 10px box and existing accessible status label
   └─ Online halo: absolute positioning; transform and opacity only
      scale 0.875 → 1.2 → 0.875
      time  0s     1.4s   2.8s, then repeat

Constant-speed online halo preview

Cropped recording of the real machine card using synthetic data.

Before / after

Before After
Online machines had a fixed green dot and halo. The solid dot stays green while the halo expands and contracts at a constant speed.
Offline machines had a plain gray dot. The same gray dot, with no animated halo.
Reduced motion had a static indicator. The online halo remains static under reduced motion.

Test plan

  • Passed: NODE_ENV=test pnpm --filter @lody/components exec vitest run tests/workspace-machine-accordion.test.tsx.
  • Passed: real-component browser checks for equal scale changes at 350ms intervals in each direction, unchanged centre colour/opacity and layout geometry, online/offline/online transitions, and reduced motion.
  • Passed: component type checking and targeted typed lint.
  • Passed: pnpm format.
  • Passed: pnpm check — workspace type checking, typed and Effect lint, all configured workspace tests, i18n validation, and boundary guards.
  • pnpm run docs check reports the same six missing local Kimi/Pi submodule links in the bilingual subagent-events note; no new broken links or protected-topic changes.

Context handoff

This is a focused presentation change on a same-repository branch. The settings README and bilingual feature note document the animation, the existing presence boundary, and verification. The preview uses the production card component.

Keep the centre steady while a separate halo expands and contracts linearly. Respect reduced motion, stop the halo offline, and add a controlled Storybook preview with a recorded GIF.

Model: gpt-6.1-sol
@Lampese
Lampese marked this pull request as ready for review October 19, 2026 22:51
@Lampese
Lampese merged commit e9c1782 into main Oct 19, 2026
16 checks passed
@Lampese
Lampese deleted the codex/machine-online-pulse branch October 19, 2026 22:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant