Share tab badge rendering with vertical tabs

[Copilot]

Vertical tabs were still using the older single-badge path and did not honor the newer tab:flagcolor metadata. This updates vtab to use the same badge rendering model as tab, including validated flag-color badges.

• Shared badge renderer

  • Extract TabBadges from tab.tsx into a shared frontend/app/tab/tabbadges.tsx component.
  • Keep the existing horizontal tab behavior unchanged while making the badge stack reusable by vtab.

• Vertical tab badge parity

  • Replace the legacy badge icon rendering in vtab.tsx with TabBadges.
  • Support both existing badge callers and the newer badges array shape.
  • Add flagColor support in vtab using the same validateCssColor(...) guard as tab.tsx, so invalid colors are ignored rather than rendered.

• Preview / regression coverage

  • Update the vtabbar preview to show:
    • multiple badges
    • flag-only tabs
    • mixed badge + flag tabs
  • Add focused vtab coverage for valid and invalid flagColor handling.

• Example

  const rawFlagColor = tab.flagColor;
  let flagColor: string | null = null;
  if (rawFlagColor) {
      try {
          validateCssColor(rawFlagColor);
          flagColor = rawFlagColor;
      } catch {
          flagColor = null;
      }
  }
  
  <TabBadges badges={badges} flagColor={flagColor} />

• Screenshot

  • Updated vertical tab preview: https://github.com/user-attachments/assets/7d79930f-00cc-49a7-a0ec-d5554fb9e166

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[cloudflare-workers-and-pages]

Deploying waveterm with    Cloudflare Pages

Latest commit:	ae934b6
Status:	✅  Deploy successful!
Preview URL:	https://810ef855.waveterm.pages.dev
Branch Preview URL:	https://copilot-update-vtab-badge-di.waveterm.pages.dev

View logs

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (5 files)

• frontend/app/tab/tab.tsx - Removed inline TabBadges, imports from new file
• frontend/app/tab/tabbadges.tsx - New extracted component with className prop
• frontend/app/tab/vtab.test.tsx - New test file for badge rendering
• frontend/app/tab/vtab.tsx - Added badges array and flagColor support
• frontend/preview/previews/vtabbar.preview.tsx - Updated preview

The PR correctly:

• Extracts TabBadges to a reusable component
• Adds multiple badges support (badges[]) while maintaining backward compatibility with single badge
• Adds flagColor with CSS color validation
• Includes test coverage for new features