feat: show/hide cu profiling

[C0mberry]

Description

• adding CollapsibleCard component
• refactoring of existing Collapse/Expand btns
• adding CollapsibleCard for CU profiling section

Type of change

• New feature

Screenshots

Testing

Storybook
Transaction Page

Related Issues

HOO-404

Checklist

• My code follows the project's style guidelines
• All tests pass locally and in CI
• I have run build:info script to update build information
• CI/CD checks pass
• I have included screenshots for protocol screens (if applicable)

[vercel]

@C0mberry is attempting to deploy a commit to the Solana Foundation Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Summary

This PR introduces a reusable CollapsibleCard component and migrates eight existing cards to use it, then wraps CUProfilingCard in it to deliver the show/hide feature. The refactor cleanly eliminates duplicated local expanded state across many components.

• InspectorInstructionCard gains an unintended Collapse/Expand button — collapsible is not passed, so it defaults to true, adding a toggle that was never present on the inspector page. Add collapsible={false} to restore the original behavior.

Confidence Score: 4/5

Safe to merge after fixing the InspectorInstructionCard collapsible default — all other changes are clean refactors.

One P1 issue: InspectorInstructionCard omits collapsible={false}, causing an unintended Collapse/Expand button to appear on the inspector page. The remaining findings are P2 style/UX concerns. The core CollapsibleCard abstraction and the CU profiling show/hide feature are well-implemented.

app/components/common/InspectorInstructionCard.tsx requires a one-line fix before merge.

Important Files Changed

Filename	Overview
app/components/shared/ui/collapsible-card.tsx	New reusable CollapsibleCard component with forwardRef, aria-expanded, and cn('card', className) merging — well-structured abstraction.
app/components/common/InspectorInstructionCard.tsx	Migrated to CollapsibleCard but omits collapsible={false}, adding an unintended Collapse/Expand button to inspector instruction cards that never had one.
app/components/common/BaseInstructionCard.tsx	Cleanly refactored to CollapsibleCard; local expanded state removed. Raw button is now enabled while card is collapsed (minor UX regression).
app/features/cu-profiling/ui/CUProfilingCard.tsx	Core feature: CU profiling card now wrapped in CollapsibleCard. className="e-card" results in "card e-card" due to cn() merge — may add unintended Bootstrap styles.
app/components/shared/ui/collapsible-card.stories.tsx	Comprehensive Storybook stories covering default, collapsed, non-collapsible, header-buttons, and badge-title variants.
app/components/inspector/AccountsCard.tsx	Clean migration to CollapsibleCard; original had a toggle button so the default collapsible=true is correct.
app/components/inspector/AddressTableLookupsCard.tsx	Clean migration to CollapsibleCard; original had a toggle button so the default collapsible=true is correct.
app/components/inspector/UnknownDetailsCard.tsx	Migrated to CollapsibleCard with defaultExpanded={false}, matching original collapsed-by-default behavior. React import correctly removed.
app/components/transaction/AccountsCard.tsx	Clean refactor; Raw button moved to headerButtons prop, expanded state removed, behavior preserved.
app/components/transaction/TokenBalancesCard.tsx	Straightforward migration to CollapsibleCard; original toggle button behavior preserved.
bench/BUILD.md	Updated build-size metrics reflecting the new bundle output; no code logic involved.

Class Diagram

%%{init: {'theme': 'neutral'}}%%
classDiagram
    class CollapsibleCard {
        +title: ReactNode
        +children: ReactNode
        +defaultExpanded: boolean
        +className?: string
        +headerButtons?: ReactNode
        +collapsible: boolean
        -expanded: boolean
        +setExpanded()
    }
    class BaseInstructionCard {
        +collapsible?: boolean
        +headerButtons?: ReactNode
        -showRaw: boolean
    }
    class InspectorInstructionCard {
        +defaultRaw?: boolean
        -showRaw: boolean
    }
    class CUProfilingCard {
        +instructions: InstructionCUData[]
        +unitsConsumed?: number
    }
    class AccountsCard_Transaction {
        -showRaw: boolean
    }
    class TokenBalancesCardInner {
        -tokenSymbols: Map
    }
    class AccountsCard_Inspector
    class AddressTableLookupsCard
    class UnknownDetailsCard {
        +defaultExpanded: false
    }
    CollapsibleCard <|-- BaseInstructionCard : uses
    CollapsibleCard <|-- InspectorInstructionCard : uses (collapsible=true by default)
    CollapsibleCard <|-- CUProfilingCard : uses (new feature)
    CollapsibleCard <|-- AccountsCard_Transaction : uses
    CollapsibleCard <|-- TokenBalancesCardInner : uses
    CollapsibleCard <|-- AccountsCard_Inspector : uses
    CollapsibleCard <|-- AddressTableLookupsCard : uses
    CollapsibleCard <|-- UnknownDetailsCard : uses

Loading

_{Reviews (2): Last reviewed commit: "resolve comments" | Re-trigger Greptile}

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
explorer	Ready	Preview, Comment	Apr 23, 2026 9:30pm

[Woody4618]

Could we check maybe if a little animation would be possible.
And if we can replace the Expand and Collapse Button with an arrow icon button.

[rogaldh]

Please do not use centred. Padded is the right one. Let's use centred only if we really need this.
The idea is that the component could accidentally introduce extra margin or padding, and centered layout will make it invisible.
Padded makes that visible (pagging is gt that expected)

[rogaldh]

Why do we need width: 600 here? I'd prefer not having this. It is better to reuse Storybook's viewports rather than having a hardcoded wrapper. We do even have a decorator for this if I am not mistaken

[rogaldh]

Let's not use useState via namespace. Let's import it directly. I understand namespace for tests or the server code, but for the client, it is better not to use a namespace

[rogaldh]

LGTM