Skip to content

refactor(emcn): own shared shimmer text treatment - #8252

Open
BillLeoutsakosvl346 wants to merge 5 commits into
stagingfrom
codex/emcn-next-shimmer-text
Open

BillLeoutsakosvl346 wants to merge 5 commits into
stagingfrom
codex/emcn-next-shimmer-text

Conversation

@BillLeoutsakosvl346

@BillLeoutsakosvl346 BillLeoutsakosvl346 commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • Move the existing shared shimmer text treatment into EMCN, with the same CSS animation and reduced-motion behavior.
  • Use it in activity status, agent streaming chrome, and the thinking loader while retaining each caller's typography and layout.
  • Keep the existing static thinking-loader label unchanged and update the relevant component mocks.

Validation

  • Focused EMCN and app tests: 44 passed on the refreshed head.
  • EMCN and app TypeScript checks passed.
  • Biome and git diff checks passed on changed files.
  • The local design diff checker reported no introduced confirmed findings or coverage failures against current staging (d8e7e923a2).
  • Matched source-derived captures in light and dark, at 16px and 20px root size, with ordinary and reduced motion. All eight cases matched before and after computed geometry and shimmer styling. Staging subsequently changed the active label wording in both base and head; the captures remain a comparison of the shimmer treatment. Review artifacts are stored outside this product PR.

@vercel

vercel Bot commented Sep 24, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated
docs Skipped Skipped Sep 25, 2026 12:55am UTC

Request Review

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@greptile review this PR

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@cubic-dev-ai review this PR

@cubic-dev-ai

cubic-dev-ai Bot commented Sep 24, 2026

Copy link
Copy Markdown
Contributor

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

@greptile-apps

greptile-apps Bot commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

RetriggerConfidence Score: 5/5

The PR appears safe to merge.

Summary

The PR moves the shared shimmer treatment into EMCN and updates activity status, agent-stream chrome, and the thinking loader to use it.

  • The change since the previous review replaces the chat-message test’s real-module mock with explicit exports.
  • No new actionable issue was identified.
Diagram
%%{init: {'theme': 'neutral'}}%%
flowchart LR
  S[EMCN ShimmerText] --> A[Activity status]
  S --> C[Agent-stream chrome]
  S --> T[Thinking loader]
Loading

Reviews (5) · Last reviewed commit: "test(chat): mock EMCN exports explicitly"

Comment thread packages/emcn/src/components/shimmer-text/shimmer-text.test.tsx

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 12 files

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

Re-trigger cubic

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 12 files

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

Re-trigger cubic

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@greptile review this updated commit

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@cubic-dev-ai review this updated commit

@cubic-dev-ai

cubic-dev-ai Bot commented Sep 24, 2026

Copy link
Copy Markdown
Contributor

@cubic-dev-ai review this updated commit

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 12 files

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

Re-trigger cubic

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@greptile review this updated commit

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@cubic-dev-ai review this updated commit

@cubic-dev-ai

cubic-dev-ai Bot commented Sep 24, 2026

Copy link
Copy Markdown
Contributor

@cubic-dev-ai review this updated commit

@BillLeoutsakosvl346 I’ve started reviewing the changes since the last completed review. I’ll post the results here when it’s done.

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

0 issues found across 1 file (changes from recent commits).

Re-trigger cubic

@BillLeoutsakosvl346

BillLeoutsakosvl346 commented Sep 25, 2026 •

Copy link
Copy Markdown
Contributor Author

Visual review: shared shimmer text

Change. The app-local ShimmerText moves into EMCN. Activity status and agent-stream imports point to the shared export, while ThinkingLoader uses that same component for its active label. The loader's nonshimmer static label stays separate. The gradient, 2.2s timing, text geometry, dark treatment, and reduced-motion fallback are preserved.

Source-exact ThinkingLoader excerpts (other consumers switch their ShimmerText import from the app module to @sim/emcn):

Before

<span className={shimmer ? styles.label : styles.labelStatic}>{shownLabel}</span>

After

{shimmer ? (
  <ShimmerText className={styles.label}>{shownLabel}</ShimmerText>
) : (
  <span className={styles.labelStatic}>{shownLabel}</span>
)}

Images. Each image is a labeled isolated render of the real before/after product compositions using compiled product CSS. Before is left; After is right. It covers ThinkingLoader, ActivityStatus, and agent-stream thinking. The earlier follow-up commits add tests. The staging merge preserves the shared shimmer renderer and CSS; staging also changed the active label wording to “Thinking” in both base and head. These captures document the shimmer treatment and geometry, while their text may show the earlier wording.

Mode Light 16px Dark 16px Light 20px Dark 20px
Normal motion Normal motion light 16px Before left After right Normal motion dark 16px Before left After right Normal motion light 20px Before left After right Normal motion dark 20px Before left After right
Reduced motion Reduced motion light 16px Before left After right Reduced motion dark 16px Before left After right Reduced motion light 20px Before left After right Reduced motion dark 20px Before left After right

Staging conflict resolution · cbbb28d930

Staging edited a JSDoc sentence in the app-local shimmer-text.tsx that this PR removes. The resolution keeps the deletion and the EMCN export; no second implementation remains. The Thinking wording change came from staging and is present on both sides of the current comparison. Focused app and EMCN tests (44), both type checks, and the local design diff check pass with no new findings.

Review follow-up · de0a95ee5e: The latest commit replaces a test mock that loaded the real EMCN module with explicit mocked exports. It changes no product component, CSS, or visual state shown above.

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@greptileai review this PR

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@cubic-dev-ai review this PR

@cubic-dev-ai

cubic-dev-ai Bot commented Sep 25, 2026

Copy link
Copy Markdown
Contributor

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 13 files

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

Re-trigger cubic

Comment thread apps/sim/app/(interfaces)/chat/components/message/message.test.tsx Outdated
@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@greptileai review this PR

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@cubic-dev-ai review this PR

@cubic-dev-ai

cubic-dev-ai Bot commented Sep 25, 2026

Copy link
Copy Markdown
Contributor

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 13 files

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

Re-trigger cubic

This branch was previously deployed

1 inactive deployment
Preview — de0a95ee Deployed Sep 25, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant