🚀 feat: launch v1.0 — next-generation frontend built from the ground up (#4265)

* feat: add parameter coverage for the operations: copy, trim_prefix, trim_suffix, ensure_prefix, ensure_suffix, trim_space, to_lower, to_upper, replace, and regex_replace

* fix: CrossGroupRetry default false

移除gorm:"default:false"，避免每次 AutoMigrate时都执行ALTER TABLE `tokens` MODIFY COLUMN `cross_group_retry` boolean DEFAULT false
且bool默认false不影响原有功能

* feat: check-in feature integrates Turnstile security check

* feat: add support for Doubao /v1/responses (#2567)

* feat: add support for Doubao /v1/responses

* fix: fix model deployment style issues, lint problems, and i18n gaps. (#2556)

* fix: fix model deployment style issues, lint problems, and i18n gaps.

* fix: adjust the key not to be displayed on the frontend, tested via the backend.

* fix: adjust the sidebar configuration logic to use the default configuration items if they are not defined.

* feat: add plans directory to .gitignore

* fix: 修复 gemini 文件类型不支持 image/jpg

* fix: fix the proxyURL is empty, not using the default HTTP client configuration && the AWS calling side did not apply the relay timeout.

* fix: batch add key backend deduplication

* Merge pull request #2582 from seefs001/fix/tips

fix: add tips for model management and channel testing

* fix(gin): update request body size check to allow zero limit

* feat: add regex pattern to mask API keys in sensitive information

* fix(task): 修复使用 auto 分组时 Task Relay 不记录日志和不扣费的问题

问题描述：
- 使用 auto 分组的令牌调用 /v1/videos 等 Task 接口时，虽然任务能成功创建，
  但使用日志不显示记录，且不会扣费

根本原因：
- Distribute 中间件在选择渠道后，会将实际选中的分组存储在 ContextKeyAutoGroup 中
- 但 RelayTaskSubmit 函数没有从 context 中读取这个值来更新 info.UsingGroup
- 导致 info.UsingGroup 始终是 "auto" 而不是实际选中的分组（如 "sora2逆"）
- 当 auto 分组的倍率配置为 0 时，quota 计算结果为 0
- 日志记录条件 "if quota != 0" 不满足，导致日志不记录、不扣费

修复方案：
- 在 RelayTaskSubmit 函数中计算分组倍率之前，添加从 ContextKeyAutoGroup
  获取实际分组的逻辑
- 使用安全的类型断言，避免潜在的 panic 风险

影响范围：
- 仅影响 Task Relay 流程（/v1/videos, /suno, /kling 等接口）
- 不影响使用具体分组令牌的调用
- 不影响其他 Relay 类型（chat/completions 等已有类似处理逻辑）

* 🚀 feat(web): port legacy v2 frontend changes into new UI (deployments, check-in, ollama) + align APIs

Bring over the key frontend functionality introduced in merge `efa3301` and integrate it cleanly into the new `web/src` architecture and design system.

- **Model deployments (io.net)**
  - Align frontend endpoints and payloads with backend deployment routes (`/api/deployments/*`)
  - Add missing deployment operations: details, logs (container-aware), update config, rename, extend duration
  - Improve create-deployment flow (proper request shape, name availability check, price estimation parity)

- **System settings**
  - Enhance io.net deployment settings: allow testing connection with an unsaved API key and add “how to get API key” guidance

- **Channels / Ollama**
  - Improve Ollama model management: live fetch via base_url with fallback to channel fetch, selection + apply flows, delete confirmation
  - Refactor for feature-layer consistency: extract Ollama parsing/normalization utilities into `features/channels/lib`

- **Quality**
  - Ensure TypeScript typecheck passes after refactor and new dialogs/components integration

* Merge pull request #2590 from xyfacai/fix/max-body-limit

fix: 设置默认max req body 为128MB

* docs: update readme

* i18n: add missing translations

* fix(gemini): fetch model list via native v1beta/models endpoint

Use the native Gemini Models API (/v1beta/models) instead of the OpenAI-compatible
path when listing models for Gemini channels, improving compatibility with
third-party Gemini-format providers that don't implement OpenAI routes.

- Add paginated model listing with timeout and optional proxy support
- Select an enabled key for multi-key Gemini channels

* refactor(gemini): 更新 GeminiModelsResponse 以使用 dto.GeminiModel 类型

* fix: remove Minimax from FETCHABLE channels

* fix(minimax): 添加 MiniMax-M2 系列模型到 ModelList

* feat: add doubao video 1.5

* 🤢 chore: remove useless file

* feat: /v1/chat/completion -> /v1/response (#2629)

* feat: /v1/chat/completion -> /v1/response

* fix: clean propertyNames for gemini function

* fix: support snake_case fields in GeminiChatGenerationConfig

* chore: update dependencies and lockfile for improved compatibility

- Updated @clerk/clerk-react to version 5.59.3
- Updated @hookform/resolvers to version 5.2.2
- Updated @lobehub/icons to version 2.48.0
- Updated various Radix UI components to their latest versions
- Updated @tanstack/react-query and related packages for better performance
- Updated axios, i18next, and other libraries for security and feature enhancements
- Updated lockfile to include configVersion and ensure consistency across environments

* Merge pull request #2647 from seefs001/feature/status-code-auto-disable

feat: status code auto-disable configuration

* fix: chat2response setting ui (#2643)

* fix: setting ui

* fix: rm global.chat_completions_to_responses_policy

* fix: rm global.chat_completions_to_responses_policy

* Merge pull request #2627 from seefs001/feature/channel-test-param-override

feat: channel testing supports parameter overriding

* chore: update dependencies and lockfile for improved compatibility

- Updated @lobehub/icons to version 4.0.3
- Updated ai to version 6.0.27
- Updated various libraries including axios, react-day-picker, and streamdown for security and feature enhancements
- Updated devDependencies for eslint, prettier, and typescript for better performance and compatibility
- Updated lockfile to ensure consistency across environments

* chore: update lockfile and Vite configuration for improved build process

- Updated lockfile to version 1 for better compatibility and consistency
- Enhanced Vite configuration to support production optimizations, including code minification and chunking for dependencies
- Added environment-specific console and debugger removal for production builds

* chore: migrate from Vite to Rsbuild for build process

- Added Rsbuild configuration for development and production builds
- Updated package.json scripts to use Rsbuild instead of Vite
- Replaced @tailwindcss/vite with @tailwindcss/postcss in dependencies
- Introduced postcss.config.mjs for Tailwind CSS integration
- Updated TypeScript configuration to include Rsbuild config
- Removed Vite configuration file to streamline the build process

* refactor: optimize user data handling and API calls

- Replaced direct API calls to get user data with cached user information from auth-store in ModelsFilter and SummaryCards components.
- Improved session management in RootComponent and Authenticated route to utilize localStorage for user authentication status, reducing unnecessary API requests.
- Added caching for setup status checks to enhance performance during navigation.

* feat: enhance session validation in authenticated route

- Implemented session verification to check user authentication status via API call only once per session.
- Updated beforeLoad logic to redirect users to the login page if session validation fails or if no user information is available in localStorage.
- Improved user data handling by updating the auth store with fresh user information upon successful session verification.

* refactor: improve useMediaQuery hook for better SSR handling

- Enhanced the useMediaQuery hook to check for window availability before accessing matchMedia, preventing errors during server-side rendering.
- Simplified state initialization and change handling by using a dedicated function to determine initial matches.
- Updated event listener management for improved performance and clarity.

* feat(hooks): export useMediaQuery from hooks index

* refactor: update useMediaQuery imports to use unified hooks index

* fix(rsbuild): fix loadEnv API usage and removeConsole type

* feat: customizable automatic retry status codes

* refactor(hooks): use useSyncExternalStore for better SSR handling in useMediaQuery

* refactor: simplify embedded file structure in main.go

- Updated the embedded file directive to include the entire web/dist directory instead of individual assets, streamlining the build process.

* refactor: replace DropdownMenu with Sheet component in ProfileDropdown

- Updated the ProfileDropdown component to use a Sheet for user interactions instead of a DropdownMenu.
- Enhanced user info display with improved layout and styling.
- Added navigation links and sign-out functionality within the Sheet.

* refactor: streamline ProfileDropdown layout and improve user info display

- Removed unused Badge component and secondary text from user display.
- Enhanced styling for user info section and navigation links.
- Updated sign-out functionality to use a button for better accessibility.

* feat: add System Settings link for super admin in ProfileDropdown

- Introduced a new link to System Settings in the ProfileDropdown, visible only to users with the SUPER_ADMIN role.
- Updated imports to include the Settings icon and adjusted the component logic accordingly.
- Removed the Settings entry from the sidebar data to streamline navigation.

* feat: codex channel (#2652)

* feat: codex channel

* feat: codex channel

* feat: codex oauth flow

* feat: codex refresh cred

* feat: codex usage

* fix: codex err message detail

* fix: codex setting ui

* feat: codex refresh cred task

* fix: import err

* fix: codex store must be false

* fix: chat -> responses tool call

* fix: chat -> responses tool call

* feat(i18n): add missing translations

* fix(i18n): restore missing translations for "360" and add "User Menu" in multiple locales

- Reintroduced the translation for "360" in English, French, Japanese, Russian, Vietnamese, and Chinese locales.
- Added the "User Menu" translation in the same languages to enhance user interface consistency.

* fix: openAI function to gemini function field adjusted to whitelist mode

* feat: TLS_INSECURE_SKIP_VERIFY env

* fix: for chat-based calls to the Claude model, tagging is required. Using Claude's rendering logs, the two approaches handle input rendering differently.

* refactor(system-settings): restructure settings sections and navigation

- Replaced SettingsAccordion with a unified SettingsSection component across various settings sections for consistency.
- Introduced a section registry to manage general settings sections dynamically.
- Updated navigation items in the system settings sidebar to utilize the new section registry.
- Enhanced the GeneralSettings component to support section-based content rendering based on user selection.

* fix(system-settings): remove type assertion for quotaDisplayType in GeneralSettings

- Eliminated the type assertion for quotaDisplayType in the GeneralSettings component to improve type inference and maintain cleaner code.

* refactor(system-settings): update zod import syntax in general settings

- Changed the import statement for zod from a default import to a namespace import for better clarity and consistency in the codebase.

* fix: the login method cannot be displayed under the aff link.

* feat(system-settings): implement generic settings page and enhance navigation

- Added a new generic SettingsPage component to handle loading states, data fetching, and section rendering.
- Integrated section registry for general and authentication settings to streamline navigation and content management.
- Updated URL utility functions to improve query parameter handling for active navigation states.
- Enhanced the system settings sidebar to include authentication section items dynamically.

* refactor(system-settings): replace SettingsAccordion with SettingsSection across authentication settings

- Updated BasicAuthSection, BotProtectionSection, OAuthSection, and PasskeySection to use the new SettingsSection component for consistency.
- Introduced a section registry to manage authentication settings dynamically, enhancing navigation and content rendering.

* feat(system-settings): enhance request limits settings with new section and unified component

- Added a new Request Limits section to the system settings sidebar, integrating it with the section registry for improved navigation.
- Replaced SettingsAccordion with SettingsSection in RateLimitSection, SensitiveWordsSection, and SSRFSection for consistency.
- Updated RequestLimitsSettings to utilize the new SettingsPage component for better data handling and rendering.
- Implemented a search schema for request limits to streamline navigation and section management.

* feat(system-settings): integrate content settings sections with unified component and registry

- Added a new Content section to the system settings sidebar, incorporating it into the section registry for improved navigation.
- Replaced SettingsAccordion with SettingsSection in multiple content-related components for consistency.
- Created a section registry to manage content settings dynamically, enhancing the rendering and navigation experience.
- Updated the ContentSettings component to utilize the new section registry and streamline content display.

* feat(system-settings): enhance integrations settings with unified section registry and components

- Introduced a new section registry for integrations settings, consolidating various settings components for better organization and navigation.
- Replaced SettingsAccordion with SettingsSection in multiple integration-related components for consistency.
- Updated IntegrationSettings to utilize the new SettingsPage component, improving data handling and rendering.
- Added a new integrations section to the system settings sidebar, enhancing user experience and accessibility.

* feat(system-settings): unify model settings with new section registry and components

- Introduced a section registry for model settings, consolidating various model-related components for improved organization and navigation.
- Replaced SettingsAccordion with SettingsSection in multiple model settings components for consistency.
- Updated ModelSettings to utilize the new SettingsPage component, enhancing data handling and rendering.
- Added a new Models section to the system settings sidebar, improving user experience and accessibility.

* feat(system-settings): enhance maintenance settings with unified section registry and components

- Introduced a new section registry for maintenance settings, consolidating various maintenance-related components for improved organization and navigation.
- Replaced SettingsAccordion with SettingsSection in multiple maintenance components for consistency.
- Updated MaintenanceSettings to utilize the new section registry, enhancing data handling and rendering.
- Added a new Maintenance section to the system settings sidebar, improving user experience and accessibility.

* feat(system-settings): update section titles for improved clarity and consistency

- Renamed various section titles across content, integrations, maintenance, models, and request limits to enhance clarity and better reflect their functionalities.
- Adjusted titles such as 'Dashboard' to 'Data Dashboard', 'API Info' to 'API Addresses', and 'Update Checker' to 'System maintenance' for improved user understanding.
- Ensured consistency in naming conventions across all settings sections to streamline user experience and navigation.

* feat(nav-group): enhance collapsible menu behavior and URL matching logic

- Added controlled state management for collapsible menu items to automatically expand based on active sub-item paths.
- Updated the URL matching logic in checkIsActive to improve handling of query parameters and ensure accurate navigation state detection.
- Refactored the collapsible component to utilize the new state management, enhancing user experience in the sidebar navigation.

* feat(system-settings): update system settings navigation and redirect logic

- Changed the link in the profile dropdown to point directly to the general section of system settings with a search parameter for section identification.
- Implemented a redirect in the general settings route to ensure users are directed to the default section if no section parameter is provided, enhancing navigation consistency.

* feat(system-settings): unify route configuration for settings sections

- Refactored route configuration for various system settings sections (auth, content, general, integrations, maintenance, models, request limits) to utilize a new `createSettingsRouteConfig` function.
- This change consolidates the repetitive logic of creating search schemas and handling redirects, improving code maintainability and readability.
- Enhanced navigation by ensuring default sections are loaded when no section parameter is provided.

* feat(url-utils): enhance URL handling and matching logic

- Introduced a new utility function `urlToString` to convert various URL formats (string and object) into a standardized string format.
- Updated the `checkIsActive` function to utilize `urlToString`, improving the accuracy of URL matching and handling of query parameters.
- Refactored URL comparison logic to ensure consistent behavior across different URL types, enhancing navigation state detection.

* feat(system-settings): validate DataExportDefaultTime for improved data handling

- Introduced a new function `validateDataExportDefaultTime` to ensure the `DataExportDefaultTime` value is either 'week', 'hour', or 'day', defaulting to 'hour' for unexpected values.
- Updated the `DataExportDefaultTime` assignment in the settings section to utilize this validation function, enhancing data integrity and user experience.

* perf(system-settings): Improve the i18n of system settings content

- Changed button labels in various sections to use consistent capitalization and translation functions, enhancing user experience.
- Updated validation messages in schemas to utilize translation functions for improved internationalization support.
- Ensured all user-facing strings are properly translated, improving accessibility for non-English users.

* fix(system-settings): update ApiInfoFormValues type inference for improved schema validation

- Changed the type inference for ApiInfoFormValues to utilize ReturnType of createApiInfoSchema, ensuring accurate type representation and enhancing type safety in the API info section.

* fix(chat-settings): improve validation logic for chat settings schema

- Updated the validation logic to ensure that null values are correctly handled and that only objects are accepted as valid items in the chat settings schema.
- Simplified error handling by removing the error message from the catch block, providing a consistent user-facing message for invalid JSON strings.

* fix(system-settings): enhance validation error handling in uptime-kuma schema

- Updated the validation logic for category name, URL, and slug fields to use an object format for error messages, improving clarity and consistency in user feedback.
- Ensured that all validation messages are properly structured to enhance internationalization support.

* fix(i18n): add translations for Uptime Kuma group management

- Added English, French, Japanese, Russian, Vietnamese, and Chinese translations for "Add Uptime Kuma Group" and "Edit Uptime Kuma Group" to enhance internationalization support.
- Included validation messages for category name and slug fields across multiple languages to improve user feedback and accessibility.

* fix(system-settings): improve validation error message structure for SystemName

- Updated the validation logic for the SystemName field to use an object format for error messages, enhancing clarity and consistency in user feedback.
- This change aligns with recent improvements in internationalization support across the system settings schemas.

* perf(i18n): add new validation error message translations

- Added translations for the new validation error message "Invalid JSON format or values out of allowed range" in English, French, Japanese, Russian, Vietnamese, and Chinese.
- This update enhances internationalization support by ensuring users receive clear feedback across multiple languages.

* fix(i18n): update Japanese translation for payment method configuration message

- Corrected the Japanese translation for the message regarding payment methods configuration to use the term "メソッド" instead of "方法" for improved accuracy and consistency in user feedback.
- This change enhances the clarity of the message for Japanese-speaking users.

* fix(i18n): remove unnecessary loading messages from French translations

- Removed the French translations for "Loading settings...", "Loading maintenance settings...", and "Loading content settings..." to streamline the localization file.
- This change improves the clarity and relevance of the translations provided to users.

* fix(i18n): add translations for Uptime Kuma group management in multiple languages

- Added French, Japanese, Russian, Vietnamese, and Chinese translations for "Add Uptime Kuma Group" and "Edit Uptime Kuma Group" to enhance internationalization support.
- This update improves user experience by providing clear and consistent messaging across different languages.

* fix(validation): enhance pricing schema error messages and add translations

- Updated the pricing schema to include localized error messages for validation, ensuring users receive clear feedback when input values are invalid.
- Added new translations for "Exchange rate is required" and "Exchange rate must be greater than 0" in English, French, Japanese, and Chinese to improve internationalization support.
- This change enhances user experience by providing accurate and contextually relevant messages across multiple languages.

* fix: codex Unsupported parameter: max_output_tokens

* fix(model-mapping-editor): simplify JSON parsing logic in useEffect

* fix: jimeng i2v support multi image by metadata

* refactor(models): restructure models section handling and improve UI components

- Replaced tab-based navigation with section-based navigation for better clarity and organization.
- Introduced a new section registry to manage model sections, including 'metadata' and 'deployments'.
- Updated the ModelsContent component to reflect the new section structure and added a Create Deployment button.
- Removed the ModelsTabs component as it was no longer needed.
- Enhanced internationalization support by adding new translations for section descriptions and management tasks.
- Adjusted sidebar configuration to accommodate the new section structure.

* fix: update warning threshold label from '5$' to '2$'

* fix: video content api Priority use url field

* fix: update abortWithOpenAiMessage function to use types.ErrorCode

* feat(deployment): introduce CreateDeploymentDrawer component and update dialog references

- Replaced the CreateDeploymentDialog with a new CreateDeploymentDrawer component for improved user experience.
- Added comprehensive form handling for deployment creation, including validation and price estimation features.
- Updated internationalization files to include new translations for UI elements and descriptions related to deployment configuration.
- Enhanced the ModelsContent component to integrate the new drawer for creating deployments.

* perf(i18n): enhance internationalization for models table and columns

- Updated labels and titles in the ModelsTable and useModelsColumns components to utilize translation functions for improved localization.
- Changed static text for vendor and sync status to dynamic translations, enhancing user experience for non-English speakers.
- Updated empty state messages in the ModelsTable to support internationalization, ensuring clarity for all users.

* fix: fix email send

* fix: issue where consecutive calls to multiple tools in gemini all returned an index of 0

* fix: replace Alibaba's Claude-compatible interface with the new interface

* fix: Only models with the "qwen" designation can use the Claude-compatible interface; others require conversion.

* feat: log shows request conversion

* feat: optimized display

* feat: optimized display

* feat: optimized display

* fix: codex rm Temperature

* Revert "fix: video content api Priority use url field"

* feat: requestId time string use UTC

* feat(qwen): support qwen image sync image model config

* feat: sync old ui

* feat: more ui sync

* feat: replace theme

* fix build

* refactor(web): revert theme colors and variables in CSS

Updated color variables for light and dark themes to improve consistency and visual appeal.

* feat(deployment): enhance deployment access guard and model deployment settings

- Introduced loading phase management in the DeploymentAccessGuard component to provide better user feedback during connection checks.
- Updated the ModelsContent component to prefetch the deployments list while checking connection status, improving data readiness.
- Implemented a caching mechanism for connection status in useModelDeploymentSettings to optimize performance and reduce unnecessary API calls.
- Enhanced loading states and error handling for improved user experience during deployment settings retrieval and connection testing.

* feat(i18n): add new translations for connection and loading states across multiple languages

- Introduced translations for "Checking connection" and "Loading configuration" in English, French, Japanese, Russian, Vietnamese, and Chinese.
- This update enhances the internationalization support, providing clearer user feedback during connection checks and loading phases.

* refactor(pagination): adjust layout and styling for pagination component

- Updated the pagination component to improve layout by removing unnecessary width constraints and enhancing responsiveness.
- Increased minimum width for pagination text to ensure better visibility and alignment across different screen sizes.

* feat(i18n): implement translations for various UI elements across multiple components

- Updated several components to utilize the translation function for titles and placeholders, enhancing internationalization support.
- Added new translation entries for "Filter by name or key..." and "Log Type" in English, French, Japanese, Russian, Vietnamese, and Chinese.
- This update improves user experience by providing localized text in the ChannelsTable, SummaryCards, ApiKeysTable, RedemptionsTable, UsageLogsTable, and UsersTable components.

* feat(i18n): integrate translation support in SummaryCards component

- Added the useTranslation hook to the SummaryCards component to enhance internationalization.
- This update allows for localized text rendering, improving user experience for diverse language speakers.

* feat(dashboard): refactor dashboard structure and introduce section-based navigation

- Removed the tab navigation in favor of a section-based approach, enhancing user experience by providing clearer context for the dashboard content.
- Introduced a new section registry to manage dashboard sections, allowing for easier expansion and maintenance.
- Updated sidebar configuration to reflect the new section structure, ensuring proper navigation links are displayed.
- Added translations for new section titles and descriptions to support internationalization.

* feat(i18n): update time range labels and enhance translation support

- Changed time range labels from shorthand (e.g., '1D') to full text (e.g., '1 Day') for better clarity.
- Updated various components to utilize the translation function for time range labels, improving internationalization.
- Added new translation entries for time ranges in English, French, Japanese, Russian, Vietnamese, and Chinese, enhancing user experience across languages.

* feat(dashboard): enhance type safety and improve component structure

- Updated the Dashboard component to use specific types for model data and filters, enhancing type safety.
- Introduced new types for announcements and FAQs, improving clarity and maintainability.
- Refactored LogStatCards and UptimePanel components to utilize AbortController for better data fetching management.
- Optimized the rendering of announcements and FAQs by using unique keys based on item IDs.
- Improved theme management in ModelCharts by caching the ThemeManager import to reduce dynamic imports.

* feat(agents): add comprehensive guidelines for React and Next.js development

- Introduced a new set of best practices and optimization techniques for React and Next.js applications, aimed at enhancing performance and maintainability.
- Included detailed rules covering various aspects such as event handling, API routes, rendering strategies, and state management.
- Added extensive documentation in AGENTS.md and SKILL.md to support developers in adhering to these practices.
- This update serves as a foundational resource for improving code quality and efficiency in React-based projects.

* chore(web): update package.json dependencies

- Removed outdated dependencies including @base-ui/react, @clerk/clerk-react, and others to streamline the project.
- Updated remaining dependencies to their latest versions for improved performance and security.
- This cleanup enhances the overall maintainability of the project.

* feat(usage-logs): implement section-based navigation and enhance log management

- Introduced a section registry for usage logs, allowing for better organization and navigation between different log categories (common, drawing, task).
- Updated the UsageLogsContent component to dynamically render titles and descriptions based on the selected section.
- Refactored UsageLogsTable and UsageLogsPrimaryButtons components to accept the active log category as a prop, improving modularity.
- Enhanced sidebar configuration to support new section navigation, ensuring users can easily access different log types.
- Updated routing to redirect to the default section if none is specified, improving user experience.

* feat(i18n): enhance internationalization across usage logs components

- Integrated the useTranslation hook in various components related to usage logs, including CommonLogsStats, UsageLogsTable, and column helpers.
- Updated labels, titles, and messages to utilize translation functions, improving localization support.
- Added new translation entries for log-related terms in English, French, Japanese, Russian, Vietnamese, and Chinese, enhancing user experience for diverse language speakers.

* feat(datetime-picker): integrate dayjs for date formatting

- Added dayjs as a dependency to the project for improved date handling.
- Updated the DateTimePicker component to use dayjs for formatting dates, enhancing consistency and readability of date displays.

* feat(date-handling): replace date-fns with dayjs for improved date management

- Updated the project to use dayjs instead of date-fns for date formatting and manipulation, enhancing consistency across components.
- Refactored DatePicker, DateTimePicker, and other components to utilize dayjs for date-related functionalities.
- Added a new dayjs configuration file to extend its capabilities with relative time support.
- Updated AGENTS.md to reflect the new technology stack, emphasizing the use of dayjs for date handling.

* refactor(agents): streamline front-end development guidelines and update technology stack

- Revised AGENTS.md to condense front-end development standards and best practices, making it more accessible for developers and AI assistants.
- Updated the technology stack section to reflect current dependencies, emphasizing the use of Bun, React 19, TypeScript, and other key libraries.
- Enhanced the document structure with a new table format for better readability and navigation, including a comprehensive table of contents for quick access to sections.

* feat(i18n): enhance date picker and datetime picker localization support

- Integrated internationalization support in DatePicker and DateTimePicker components by adding locale handling for multiple languages (English, French, Japanese, Russian, Vietnamese, Chinese).
- Updated the calendar component to accept a locale prop, ensuring proper localization of month and weekday labels.
- Improved user experience by allowing date selection to adapt based on the user's language preference.

* feat(layout): add SectionPageLayout component for structured page layouts

- Introduced a new SectionPageLayout component to facilitate structured layouts for pages with sections, enhancing the organization of content.
- Added subcomponents for Title, Description, Actions, and Content to improve clarity and maintainability of page structures.
- Updated AGENTS.md to include guidelines on avoiding unnecessary destructuring of props for better code readability.

* feat(layout): refactor components to use SectionPageLayout for improved structure

- Replaced AppHeader and Main components with SectionPageLayout across multiple features including Channels, Dashboard, ApiKeys, Models, Redemption Codes, Usage Logs, Users, and Wallet.
- Enhanced page organization by utilizing SectionPageLayout's Title, Description, Actions, and Content subcomponents, improving clarity and maintainability.
- This update standardizes the layout structure across the application, facilitating a more cohesive user experience.

* feat(usage-logs): enhance URL state management and redirection logic

- Added useEffect to synchronize column filters with URL search changes, preventing infinite loops caused by inline references.
- Improved redirection logic in usage logs to clear 'type' from the URL when the section is not 'common', enhancing user experience and URL cleanliness.

* fix(usage-logs): disable global filter and update DataTableToolbar props

- Disabled the global filter in the UsageLogsTable component to streamline the user interface.
- Updated the DataTableToolbar component to accept a null customSearch prop, enhancing flexibility in toolbar configuration.

* feat(routes): implement section-based routing for system settings and dashboard

- Introduced section-based routing for system settings and dashboard features, enhancing navigation and organization.
- Updated route definitions to include dynamic sections, allowing for more granular access to settings and dashboard components.
- Refactored existing routes to redirect to default sections when no specific section is provided, improving user experience.
- Added new section routes for models, usage logs, and system settings, ensuring consistency across the application.
- Removed deprecated routes to streamline the routing structure and improve maintainability.

* refactor(usage-logs): update column helper functions to require config parameter

- Modified createFailReasonColumn and createProgressColumn functions to require a config parameter instead of allowing it to be optional.
- Simplified destructuring of config to enhance clarity and ensure necessary properties are always provided, improving code reliability.

* refactor(usage-logs): improve section ID validation and routing logic

- Introduced a type guard function, isUsageLogsSectionId, to validate section IDs, enhancing type safety and reducing the need for casting.
- Updated UsageLogsContent to utilize the new validation function for determining the active category, improving clarity and reliability.
- Refactored routing logic to use isUsageLogsSectionId for section validation, ensuring proper redirection to the default section when necessary.

* refactor(calendar): update locale documentation for i18n support

- Revised the locale prop documentation in the Calendar component to specify the use of react-day-picker for internationalization, clarifying the expected locale setup for users.

* chore(i18n): remove redundant user information description from locale files

- Removed the user information description from English, French, Japanese, Russian, Vietnamese, and Chinese locale files to streamline translations and improve clarity.

* chore(i18n): streamline locale files by removing redundant entries

- Removed unnecessary entries from English, French, Japanese, Russian, Vietnamese, and Chinese locale files to enhance clarity and reduce clutter.
- Adjusted translations for consistency and improved user experience across multiple languages.

* chore(sidebar): remove deprecated usage logs route from sidebar config

- Eliminated the '/usage-logs' entry from the sidebar configuration to streamline navigation and improve clarity in the sidebar structure.

* refactor(redemption-codes): enhance internationalization support and improve UI consistency

- Updated various components to utilize translation functions for user-facing strings, ensuring a consistent experience across different languages.
- Added meta labels for table columns to improve accessibility and clarity.
- Revised confirmation and action texts in dialogs and tooltips to leverage translation, enhancing user experience.
- Updated locale files to include new translations for improved clarity and consistency.

* feat(masked-value-display): add MaskedValueDisplay component for sensitive data handling

- Introduced a new MaskedValueDisplay component to display masked values with a popover for full value visibility and a copy button for easy access.
- Updated api-keys-columns and redemptions-columns to utilize the new component, enhancing code reusability and UI consistency.
- Revised translation keys in locale files to remove colons for improved clarity.

* refactor(url-utils): simplify query parameter matching logic in checkIsActive function

- Updated the checkIsActive function to streamline the logic for matching URLs with and without query parameters.
- Removed unnecessary checks for query parameters when matching base paths, improving clarity and maintainability of the code.

* fix(channels-table): update group filter label to use translation function

- Replaced hardcoded 'All Groups' label with a translation function call to enhance internationalization support in the ChannelsTable component.

* chore(api-keys): remove deprecated API key action messages and related exports

- Deleted the api-key-actions.ts file, which contained action messages for enabling, disabling, and deleting API keys.
- Updated index.ts to remove the export of getApiKeyActionMessage, streamlining the codebase by eliminating unused functionality.

* refactor(i18n): enhance internationalization support across various components

- Updated multiple components to utilize translation functions for user-facing strings, ensuring a consistent experience across different languages.
- Revised constants and labels in the channels and redemption codes features to use i18n keys, improving maintainability and clarity.
- Ensured that success and error messages leverage translation functions, enhancing user experience and accessibility.
- Streamlined the handling of i18n keys in the constants files for better organization and clarity.

* refactor(i18n): enhance translation support across various components

- Updated multiple components to utilize translation functions for user-facing strings, ensuring a consistent experience across different languages.
- Revised pagination and status labels to use i18n keys, improving maintainability and clarity.
- Enhanced response time formatting to support internationalization, allowing for localized display of time values.
- Updated locale files to include new translations for improved clarity and consistency.

* docs(AGENTS): add type checking requirement for TypeScript changes

- Included a new guideline stating that type checks must be executed after modifying TypeScript or TSX code, ensuring no type errors are left unresolved.
- Updated the document to reflect this addition in the relevant section for better clarity on coding standards.

* feat(combobox-input): add ComboboxInput component for enhanced token selection

- Introduced a new ComboboxInput component to facilitate token name selection with search and filtering capabilities.
- Integrated the ComboboxInput into the UsageLogsFilterDialog for improved user experience when filtering by token name.
- Updated locale files to include new translations for user-facing strings related to token filtering.

* feat(combobox): integrate translation support for custom value prompt

- Added translation functionality to the Combobox component, replacing hardcoded text with a translatable string for the custom value prompt.
- Utilized the useTranslation hook from react-i18next to enhance internationalization support, ensuring a consistent user experience across different languages.

* refactor(i18n): improve Chinese translations for consistency and clarity

- Adjusted spacing in various Chinese translations to enhance readability and maintain consistency across the locale file.
- Updated multiple user-facing strings to ensure proper formatting and alignment with localization standards.

* feat(calendar): add CalendarDropdown component for enhanced dropdown functionality

- Introduced a new CalendarDropdown component to improve user interaction with dropdown selections in the calendar.
- Implemented state management for dropdown visibility and selection handling, enhancing the overall user experience.
- Updated styling for dropdown elements to ensure consistency and better alignment with the UI design.

* fix(balance-query-dialog): handle null currentRow and improve usage query logic

- Updated the BalanceQueryDialog component to safely access currentRow properties using optional chaining.
- Added a check to ensure currentRow is not null before proceeding with usage queries, preventing potential runtime errors.
- Refactored the handleQueryCodexUsage function to use a local variable for currentRow, enhancing code clarity.

* feat(i18n): add new translations for batch creation and channel updates

- Added new translation strings for batch creation instructions across multiple languages, enhancing user guidance.
- Included translations for the "Update Channel" prompt to improve clarity in channel configuration settings.
- Ensured consistency in terminology across locale files for better user experience.

* feat(channel-mutate-drawer): improve API key input handling and update translations

- Refactored the API key input logic in the ChannelMutateDrawer component to enhance readability and maintainability.
- Added new placeholder translations for batch creation and existing key prompts in multiple languages, improving user guidance.
- Ensured consistency in translation strings across locale files for better user experience.

* feat(fetch-models-dialog): implement sorting for model categories

- Added a new function to sort model categories alphabetically, placing 'Other' at the end for easier navigation.
- Updated the rendering logic in the FetchModelsDialog component to utilize the new sorting function for both new and existing models, enhancing user experience.

* refactor(wallet-stats-card): standardize props usage and improve layout consistency

Standardizes props usage and improves layout consistency in wallet stats card

Refactors the wallet stats card component to:
- Use props directly instead of destructuring for consistency
- Add min-w-0 to prevent content overflow
- Adjust text sizing with break-all for proper wrapping
- Implement responsive font sizes (3xl on mobile, 4xl on larger screens)
- Improve leading and tracking for better readability

Refactor wallet stats card for consistency and layout

Standardizes props usage and improves layout consistency in wallet stats card

- Uses props directly instead of destructuring for consistency
- Adds min-w-0 to prevent content overflow
- Adjusts text sizing with break-all for proper wrapping
- Implements responsive font sizes (3xl on mobile, 4xl on larger screens)
- Improves leading and tracking for better readability

* feat(web): add subscription management and admin settings UI

* feat(web): add subscription management and admin settings UI

- Add subscription management module (plans, pricing, toggle status, and related dialogs/tables with Stripe/Creem integration notes)
- Add channel affinity (rules and cache stats), Waffo integration, performance, and Grok model sections to system settings, with extended types and section registry
- Add status code mapping validation/risk warnings, upstream update hooks, and utilities for channels; add available models and sidebar module cards to user profile
- Add chat2link route and useMinimumLoadingTime, useTableCompactMode shared hooks

Made-with: Cursor

* fix: remove duplicate GenerateOAuthCode and add missing TaskBulkUpdate

- remove duplicate GenerateOAuthCode from github.go since oauth.go already has the generic version.
- add model.TaskBulkUpdate for bulk update by upstream task_id strings, fixing task_video.go build failure.

* feat(router): add chat2link and subscriptions routes

- register /chat2link page route under authenticated layout.
- register /subscriptions/ page route under authenticated layout.
- update auto-generated routeTree type definitions and route mappings.

* feat(docker): add development environment setup with Docker Compose

- Introduced docker-compose.dev.yml for local development, including services for new-api, Redis, and PostgreSQL.
- Created Dockerfile.dev for backend-only builds, optimizing the development workflow.
- Updated makefile to include new commands for starting backend services and frontend development.

* feat(web): complete i18n coverage for setup wizard and add language switcher

- wrap all hardcoded English strings in setup-wizard, database-step, usage-mode-step, and complete-step with t() calls, covering step titles, descriptions, form validation messages, and fallback strings.
- add LanguageSwitcher component to the top-right corner of the setup page so users can switch language during initial setup.
- register 25 dynamic i18n keys in static-keys.ts and provide full translations for zh/en/ja/fr/ru/vi.

* feat(i18n): internationalize default version text in workspace-switcher

- remove hardcoded 'Unknown version' default, use t('Unknown version') for i18n fallback
- add "Unknown version" translation entries across all 6 locale files (zh/en/fr/ru/ja/vi)

* feat(i18n): add full i18n coverage for channel-affinity settings page

- replace Chinese t() keys with English keys across three channel-affinity components to align with new frontend i18n conventions.
- add 51 translation entries to all 6 locale files (en/zh/ja/fr/ru/vi) covering main page, rule editor, and cache stats dialog.
- register section-registry dynamic keys in static-keys.ts.

* feat(i18n): add full i18n coverage for Waffo payment settings page

- replace Chinese i18n keys with English keys in waffo-settings-section.tsx for consistency.
- wrap previously hardcoded labels (Pay Method Type / Pay Method Name) with t().
- add 26 Waffo-related translation entries across all 6 locale files (en/zh/fr/ru/ja/vi).

* feat(i18n): add missing translations for global model settings page

- add all 6 locale translations for 3 missing t() keys in global-settings-card.
- register dynamically used 'Grok' key in static-keys.ts for i18n scanner coverage.

* feat(i18n): add full i18n coverage for Grok model settings page

- add translations in all 6 locales (en/zh/fr/ja/ru/vi) for grok-settings-card t() calls.
- cover violation fee toggle, amount input, and official docs link labels.
- include section-registry descriptionKey translation entries.

* feat(i18n): add full i18n coverage for performance settings page

- migrate all t() keys from Chinese to English to align with project conventions.
- add translations for all 6 locales (en/zh/ja/fr/ru/vi) covering disk cache,
  system monitoring, log management, and stats dashboard sections.
- remove 71 obsolete Chinese-keyed entries from every locale file.

* fix(i18n): add 116 missing English translation keys across all locales

- scan all t() calls to identify English keys used in code but absent from locale files.
- add translations for zh/en/fr/ja/ru/vi, keeping key sets and sort order consistent.
- covers system-settings, channels, models, auth, wallet and other modules.

* fix(i18n): add missing translations for log cleanup quick-select and confirm dialog

- wrap quick-select button labels (24 hours ago / 7 days ago / 30 days ago) with t().
- replace hardcoded English strings in purge confirm dialog with t() calls and date interpolation.
- add 5 new translation keys across all 6 locale files (zh/en/fr/ja/ru/vi).

* refactor(web): unify all time display with dayjs formatting

- replace all toLocaleString/toLocaleDateString/toLocaleTimeString and manual padStart concatenation with dayjs.format().
- standardize output: datetime as YYYY-MM-DD HH:mm:ss, date as YYYY-MM-DD, time as HH:mm:ss.
- add formatDateTimeStr, formatDateStr, formatTimeStr dayjs-based helpers in lib/format.ts.
- update 12 files across core utils and feature components.

* refactor(web): replace native datetime-local input with DateTimePicker in announcements

- swap browser-native datetime-local for the project's DateTimePicker component to match the UI used in log cleanup and other pages.
- convert between Date objects and ISO strings to bridge the form's string-based schema.

* refactor(web): replace native HTML elements with design system components

- replace ~35 native <button> with <Button> across pricing, profile, channels modules
- replace native <input>/<textarea>/<label> with <Input>/<Textarea>/<Label> for consistent form styling
- replace native <table> with <Table> components, <details>/<summary> with <Collapsible>
- replace decorative <hr> with <Separator> to ensure global UI consistency

* refactor(web): enhance profile components with design system consistency

- update ProfileSecurityCard to use buttons for security actions, improving accessibility and styling.
- modify AccountBindingsTab layout to a grid for better responsiveness and visual alignment.
- refactor NotificationTab to utilize icons for notification methods, enhancing user experience and clarity.

* fix(i18n): complete i18n coverage for profile page components

- wrap passkey card status badges (enabled/disabled, backup state) and last-used text with t()
- fix hardcoded button labels in security dialogs (change password, access token, delete account)
- internationalize all 2FA dialog strings (setup, disable, backup codes)
- fix email bind dialog description and button state text missing i18n
- wrap remaining hardcoded strings in notification tab and checkin calendar
- add all missing translation entries to zh.json and en.json

* fix(i18n): enhance error messages with translations for deployment access and settings

- wrap connection error messages in DeploymentAccessGuard and IoNetDeploymentSettingsSection with t() for internationalization.
- add missing translation key for "io.net model deployment is not enabled or api key missing" in all locale files (en, fr, ja, ru, vi, zh).

* 🧹 chore(web): resolve all ESLint errors and warnings

Align the Vite/React frontend with the current ESLint flat config and
React Compiler–related rules by fixing violations instead of broad
suppression where practical.

- Replace `any` with concrete types (`unknown`, `Record<string, unknown>`,
  domain types) where upstream/API shapes allow
- Fix duplicate imports, unused bindings, `no-console`, and empty blocks
- Address react-hooks issues: reorder declarations, memoize unstable
  callbacks (`useCallback`), extend dependency arrays, and use targeted
  disables only where sync-from-props in `useEffect` is intentional
- Refactor `motion.create` usage in ai-elements shimmer to avoid creating
  components during render (static-components)
- Stabilize TanStack Query/Mutation hook usage (query keys, `mutate` in
  deps) and add narrowly scoped rule disables where the linter conflicts
  with library patterns
- Disable `react-hooks/incompatible-library` in ESLint config for
  TanStack Table / RHF false positives
- Add file-level `react-refresh/only-export-components` disables for
  registry/provider/column modules that intentionally mix exports

`bun lint` completes with 0 errors and 0 warnings.

* ✨ feat(web): add subscription management to sidebar and align drawer with project conventions

- Register "Subscription Management" nav item in the admin sidebar group
  with CreditCard icon pointing to /subscriptions
- Add subscription module to sidebar config defaults and URL mapping so it
  integrates with the admin sidebar modules toggle in system settings
- Add subscription entry to sidebar-modules-section moduleMeta for the
  maintenance settings UI
- Refactor SubscriptionsMutateDrawer to follow the same patterns used by
  users, redemption-codes, and other mutate drawers:
  - Use shadcn Form/FormField/FormItem/FormControl/FormLabel/FormMessage
    instead of raw register() + Label + manual error display
  - Move SheetFooter outside the form with form attribute association
  - Use SheetClose for the cancel button
  - Reset form state on drawer close
  - Align SheetContent width (sm:max-w-[600px]) and spacing conventions

* ✨ feat(web): overhaul UI/UX with Vercel Geist design alignment

Refactor the entire frontend UI/UX to align with Vercel/OpenAI design
principles, covering layout, animations, skeleton loading, and overall
visual polish.

Motion & Page Transitions:
- Add centralized motion system (lib/motion.ts) with Vercel-style
  transition presets, stagger variants for tables, cards, and sidebars
- Implement AnimatedOutlet for route-level page enter animations
  using TanStack Router pathname keying
- Add PageTransition, StaggerContainer, StaggerItem, CardStagger,
  and TableStagger wrapper components for progressive reveal effects

Skeleton Loading — Vercel Geist Style:
- Replace shadcn default `animate-pulse` with Geist-style shimmer
  sweep animation (linear-gradient + background-position keyframes)
- Add `--skeleton-base` / `--skeleton-highlight` CSS variables tuned
  for both light and dark themes with neutral oklch tones
- Override auto-skeleton-react inline styles via CSS to unify all
  skeleton elements under the same shimmer effect
- Update TableSkeleton with varied column widths for a natural feel
- Add ContentSkeleton and QuerySkeleton wrappers for auto-skeleton
  integration with React Query error/loading states
- Respect prefers-reduced-motion: disable shimmer for accessibility

Layout & Sidebar:
- Upgrade sidebar expand/collapse transitions to cubic-bezier easing
- Add hover micro-interactions (background-color, color, transform)
  to sidebar menu buttons with smooth 150ms transitions
- Fix oklch color compatibility in sidebar outline variant
- Integrate AnimatedOutlet into AuthenticatedLayout for unified
  route-level animations

Theme & CSS:
- Streamline theme.css with cleaner oklch color definitions
- Add CSS table row stagger-in animations with nth-child delays
- Fix hover-scrollbar color bug (hsl → color-mix for oklch compat)
- Add content-auto utility for long list rendering optimization

Cleanup:
- Remove deprecated skeleton-wrapper.tsx
- Remove unused imports and dead code across components
- Add empty-state, error-state, and loading-state utility components

* 🐛 fix(docker): track bun.lock to fix Docker build failure

Remove `web/bun.lock` from `.gitignore` so the lock file is committed
to version control. The Dockerfile `COPY web/bun.lock .` instruction
requires this file to be present in the build context, and ignoring it
caused the build to fail with a "not found" error.

* ⬆️ chore(web): upgrade dependencies and fix all type/lint errors

Upgrade all frontend dependencies to latest stable versions:
- lucide-react 0.562 → 1.7 (major: brand icons removed)
- shiki 3.x → 4.x, eslint 9.x → 10.x, knip 5.x → 6.x
- @rsbuild/core 1.3 → 1.7, @types/node 24 → 25
- tailwindcss/postcss 4.1 → 4.2, motion 12.25 → 12.38
- @tanstack/react-query 5.90 → 5.95, zod 4.3.5 → 4.3.6
- react 19.2.3 → 19.2.4, axios 1.13.2 → 1.13.6
- prettier 3.7 → 3.8, typescript-eslint 8.52 → 8.57
- Add missing optional deps: @xyflow/react, embla-carousel-react

Resolve all TypeScript compilation errors introduced by upgrades:
- Replace lucide-react brand icons (Github) with react-icons/si
- Fix react-hook-form Control/Resolver generics for zod v4
- Fix Record<string, unknown> type constraints across API utils
- Fix axios interceptor return types in lib/api.ts
- Add type assertions for useSettings/useStatus hook returns
- Resolve Badge variant, spread type, and route path mismatches

Resolve all ESLint 10 errors:
- preserve-caught-error: attach cause to re-thrown errors
- no-useless-assignment: refactor redundant variable assignments
- prefer-as-const: use `as const` over literal type assertions
- no-unused-vars: prefix type-only schemas with underscore

Update tsconfig lib from ES2020 to ES2022 for Error.cause support.

* 🐛 fix(web): stop pricing model row from centering its content

Wrapping the row in shadcn <Button variant='ghost'> inherits
`justify-center`, and the inner flex container had no width, so
`justify-between` collapsed and the row appeared centered.

* feat: add Waffo payment integration and related UI components

- Introduced Waffo payment method with support for custom icons and settings.
- Updated payment settings section to include Waffo settings.
- Added Waffo payment request handling in the wallet API.
- Enhanced wallet recharge form to support Waffo payment methods.
- Implemented hooks for Waffo payment processing.
- Updated localization files for new Waffo-related strings.
- Added new payment type and icon for Waffo in constants and UI components.
- Refactored topup info handling to include Waffo payment methods and configurations.

* feat(profile): add admin-only upstream model update notification setting

* fix(web): make sidebar module user settings actually take effect

Previously, saving sidebar module preferences in profile had no effect
because the client ignored user-level sidebar_modules entirely. This
fix wires user config into useSidebarConfig so the sidebar updates
immediately without a page refresh.

Changes:
- Add UserPermissions type with sidebar_settings/sidebar_modules fields
- Refactor useSidebarConfig to merge admin × user config with AND logic
- Sync sidebar_modules to auth store on save for immediate UI updates
- Conditionally render SidebarModulesCard based on user permissions
- Treat null/empty user config as "do not narrow" for legacy users

* feat(web): add custom OAuth provider CRUD and login button support

Migrate custom OAuth from v1 to v2:
- Admin CRUD UI with provider table, form dialog, preset templates, and OIDC discovery
- Login page renders dynamic buttons for custom OAuth providers
- Fix account bindings display showing "Not bound" text when already bound

* feat(web): add ServerAddress, SMTPForceAuthLogin, CreateCacheRatio and group special usable settings

Migrate missing v1 system settings to v2:
- ServerAddress input in General > System Information
- SMTPForceAuthLogin toggle in Integrations > Email
- CreateCacheRatio JSON editor in Models > Ratio
- Group special usable group rules editor in Models > Ratio

* feat(web): wire user subscriptions dialog to users table row actions

The UserSubscriptionsDialog component already existed but had no entry point
in the users table dropdown menu. Add "Manage Subscriptions" menu item.

* chore(web): update i18n translations for new settings and custom OAuth

* 💎 refactor(web): redesign pricing page with flat, typography-driven layout

* 🌐 chore(i18n): complete missing translations and normalize project config

- Add 425+ missing translations across fr, ja, ru, zh, vi locales
  for subscription management, sidebar navigation, Grok settings,
  upstream model updates, pricing page, and other UI components
- Add 37 missing i18n keys used in t() calls but absent from locale
  files (pricing filters, display options, audio/cache labels, etc.)
- Fix stale tech stack info in CLAUDE.md, AGENTS.md, and project.mdc:
  React 18 → 19, Vite → Rsbuild, Semi Design → Radix UI + Tailwind
- Fix i18n key format description: "Chinese source strings" → English
- Deduplicate .cursor/rules/project.mdc to avoid triple-loading the
  same rules already present in root CLAUDE.md and AGENTS.md
- Add i18n-translate Cursor skill for repeatable translation workflow

* 🎨 refactor(web): redesign dashboard with flat, typography-driven layout

Replace Card-based dashboard components with a flat, border-driven design
system consistent with the pricing page, following the ui-style.mdc conventions.

Overview section:
- StatCard: replace Card wrapper with flat flex layout, monospace tabular
  values, uppercase tracking-wider labels, layered opacity hierarchy
- PanelWrapper: replace Card/CardHeader/CardContent with rounded-lg border
  container and border-b header
- SummaryCards: merge three stat cards into a single bordered container
  with divide-x separators; decouple border from stagger animation to
  prevent border deformation during entrance transitions
- ApiInfoPanel/Item: full-width list rows with border-b separators,
  monospace route names, layered opacity for URLs and descriptions
- AnnouncementsPanel: native button rows with hover:bg-muted/40, i18n for
  "Click for details" hint
- FAQPanel: lighter border-border/60 accordion dividers, muted answer text
- UptimePanel: uppercase tracking-wider group headers with bg-muted/30
  background, monospace uptime percentages, fine-grained border opacity

Models section:
- LogStatCards: replace Card with rounded-lg border + divide-x grid,
  fix react-hooks/exhaustive-deps by destructuring props before useEffect
- ModelCharts: replace Card+Tabs with bordered container + custom
  segmented control matching ui-style spec
- Suspense fallbacks: match new flat skeleton layout with accurate
  column structure

Animation:
- Wrap models section in FadeIn with staggered delay
- Keep CardStagger for overview panel grid (each panel has own border)

Other:
- Add ui-style.mdc cursor rule documenting the design language
- Disable react-refresh/only-export-components for src/routes/** in
  eslint config (TanStack Router route files always export Route objects)
- Fix zh.json: "Token-based" translation "基于令牌的" → "按量计费"

* ✨ refactor(web): adopt flat dot-and-text design for all status badges

Replace the bordered/colored-background StatusBadge and Badge components
across the entire frontend with a minimal flat design: a small colored
dot followed by colored text, eliminating visual noise from heavy
borders, backgrounds, and rounded pill shapes.

Key changes:

- Redesign StatusBadge to use dot + text instead of bordered pill style,
  removing cva-based background/border variants in favor of exported
  dotColorMap and textColorMap lookup tables
- Add children prop support to StatusBadge for flexible content rendering
  alongside the existing label prop
- Migrate all Badge usages (except pricing page) to StatusBadge with
  appropriate variant mappings (default→info, secondary→neutral,
  outline→neutral, destructive→danger)
- Consolidate adjacent multi-badge groups into single-dot layouts with
  dot separators (·) to reduce visual clutter in:
  - Channel balance columns (used + remaining)
  - Channel type column (type + IO.NET indicator)
  - User invite info column (invited + revenue + inviter)
  - Usage log stats bar (usage + RPM + TPM)
  - Usage log time/FRT column (time + FRT + stream status)
  - Subscription plan counts (active + expired)
  - Channel affinity scope/regex/key-source columns
  - Prefill group card headers (type + ID)
- Export dotColorMap and textColorMap for direct use in custom inline
  layouts that need consistent status colors without the full component

* ✨ refactor(web): redesign public layout and landing page with modern UI

Overhaul the public-facing layout, header, and homepage to deliver a
polished, animation-rich landing experience inspired by contemporary
SaaS design patterns.

Header:
- Replace sticky header with fixed floating navbar that compacts into
  a pill-shaped glass-morphism bar on scroll (backdrop-blur + ring)
- Add smooth 700ms cubic-bezier transitions for scroll-based shrinking
- Build full-screen mobile menu overlay with staggered entry animations
- Remove background color from logo container, show logo image directly

Homepage sections:
- Hero: gradient text title, radial gradient + grid pattern background,
  interactive terminal demo showcasing API request/response
- Terminal demo: auto-cycles through gpt-4o, claude-sonnet-4-20250514,
  gemini-2.5-pro, deepseek-chat with smooth cross-fade transitions,
  clickable model badges, dual theme support (light/dark), fixed height
- Stats: animated counters driven by IntersectionObserver with
  cubic-bezier easing, supports integer and decimal modes
- Features: Bento grid layout with gap-px border technique, each card
  includes contextual visuals (model list, security badge, workflow)
- How It Works: new three-step process section (Configure → Connect →
  Monitor) with connecting gradient line and numbered badges
- CTA: gradient mesh background with scale-in scroll animation
- Footer: streamlined brand column + link columns layout

New components:
- AnimateInView: IntersectionObserver-based scroll animation component
  supporting fade-up, fade-in, scale-in, fade-left, fade-right
- HeroTerminalDemo: themed terminal with model carousel and live
  request/response preview

CSS:
- Add landing page scroll-triggered keyframe animations
- Add terminal demo animations (blink cursor, spinner, pulse indicator)
- Respect prefers-reduced-motion throughout

i18n:
- Add 17 new translation keys across all 6 locales (en/zh/fr/ja/ru/vi)

* ✨ feat(web): align usage logs and channels with legacy UI

Usage logs
- Show Refund (type 6) in detail dialog and hide conversion chain for refunds
- Sync filter dialog state from URL for model, token, group, username, and requestId

Channels
- Support optional stream flag in channel test API, actions, and test dialog
- Show upstream model update badges (+added / -removed) on fetchable channel types
- Add form fields and drawer toggles for upstream model update check and auto-sync
- Persist upstream model update flags in channel settings JSON for fetchable types

i18n
- Add locale strings for upstream model update UI (en, zh, fr, ja, ru, vi)

* 🐛 fix(web): prevent transient vertical scrollbar on tables during animations

Add overflow-y-clip to the shared Table container (data-slot=table-container)
alongside overflow-x-auto. Setting overflow-x to auto implicitly pairs with
overflow-y: auto in browsers, which made the table shell briefly show a
vertical scrollbar during route enter motion (y/blur) and table row stagger.

Remove the redundant descendant selector workaround from the model pricing
GroupPricingSection; behavior is now covered globally by the Table component.

* 🏗️ refactor(web): redesign console layout with fixed header, scrollable content, and pinned footer

Overhaul the authenticated console layout to match the OpenAI dashboard
pattern: header and page title bar stay fixed at the top, only the
content area scrolls, and table pagination is pinned to the bottom.

Layout architecture:
- Lock SidebarInset to full viewport height (h-svh) so all inner
  regions are controlled by flexbox instead of document scroll
- Convert Main from a generic div to a semantic <main> flex container
  with overflow-hidden, removing the legacy `fixed` prop and
  `data-layout` attribute
- Strip scroll-shadow logic and `fixed` prop from Header/AppHeader;
  the header is now naturally fixed as a shrink-0 flex child
- Restructure SectionPageLayout into three flex regions: a shrink-0
  title bar, a flex-1 overflow-auto content area, and a shrink-0
  footer portal target with empty:hidden
- Add min-h-0 to AnimatedOutlet wrappers to prevent flex overflow

Footer portal system:
- Introduce PageFooterProvider / PageFooterPortal (React Context +
  createPortal) so deeply nested table components can render their
  DataTablePagination into the fixed footer without prop drilling
- Migrate all 8 data tables (api-keys, channels, users, models,
  deployments, usage-logs, subscriptions, redemption-codes) to use
  PageFooterPortal for pagination

Page-level fixes:
- Profile: wrap content in a scrollable flex child with proper padding
- SystemSettings: remove overflow-auto from wrapper to avoid nested
  scrollbars (sub-pages manage their own scroll)
- Playground / Error pages: remove obsolete `fixed` props

API keys UX improvement:
- Replace inline key show/hide toggle with a Popover-based reveal,
  removing toggleKeyVisibility and keyVisibility state from the
  provider context

Cleanup:
- Remove dead CSS rule for body:has([data-layout='fixed'])
- Remove unused `fixed` prop from Header, AppHeader, and Main types
- Export PageFooterPortal from layout barrel file

* 💅 refactor(web): polish table UI consistency and add pagination transitions

- Standardize primary action buttons (Create, Add, Search) to size="sm"
  across all pages for visual consistency with channels and models
- Redesign NumericSpinnerInput with minimal inline style: plain text by
  default, hover-revealed +/- buttons, click-to-edit — replacing the
  clunky bordered input with stacked chevron arrows
- Fix vertical scrollbar in channels group column by replacing
  overflow-x-auto with overflow-hidden (redundant with +N collapse)
- Simplify API keys group column: replace colorful StatusBadge pairs
  with clean typography using opacity hierarchy and dot separators
- Move API key copy loading indicator from key text to the copy button
  itself, eliminating layout shift during key resolution
- Reduce page title from text-2xl to text-lg and subtitle to text-sm
  in SectionPageLayout for a more compact header
- Add smooth opacity transition (duration-150) on all 7 server-paginated
  tables during background data fetches (isFetching && !isLoading),
  with pointer-events-none to prevent interaction during loading
- Constrain usage logs Details column width (size: 200, maxSize: 220)

* 🐛 fix(web): restore missing padding on system settings content

The console layout refactor in d2150469 moved padding ownership from
Main onto each route, but SystemSettings was missed — its Outlet
wrapper had no padding, so the content area sat flush against the
sidebar and top nav. Add `px-4 pt-6 pb-4` to match the vertical
rhythm used by SectionPageLayout and the Profile page.

* 📱 refactor(web): standardize mobile responsive layout across all table pages

Unify mobile experience for all data table pages (channels, keys, models,
deployments, usage-logs, users, redemption-codes, subscriptions) with a
consistent layout pattern and cleaner header area.

DataTableToolbar:
- Redesign mobile layout: full-width search input + collapsible filter
  toggle button with active filter count badge
- Filters, additional search, and reset button collapse into an
  expandable section on mobile, keeping the default view compact
- Desktop layout remains unchanged

SectionPageLayout:
- Tighten mobile spacing (padding, gaps) for higher content density
- Scale down title (text-base) and description (text-xs) on mobile
- Shrink action button gaps on small screens

ChannelsPrimaryButtons:
- Move Tag Mode and Sort by ID toggles into the "More" dropdown on
  mobile (via DropdownMenuCheckboxItem), freeing header space
- Desktop toggle switches remain visible outside the dropdown

MobileCardList (shared component):
- Compact list-item layout with title + badge header row and
  side-by-side key fields, replacing individual card components
- Structured (CompactRow) and fallback (FallbackRow) rendering modes
  driven by column meta (mobileTitle, mobileBadge, mobileHidden)

New MobileCardList integration:
- Users table: username as title, status as badge; hide id,
  display_name, invite_info on mobile
- Redemptions table: name as title, status as badge; hide id,
  created_time, expired_time, used_user_id on mobile
- Subscriptions table: plan title as title, enabled as badge; hide id,
  sort_order, reset, payment, total_amount, upgrade_group on mobile

Column meta updates:
- Add mobileTitle/mobileBadge/mobileHidden meta across all 8 table
  column definitions for consistent mobile field prioritization

Minor fixes:
- Hide Subscriptions Stripe/Creem alert on mobile
- Disable card hover animations on mobile via CSS media query

* 🐛 fix(web): sync favicon with custom system logo

Favicon stayed at the hardcoded /logo.png while document.title already
followed system_name, leaving tab icon and site branding out of sync.
Apply the logo as favicon from localStorage cache on startup, refresh
from getStatus(), and re-apply when useSystemConfig finishes preloading.
Extract applyFaviconToDom helper into lib/dom-utils with idempotent guard
to avoid redundant DOM writes.

* ✨ feat(web): add channel affinity rule templates and CreateCacheRatio visual editing

Port missing features from legacy frontend (b8650b9 merge) to the new
React frontend:

- Add Codex CLI and Claude CLI channel affinity rule templates with
  header passthrough presets (pass_headers operations for Originator,
  Session_id, X-Codex-*, X-Stainless-*, Anthropic-*, etc.)
- Introduce "Add Rule" dropdown menu with blank, Codex CLI, and Claude
  CLI template options in the channel affinity settings page
- Add "Fill Templates" button to batch-append both CLI templates with
  duplicate name resolution and confirmation dialog
- Support templateKey prop in RuleEditorDialog to pre-fill form fields
  from selected template, auto-expanding advanced settings when a
  param_override_template is present
- Add CreateCacheRatio support to the model ratio visual editor, edit
  dialog, and form — previously only editable in JSON mode, now fully
  integrated into the visual table column, add/edit dialog fields, and
  save/delete handlers

* 🐛 fix(web): fix content-type detection bugs in About and Home pages

- Fix About page URL detection: replace naive `startsWith('https://')`
  with proper `new URL()` validation to support both http and https, and
  handle untrimmed input that previously caused silent misdetection
- Fix About page HTML detection: remove overly broad `startsWith('<')`
  and `endsWith('>')` checks that could misclassify Markdown or XML
  content; align with LegalDocument's regex-only `isLikelyHtml` approach
- Fix Home page URL detection: same `startsWith('https://')` bug,
  replaced with `new URL()` protocol validation
- Refactor About page to use early-return pattern instead of deeply
  nested ternary expressions for better readability
- Replace About loading spinner with Skeleton placeholder consistent
  with LegalDocument
- Add `prose prose-neutral dark:prose-invert` typography classes to
  About HTML/Markdown rendering for proper dark mode support
- Remove unused `Code` icon import from About page

* ✨ feat(web): port missing features from legacy frontend and complete i18n

Backport and enhance several features from the old frontend (web/old)
that were missing or incomplete in the new React frontend:

- Playground & channel test: parse structured JSON error responses from
  SSE streams and non-streaming API calls, extract error codes, and
  display actionable UI for `model_price_error` (admin settings link)
- User management: replace local quota manipulation with atomic
  server-side quota adjustments (add/subtract/override) via dedicated
  API endpoint, making the quota field read-only in the edit drawer
- Subscriptions: display next quota reset time for active subscriptions
- Dashboard: limit model ranking chart to top 20 models with an "Other"
  bucket, add dimension tooltips with sorted values and totals to model
  call trend and user consumption trend charts
- i18n: add 24 new translation keys across all 6 locales (en, zh, fr,
  ja, ru, vi) for the newly introduced UI elements and messages

* 🎨 feat: add backend-configurable frontend theme switching (default/classic)

Introduce runtime frontend theme switching so administrators can switch
between the new frontend (Radix UI + Tailwind) and the classic frontend
(Semi Design) from the settings page without restarting the server.

Directory restructuring:
- Move new frontend from web/ to web/default/
- Move classic frontend from web/old/ to web/classic/
- One-frontend-per-folder layout for extensibility

Backend (injection pattern):
- Add setting/system_setting/theme.go with GlobalConfig.Register("theme")
  so the DB key "theme.frontend" is handled automatically by
  handleConfigUpdate — no switch-case in updateOptionMap needed
- Use atomic.Value in common.GetTheme()/SetTheme() for lock-free
  concurrent reads on the hot path (static file middleware)
- Add themeAwareFileSystem that delegates to the correct embedded FS
  based on the current theme at request time
- Embed both frontends into the binary via go:embed
- Add controller validation for theme.frontend values
- Expose theme in GET /api/status response

Frontend settings UI:
- New frontend: add "Frontend Theme" select in System Information section
  using Radix UI Select + react-hook-form + Zod validation
- Classic frontend: add "前端主题" select in Personalization section
  using Semi Design Form.Select

Build system:
- Update Dockerfile with multi-stage builds for both frontends
- Update Makefile with separate build targets for each frontend
- Update GitHub Actions release workflow for dual frontend builds

i18n:
- New frontend: add translations for all 6 locales (en/zh/fr/ja/ru/vi)
- Classic frontend: add translations for all 7 locales (en/zh-TW/ja/fr/ru/vi)
- Fix zh "AI Proxy Library" → "AI 代理库"

Documentation:
- Update CLAUDE.md, AGENTS.md, .cursor/rules/project.mdc to reflect
  the new web/default/ and web/classic/ directory structure

* ✨ feat(web): add allow_speed passthrough for Claude channels, fix multi-key index and inference_geo scope

- Add `allow_speed` toggle for Anthropic (type 14) channels to control
  Claude inference speed mode passthrough, with full form schema,
  settings persistence, and UI switch
- Fix `allow_inference_geo` to also apply to Anthropic (type 14) channels,
  not just OpenAI (type 1), matching the backend behavior for Claude data
  residency region control
- Fix multi-key management dialog to display 1-based key indices instead
  of 0-based (#{key.index + 1})
- Fix TypeScript type error in section-registry by adding type assertion
  for theme.frontend enum
- Add i18n translations for all new keys across 6 locales (en, zh, fr,
  ja, ru, vi)

* 🧹 chore: clean up editor configs, consolidate agent skills, and set classic as default theme

- Add .cursor/ to .gitignore and remove tracked editor config files
  (.cursor/rules/, .cursor/skills/) from version control
- Consolidate .agents/skills/vercel-react-best-practices by keeping only
  the compiled AGENTS.md and removing redundant SKILL.md and 57 individual
  rule files under rules/
- Change default frontend theme from "default" to "classic" in both
  common/constants.go init and setting/system_setting/theme.go

* feat: Frontend Tiered Pricing, Waffo Payments, and Rsbuild 2 Upgrade (#24)

* feat(ui): add codex extra limits, key last used, and admin audit surfaces

- codex usage dialog: render `additional_rate_limits` with `RateLimitGroupSection` and typed base/secondary window data.
- api keys table: add "Last Used" column from `accessed_time`.
- usage log details: show top-up audit and manage operator for admins; extend `LogOtherData` audit fields; broaden IP display; warn when legacy records lack audit data.
- billing history: show user id badge for admins; add zh i18n for new strings.

* feat(web): add dynamic pricing breakdown and Waffo Pancake payments

- add billing-expr parsing and DynamicPricingBreakdown; surface tiered_expr in model list/details.
- extend PricingModel with billing_mode, billing_expr, and pricing_version for backend parity.
- add Waffo Pancake integration settings, amount/pay APIs, hook, and recharge flow wiring.
- update payment confirm/recharge UI and Chinese locale strings.

* feat(pricing): add tiered billing editor and tool price settings

- introduce tier-expr and extend billing-expr (time/param conditions, combine/split helpers, editor utilities) for visual tiers and request rules.
- support tiered_expr in model ratio dialog, form, and visual editor with billing_setting fields and default JSON placeholders.
- add TieredPricingEditor and tool price settings UI plus i18n updates.

* chore(web): bump rsbuild to v2 and align build config

- upgrade @rsbuild/core, @rsbuild/plugin-react, and Rspack 2 transitives; bump TanStack Router packages and refresh bun.lock.
- replace deprecated performance.chunkSplit with top-level splitChunks cache groups for react, radix, and tanstack vendors.
- factor dev server proxy into devProxy; set legalComments to none in prod; enable performance.buildCache keyed by VITE_REACT_APP_VERSION.
- TanStack Router plugin: enable autoCodeSplitting only in production for faster dev navigation and HMR.

* fix(i18n): update translations for API keys and Waffo Pancake settings

- Corrected translations for "API Private Key" and "Merchant ID is required" across multiple languages.
- Added new translation for "Configure Waffo Pancake hosted checkout integration for USD-priced top-ups."
- Updated various existing translations to ensure consistency and clarity in user interface text.

* refactor(code-block): simplify code highlighting and improve theme handling

- Updated the highlightCode function to support dual themes in a single call, reducing complexity.
- Removed unnecessary state management for dark theme HTML, streamlining the component.
- Enhanced CSS for Shiki themes to ensure proper token color application in dark mode.

* refactor(wallet): use isWaffoPancakePayment for pancake payment dispatch

- replace the waffo_pancake string literal with the shared helper for consistency with use-payment and PAYMENT_TYPES.
- centralize the value so a constant change does not require hunting for typos in multiple call sites.

* fix(wallet): validate waffo pancake checkout url and safe open

- allow only parseable http/https redirect targets from the backend, rejecting dangerous schemes.
- pass noopener and noreferrer in window.open to reduce reverse tabnabbing.
- show a toast and abort on invalid URLs; add i18n entries across locales.

* fix(wallet): harden payment icon image URLs

- add normalizeHttpIconUrl to allow only http(s) after resolution and reject userinfo in URLs.
- set referrerPolicy, lazy loading, and async decode on the icon <img> to cut referrer leakage.
- fall back to built-in icons on invalid URLs, same as when iconUrl is missing.

* fix(pricing): label param() conditions as body param in dynamic pricing

- non-header request rules map to `param()`, not query strings.
- align with tiered pricing editor by using the existing `Body param` string.

* fix(rsbuild): update legalComments handling in build config

- Rely on Rsbuild's default legalComments setting in all modes to ensure compliance with open-source licensing requirements.
- Clarified comments to explain the implications of omitting legalComments in production.

* fix(i18n): correct billing and codex UI strings in locale files

- restore ~83 en.json values to English (tool pricing, audit text, alipay label, etc.).
- add proper fr/ru/vi/ja strings so those locales no longer copy zh.
- change five locale files only; zh.json unchanged.

* fix(i18n): update locale files for improved translations and sync report

- Added missing translations and corrected existing strings in English, French, Japanese, Russian, Vietnamese, and Chinese locale files.
- Updated the sync report to reflect zero missing translations across multiple locales.
- Enhanced the untranslated count for Japanese locale to ensure completeness.
- Changed the base locale from zh.json to en.json for better alignment.

* chore(agents): add i18n-translate agent skill

- add `.agents/skills/i18n-translate/SKILL.md` documenting locale layout under `web/default` and
  `bun run i18n:sync` usage.
- capture a repeatable maintainer workflow with embedded script examples to find missing keys
  and untranslated values.
- give agents a clear path to complete and verify translations across en, zh, fr, ja, ru, and vi.

* feat(settings): hide frontend theme setting (#25)

* feat(settings): hide frontend theme setting

- add a local hidden feature flag with window.newapiUnlock support.
- hide the frontend theme option by default and reveal it immediately after unlock.

* feat(settings): support click unlock for frontend theme setting

- add a shared hidden click unlock hook for repeated-click gated UI.
- reveal the frontend theme option after triple-clicking the system information title.
- preserve the Doubao API address ten-click unlock behavior and remove global unlock functions.

* feat(sync 59337e9): Sync classic tiered billing, upstream price synchronization, and model management features to web/default (#26)

* feat(skill): add classic-to-default-sync skill for auditing and syncing web/classic changes to web/default

- Introduced a new skill to inspect a given commit's changes in web/classic and synchronize features and fixes to web/default.
- Documented workflow steps for extracting diffs, mapping changes, triaging, implementing, and reporting on the synchronization process.
- Emphasized quality standards and internationalization considerations for new user-visible strings.

* feat(web/default): sync billing and model management features from classic

- add `len` condition variable (total input context length); introduce
  BILLING_PRICING_VARS / BILLING_CONDITION_VARS to separate pricing vars
  from condition-only vars; fix tier condition regex to accept `len`.
- rewrite upstream ratio sync components to support per-model grouped
  rows and new ratio types (create_cache, image, audio, billing_expr).
- add LlmPromptHelper component; update tiered presets to use `len` for
  conditions; add GLM-4.5 Air, Doubao Seed 1.8, Qwen3 Omni Flash, and
  weekend-discount presets.
- add created_at / last_login_at columns to users table; add "Removed
  Models" tab to FetchModelsDialog for mapping source keys not in the
  models list.
- add extractMappingSourceModels helper; update dynamic-pricing-breakdown
  to use system currency settings; add 19 i18n keys across all locales.

* ✨ feat(default): surface tiered billing in usage logs and gate Passkey ops behind 2FA

Continues the classic-to-default sync (commit 1be6cdb) by porting the
remaining audit-log, pricing-hint, and Passkey lifecycle features from
web/classic to web/default using the default frontend's component
patterns (Radix UI, Tailwind, shadcn-style dialogs).

* feat(usage-logs): show tiered_expr breakdown and matched tier in details

  - Extend `LogOtherData` with `billing_mode`, `expr_b64`, and
    `matched_tier` fields populated by the backend for tiered logs.
  - Add `decodeBillingExprB64`, `resolveMatchedTier`, and
    `getTieredBillingSummary` helpers in `usage-logs/lib/format.ts` that
    centralise tiered-billing parsing on top of the canonical
    `parseTiersFromExpr` / `BILLING_PRICING_VARS` from the pricing
    feature, instead of duplicating the classic-frontend renderer.
  - Render `<DynamicPricingBreakdown>` inside the consume-log details
    dialog with the matched tier row highlighted in emerald and tagged
    "Matched"; suppress the legacy claude/audio/image cost rows when a
    tiered expression is in effect.
  - Surface per-tier prices and the matched tier label in log row
    segments and the billing breakdown table.

* feat(pricing): show tier-count, time-based, and request-based hints in model list

  - Add `summarizeTieredExpr` that derives compact dynamic-pricing
    metadata (tier count + presence of time/request conditions) from a
    `tiered_expr` model, computed once per render via `useMemo`, so
    users can tell *what kind* of dynamic pricing applies before
    drilling into the model details.
  - Render the hints alongside the existing "Dynamic Pricing" badge in
    `<ModelRow>`.
  - Extend `<DynamicPricingBreakdown>` with a `matchedTierLabel` prop so
    the same component can be reused from the usage-log details dialog
    to highlight the tier that actually fired.

* feat(profile): require Security Verification for Passkey register/remove

  - Wire `usePasskeyManagement` through `useSecureVerification` and
    `<SecureVerificationDialog>` in `<PasskeyCard>`.
  - Registration prompts for 2FA before issuing the Passkey credential
    (only when 2FA is already enabled — otherwise the browser-level
    Passkey prompt itself acts as proof of presence and we register
    directly).
  - Removal prompts for 2FA or Passkey, whichever the account has
    enabled, with informative toasts when neither method is available
    or the device lacks Passkey support.
  - Scope the dialog method set to the required factor so users cannot
    fall back to a weaker method, and propagate cancellation cleanly.

* refactor: tighten upstream-ratio-sync and fix tier editor narrowing

  - Drop the unused `hasSynced` state and dead `getOrderedRatioTypes` /
    `isSelectableUpstreamValue` imports from `upstream-ratio-sync.tsx`.
  - In the cost estimator, narrow `BILLING_EXTRA_VARS` entries with a
    null-`field` guard to silence the type checker and make the
    "pricing variables only" contract explicit.
  - Apply Prettier-consistent formatting to the upstream-ratio-sync
    table/columns, channel mutate drawer, system info section,
    tier-expr, and wallet helpers (no behaviour change).

* i18n: add 9 keys across en/zh/fr/ja/ru/vi

  - `{{count}} tiers`, `Billing Process`, `Matched`, `Matched Tier`,
    `Request-based`, `Security verification`, `Time-based`, plus the
    two new Passkey verification description strings.

* 🔧 refactor(default): align upstream price sync, tiered billing, and fetch-models with classic 59337e9

Port and optimize the remaining web/classic features from commit 59337e9 to web/default,
covering upstream price synchronization, tiered billing expressions, model fetching, and
channel preset detection. Improve component architecture, memoization, and i18n coverage.

Upstream Price Sync
- Extend sync to all ratio fields: CacheRatio, CreateCacheRatio, ImageRatio,
  AudioRatio, AudioCompletionRatio in addition to ModelRatio / CompletionRatio
  / ModelPrice
- Add tiered billing sync (billing_mode + billing_expr) with auto-pairing so
  selecting one upstream tier value populates the other from the same source
- Bulk select / unselect per upstream column with indeterminate checkbox state
  reflecting partial selection
- Confidence indicators warn when an upstream entry is heuristically derived
- Conflict confirm dialog gains loading state and disables actions during sync
- Default endpoint per channel: /api/pricing for official preset,
  /api/models.dev for the models.dev preset, /api/v1/models for OpenRouter,
  with the rest falling back to the global default
- Rename tab label from "Upstream sync" to "Upstream price sync" for clarity

Tiered Pricing Editor
- Add `len` (full input length, including cache hits) as a tier-condition
  variable to avoid mis-routing when cache hits reduce `p`
- When inserting a new tier, automatically convert the previous catch-all into
  a bounded tier with a `len <= X` upper bound
- Cap each tier at 0~2 conditions and disable the add-condition button at the
  limit, with an Alert explaining the recommended `len` usage
- Extend presets with Multimodal (img / img_o / ai / ao), Request rule
  (header/param matching), and Time-based (hour / weekday) entries
- Embed an LLM prompt helper that copies a model-aware template for designing
  expressions with ChatGPT / Claude

Fetch Models Dialog
- Add a "Removed Models" tab listing models still in the local selection but
  no longer returned by the upstream listing
- Exclude `model_mapping` source keys from the removed view so aliases never
  appear as missing entries
- Force-remount tab content on tab switch via `key` prop to clear stale state
- Switch count placeholders to `{{count}}` interpolation across "Existing
  Models", "New Models", and "Removed Models" labels

Channel Selector & Constants
- Recognize the models.dev preset (id, base_url, name) alongside the existing
  official-channel preset detection
- Add MODELS_DEV_PRESET_* and OPENROUTER_* constants and reorder
  ENDPOINT_OPTIONS so `pricing` is preferred over `ratio_config`
- Expose the new ratio types in RATIO_TYPE_OPTIONS for the sync filter

Types
- Add optional `type` field to UpstreamChannel for endpoint inference
- Extend RatioType union with create_cache_ratio, image_ratio, audio_ratio,
  audio_completion_ratio, billing_mode, and billing_expr

Code Quality & Performance
- Extract upstream-ratio-sync-helpers.ts to host shared types
  (RatioDifferenceEntry, ModelRow, ResolutionsMap), field ordering
  (RATIO_SYNC_FIELDS, SYNC_FIELD_ORDER, NUMERIC_SYNC_FIELDS), and selection
  logic (getPreferredSyncField, isSelectableUpstreamValue, getSyncFieldLabel)
- Memoize the column definitions in useUpstreamRatioSyncColumns and pull the
  per-cell rendering into a renderUpstreamValue helper to remove inline IIFEs
- Wrap handleBulkSelect / handleBulkUnselect in useCallback for stable refs;
  rename the misleading `_upstream` parameter to `upstream`
- Convert parsedRatios from useCallback (returning a function) to useMemo
  (returning the value) and update all call sites to read it as a value
- Memoize the channels list with useMemo so the endpoint-init effect no
  longer fires on every render due to a fresh `?? []` reference

i18n
- Add and translate new keys ("Upstream price sync", "Audio Ratio", "Audio
  Completion Ratio", "Cache Create Ratio", "Image Ratio", "Expression
  Billing", "Fixed Price", "{{n}} model(s) selected", tier guidance, etc.)
  across en, zh, fr, ja, ru, vi
- Fix truncated keys ("Existing Models (", "New Models (", "Removed Models (")
  to proper {{count}} interpolated forms in every locale
- bun run i18n:sync reports 0 missing and 0 extra keys for every locale

Verification
- bun run typecheck: pass
- bun run lint: pass
- bun run i18n:sync: pass (0 missing / 0 extras across all locales)

* 🐛 fix(default): port classic 73e5557 tiered-billing fixes and dedupe Title-Case ratio i18n keys

Sync the web/classic frontend fixes from upstream merge 73e5557 to
web/default, and clean up duplicated Title-Case ratio labels in the
upstream sync UI that were shadowing the canonical sentence-case i18n
keys.

Cache-token filter for tiered model price (port of 9f8a4ec05)
- The matched-tier breakdown shown in the usage-log details dialog
  and in the log table previously listed every cache-related price
  (Cache Read, Cache Write, Cache Write 1h) regardless of whether
  the request actually consumed cache tokens.
- `getTieredBillingSummary` in `usage-logs/lib/format.ts` now skips
  `cache`-group vars when none of `cache_tokens`,
  `cache_creation_tokens`, `cache_creation_tokens_5m`, or
  `cache_creation_tokens_1h` are positive, mirroring the classic
  `renderTieredModelPrice` / `renderTieredModelPriceSimple` logic.
- Extract `hasAnyCacheTokens(other)` as an exported helper so the
  predicate is defined once.
- Add a `hideCacheColumns?: boolean` prop to
  `DynamicPricingBreakdown` and wire it up from the log details
  dialog so the full tier table hides cache columns under the same
  condition. `model-details.tsx` keeps the default (show all
  configured prices), since that view represents the model's
  pricing structure rather than a specific call.

`tiered_expr` ratio/price fallback during sync delays (port of bee339d27)
- When saving a model in tiered-expression mode, the visual editor
  used to delete every ratio/price map entry for the model and only
  write `billing_setting.billing_mode` /
  `billing_setting.billing_expr`. In multi-instance deployments,
  instances that had not yet observed the billing_setting update
  fell back to ratios that no longer existed, breaking pricing.
- `model-ratio-dialog.tsx`: `handleSubmit` always passes every form
  field (`price`, `ratio`, `cacheRatio`, `createCacheRatio`,
  `completionRatio`, `imageRatio`, `audioRatio`,
  `audioCompletionRatio`) into the data object regardless of
  `pricingMode`, so a switch from per-token to tiered_expr no
  longer drops the previously entered ratios.
- `model-ratio-visual-editor.tsx`:
  - The row builder now also surfaces ratio/price values for
    `tiered_expr` rows, so they survive the edit-and-save round
    trip and the next save.
  - `handleSave` factors out a `setIfPresent` helper and persists
    ratio/price entries for `tiered_expr` models alongside
    billing_mode / billing_expr. These act purely as fallback
    because the backend's `ModelPriceHelper` checks `billing_mode`
    first.
  - Cell rendering mutes ratio/price values whenever the row is
    `tiered_expr` (in addition to the existing per-request
    muting), making it visually clear the values are fallback,
    not the active pricing source.

i18n: dedupe Title-Case ratio labels in upstream sync
- `upstream-ratio-sync` `RATIO_TYPE_OPTIONS` previously used
  Title-Case labels (`Model Ratio`, `Cache Ratio`, `Audio
  Completion Ratio`, …) that were rendered through `t()` but never
  existed as canonical keys in the catalogue. The form-field side
  has used sentence-case (`Model ratio`, `Cache ratio`, …) for
  some time, leaving two parallel translation entries per ratio
  type and causing the upstream sync UI to fall back to the
  English source string in zh/ja/ru/fr/vi.
- Rewrite `RATIO_TYPE_OPTIONS` in
  `system-settings/models/constants.ts` and the conflict-detection
  labels in `upstream-ratio-sync.tsx` to reuse the sentence-case
  keys.
- Drop the duplicate Title-Case entries from every locale and
  promote the better translations onto the surviving sentence-case
  keys (e.g. zh `Image ratio` keeps "图片倍率", `Audio completion
  ratio` keeps "音频补全倍率").
- Add a comment to `RATIO_TYPE_OPTIONS` warning future
  contributors not to switch back to Title Case without updating
  the catalogue.

Note on backend fix 4e93148d9
- The backend portion of the merge (allocating a fresh map in
  `updateConfigFromMap` so removed keys are properly cleared) is
  already on HEAD; no additional change is needed.

Verification
- `bun run typecheck`: pass
- `bun run lint`: pass
- `bun run i18n:sync`: 0 missing / 0 extras across
  en / zh / fr / ja / ru / vi

---------

Co-authored-by: Seefs <40468931+seefs001@users.noreply.github.com>
Co-authored-by: Seefs <i@seefs.me>
Co-authored-by: feitianbubu <feitianbubu@qq.com>
Co-authored-by: Calcium-Ion <i@caion.me>
Co-authored-by: Xyfacai <xyfacai@gmail.com>
Co-authored-by: xiangsx <1984871009@qq.com>
Co-authored-by: 郑伯涛 <351175318@qq.com>
Co-authored-by: RedwindA <austinaosid@gmail.com>
Co-authored-by: dean <1006393151@qq.com>
Co-authored-by: QuentinHsu <xuquentinyang@gmail.com>
Co-authored-by: Bliod <bliod@bliod.lan>
Co-authored-by: Apple\Apple <zeraturing@foxmail.com>

web/default/src/components/layout/components/app-header.tsx

@@ -0,0 +1,133 @@
+import { useNotifications } from '@/hooks/use-notifications'
+import { useTopNavLinks } from '@/hooks/use-top-nav-links'
+import { ConfigDrawer } from '@/components/config-drawer'
+import { LanguageSwitcher } from '@/components/language-switcher'
+import { NotificationButton } from '@/components/notification-button'
+import { NotificationDialog } from '@/components/notification-dialog'
+import { ProfileDropdown } from '@/components/profile-dropdown'
+import { Search } from '@/components/search'
+import { defaultTopNavLinks } from '../config/top-nav.config'
+import { type TopNavLink } from '../types'
+import { Header } from './header'
+import { TopNav } from './top-nav'
+
+/**
+ * General application Header component
+ * Integrates navigation bar, search, configuration and profile functions
+ *
+ * @example
+ * // Basic usage
+ * <AppHeader />
+ *
+ * @example
+ * // Custom navigation links
+ * <AppHeader navLinks={customLinks} />
+ *
+ * @example
+ * // Hide navigation bar and search box
+ * <AppHeader showTopNav={false} showSearch={false} />
+ *
+ * @example
+ * // Fully customize left and right content
+ * <AppHeader
+ *   leftContent={<CustomLeft />}
+ *   rightContent={<CustomRight />}
+ * />
+ */
+type AppHeaderProps = {
+  /**
+   * Custom navigation links, uses default global navigation or dynamically generated from backend if not provided
+   */
+  navLinks?: TopNavLink[]
+  /**
+   * Whether to show top navigation bar
+   * @default true
+   */
+  showTopNav?: boolean
+  /**
+   * Left content, overrides TopNav if provided
+   */
+  leftContent?: React.ReactNode
+  /**
+   * Whether to show search box
+   * @default true
+   */
+  showSearch?: boolean
+  /**
+   * Custom right content, overrides default right content if provided
+   */
+  rightContent?: React.ReactNode
+  /**
+   * Whether to show notification button
+   * @default true
+   */
+  showNotifications?: boolean
+  /**
+   * Whether to show config drawer
+   * @default true
+   */
+  showConfigDrawer?: boolean
+  /**
+   * Whether to show profile dropdown
+   * @default true
+   */
+  showProfileDropdown?: boolean
+}
+
+export function AppHeader({
+  navLinks = defaultTopNavLinks,
+  showTopNav = true,
+  leftContent,
+  showSearch = true,
+  rightContent,
+  showNotifications = true,
+  showConfigDrawer = true,
+  showProfileDropdown = true,
+}: AppHeaderProps) {
+  // Prioritize dynamically generated links from backend
+  const dynamicLinks = useTopNavLinks()
+  const links = dynamicLinks.length > 0 ? dynamicLinks : navLinks
+
+  // Notifications hook
+  const notifications = useNotifications()
+
+  // Determine left content: custom content > navigation bar > null
+  const leftSection =
+    leftContent || (showTopNav ? <TopNav links={links} /> : null)
+
+  return (
+    <>
+      <Header>
+        {leftSection}
+        {rightContent ?? (
+          <div className='ms-auto flex items-center space-x-4'>
+            {showSearch && <Search />}
+            {showNotifications && (
+              <NotificationButton
+                unreadCount={notifications.unreadCount}
+                onClick={() => notifications.openDialog()}
+              />
+            )}
+            <LanguageSwitcher />
+            {showConfigDrawer && <ConfigDrawer />}
+            {showProfileDropdown && <ProfileDropdown />}
+          </div>
+        )}
+      </Header>
+
+      {/* Notification Dialog */}
+      {showNotifications && (
+        <NotificationDialog
+          open={notifications.dialogOpen}
+          onOpenChange={notifications.setDialogOpen}
+          activeTab={notifications.activeTab}
+          onTabChange={notifications.setActiveTab}
+          notice={notifications.notice}
+          announcements={notifications.announcements}
+          loading={notifications.loading}
+          onCloseToday={notifications.closeToday}
+        />
+      )}
+    </>
+  )
+}

web/default/src/components/layout/components/app-sidebar.tsx

@@ -0,0 +1,66 @@
+import { useMemo } from 'react'
+import { useLocation } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { useAuthStore } from '@/stores/auth-store'
+import { ROLE } from '@/lib/roles'
+import { useLayout } from '@/context/layout-provider'
+import { useSidebarConfig } from '@/hooks/use-sidebar-config'
+import { useSidebarData } from '@/hooks/use-sidebar-data'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarRail,
+} from '@/components/ui/sidebar'
+import { getNavGroupsForPath } from '../lib/workspace-registry'
+import { NavGroup } from './nav-group'
+import { WorkspaceSwitcher } from './workspace-switcher'
+
+/**
+ * Application sidebar component
+ * Fetches corresponding navigation menu from workspace registry based on current path
+ * Dynamically filters navigation items based on backend SidebarModulesAdmin configuration
+ *
+ * Automatically matches workspace configuration for current path through workspace registry system
+ * Adding new workspaces only requires registration in workspace-registry.ts
+ */
+export function AppSidebar() {
+  const { t } = useTranslation()
+  const { collapsible, variant } = useLayout()
+  const { pathname } = useLocation()
+  const userRole = useAuthStore((state) => state.auth.user?.role)
+  const sidebarData = useSidebarData()
+
+  // Get navigation group configuration corresponding to current path from workspace registry
+  const allNavGroups = getNavGroupsForPath(pathname, t) || sidebarData.navGroups
+
+  // Filter sidebar navigation items based on backend configuration
+  const configFilteredNavGroups = useSidebarConfig(allNavGroups)
+
+  // Filter navigation groups based on user role
+  // Non-Admin users cannot see Admin navigation group
+  const currentNavGroups = useMemo(() => {
+    const isAdmin = userRole && userRole >= ROLE.ADMIN
+    return configFilteredNavGroups.filter((group) => {
+      if (group.id === 'admin') {
+        return isAdmin
+      }
+      return true
+    })
+  }, [configFilteredNavGroups, userRole])
+
+  return (
+    <Sidebar collapsible={collapsible} variant={variant}>
+      <SidebarHeader>
+        <WorkspaceSwitcher workspaces={sidebarData.workspaces} />
+      </SidebarHeader>
+      <SidebarContent>
+        {currentNavGroups.map((props) => {
+          const key = props.id || props.title
+          return <NavGroup key={key} {...props} />
+        })}
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  )
+}

web/default/src/components/layout/components/authenticated-layout.tsx

@@ -0,0 +1,39 @@
+import { getCookie } from '@/lib/cookies'
+import { cn } from '@/lib/utils'
+import { LayoutProvider } from '@/context/layout-provider'
+import { SearchProvider } from '@/context/search-provider'
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
+import { AnimatedOutlet } from '@/components/page-transition'
+import { SkipToMain } from '@/components/skip-to-main'
+import { WorkspaceProvider } from '../context/workspace-context'
+import { AppSidebar } from './app-sidebar'
+
+type AuthenticatedLayoutProps = {
+  children?: React.ReactNode
+}
+
+export function AuthenticatedLayout(props: AuthenticatedLayoutProps) {
+  const defaultOpen = getCookie('sidebar_state') !== 'false'
+
+  return (
+    <LayoutProvider>
+      <SearchProvider>
+        <WorkspaceProvider>
+          <SidebarProvider defaultOpen={defaultOpen}>
+            <SkipToMain />
+            <AppSidebar />
+            <SidebarInset
+              className={cn(
+                '@container/content',
+                'h-svh',
+                'peer-data-[variant=inset]:h-[calc(100svh-(var(--spacing)*4))]'
+              )}
+            >
+              {props.children ?? <AnimatedOutlet />}
+            </SidebarInset>
+          </SidebarProvider>
+        </WorkspaceProvider>
+      </SearchProvider>
+    </LayoutProvider>
+  )
+}

web/default/src/components/layout/components/chat-presets-item.tsx

@@ -0,0 +1,257 @@
+import { useMemo, useCallback } from 'react'
+import { Link, useLocation } from '@tanstack/react-router'
+import { ExternalLink, Loader2, ChevronRight } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar,
+} from '@/components/ui/sidebar'
+import { useActiveChatKey } from '@/features/chat/hooks/use-active-chat-key'
+import { useChatPresets } from '@/features/chat/hooks/use-chat-presets'
+import { resolveChatUrl, type ChatPreset } from '@/features/chat/lib/chat-links'
+import { normalizeHref } from '../lib/url-utils'
+import type { NavChatPresets } from '../types'
+
+/**
+ * Check if a preset requires an API key
+ */
+function requiresApiKey(preset: ChatPreset): boolean {
+  return preset.url.includes('{key}') || preset.url.includes('{cherryConfig}')
+}
+
+/**
+ * Sub-menu item for a single chat preset
+ */
+function ChatMenuItem({
+  preset,
+  active,
+  onOpen,
+  onNavigate,
+}: {
+  preset: ChatPreset
+  active: boolean
+  onOpen: (preset: ChatPreset) => void
+  onNavigate: () => void
+}) {
+  if (preset.type === 'web') {
+    return (
+      <SidebarMenuSubItem>
+        <SidebarMenuSubButton asChild isActive={active}>
+          <Link
+            to='/chat/$chatId'
+            params={{ chatId: preset.id }}
+            onClick={onNavigate}
+          >
+            <span>{preset.name}</span>
+          </Link>
+        </SidebarMenuSubButton>
+      </SidebarMenuSubItem>
+    )
+  }
+
+  return (
+    <SidebarMenuSubItem>
+      <SidebarMenuSubButton
+        onClick={() => onOpen(preset)}
+        isActive={false}
+        className='justify-between'
+      >
+        <span>{preset.name}</span>
+        <ExternalLink className='h-4 w-4' />
+      </SidebarMenuSubButton>
+    </SidebarMenuSubItem>
+  )
+}
+
+/**
+ * Dropdown menu item for a single chat preset
+ */
+function DropdownPresetItem({
+  preset,
+  onOpen,
+}: {
+  preset: ChatPreset
+  onOpen: (preset: ChatPreset) => void
+}) {
+  if (preset.type === 'web') {
+    return (
+      <DropdownMenuItem asChild>
+        <Link to='/chat/$chatId' params={{ chatId: preset.id }}>
+          {preset.name}
+        </Link>
+      </DropdownMenuItem>
+    )
+  }
+
+  return (
+    <DropdownMenuItem onClick={() => onOpen(preset)}>
+      {preset.name}
+      <ExternalLink className='ml-auto h-4 w-4 opacity-70' />
+    </DropdownMenuItem>
+  )
+}
+
+/**
+ * Dynamic chat presets navigation item
+ */
+export function ChatPresetsItem({ item }: { item: NavChatPresets }) {
+  const { t } = useTranslation()
+  const { chatPresets, serverAddress } = useChatPresets()
+  const { state, isMobile, setOpenMobile } = useSidebar()
+  const href = useLocation({ select: (location) => location.href })
+  const loadingMessage = t('Preparing chat keys…')
+
+  const visiblePresets = useMemo(
+    () => chatPresets.filter((preset) => preset.type !== 'fluent'),
+    [chatPresets]
+  )
+
+  const hasKeyDependentPresets = useMemo(
+    () => visiblePresets.some(requiresApiKey),
+    [visiblePresets]
+  )
+
+  const {
+    data: activeKey,
+    isPending: isKeyPending,
+    error: keyError,
+  } = useActiveChatKey(hasKeyDependentPresets)
+
+  const handleOpenExternal = useCallback(
+    (preset: ChatPreset) => {
+      if (preset.type === 'web') return
+
+      const needsKey = requiresApiKey(preset)
+
+      if (needsKey && isKeyPending) {
+        toast.info(t('Preparing your chat link, please try again in a moment.'))
+        return
+      }
+
+      if (needsKey && !activeKey) {
+        const message =
+          keyError instanceof Error
+            ? keyError.message
+            : t(
+                'Unable to prepare chat link. Please ensure you have an enabled API key.'
+              )
+        toast.error(message)
+        return
+      }
+
+      const url = resolveChatUrl({
+        template: preset.url,
+        apiKey: needsKey ? activeKey : undefined,
+        serverAddress,
+      })
+
+      if (!url) {
+        toast.error(t('Invalid chat link. Please contact the administrator.'))
+        return
+      }
+
+      if (typeof window === 'undefined') return
+
+      window.open(url, '_blank', 'noopener')
+      setOpenMobile(false)
+    },
+    [activeKey, isKeyPending, keyError, serverAddress, setOpenMobile, t]
+  )
+
+  const normalizedHref = normalizeHref(href)
+
+  // Don't render if no visible presets
+  if (visiblePresets.length === 0) {
+    return null
+  }
+
+  // Collapsed state on non-mobile - render dropdown menu
+  if (state === 'collapsed' && !isMobile) {
+    return (
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton tooltip={item.title}>
+              {item.icon && <item.icon className='h-4 w-4' />}
+              <span>{item.title}</span>
+              <ChevronRight className='ms-auto h-4 w-4 opacity-70' />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align='start'>
+            {visiblePresets.map((preset) => (
+              <DropdownPresetItem
+                key={preset.id}
+                preset={preset}
+                onOpen={handleOpenExternal}
+              />
+            ))}
+            {hasKeyDependentPresets && <DropdownMenuSeparator />}
+            {hasKeyDependentPresets && isKeyPending && (
+              <DropdownMenuItem disabled>
+                <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+                {loadingMessage}
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    )
+  }
+
+  // Expanded state - render collapsible menu
+  return (
+    <Collapsible
+      asChild
+      defaultOpen={normalizedHref.startsWith('/chat')}
+      className='group/collapsible'
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton>
+            {item.icon && <item.icon />}
+            <span>{item.title}</span>
+            <ChevronRight className='ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90' />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent className='CollapsibleContent'>
+          <SidebarMenuSub>
+            {visiblePresets.map((preset) => (
+              <ChatMenuItem
+                key={preset.id}
+                preset={preset}
+                active={normalizedHref === `/chat/${preset.id}`}
+                onOpen={handleOpenExternal}
+                onNavigate={() => setOpenMobile(false)}
+              />
+            ))}
+            {hasKeyDependentPresets && isKeyPending && (
+              <SidebarMenuSubItem>
+                <SidebarMenuSubButton aria-disabled='true' tabIndex={-1}>
+                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+                  {loadingMessage}
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            )}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  )
+}

web/default/src/components/layout/components/footer.tsx

@@ -0,0 +1,202 @@
+import { useMemo } from 'react'
+import { Link } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import { useSystemConfig } from '@/hooks/use-system-config'
+
+interface FooterLink {
+  text: string
+  href: string
+}
+
+interface FooterColumnProps {
+  title: string
+  links: FooterLink[]
+}
+
+interface FooterProps {
+  logo?: string
+  name?: string
+  columns?: FooterColumnProps[]
+  copyright?: string
+  className?: string
+}
+
+function FooterLinkItem(props: { link: FooterLink }) {
+  const { t } = useTranslation()
+  const isExternal = props.link.href.startsWith('http')
+  const label = t(props.link.text)
+
+  if (isExternal) {
+    return (
+      <a
+        href={props.link.href}
+        target='_blank'
+        rel='noopener noreferrer'
+        className='text-muted-foreground hover:text-foreground text-sm transition-colors duration-200'
+      >
+        {label}
+      </a>
+    )
+  }
+
+  return (
+    <Link
+      to={props.link.href}
+      className='text-muted-foreground hover:text-foreground text-sm transition-colors duration-200'
+    >
+      {label}
+    </Link>
+  )
+}
+
+export function Footer(props: FooterProps) {
+  const { t } = useTranslation()
+  const {
+    systemName,
+    logo: systemLogo,
+    footerHtml,
+    demoSiteEnabled,
+  } = useSystemConfig()
+
+  const displayLogo = systemLogo || props.logo || '/logo.png'
+  const displayName = systemName || props.name || 'New API'
+  const isDemoSiteMode = Boolean(demoSiteEnabled)
+  const currentYear = new Date().getFullYear()
+
+  const fallbackColumns = useMemo<FooterColumnProps[]>(
+    () => [
+      {
+        title: t('footer.columns.about.title'),
+        links: [
+          {
+            text: t('footer.columns.about.links.aboutProject'),
+            href: 'https://docs.newapi.pro/wiki/project-introduction/',
+          },
+          {
+            text: t('footer.columns.about.links.contact'),
+            href: 'https://docs.newapi.pro/support/community-interaction/',
+          },
+          {
+            text: t('footer.columns.about.links.features'),
+            href: 'https://docs.newapi.pro/wiki/features-introduction/',
+          },
+        ],
+      },
+      {
+        title: t('footer.columns.docs.title'),
+        links: [
+          {
+            text: t('footer.columns.docs.links.quickStart'),
+            href: 'https://docs.newapi.pro/getting-started/',
+          },
+          {
+            text: t('footer.columns.docs.links.installation'),
+            href: 'https://docs.newapi.pro/installation/',
+          },
+          {
+            text: t('footer.columns.docs.links.apiDocs'),
+            href: 'https://docs.newapi.pro/api/',
+          },
+        ],
+      },
+      {
+        title: t('footer.columns.related.title'),
+        links: [
+          {
+            text: t('footer.columns.related.links.oneApi'),
+            href: 'https://github.com/songquanpeng/one-api',
+          },
+          {
+            text: t('footer.columns.related.links.midjourney'),
+            href: 'https://github.com/novicezk/midjourney-proxy',
+          },
+          {
+            text: t('footer.columns.related.links.neko'),
+            href: 'https://github.com/Calcium-Ion/neko-api-key-tool',
+          },
+        ],
+      },
+    ],
+    [t]
+  )
+
+  const displayColumns = props.columns ?? fallbackColumns
+
+  if (footerHtml) {
+    return (
+      <div
+        className='custom-footer w-full'
+        dangerouslySetInnerHTML={{ __html: footerHtml }}
+      />
+    )
+  }
+
+  return (
+    <footer
+      className={cn('border-border/40 relative z-10 border-t', props.className)}
+    >
+      <div className='mx-auto max-w-6xl px-6 py-12 md:py-16'>
+        <div className='flex flex-col justify-between gap-10 md:flex-row md:gap-16'>
+          {/* Brand column */}
+          <div className='shrink-0'>
+            <Link to='/' className='group flex items-center gap-2.5'>
+              <img
+                src={displayLogo}
+                alt={displayName}
+                className='size-7 rounded-lg object-contain'
+              />
+              <span className='text-sm font-semibold tracking-tight'>
+                {displayName}
+              </span>
+            </Link>
+            <p className='text-muted-foreground/60 mt-3 max-w-[200px] text-xs leading-relaxed'>
+              {t('Powerful API Management Platform')}
+            </p>
+          </div>
+
+          {/* Links columns */}
+          {isDemoSiteMode && (
+            <div className='grid grid-cols-3 gap-8 md:gap-16'>
+              {displayColumns.map((column, index) => (
+                <div key={index}>
+                  <p className='text-muted-foreground/50 mb-3 text-xs font-medium tracking-wider uppercase'>
+                    {t(column.title)}
+                  </p>
+                  <ul className='space-y-2.5'>
+                    {column.links.map((link, linkIndex) => (
+                      <li key={linkIndex}>
+                        <FooterLinkItem link={link} />
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Bottom section */}
+        <div className='border-border/30 mt-12 flex flex-col items-center justify-between gap-3 border-t pt-6 sm:flex-row'>
+          <p className='text-muted-foreground/40 text-xs'>
+            &copy; {currentYear} {displayName}.{' '}
+            {props.copyright ?? t('footer.defaultCopyright')}
+          </p>
+          <div className='flex items-center gap-2'>
+            <span className='text-muted-foreground/40 text-xs'>
+              {t('Designed and Developed by')}{' '}
+            </span>
+            <a
+              href='https://github.com/QuantumNous/new-api'
+              target='_blank'
+              rel='noopener noreferrer'
+              className='text-primary text-xs font-medium hover:underline'
+            >
+              {t('New API')}
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

web/default/src/components/layout/components/glow.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const glowVariants = cva('absolute w-full', {
+  variants: {
+    variant: {
+      top: 'top-0',
+      above: '-top-[128px]',
+      bottom: 'bottom-0',
+      below: '-bottom-[128px]',
+      center: 'top-[50%]',
+    },
+  },
+  defaultVariants: {
+    variant: 'top',
+  },
+})
+
+export interface GlowProps
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof glowVariants> {}
+
+export function Glow({ className, variant, ...props }: GlowProps) {
+  return (
+    <div
+      data-slot='glow'
+      className={cn(glowVariants({ variant }), className)}
+      {...props}
+    >
+      <div
+        className={cn(
+          'absolute left-1/2 h-[256px] w-[60%] -translate-x-1/2 scale-[2.5] rounded-[50%] bg-radial from-amber-500/60 from-10% to-amber-500/0 to-60% opacity-40 sm:h-[512px] dark:opacity-80',
+          variant === 'center' && '-translate-y-1/2'
+        )}
+      />
+      <div
+        className={cn(
+          'absolute left-1/2 h-[128px] w-[40%] -translate-x-1/2 scale-200 rounded-[50%] bg-radial from-yellow-400/50 from-10% to-yellow-400/0 to-60% opacity-30 sm:h-[256px] dark:opacity-70',
+          variant === 'center' && '-translate-y-1/2'
+        )}
+      />
+    </div>
+  )
+}

web/default/src/components/layout/components/header-logo.tsx

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils'
+
+interface HeaderLogoProps {
+  src: string
+  alt?: string
+  loading: boolean
+  logoLoaded: boolean
+  className?: string
+}
+
+/**
+ * Logo component for header with loading state
+ * Shows image only when fully loaded for smooth UX
+ */
+export function HeaderLogo({
+  src,
+  alt = 'logo',
+  loading,
+  logoLoaded,
+  className,
+}: HeaderLogoProps) {
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={cn(
+        'h-6 w-6 rounded-full transition-opacity duration-200',
+        !loading && logoLoaded ? 'opacity-100' : 'opacity-0',
+        className
+      )}
+    />
+  )
+}

web/default/src/components/layout/components/header.tsx

@@ -0,0 +1,20 @@
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+import { SidebarTrigger } from '@/components/ui/sidebar'
+
+type HeaderProps = React.HTMLAttributes<HTMLElement>
+
+export function Header({ className, children, ...props }: HeaderProps) {
+  return (
+    <header
+      className={cn('bg-background z-50 h-16 shrink-0 border-b', className)}
+      {...props}
+    >
+      <div className='flex h-full items-center gap-3 p-4 sm:gap-4'>
+        <SidebarTrigger variant='outline' />
+        <Separator orientation='vertical' className='h-6' />
+        {children}
+      </div>
+    </header>
+  )
+}

web/default/src/components/layout/components/logo.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+
+export interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {
+  image: React.ComponentType<React.SVGProps<SVGSVGElement>>
+  name: string
+  version?: string
+  width?: number
+  height?: number
+  showName?: boolean
+  badge?: string
+}
+
+export function Logo({
+  className,
+  image: SvgImage,
+  name,
+  version,
+  width = 24,
+  height = 24,
+  showName = true,
+  badge,
+  ...props
+}: LogoProps) {
+  return (
+    <div
+      data-slot='logo'
+      className={cn('flex items-center gap-2 text-sm font-medium', className)}
+      {...props}
+    >
+      <SvgImage
+        width={width}
+        height={height}
+        aria-hidden='true'
+        className='max-h-full max-w-full opacity-70'
+      />
+      <span className={cn(!showName && 'sr-only')}>{name}</span>
+      {version && <span className='text-muted-foreground'>{version}</span>}
+      {badge && <Badge variant='secondary'>{badge}</Badge>}
+    </div>
+  )
+}

web/default/src/components/layout/components/main.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@/lib/utils'
+
+type MainProps = React.HTMLAttributes<HTMLElement> & {
+  fluid?: boolean
+}
+
+export function Main({ className, fluid = true, ...props }: MainProps) {
+  return (
+    <main
+      className={cn(
+        'flex min-h-0 flex-1 flex-col overflow-hidden',
+        !fluid &&
+          '@7xl/content:mx-auto @7xl/content:w-full @7xl/content:max-w-7xl',
+        className
+      )}
+      {...props}
+    />
+  )
+}

web/default/src/components/layout/components/mobile-drawer.tsx

@@ -0,0 +1,273 @@
+import { Link } from '@tanstack/react-router'
+import { X, User, Wallet, LogOut } from 'lucide-react'
+import { AnimatePresence, motion, type Variants } from 'motion/react'
+import { useTranslation } from 'react-i18next'
+import type { AuthUser } from '@/stores/auth-store'
+import useDialogState from '@/hooks/use-dialog'
+import { useUserDisplay } from '@/hooks/use-user-display'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { SignOutDialog } from '@/components/sign-out-dialog'
+import { MOBILE_DRAWER_ANIMATION, MOBILE_DRAWER_CONFIG } from '../constants'
+import type { TopNavLink } from '../types'
+
+/**
+ * Brand logo component with skeleton loading
+ */
+interface BrandLogoProps {
+  homeUrl: string
+  displayLogo: React.ReactNode
+  displaySiteName: string
+  loading: boolean
+  logoLoaded: boolean
+  onClick?: () => void
+}
+
+function BrandLogo({
+  homeUrl,
+  displayLogo,
+  displaySiteName,
+  loading,
+  logoLoaded,
+  onClick,
+}: BrandLogoProps) {
+  return (
+    <Link
+      to={homeUrl}
+      className='flex items-center gap-2 text-xl font-bold'
+      onClick={onClick}
+    >
+      <div className='relative h-6 w-6'>
+        {loading || !logoLoaded ? (
+          <Skeleton className='absolute inset-0 rounded-full' />
+        ) : null}
+        {displayLogo}
+      </div>
+      {loading ? <Skeleton className='h-5 w-20' /> : displaySiteName}
+    </Link>
+  )
+}
+
+/**
+ * Mobile user profile section with navigation links
+ */
+interface MobileUserProfileProps {
+  user: AuthUser | null
+  onNavigate?: () => void
+}
+
+function MobileUserProfile({ user, onNavigate }: MobileUserProfileProps) {
+  const { t } = useTranslation()
+  const [signOutOpen, setSignOutOpen] = useDialogState()
+  const { displayName, initials, roleLabel } = useUserDisplay(user)
+
+  if (!user) return null
+
+  return (
+    <>
+      {/* User info section - compact style matching navigation */}
+      <div className='flex flex-col text-sm'>
+        {/* User header - simplified */}
+        <div className='border-border flex items-center gap-2.5 border-b p-2.5'>
+          <Avatar className='size-9'>
+            <AvatarImage src='/avatars/01.png' alt={`@${displayName}`} />
+            <AvatarFallback className='text-xs'>{initials}</AvatarFallback>
+          </Avatar>
+          <div className='flex flex-1 flex-col gap-0.5 overflow-hidden'>
+            <p className='text-foreground truncate font-medium'>
+              {displayName}
+            </p>
+            <div className='flex items-center gap-1.5'>
+              <span className='text-muted-foreground text-xs'>{roleLabel}</span>
+              {user.group && (
+                <>
+                  <span className='text-muted-foreground text-xs'>·</span>
+                  <span className='text-muted-foreground text-xs'>
+                    {String(user.group)}
+                  </span>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Navigation links - same style as top nav */}
+        <Link
+          to='/profile'
+          onClick={onNavigate}
+          className='text-primary/60 hover:text-primary/80 border-border flex items-center gap-2.5 border-b p-2.5 transition-colors'
+        >
+          <User className='size-4' />
+          {t('Profile')}
+        </Link>
+
+        <Link
+          to='/wallet'
+          onClick={onNavigate}
+          className='text-primary/60 hover:text-primary/80 border-border flex items-center gap-2.5 border-b p-2.5 transition-colors'
+        >
+          <Wallet className='size-4' />
+          {t('Wallet')}
+        </Link>
+
+        {/* Sign out - consistent style */}
+        <Button
+          variant='ghost'
+          onClick={() => setSignOutOpen(true)}
+          className='text-destructive hover:text-destructive/80 h-auto w-full justify-start gap-2.5 p-2.5 hover:bg-transparent'
+        >
+          <LogOut className='size-4' />
+          {t('Sign out')}
+        </Button>
+      </div>
+
+      <SignOutDialog open={!!signOutOpen} onOpenChange={setSignOutOpen} />
+    </>
+  )
+}
+
+/**
+ * Mobile sign in button for unauthenticated users
+ */
+interface MobileSignInButtonProps {
+  onNavigate?: () => void
+}
+
+function MobileSignInButton({ onNavigate }: MobileSignInButtonProps) {
+  const { t } = useTranslation()
+  return (
+    <Button variant='secondary' size='sm' asChild className='h-10 w-full'>
+      <Link to='/sign-in' onClick={onNavigate}>
+        {t('Sign in')}
+      </Link>
+    </Button>
+  )
+}
+
+/**
+ * Mobile drawer component props
+ */
+export interface MobileDrawerProps {
+  isOpen: boolean
+  onClose: () => void
+  homeUrl: string
+  displayLogo: React.ReactNode
+  displaySiteName: string
+  loading: boolean
+  logoLoaded: boolean
+  mobileLinksList: TopNavLink[]
+  showAuthButtons: boolean
+  user: AuthUser | null
+}
+
+/**
+ * Mobile drawer component with bottom slide-up animation
+ * Displays navigation links and user profile section
+ */
+export function MobileDrawer({
+  isOpen,
+  onClose,
+  homeUrl,
+  displayLogo,
+  displaySiteName,
+  loading,
+  logoLoaded,
+  mobileLinksList,
+  showAuthButtons,
+  user,
+}: MobileDrawerProps) {
+  const { t } = useTranslation()
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* Overlay */}
+          <motion.div
+            className={MOBILE_DRAWER_CONFIG.overlayClassName}
+            initial='hidden'
+            animate='visible'
+            exit='exit'
+            variants={MOBILE_DRAWER_ANIMATION.overlay as Variants}
+            transition={{
+              duration: MOBILE_DRAWER_CONFIG.overlayTransitionDuration,
+            }}
+            onClick={onClose}
+          />
+
+          {/* Drawer Content */}
+          <motion.div
+            className={MOBILE_DRAWER_CONFIG.drawerClassName}
+            initial='hidden'
+            animate='visible'
+            exit='exit'
+            variants={MOBILE_DRAWER_ANIMATION.drawer as Variants}
+          >
+            <div className='flex flex-col gap-4'>
+              {/* Header with logo and close button */}
+              <div className='flex items-center justify-between'>
+                <BrandLogo
+                  homeUrl={homeUrl}
+                  displayLogo={displayLogo}
+                  displaySiteName={displaySiteName}
+                  loading={loading}
+                  logoLoaded={logoLoaded}
+                  onClick={onClose}
+                />
+                <Button
+                  variant='ghost'
+                  size='icon-sm'
+                  onClick={onClose}
+                  className='hover:text-primary cursor-pointer'
+                  aria-label={t('Close menu')}
+                >
+                  <X className='size-5' />
+                </Button>
+              </div>
+
+              {/* Navigation links */}
+              <motion.div
+                className='border-border mb-4 flex flex-col rounded-md border text-sm'
+                variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }}
+              >
+                {loading ? (
+                  <div className='flex flex-col gap-1 p-2'>
+                    {Array.from({ length: 4 }, (_, i) => (
+                      <Skeleton key={i} className='h-8 w-full' />
+                    ))}
+                  </div>
+                ) : (
+                  <AnimatePresence>
+                    {mobileLinksList.map((link, index) => (
+                      <motion.div
+                        key={`${link.href}-${index}`}
+                        className='border-border border-b p-2.5 last:border-b-0'
+                        variants={MOBILE_DRAWER_ANIMATION.menuItem as Variants}
+                      >
+                        <Link
+                          to={link.href}
+                          className='text-primary/60 hover:text-primary/80 transition-colors'
+                          onClick={onClose}
+                        >
+                          {link.title}
+                        </Link>
+                      </motion.div>
+                    ))}
+                  </AnimatePresence>
+                )}
+              </motion.div>
+
+              {/* User profile section */}
+              {showAuthButtons &&
+                (user ? (
+                  <MobileUserProfile user={user} onNavigate={onClose} />
+                ) : (
+                  <MobileSignInButton onNavigate={onClose} />
+                ))}
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  )
+}

web/default/src/components/layout/components/mockup.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const mockupVariants = cva(
+  'flex relative z-10 overflow-hidden shadow-2xl border border-border/70 dark:border-border/5 dark:border-t-border/15',
+  {
+    variants: {
+      type: {
+        mobile: 'rounded-[48px] max-w-[350px]',
+        responsive: 'rounded-md',
+      },
+    },
+    defaultVariants: {
+      type: 'responsive',
+    },
+  }
+)
+
+export interface MockupProps
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof mockupVariants> {}
+
+export function Mockup({ className, type, ...props }: MockupProps) {
+  return (
+    <div
+      data-slot='mockup'
+      className={cn(mockupVariants({ type, className }))}
+      {...props}
+    />
+  )
+}
+
+const frameVariants = cva(
+  'bg-border/50 flex relative z-10 overflow-hidden rounded-2xl dark:bg-border/10',
+  {
+    variants: {
+      size: {
+        small: 'p-2',
+        large: 'p-4',
+      },
+    },
+    defaultVariants: {
+      size: 'small',
+    },
+  }
+)
+
+export interface MockupFrameProps
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof frameVariants> {}
+
+export function MockupFrame({ className, size, ...props }: MockupFrameProps) {
+  return (
+    <div
+      data-slot='mockup-frame'
+      className={cn(frameVariants({ size, className }))}
+      {...props}
+    />
+  )
+}

web/default/src/components/layout/components/nav-group.tsx

@@ -0,0 +1,229 @@
+import { type ReactNode, useState, useEffect } from 'react'
+import { Link, useLocation } from '@tanstack/react-router'
+import { ChevronRight } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar,
+} from '@/components/ui/sidebar'
+import { checkIsActive } from '../lib/url-utils'
+import {
+  type NavCollapsible,
+  type NavChatPresets,
+  type NavLink,
+  type NavGroup as NavGroupProps,
+} from '../types'
+import { ChatPresetsItem } from './chat-presets-item'
+
+/**
+ * Sidebar navigation group component
+ * Renders a group of navigation items, supporting regular links and collapsible submenus
+ */
+export function NavGroup({ title, items }: NavGroupProps) {
+  const { state, isMobile } = useSidebar()
+  const href = useLocation({ select: (location) => location.href })
+
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>{title}</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => {
+          const key = `${item.title}-${item.url || item.type}`
+
+          // Special handling: dynamic chat presets list
+          if (item.type === 'chat-presets') {
+            return <ChatPresetsItem key={key} item={item as NavChatPresets} />
+          }
+
+          // If no sub-items, render regular link
+          if (!item.items) {
+            return (
+              <SidebarMenuLink key={key} item={item as NavLink} href={href} />
+            )
+          }
+
+          // In collapsed state on non-mobile, render dropdown menu
+          if (state === 'collapsed' && !isMobile) {
+            return (
+              <SidebarMenuCollapsedDropdown
+                key={key}
+                item={item as NavCollapsible}
+                href={href}
+              />
+            )
+          }
+
+          // Render collapsible menu
+          return (
+            <SidebarMenuCollapsible
+              key={key}
+              item={item as NavCollapsible}
+              href={href}
+            />
+          )
+        })}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
+
+/**
+ * Navigation badge component
+ */
+function NavBadge({ children }: { children: ReactNode }) {
+  return <Badge className='rounded-full px-1 py-0 text-xs'>{children}</Badge>
+}
+
+/**
+ * Sidebar menu link item
+ */
+function SidebarMenuLink({ item, href }: { item: NavLink; href: string }) {
+  const { setOpenMobile } = useSidebar()
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        asChild
+        isActive={checkIsActive(href, item)}
+        tooltip={item.title}
+      >
+        <Link to={item.url} onClick={() => setOpenMobile(false)}>
+          {item.icon && <item.icon />}
+          <span>{item.title}</span>
+          {item.badge && <NavBadge>{item.badge}</NavBadge>}
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  )
+}
+
+/**
+ * Sidebar collapsible menu item
+ */
+function SidebarMenuCollapsible({
+  item,
+  href,
+}: {
+  item: NavCollapsible
+  href: string
+}) {
+  const { setOpenMobile } = useSidebar()
+  // 检查当前路径是否匹配子菜单项
+  const isSubItemActive = checkIsActive(href, item)
+  // 使用受控状态，初始值基于当前路径是否匹配
+  const [isOpen, setIsOpen] = useState(() => isSubItemActive)
+
+  // 当路径变化时，如果匹配子菜单项，自动展开父级菜单
+  useEffect(() => {
+    if (isSubItemActive) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      setIsOpen(true)
+    }
+  }, [isSubItemActive])
+
+  return (
+    <Collapsible
+      asChild
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className='group/collapsible'
+    >
+      <SidebarMenuItem>
+        <CollapsibleTrigger asChild>
+          <SidebarMenuButton tooltip={item.title}>
+            {item.icon && <item.icon />}
+            <span>{item.title}</span>
+            {item.badge && <NavBadge>{item.badge}</NavBadge>}
+            <ChevronRight className='ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90' />
+          </SidebarMenuButton>
+        </CollapsibleTrigger>
+        <CollapsibleContent className='CollapsibleContent'>
+          <SidebarMenuSub>
+            {item.items.map((subItem) => (
+              <SidebarMenuSubItem key={subItem.title}>
+                <SidebarMenuSubButton
+                  asChild
+                  isActive={checkIsActive(href, subItem)}
+                >
+                  <Link to={subItem.url} onClick={() => setOpenMobile(false)}>
+                    {subItem.icon && <subItem.icon />}
+                    <span>{subItem.title}</span>
+                    {subItem.badge && <NavBadge>{subItem.badge}</NavBadge>}
+                  </Link>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            ))}
+          </SidebarMenuSub>
+        </CollapsibleContent>
+      </SidebarMenuItem>
+    </Collapsible>
+  )
+}
+
+/**
+ * Sidebar dropdown menu item when collapsed
+ */
+function SidebarMenuCollapsedDropdown({
+  item,
+  href,
+}: {
+  item: NavCollapsible
+  href: string
+}) {
+  return (
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <SidebarMenuButton
+            tooltip={item.title}
+            isActive={checkIsActive(href, item)}
+          >
+            {item.icon && <item.icon />}
+            <span>{item.title}</span>
+            {item.badge && <NavBadge>{item.badge}</NavBadge>}
+            <ChevronRight className='ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90' />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side='right' align='start' sideOffset={4}>
+          <DropdownMenuLabel>
+            {item.title} {item.badge ? `(${item.badge})` : ''}
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          {item.items.map((sub) => (
+            <DropdownMenuItem key={`${sub.title}-${sub.url}`} asChild>
+              <Link
+                to={sub.url}
+                className={`${checkIsActive(href, sub) ? 'bg-secondary' : ''}`}
+              >
+                {sub.icon && <sub.icon />}
+                <span className='max-w-52 text-wrap'>{sub.title}</span>
+                {sub.badge && (
+                  <span className='ms-auto text-xs'>{sub.badge}</span>
+                )}
+              </Link>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  )
+}

web/default/src/components/layout/components/nav-link-item.tsx

@@ -0,0 +1,68 @@
+import { Link } from '@tanstack/react-router'
+import { cn } from '@/lib/utils'
+import type { TopNavLink } from '../types'
+
+interface NavLinkItemProps {
+  link: TopNavLink
+  className?: string
+}
+
+/**
+ * Renders a single navigation link (internal or external)
+ * Handles routing and proper link attributes
+ */
+export function NavLinkItem({ link, className }: NavLinkItemProps) {
+  const linkClassName = cn(
+    'text-muted-foreground hover:text-foreground transition-colors',
+    link.disabled && 'pointer-events-none opacity-50',
+    className
+  )
+
+  if (link.external) {
+    return (
+      <a
+        href={link.href}
+        target='_blank'
+        rel='noopener noreferrer'
+        className={linkClassName}
+        aria-disabled={link.disabled}
+      >
+        {link.title}
+      </a>
+    )
+  }
+
+  return (
+    <Link to={link.href} className={linkClassName} disabled={link.disabled}>
+      {link.title}
+    </Link>
+  )
+}
+
+interface NavLinkListProps {
+  links: TopNavLink[]
+  className?: string
+  itemClassName?: string
+}
+
+/**
+ * Renders a list of navigation links
+ * Used in both desktop and mobile navigation
+ */
+export function NavLinkList({
+  links,
+  className,
+  itemClassName,
+}: NavLinkListProps) {
+  return (
+    <>
+      {links.map((link, index) => (
+        <NavLinkItem
+          key={index}
+          link={link}
+          className={cn(className, itemClassName)}
+        />
+      ))}
+    </>
+  )
+}

web/default/src/components/layout/components/navbar.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export function Navbar({ className, ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      data-slot='navbar'
+      className={cn('flex items-center justify-between py-4', className)}
+      {...props}
+    />
+  )
+}
+
+export function NavbarLeft({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='navbar-left'
+      className={cn('flex items-center justify-start gap-4', className)}
+      {...props}
+    />
+  )
+}
+
+export function NavbarRight({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='navbar-right'
+      className={cn('flex items-center justify-end gap-4', className)}
+      {...props}
+    />
+  )
+}
+
+export function NavbarCenter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='navbar-center'
+      className={cn('flex items-center justify-center gap-4', className)}
+      {...props}
+    />
+  )
+}

web/default/src/components/layout/components/page-footer.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+
+const PageFooterContext = createContext<HTMLDivElement | null>(null)
+
+type PageFooterProviderProps = {
+  container: HTMLDivElement | null
+  children: ReactNode
+}
+
+export function PageFooterProvider(props: PageFooterProviderProps) {
+  return (
+    <PageFooterContext.Provider value={props.container}>
+      {props.children}
+    </PageFooterContext.Provider>
+  )
+}
+
+export function PageFooterPortal(props: { children: ReactNode }) {
+  const container = useContext(PageFooterContext)
+  if (!container) return null
+  return createPortal(props.children, container)
+}

web/default/src/components/layout/components/public-header.tsx

@@ -0,0 +1,301 @@
+import { useState, useEffect } from 'react'
+import { Link, useRouterState } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { useAuthStore } from '@/stores/auth-store'
+import { cn } from '@/lib/utils'
+import { useNotifications } from '@/hooks/use-notifications'
+import { useSystemConfig } from '@/hooks/use-system-config'
+import { useTopNavLinks } from '@/hooks/use-top-nav-links'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { LanguageSwitcher } from '@/components/language-switcher'
+import { NotificationButton } from '@/components/notification-button'
+import { NotificationDialog } from '@/components/notification-dialog'
+import { ProfileDropdown } from '@/components/profile-dropdown'
+import { ThemeSwitch } from '@/components/theme-switch'
+import { defaultTopNavLinks } from '../config/top-nav.config'
+import type { TopNavLink } from '../types'
+import { HeaderLogo } from './header-logo'
+
+export interface PublicHeaderProps {
+  navLinks?: TopNavLink[]
+  mobileLinks?: TopNavLink[]
+  navContent?: React.ReactNode
+  showThemeSwitch?: boolean
+  showLanguageSwitcher?: boolean
+  logo?: React.ReactNode
+  siteName?: string
+  homeUrl?: string
+  leftContent?: React.ReactNode
+  rightContent?: React.ReactNode
+  showNavigation?: boolean
+  showAuthButtons?: boolean
+  showNotifications?: boolean
+  className?: string
+}
+
+export function PublicHeader(props: PublicHeaderProps) {
+  const {
+    navLinks = defaultTopNavLinks,
+    showThemeSwitch = true,
+    showLanguageSwitcher = true,
+    logo: customLogo,
+    siteName: customSiteName,
+    homeUrl = '/',
+    showAuthButtons = true,
+    showNotifications = true,
+  } = props
+
+  const { t } = useTranslation()
+  const [scrolled, setScrolled] = useState(false)
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const { auth } = useAuthStore()
+  const {
+    systemName,
+    logo: systemLogo,
+    loading,
+    logoLoaded,
+  } = useSystemConfig()
+  const dynamicLinks = useTopNavLinks()
+  const notifications = useNotifications()
+  const routerState = useRouterState()
+  const pathname = routerState.location.pathname
+
+  const user = auth.user
+  const isAuthenticated = !!user
+  const displaySiteName = customSiteName || systemName
+  const links = dynamicLinks.length > 0 ? dynamicLinks : navLinks
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 20)
+    onScroll()
+    window.addEventListener('scroll', onScroll, { passive: true })
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  useEffect(() => {
+    document.body.style.overflow = mobileOpen ? 'hidden' : ''
+    return () => {
+      document.body.style.overflow = ''
+    }
+  }, [mobileOpen])
+
+  return (
+    <>
+      <header className='pointer-events-none fixed inset-x-0 top-0 z-50'>
+        <div
+          className={cn(
+            'pointer-events-auto mx-auto transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]',
+            scrolled ? 'max-w-[52rem] px-3 pt-3' : 'max-w-7xl px-4 pt-0 md:px-6'
+          )}
+        >
+          <nav
+            className={cn(
+              'flex items-center justify-between transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]',
+              scrolled
+                ? 'bg-background/60 ring-border/50 h-12 rounded-2xl pr-1.5 pl-4 shadow-[0_2px_16px_-6px_rgba(0,0,0,0.08),0_0_0_0.5px_rgba(0,0,0,0.02)] ring-[0.5px] backdrop-blur-2xl dark:shadow-[0_2px_16px_-6px_rgba(0,0,0,0.4)]'
+                : 'h-16 px-2'
+            )}
+          >
+            {/* Logo */}
+            <Link
+              to={homeUrl}
+              className='group flex shrink-0 items-center gap-2.5'
+            >
+              <div className='flex size-7 shrink-0 items-center justify-center transition-all duration-300 group-hover:scale-105'>
+                {loading ? (
+                  <Skeleton className='size-full rounded-lg' />
+                ) : customLogo ? (
+                  customLogo
+                ) : (
+                  <HeaderLogo
+                    src={systemLogo}
+                    loading={loading}
+                    logoLoaded={logoLoaded}
+                    className='size-full rounded-lg object-contain'
+                  />
+                )}
+              </div>
+              <span className='text-sm font-semibold tracking-tight'>
+                {loading ? <Skeleton className='h-4 w-16' /> : displaySiteName}
+              </span>
+            </Link>
+
+            {/* Desktop nav */}
+            <div className='hidden items-center gap-0.5 sm:flex'>
+              {links.map((link, i) => {
+                const isActive = pathname === link.href
+                if (link.external) {
+                  return (
+                    <a
+                      key={i}
+                      href={link.href}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      className='text-muted-foreground hover:text-foreground rounded-lg px-3 py-1.5 text-[13px] font-medium transition-colors duration-200'
+                    >
+                      {t(link.title)}
+                    </a>
+                  )
+                }
+                return (
+                  <Link
+                    key={i}
+                    to={link.href}
+                    className={cn(
+                      'rounded-lg px-3 py-1.5 text-[13px] font-medium transition-colors duration-200',
+                      isActive
+                        ? 'text-foreground'
+                        : 'text-muted-foreground hover:text-foreground'
+                    )}
+                  >
+                    {t(link.title)}
+                  </Link>
+                )
+              })}
+
+              {(showLanguageSwitcher ||
+                showThemeSwitch ||
+                showNotifications) && (
+                <div className='bg-border/40 mx-2 h-4 w-px' />
+              )}
+
+              {showLanguageSwitcher && <LanguageSwitcher />}
+              {showThemeSwitch && <ThemeSwitch />}
+              {showNotifications && (
+                <NotificationButton
+                  unreadCount={notifications.unreadCount}
+                  onClick={() => notifications.openDialog()}
+                />
+              )}
+
+              {showAuthButtons && (
+                <>
+                  <div className='bg-border/40 mx-1 h-4 w-px' />
+                  {loading ? (
+                    <Skeleton className='h-8 w-20 rounded-lg' />
+                  ) : isAuthenticated ? (
+                    <ProfileDropdown />
+                  ) : (
+                    <Button
+                      size='sm'
+                      className='h-8 rounded-lg px-3.5 text-xs font-medium'
+                      asChild
+                    >
+                      <Link to='/sign-in'>{t('Sign in')}</Link>
+                    </Button>
+                  )}
+                </>
+              )}
+            </div>
+
+            {/* Mobile: compact actions + hamburger */}
+            <div className='flex items-center gap-2 sm:hidden'>
+              {showThemeSwitch && <ThemeSwitch />}
+              {showAuthButtons && !loading && isAuthenticated && (
+                <ProfileDropdown />
+              )}
+              <button
+                className='hover:bg-muted/40 flex size-9 items-center justify-center rounded-lg transition-colors'
+                onClick={() => setMobileOpen((v) => !v)}
+                aria-label={t('Toggle navigation menu')}
+              >
+                <div className='relative size-4'>
+                  <span
+                    className={cn(
+                      'absolute inset-x-0 block h-[1.5px] origin-center rounded-full bg-current transition-all duration-300',
+                      mobileOpen ? 'top-[7px] rotate-45' : 'top-[3px]'
+                    )}
+                  />
+                  <span
+                    className={cn(
+                      'absolute inset-x-0 top-[7px] block h-[1.5px] rounded-full bg-current transition-all duration-300',
+                      mobileOpen ? 'scale-x-0 opacity-0' : 'opacity-100'
+                    )}
+                  />
+                  <span
+                    className={cn(
+                      'absolute inset-x-0 block h-[1.5px] origin-center rounded-full bg-current transition-all duration-300',
+                      mobileOpen ? 'top-[7px] -rotate-45' : 'top-[11px]'
+                    )}
+                  />
+                </div>
+              </button>
+            </div>
+          </nav>
+        </div>
+      </header>
+
+      {/* Mobile full-screen overlay */}
+      <div
+        className={cn(
+          'bg-background/98 fixed inset-0 z-40 backdrop-blur-2xl transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] sm:pointer-events-none sm:hidden',
+          mobileOpen
+            ? 'pointer-events-auto opacity-100'
+            : 'pointer-events-none opacity-0'
+        )}
+      >
+        <div className='flex h-full flex-col justify-between px-8 pt-20 pb-10'>
+          <nav className='flex flex-col gap-1'>
+            {links.map((link, i) => {
+              const isActive = pathname === link.href
+              return (
+                <Link
+                  key={i}
+                  to={link.href}
+                  onClick={() => setMobileOpen(false)}
+                  className={cn(
+                    'flex items-center gap-3 py-3 text-base font-medium tracking-tight transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]',
+                    mobileOpen
+                      ? 'translate-y-0 opacity-100'
+                      : 'translate-y-4 opacity-0',
+                    isActive ? 'text-foreground' : 'text-muted-foreground'
+                  )}
+                  style={{
+                    transitionDelay: mobileOpen ? `${100 + i * 50}ms` : '0ms',
+                  }}
+                >
+                  {t(link.title)}
+                </Link>
+              )
+            })}
+          </nav>
+
+          <div
+            className={cn(
+              'flex flex-col gap-3 transition-all duration-500',
+              mobileOpen
+                ? 'translate-y-0 opacity-100'
+                : 'translate-y-4 opacity-0'
+            )}
+            style={{ transitionDelay: mobileOpen ? '250ms' : '0ms' }}
+          >
+            {showAuthButtons && (
+              <Link
+                to={isAuthenticated ? '/dashboard' : '/sign-in'}
+                onClick={() => setMobileOpen(false)}
+                className='bg-foreground text-background inline-flex h-10 items-center justify-center rounded-lg text-sm font-medium transition-opacity hover:opacity-90 active:opacity-80'
+              >
+                {isAuthenticated ? t('Go to Dashboard') : t('Sign in')}
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Notification Dialog */}
+      {showNotifications && (
+        <NotificationDialog
+          open={notifications.dialogOpen}
+          onOpenChange={notifications.setDialogOpen}
+          activeTab={notifications.activeTab}
+          onTabChange={notifications.setActiveTab}
+          notice={notifications.notice}
+          announcements={notifications.announcements}
+          loading={notifications.loading}
+          onCloseToday={notifications.closeToday}
+        />
+      )}
+    </>
+  )
+}

web/default/src/components/layout/components/public-layout.tsx

@@ -0,0 +1,40 @@
+import type { TopNavLink } from '../types'
+import { PublicHeader, type PublicHeaderProps } from './public-header'
+
+type PublicLayoutProps = {
+  children: React.ReactNode
+  showMainContainer?: boolean
+  navContent?: React.ReactNode
+  headerProps?: Omit<PublicHeaderProps, 'navContent'>
+  navLinks?: TopNavLink[]
+  showThemeSwitch?: boolean
+  showAuthButtons?: boolean
+  showNotifications?: boolean
+  logo?: React.ReactNode
+  siteName?: string
+}
+
+export function PublicLayout(props: PublicLayoutProps) {
+  return (
+    <div className='bg-background text-foreground relative min-h-svh overflow-hidden'>
+      <PublicHeader
+        navContent={props.navContent}
+        navLinks={props.navLinks}
+        showThemeSwitch={props.showThemeSwitch}
+        showAuthButtons={props.showAuthButtons}
+        showNotifications={props.showNotifications}
+        logo={props.logo}
+        siteName={props.siteName}
+        {...props.headerProps}
+      />
+
+      {props.showMainContainer !== false ? (
+        <main className='container px-4 py-6 pt-20 md:px-4'>
+          {props.children}
+        </main>
+      ) : (
+        props.children
+      )}
+    </div>
+  )
+}

web/default/src/components/layout/components/public-navigation.tsx

@@ -0,0 +1,68 @@
+import { Link } from '@tanstack/react-router'
+import { cn } from '@/lib/utils'
+import { useTopNavLinks } from '@/hooks/use-top-nav-links'
+import { defaultTopNavLinks } from '../config/top-nav.config'
+import type { TopNavLink } from '../types'
+
+interface PublicNavigationProps {
+  /**
+   * Custom navigation links
+   * If not provided, will use dynamic links from backend or defaults
+   */
+  links?: TopNavLink[]
+  /**
+   * Additional className
+   */
+  className?: string
+}
+
+/**
+ * Public navigation component that matches Launch UI template styling
+ * Used in PublicHeader for desktop navigation
+ */
+export function PublicNavigation({
+  links: providedLinks,
+  className,
+}: PublicNavigationProps = {}) {
+  // Use the same logic as AppHeader: prioritize dynamic links from backend
+  const dynamicLinks = useTopNavLinks()
+  const defaultLinks = providedLinks || defaultTopNavLinks
+  const links = dynamicLinks.length > 0 ? dynamicLinks : defaultLinks
+
+  return (
+    <nav className={cn('hidden items-center gap-1 md:flex', className)}>
+      {links.map((link, index) => {
+        // Handle external links
+        if (link.external) {
+          return (
+            <a
+              key={index}
+              href={link.href}
+              target='_blank'
+              rel='noopener noreferrer'
+              className={cn(
+                'text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground inline-flex h-9 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium transition-colors focus:outline-none',
+                link.disabled && 'pointer-events-none opacity-50'
+              )}
+            >
+              {link.title}
+            </a>
+          )
+        }
+        // Handle internal links
+        return (
+          <Link
+            key={index}
+            to={link.href}
+            className={cn(
+              'text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground inline-flex h-9 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium transition-colors focus:outline-none',
+              link.disabled && 'pointer-events-none opacity-50'
+            )}
+          >
+            {link.title}
+          </Link>
+        )
+      })}
+    </nav>
+  )
+}

web/default/src/components/layout/components/section-page-layout.tsx

@@ -0,0 +1,109 @@
+import {
+  Children,
+  isValidElement,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react'
+import { AppHeader } from './app-header'
+import { Main } from './main'
+import { PageFooterProvider } from './page-footer'
+
+type SlotProps = { children?: ReactNode }
+
+function SectionPageLayoutTitle(_props: SlotProps) {
+  return null
+}
+SectionPageLayoutTitle.displayName = 'SectionPageLayout.Title'
+
+function SectionPageLayoutDescription(_props: SlotProps) {
+  return null
+}
+SectionPageLayoutDescription.displayName = 'SectionPageLayout.Description'
+
+function SectionPageLayoutActions(_props: SlotProps) {
+  return null
+}
+SectionPageLayoutActions.displayName = 'SectionPageLayout.Actions'
+
+function SectionPageLayoutContent(_props: SlotProps) {
+  return null
+}
+SectionPageLayoutContent.displayName = 'SectionPageLayout.Content'
+
+function SectionPageLayoutBreadcrumb(_props: SlotProps) {
+  return null
+}
+SectionPageLayoutBreadcrumb.displayName = 'SectionPageLayout.Breadcrumb'
+
+export type SectionPageLayoutProps = {
+  children: ReactNode
+}
+
+export function SectionPageLayout(props: SectionPageLayoutProps) {
+  const [footerContainer, setFooterContainer] = useState<HTMLDivElement | null>(
+    null
+  )
+
+  let title: ReactNode = null
+  let description: ReactNode = null
+  let actions: ReactNode = null
+  let content: ReactNode = null
+  let breadcrumb: ReactNode = null
+
+  Children.forEach(props.children, (node) => {
+    if (!isValidElement(node)) return
+    const child = node as ReactElement<SlotProps>
+    if (child.type === SectionPageLayoutTitle) title = child.props.children
+    else if (child.type === SectionPageLayoutDescription)
+      description = child.props.children
+    else if (child.type === SectionPageLayoutActions)
+      actions = child.props.children
+    else if (child.type === SectionPageLayoutContent)
+      content = child.props.children
+    else if (child.type === SectionPageLayoutBreadcrumb)
+      breadcrumb = child.props.children
+  })
+
+  return (
+    <PageFooterProvider container={footerContainer}>
+      <AppHeader />
+
+      <Main>
+        <div className='shrink-0 px-4 pt-4 pb-3 sm:pt-6 sm:pb-4'>
+          {breadcrumb != null && <div className='mb-3'>{breadcrumb}</div>}
+          <div className='flex flex-wrap items-center justify-between gap-x-4 gap-y-2'>
+            <div className='min-w-0'>
+              <h2 className='text-base font-bold tracking-tight sm:text-lg'>
+                {title}
+              </h2>
+              {description != null && (
+                <p className='text-muted-foreground max-sm:text-xs sm:text-sm'>
+                  {description}
+                </p>
+              )}
+            </div>
+            {actions != null && (
+              <div className='flex shrink-0 flex-wrap items-center gap-2 sm:gap-x-4'>
+                {actions}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className='min-h-0 flex-1 overflow-auto px-4 pb-4'>{content}</div>
+
+        <div
+          ref={setFooterContainer}
+          className='bg-background shrink-0 border-t px-4 py-3 empty:hidden'
+        />
+      </Main>
+    </PageFooterProvider>
+  )
+}
+
+SectionPageLayout.Title = SectionPageLayoutTitle
+SectionPageLayout.Description = SectionPageLayoutDescription
+SectionPageLayout.Actions = SectionPageLayoutActions
+SectionPageLayout.Content = SectionPageLayoutContent
+SectionPageLayout.Breadcrumb = SectionPageLayoutBreadcrumb

web/default/src/components/layout/components/section.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+export function Section({
+  className,
+  ...props
+}: React.ComponentProps<'section'>) {
+  return (
+    <section
+      data-slot='section'
+      className={cn(
+        'bg-background text-foreground px-4 py-6 sm:py-12 md:py-20',
+        className
+      )}
+      {...props}
+    />
+  )
+}

web/default/src/components/layout/components/top-nav.tsx

@@ -0,0 +1,107 @@
+import { useMemo } from 'react'
+import { Link } from '@tanstack/react-router'
+import { Menu } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { type TopNavLink } from '../types'
+
+type TopNavProps = React.HTMLAttributes<HTMLElement> & {
+  links: TopNavLink[]
+}
+
+/**
+ * 顶部导航栏组件
+ * 在大屏幕显示水平导航，在小屏幕显示下拉菜单
+ */
+export function TopNav({ className, links, ...props }: TopNavProps) {
+  // 规范化链接，确保所有可选属性都有默认值
+  const normalizedLinks = useMemo(
+    () =>
+      links.map((link) => ({
+        isActive: false,
+        disabled: false,
+        external: false,
+        ...link,
+      })),
+    [links]
+  )
+
+  return (
+    <>
+      {/* 移动端下拉菜单 */}
+      <div className='lg:hidden'>
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger asChild>
+            <Button size='icon' variant='outline' className='size-7'>
+              <Menu />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side='bottom' align='start'>
+            {normalizedLinks.map(
+              ({ title, href, isActive, disabled, external }) => (
+                <DropdownMenuItem key={`${title}-${href}`} asChild>
+                  {external ? (
+                    <a
+                      href={href}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      className={!isActive ? 'text-muted-foreground' : ''}
+                    >
+                      {title}
+                    </a>
+                  ) : (
+                    <Link
+                      to={href}
+                      className={!isActive ? 'text-muted-foreground' : ''}
+                      disabled={disabled}
+                    >
+                      {title}
+                    </Link>
+                  )}
+                </DropdownMenuItem>
+              )
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* 桌面端水平导航 */}
+      <nav
+        className={cn(
+          'hidden items-center space-x-4 lg:flex lg:space-x-4 xl:space-x-6',
+          className
+        )}
+        {...props}
+      >
+        {normalizedLinks.map(({ title, href, isActive, disabled, external }) =>
+          external ? (
+            <a
+              key={`${title}-${href}`}
+              href={href}
+              target='_blank'
+              rel='noopener noreferrer'
+              className={`hover:text-primary text-sm font-medium transition-colors ${isActive ? '' : 'text-muted-foreground'}`}
+            >
+              {title}
+            </a>
+          ) : (
+            <Link
+              key={`${title}-${href}`}
+              to={href}
+              disabled={disabled}
+              className={`hover:text-primary text-sm font-medium transition-colors ${isActive ? '' : 'text-muted-foreground'}`}
+            >
+              {title}
+            </Link>
+          )
+        )}
+      </nav>
+    </>
+  )
+}

web/default/src/components/layout/components/workspace-switcher.tsx

@@ -0,0 +1,190 @@
+import * as React from 'react'
+import { useNavigate, useLocation } from '@tanstack/react-router'
+import { ChevronsUpDown } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { useAuthStore } from '@/stores/auth-store'
+import { ROLE } from '@/lib/roles'
+import { useStatus } from '@/hooks/use-status'
+import { useSystemConfig } from '@/hooks/use-system-config'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/components/ui/sidebar'
+import { useWorkspace } from '../context/workspace-context'
+import { getWorkspaceByPath, WORKSPACE_IDS } from '../lib/workspace-registry'
+import { type Workspace } from '../types'
+
+type WorkspaceSwitcherProps = {
+  workspaces: Workspace[]
+  defaultName?: string
+  defaultVersion?: string
+}
+
+/**
+ * Workspace switcher component
+ * Allows users to switch between different workspaces
+ * - Regular users can only see the default workspace
+ * - Super administrators can see the system settings workspace
+ */
+export function WorkspaceSwitcher({
+  workspaces,
+  defaultName = 'New API',
+  defaultVersion,
+}: WorkspaceSwitcherProps) {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { pathname } = useLocation()
+  const { isMobile } = useSidebar()
+  const { status } = useStatus()
+  const { logo } = useSystemConfig()
+  const isSuperAdmin = useAuthStore(
+    (state) => state.auth.user?.role === ROLE.SUPER_ADMIN
+  )
+  const { activeWorkspace, setActiveWorkspace } = useWorkspace()
+
+  // Handle workspace list:
+  // 1. Populate first workspace with system info
+  // 2. Filter based on user permissions (non-super admins cannot see system settings)
+  const availableWorkspaces = React.useMemo(
+    () =>
+      workspaces
+        .map((workspace, index) =>
+          index === 0
+            ? {
+                ...workspace,
+                name: status?.system_name || defaultName,
+                plan: status?.version || defaultVersion || t('Unknown version'),
+              }
+            : workspace
+        )
+        .filter(
+          (workspace) =>
+            isSuperAdmin || workspace.id !== WORKSPACE_IDS.SYSTEM_SETTINGS
+        ),
+    [
+      workspaces,
+      status?.system_name,
+      status?.version,
+      defaultName,
+      defaultVersion,
+      isSuperAdmin,
+      t,
+    ]
+  )
+
+  // Initialize and synchronize active workspace
+  // Detect from URL first, then sync from activeWorkspace
+  React.useEffect(() => {
+    // Detect which workspace should be active from workspace registry
+    const detectedWorkspace = getWorkspaceByPath(pathname)
+
+    if (detectedWorkspace.id === WORKSPACE_IDS.SYSTEM_SETTINGS) {
+      // Currently in system settings route, should activate System Settings workspace
+      const systemSettingsWorkspace = availableWorkspaces.find(
+        (w) => w.id === WORKSPACE_IDS.SYSTEM_SETTINGS
+      )
+      if (systemSettingsWorkspace) {
+        setActiveWorkspace(systemSettingsWorkspace)
+      }
+    } else {
+      // Currently in main workspace route, should activate main workspace
+      const mainWorkspace =
+        availableWorkspaces.find((w) => w.id === WORKSPACE_IDS.DEFAULT) ||
+        availableWorkspaces[0]
+      if (mainWorkspace) {
+        setActiveWorkspace(mainWorkspace)
+      }
+    }
+  }, [pathname, availableWorkspaces, setActiveWorkspace])
+
+  const handleWorkspaceChange = (workspace: Workspace) => {
+    // Only navigate, let useEffect synchronize workspace state based on new pathname
+    // This avoids race conditions and context loss issues
+    if (workspace.id === WORKSPACE_IDS.SYSTEM_SETTINGS) {
+      navigate({ to: '/system-settings/general' })
+    } else {
+      navigate({ to: '/dashboard' })
+    }
+  }
+
+  if (!activeWorkspace) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size='lg'
+              className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'
+            >
+              {activeWorkspace.id === WORKSPACE_IDS.SYSTEM_SETTINGS ? (
+                <div className='bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg'>
+                  <activeWorkspace.logo className='size-4' />
+                </div>
+              ) : (
+                <div className='flex aspect-square size-8 items-center justify-center overflow-hidden rounded-lg'>
+                  <img
+                    src={logo}
+                    alt={t('Logo')}
+                    className='size-full rounded-lg object-cover'
+                  />
+                </div>
+              )}
+              <div className='grid flex-1 text-start text-sm leading-tight group-data-[collapsible=icon]:hidden'>
+                <span className='truncate font-semibold'>
+                  {activeWorkspace.name}
+                </span>
+                <span className='truncate text-xs'>{activeWorkspace.plan}</span>
+              </div>
+              <ChevronsUpDown className='ms-auto group-data-[collapsible=icon]:hidden' />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className='w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg'
+            align='start'
+            side={isMobile ? 'bottom' : 'right'}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className='text-muted-foreground text-xs'>
+              {t('Workspaces')}
+            </DropdownMenuLabel>
+            {availableWorkspaces.map((workspace, index) => (
+              <DropdownMenuItem
+                key={workspace.id}
+                onClick={() => handleWorkspaceChange(workspace)}
+                className='gap-2 p-2'
+              >
+                {index === 0 ? (
+                  <div className='flex size-6 items-center justify-center overflow-hidden rounded-sm border'>
+                    <img
+                      src={logo}
+                      alt='Logo'
+                      className='size-full object-cover'
+                    />
+                  </div>
+                ) : (
+                  <div className='flex size-6 items-center justify-center rounded-sm border'>
+                    <workspace.logo className='size-4 shrink-0' />
+                  </div>
+                )}
+                {workspace.name}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

web/default/src/components/layout/config/system-settings.config.ts

@@ -0,0 +1,70 @@
+import { type TFunction } from 'i18next'
+import {
+  Settings,
+  Shield,
+  ShieldAlert,
+  Layout,
+  Plug,
+  Box,
+  Wrench,
+} from 'lucide-react'
+import { getAuthSectionNavItems } from '@/features/system-settings/auth/section-registry.tsx'
+import { getContentSectionNavItems } from '@/features/system-settings/content/section-registry.tsx'
+import { getGeneralSectionNavItems } from '@/features/system-settings/general/section-registry.tsx'
+import { getIntegrationsSectionNavItems } from '@/features/system-settings/integrations/section-registry.tsx'
+import { getMaintenanceSectionNavItems } from '@/features/system-settings/maintenance/section-registry.tsx'
+import { getModelsSectionNavItems } from '@/features/system-settings/models/section-registry.tsx'
+import { getRequestLimitsSectionNavItems } from '@/features/system-settings/request-limits/section-registry.tsx'
+import { type NavGroup } from '../types'
+
+/**
+ * System settings sidebar configuration
+ * Displayed when switching to "System Settings" workspace
+ */
+export const WORKSPACE_SYSTEM_SETTINGS_ID = 'system-settings'
+
+export function getSystemSettingsNavGroups(t: TFunction): NavGroup[] {
+  return [
+    {
+      id: 'system-administration',
+      title: t('System Administration'),
+      items: [
+        {
+          title: t('General'),
+          icon: Settings,
+          items: getGeneralSectionNavItems(t),
+        },
+        {
+          title: t('Authentication'),
+          icon: Shield,
+          items: getAuthSectionNavItems(t),
+        },
+        {
+          title: t('Request Limits'),
+          icon: ShieldAlert,
+          items: getRequestLimitsSectionNavItems(t),
+        },
+        {
+          title: t('Content'),
+          icon: Layout,
+          items: getContentSectionNavItems(t),
+        },
+        {
+          title: t('Integrations'),
+          icon: Plug,
+          items: getIntegrationsSectionNavItems(t),
+        },
+        {
+          title: t('Models'),
+          icon: Box,
+          items: getModelsSectionNavItems(t),
+        },
+        {
+          title: t('Maintenance'),
+          icon: Wrench,
+          items: getMaintenanceSectionNavItems(t),
+        },
+      ],
+    },
+  ]
+}

web/default/src/components/layout/config/top-nav.config.ts

@@ -0,0 +1,12 @@
+import { type TopNavLink } from '../types'
+
+/**
+ * Default top navigation links
+ *
+ * In practice, navigation links are dynamically fetched from backend.
+ * Priority: Backend dynamic links > Provided navLinks > defaultTopNavLinks
+ *
+ * This is intentionally empty to encourage backend configuration.
+ * If you need fallback links, add them here.
+ */
+export const defaultTopNavLinks: TopNavLink[] = []

web/default/src/components/layout/constants.ts

@@ -0,0 +1,47 @@
+/**
+ * Layout constants and configurations
+ */
+
+/**
+ * Animation variants for mobile drawer
+ */
+export const MOBILE_DRAWER_ANIMATION = {
+  overlay: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+    exit: { opacity: 0 },
+  },
+  drawer: {
+    hidden: { opacity: 0, y: 100 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      rotate: 0,
+      transition: {
+        type: 'spring',
+        damping: 15,
+        stiffness: 200,
+        staggerChildren: 0.03,
+      },
+    },
+    exit: {
+      opacity: 0,
+      y: 100,
+      transition: { duration: 0.1 },
+    },
+  },
+  menuItem: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+  },
+} as const
+
+/**
+ * Mobile drawer configuration
+ */
+export const MOBILE_DRAWER_CONFIG = {
+  overlayTransitionDuration: 0.2,
+  drawerClassName:
+    'fixed inset-x-0 bottom-3 z-50 mx-auto w-[95%] rounded-xl border border-border bg-background p-4 shadow-lg md:hidden',
+  overlayClassName: 'fixed inset-0 z-40 bg-black/50 backdrop-blur-sm',
+} as const

web/default/src/components/layout/context/workspace-context.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable react-refresh/only-export-components */
+import * as React from 'react'
+import { type Workspace } from '../types'
+
+type WorkspaceContextType = {
+  activeWorkspace: Workspace | null
+  setActiveWorkspace: (workspace: Workspace) => void
+}
+
+const WorkspaceContext = React.createContext<WorkspaceContextType | undefined>(
+  undefined
+)
+
+/**
+ * 工作区上下文 Provider
+ * 管理当前激活的工作区状态，用于切换不同的侧边栏视图
+ */
+export function WorkspaceProvider({ children }: { children: React.ReactNode }) {
+  const [activeWorkspace, setActiveWorkspace] =
+    React.useState<Workspace | null>(null)
+
+  const value = React.useMemo(
+    () => ({ activeWorkspace, setActiveWorkspace }),
+    [activeWorkspace]
+  )
+
+  return (
+    <WorkspaceContext.Provider value={value}>
+      {children}
+    </WorkspaceContext.Provider>
+  )
+}
+
+/**
+ * 使用工作区上下文的 Hook
+ * @throws 如果在 WorkspaceProvider 外部使用会抛出错误
+ */
+export function useWorkspace() {
+  const context = React.useContext(WorkspaceContext)
+  if (!context) {
+    throw new Error('useWorkspace must be used within WorkspaceProvider')
+  }
+  return context
+}

web/default/src/components/layout/index.ts

@@ -0,0 +1,56 @@
+/**
+ * Layout 组件统一导出
+ */
+
+// 核心组件
+export { AppHeader } from './components/app-header'
+export { AppSidebar } from './components/app-sidebar'
+export { AuthenticatedLayout } from './components/authenticated-layout'
+export { PublicLayout } from './components/public-layout'
+export { PublicHeader } from './components/public-header'
+export { PublicNavigation } from './components/public-navigation'
+export { HeaderLogo } from './components/header-logo'
+export { NavLinkItem, NavLinkList } from './components/nav-link-item'
+export { Header } from './components/header'
+export { Main } from './components/main'
+export { PageFooterPortal } from './components/page-footer'
+export { NavGroup } from './components/nav-group'
+export { SectionPageLayout } from './components/section-page-layout'
+export { WorkspaceSwitcher } from './components/workspace-switcher'
+export { TopNav } from './components/top-nav'
+export { MobileDrawer } from './components/mobile-drawer'
+
+// 上下文
+export { WorkspaceProvider, useWorkspace } from './context/workspace-context'
+
+// 配置
+export {
+  getSystemSettingsNavGroups,
+  WORKSPACE_SYSTEM_SETTINGS_ID,
+} from './config/system-settings.config'
+export { defaultTopNavLinks } from './config/top-nav.config'
+
+// 常量
+export { MOBILE_DRAWER_ANIMATION, MOBILE_DRAWER_CONFIG } from './constants'
+
+// 工具函数 - 工作区注册表
+export {
+  getWorkspaceByPath,
+  getNavGroupsForPath,
+  isInWorkspace,
+  getAllWorkspaces,
+  WORKSPACE_IDS,
+} from './lib/workspace-registry'
+
+// 类型导出（使用 type-only 导出避免与组件冲突）
+export type {
+  Workspace,
+  NavLink,
+  NavCollapsible,
+  NavItem,
+  NavGroup as NavGroupType,
+  SidebarData,
+  TopNavLink,
+} from './types'
+export type { WorkspaceConfig, WorkspaceId } from './lib/workspace-registry'
+export type { SectionPageLayoutProps } from './components/section-page-layout'

web/default/src/components/layout/lib/url-utils.ts

@@ -0,0 +1,99 @@
+import type { LinkProps } from '@tanstack/react-router'
+import type { NavItem, NavCollapsible } from '../types'
+
+/**
+ * Convert LinkProps['to'] to string
+ * Handles both string URLs and object URLs (e.g., { pathname, search })
+ */
+function urlToString(url: LinkProps['to'] | (string & {})): string | null {
+  if (typeof url === 'string') {
+    return url
+  }
+  if (url && typeof url === 'object' && !Array.isArray(url)) {
+    // Handle object URLs like { pathname: string, search?: string }
+    const urlObj = url as Record<string, unknown>
+    const pathname = typeof urlObj.pathname === 'string' ? urlObj.pathname : ''
+    const search = typeof urlObj.search === 'string' ? urlObj.search : ''
+    return pathname + search
+  }
+  return null
+}
+
+/**
+ * Normalize URL by removing query parameters and trailing slashes
+ */
+export function normalizeHref(href: string): string {
+  const withoutQuery = href.split('?')[0]
+  return withoutQuery.length > 1
+    ? withoutQuery.replace(/\/+$/, '')
+    : withoutQuery
+}
+
+/**
+ * Check if a navigation item is active
+ * @param href - Current URL
+ * @param item - Navigation item
+ * @param mainNav - Whether this is a main navigation item (matches first-level path)
+ */
+export function checkIsActive(
+  href: string,
+  item: NavItem,
+  mainNav = false
+): boolean {
+  // For collapsible items (NavCollapsible), check sub-items first
+  if ('items' in item && item.items) {
+    const collapsibleItem = item as NavCollapsible
+    const items = collapsibleItem.items
+    const hrefWithoutQuery = href.split('?')[0]
+
+    // Check if any sub-item matches
+    if (
+      items.some((i) => {
+        if (!i?.url) return false
+        const subItemUrl = urlToString(i.url)
+        if (!subItemUrl) return false
+        if (href === subItemUrl) return true
+        const subItemUrlWithoutQuery = subItemUrl.split('?')[0]
+        const subItemUrlHasQuery = subItemUrl.includes('?')
+        if (subItemUrlWithoutQuery === hrefWithoutQuery) {
+          // If sub-item URL has no query params, pathname match is enough (href may have query params)
+          if (!subItemUrlHasQuery) return true
+          // If sub-item URL has query params, they must match exactly
+          if (subItemUrlHasQuery && href === subItemUrl) return true
+        }
+        return false
+      })
+    )
+      return true
+  }
+
+  // For regular link items, check the item's URL
+  if (!item.url) return false
+
+  const itemUrl = urlToString(item.url)
+  if (!itemUrl) return false
+
+  // Exact match
+  if (href === itemUrl) return true
+
+  const hrefWithoutQuery = href.split('?')[0]
+  const itemUrlWithoutQuery = itemUrl.split('?')[0]
+  const itemUrlHasQuery = itemUrl.includes('?')
+
+  // If both URLs have the same base path
+  if (hrefWithoutQuery === itemUrlWithoutQuery) {
+    // If item.url has no query params, pathname match is enough (current URL may have query params)
+    if (!itemUrlHasQuery) return true
+    // If item.url has query params, they must match exactly
+    if (itemUrlHasQuery && href === itemUrl) return true
+  }
+
+  // Main navigation match (matches first-level path)
+  if (mainNav && href.split('/')[1] && itemUrl) {
+    const hrefFirstPath = href.split('/')[1]
+    const itemFirstPath = itemUrl.split('/')[1]
+    return hrefFirstPath === itemFirstPath
+  }
+
+  return false
+}

web/default/src/components/layout/lib/workspace-registry.example.ts

@@ -0,0 +1,101 @@
+/**
+ * 工作区注册表使用示例
+ *
+ * 本文件展示如何添加新工作区，仅作示例参考，不会被编译
+ */
+
+/**
+ * 步骤1: 创建工作区的侧边栏配置文件
+ * 例如：web/src/components/layout/config/user-management.config.ts
+ */
+/*
+import { Users, UserPlus, Shield } from 'lucide-react'
+import { type NavGroup } from '../types'
+
+export const userManagementConfig: NavGroup[] = [
+  {
+    title: 'User Management',
+    items: [
+      {
+        title: 'All Users',
+        url: '/user-management/list',
+        icon: Users,
+      },
+      {
+        title: 'Create User',
+        url: '/user-management/create',
+        icon: UserPlus,
+      },
+      {
+        title: 'Permissions',
+        url: '/user-management/permissions',
+        icon: Shield,
+      },
+    ],
+  },
+]
+*/
+
+/**
+ * 步骤2: 在 workspace-registry.ts 中注册新工作区
+ * 在 workspaceRegistry 数组中添加配置（在默认工作区之前）
+ */
+/*
+import { userManagementConfig } from '../config/user-management.config'
+
+const workspaceRegistry: WorkspaceConfig[] = [
+  // System Settings 工作区
+  {
+    name: 'System Settings',
+    pathPattern: /^\/system-settings/,
+    navGroups: systemSettingsConfig,
+  },
+  // 新增的 User Management 工作区
+  {
+    name: 'User Management',
+    pathPattern: /^\/user-management/,  // 或使用字符串: '/user-management'
+    navGroups: userManagementConfig,
+  },
+  // 默认工作区（必须放在最后）
+  {
+    name: 'Default',
+    pathPattern: /.* /,
+    navGroups: sidebarConfig.navGroups,
+  },
+]
+*/
+
+/**
+ * 步骤3: （可选）在 sidebar.config.ts 中添加工作区到切换器
+ */
+/*
+export const sidebarConfig: SidebarData = {
+  workspaces: [
+    {
+      name: '',
+      logo: Command,
+      plan: '',
+    },
+    {
+      name: 'User Management',
+      logo: Users,
+      plan: 'Manage users',
+    },
+    {
+      name: 'System Settings',
+      logo: Settings,
+      plan: 'Manage and configure',
+    },
+  ],
+  navGroups: [...],
+}
+*/
+
+/**
+ * 同语注：这里就完成了，现在：
+ * - 侧边栏会根据当前路径自动切换显示对应的工作区菜单
+ * - 搜索功能会自动显示当前工作区的菜单项
+ * - 工作区切换器会显示新的工作区选项
+ *
+ * 无需修改任何其他文件！
+ */

web/default/src/components/layout/lib/workspace-registry.ts

@@ -0,0 +1,110 @@
+import { type TFunction } from 'i18next'
+import {
+  getSystemSettingsNavGroups,
+  WORKSPACE_SYSTEM_SETTINGS_ID,
+} from '../config/system-settings.config'
+import type { NavGroup } from '../types'
+
+export const WORKSPACE_IDS = {
+  SYSTEM_SETTINGS: WORKSPACE_SYSTEM_SETTINGS_ID,
+  DEFAULT: 'default',
+} as const
+
+export type WorkspaceId = (typeof WORKSPACE_IDS)[keyof typeof WORKSPACE_IDS]
+
+/**
+ * Workspace configuration type
+ * Each workspace contains name, path matching rules, and corresponding navigation group configuration
+ */
+export type WorkspaceConfig = {
+  /** Workspace identifier (for logic) */
+  id: WorkspaceId
+  /** Workspace name */
+  name: string
+  /** Path matching rule, supports string (contains match) or regular expression */
+  pathPattern: string | RegExp
+  /** Sidebar navigation group configuration for this workspace */
+  getNavGroups?: (t: TFunction) => NavGroup[]
+}
+
+/**
+ * Workspace registry
+ *
+ * Sorted by priority, first matched workspace will be used
+ * Last one should be default workspace (matches all paths)
+ *
+ * @example
+ * // Add new workspace
+ * {
+ *   name: 'User Management',
+ *   pathPattern: /^\/user-management/,
+ *   navGroups: userManagementConfig
+ * }
+ */
+const workspaceRegistry: WorkspaceConfig[] = [
+  // System Settings workspace
+  {
+    id: WORKSPACE_IDS.SYSTEM_SETTINGS,
+    name: 'System Settings',
+    pathPattern: /^\/system-settings/,
+    getNavGroups: getSystemSettingsNavGroups,
+  },
+  // Default workspace (must be last)
+  {
+    id: WORKSPACE_IDS.DEFAULT,
+    name: 'Default',
+    pathPattern: /.*/,
+    // getNavGroups is undefined, will be handled by consumers (e.g. useSidebarData)
+  },
+]
+
+/**
+ * Get matched workspace configuration based on path
+ * @param pathname - Current route path
+ * @returns Matched workspace configuration
+ */
+export function getWorkspaceByPath(pathname: string): WorkspaceConfig {
+  const workspace = workspaceRegistry.find((ws) => {
+    if (typeof ws.pathPattern === 'string') {
+      return pathname.includes(ws.pathPattern)
+    }
+    return ws.pathPattern.test(pathname)
+  })
+
+  // If no match, return default workspace (last one)
+  return workspace || workspaceRegistry[workspaceRegistry.length - 1]
+}
+
+/**
+ * Get corresponding sidebar navigation group configuration based on path
+ * @param pathname - Current route path
+ * @returns Navigation group configuration for corresponding workspace
+ */
+export function getNavGroupsForPath(
+  pathname: string,
+  t: TFunction
+): NavGroup[] | undefined {
+  const workspace = getWorkspaceByPath(pathname)
+  return workspace.getNavGroups?.(t)
+}
+
+/**
+ * Determine if in specified workspace
+ * @param pathname - Current route path
+ * @param workspaceId - Workspace identifier
+ * @returns Whether in specified workspace
+ */
+export function isInWorkspace(
+  pathname: string,
+  workspaceId: WorkspaceId
+): boolean {
+  return getWorkspaceByPath(pathname).id === workspaceId
+}
+
+/**
+ * Get all registered workspace configurations
+ * @returns Array of workspace configurations
+ */
+export function getAllWorkspaces(): WorkspaceConfig[] {
+  return workspaceRegistry
+}

web/default/src/components/layout/types.ts

@@ -0,0 +1,81 @@
+import { type LinkProps } from '@tanstack/react-router'
+
+/**
+ * Workspace type
+ * Used for top switcher to display different workspaces
+ */
+export type Workspace = {
+  id: string
+  name: string
+  logo: React.ElementType
+  plan: string
+}
+
+/**
+ * Base navigation item type
+ */
+type BaseNavItem = {
+  title: string
+  badge?: string
+  icon?: React.ElementType
+}
+
+/**
+ * Navigation link type - single link item
+ */
+export type NavLink = BaseNavItem & {
+  url: LinkProps['to'] | (string & {})
+  items?: never
+  type?: never
+}
+
+/**
+ * Navigation collapsible type - collapsible navigation with sub-items
+ */
+export type NavCollapsible = BaseNavItem & {
+  items: (BaseNavItem & { url: LinkProps['to'] | (string & {}) })[]
+  url?: never
+  type?: never
+}
+
+/**
+ * Dynamic chat presets type - dynamically loaded chat preset list from API
+ */
+export type NavChatPresets = BaseNavItem & {
+  type: 'chat-presets'
+  url?: never
+  items?: never
+}
+
+/**
+ * Navigation item union type
+ */
+export type NavItem = NavCollapsible | NavLink | NavChatPresets
+
+/**
+ * Navigation group type - a group of navigation items in sidebar
+ */
+export type NavGroup = {
+  id?: string
+  title: string
+  items: NavItem[]
+}
+
+/**
+ * Sidebar data type
+ */
+export type SidebarData = {
+  workspaces: Workspace[]
+  navGroups: NavGroup[]
+}
+
+/**
+ * Top navigation link type
+ */
+export type TopNavLink = {
+  title: string
+  href: string
+  isActive?: boolean
+  disabled?: boolean
+  external?: boolean
+}