feat(playground): UI update #323

Hanssen0 · 2025-09-30T23:42:46Z

I have read the Contributing Guidelines

changeset-bot · 2025-09-30T23:42:50Z

⚠️ No Changeset found

Latest commit: 33e8189

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

netlify · 2025-09-30T23:42:51Z

✅ Deploy Preview for liveccc ready!

Name	Link
🔨 Latest commit	`33e8189`
🔍 Latest deploy log	https://app.netlify.com/projects/liveccc/deploys/68ddaca167f53000085777b9
😎 Deploy Preview	https://deploy-preview-323--liveccc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 33 (🟢 up 12 from production) Accessibility: 88 (no change from production) Best Practices: 92 (🔴 down 8 from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-09-30T23:42:51Z

✅ Deploy Preview for appccc ready!

Name	Link
🔨 Latest commit	`33e8189`
🔍 Latest deploy log	https://app.netlify.com/projects/appccc/deploys/68ddaca19580a40008515099
😎 Deploy Preview	https://deploy-preview-323--appccc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 53 (🟢 up 3 from production) Accessibility: 89 (🟢 up 1 from production) Best Practices: 92 (🔴 down 8 from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

gemini-code-assist · 2025-09-30T23:43:05Z

Summary of Changes

Hello @Hanssen0, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request delivers a comprehensive UI update for the playground, primarily focusing on enhancing the visual representation of 'cells' by integrating new symbolic graphics. It also refines the overall aesthetic with a refreshed color scheme and minor text adjustments across various components, aiming to provide a more engaging and informative user experience.

Highlights

New Bagua Component: Introduced TrigramLine, Trigram, and Bagua components, which are new React components designed to render symbolic trigram and Bagua graphics using SVG, based on numerical values.
Cell UI Redesign: The visual representation of the Cell component has been significantly updated. It now integrates the new Bagua graphics to dynamically represent cell lock and type scripts, and includes adjustments to text sizes for capacity display.
Theming and Styling Update: The application's global color scheme has been refreshed, changing the body background and text colors. Additionally, border colors in the Transaction and Console components have been updated to align with the new aesthetic.
Script Color Utility Enhancement: The getScriptColor utility function has been improved to gracefully handle optional script inputs, returning a default color when no script is provided, and now generates slightly darker HSL colors for better contrast.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

netlify · 2025-09-30T23:43:19Z

✅ Deploy Preview for apiccc ready!

Name	Link
🔨 Latest commit	`33e8189`
🔍 Latest deploy log	https://app.netlify.com/projects/apiccc/deploys/68ddaca1cf101e0008667d87
😎 Deploy Preview	https://deploy-preview-323--apiccc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 88 (🔴 down 6 from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 94 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-09-30T23:44:44Z

✅ Deploy Preview for docsccc ready!

Name	Link
🔨 Latest commit	`33e8189`
🔍 Latest deploy log	https://app.netlify.com/projects/docsccc/deploys/68ddaca2fd0dba0008128c01
😎 Deploy Preview	https://deploy-preview-323--docsccc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 55 (🔴 down 14 from production) Accessibility: 88 (no change from production) Best Practices: 92 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

gemini-code-assist

Code Review

This pull request introduces a significant UI update, including a new Bagua component for visualizing script hashes and a new color theme. The changes are well-implemented. I've provided a few suggestions to improve code clarity and consistency in the new Bagua.tsx component by refining how props are destructured. I also noted a potential issue with a non-standard Tailwind CSS class name in Cell.tsx.

packages/playground/src/app/components/Bagua.tsx

packages/playground/src/app/components/Cell.tsx

Hanssen0 · 2025-09-30T23:54:34Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces a significant UI update for the playground, notably by adding a new Bagua component to visualize cell data and updating the overall color theme. My review has identified a critical issue in the new Cell.tsx component regarding the calculation of a value passed to Bagua, which would likely cause a runtime error. I have provided a suggestion to fix this. Additionally, I've noted a minor naming issue in the new Bagua.tsx file that affects code clarity. The other changes related to the UI theme update appear to be consistent and well-implemented.

gemini-code-assist · 2025-09-30T23:56:19Z

packages/playground/src/app/components/Cell.tsx

+        value={
+          ccc.numFrom(cellOutput?.lock.hash() ?? 0) /
+          (ccc.numFrom(1) << ccc.numFrom(24))
+        }


The calculation for the value prop of the Bagua component appears to be incorrect and may cause runtime errors. The expression (ccc.numFrom(1) << ccc.numFrom(24)) is likely to throw a TypeError as the right-hand side of a bitwise shift cannot be a BigInt in JavaScript. Furthermore, dividing the hash is not the standard way to extract a specific number of bits. To provide a 24-bit value to the Bagua component from the hash, you should use a bitwise AND operation with a 24-bit mask. This will extract the lower 24 bits from the hash, which is likely the intended behavior.

value={ccc.numFrom(cellOutput?.lock.hash() ?? 0) & 0xffffffn}

gemini-code-assist · 2025-09-30T23:56:19Z

packages/playground/src/app/components/Cell.tsx

+        value={
+          ccc.numFrom(cellOutput?.type?.hash() ?? 0) /
+          (ccc.numFrom(1) << ccc.numFrom(24))
+        }


Similar to the lock.hash() calculation above, this logic for deriving the value from type.hash() is incorrect and could cause runtime errors. It should also be changed to use a bitwise AND operation with a 24-bit mask to correctly extract the lower 24 bits of the hash.

value={ccc.numFrom(cellOutput?.type?.hash() ?? 0) & 0xffffffn}

packages/playground/src/app/components/Bagua.tsx

* feat(playground): UI update * feat(playground): blink animation * docs(playground): update docs theme * fix: opengraph

gemini-code-assist bot reviewed Sep 30, 2025

View reviewed changes

Hanssen0 force-pushed the bagua branch 2 times, most recently from 32d4692 to 7f80320 Compare September 30, 2025 23:53

gemini-code-assist bot reviewed Sep 30, 2025

View reviewed changes

Hanssen0 force-pushed the bagua branch 13 times, most recently from 3cf0947 to e8b3252 Compare October 1, 2025 22:33

Hanssen0 added 4 commits October 2, 2025 06:34

feat(playground): UI update

d7ad0c4

feat(playground): blink animation

d280087

docs(playground): update docs theme

63738da

fix: opengraph

33e8189

Hanssen0 force-pushed the bagua branch from e8b3252 to 33e8189 Compare October 1, 2025 22:35

Hanssen0 changed the base branch from master to release October 1, 2025 22:56

Hanssen0 merged commit 9faa75a into ckb-devrel:release Oct 1, 2025
16 of 17 checks passed

Hanssen0 deleted the bagua branch October 1, 2025 22:57

ashuralyk pushed a commit to ashuralyk/ccc that referenced this pull request Jan 9, 2026

feat(playground): UI update (ckb-devrel#323)

c65406e

* feat(playground): UI update * feat(playground): blink animation * docs(playground): update docs theme * fix: opengraph

feat(playground): UI update #323

feat(playground): UI update #323

Uh oh!

Conversation

Hanssen0 commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

netlify bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for liveccc ready!

Uh oh!

netlify bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for appccc ready!

Uh oh!

gemini-code-assist bot commented Sep 30, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

netlify bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for apiccc ready!

Uh oh!

netlify bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for docsccc ready!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Hanssen0 commented Sep 30, 2025

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Hanssen0 commented Sep 30, 2025 •

edited

Loading

changeset-bot bot commented Sep 30, 2025 •

edited

Loading

netlify bot commented Sep 30, 2025 •

edited

Loading

netlify bot commented Sep 30, 2025 •

edited

Loading

netlify bot commented Sep 30, 2025 •

edited

Loading

netlify bot commented Sep 30, 2025 •

edited

Loading