improvement(special-tags): improved billing ui

[emir-karabeg]

Summary

Brief description of what this PR does and why.

Fixes #(issue)

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: ___________

Testing

How has this been tested? What should reviewers focus on?

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 23, 2026 11:48pm

[cursor]

PR Summary

Low Risk
Low risk UI-only changes to the usage_upgrade special tag rendering plus a new icon export; no business logic or data handling behavior changes.

Overview
Updates the usage_upgrade special-tag UI in special-tags.tsx from an amber warning banner to a more neutral inline message plus a bordered CTA button, and adds a leading warning icon.

Introduces a new AlertTriangle SVG icon component and exports it via the shared emcn icons index for reuse.

^{Written by Cursor Bugbot for commit 098f1f5. Configure here.}

[greptile-apps]

Greptile Summary

This PR redesigns the billing-limit UI component (UsageUpgradeDisplay) and introduces a reusable AlertTriangle icon into the EMCN icon library.\n\nKey changes:\n- Replaces the amber/warning-themed card (hardcoded amber colors) with a minimalist card-style anchor using shared CSS variable tokens (--text-secondary, --text-body, --text-icon, --divider, --surface-5), improving theme consistency across light and dark modes.\n- Removes the inline ad-hoc SVG and replaces it with the new AlertTriangle EMCN icon, following the same SVGProps passthrough and currentColor stroke patterns used by all other icons in the library.\n- The new AlertTriangle export is correctly inserted in alphabetical order in the barrel index.ts.\n- All import paths use the @/components/emcn alias, consistent with EMCN import conventions.\n- No logic changes — settingsPath construction and buttonLabel derivation are untouched.

Confidence Score: 5/5

Safe to merge — pure UI polish with no logic changes, correct import patterns, and a well-formed reusable icon component.

The diff is small and scoped to a single display component and a new icon. There are no functional changes, no new API calls, and no state mutations. CSS variable tokens are used consistently with the rest of the codebase, the new icon follows the exact same structure as every other EMCN icon, and the barrel export is alphabetically ordered. No issues found.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx	UsageUpgradeDisplay redesigned from amber-themed warning card to a neutral card-style CTA using CSS variable tokens and the new AlertTriangle icon — no logic changes.
apps/sim/components/emcn/icons/alert-triangle.tsx	New reusable AlertTriangle icon component following established EMCN icon patterns (SVGProps passthrough, 24×24 viewBox, currentColor stroke).
apps/sim/components/emcn/icons/index.ts	AlertTriangle export added at the top of the alphabetically-ordered barrel file — correctly placed.

Sequence Diagram

sequenceDiagram
    participant Stream as AI Stream
    participant SpTags as SpecialTags
    participant UpgradeUI as UsageUpgradeDisplay
    participant Router as Next.js Router

    Stream->>SpTags: emits usage_upgrade tag with action + message
    SpTags->>UpgradeUI: renders with UsageUpgradeTagData
    UpgradeUI->>UpgradeUI: derives settingsPath from workspaceId
    UpgradeUI->>UpgradeUI: derives buttonLabel from data.action
    Note over UpgradeUI: Renders message span + card-style anchor CTA
    UpgradeUI-->>User: shows italic message + AlertTriangle button
    User->>UpgradeUI: clicks anchor
    UpgradeUI->>Router: navigates to /workspace/{id}/settings/subscription

Loading

_{Reviews (1): Last reviewed commit: "improvement(special-tags): improved bill..." | Re-trigger Greptile}