diff --git a/.agents/skills/classic-to-default-sync/SKILL.md b/.agents/skills/classic-to-default-sync/SKILL.md
index 5689fe0633a..282e0492e15 100644
--- a/.agents/skills/classic-to-default-sync/SKILL.md
+++ b/.agents/skills/classic-to-default-sync/SKILL.md
@@ -26,7 +26,7 @@ Read every changed file in `web/classic`. Identify the **logical changes** (new
 For each logical change found in Step 1, locate the equivalent file(s) in `web/default/src/`. Use Glob/Grep/SemanticSearch as needed. Consider that:
 
 - `web/classic` uses **React 18 + Vite + Semi Design**
-- `web/default` uses **React 19 + Rsbuild + Radix UI + Tailwind CSS**
+- `web/default` uses **React 19 + Rsbuild + Base UI + Tailwind CSS**
 - Component names, file paths, and API shapes may differ; match by **functionality**, not filename.
 
 ### Step 3 — Triage each change
@@ -46,7 +46,7 @@ For each **⚠️** or **❌** item:
 1. **Read the target file(s) in `web/default`** before editing (required by project conventions).
 2. Implement using `web/default` conventions:
    - React 19 patterns (hooks, Suspense, etc.)
-   - Radix UI primitives where applicable
+   - Base UI primitives where applicable
    - Tailwind CSS for styling (no inline styles or Semi Design imports)
    - `useTranslation()` + `t('English key')` for all user-visible strings
    - TypeScript — explicit types, no `any`
diff --git a/.agents/skills/shadcn-ui/SKILL.md b/.agents/skills/shadcn-ui/SKILL.md
new file mode 100644
index 00000000000..8307cdc1529
--- /dev/null
+++ b/.agents/skills/shadcn-ui/SKILL.md
@@ -0,0 +1,105 @@
+---
+name: shadcn-ui
+description: >-
+  Give the assistant project-aware shadcn/ui context: components.json,
+  composition patterns, CLI, registries, theming, and MCP. Use when working on
+  web/default UI, shadcn components, or presets. Overview aligns with
+  https://ui.shadcn.com/docs/skills.md; full upstream skill text is vendored
+  under vendor/shadcn/.
+---
+
+<!-- Canonical overview: https://ui.shadcn.com/docs/skills.md -->
+
+# Skills (shadcn/ui)
+
+Skills give AI assistants project-aware context about shadcn/ui. When used, the assistant knows how to find, install, compose, and customize components using the correct APIs and patterns for your project.
+
+For example, you can ask:
+
+- _"Add a login form with email and password fields."_
+- _"Create a settings page with a form for updating profile information."_
+- _"Build a dashboard with a sidebar, stats cards, and a data table."_
+- _"Switch to --preset [CODE]"_
+- _"Can you add a hero from @tailark?"_
+
+The skill reads your project's `components.json` and provides your framework, aliases, installed components, icon library, and base library so it can generate correct code on the first try.
+
+---
+
+## Install (ecosystem vs this repo)
+
+Official install from [Skills — shadcn/ui](https://ui.shadcn.com/docs/skills.md):
+
+```bash
+npx skills add shadcn/ui
+```
+
+That installs the skill where the `skills` CLI is available. **This repository** keeps the same intent under `.agents/skills/shadcn-ui/` (overview here + **vendored** upstream docs in [`vendor/shadcn/`](./vendor/shadcn/)) and runs the shadcn CLI from the frontend app root:
+
+```bash
+cd web/default && bunx shadcn@latest info --json
+```
+
+Learn more about skills at [skills.sh](https://skills.sh).
+
+---
+
+## What's included (and where)
+
+### Project context
+
+Run **`shadcn info --json`** (here: `cd web/default && bunx shadcn@latest info --json`) for framework, Tailwind version, aliases, base (`radix` | `base`), icon library, installed components, and resolved paths.
+
+### CLI commands
+
+Full command reference (vendored): [`vendor/shadcn/cli.md`](./vendor/shadcn/cli.md).
+
+### Theming and customization
+
+Vendored: [`vendor/shadcn/customization.md`](./vendor/shadcn/customization.md). Live docs: [Theming](https://ui.shadcn.com/docs/theming).
+
+### Registry authoring
+
+Not duplicated as a single file in the vendor tree; see [Registry](https://ui.shadcn.com/docs/registry) and `build` in [`vendor/shadcn/cli.md`](./vendor/shadcn/cli.md).
+
+### MCP server
+
+Vendored: [`vendor/shadcn/mcp.md`](./vendor/shadcn/mcp.md). Live docs: [MCP Server](https://ui.shadcn.com/docs/mcp).
+
+---
+
+## How it works
+
+1. **Project detection** — Applies when `components.json` exists (here: `web/default/components.json`).
+2. **Context injection** — Use `shadcn info --json` as ground truth for imports and APIs.
+3. **Pattern enforcement** — Follow rules in [`vendor/shadcn/SKILL.md`](./vendor/shadcn/SKILL.md) and [`vendor/shadcn/rules/`](./vendor/shadcn/rules/).
+4. **Component discovery** — `shadcn docs`, `shadcn search`, MCP, or registries — see vendored SKILL + MCP doc.
+
+---
+
+## Learn more (web)
+
+- [CLI](https://ui.shadcn.com/docs/cli) — complements [`vendor/shadcn/cli.md`](./vendor/shadcn/cli.md)
+- [Theming](https://ui.shadcn.com/docs/theming)
+- [Registry](https://ui.shadcn.com/docs/registry)
+- [skills.sh](https://skills.sh)
+
+---
+
+## Vendored upstream bundle (deep rules)
+
+Snapshot from [shadcn-ui/ui `skills/shadcn`](https://github.com/shadcn-ui/ui/tree/main/skills/shadcn); revision note in [`vendor/shadcn/UPSTREAM.txt`](./vendor/shadcn/UPSTREAM.txt).
+
+| Doc | Path |
+| --- | --- |
+| Full official skill body | [`vendor/shadcn/SKILL.md`](./vendor/shadcn/SKILL.md) |
+| CLI reference | [`vendor/shadcn/cli.md`](./vendor/shadcn/cli.md) |
+| Theming / customization | [`vendor/shadcn/customization.md`](./vendor/shadcn/customization.md) |
+| MCP | [`vendor/shadcn/mcp.md`](./vendor/shadcn/mcp.md) |
+| Forms | [`vendor/shadcn/rules/forms.md`](./vendor/shadcn/rules/forms.md) |
+| Composition | [`vendor/shadcn/rules/composition.md`](./vendor/shadcn/rules/composition.md) |
+| Icons | [`vendor/shadcn/rules/icons.md`](./vendor/shadcn/rules/icons.md) |
+| Styling | [`vendor/shadcn/rules/styling.md`](./vendor/shadcn/rules/styling.md) |
+| Base vs Radix | [`vendor/shadcn/rules/base-vs-radix.md`](./vendor/shadcn/rules/base-vs-radix.md) |
+
+**Workflow:** Prefer this **root** `SKILL.md` for repo paths (`web/default`, Bun). Read **`vendor/shadcn/SKILL.md`** for the complete upstream workflow, patterns, and CLI quick reference. Use **`vendor/shadcn/rules/*.md`** when validating concrete markup.
diff --git a/.agents/skills/shadcn-ui/vendor/shadcn/SKILL.md b/.agents/skills/shadcn-ui/vendor/shadcn/SKILL.md
new file mode 100644
index 00000000000..016f824d179
--- /dev/null
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/SKILL.md
@@ -0,0 +1,260 @@
+---
+name: shadcn
+description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
+user-invocable: false
+allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
+---
+
+# shadcn/ui
+
+A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
+
+> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.
+
+## Current Project Context
+
+```json
+!`npx shadcn@latest info --json`
+```
+
+The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component.
+
+## Principles
+
+1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.
+2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
+3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc.
+4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.
+
+## Critical Rules
+
+These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.
+
+### Styling & Tailwind → [styling.md](./rules/styling.md)
+
+- **`className` for layout, not styling.** Never override component colors or typography.
+- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`.
+- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`.
+- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`.
+- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`).
+- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries.
+- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking.
+
+### Forms & Inputs → [forms.md](./rules/forms.md)
+
+- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout.
+- **`InputGroup` uses `InputGroupInput`/`InputGroupTextarea`.** Never raw `Input`/`Textarea` inside `InputGroup`.
+- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.**
+- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state.
+- **`FieldSet` + `FieldLegend` for grouping related checkboxes/radios.** Don't use a `div` with a heading.
+- **Field validation uses `data-invalid` + `aria-invalid`.** `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control.
+
+### Component Structure → [composition.md](./rules/composition.md)
+
+- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`.
+- **Use `asChild` (radix) or `render` (base) for custom triggers.** Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](./rules/base-vs-radix.md)
+- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden.
+- **Use full Card composition.** `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`.
+- **Button has no `isPending`/`isLoading`.** Compose with `Spinner` + `data-icon` + `disabled`.
+- **`TabsTrigger` must be inside `TabsList`.** Never render triggers directly in `Tabs`.
+- **`Avatar` always needs `AvatarFallback`.** For when the image fails to load.
+
+### Use Components, Not Custom Markup → [composition.md](./rules/composition.md)
+
+- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`.
+- **Callouts use `Alert`.** Don't build custom styled divs.
+- **Empty states use `Empty`.** Don't build custom empty state markup.
+- **Toast via `sonner`.** Use `toast()` from `sonner`.
+- **Use `Separator`** instead of `<hr>` or `<div className="border-t">`.
+- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs.
+- **Use `Badge`** instead of custom styled spans.
+
+### Icons → [icons.md](./rules/icons.md)
+
+- **Icons in `Button` use `data-icon`.** `data-icon="inline-start"` or `data-icon="inline-end"` on the icon.
+- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`.
+- **Pass icons as objects, not string keys.** `icon={CheckIcon}`, not a string lookup.
+
+### CLI
+
+- **Never decode preset codes or build preset URLs manually.** Use `npx shadcn@latest preset decode <code>`, `preset url <code>`, or `preset open <code>`. For project-aware preset detection, use `npx shadcn@latest preset resolve`.
+- **Apply preset codes directly with the CLI.** Use `npx shadcn@latest apply <code>` for existing projects, or `npx shadcn@latest init --preset <code>` when initializing.
+
+## Key Patterns
+
+These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above.
+
+```tsx
+// Form layout: FieldGroup + Field, not div + Label.
+<FieldGroup>
+  <Field>
+    <FieldLabel htmlFor="email">Email</FieldLabel>
+    <Input id="email" />
+  </Field>
+</FieldGroup>
+
+// Validation: data-invalid on Field, aria-invalid on the control.
+<Field data-invalid>
+  <FieldLabel>Email</FieldLabel>
+  <Input aria-invalid />
+  <FieldDescription>Invalid email.</FieldDescription>
+</Field>
+
+// Icons in buttons: data-icon, no sizing classes.
+<Button>
+  <SearchIcon data-icon="inline-start" />
+  Search
+</Button>
+
+// Spacing: gap-*, not space-y-*.
+<div className="flex flex-col gap-4">  // correct
+<div className="space-y-4">           // wrong
+
+// Equal dimensions: size-*, not w-* h-*.
+<Avatar className="size-10">   // correct
+<Avatar className="w-10 h-10"> // wrong
+
+// Status colors: Badge variants or semantic tokens, not raw colors.
+<Badge variant="secondary">+20.1%</Badge>    // correct
+<span className="text-emerald-600">+20.1%</span> // wrong
+```
+
+## Component Selection
+
+| Need                       | Use                                                                                                 |
+| -------------------------- | --------------------------------------------------------------------------------------------------- |
+| Button/action              | `Button` with appropriate variant                                                                   |
+| Form inputs                | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` |
+| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem`                                                                   |
+| Data display               | `Table`, `Card`, `Badge`, `Avatar`                                                                  |
+| Navigation                 | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination`                                     |
+| Overlays                   | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation)       |
+| Feedback                   | `sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner`                                        |
+| Command palette            | `Command` inside `Dialog`                                                                           |
+| Charts                     | `Chart` (wraps Recharts)                                                                            |
+| Layout                     | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible`                          |
+| Empty states               | `Empty`                                                                                             |
+| Menus                      | `DropdownMenu`, `ContextMenu`, `Menubar`                                                            |
+| Tooltips/info              | `Tooltip`, `HoverCard`, `Popover`                                                                   |
+
+## Key Fields
+
+The injected project context contains these key fields:
+
+- **`aliases`** → use the actual alias prefix for imports (e.g. `@/`, `~/`), never hardcode.
+- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top of the file. Always reference this field when advising on the directive.
+- **`tailwindVersion`** → `"v4"` uses `@theme inline` blocks; `"v3"` uses `tailwind.config.js`.
+- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one.
+- **`style`** → component visual treatment (e.g. `nova`, `vega`).
+- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props.
+- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler/icons-react` for `tabler`, etc. Never assume `lucide-react`.
+- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc.
+- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA).
+- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`).
+- **`preset`** → resolved preset code and values for the current project. Use `npx shadcn@latest preset resolve --json` when you only need preset information.
+
+See [cli.md — `info` command](./cli.md) for the full field reference.
+
+## Component Docs, Examples, and Usage
+
+Run `npx shadcn@latest docs <component>` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.
+
+```bash
+npx shadcn@latest docs button dialog select
+```
+
+**When creating, fixing, debugging, or using a component, always run `npx shadcn@latest docs` and fetch the URLs first.** This ensures you're working with the correct API and usage patterns rather than guessing.
+
+## Workflow
+
+1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh.
+2. **Check installed components first** — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed.
+3. **Find components** — `npx shadcn@latest search`.
+4. **Get docs and examples** — run `npx shadcn@latest docs <component>` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`.
+5. **Install or update** — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see [Updating Components](#updating-components) below).
+6. **Fix imports in third-party components** — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@/components/ui/...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace/ui/components`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project.
+7. **Review added components** — After adding a component or block from any registry, **always read the added files and verify they are correct**. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the [Critical Rules](#critical-rules). Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on.
+8. **Registry must be explicit** — When the user asks to add a block or component, **do not guess the registry**. If no registry is specified (e.g. user says "add a login block" without specifying `@shadcn`, `@tailark`, etc.), ask which registry to use. Never default to a registry on behalf of the user.
+9. **Switching presets** — Ask the user first: **overwrite**, **partial**, **merge**, or **skip**?
+   - **Inspect current preset**: `npx shadcn@latest preset resolve`. Use `--json` when you need structured values.
+   - **Inspect incoming preset**: `npx shadcn@latest preset decode <code>`. Use `preset url <code>` or `preset open <code>` to share or open the preset builder.
+   - **Overwrite**: `npx shadcn@latest apply <code>`. Overwrites detected components, fonts, and CSS variables.
+   - **Partial**: `npx shadcn@latest apply <code> --only theme,font`. Updates only the selected preset parts without reinstalling UI components. Supported values are `theme` and `font`; comma-separated combinations are allowed. `icon` is intentionally not supported, because icon changes may require full component reinstall and transforms.
+   - **Merge**: `npx shadcn@latest init --preset <code> --force --no-reinstall`, then run `npx shadcn@latest info` to list installed components, then for each installed component use `--dry-run` and `--diff` to [smart merge](#updating-components) it individually.
+   - **Skip**: `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS, leaves components as-is.
+   - **Important**: Always run preset commands inside the user's project directory. `apply` only works in an existing project with a `components.json` file. The CLI automatically preserves the current base (`base` vs `radix`) from `components.json`. If you must use a scratch/temp directory (e.g. for `--dry-run` comparisons), pass `--base <current-base>` explicitly — preset codes do not encode the base.
+
+## Updating Components
+
+When the user asks to update a component from upstream while keeping their local changes, use `--dry-run` and `--diff` to intelligently merge. **NEVER fetch raw files from GitHub manually — always use the CLI.**
+
+1. Run `npx shadcn@latest add <component> --dry-run` to see all files that would be affected.
+2. For each file, run `npx shadcn@latest add <component> --diff <file>` to see what changed upstream vs local.
+3. Decide per file based on the diff:
+   - No local changes → safe to overwrite.
+   - Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.
+   - User says "just update everything" → use `--overwrite`, but confirm first.
+4. **Never use `--overwrite` without the user's explicit approval.**
+
+## Quick Reference
+
+```bash
+# Create a new project.
+npx shadcn@latest init --name my-app --preset base-nova
+npx shadcn@latest init --name my-app --preset a2r6bw --template vite
+
+# Create a monorepo project.
+npx shadcn@latest init --name my-app --preset base-nova --monorepo
+npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo
+
+# Initialize existing project.
+npx shadcn@latest init --preset base-nova
+npx shadcn@latest init --defaults  # shortcut: --template=next --preset=nova (base style implied)
+
+# Apply a preset to an existing project.
+npx shadcn@latest apply a2r6bw
+npx shadcn@latest apply a2r6bw --only theme
+npx shadcn@latest apply a2r6bw --only font
+npx shadcn@latest apply a2r6bw --only theme,font
+
+# Inspect preset codes and project preset state.
+npx shadcn@latest preset decode a2r6bw
+npx shadcn@latest preset url a2r6bw
+npx shadcn@latest preset open a2r6bw
+npx shadcn@latest preset resolve
+npx shadcn@latest preset resolve --json
+
+# Add components.
+npx shadcn@latest add button card dialog
+npx shadcn@latest add @magicui/shimmer-button
+npx shadcn@latest add --all
+
+# Preview changes before adding/updating.
+npx shadcn@latest add button --dry-run
+npx shadcn@latest add button --diff button.tsx
+npx shadcn@latest add @acme/form --view button.tsx
+
+# Search registries.
+npx shadcn@latest search @shadcn -q "sidebar"
+npx shadcn@latest search @tailark -q "stats"
+
+# Get component docs and example URLs.
+npx shadcn@latest docs button dialog select
+
+# View registry item details (for items not yet installed).
+npx shadcn@latest view @shadcn/button
+```
+
+**Named presets:** `nova`, `vega`, `maia`, `lyra`, `mira`, `luma`
+**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo)
+**Preset codes:** Version-prefixed base62 strings (e.g. `a2r6bw` or `b0`), from [ui.shadcn.com](https://ui.shadcn.com).
+
+## Detailed References
+
+- [rules/forms.md](./rules/forms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states
+- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading
+- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icons as objects
+- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index
+- [rules/base-vs-radix.md](./rules/base-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion
+- [cli.md](./cli.md) — Commands, flags, presets, templates
+- [customization.md](./customization.md) — Theming, CSS variables, extending components
diff --git a/.agents/skills/shadcn-ui/vendor/shadcn/UPSTREAM.txt b/.agents/skills/shadcn-ui/vendor/shadcn/UPSTREAM.txt
new file mode 100644
index 00000000000..c065d2e6ec3
--- /dev/null
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/UPSTREAM.txt
@@ -0,0 +1,3 @@
+Source: https://github.com/shadcn-ui/ui/tree/56161142f1b83f612462772d18883807b5f0d601/skills/shadcn
+Branch: main
+Fetched: 2026-04-29
diff --git a/.agents/skills/shadcn-ui/vendor/shadcn/cli.md b/.agents/skills/shadcn-ui/vendor/shadcn/cli.md
new file mode 100644
index 00000000000..c3a0f0aa748
--- /dev/null
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/cli.md
@@ -0,0 +1,276 @@
+# shadcn CLI Reference
+
+Configuration is read from `components.json`.
+
+> **IMPORTANT:** Always run commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`. Check `packageManager` from project context to choose the right one. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.
+
+> **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no `--package-manager` flag.
+
+## Contents
+
+- Commands: init, apply, add (dry-run, smart merge), search, view, docs, info, build
+- Templates: next, vite, start, react-router, astro
+- Presets: named, code, URL formats and fields
+- Switching presets
+
+---
+
+## Commands
+
+### `init` — Initialize or create a project
+
+```bash
+npx shadcn@latest init [components...] [options]
+```
+
+Initializes shadcn/ui in an existing project or creates a new project (when `--name` is provided). Optionally installs components in the same step.
+
+| Flag                    | Short | Description                                               | Default |
+| ----------------------- | ----- | --------------------------------------------------------- | ------- |
+| `--template <template>` | `-t`  | Template (next, start, vite, next-monorepo, react-router) | —       |
+| `--preset [name]`       | `-p`  | Preset configuration (named, code, or URL)                | —       |
+| `--yes`                 | `-y`  | Skip confirmation prompt                                  | `true`  |
+| `--defaults`            | `-d`  | Use defaults (`--template=next --preset=base-nova`)       | `false` |
+| `--force`               | `-f`  | Force overwrite existing configuration                    | `false` |
+| `--cwd <cwd>`           | `-c`  | Working directory                                         | current |
+| `--name <name>`         | `-n`  | Name for new project                                      | —       |
+| `--silent`              | `-s`  | Mute output                                               | `false` |
+| `--rtl`                 |       | Enable RTL support                                        | —       |
+| `--reinstall`           |       | Re-install existing UI components                         | `false` |
+| `--monorepo`            |       | Scaffold a monorepo project                               | —       |
+| `--no-monorepo`         |       | Skip the monorepo prompt                                  | —       |
+
+`npx shadcn@latest create` is an alias for `npx shadcn@latest init`.
+
+### `apply` — Apply a preset to an existing project
+
+```bash
+npx shadcn@latest apply [preset] [options]
+```
+
+Applies a preset to an existing project, overwriting preset-driven config, fonts, CSS variables, and detected UI components.
+
+| Flag                | Short | Description                                | Default |
+| ------------------- | ----- | ------------------------------------------ | ------- |
+| `--preset <preset>` | —     | Preset configuration (named, code, or URL) | —       |
+| `--yes`             | `-y`  | Skip confirmation prompt                   | `false` |
+| `--cwd <cwd>`       | `-c`  | Working directory                          | current |
+| `--silent`          | `-s`  | Mute output                                | `false` |
+
+`[preset]` is a shorthand for `--preset <preset>`. If both are provided, they must match.
+If no preset is provided, the CLI offers to open the custom preset builder on `ui.shadcn.com/create`.
+
+### `add` — Add components
+
+> **IMPORTANT:** To compare local components against upstream or to preview changes, ALWAYS use `npx shadcn@latest add <component> --dry-run`, `--diff`, or `--view`. NEVER fetch raw files from GitHub or other sources manually. The CLI handles registry resolution, file paths, and CSS diffing automatically.
+
+```bash
+npx shadcn@latest add [components...] [options]
+```
+
+Accepts component names, registry-prefixed names (`@magicui/shimmer-button`), URLs, or local paths.
+
+| Flag            | Short | Description                                                                                                          | Default |
+| --------------- | ----- | -------------------------------------------------------------------------------------------------------------------- | ------- |
+| `--yes`         | `-y`  | Skip confirmation prompt                                                                                             | `false` |
+| `--overwrite`   | `-o`  | Overwrite existing files                                                                                             | `false` |
+| `--cwd <cwd>`   | `-c`  | Working directory                                                                                                    | current |
+| `--all`         | `-a`  | Add all available components                                                                                         | `false` |
+| `--path <path>` | `-p`  | Target path for the component                                                                                        | —       |
+| `--silent`      | `-s`  | Mute output                                                                                                          | `false` |
+| `--dry-run`     |       | Preview all changes without writing files                                                                            | `false` |
+| `--diff [path]` |       | Show diffs. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`)         | —       |
+| `--view [path]` |       | Show file contents. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`) | —       |
+
+#### Dry-Run Mode
+
+Use `--dry-run` to preview what `add` would do without writing any files. `--diff` and `--view` both imply `--dry-run`.
+
+```bash
+# Preview all changes.
+npx shadcn@latest add button --dry-run
+
+# Show diffs for all files (top 5).
+npx shadcn@latest add button --diff
+
+# Show the diff for a specific file.
+npx shadcn@latest add button --diff button.tsx
+
+# Show contents for all files (top 5).
+npx shadcn@latest add button --view
+
+# Show the full content of a specific file.
+npx shadcn@latest add button --view button.tsx
+
+# Works with URLs too.
+npx shadcn@latest add https://api.npoint.io/abc123 --dry-run
+
+# CSS diffs.
+npx shadcn@latest add button --diff globals.css
+```
+
+**When to use dry-run:**
+
+- When the user asks "what files will this add?" or "what will this change?" — use `--dry-run`.
+- Before overwriting existing components — use `--diff` to preview the changes first.
+- When the user wants to inspect component source code without installing — use `--view`.
+- When checking what CSS changes would be made to `globals.css` — use `--diff globals.css`.
+- When the user asks to review or audit third-party registry code before installing — use `--view` to inspect the source.
+
+> **`npx shadcn@latest add --dry-run` vs `npx shadcn@latest view`:** Prefer `npx shadcn@latest add --dry-run/--diff/--view` over `npx shadcn@latest view` when the user wants to preview changes to their project. `npx shadcn@latest view` only shows raw registry metadata. `npx shadcn@latest add --dry-run` shows exactly what would happen in the user's project: resolved file paths, diffs against existing files, and CSS updates. Use `npx shadcn@latest view` only when the user wants to browse registry info without a project context.
+
+#### Smart Merge from Upstream
+
+See [Updating Components in SKILL.md](./SKILL.md#updating-components) for the full workflow.
+
+### `search` — Search registries
+
+```bash
+npx shadcn@latest search <registries...> [options]
+```
+
+Fuzzy search across registries. Also aliased as `npx shadcn@latest list`. Without `-q`, lists all items.
+
+| Flag                | Short | Description            | Default |
+| ------------------- | ----- | ---------------------- | ------- |
+| `--query <query>`   | `-q`  | Search query           | —       |
+| `--limit <number>`  | `-l`  | Max items per registry | `100`   |
+| `--offset <number>` | `-o`  | Items to skip          | `0`     |
+| `--cwd <cwd>`       | `-c`  | Working directory      | current |
+
+### `view` — View item details
+
+```bash
+npx shadcn@latest view <items...> [options]
+```
+
+Displays item info including file contents. Example: `npx shadcn@latest view @shadcn/button`.
+
+### `docs` — Get component documentation URLs
+
+```bash
+npx shadcn@latest docs <components...> [options]
+```
+
+Outputs resolved URLs for component documentation, examples, and API references. Accepts one or more component names. Fetch the URLs to get the actual content.
+
+Example output for `npx shadcn@latest docs input button`:
+
+```
+base  radix
+
+input
+  docs      https://ui.shadcn.com/docs/components/radix/input
+  examples  https://raw.githubusercontent.com/.../examples/input-example.tsx
+
+button
+  docs      https://ui.shadcn.com/docs/components/radix/button
+  examples  https://raw.githubusercontent.com/.../examples/button-example.tsx
+```
+
+Some components include an `api` link to the underlying library (e.g. `cmdk` for the command component).
+
+### `diff` — Check for updates
+
+Do not use this command. Use `npx shadcn@latest add --diff` instead.
+
+### `info` — Project information
+
+```bash
+npx shadcn@latest info [options]
+```
+
+Displays project info and `components.json` configuration. Run this first to discover the project's framework, aliases, Tailwind version, and resolved paths.
+
+| Flag          | Short | Description       | Default |
+| ------------- | ----- | ----------------- | ------- |
+| `--cwd <cwd>` | `-c`  | Working directory | current |
+
+**Project Info fields:**
+
+| Field                | Type      | Meaning                                                            |
+| -------------------- | --------- | ------------------------------------------------------------------ |
+| `framework`          | `string`  | Detected framework (`next`, `vite`, `react-router`, `start`, etc.) |
+| `frameworkVersion`   | `string`  | Framework version (e.g. `15.2.4`)                                  |
+| `isSrcDir`           | `boolean` | Whether the project uses a `src/` directory                        |
+| `isRSC`              | `boolean` | Whether React Server Components are enabled                        |
+| `isTsx`              | `boolean` | Whether the project uses TypeScript                                |
+| `tailwindVersion`    | `string`  | `"v3"` or `"v4"`                                                   |
+| `tailwindConfigFile` | `string`  | Path to the Tailwind config file                                   |
+| `tailwindCssFile`    | `string`  | Path to the global CSS file                                        |
+| `aliasPrefix`        | `string`  | Import alias prefix (e.g. `@`, `~`, `@/`)                          |
+| `packageManager`     | `string`  | Detected package manager (`npm`, `pnpm`, `yarn`, `bun`)            |
+
+**Components.json fields:**
+
+| Field                | Type      | Meaning                                                                                    |
+| -------------------- | --------- | ------------------------------------------------------------------------------------------ |
+| `base`               | `string`  | Primitive library (`radix` or `base`) — determines component APIs and available props      |
+| `style`              | `string`  | Visual style (e.g. `nova`, `vega`)                                                         |
+| `rsc`                | `boolean` | RSC flag from config                                                                       |
+| `tsx`                | `boolean` | TypeScript flag                                                                            |
+| `tailwind.config`    | `string`  | Tailwind config path                                                                       |
+| `tailwind.css`       | `string`  | Global CSS path — this is where custom CSS variables go                                    |
+| `iconLibrary`        | `string`  | Icon library — determines icon import package (e.g. `lucide-react`, `@tabler/icons-react`) |
+| `aliases.components` | `string`  | Component import alias (e.g. `@/components`)                                               |
+| `aliases.utils`      | `string`  | Utils import alias (e.g. `@/lib/utils`)                                                    |
+| `aliases.ui`         | `string`  | UI component alias (e.g. `@/components/ui`)                                                |
+| `aliases.lib`        | `string`  | Lib alias (e.g. `@/lib`)                                                                   |
+| `aliases.hooks`      | `string`  | Hooks alias (e.g. `@/hooks`)                                                               |
+| `resolvedPaths`      | `object`  | Absolute file-system paths for each alias                                                  |
+| `registries`         | `object`  | Configured custom registries                                                               |
+
+**Links fields:**
+
+The `info` output includes a **Links** section with templated URLs for component docs, source, and examples. For resolved URLs, use `npx shadcn@latest docs <component>` instead.
+
+### `build` — Build a custom registry
+
+```bash
+npx shadcn@latest build [registry] [options]
+```
+
+Builds `registry.json` into individual JSON files for distribution. Default input: `./registry.json`, default output: `./public/r`.
+
+| Flag              | Short | Description       | Default      |
+| ----------------- | ----- | ----------------- | ------------ |
+| `--output <path>` | `-o`  | Output directory  | `./public/r` |
+| `--cwd <cwd>`     | `-c`  | Working directory | current      |
+
+---
+
+## Templates
+
+| Value          | Framework      | Monorepo support |
+| -------------- | -------------- | ---------------- |
+| `next`         | Next.js        | Yes              |
+| `vite`         | Vite           | Yes              |
+| `start`        | TanStack Start | Yes              |
+| `react-router` | React Router   | Yes              |
+| `astro`        | Astro          | Yes              |
+| `laravel`      | Laravel        | No               |
+
+All templates support monorepo scaffolding via the `--monorepo` flag. When passed, the CLI uses a monorepo-specific template directory (e.g. `next-monorepo`, `vite-monorepo`). When neither `--monorepo` nor `--no-monorepo` is passed, the CLI prompts interactively. Laravel does not support monorepo scaffolding.
+
+---
+
+## Presets
+
+Three ways to specify a preset via `--preset`:
+
+1. **Named:** `--preset nova` or `--preset lyra`
+2. **Code:** `--preset a2r6bw` (version-prefixed base62 string, e.g. `a2r6bw` or `b0`)
+3. **URL:** `--preset "https://ui.shadcn.com/init?base=radix&style=nova&..."`
+
+> **IMPORTANT:** Never try to decode, fetch, or resolve preset codes manually. Preset codes are opaque — pass them directly to `npx shadcn@latest init --preset <code>` and let the CLI handle resolution.
+> Use `npx shadcn@latest apply --preset <code>` when overwriting an existing project's preset.
+
+## Switching Presets
+
+Ask the user first: **overwrite**, **merge**, or **skip** existing components?
+
+- **Overwrite / Re-install** → `npx shadcn@latest apply --preset <code>`. Overwrites all detected component files with the new preset styles. Use when the user hasn't customized components.
+- **Merge** → `npx shadcn@latest init --preset <code> --force --no-reinstall`, then run `npx shadcn@latest info` to get the list of installed components and use the [smart merge workflow](./SKILL.md#updating-components) to update them one by one, preserving local changes. Use when the user has customized components.
+- **Skip** → `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS variables, leaves existing components as-is.
+
+Always run preset commands inside the user's project directory. `apply` only works in an existing project with a `components.json` file. The CLI automatically preserves the current base (`base` vs `radix`) from `components.json`. If you must use a scratch/temp directory (e.g. for `--dry-run` comparisons), pass `--base <current-base>` explicitly — preset codes do not encode the base.
diff --git a/.agents/skills/shadcn-ui/vendor/shadcn/customization.md b/.agents/skills/shadcn-ui/vendor/shadcn/customization.md
new file mode 100644
index 00000000000..16954f56b15
--- /dev/null
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/customization.md
@@ -0,0 +1,209 @@
+# Customization & Theming
+
+Components reference semantic CSS variable tokens. Change the variables to change every component.
+
+## Contents
+
+- How it works (CSS variables → Tailwind utilities → components)
+- Color variables and OKLCH format
+- Dark mode setup
+- Changing the theme (presets, CSS variables)
+- Adding custom colors (Tailwind v3 and v4)
+- Border radius
+- Customizing components (variants, className, wrappers)
+- Checking for updates
+
+---
+
+## How It Works
+
+1. CSS variables defined in `:root` (light) and `.dark` (dark mode).
+2. Tailwind maps them to utilities: `bg-primary`, `text-muted-foreground`, etc.
+3. Components use these utilities — changing a variable changes all components that reference it.
+
+---
+
+## Color Variables
+
+Every color follows the `name` / `name-foreground` convention. The base variable is for backgrounds, `-foreground` is for text/icons on that background.
+
+| Variable                                     | Purpose                          |
+| -------------------------------------------- | -------------------------------- |
+| `--background` / `--foreground`              | Page background and default text |
+| `--card` / `--card-foreground`               | Card surfaces                    |
+| `--primary` / `--primary-foreground`         | Primary buttons and actions      |
+| `--secondary` / `--secondary-foreground`     | Secondary actions                |
+| `--muted` / `--muted-foreground`             | Muted/disabled states            |
+| `--accent` / `--accent-foreground`           | Hover and accent states          |
+| `--destructive` / `--destructive-foreground` | Error and destructive actions    |
+| `--border`                                   | Default border color             |
+| `--input`                                    | Form input borders               |
+| `--ring`                                     | Focus ring color                 |
+| `--chart-1` through `--chart-5`              | Chart/data visualization         |
+| `--sidebar-*`                                | Sidebar-specific colors          |
+| `--surface` / `--surface-foreground`         | Secondary surface                |
+
+Colors use OKLCH: `--primary: oklch(0.205 0 0)` where values are lightness (0–1), chroma (0 = gray), and hue (0–360).
+
+---
+
+## Dark Mode
+
+Class-based toggle via `.dark` on the root element. In Next.js, use `next-themes`:
+
+```tsx
+import { ThemeProvider } from "next-themes"
+
+<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+  {children}
+</ThemeProvider>
+```
+
+---
+
+## Changing the Theme
+
+```bash
+# Apply a preset code from ui.shadcn.com.
+npx shadcn@latest apply --preset a2r6bw
+
+# Positional shorthand also works.
+npx shadcn@latest apply a2r6bw
+
+# Switch to a named preset and overwrite existing components.
+npx shadcn@latest apply --preset nova
+
+# Preserve existing components instead.
+npx shadcn@latest init --preset nova --force --no-reinstall
+
+# Use a custom theme URL.
+npx shadcn@latest apply --preset "https://ui.shadcn.com/init?base=radix&style=nova&theme=blue&..."
+```
+
+Or edit CSS variables directly in `globals.css`.
+
+---
+
+## Adding Custom Colors
+
+Add variables to the file at `tailwindCssFile` from `npx shadcn@latest info` (typically `globals.css`). Never create a new CSS file for this.
+
+```css
+/* 1. Define in the global CSS file. */
+:root {
+  --warning: oklch(0.84 0.16 84);
+  --warning-foreground: oklch(0.28 0.07 46);
+}
+.dark {
+  --warning: oklch(0.41 0.11 46);
+  --warning-foreground: oklch(0.99 0.02 95);
+}
+```
+
+```css
+/* 2a. Register with Tailwind v4 (@theme inline). */
+@theme inline {
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+}
+```
+
+When `tailwindVersion` is `"v3"` (check via `npx shadcn@latest info`), register in `tailwind.config.js` instead:
+
+```js
+// 2b. Register with Tailwind v3 (tailwind.config.js).
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        warning: "oklch(var(--warning) / <alpha-value>)",
+        "warning-foreground":
+          "oklch(var(--warning-foreground) / <alpha-value>)",
+      },
+    },
+  },
+}
+```
+
+```tsx
+// 3. Use in components.
+<div className="bg-warning text-warning-foreground">Warning</div>
+```
+
+---
+
+## Border Radius
+
+`--radius` controls border radius globally. Components derive values from it (`rounded-lg` = `var(--radius)`, `rounded-md` = `calc(var(--radius) - 2px)`).
+
+---
+
+## Customizing Components
+
+See also: [rules/styling.md](./rules/styling.md) for Incorrect/Correct examples.
+
+Prefer these approaches in order:
+
+### 1. Built-in variants
+
+```tsx
+<Button variant="outline" size="sm">
+  Click
+</Button>
+```
+
+### 2. Tailwind classes via `className`
+
+```tsx
+<Card className="mx-auto max-w-md">...</Card>
+```
+
+### 3. Add a new variant
+
+Edit the component source to add a variant via `cva`:
+
+```tsx
+// components/ui/button.tsx
+warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+```
+
+### 4. Wrapper components
+
+Compose shadcn/ui primitives into higher-level components:
+
+```tsx
+export function ConfirmDialog({ title, description, onConfirm, children }) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm}>Confirm</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+```
+
+---
+
+## Checking for Updates
+
+```bash
+npx shadcn@latest add button --diff
+```
+
+To preview exactly what would change before updating, use `--dry-run` and `--diff`:
+
+```bash
+npx shadcn@latest add button --dry-run        # see all affected files
+npx shadcn@latest add button --diff button.tsx # see the diff for a specific file
+```
+
+See [Updating Components in SKILL.md](./SKILL.md#updating-components) for the full smart merge workflow.
diff --git a/.agents/skills/shadcn-ui/vendor/shadcn/mcp.md b/.agents/skills/shadcn-ui/vendor/shadcn/mcp.md
new file mode 100644
index 00000000000..15b50e91ec1
--- /dev/null
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/mcp.md
@@ -0,0 +1,94 @@
+# shadcn MCP Server
+
+The CLI includes an MCP server that lets AI assistants search, browse, view, and install components from registries.
+
+---
+
+## Setup
+
+```bash
+shadcn mcp        # start the MCP server (stdio)
+shadcn mcp init   # write config for your editor
+```
+
+Editor config files:
+
+| Editor | Config file |
+|--------|------------|
+| Claude Code | `.mcp.json` |
+| Cursor | `.cursor/mcp.json` |
+| VS Code | `.vscode/mcp.json` |
+| OpenCode | `opencode.json` |
+| Codex | `~/.codex/config.toml` (manual) |
+
+---
+
+## Tools
+
+> **Tip:** MCP tools handle registry operations (search, view, install). For project configuration (aliases, framework, Tailwind version), use `npx shadcn@latest info` — there is no MCP equivalent.
+
+### `shadcn:get_project_registries`
+
+Returns registry names from `components.json`. Errors if no `components.json` exists.
+
+**Input:** none
+
+### `shadcn:list_items_in_registries`
+
+Lists all items from one or more registries.
+
+**Input:** `registries` (string[]), `limit` (number, optional), `offset` (number, optional)
+
+### `shadcn:search_items_in_registries`
+
+Fuzzy search across registries.
+
+**Input:** `registries` (string[]), `query` (string), `limit` (number, optional), `offset` (number, optional)
+
+### `shadcn:view_items_in_registries`
+
+View item details including full file contents.
+
+**Input:** `items` (string[]) — e.g. `["@shadcn/button", "@shadcn/card"]`
+
+### `shadcn:get_item_examples_from_registries`
+
+Find usage examples and demos with source code.
+
+**Input:** `registries` (string[]), `query` (string) — e.g. `"accordion-demo"`, `"button example"`
+
+### `shadcn:get_add_command_for_items`
+
+Returns the CLI install command.
+
+**Input:** `items` (string[]) — e.g. `["@shadcn/button"]`
+
+### `shadcn:get_audit_checklist`
+
+Returns a checklist for verifying components (imports, deps, lint, TypeScript).
+
+**Input:** none
+
+---
+
+## Configuring Registries
+
+Registries are set in `components.json`. The `@shadcn` registry is always built-in.
+
+```json
+{
+  "registries": {
+    "@acme": "https://acme.com/r/{name}.json",
+    "@private": {
+      "url": "https://private.com/r/{name}.json",
+      "headers": { "Authorization": "Bearer ${MY_TOKEN}" }
+    }
+  }
+}
+```
+
+- Names must start with `@`.
+- URLs must contain `{name}`.
+- `${VAR}` references are resolved from environment variables.
+
+Community registry index: `https://ui.shadcn.com/r/registries.json`
diff --git a/.agents/skills/shadcn-ui/vendor/shadcn/rules/base-vs-radix.md b/.agents/skills/shadcn-ui/vendor/shadcn/rules/base-vs-radix.md
new file mode 100644
index 00000000000..c1ed7d111a0
--- /dev/null
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/rules/base-vs-radix.md
@@ -0,0 +1,306 @@
+# Base vs Radix
+
+API differences between `base` and `radix`. Check the `base` field from `npx shadcn@latest info`.
+
+## Contents
+
+- Composition: asChild vs render
+- Button / trigger as non-button element
+- Select (items prop, placeholder, positioning, multiple, object values)
+- ToggleGroup (type vs multiple)
+- Slider (scalar vs array)
+- Accordion (type and defaultValue)
+
+---
+
+## Composition: asChild (radix) vs render (base)
+
+Radix uses `asChild` to replace the default element. Base uses `render`. Don't wrap triggers in extra elements.
+
+**Incorrect:**
+
+```tsx
+<DialogTrigger>
+  <div>
+    <Button>Open</Button>
+  </div>
+</DialogTrigger>
+```
+
+**Correct (radix):**
+
+```tsx
+<DialogTrigger asChild>
+  <Button>Open</Button>
+</DialogTrigger>
+```
+
+**Correct (base):**
+
+```tsx
+<DialogTrigger render={<Button />}>Open</DialogTrigger>
+```
+
+This applies to all trigger and close components: `DialogTrigger`, `SheetTrigger`, `AlertDialogTrigger`, `DropdownMenuTrigger`, `PopoverTrigger`, `TooltipTrigger`, `CollapsibleTrigger`, `DialogClose`, `SheetClose`, `NavigationMenuLink`, `BreadcrumbLink`, `SidebarMenuButton`, `Badge`, `Item`.
+
+---
+
+## Button / trigger as non-button element (base only)
+
+When `render` changes an element to a non-button (`<a>`, `<span>`), add `nativeButton={false}`.
+
+**Incorrect (base):** missing `nativeButton={false}`.
+
+```tsx
+<Button render={<a href="/docs" />}>Read the docs</Button>
+```
+
+**Correct (base):**
+
+```tsx
+<Button render={<a href="/docs" />} nativeButton={false}>
+  Read the docs
+</Button>
+```
+
+**Correct (radix):**
+
+```tsx
+<Button asChild>
+  <a href="/docs">Read the docs</a>
+</Button>
+```
+
+Same for triggers whose `render` is not a `Button`:
+
+```tsx
+// base.
+<PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>
+  Pick date
+</PopoverTrigger>
+```
+
+---
+
+## Select
+
+**items prop (base only).** Base requires an `items` prop on the root. Radix uses inline JSX only.
+
+**Incorrect (base):**
+
+```tsx
+<Select>
+  <SelectTrigger><SelectValue placeholder="Select a fruit" /></SelectTrigger>
+</Select>
+```
+
+**Correct (base):**
+
+```tsx
+const items = [
+  { label: "Select a fruit", value: null },
+  { label: "Apple", value: "apple" },
+  { label: "Banana", value: "banana" },
+]
+
+<Select items={items}>
+  <SelectTrigger>
+    <SelectValue />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      {items.map((item) => (
+        <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>
+      ))}
+    </SelectGroup>
+  </SelectContent>
+</Select>
+```
+
+**Correct (radix):**
+
+```tsx
+<Select>
+  <SelectTrigger>
+    <SelectValue placeholder="Select a fruit" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      <SelectItem value="apple">Apple</SelectItem>
+      <SelectItem value="banana">Banana</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>
+```
+
+**Placeholder.** Base uses a `{ value: null }` item in the items array. Radix uses `<SelectValue placeholder="...">`.
+
+**Content positioning.** Base uses `alignItemWithTrigger`. Radix uses `position`.
+
+```tsx
+// base.
+<SelectContent alignItemWithTrigger={false} side="bottom">
+
+// radix.
+<SelectContent position="popper">
+```
+
+---
+
+## Select — multiple selection and object values (base only)
+
+Base supports `multiple`, render-function children on `SelectValue`, and object values with `itemToStringValue`. Radix is single-select with string values only.
+
+**Correct (base — multiple selection):**
+
+```tsx
+<Select items={items} multiple defaultValue={[]}>
+  <SelectTrigger>
+    <SelectValue>
+      {(value: string[]) => value.length === 0 ? "Select fruits" : `${value.length} selected`}
+    </SelectValue>
+  </SelectTrigger>
+  ...
+</Select>
+```
+
+**Correct (base — object values):**
+
+```tsx
+<Select defaultValue={plans[0]} itemToStringValue={(plan) => plan.name}>
+  <SelectTrigger>
+    <SelectValue>{(value) => value.name}</SelectValue>
+  </SelectTrigger>
+  ...
+</Select>
+```
+
+---
+
+## ToggleGroup
+
+Base uses a `multiple` boolean prop. Radix uses `type="single"` or `type="multiple"`.
+
+**Incorrect (base):**
+
+```tsx
+<ToggleGroup type="single" defaultValue="daily">
+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
+</ToggleGroup>
+```
+
+**Correct (base):**
+
+```tsx
+// Single (no prop needed), defaultValue is always an array.
+<ToggleGroup defaultValue={["daily"]} spacing={2}>
+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
+  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
+</ToggleGroup>
+
+// Multi-selection.
+<ToggleGroup multiple>
+  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+</ToggleGroup>
+```
+
+**Correct (radix):**
+
+```tsx
+// Single, defaultValue is a string.
+<ToggleGroup type="single" defaultValue="daily" spacing={2}>
+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
+  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
+</ToggleGroup>
+
+// Multi-selection.
+<ToggleGroup type="multiple">
+  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+</ToggleGroup>
+```
+
+**Controlled single value:**
+
+```tsx
+// base — wrap/unwrap arrays.
+const [value, setValue] = React.useState("normal")
+<ToggleGroup value={[value]} onValueChange={(v) => setValue(v[0])}>
+
+// radix — plain string.
+const [value, setValue] = React.useState("normal")
+<ToggleGroup type="single" value={value} onValueChange={setValue}>
+```
+
+---
+
+## Slider
+
+Base accepts a plain number for a single thumb. Radix always requires an array.
+
+**Incorrect (base):**
+
+```tsx
+<Slider defaultValue={[50]} max={100} step={1} />
+```
+
+**Correct (base):**
+
+```tsx
+<Slider defaultValue={50} max={100} step={1} />
+```
+
+**Correct (radix):**
+
+```tsx
+<Slider defaultValue={[50]} max={100} step={1} />
+```
+
+Both use arrays for range sliders. Controlled `onValueChange` in base may need a cast:
+
+```tsx
+// base.
+const [value, setValue] = React.useState([0.3, 0.7])
+<Slider value={value} onValueChange={(v) => setValue(v as number[])} />
+
+// radix.
+const [value, setValue] = React.useState([0.3, 0.7])
+<Slider value={value} onValueChange={setValue} />
+```
+
+---
+
+## Accordion
+
+Radix requires `type="single"` or `type="multiple"` and supports `collapsible`. `defaultValue` is a string. Base uses no `type` prop, uses `multiple` boolean, and `defaultValue` is always an array.
+
+**Incorrect (base):**
+
+```tsx
+<Accordion type="single" collapsible defaultValue="item-1">
+  <AccordionItem value="item-1">...</AccordionItem>
+</Accordion>
+```
+
+**Correct (base):**
+
+```tsx
+<Accordion defaultValue={["item-1"]}>
+  <AccordionItem value="item-1">...</AccordionItem>
+</Accordion>
+
+// Multi-select.
+<Accordion multiple defaultValue={["item-1", "item-2"]}>
+  <AccordionItem value="item-1">...</AccordionItem>
+  <AccordionItem value="item-2">...</AccordionItem>
+</Accordion>
+```
+
+**Correct (radix):**
+
+```tsx
+<Accordion type="single" collapsible defaultValue="item-1">
+  <AccordionItem value="item-1">...</AccordionItem>
+</Accordion>
+```
diff --git a/.agents/skills/shadcn-ui/vendor/shadcn/rules/composition.md b/.agents/skills/shadcn-ui/vendor/shadcn/rules/composition.md
new file mode 100644
index 00000000000..0e105837cb8
--- /dev/null
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/rules/composition.md
@@ -0,0 +1,195 @@
+# Component Composition
+
+## Contents
+
+- Items always inside their Group component
+- Callouts use Alert
+- Empty states use Empty component
+- Toast notifications use sonner
+- Choosing between overlay components
+- Dialog, Sheet, and Drawer always need a Title
+- Card structure
+- Button has no isPending or isLoading prop
+- TabsTrigger must be inside TabsList
+- Avatar always needs AvatarFallback
+- Use Separator instead of raw hr or border divs
+- Use Skeleton for loading placeholders
+- Use Badge instead of custom styled spans
+
+---
+
+## Items always inside their Group component
+
+Never render items directly inside the content container.
+
+**Incorrect:**
+
+```tsx
+<SelectContent>
+  <SelectItem value="apple">Apple</SelectItem>
+  <SelectItem value="banana">Banana</SelectItem>
+</SelectContent>
+```
+
+**Correct:**
+
+```tsx
+<SelectContent>
+  <SelectGroup>
+    <SelectItem value="apple">Apple</SelectItem>
+    <SelectItem value="banana">Banana</SelectItem>
+  </SelectGroup>
+</SelectContent>
+```
+
+This applies to all group-based components:
+
+| Item | Group |
+|------|-------|
+| `SelectItem`, `SelectLabel` | `SelectGroup` |
+| `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSub` | `DropdownMenuGroup` |
+| `MenubarItem` | `MenubarGroup` |
+| `ContextMenuItem` | `ContextMenuGroup` |
+| `CommandItem` | `CommandGroup` |
+
+---
+
+## Callouts use Alert
+
+```tsx
+<Alert>
+  <AlertTitle>Warning</AlertTitle>
+  <AlertDescription>Something needs attention.</AlertDescription>
+</Alert>
+```
+
+---
+
+## Empty states use Empty component
+
+```tsx
+<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><FolderIcon /></EmptyMedia>
+    <EmptyTitle>No projects yet</EmptyTitle>
+    <EmptyDescription>Get started by creating a new project.</EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button>Create Project</Button>
+  </EmptyContent>
+</Empty>
+```
+
+---
+
+## Toast notifications use sonner
+
+```tsx
+import { toast } from "sonner"
+
+toast.success("Changes saved.")
+toast.error("Something went wrong.")
+toast("File deleted.", {
+  action: { label: "Undo", onClick: () => undoDelete() },
+})
+```
+
+---
+
+## Choosing between overlay components
+
+| Use case | Component |
+|----------|-----------|
+| Focused task that requires input | `Dialog` |
+| Destructive action confirmation | `AlertDialog` |
+| Side panel with details or filters | `Sheet` |
+| Mobile-first bottom panel | `Drawer` |
+| Quick info on hover | `HoverCard` |
+| Small contextual content on click | `Popover` |
+
+---
+
+## Dialog, Sheet, and Drawer always need a Title
+
+`DialogTitle`, `SheetTitle`, `DrawerTitle` are required for accessibility. Use `className="sr-only"` if visually hidden.
+
+```tsx
+<DialogContent>
+  <DialogHeader>
+    <DialogTitle>Edit Profile</DialogTitle>
+    <DialogDescription>Update your profile.</DialogDescription>
+  </DialogHeader>
+  ...
+</DialogContent>
+```
+
+---
+
+## Card structure
+
+Use full composition — don't dump everything into `CardContent`:
+
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>Team Members</CardTitle>
+    <CardDescription>Manage your team.</CardDescription>
+  </CardHeader>
+  <CardContent>...</CardContent>
+  <CardFooter>
+    <Button>Invite</Button>
+  </CardFooter>
+</Card>
+```
+
+---
+
+## Button has no isPending or isLoading prop
+
+Compose with `Spinner` + `data-icon` + `disabled`:
+
+```tsx
+<Button disabled>
+  <Spinner data-icon="inline-start" />
+  Saving...
+</Button>
+```
+
+---
+
+## TabsTrigger must be inside TabsList
+
+Never render `TabsTrigger` directly inside `Tabs` — always wrap in `TabsList`:
+
+```tsx
+<Tabs defaultValue="account">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">...</TabsContent>
+</Tabs>
+```
+
+---
+
+## Avatar always needs AvatarFallback
+
+Always include `AvatarFallback` for when the image fails to load:
+
+```tsx
+<Avatar>
+  <AvatarImage src="/avatar.png" alt="User" />
+  <AvatarFallback>JD</AvatarFallback>
+</Avatar>
+```
+
+---
+
+## Use existing components instead of custom markup
+
+| Instead of | Use |
+|---|---|
+| `<hr>` or `<div className="border-t">` | `<Separator />` |
+| `<div className="animate-pulse">` with styled divs | `<Skeleton className="h-4 w-3/4" />` |
+| `<span className="rounded-full bg-green-100 ...">` | `<Badge variant="secondary">` |
diff --git a/.agents/skills/shadcn-ui/vendor/shadcn/rules/forms.md b/.agents/skills/shadcn-ui/vendor/shadcn/rules/forms.md
new file mode 100644
index 00000000000..f451e2f7bc1
--- /dev/null
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/rules/forms.md
@@ -0,0 +1,192 @@
+# Forms & Inputs
+
+## Contents
+
+- Forms use FieldGroup + Field
+- InputGroup requires InputGroupInput/InputGroupTextarea
+- Buttons inside inputs use InputGroup + InputGroupAddon
+- Option sets (2–7 choices) use ToggleGroup
+- FieldSet + FieldLegend for grouping related fields
+- Field validation and disabled states
+
+---
+
+## Forms use FieldGroup + Field
+
+Always use `FieldGroup` + `Field` — never raw `div` with `space-y-*`:
+
+```tsx
+<FieldGroup>
+  <Field>
+    <FieldLabel htmlFor="email">Email</FieldLabel>
+    <Input id="email" type="email" />
+  </Field>
+  <Field>
+    <FieldLabel htmlFor="password">Password</FieldLabel>
+    <Input id="password" type="password" />
+  </Field>
+</FieldGroup>
+```
+
+Use `Field orientation="horizontal"` for settings pages. Use `FieldLabel className="sr-only"` for visually hidden labels.
+
+**Choosing form controls:**
+
+- Simple text input → `Input`
+- Dropdown with predefined options → `Select`
+- Searchable dropdown → `Combobox`
+- Native HTML select (no JS) → `native-select`
+- Boolean toggle → `Switch` (for settings) or `Checkbox` (for forms)
+- Single choice from few options → `RadioGroup`
+- Toggle between 2–5 options → `ToggleGroup` + `ToggleGroupItem`
+- OTP/verification code → `InputOTP`
+- Multi-line text → `Textarea`
+
+---
+
+## InputGroup requires InputGroupInput/InputGroupTextarea
+
+Never use raw `Input` or `Textarea` inside an `InputGroup`.
+
+**Incorrect:**
+
+```tsx
+<InputGroup>
+  <Input placeholder="Search..." />
+</InputGroup>
+```
+
+**Correct:**
+
+```tsx
+import { InputGroup, InputGroupInput } from "@/components/ui/input-group"
+
+<InputGroup>
+  <InputGroupInput placeholder="Search..." />
+</InputGroup>
+```
+
+---
+
+## Buttons inside inputs use InputGroup + InputGroupAddon
+
+Never place a `Button` directly inside or adjacent to an `Input` with custom positioning.
+
+**Incorrect:**
+
+```tsx
+<div className="relative">
+  <Input placeholder="Search..." className="pr-10" />
+  <Button className="absolute right-0 top-0" size="icon">
+    <SearchIcon />
+  </Button>
+</div>
+```
+
+**Correct:**
+
+```tsx
+import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group"
+
+<InputGroup>
+  <InputGroupInput placeholder="Search..." />
+  <InputGroupAddon>
+    <Button size="icon">
+      <SearchIcon data-icon="inline-start" />
+    </Button>
+  </InputGroupAddon>
+</InputGroup>
+```
+
+---
+
+## Option sets (2–7 choices) use ToggleGroup
+
+Don't manually loop `Button` components with active state.
+
+**Incorrect:**
+
+```tsx
+const [selected, setSelected] = useState("daily")
+
+<div className="flex gap-2">
+  {["daily", "weekly", "monthly"].map((option) => (
+    <Button
+      key={option}
+      variant={selected === option ? "default" : "outline"}
+      onClick={() => setSelected(option)}
+    >
+      {option}
+    </Button>
+  ))}
+</div>
+```
+
+**Correct:**
+
+```tsx
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+
+<ToggleGroup spacing={2}>
+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
+  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
+  <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
+</ToggleGroup>
+```
+
+Combine with `Field` for labelled toggle groups:
+
+```tsx
+<Field orientation="horizontal">
+  <FieldTitle id="theme-label">Theme</FieldTitle>
+  <ToggleGroup aria-labelledby="theme-label" spacing={2}>
+    <ToggleGroupItem value="light">Light</ToggleGroupItem>
+    <ToggleGroupItem value="dark">Dark</ToggleGroupItem>
+    <ToggleGroupItem value="system">System</ToggleGroupItem>
+  </ToggleGroup>
+</Field>
+```
+
+> **Note:** `defaultValue` and `type`/`multiple` props differ between base and radix. See [base-vs-radix.md](./base-vs-radix.md#togglegroup).
+
+---
+
+## FieldSet + FieldLegend for grouping related fields
+
+Use `FieldSet` + `FieldLegend` for related checkboxes, radios, or switches — not `div` with a heading:
+
+```tsx
+<FieldSet>
+  <FieldLegend variant="label">Preferences</FieldLegend>
+  <FieldDescription>Select all that apply.</FieldDescription>
+  <FieldGroup className="gap-3">
+    <Field orientation="horizontal">
+      <Checkbox id="dark" />
+      <FieldLabel htmlFor="dark" className="font-normal">Dark mode</FieldLabel>
+    </Field>
+  </FieldGroup>
+</FieldSet>
+```
+
+---
+
+## Field validation and disabled states
+
+Both attributes are needed — `data-invalid`/`data-disabled` styles the field (label, description), while `aria-invalid`/`disabled` styles the control.
+
+```tsx
+// Invalid.
+<Field data-invalid>
+  <FieldLabel htmlFor="email">Email</FieldLabel>
+  <Input id="email" aria-invalid />
+  <FieldDescription>Invalid email address.</FieldDescription>
+</Field>
+
+// Disabled.
+<Field data-disabled>
+  <FieldLabel htmlFor="email">Email</FieldLabel>
+  <Input id="email" disabled />
+</Field>
+```
+
+Works for all controls: `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroupItem`, `Switch`, `Slider`, `NativeSelect`, `InputOTP`.
diff --git a/.agents/skills/shadcn-ui/vendor/shadcn/rules/icons.md b/.agents/skills/shadcn-ui/vendor/shadcn/rules/icons.md
new file mode 100644
index 00000000000..bba8102f01e
--- /dev/null
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/rules/icons.md
@@ -0,0 +1,101 @@
+# Icons
+
+**Always use the project's configured `iconLibrary` for imports.** Check the `iconLibrary` field from project context: `lucide` → `lucide-react`, `tabler` → `@tabler/icons-react`, etc. Never assume `lucide-react`.
+
+---
+
+## Icons in Button use data-icon attribute
+
+Add `data-icon="inline-start"` (prefix) or `data-icon="inline-end"` (suffix) to the icon. No sizing classes on the icon.
+
+**Incorrect:**
+
+```tsx
+<Button>
+  <SearchIcon className="mr-2 size-4" />
+  Search
+</Button>
+```
+
+**Correct:**
+
+```tsx
+<Button>
+  <SearchIcon data-icon="inline-start"/>
+  Search
+</Button>
+
+<Button>
+  Next
+  <ArrowRightIcon data-icon="inline-end"/>
+</Button>
+```
+
+---
+
+## No sizing classes on icons inside components
+
+Components handle icon sizing via CSS. Don't add `size-4`, `w-4 h-4`, or other sizing classes to icons inside `Button`, `DropdownMenuItem`, `Alert`, `Sidebar*`, or other shadcn components. Unless the user explicitly asks for custom icon sizes.
+
+**Incorrect:**
+
+```tsx
+<Button>
+  <SearchIcon className="size-4" data-icon="inline-start" />
+  Search
+</Button>
+
+<DropdownMenuItem>
+  <SettingsIcon className="mr-2 size-4" />
+  Settings
+</DropdownMenuItem>
+```
+
+**Correct:**
+
+```tsx
+<Button>
+  <SearchIcon data-icon="inline-start" />
+  Search
+</Button>
+
+<DropdownMenuItem>
+  <SettingsIcon />
+  Settings
+</DropdownMenuItem>
+```
+
+---
+
+## Pass icons as component objects, not string keys
+
+Use `icon={CheckIcon}`, not a string key to a lookup map.
+
+**Incorrect:**
+
+```tsx
+const iconMap = {
+  check: CheckIcon,
+  alert: AlertIcon,
+}
+
+function StatusBadge({ icon }: { icon: string }) {
+  const Icon = iconMap[icon]
+  return <Icon />
+}
+
+<StatusBadge icon="check" />
+```
+
+**Correct:**
+
+```tsx
+// Import from the project's configured iconLibrary (e.g. lucide-react, @tabler/icons-react).
+import { CheckIcon } from "lucide-react"
+
+function StatusBadge({ icon: Icon }: { icon: React.ComponentType }) {
+  return <Icon />
+}
+
+<StatusBadge icon={CheckIcon} />
+```
diff --git a/.agents/skills/shadcn-ui/vendor/shadcn/rules/styling.md b/.agents/skills/shadcn-ui/vendor/shadcn/rules/styling.md
new file mode 100644
index 00000000000..38d473212b2
--- /dev/null
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/rules/styling.md
@@ -0,0 +1,162 @@
+# Styling & Customization
+
+See [customization.md](../customization.md) for theming, CSS variables, and adding custom colors.
+
+## Contents
+
+- Semantic colors
+- Built-in variants first
+- className for layout only
+- No space-x-* / space-y-*
+- Prefer size-* over w-* h-* when equal
+- Prefer truncate shorthand
+- No manual dark: color overrides
+- Use cn() for conditional classes
+- No manual z-index on overlay components
+
+---
+
+## Semantic colors
+
+**Incorrect:**
+
+```tsx
+<div className="bg-blue-500 text-white">
+  <p className="text-gray-600">Secondary text</p>
+</div>
+```
+
+**Correct:**
+
+```tsx
+<div className="bg-primary text-primary-foreground">
+  <p className="text-muted-foreground">Secondary text</p>
+</div>
+```
+
+---
+
+## No raw color values for status/state indicators
+
+For positive, negative, or status indicators, use Badge variants, semantic tokens like `text-destructive`, or define custom CSS variables — don't reach for raw Tailwind colors.
+
+**Incorrect:**
+
+```tsx
+<span className="text-emerald-600">+20.1%</span>
+<span className="text-green-500">Active</span>
+<span className="text-red-600">-3.2%</span>
+```
+
+**Correct:**
+
+```tsx
+<Badge variant="secondary">+20.1%</Badge>
+<Badge>Active</Badge>
+<span className="text-destructive">-3.2%</span>
+```
+
+If you need a success/positive color that doesn't exist as a semantic token, use a Badge variant or ask the user about adding a custom CSS variable to the theme (see [customization.md](../customization.md)).
+
+---
+
+## Built-in variants first
+
+**Incorrect:**
+
+```tsx
+<Button className="border border-input bg-transparent hover:bg-accent">
+  Click me
+</Button>
+```
+
+**Correct:**
+
+```tsx
+<Button variant="outline">Click me</Button>
+```
+
+---
+
+## className for layout only
+
+Use `className` for layout (e.g. `max-w-md`, `mx-auto`, `mt-4`), **not** for overriding component colors or typography. To change colors, use semantic tokens, built-in variants, or CSS variables.
+
+**Incorrect:**
+
+```tsx
+<Card className="bg-blue-100 text-blue-900 font-bold">
+  <CardContent>Dashboard</CardContent>
+</Card>
+```
+
+**Correct:**
+
+```tsx
+<Card className="max-w-md mx-auto">
+  <CardContent>Dashboard</CardContent>
+</Card>
+```
+
+To customize a component's appearance, prefer these approaches in order:
+1. **Built-in variants** — `variant="outline"`, `variant="destructive"`, etc.
+2. **Semantic color tokens** — `bg-primary`, `text-muted-foreground`.
+3. **CSS variables** — define custom colors in the global CSS file (see [customization.md](../customization.md)).
+
+---
+
+## No space-x-* / space-y-*
+
+Use `gap-*` instead. `space-y-4` → `flex flex-col gap-4`. `space-x-2` → `flex gap-2`.
+
+```tsx
+<div className="flex flex-col gap-4">
+  <Input />
+  <Input />
+  <Button>Submit</Button>
+</div>
+```
+
+---
+
+## Prefer size-* over w-* h-* when equal
+
+`size-10` not `w-10 h-10`. Applies to icons, avatars, skeletons, etc.
+
+---
+
+## Prefer truncate shorthand
+
+`truncate` not `overflow-hidden text-ellipsis whitespace-nowrap`.
+
+---
+
+## No manual dark: color overrides
+
+Use semantic tokens — they handle light/dark via CSS variables. `bg-background text-foreground` not `bg-white dark:bg-gray-950`.
+
+---
+
+## Use cn() for conditional classes
+
+Use the `cn()` utility from the project for conditional or merged class names. Don't write manual ternaries in className strings.
+
+**Incorrect:**
+
+```tsx
+<div className={`flex items-center ${isActive ? "bg-primary text-primary-foreground" : "bg-muted"}`}>
+```
+
+**Correct:**
+
+```tsx
+import { cn } from "@/lib/utils"
+
+<div className={cn("flex items-center", isActive ? "bg-primary text-primary-foreground" : "bg-muted")}>
+```
+
+---
+
+## No manual z-index on overlay components
+
+`Dialog`, `Sheet`, `Drawer`, `AlertDialog`, `DropdownMenu`, `Popover`, `Tooltip`, `HoverCard` handle their own stacking. Never add `z-50` or `z-[999]`.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 00000000000..87747788d13
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: ['https://afdian.com/a/new-api'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
diff --git a/AGENTS.md b/AGENTS.md
index e2052d79d6e..c18b5e32583 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -7,7 +7,7 @@ This is an AI API gateway/proxy built with Go. It aggregates 40+ upstream AI pro
 ## Tech Stack
 
 - **Backend**: Go 1.22+, Gin web framework, GORM v2 ORM
-- **Frontend**: React 19, TypeScript, Rsbuild, Radix UI, Tailwind CSS
+- **Frontend**: React 19, TypeScript, Rsbuild, Base UI, Tailwind CSS
 - **Databases**: SQLite, MySQL, PostgreSQL (all three must be supported)
 - **Cache**: Redis (go-redis) + in-memory cache
 - **Auth**: JWT, WebAuthn/Passkeys, OAuth (GitHub, Discord, OIDC, etc.)
@@ -34,7 +34,7 @@ i18n/          — Backend internationalization (go-i18n, en/zh)
 oauth/         — OAuth provider implementations
 pkg/           — Internal packages (cachex, ionet)
 web/             — Frontend themes container
-  web/default/   — Default frontend (React 19, Rsbuild, Radix UI, Tailwind)
+ web/default/   — Default frontend (React 19, Rsbuild, Base UI, Tailwind)
   web/classic/   — Classic frontend (React 18, Vite, Semi Design)
   web/default/src/i18n/ — Frontend internationalization (i18next, zh/en/fr/ru/ja/vi)
 ```
diff --git a/CLAUDE.md b/CLAUDE.md
index a4c3f048a96..4b084154897 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -7,7 +7,7 @@ This is an AI API gateway/proxy built with Go. It aggregates 40+ upstream AI pro
 ## Tech Stack
 
 - **Backend**: Go 1.22+, Gin web framework, GORM v2 ORM
-- **Frontend**: React 19, TypeScript, Rsbuild, Radix UI, Tailwind CSS
+- **Frontend**: React 19, TypeScript, Rsbuild, Base UI, Tailwind CSS
 - **Databases**: SQLite, MySQL, PostgreSQL (all three must be supported)
 - **Cache**: Redis (go-redis) + in-memory cache
 - **Auth**: JWT, WebAuthn/Passkeys, OAuth (GitHub, Discord, OIDC, etc.)
@@ -34,7 +34,7 @@ i18n/          — Backend internationalization (go-i18n, en/zh)
 oauth/         — OAuth provider implementations
 pkg/           — Internal packages (cachex, ionet)
 web/             — Frontend themes container
-  web/default/   — Default frontend (React 19, Rsbuild, Radix UI, Tailwind)
+ web/default/   — Default frontend (React 19, Rsbuild, Base UI, Tailwind)
   web/classic/   — Classic frontend (React 18, Vite, Semi Design)
   web/default/src/i18n/ — Frontend internationalization (i18next, zh/en/fr/ru/ja/vi)
 ```
diff --git a/web/default/AGENTS.md b/web/default/AGENTS.md
index 93c84c8d367..01a2407f89b 100644
--- a/web/default/AGENTS.md
+++ b/web/default/AGENTS.md
@@ -17,7 +17,7 @@
 | 表格与列表 | @tanstack/react-table、@tanstack/react-virtual |
 | 国际化   | i18next、react-i18next、i18next-browser-languagedetector |
 | 日期     | Day.js |
-| UI 与样式 | Radix UI、Lucide React、Tailwind CSS、clsx / class-variance-authority |
+| UI 与样式 | Base UI、Hugeicons、Tailwind CSS、clsx / class-variance-authority |
 | 表单     | React Hook Form、Zod |
 | 图表     | @visactor/vchart、@visactor/react-vchart |
 | 工具     | qrcode.react、prettier、eslint、vitest（可选）|
diff --git a/web/default/bun.lock b/web/default/bun.lock
index 071e1751078..f9dc0300f2b 100644
--- a/web/default/bun.lock
+++ b/web/default/bun.lock
@@ -1,35 +1,15 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "newapi-web",
       "dependencies": {
+        "@base-ui/react": "^1.4.1",
         "@fontsource-variable/public-sans": "^5.2.7",
         "@hookform/resolvers": "^5.2.2",
+        "@hugeicons/core-free-icons": "^4.1.1",
+        "@hugeicons/react": "^1.1.6",
         "@lobehub/icons": "^4.0.3",
-        "@radix-ui/react-accordion": "^1.2.12",
-        "@radix-ui/react-alert-dialog": "^1.1.15",
-        "@radix-ui/react-avatar": "^1.1.11",
-        "@radix-ui/react-checkbox": "^1.3.3",
-        "@radix-ui/react-collapsible": "^1.1.12",
-        "@radix-ui/react-dialog": "^1.1.15",
-        "@radix-ui/react-direction": "^1.1.1",
-        "@radix-ui/react-dropdown-menu": "^2.1.16",
-        "@radix-ui/react-hover-card": "^1.1.15",
-        "@radix-ui/react-icons": "^1.3.2",
-        "@radix-ui/react-label": "^2.1.8",
-        "@radix-ui/react-popover": "^1.1.15",
-        "@radix-ui/react-progress": "^1.1.8",
-        "@radix-ui/react-radio-group": "^1.3.8",
-        "@radix-ui/react-scroll-area": "^1.2.10",
-        "@radix-ui/react-select": "^2.2.6",
-        "@radix-ui/react-separator": "^1.1.8",
-        "@radix-ui/react-slot": "^1.2.4",
-        "@radix-ui/react-switch": "^1.2.6",
-        "@radix-ui/react-tabs": "^1.1.13",
-        "@radix-ui/react-tooltip": "^1.2.8",
-        "@radix-ui/react-use-controllable-state": "^1.2.2",
         "@tailwindcss/postcss": "^4.2.2",
         "@tanstack/react-query": "^5.95.2",
         "@tanstack/react-router": "^1.168.23",
@@ -43,6 +23,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
+        "date-fns": "^4.1.0",
         "dayjs": "^1.11.19",
         "i18next": "^25.7.4",
         "i18next-browser-languagedetector": "^8.2.0",
@@ -50,6 +31,7 @@
         "lucide-react": "^1.7.0",
         "motion": "^12.38.0",
         "nanoid": "^5.1.6",
+        "next-themes": "^0.4.6",
         "qrcode.react": "^4.2.0",
         "react": "^19.2.4",
         "react-day-picker": "^9.14.0",
@@ -58,7 +40,9 @@
         "react-i18next": "^16.5.2",
         "react-icons": "^5.5.0",
         "react-markdown": "^10.1.0",
+        "react-resizable-panels": "^4.11.0",
         "react-top-loading-bar": "^3.0.2",
+        "recharts": "3.8.0",
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.1",
         "shiki": "^4.0.2",
@@ -186,9 +170,9 @@
 
     "@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
 
-    "@base-ui/react": ["@base-ui/react@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.28.4", "@base-ui/utils": "0.2.3", "@floating-ui/react-dom": "^2.1.6", "@floating-ui/utils": "^0.2.10", "reselect": "^5.1.1", "tabbable": "^6.3.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-4USBWz++DUSLTuIYpbYkSgy1F9ZmNG9S/lXvlUN6qMK0P0RlW+6eQmDUB4DgZ7HVvtXl4pvi4z5J2fv6Z3+9hg=="],
+    "@base-ui/react": ["@base-ui/react@1.4.1", "", { "dependencies": { "@babel/runtime": "^7.29.2", "@base-ui/utils": "0.2.8", "@floating-ui/react-dom": "^2.1.8", "@floating-ui/utils": "^0.2.11", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@date-fns/tz": "^1.2.0", "@types/react": "^17 || ^18 || ^19", "date-fns": "^4.0.0", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@date-fns/tz", "@types/react", "date-fns"] }, "sha512-Ab5/LIhcmL8BQcsBUYiOfkSDRdLpvgUBzMK30cu684JPcLclYlztharvCZyNNgzJtbAiREzI9q0pI5erHCMgCw=="],
 
-    "@base-ui/utils": ["@base-ui/utils@0.2.3", "", { "dependencies": { "@babel/runtime": "^7.28.4", "@floating-ui/utils": "^0.2.10", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-/CguQ2PDaOzeVOkllQR8nocJ0FFIDqsWIcURsVmm53QGo8NhFNpePjNlyPIB41luxfOqnG7PU0xicMEw3ls7XQ=="],
+    "@base-ui/utils": ["@base-ui/utils@0.2.8", "", { "dependencies": { "@babel/runtime": "^7.29.2", "@floating-ui/utils": "^0.2.11", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-jvOi+c+ftGlGotNcKnzPVg2IhCaDTB6/6R3JeqdjdXktuAJi3wKH9T7+svuaKh1mmfVU11UWzUZVH74JDfi/wQ=="],
 
     "@braintree/sanitize-url": ["@braintree/sanitize-url@7.1.2", "", {}, "sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA=="],
 
@@ -340,6 +324,10 @@
 
     "@hookform/resolvers": ["@hookform/resolvers@5.2.2", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="],
 
+    "@hugeicons/core-free-icons": ["@hugeicons/core-free-icons@4.1.1", "", {}, "sha512-teqIBvPHl90ygIwKyJwTxOH8aNp1X1PjDTcMvLkEwdPxPD+8mssrZ5kXKIAJJFYPsz69a8LYQY0UPid4PAdavg=="],
+
+    "@hugeicons/react": ["@hugeicons/react@1.1.6", "", { "peerDependencies": { "react": ">=16.0.0" } }, "sha512-c2LhXJMAW5wN1pC/smBXG0YPqUON6ceR/ZdXHCjEI9KvB+hjtqYjmzIxok5hAQOeXGz0WtORgCQMzqewFKAZwg=="],
+
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
 
     "@humanfs/node": ["@humanfs/node@0.16.7", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="],
@@ -504,78 +492,34 @@
 
     "@primer/octicons": ["@primer/octicons@19.23.1", "", { "dependencies": { "object-assign": "^4.1.1" } }, "sha512-CzjGmxkmNhyst6EekrS3SJPdtzgIkUMP/LSJch65y99/kmiFXbO1a+q7zoYe3hnI9NaOM0IN+ydDIbOmd8YqcA=="],
 
-    "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
-
     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
 
-    "@radix-ui/react-accordion": ["@radix-ui/react-accordion@1.2.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collapsible": "1.1.12", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA=="],
-
-    "@radix-ui/react-alert-dialog": ["@radix-ui/react-alert-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dialog": "1.1.15", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw=="],
-
     "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
 
-    "@radix-ui/react-avatar": ["@radix-ui/react-avatar@1.1.11", "", { "dependencies": { "@radix-ui/react-context": "1.1.3", "@radix-ui/react-primitive": "2.1.4", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-is-hydrated": "0.1.0", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0Qk603AHGV28BOBO34p7IgD5m+V5Sg/YovfayABkoDDBM5d3NCx0Mp4gGrjzLGes1jV5eNOE1r3itqOR33VC6Q=="],
-
-    "@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.3.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw=="],
-
-    "@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA=="],
-
-    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
-
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
 
     "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
     "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw=="],
 
-    "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
-
     "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
 
-    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw=="],
-
     "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
 
     "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
 
-    "@radix-ui/react-hover-card": ["@radix-ui/react-hover-card@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg=="],
-
-    "@radix-ui/react-icons": ["@radix-ui/react-icons@1.3.2", "", { "peerDependencies": { "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc" } }, "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g=="],
-
     "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
 
-    "@radix-ui/react-label": ["@radix-ui/react-label@2.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A=="],
-
-    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg=="],
-
-    "@radix-ui/react-popover": ["@radix-ui/react-popover@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA=="],
-
     "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="],
 
     "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
 
     "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],
 
-    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
-
-    "@radix-ui/react-progress": ["@radix-ui/react-progress@1.1.8", "", { "dependencies": { "@radix-ui/react-context": "1.1.3", "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA=="],
-
-    "@radix-ui/react-radio-group": ["@radix-ui/react-radio-group@1.3.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ=="],
-
-    "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA=="],
-
-    "@radix-ui/react-scroll-area": ["@radix-ui/react-scroll-area@1.2.10", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A=="],
-
-    "@radix-ui/react-select": ["@radix-ui/react-select@2.2.6", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-visually-hidden": "1.2.3", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ=="],
-
-    "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g=="],
+    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
 
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
 
-    "@radix-ui/react-switch": ["@radix-ui/react-switch@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ=="],
-
-    "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.13", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A=="],
-
     "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg=="],
 
     "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
@@ -586,12 +530,8 @@
 
     "@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.1", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g=="],
 
-    "@radix-ui/react-use-is-hydrated": ["@radix-ui/react-use-is-hydrated@0.1.0", "", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA=="],
-
     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
-    "@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ=="],
-
     "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.1", "", { "dependencies": { "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w=="],
 
     "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
@@ -686,6 +626,8 @@
 
     "@rc-component/virtual-list": ["@rc-component/virtual-list@1.0.2", "", { "dependencies": { "@babel/runtime": "^7.20.0", "@rc-component/resize-observer": "^1.0.1", "@rc-component/util": "^1.4.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-uvTol/mH74FYsn5loDGJxo+7kjkO4i+y4j87Re1pxJBs0FaeuMuLRzQRGaXwnMcV1CxpZLi2Z56Rerj2M00fjQ=="],
 
+    "@reduxjs/toolkit": ["@reduxjs/toolkit@2.11.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^11.0.0", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ=="],
+
     "@resvg/resvg-js": ["@resvg/resvg-js@2.4.1", "", { "optionalDependencies": { "@resvg/resvg-js-android-arm-eabi": "2.4.1", "@resvg/resvg-js-android-arm64": "2.4.1", "@resvg/resvg-js-darwin-arm64": "2.4.1", "@resvg/resvg-js-darwin-x64": "2.4.1", "@resvg/resvg-js-linux-arm-gnueabihf": "2.4.1", "@resvg/resvg-js-linux-arm64-gnu": "2.4.1", "@resvg/resvg-js-linux-arm64-musl": "2.4.1", "@resvg/resvg-js-linux-x64-gnu": "2.4.1", "@resvg/resvg-js-linux-x64-musl": "2.4.1", "@resvg/resvg-js-win32-arm64-msvc": "2.4.1", "@resvg/resvg-js-win32-ia32-msvc": "2.4.1", "@resvg/resvg-js-win32-x64-msvc": "2.4.1" } }, "sha512-wTOf1zerZX8qYcMmLZw3czR4paI4hXqPjShNwJRh5DeHxvgffUS5KM7XwxtbIheUW6LVYT5fhT2AJiP6mU7U4A=="],
 
     "@resvg/resvg-js-android-arm-eabi": ["@resvg/resvg-js-android-arm-eabi@2.4.1", "", { "os": "android", "cpu": "arm" }, "sha512-AA6f7hS0FAPpvQMhBCf6f1oD1LdlqNXKCxAAPpKh6tR11kqV0YIB9zOlIYgITM14mq2YooLFl6XIbbvmY+jwUw=="],
@@ -974,6 +916,8 @@
 
     "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
+    "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],
+
     "@types/validate-npm-package-name": ["@types/validate-npm-package-name@4.0.2", "", {}, "sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw=="],
 
     "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.58.1", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.58.1", "@typescript-eslint/type-utils": "8.58.1", "@typescript-eslint/utils": "8.58.1", "@typescript-eslint/visitor-keys": "8.58.1", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.58.1", "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-eSkwoemjo76bdXl2MYqtxg51HNwUSkWfODUOQ3PaTLZGh9uIWWFZIjyjaJnex7wXDu+TRx+ATsnSxdN9YWfRTQ=="],
@@ -1212,7 +1156,7 @@
 
     "d3": ["d3@7.9.0", "", { "dependencies": { "d3-array": "3", "d3-axis": "3", "d3-brush": "3", "d3-chord": "3", "d3-color": "3", "d3-contour": "4", "d3-delaunay": "6", "d3-dispatch": "3", "d3-drag": "3", "d3-dsv": "3", "d3-ease": "3", "d3-fetch": "3", "d3-force": "3", "d3-format": "3", "d3-geo": "3", "d3-hierarchy": "3", "d3-interpolate": "3", "d3-path": "3", "d3-polygon": "3", "d3-quadtree": "3", "d3-random": "3", "d3-scale": "4", "d3-scale-chromatic": "3", "d3-selection": "3", "d3-shape": "3", "d3-time": "3", "d3-time-format": "4", "d3-timer": "3", "d3-transition": "3", "d3-zoom": "3" } }, "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA=="],
 
-    "d3-array": ["d3-array@1.2.4", "", {}, "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="],
+    "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
 
     "d3-axis": ["d3-axis@3.0.0", "", {}, "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="],
 
@@ -1288,6 +1232,8 @@
 
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
+    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
+
     "decode-named-character-reference": ["decode-named-character-reference@1.3.0", "", { "dependencies": { "character-entities": "^2.0.0" } }, "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q=="],
 
     "decode-uri-component": ["decode-uri-component@0.4.1", "", {}, "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ=="],
@@ -1412,7 +1358,7 @@
 
     "etag": ["etag@1.8.1", "", {}, "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="],
 
-    "eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
+    "eventemitter3": ["eventemitter3@5.0.4", "", {}, "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw=="],
 
     "eventsource": ["eventsource@3.0.7", "", { "dependencies": { "eventsource-parser": "^3.0.1" } }, "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA=="],
 
@@ -1610,7 +1556,7 @@
 
     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
 
-    "immer": ["immer@11.1.4", "", {}, "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw=="],
+    "immer": ["immer@10.2.0", "", {}, "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw=="],
 
     "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],
 
@@ -1964,6 +1910,8 @@
 
     "negotiator": ["negotiator@1.0.0", "", {}, "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg=="],
 
+    "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
+
     "node-domexception": ["node-domexception@1.0.0", "", {}, "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ=="],
 
     "node-fetch": ["node-fetch@3.3.2", "", { "dependencies": { "data-uri-to-buffer": "^4.0.0", "fetch-blob": "^3.1.4", "formdata-polyfill": "^4.0.10" } }, "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA=="],
@@ -2162,12 +2110,16 @@
 
     "react-merge-refs": ["react-merge-refs@3.0.2", "", { "peerDependencies": { "react": ">=16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["react"] }, "sha512-MSZAfwFfdbEvwkKWP5EI5chuLYnNUxNS7vyS0i1Jp+wtd8J4Ga2ddzhaE68aMol2Z4vCnRM/oGOo1a3V75UPlw=="],
 
+    "react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" }, "optionalPeers": ["@types/react", "redux"] }, "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g=="],
+
     "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],
 
     "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
 
     "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
 
+    "react-resizable-panels": ["react-resizable-panels@4.11.0", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-LPk/AkFDGkg7SsbOyL93ojrE6E7lhrxxDwnYNjfmnSeI6BE7Sje6dB24PXgZk8DeugdeXNk1LO+ohRqIjhxiLw=="],
+
     "react-rnd": ["react-rnd@10.5.3", "", { "dependencies": { "re-resizable": "^6.11.2", "react-draggable": "^4.5.0", "tslib": "2.6.2" }, "peerDependencies": { "react": ">=16.3.0", "react-dom": ">=16.3.0" } }, "sha512-s/sIT3pGZnQ+57egijkTp9mizjIWrJz68Pq6yd+F/wniFY3IriML18dUXnQe/HP9uMiJ+9MAp44hljG99fZu6Q=="],
 
     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
@@ -2182,6 +2134,8 @@
 
     "recast": ["recast@0.23.11", "", { "dependencies": { "ast-types": "^0.16.1", "esprima": "~4.0.0", "source-map": "~0.6.1", "tiny-invariant": "^1.3.3", "tslib": "^2.0.1" } }, "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA=="],
 
+    "recharts": ["recharts@3.8.0", "", { "dependencies": { "@reduxjs/toolkit": "^1.9.0 || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Z/m38DX3L73ExO4Tpc9/iZWHmHnlzWG4njQbxsF5aSjwqmHNDDIm0rdEBArkwsBvR8U6EirlEHiQNYWCVh9sGQ=="],
+
     "recma-build-jsx": ["recma-build-jsx@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-build-jsx": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew=="],
 
     "recma-jsx": ["recma-jsx@1.0.1", "", { "dependencies": { "acorn-jsx": "^5.0.0", "estree-util-to-js": "^2.0.0", "recma-parse": "^1.0.0", "recma-stringify": "^1.0.0", "unified": "^11.0.0" }, "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w=="],
@@ -2190,6 +2144,10 @@
 
     "recma-stringify": ["recma-stringify@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-to-js": "^2.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g=="],
 
+    "redux": ["redux@5.0.1", "", {}, "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="],
+
+    "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
+
     "regex": ["regex@6.1.0", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg=="],
 
     "regex-recursion": ["regex-recursion@6.0.2", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg=="],
@@ -2512,6 +2470,8 @@
 
     "vfile-message": ["vfile-message@4.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw=="],
 
+    "victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],
+
     "virtua": ["virtua@0.48.8", "", { "peerDependencies": { "react": ">=16.14.0", "react-dom": ">=16.14.0", "solid-js": ">=1.0", "svelte": ">=5.0", "vue": ">=3.2" }, "optionalPeers": ["react", "react-dom", "solid-js", "svelte", "vue"] }, "sha512-jpsxOw5V4B6hg44JePRLo9DL0TV7N1lBEVtPjKpAJebXyhI2s9lfiXJESaLapNtr3vtiSk/pWHiLf7B2a6UcgQ=="],
 
     "void-elements": ["void-elements@3.1.0", "", {}, "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w=="],
@@ -2602,8 +2562,12 @@
 
     "@lobehub/icons/lucide-react": ["lucide-react@0.469.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw=="],
 
+    "@lobehub/ui/@base-ui/react": ["@base-ui/react@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.28.4", "@base-ui/utils": "0.2.3", "@floating-ui/react-dom": "^2.1.6", "@floating-ui/utils": "^0.2.10", "reselect": "^5.1.1", "tabbable": "^6.3.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-4USBWz++DUSLTuIYpbYkSgy1F9ZmNG9S/lXvlUN6qMK0P0RlW+6eQmDUB4DgZ7HVvtXl4pvi4z5J2fv6Z3+9hg=="],
+
     "@lobehub/ui/@shikijs/core": ["@shikijs/core@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA=="],
 
+    "@lobehub/ui/immer": ["immer@11.1.4", "", {}, "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw=="],
+
     "@lobehub/ui/lucide-react": ["lucide-react@0.563.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA=="],
 
     "@lobehub/ui/shiki": ["shiki@3.23.0", "", { "dependencies": { "@shikijs/core": "3.23.0", "@shikijs/engine-javascript": "3.23.0", "@shikijs/engine-oniguruma": "3.23.0", "@shikijs/langs": "3.23.0", "@shikijs/themes": "3.23.0", "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA=="],
@@ -2616,34 +2580,26 @@
 
     "@pierre/diffs/shiki": ["shiki@3.23.0", "", { "dependencies": { "@shikijs/core": "3.23.0", "@shikijs/engine-javascript": "3.23.0", "@shikijs/engine-oniguruma": "3.23.0", "@shikijs/langs": "3.23.0", "@shikijs/themes": "3.23.0", "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA=="],
 
-    "@radix-ui/react-alert-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "@radix-ui/react-arrow/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-avatar/@radix-ui/react-context": ["@radix-ui/react-context@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw=="],
-
-    "@radix-ui/react-avatar/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
-
-    "@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "@radix-ui/react-dialog/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
     "@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
-    "@radix-ui/react-label/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
-
-    "@radix-ui/react-menu/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
-
-    "@radix-ui/react-popover/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "@radix-ui/react-dismissable-layer/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "@radix-ui/react-focus-scope/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-progress/@radix-ui/react-context": ["@radix-ui/react-context@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw=="],
+    "@radix-ui/react-popper/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-progress/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
+    "@radix-ui/react-portal/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
-    "@radix-ui/react-select/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
-
-    "@radix-ui/react-separator/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
+    "@radix-ui/react-tooltip/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
 
     "@radix-ui/react-tooltip/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@radix-ui/react-visually-hidden/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
     "@rc-component/dialog/@rc-component/portal": ["@rc-component/portal@2.2.0", "", { "dependencies": { "@rc-component/util": "^1.2.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-oc6FlA+uXCMiwArHsJyHcIkX4q6uKyndrPol2eWX8YPkAnztHOPsFIRtmWG4BMlGE5h7YIRE3NiaJ5VS8Lb1QQ=="],
 
     "@rc-component/drawer/@rc-component/portal": ["@rc-component/portal@2.2.0", "", { "dependencies": { "@rc-component/util": "^1.2.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-oc6FlA+uXCMiwArHsJyHcIkX4q6uKyndrPol2eWX8YPkAnztHOPsFIRtmWG4BMlGE5h7YIRE3NiaJ5VS8Lb1QQ=="],
@@ -2654,6 +2610,8 @@
 
     "@rc-component/trigger/@rc-component/portal": ["@rc-component/portal@2.2.0", "", { "dependencies": { "@rc-component/util": "^1.2.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-oc6FlA+uXCMiwArHsJyHcIkX4q6uKyndrPol2eWX8YPkAnztHOPsFIRtmWG4BMlGE5h7YIRE3NiaJ5VS8Lb1QQ=="],
 
+    "@reduxjs/toolkit/immer": ["immer@11.1.4", "", {}, "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw=="],
+
     "@rspack/binding-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
 
     "@shikijs/transformers/@shikijs/core": ["@shikijs/core@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA=="],
@@ -2684,6 +2642,12 @@
 
     "@typescript-eslint/typescript-estree/semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
 
+    "@visactor/vdataset/eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
+
+    "@visactor/vlayouts/eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
+
+    "@visactor/vutils/eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
+
     "@xyflow/react/zustand": ["zustand@4.5.7", "", { "dependencies": { "use-sync-external-store": "^1.2.2" }, "peerDependencies": { "@types/react": ">=16.8", "immer": ">=9.0.6", "react": ">=16.8" }, "optionalPeers": ["@types/react", "immer", "react"] }, "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw=="],
 
     "accepts/mime-types": ["mime-types@3.0.2", "", { "dependencies": { "mime-db": "^1.54.0" } }, "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A=="],
@@ -2702,29 +2666,23 @@
 
     "cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
 
-    "cmdk/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
-
     "cytoscape-fcose/cose-base": ["cose-base@2.2.0", "", { "dependencies": { "layout-base": "^2.0.0" } }, "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g=="],
 
-    "d3/d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
-
     "d3/d3-dsv": ["d3-dsv@3.0.1", "", { "dependencies": { "commander": "7", "iconv-lite": "0.6", "rw": "1" }, "bin": { "csv2json": "bin/dsv2json.js", "csv2tsv": "bin/dsv2dsv.js", "dsv2dsv": "bin/dsv2dsv.js", "dsv2json": "bin/dsv2json.js", "json2csv": "bin/json2dsv.js", "json2dsv": "bin/json2dsv.js", "json2tsv": "bin/json2dsv.js", "tsv2csv": "bin/dsv2dsv.js", "tsv2json": "bin/dsv2json.js" } }, "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q=="],
 
     "d3/d3-geo": ["d3-geo@3.1.1", "", { "dependencies": { "d3-array": "2.5.0 - 3" } }, "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q=="],
 
-    "d3-contour/d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
-
     "d3-dsv/commander": ["commander@2.20.3", "", {}, "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="],
 
     "d3-dsv/iconv-lite": ["iconv-lite@0.4.24", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3" } }, "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="],
 
     "d3-fetch/d3-dsv": ["d3-dsv@3.0.1", "", { "dependencies": { "commander": "7", "iconv-lite": "0.6", "rw": "1" }, "bin": { "csv2json": "bin/dsv2json.js", "csv2tsv": "bin/dsv2dsv.js", "dsv2dsv": "bin/dsv2dsv.js", "dsv2json": "bin/dsv2json.js", "json2csv": "bin/json2dsv.js", "json2dsv": "bin/json2dsv.js", "json2tsv": "bin/json2dsv.js", "tsv2csv": "bin/dsv2dsv.js", "tsv2json": "bin/dsv2json.js" } }, "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q=="],
 
-    "d3-sankey/d3-shape": ["d3-shape@1.3.7", "", { "dependencies": { "d3-path": "1" } }, "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw=="],
+    "d3-geo/d3-array": ["d3-array@1.2.4", "", {}, "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="],
 
-    "d3-scale/d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
+    "d3-sankey/d3-array": ["d3-array@1.2.4", "", {}, "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="],
 
-    "d3-time/d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
+    "d3-sankey/d3-shape": ["d3-shape@1.3.7", "", { "dependencies": { "d3-path": "1" } }, "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw=="],
 
     "eslint/minimatch": ["minimatch@10.2.5", "", { "dependencies": { "brace-expansion": "^5.0.5" } }, "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg=="],
 
@@ -2822,6 +2780,8 @@
 
     "@eslint/config-array/minimatch/brace-expansion": ["brace-expansion@5.0.5", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ=="],
 
+    "@lobehub/ui/@base-ui/react/@base-ui/utils": ["@base-ui/utils@0.2.3", "", { "dependencies": { "@babel/runtime": "^7.28.4", "@floating-ui/utils": "^0.2.10", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-/CguQ2PDaOzeVOkllQR8nocJ0FFIDqsWIcURsVmm53QGo8NhFNpePjNlyPIB41luxfOqnG7PU0xicMEw3ls7XQ=="],
+
     "@lobehub/ui/@shikijs/core/@shikijs/types": ["@shikijs/types@3.23.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ=="],
 
     "@lobehub/ui/shiki/@shikijs/engine-javascript": ["@shikijs/engine-javascript@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.4" } }, "sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA=="],
@@ -2848,6 +2808,18 @@
 
     "@pierre/diffs/shiki/@shikijs/types": ["@shikijs/types@3.23.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ=="],
 
+    "@radix-ui/react-arrow/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-dismissable-layer/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-focus-scope/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-popper/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-portal/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-visually-hidden/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@ts-morph/common/minimatch/brace-expansion": ["brace-expansion@5.0.5", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ=="],
 
     "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@5.0.5", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ=="],
diff --git a/web/default/components.json b/web/default/components.json
index 5e6b520ff6e..4eaae3460d6 100644
--- a/web/default/components.json
+++ b/web/default/components.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "radix-nova",
+  "style": "base-nova",
   "rsc": false,
   "tsx": true,
   "tailwind": {
diff --git a/web/default/package.json b/web/default/package.json
index 2f77e9dfee5..8c1abfbd065 100644
--- a/web/default/package.json
+++ b/web/default/package.json
@@ -16,31 +16,12 @@
     "knip": "knip"
   },
   "dependencies": {
+    "@base-ui/react": "^1.4.1",
     "@fontsource-variable/public-sans": "^5.2.7",
     "@hookform/resolvers": "^5.2.2",
+    "@hugeicons/core-free-icons": "^4.1.1",
+    "@hugeicons/react": "^1.1.6",
     "@lobehub/icons": "^4.0.3",
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-direction": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.8",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@tailwindcss/postcss": "^4.2.2",
     "@tanstack/react-query": "^5.95.2",
     "@tanstack/react-router": "^1.168.23",
@@ -54,6 +35,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.11.19",
     "i18next": "^25.7.4",
     "i18next-browser-languagedetector": "^8.2.0",
@@ -61,6 +43,7 @@
     "lucide-react": "^1.7.0",
     "motion": "^12.38.0",
     "nanoid": "^5.1.6",
+    "next-themes": "^0.4.6",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.4",
     "react-day-picker": "^9.14.0",
@@ -69,7 +52,9 @@
     "react-i18next": "^16.5.2",
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^4.11.0",
     "react-top-loading-bar": "^3.0.2",
+    "recharts": "3.8.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "shiki": "^4.0.2",
diff --git a/web/default/rsbuild.config.ts b/web/default/rsbuild.config.ts
index da7f314fd9e..3c60ab50c38 100644
--- a/web/default/rsbuild.config.ts
+++ b/web/default/rsbuild.config.ts
@@ -34,9 +34,9 @@ export default defineConfig(({ envMode }) => {
           priority: 0,
           enforce: true,
         },
-        'vendor-radix': {
-          test: /node_modules[\\/]@radix-ui[\\/]/,
-          name: 'vendor-radix',
+        'vendor-ui-primitives': {
+          test: /node_modules[\\/](@base-ui|@radix-ui)[\\/]/,
+          name: 'vendor-ui-primitives',
           chunks: 'all',
           priority: 0,
           enforce: true,
diff --git a/web/default/src/assets/custom/icon-theme-system.tsx b/web/default/src/assets/custom/icon-theme-system.tsx
index 4c4205be4db..1af55543c5a 100644
--- a/web/default/src/assets/custom/icon-theme-system.tsx
+++ b/web/default/src/assets/custom/icon-theme-system.tsx
@@ -12,7 +12,7 @@ export function IconThemeSystem({
       viewBox='0 0 79.86 51.14'
       className={cn(
         'overflow-hidden rounded-[6px]',
-        'stroke-primary fill-primary group-data-[state=unchecked]:stroke-muted-foreground group-data-[state=unchecked]:fill-muted-foreground',
+        'stroke-primary fill-primary group-data-unchecked:stroke-muted-foreground group-data-unchecked:fill-muted-foreground',
         className
       )}
       {...props}
diff --git a/web/default/src/components/ai-elements/actions.tsx b/web/default/src/components/ai-elements/actions.tsx
index bc0f574d7b1..9d77ed5d8bc 100644
--- a/web/default/src/components/ai-elements/actions.tsx
+++ b/web/default/src/components/ai-elements/actions.tsx
@@ -52,7 +52,7 @@ export const Action = ({
     return (
       <TooltipProvider>
         <Tooltip>
-          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipTrigger render={button}></TooltipTrigger>
           <TooltipContent>
             <p>{tooltip}</p>
           </TooltipContent>
diff --git a/web/default/src/components/ai-elements/artifact.tsx b/web/default/src/components/ai-elements/artifact.tsx
index c08d2403d9f..457c72957b2 100644
--- a/web/default/src/components/ai-elements/artifact.tsx
+++ b/web/default/src/components/ai-elements/artifact.tsx
@@ -129,7 +129,7 @@ export const ArtifactAction = ({
     return (
       <TooltipProvider>
         <Tooltip>
-          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipTrigger render={button}></TooltipTrigger>
           <TooltipContent>
             <p>{tooltip}</p>
           </TooltipContent>
diff --git a/web/default/src/components/ai-elements/chain-of-thought.tsx b/web/default/src/components/ai-elements/chain-of-thought.tsx
index f0dbcd2b02d..4ec99871116 100644
--- a/web/default/src/components/ai-elements/chain-of-thought.tsx
+++ b/web/default/src/components/ai-elements/chain-of-thought.tsx
@@ -7,13 +7,13 @@ import {
   useContext,
   useMemo,
 } from 'react'
-import { useControllableState } from '@radix-ui/react-use-controllable-state'
 import {
   BrainIcon,
   ChevronDownIcon,
   DotIcon,
   type LucideIcon,
 } from 'lucide-react'
+import { useControllableState } from '@/lib/use-controllable-state'
 import { cn } from '@/lib/utils'
 import { Badge } from '@/components/ui/badge'
 import {
@@ -197,7 +197,7 @@ export const ChainOfThoughtContent = memo(
         <CollapsibleContent
           className={cn(
             'mt-2 space-y-3',
-            'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none',
+            'data-closed:fade-out-0 data-closed:slide-out-to-top-2 data-open:slide-in-from-top-2 text-popover-foreground data-closed:animate-out data-open:animate-in outline-none',
             className
           )}
           {...props}
diff --git a/web/default/src/components/ai-elements/context.tsx b/web/default/src/components/ai-elements/context.tsx
index 6bf3b877e79..36a45d78fb5 100644
--- a/web/default/src/components/ai-elements/context.tsx
+++ b/web/default/src/components/ai-elements/context.tsx
@@ -57,7 +57,7 @@ export const Context = ({
       modelId,
     }}
   >
-    <HoverCard closeDelay={0} openDelay={0} {...props} />
+    <HoverCard {...props} />
   </ContextContext.Provider>
 )
 
@@ -114,16 +114,22 @@ export const ContextTrigger = ({ children, ...props }: ContextTriggerProps) => {
   }).format(usedPercent)
 
   return (
-    <HoverCardTrigger asChild>
-      {children ?? (
+    <HoverCardTrigger
+      delay={0}
+      closeDelay={0}
+      render={
         <Button type='button' variant='ghost' {...props}>
-          <span className='text-muted-foreground font-medium'>
-            {renderedPercent}
-          </span>
-          <ContextIcon />
+          {children ?? (
+            <>
+              <span className='text-muted-foreground font-medium'>
+                {renderedPercent}
+              </span>
+              <ContextIcon />
+            </>
+          )}
         </Button>
-      )}
-    </HoverCardTrigger>
+      }
+    />
   )
 }
 
diff --git a/web/default/src/components/ai-elements/inline-citation.tsx b/web/default/src/components/ai-elements/inline-citation.tsx
index 5ef261b9841..a86774b8ab4 100644
--- a/web/default/src/components/ai-elements/inline-citation.tsx
+++ b/web/default/src/components/ai-elements/inline-citation.tsx
@@ -52,7 +52,7 @@ export const InlineCitationText = ({
 export type InlineCitationCardProps = ComponentProps<typeof HoverCard>
 
 export const InlineCitationCard = (props: InlineCitationCardProps) => (
-  <HoverCard closeDelay={0} openDelay={0} {...props} />
+  <HoverCard {...props} />
 )
 
 export type InlineCitationCardTriggerProps = ComponentProps<typeof Badge> & {
@@ -64,22 +64,26 @@ export const InlineCitationCardTrigger = ({
   className,
   ...props
 }: InlineCitationCardTriggerProps) => (
-  <HoverCardTrigger asChild>
-    <Badge
-      className={cn('ml-1 rounded-full', className)}
-      variant='secondary'
-      {...props}
-    >
-      {sources[0] ? (
-        <>
-          {new URL(sources[0]).hostname}{' '}
-          {sources.length > 1 && `+${sources.length - 1}`}
-        </>
-      ) : (
-        'unknown'
-      )}
-    </Badge>
-  </HoverCardTrigger>
+  <HoverCardTrigger
+    delay={0}
+    closeDelay={0}
+    render={
+      <Badge
+        className={cn('ml-1 rounded-full', className)}
+        variant='secondary'
+        {...props}
+      >
+        {sources[0] ? (
+          <>
+            {new URL(sources[0]).hostname}{' '}
+            {sources.length > 1 && `+${sources.length - 1}`}
+          </>
+        ) : (
+          'unknown'
+        )}
+      </Badge>
+    }
+  />
 )
 
 export type InlineCitationCardBodyProps = ComponentProps<'div'>
diff --git a/web/default/src/components/ai-elements/open-in-chat.tsx b/web/default/src/components/ai-elements/open-in-chat.tsx
index 47c57c673ed..09dcb6d91fe 100644
--- a/web/default/src/components/ai-elements/open-in-chat.tsx
+++ b/web/default/src/components/ai-elements/open-in-chat.tsx
@@ -235,14 +235,19 @@ export type OpenInTriggerProps = ComponentProps<typeof DropdownMenuTrigger>
 export const OpenInTrigger = ({ children, ...props }: OpenInTriggerProps) => {
   const { t } = useTranslation()
   return (
-    <DropdownMenuTrigger {...props} asChild>
-      {children ?? (
+    <DropdownMenuTrigger
+      {...props}
+      render={
         <Button type='button' variant='outline'>
-          {t('Open in chat')}
-          <ChevronDownIcon className='ml-2 size-4' />
+          {children ?? (
+            <>
+              {t('Open in chat')}
+              <ChevronDownIcon className='ml-2 size-4' />
+            </>
+          )}
         </Button>
-      )}
-    </DropdownMenuTrigger>
+      }
+    />
   )
 }
 
@@ -251,17 +256,20 @@ export type OpenInChatGPTProps = ComponentProps<typeof DropdownMenuItem>
 export const OpenInChatGPT = (props: OpenInChatGPTProps) => {
   const { query } = useOpenInContext()
   return (
-    <DropdownMenuItem asChild {...props}>
-      <a
-        className='flex items-center gap-2'
-        href={providers.chatgpt.createUrl(query)}
-        rel='noopener'
-        target='_blank'
-      >
-        <span className='shrink-0'>{providers.chatgpt.icon}</span>
-        <span className='flex-1'>{providers.chatgpt.title}</span>
-        <ExternalLinkIcon className='size-4 shrink-0' />
-      </a>
+    <DropdownMenuItem
+      {...props}
+      render={
+        <a
+          className='flex items-center gap-2'
+          href={providers.chatgpt.createUrl(query)}
+          rel='noopener'
+          target='_blank'
+        />
+      }
+    >
+      <span className='shrink-0'>{providers.chatgpt.icon}</span>
+      <span className='flex-1'>{providers.chatgpt.title}</span>
+      <ExternalLinkIcon className='size-4 shrink-0' />
     </DropdownMenuItem>
   )
 }
@@ -271,17 +279,20 @@ export type OpenInClaudeProps = ComponentProps<typeof DropdownMenuItem>
 export const OpenInClaude = (props: OpenInClaudeProps) => {
   const { query } = useOpenInContext()
   return (
-    <DropdownMenuItem asChild {...props}>
-      <a
-        className='flex items-center gap-2'
-        href={providers.claude.createUrl(query)}
-        rel='noopener'
-        target='_blank'
-      >
-        <span className='shrink-0'>{providers.claude.icon}</span>
-        <span className='flex-1'>{providers.claude.title}</span>
-        <ExternalLinkIcon className='size-4 shrink-0' />
-      </a>
+    <DropdownMenuItem
+      {...props}
+      render={
+        <a
+          className='flex items-center gap-2'
+          href={providers.claude.createUrl(query)}
+          rel='noopener'
+          target='_blank'
+        />
+      }
+    >
+      <span className='shrink-0'>{providers.claude.icon}</span>
+      <span className='flex-1'>{providers.claude.title}</span>
+      <ExternalLinkIcon className='size-4 shrink-0' />
     </DropdownMenuItem>
   )
 }
@@ -291,17 +302,20 @@ export type OpenInT3Props = ComponentProps<typeof DropdownMenuItem>
 export const OpenInT3 = (props: OpenInT3Props) => {
   const { query } = useOpenInContext()
   return (
-    <DropdownMenuItem asChild {...props}>
-      <a
-        className='flex items-center gap-2'
-        href={providers.t3.createUrl(query)}
-        rel='noopener'
-        target='_blank'
-      >
-        <span className='shrink-0'>{providers.t3.icon}</span>
-        <span className='flex-1'>{providers.t3.title}</span>
-        <ExternalLinkIcon className='size-4 shrink-0' />
-      </a>
+    <DropdownMenuItem
+      {...props}
+      render={
+        <a
+          className='flex items-center gap-2'
+          href={providers.t3.createUrl(query)}
+          rel='noopener'
+          target='_blank'
+        />
+      }
+    >
+      <span className='shrink-0'>{providers.t3.icon}</span>
+      <span className='flex-1'>{providers.t3.title}</span>
+      <ExternalLinkIcon className='size-4 shrink-0' />
     </DropdownMenuItem>
   )
 }
@@ -311,17 +325,20 @@ export type OpenInSciraProps = ComponentProps<typeof DropdownMenuItem>
 export const OpenInScira = (props: OpenInSciraProps) => {
   const { query } = useOpenInContext()
   return (
-    <DropdownMenuItem asChild {...props}>
-      <a
-        className='flex items-center gap-2'
-        href={providers.scira.createUrl(query)}
-        rel='noopener'
-        target='_blank'
-      >
-        <span className='shrink-0'>{providers.scira.icon}</span>
-        <span className='flex-1'>{providers.scira.title}</span>
-        <ExternalLinkIcon className='size-4 shrink-0' />
-      </a>
+    <DropdownMenuItem
+      {...props}
+      render={
+        <a
+          className='flex items-center gap-2'
+          href={providers.scira.createUrl(query)}
+          rel='noopener'
+          target='_blank'
+        />
+      }
+    >
+      <span className='shrink-0'>{providers.scira.icon}</span>
+      <span className='flex-1'>{providers.scira.title}</span>
+      <ExternalLinkIcon className='size-4 shrink-0' />
     </DropdownMenuItem>
   )
 }
@@ -331,17 +348,20 @@ export type OpenInv0Props = ComponentProps<typeof DropdownMenuItem>
 export const OpenInv0 = (props: OpenInv0Props) => {
   const { query } = useOpenInContext()
   return (
-    <DropdownMenuItem asChild {...props}>
-      <a
-        className='flex items-center gap-2'
-        href={providers.v0.createUrl(query)}
-        rel='noopener'
-        target='_blank'
-      >
-        <span className='shrink-0'>{providers.v0.icon}</span>
-        <span className='flex-1'>{providers.v0.title}</span>
-        <ExternalLinkIcon className='size-4 shrink-0' />
-      </a>
+    <DropdownMenuItem
+      {...props}
+      render={
+        <a
+          className='flex items-center gap-2'
+          href={providers.v0.createUrl(query)}
+          rel='noopener'
+          target='_blank'
+        />
+      }
+    >
+      <span className='shrink-0'>{providers.v0.icon}</span>
+      <span className='flex-1'>{providers.v0.title}</span>
+      <ExternalLinkIcon className='size-4 shrink-0' />
     </DropdownMenuItem>
   )
 }
@@ -351,17 +371,20 @@ export type OpenInCursorProps = ComponentProps<typeof DropdownMenuItem>
 export const OpenInCursor = (props: OpenInCursorProps) => {
   const { query } = useOpenInContext()
   return (
-    <DropdownMenuItem asChild {...props}>
-      <a
-        className='flex items-center gap-2'
-        href={providers.cursor.createUrl(query)}
-        rel='noopener'
-        target='_blank'
-      >
-        <span className='shrink-0'>{providers.cursor.icon}</span>
-        <span className='flex-1'>{providers.cursor.title}</span>
-        <ExternalLinkIcon className='size-4 shrink-0' />
-      </a>
+    <DropdownMenuItem
+      {...props}
+      render={
+        <a
+          className='flex items-center gap-2'
+          href={providers.cursor.createUrl(query)}
+          rel='noopener'
+          target='_blank'
+        />
+      }
+    >
+      <span className='shrink-0'>{providers.cursor.icon}</span>
+      <span className='flex-1'>{providers.cursor.title}</span>
+      <ExternalLinkIcon className='size-4 shrink-0' />
     </DropdownMenuItem>
   )
 }
diff --git a/web/default/src/components/ai-elements/plan.tsx b/web/default/src/components/ai-elements/plan.tsx
index 8e54777f1d3..f7de13f8e16 100644
--- a/web/default/src/components/ai-elements/plan.tsx
+++ b/web/default/src/components/ai-elements/plan.tsx
@@ -46,8 +46,12 @@ export const Plan = ({
   ...props
 }: PlanProps) => (
   <PlanContext.Provider value={{ isStreaming }}>
-    <Collapsible asChild data-slot='plan' {...props}>
-      <Card className={cn('shadow-none', className)}>{children}</Card>
+    <Collapsible
+      data-slot='plan'
+      {...props}
+      render={<Card className={cn('shadow-none', className)} />}
+    >
+      {children}
     </Collapsible>
   </PlanContext.Provider>
 )
@@ -113,9 +117,9 @@ export const PlanAction = (props: PlanActionProps) => (
 export type PlanContentProps = ComponentProps<typeof CardContent>
 
 export const PlanContent = (props: PlanContentProps) => (
-  <CollapsibleContent asChild>
-    <CardContent data-slot='plan-content' {...props} />
-  </CollapsibleContent>
+  <CollapsibleContent
+    render={<CardContent data-slot='plan-content' {...props} />}
+  ></CollapsibleContent>
 )
 
 export type PlanFooterProps = ComponentProps<'div'>
@@ -129,17 +133,19 @@ export type PlanTriggerProps = ComponentProps<typeof CollapsibleTrigger>
 export const PlanTrigger = ({ className, ...props }: PlanTriggerProps) => {
   const { t } = useTranslation()
   return (
-    <CollapsibleTrigger asChild>
-      <Button
-        className={cn('size-8', className)}
-        data-slot='plan-trigger'
-        size='icon'
-        variant='ghost'
-        {...props}
-      >
-        <ChevronsUpDownIcon className='size-4' />
-        <span className='sr-only'>{t('Toggle plan')}</span>
-      </Button>
+    <CollapsibleTrigger
+      render={
+        <Button
+          className={cn('size-8', className)}
+          data-slot='plan-trigger'
+          size='icon'
+          variant='ghost'
+        />
+      }
+      {...props}
+    >
+      <ChevronsUpDownIcon className='size-4' />
+      <span className='sr-only'>{t('Toggle plan')}</span>
     </CollapsibleTrigger>
   )
 }
diff --git a/web/default/src/components/ai-elements/prompt-input.tsx b/web/default/src/components/ai-elements/prompt-input.tsx
index 80d05ab551a..b65a0ec828c 100644
--- a/web/default/src/components/ai-elements/prompt-input.tsx
+++ b/web/default/src/components/ai-elements/prompt-input.tsx
@@ -277,49 +277,51 @@ export function PromptInputAttachment({
 
   return (
     <PromptInputHoverCard>
-      <HoverCardTrigger asChild>
-        <div
-          className={cn(
-            'group border-border hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 relative flex h-8 cursor-default items-center gap-1.5 rounded-md border px-1.5 text-sm font-medium transition-all select-none',
-            className
-          )}
-          key={data.id}
-          {...props}
-        >
-          <div className='relative size-5 shrink-0'>
-            <div className='bg-background absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded transition-opacity group-hover:opacity-0'>
-              {isImage ? (
-                <img
-                  alt={filename || 'attachment'}
-                  className='size-5 object-cover'
-                  height={20}
-                  src={data.url}
-                  width={20}
-                />
-              ) : (
-                <div className='text-muted-foreground flex size-5 items-center justify-center'>
-                  <PaperclipIcon className='size-3' />
-                </div>
-              )}
-            </div>
-            <Button
-              aria-label={t('Remove attachment')}
-              className='absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5'
-              onClick={(e) => {
-                e.stopPropagation()
-                attachments.remove(data.id)
-              }}
-              type='button'
-              variant='ghost'
-            >
-              <XIcon />
-              <span className='sr-only'>{t('Remove')}</span>
-            </Button>
+      <PromptInputHoverCardTrigger
+        render={
+          <div
+            className={cn(
+              'group border-border hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 relative flex h-8 cursor-default items-center gap-1.5 rounded-md border px-1.5 text-sm font-medium transition-all select-none',
+              className
+            )}
+            key={data.id}
+            {...props}
+          />
+        }
+      >
+        <div className='relative size-5 shrink-0'>
+          <div className='bg-background absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded transition-opacity group-hover:opacity-0'>
+            {isImage ? (
+              <img
+                alt={filename || 'attachment'}
+                className='size-5 object-cover'
+                height={20}
+                src={data.url}
+                width={20}
+              />
+            ) : (
+              <div className='text-muted-foreground flex size-5 items-center justify-center'>
+                <PaperclipIcon className='size-3' />
+              </div>
+            )}
           </div>
-
-          <span className='flex-1 truncate'>{attachmentLabel}</span>
+          <Button
+            aria-label={t('Remove attachment')}
+            className='absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5'
+            onClick={(e) => {
+              e.stopPropagation()
+              attachments.remove(data.id)
+            }}
+            type='button'
+            variant='ghost'
+          >
+            <XIcon />
+            <span className='sr-only'>{t('Remove')}</span>
+          </Button>
         </div>
-      </HoverCardTrigger>
+
+        <span className='flex-1 truncate'>{attachmentLabel}</span>
+      </PromptInputHoverCardTrigger>
       <PromptInputHoverCardContent className='w-auto p-2'>
         <div className='w-auto space-y-3'>
           {isImage && (
@@ -956,10 +958,10 @@ export const PromptInputActionMenuTrigger = ({
   children,
   ...props
 }: PromptInputActionMenuTriggerProps) => (
-  <DropdownMenuTrigger asChild>
-    <PromptInputButton className={className} {...props}>
-      {children ?? <PlusIcon className='size-4' />}
-    </PromptInputButton>
+  <DropdownMenuTrigger
+    render={<PromptInputButton className={className} {...props} />}
+  >
+    {children ?? <PlusIcon className='size-4' />}
   </DropdownMenuTrigger>
 )
 
@@ -1242,21 +1244,21 @@ export const PromptInputModelSelectValue = ({
 
 export type PromptInputHoverCardProps = ComponentProps<typeof HoverCard>
 
-export const PromptInputHoverCard = ({
-  openDelay = 0,
-  closeDelay = 0,
-  ...props
-}: PromptInputHoverCardProps) => (
-  <HoverCard closeDelay={closeDelay} openDelay={openDelay} {...props} />
+export const PromptInputHoverCard = (props: PromptInputHoverCardProps) => (
+  <HoverCard {...props} />
 )
 
 export type PromptInputHoverCardTriggerProps = ComponentProps<
   typeof HoverCardTrigger
 >
 
-export const PromptInputHoverCardTrigger = (
-  props: PromptInputHoverCardTriggerProps
-) => <HoverCardTrigger {...props} />
+export const PromptInputHoverCardTrigger = ({
+  delay = 0,
+  closeDelay = 0,
+  ...props
+}: PromptInputHoverCardTriggerProps) => (
+  <HoverCardTrigger delay={delay} closeDelay={closeDelay} {...props} />
+)
 
 export type PromptInputHoverCardContentProps = ComponentProps<
   typeof HoverCardContent
diff --git a/web/default/src/components/ai-elements/queue.tsx b/web/default/src/components/ai-elements/queue.tsx
index 03fda7f5591..12bffe09677 100644
--- a/web/default/src/components/ai-elements/queue.tsx
+++ b/web/default/src/components/ai-elements/queue.tsx
@@ -212,18 +212,20 @@ export const QueueSectionTrigger = ({
   className,
   ...props
 }: QueueSectionTriggerProps) => (
-  <CollapsibleTrigger asChild>
-    <Button
-      variant='ghost'
-      className={cn(
-        'group bg-muted/40 text-muted-foreground hover:bg-muted h-auto w-full justify-between px-3 py-2 text-left',
-        className
-      )}
-      type='button'
-      {...props}
-    >
-      {children}
-    </Button>
+  <CollapsibleTrigger
+    render={
+      <Button
+        variant='ghost'
+        className={cn(
+          'group bg-muted/40 text-muted-foreground hover:bg-muted h-auto w-full justify-between px-3 py-2 text-left',
+          className
+        )}
+        type='button'
+        {...props}
+      />
+    }
+  >
+    {children}
   </CollapsibleTrigger>
 )
 
@@ -242,7 +244,7 @@ export const QueueSectionLabel = ({
   ...props
 }: QueueSectionLabelProps) => (
   <span className={cn('flex items-center gap-2', className)} {...props}>
-    <ChevronDownIcon className='size-4 transition-transform group-data-[state=closed]:-rotate-90' />
+    <ChevronDownIcon className='size-4 -rotate-90 transition-transform group-data-[panel-open]:rotate-0' />
     {icon}
     <span>
       {count} {label}
diff --git a/web/default/src/components/ai-elements/reasoning.tsx b/web/default/src/components/ai-elements/reasoning.tsx
index 089cc845c96..866dcd5b8c6 100644
--- a/web/default/src/components/ai-elements/reasoning.tsx
+++ b/web/default/src/components/ai-elements/reasoning.tsx
@@ -8,8 +8,8 @@ import {
   useEffect,
   useState,
 } from 'react'
-import { useControllableState } from '@radix-ui/react-use-controllable-state'
 import { BrainIcon, ChevronDownIcon } from 'lucide-react'
+import { useControllableState } from '@/lib/use-controllable-state'
 import { cn } from '@/lib/utils'
 import {
   Collapsible,
@@ -171,7 +171,7 @@ export const ReasoningContent = memo(
     <CollapsibleContent
       className={cn(
         'mt-4 text-sm',
-        'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none',
+        'data-closed:fade-out-0 data-closed:slide-out-to-top-2 data-open:slide-in-from-top-2 text-muted-foreground data-closed:animate-out data-open:animate-in outline-none',
         className
       )}
       {...props}
diff --git a/web/default/src/components/ai-elements/sources.tsx b/web/default/src/components/ai-elements/sources.tsx
index 85251c2d3f6..d800efc4c07 100644
--- a/web/default/src/components/ai-elements/sources.tsx
+++ b/web/default/src/components/ai-elements/sources.tsx
@@ -56,7 +56,7 @@ export const SourcesContent = ({
   <CollapsibleContent
     className={cn(
       'mt-3 flex w-fit flex-col gap-2',
-      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in outline-none',
+      'data-closed:fade-out-0 data-closed:slide-out-to-top-2 data-open:slide-in-from-top-2 data-closed:animate-out data-open:animate-in outline-none',
       className
     )}
     {...props}
diff --git a/web/default/src/components/ai-elements/task.tsx b/web/default/src/components/ai-elements/task.tsx
index 97851e96a0a..45c320af056 100644
--- a/web/default/src/components/ai-elements/task.tsx
+++ b/web/default/src/components/ai-elements/task.tsx
@@ -55,15 +55,21 @@ export const TaskTrigger = ({
   title,
   ...props
 }: TaskTriggerProps) => (
-  <CollapsibleTrigger asChild className={cn('group', className)} {...props}>
-    {children ?? (
+  <CollapsibleTrigger
+    className={cn('group', className)}
+    {...props}
+    render={
       <div className='text-muted-foreground hover:text-foreground flex w-full cursor-pointer items-center gap-2 text-sm transition-colors'>
-        <SearchIcon className='size-4' />
-        <p className='text-sm'>{title}</p>
-        <ChevronDownIcon className='size-4 transition-transform group-data-[state=open]:rotate-180' />
+        {children ?? (
+          <>
+            <SearchIcon className='size-4' />
+            <p className='text-sm'>{title}</p>
+            <ChevronDownIcon className='size-4 transition-transform group-data-[panel-open]:rotate-180' />
+          </>
+        )}
       </div>
-    )}
-  </CollapsibleTrigger>
+    }
+  />
 )
 
 export type TaskContentProps = ComponentProps<typeof CollapsibleContent>
@@ -75,7 +81,7 @@ export const TaskContent = ({
 }: TaskContentProps) => (
   <CollapsibleContent
     className={cn(
-      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none',
+      'data-closed:fade-out-0 data-closed:slide-out-to-top-2 data-open:slide-in-from-top-2 text-popover-foreground data-closed:animate-out data-open:animate-in outline-none',
       className
     )}
     {...props}
diff --git a/web/default/src/components/ai-elements/tool.tsx b/web/default/src/components/ai-elements/tool.tsx
index ed2ea400e7c..01f200843d0 100644
--- a/web/default/src/components/ai-elements/tool.tsx
+++ b/web/default/src/components/ai-elements/tool.tsx
@@ -81,7 +81,7 @@ export const ToolHeader = ({
 }: ToolHeaderProps) => (
   <CollapsibleTrigger
     className={cn(
-      'flex w-full items-center justify-between gap-4 p-3',
+      'group flex w-full items-center justify-between gap-4 p-3',
       className
     )}
     {...props}
@@ -93,7 +93,7 @@ export const ToolHeader = ({
       </span>
       {getStatusBadge(state)}
     </div>
-    <ChevronDownIcon className='text-muted-foreground size-4 transition-transform group-data-[state=open]:rotate-180' />
+    <ChevronDownIcon className='text-muted-foreground size-4 transition-transform group-data-[panel-open]:rotate-180' />
   </CollapsibleTrigger>
 )
 
@@ -102,7 +102,7 @@ export type ToolContentProps = ComponentProps<typeof CollapsibleContent>
 export const ToolContent = ({ className, ...props }: ToolContentProps) => (
   <CollapsibleContent
     className={cn(
-      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none',
+      'data-closed:fade-out-0 data-closed:slide-out-to-top-2 data-open:slide-in-from-top-2 text-popover-foreground data-closed:animate-out data-open:animate-in outline-none',
       className
     )}
     {...props}
diff --git a/web/default/src/components/ai-elements/web-preview.tsx b/web/default/src/components/ai-elements/web-preview.tsx
index 97f061343bf..22f07960b58 100644
--- a/web/default/src/components/ai-elements/web-preview.tsx
+++ b/web/default/src/components/ai-elements/web-preview.tsx
@@ -113,17 +113,19 @@ export const WebPreviewNavigationButton = ({
 }: WebPreviewNavigationButtonProps) => (
   <TooltipProvider>
     <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          className='hover:text-foreground h-8 w-8 p-0'
-          disabled={disabled}
-          onClick={onClick}
-          size='sm'
-          variant='ghost'
-          {...props}
-        >
-          {children}
-        </Button>
+      <TooltipTrigger
+        render={
+          <Button
+            className='hover:text-foreground h-8 w-8 p-0'
+            disabled={disabled}
+            onClick={onClick}
+            size='sm'
+            variant='ghost'
+            {...props}
+          />
+        }
+      >
+        {children}
       </TooltipTrigger>
       <TooltipContent>
         <p>{tooltip}</p>
@@ -225,24 +227,26 @@ export const WebPreviewConsole = ({
       open={consoleOpen}
       {...props}
     >
-      <CollapsibleTrigger asChild>
-        <Button
-          className='hover:bg-muted/50 flex w-full items-center justify-between p-4 text-left font-medium'
-          variant='ghost'
-        >
-          {t('Console')}
-          <ChevronDownIcon
-            className={cn(
-              'h-4 w-4 transition-transform duration-200',
-              consoleOpen && 'rotate-180'
-            )}
+      <CollapsibleTrigger
+        render={
+          <Button
+            className='hover:bg-muted/50 flex w-full items-center justify-between p-4 text-left font-medium'
+            variant='ghost'
           />
-        </Button>
+        }
+      >
+        {t('Console')}
+        <ChevronDownIcon
+          className={cn(
+            'h-4 w-4 transition-transform duration-200',
+            consoleOpen && 'rotate-180'
+          )}
+        />
       </CollapsibleTrigger>
       <CollapsibleContent
         className={cn(
           'px-4 pb-4',
-          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in outline-none'
+          'data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-closed:animate-out data-open:animate-in outline-none'
         )}
       >
         <div className='max-h-48 space-y-1 overflow-y-auto'>
diff --git a/web/default/src/components/command-menu.tsx b/web/default/src/components/command-menu.tsx
index 74cb4c58a64..76c7624bbfe 100644
--- a/web/default/src/components/command-menu.tsx
+++ b/web/default/src/components/command-menu.tsx
@@ -6,6 +6,7 @@ import { useSearch } from '@/context/search-provider'
 import { useTheme } from '@/context/theme-provider'
 import { useSidebarData } from '@/hooks/use-sidebar-data'
 import {
+  Command,
   CommandDialog,
   CommandEmpty,
   CommandGroup,
@@ -38,62 +39,66 @@ export function CommandMenu() {
 
   return (
     <CommandDialog modal open={open} onOpenChange={setOpen}>
-      <CommandInput placeholder={t('Type a command or search...')} />
-      <CommandList>
-        <ScrollArea type='hover' className='h-72 pe-1'>
-          <CommandEmpty>{t('No results found.')}</CommandEmpty>
-          {navGroups.map((group) => (
-            <CommandGroup key={group.id || group.title} heading={group.title}>
-              {group.items.map((navItem, i) => {
-                if (navItem.url)
-                  return (
+      <Command>
+        <CommandInput placeholder={t('Type a command or search...')} />
+        <CommandList>
+          <ScrollArea className='h-72 pe-1'>
+            <CommandEmpty>{t('No results found.')}</CommandEmpty>
+            {navGroups.map((group) => (
+              <CommandGroup key={group.id || group.title} heading={group.title}>
+                {group.items.map((navItem, i) => {
+                  if (navItem.url)
+                    return (
+                      <CommandItem
+                        key={`${navItem.url}-${i}`}
+                        value={navItem.title}
+                        onSelect={() => {
+                          runCommand(() => navigate({ to: navItem.url }))
+                        }}
+                      >
+                        <div className='flex size-4 items-center justify-center'>
+                          <ArrowRight className='text-muted-foreground/80 size-2' />
+                        </div>
+                        {navItem.title}
+                      </CommandItem>
+                    )
+
+                  return navItem.items?.map((subItem, i) => (
                     <CommandItem
-                      key={`${navItem.url}-${i}`}
-                      value={navItem.title}
+                      key={`${navItem.title}-${subItem.url}-${i}`}
+                      value={`${navItem.title}-${subItem.url}`}
                       onSelect={() => {
-                        runCommand(() => navigate({ to: navItem.url }))
+                        runCommand(() => navigate({ to: subItem.url }))
                       }}
                     >
                       <div className='flex size-4 items-center justify-center'>
                         <ArrowRight className='text-muted-foreground/80 size-2' />
                       </div>
-                      {navItem.title}
+                      {navItem.title} <ChevronRight /> {subItem.title}
                     </CommandItem>
-                  )
-
-                return navItem.items?.map((subItem, i) => (
-                  <CommandItem
-                    key={`${navItem.title}-${subItem.url}-${i}`}
-                    value={`${navItem.title}-${subItem.url}`}
-                    onSelect={() => {
-                      runCommand(() => navigate({ to: subItem.url }))
-                    }}
-                  >
-                    <div className='flex size-4 items-center justify-center'>
-                      <ArrowRight className='text-muted-foreground/80 size-2' />
-                    </div>
-                    {navItem.title} <ChevronRight /> {subItem.title}
-                  </CommandItem>
-                ))
-              })}
+                  ))
+                })}
+              </CommandGroup>
+            ))}
+            <CommandSeparator />
+            <CommandGroup heading='Theme'>
+              <CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
+                <Sun /> <span>{t('Light')}</span>
+              </CommandItem>
+              <CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
+                <Moon className='scale-90' />
+                <span>{t('Dark')}</span>
+              </CommandItem>
+              <CommandItem
+                onSelect={() => runCommand(() => setTheme('system'))}
+              >
+                <Laptop />
+                <span>{t('System')}</span>
+              </CommandItem>
             </CommandGroup>
-          ))}
-          <CommandSeparator />
-          <CommandGroup heading='Theme'>
-            <CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
-              <Sun /> <span>{t('Light')}</span>
-            </CommandItem>
-            <CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
-              <Moon className='scale-90' />
-              <span>{t('Dark')}</span>
-            </CommandItem>
-            <CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
-              <Laptop />
-              <span>{t('System')}</span>
-            </CommandItem>
-          </CommandGroup>
-        </ScrollArea>
-      </CommandList>
+          </ScrollArea>
+        </CommandList>
+      </Command>
     </CommandDialog>
   )
 }
diff --git a/web/default/src/components/config-drawer.tsx b/web/default/src/components/config-drawer.tsx
index c516db39b14..78def52e18a 100644
--- a/web/default/src/components/config-drawer.tsx
+++ b/web/default/src/components/config-drawer.tsx
@@ -1,6 +1,7 @@
 import { type SVGProps } from 'react'
-import { Root as Radio, Item } from '@radix-ui/react-radio-group'
-import { CircleCheck, RotateCcw, Palette } from 'lucide-react'
+import { Radio as RadioPrimitive } from '@base-ui/react/radio'
+import { RadioGroup as Radio } from '@base-ui/react/radio-group'
+import { CircleCheck, Palette, RotateCcw } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { IconDir } from '@/assets/custom/icon-dir'
 import { IconLayoutCompact } from '@/assets/custom/icon-layout-compact'
@@ -12,9 +13,17 @@ import { IconSidebarSidebar } from '@/assets/custom/icon-sidebar-sidebar'
 import { IconThemeDark } from '@/assets/custom/icon-theme-dark'
 import { IconThemeLight } from '@/assets/custom/icon-theme-light'
 import { IconThemeSystem } from '@/assets/custom/icon-theme-system'
+import {
+  type ContentLayout,
+  THEME_PRESETS,
+  type ThemePreset,
+  type ThemeRadius,
+  type ThemeScale,
+} from '@/lib/theme-customization'
 import { cn } from '@/lib/utils'
 import { useDirection } from '@/context/direction-provider'
 import { type Collapsible, useLayout } from '@/context/layout-provider'
+import { useThemeCustomization } from '@/context/theme-customization-provider'
 import { useTheme } from '@/context/theme-provider'
 import { Button } from '@/components/ui/button'
 import {
@@ -28,32 +37,38 @@ import {
 } from '@/components/ui/sheet'
 import { useSidebar } from './ui/sidebar'
 
+const Item = RadioPrimitive.Root
+
 export function ConfigDrawer() {
   const { t } = useTranslation()
   const { setOpen } = useSidebar()
   const { resetDir } = useDirection()
   const { resetTheme } = useTheme()
   const { resetLayout } = useLayout()
+  const { resetCustomization } = useThemeCustomization()
 
   const handleReset = () => {
     setOpen(true)
     resetDir()
     resetTheme()
     resetLayout()
+    resetCustomization()
   }
 
   return (
     <Sheet>
-      <SheetTrigger asChild>
-        <Button
-          size='icon'
-          variant='ghost'
-          aria-label={t('Open theme settings')}
-          aria-describedby='config-drawer-description'
-          className='rounded-full max-md:hidden'
-        >
-          <Palette className='size-[1.2rem]' aria-hidden='true' />
-        </Button>
+      <SheetTrigger
+        render={
+          <Button
+            size='icon'
+            variant='ghost'
+            aria-label={t('Open theme settings')}
+            aria-describedby='config-drawer-description'
+            className='rounded-full max-md:hidden'
+          />
+        }
+      >
+        <Palette className='size-[1.2rem]' aria-hidden='true' />
       </SheetTrigger>
       <SheetContent className='flex w-full flex-col sm:max-w-md'>
         <SheetHeader className='pb-0 text-start'>
@@ -64,8 +79,12 @@ export function ConfigDrawer() {
         </SheetHeader>
         <div className='space-y-6 overflow-y-auto px-4'>
           <ThemeConfig />
+          <PresetConfig />
+          <RadiusConfig />
+          <ScaleConfig />
           <SidebarConfig />
           <LayoutConfig />
+          <ContentLayoutConfig />
           <DirConfig />
         </div>
         <SheetFooter className='gap-2'>
@@ -82,12 +101,7 @@ export function ConfigDrawer() {
   )
 }
 
-function SectionTitle({
-  title,
-  showReset = false,
-  onReset,
-  className,
-}: {
+function SectionTitle(props: {
   title: string
   showReset?: boolean
   onReset?: () => void
@@ -97,16 +111,16 @@ function SectionTitle({
     <div
       className={cn(
         'text-muted-foreground mb-2 flex items-center gap-2 text-sm font-semibold',
-        className
+        props.className
       )}
     >
-      {title}
-      {showReset && onReset && (
+      {props.title}
+      {props.showReset && props.onReset && (
         <Button
           size='icon'
           variant='secondary'
           className='size-4 rounded-full'
-          onClick={onReset}
+          onClick={props.onReset}
           aria-label='Reset'
         >
           <RotateCcw className='size-3' aria-hidden='true' />
@@ -116,10 +130,7 @@ function SectionTitle({
   )
 }
 
-function RadioGroupItem({
-  item,
-  isTheme = false,
-}: {
+function RadioGroupItem(props: {
   item: {
     value: string
     label: string
@@ -127,45 +138,46 @@ function RadioGroupItem({
   }
   isTheme?: boolean
 }) {
+  const isTheme = props.isTheme ?? false
   return (
     <Item
-      value={item.value}
+      value={props.item.value}
       className={cn('group outline-none', 'transition duration-200 ease-in')}
-      aria-label={`Select ${item.label.toLowerCase()}`}
-      aria-describedby={`${item.value}-description`}
+      aria-label={`Select ${props.item.label.toLowerCase()}`}
+      aria-describedby={`${props.item.value}-description`}
     >
       <div
         className={cn(
           'ring-border relative rounded-[6px] ring-[1px]',
-          'group-data-[state=checked]:ring-primary group-data-[state=checked]:shadow-2xl',
+          'group-data-checked:ring-primary group-data-checked:shadow-2xl',
           'group-focus-visible:ring-2'
         )}
         role='img'
         aria-hidden='false'
-        aria-label={`${item.label} option preview`}
+        aria-label={`${props.item.label} option preview`}
       >
         <CircleCheck
           className={cn(
             'fill-primary size-6 stroke-white',
-            'group-data-[state=unchecked]:hidden',
+            'group-data-unchecked:hidden',
             'absolute top-0 right-0 translate-x-1/2 -translate-y-1/2'
           )}
           aria-hidden='true'
         />
-        <item.icon
+        <props.item.icon
           className={cn(
             !isTheme &&
-              'stroke-primary fill-primary group-data-[state=unchecked]:stroke-muted-foreground group-data-[state=unchecked]:fill-muted-foreground'
+              'stroke-primary fill-primary group-data-unchecked:stroke-muted-foreground group-data-unchecked:fill-muted-foreground'
           )}
           aria-hidden='true'
         />
       </div>
       <div
         className='mt-1 text-xs'
-        id={`${item.value}-description`}
+        id={`${props.item.value}-description`}
         aria-live='polite'
       >
-        {item.label}
+        {props.item.label}
       </div>
     </Item>
   )
@@ -189,21 +201,9 @@ function ThemeConfig() {
         aria-describedby='theme-description'
       >
         {[
-          {
-            value: 'system',
-            label: 'System',
-            icon: IconThemeSystem,
-          },
-          {
-            value: 'light',
-            label: 'Light',
-            icon: IconThemeLight,
-          },
-          {
-            value: 'dark',
-            label: 'Dark',
-            icon: IconThemeDark,
-          },
+          { value: 'system', label: t('System'), icon: IconThemeSystem },
+          { value: 'light', label: t('Light'), icon: IconThemeLight },
+          { value: 'dark', label: t('Dark'), icon: IconThemeDark },
         ].map((item) => (
           <RadioGroupItem key={item.value} item={item} isTheme />
         ))}
@@ -215,6 +215,219 @@ function ThemeConfig() {
   )
 }
 
+function PresetConfig() {
+  const { t } = useTranslation()
+  const { defaults, customization, setPreset } = useThemeCustomization()
+  return (
+    <div>
+      <SectionTitle
+        title={t('Color preset')}
+        showReset={customization.preset !== defaults.preset}
+        onReset={() => setPreset(defaults.preset)}
+      />
+      <Radio
+        value={customization.preset}
+        onValueChange={(v) => setPreset(v as ThemePreset)}
+        className='grid w-full grid-cols-4 gap-3'
+        aria-label={t('Select color preset')}
+      >
+        {THEME_PRESETS.map((preset) => (
+          <Item
+            key={preset.value}
+            value={preset.value}
+            className='group flex flex-col items-stretch outline-none'
+            aria-label={t(`preset.${preset.value}`)}
+          >
+            <div
+              className={cn(
+                'ring-border relative h-12 rounded-md ring-[1px] transition',
+                'group-data-checked:ring-primary group-data-checked:shadow-md',
+                'group-focus-visible:ring-2',
+                'group-hover:ring-primary/60'
+              )}
+            >
+              <div
+                aria-hidden='true'
+                className='absolute inset-0 rounded-md'
+                style={
+                  preset.value === 'default'
+                    ? {
+                        background:
+                          'linear-gradient(135deg, var(--background) 0%, var(--muted) 50%, var(--foreground) 100%)',
+                      }
+                    : {
+                        background: `linear-gradient(135deg, ${preset.swatches[0]} 0%, ${preset.swatches[1] ?? preset.swatches[0]} 100%)`,
+                      }
+                }
+              />
+              <CircleCheck
+                className={cn(
+                  'fill-primary absolute top-0 right-0 z-10 size-5 translate-x-1/2 -translate-y-1/2 stroke-white',
+                  'group-data-unchecked:hidden'
+                )}
+                aria-hidden='true'
+              />
+            </div>
+            <div className='mt-1.5 truncate text-center text-xs'>
+              {t(`preset.${preset.value}`)}
+            </div>
+          </Item>
+        ))}
+      </Radio>
+    </div>
+  )
+}
+
+const RADIUS_OPTIONS: {
+  value: ThemeRadius
+  label: string
+  // CSS border-radius value used to render the visual preview corner.
+  preview: string
+}[] = [
+  { value: 'default', label: 'Auto', preview: '999px' },
+  { value: 'none', label: '0', preview: '0' },
+  { value: 'sm', label: '0.3', preview: '0.3rem' },
+  { value: 'md', label: '0.5', preview: '0.5rem' },
+  { value: 'lg', label: '0.75', preview: '0.75rem' },
+  { value: 'xl', label: '1.0', preview: '1rem' },
+]
+
+function RadiusConfig() {
+  const { t } = useTranslation()
+  const { defaults, customization, setRadius } = useThemeCustomization()
+  return (
+    <div>
+      <SectionTitle
+        title={t('Border radius')}
+        showReset={customization.radius !== defaults.radius}
+        onReset={() => setRadius(defaults.radius)}
+      />
+      <Radio
+        value={customization.radius}
+        onValueChange={(v) => setRadius(v as ThemeRadius)}
+        className='grid w-full grid-cols-6 gap-2'
+        aria-label={t('Select border radius')}
+      >
+        {RADIUS_OPTIONS.map((option) => (
+          <Item
+            key={option.value}
+            value={option.value}
+            className='group flex flex-col items-stretch outline-none'
+            aria-label={
+              option.value === 'default' ? t('System default') : option.label
+            }
+          >
+            <div
+              className={cn(
+                'ring-border relative h-12 rounded-md ring-[1px] transition',
+                'group-data-checked:ring-primary group-data-checked:shadow-md',
+                'group-focus-visible:ring-2',
+                'group-hover:ring-primary/60'
+              )}
+            >
+              <CircleCheck
+                className={cn(
+                  'fill-primary absolute top-0 right-0 z-10 size-5 translate-x-1/2 -translate-y-1/2 stroke-white',
+                  'group-data-unchecked:hidden'
+                )}
+                aria-hidden='true'
+              />
+              <span
+                aria-hidden='true'
+                className='border-foreground/70 absolute top-2.5 left-2.5 size-3.5 border-t-[1.5px] border-l-[1.5px]'
+                style={{ borderTopLeftRadius: option.preview }}
+              />
+            </div>
+            <div className='mt-1.5 text-center text-xs'>{option.label}</div>
+          </Item>
+        ))}
+      </Radio>
+    </div>
+  )
+}
+
+/**
+ * Visual preview rows for the density preset. Each row's height represents
+ * the relative line-height density (compact = tight rows, comfortable = wide).
+ */
+function ScalePreview(props: { rows: number; rowGap: string }) {
+  return (
+    <div
+      aria-hidden='true'
+      className='absolute inset-2.5 flex flex-col justify-center'
+      style={{ gap: props.rowGap }}
+    >
+      {Array.from({ length: props.rows }).map((_, i) => (
+        <span
+          key={i}
+          className='bg-foreground/60 block h-[2px] rounded-full'
+          style={{ width: `${85 - i * 10}%` }}
+        />
+      ))}
+    </div>
+  )
+}
+
+function ScaleConfig() {
+  const { t } = useTranslation()
+  const { defaults, customization, setScale } = useThemeCustomization()
+  const scaleOptions: {
+    value: ThemeScale
+    label: string
+    rows: number
+    rowGap: string
+  }[] = [
+    { value: 'sm', label: t('Compact'), rows: 4, rowGap: '3px' },
+    { value: 'default', label: t('Default'), rows: 3, rowGap: '6px' },
+    { value: 'lg', label: t('Comfortable'), rows: 2, rowGap: '10px' },
+  ]
+  return (
+    <div>
+      <SectionTitle
+        title={t('Density')}
+        showReset={customization.scale !== defaults.scale}
+        onReset={() => setScale(defaults.scale)}
+      />
+      <Radio
+        value={customization.scale}
+        onValueChange={(v) => setScale(v as ThemeScale)}
+        className='grid w-full grid-cols-3 gap-4'
+        aria-label={t('Select interface density')}
+      >
+        {scaleOptions.map((option) => (
+          <Item
+            key={option.value}
+            value={option.value}
+            className='group flex flex-col items-stretch outline-none'
+            aria-label={option.label}
+          >
+            <div
+              className={cn(
+                'ring-border relative h-12 rounded-md ring-[1px] transition',
+                'group-data-checked:ring-primary group-data-checked:shadow-md',
+                'group-focus-visible:ring-2',
+                'group-hover:ring-primary/60'
+              )}
+            >
+              <CircleCheck
+                className={cn(
+                  'fill-primary absolute top-0 right-0 z-10 size-5 translate-x-1/2 -translate-y-1/2 stroke-white',
+                  'group-data-unchecked:hidden'
+                )}
+                aria-hidden='true'
+              />
+              <ScalePreview rows={option.rows} rowGap={option.rowGap} />
+            </div>
+            <div className='mt-1.5 truncate text-center text-xs'>
+              {option.label}
+            </div>
+          </Item>
+        ))}
+      </Radio>
+    </div>
+  )
+}
+
 function SidebarConfig() {
   const { t } = useTranslation()
   const { defaultVariant, variant, setVariant } = useLayout()
@@ -233,21 +446,13 @@ function SidebarConfig() {
         aria-describedby='sidebar-description'
       >
         {[
-          {
-            value: 'inset',
-            label: 'Inset',
-            icon: IconSidebarInset,
-          },
+          { value: 'inset', label: t('Inset'), icon: IconSidebarInset },
           {
             value: 'floating',
-            label: 'Floating',
+            label: t('Floating'),
             icon: IconSidebarFloating,
           },
-          {
-            value: 'sidebar',
-            label: 'Sidebar',
-            icon: IconSidebarSidebar,
-          },
+          { value: 'sidebar', label: t('Sidebar'), icon: IconSidebarSidebar },
         ].map((item) => (
           <RadioGroupItem key={item.value} item={item} />
         ))}
@@ -291,19 +496,11 @@ function LayoutConfig() {
         aria-describedby='layout-description'
       >
         {[
-          {
-            value: 'default',
-            label: 'Default',
-            icon: IconLayoutDefault,
-          },
-          {
-            value: 'icon',
-            label: 'Compact',
-            icon: IconLayoutCompact,
-          },
+          { value: 'default', label: t('Default'), icon: IconLayoutDefault },
+          { value: 'icon', label: t('Compact'), icon: IconLayoutCompact },
           {
             value: 'offcanvas',
-            label: 'Full layout',
+            label: t('Full layout'),
             icon: IconLayoutFull,
           },
         ].map((item) => (
@@ -319,6 +516,80 @@ function LayoutConfig() {
   )
 }
 
+function ContentLayoutConfig() {
+  const { t } = useTranslation()
+  const { defaults, customization, setContentLayout } = useThemeCustomization()
+  return (
+    <div className='max-md:hidden'>
+      <SectionTitle
+        title={t('Content width')}
+        showReset={customization.contentLayout !== defaults.contentLayout}
+        onReset={() => setContentLayout(defaults.contentLayout)}
+      />
+      <Radio
+        value={customization.contentLayout}
+        onValueChange={(v) => setContentLayout(v as ContentLayout)}
+        className='grid w-full grid-cols-2 gap-4'
+        aria-label={t('Select content width')}
+      >
+        {[
+          { value: 'full', label: t('Full width') },
+          { value: 'centered', label: t('Centered') },
+        ].map((option) => (
+          <Item
+            key={option.value}
+            value={option.value}
+            className='group flex flex-col items-stretch outline-none'
+            aria-label={option.label}
+          >
+            <div
+              className={cn(
+                'ring-border relative h-12 rounded-md ring-[1px] transition',
+                'group-data-checked:ring-primary group-data-checked:shadow-md',
+                'group-focus-visible:ring-2',
+                'group-hover:ring-primary/60'
+              )}
+            >
+              <CircleCheck
+                className={cn(
+                  'fill-primary absolute top-0 right-0 z-10 size-5 translate-x-1/2 -translate-y-1/2 stroke-white',
+                  'group-data-unchecked:hidden'
+                )}
+                aria-hidden='true'
+              />
+              <ContentLayoutPreview centered={option.value === 'centered'} />
+            </div>
+            <div className='mt-1.5 truncate text-center text-xs'>
+              {option.label}
+            </div>
+          </Item>
+        ))}
+      </Radio>
+    </div>
+  )
+}
+
+/**
+ * Mini "page" mock used as the visual preview for content-width options.
+ * `full` fills horizontally, `centered` clamps the body to a narrow column.
+ */
+function ContentLayoutPreview(props: { centered: boolean }) {
+  return (
+    <div aria-hidden='true' className='absolute inset-2 flex flex-col gap-1.5'>
+      <span className='bg-foreground/40 block h-1.5 w-full rounded-sm' />
+      <div
+        className={cn(
+          'flex flex-1 flex-col gap-1',
+          props.centered ? 'mx-auto w-1/2' : 'w-full'
+        )}
+      >
+        <span className='bg-foreground/60 block h-[2px] w-full rounded-full' />
+        <span className='bg-foreground/60 block h-[2px] w-3/4 rounded-full' />
+      </div>
+    </div>
+  )
+}
+
 function DirConfig() {
   const { t } = useTranslation()
   const { defaultDir, dir, setDir } = useDirection()
@@ -339,14 +610,14 @@ function DirConfig() {
         {[
           {
             value: 'ltr',
-            label: 'Left to Right',
+            label: t('Left to Right'),
             icon: (props: SVGProps<SVGSVGElement>) => (
               <IconDir dir='ltr' {...props} />
             ),
           },
           {
             value: 'rtl',
-            label: 'Right to Left',
+            label: t('Right to Left'),
             icon: (props: SVGProps<SVGSVGElement>) => (
               <IconDir dir='rtl' {...props} />
             ),
diff --git a/web/default/src/components/confirm-dialog.tsx b/web/default/src/components/confirm-dialog.tsx
index bbffd00694d..66a02c58ef4 100644
--- a/web/default/src/components/confirm-dialog.tsx
+++ b/web/default/src/components/confirm-dialog.tsx
@@ -46,8 +46,8 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
       <AlertDialogContent className={cn(className && className)}>
         <AlertDialogHeader className='text-start'>
           <AlertDialogTitle>{title}</AlertDialogTitle>
-          <AlertDialogDescription asChild>
-            <div>{desc}</div>
+          <AlertDialogDescription render={<div />}>
+            {desc}
           </AlertDialogDescription>
         </AlertDialogHeader>
         {children}
diff --git a/web/default/src/components/copy-button.tsx b/web/default/src/components/copy-button.tsx
index 3a487c7656a..bbdaba996d6 100644
--- a/web/default/src/components/copy-button.tsx
+++ b/web/default/src/components/copy-button.tsx
@@ -61,7 +61,7 @@ export function CopyButton({
   if (tooltip || successTooltip) {
     return (
       <Tooltip>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipTrigger render={button}></TooltipTrigger>
         <TooltipContent>
           <p>{isCopied ? resolvedSuccessTooltip : resolvedTooltip}</p>
         </TooltipContent>
diff --git a/web/default/src/components/data-table/bulk-actions.tsx b/web/default/src/components/data-table/bulk-actions.tsx
index 3f537411a19..d1ec088defc 100644
--- a/web/default/src/components/data-table/bulk-actions.tsx
+++ b/web/default/src/components/data-table/bulk-actions.tsx
@@ -88,7 +88,7 @@ export function DataTableBulkActions<TData>({
         break
       case 'Escape': {
         // Check if the Escape key came from a dropdown trigger or content
-        // We can't check dropdown state because Radix UI closes it before our handler runs
+        // We can't check dropdown state because the menu closes before our handler runs.
         const target = event.target as HTMLElement
         const activeElement = document.activeElement as HTMLElement
 
@@ -156,18 +156,20 @@ export function DataTableBulkActions<TData>({
           )}
         >
           <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant='outline'
-                size='icon'
-                onClick={handleClearSelection}
-                className='size-6 rounded-full'
-                aria-label={t('Clear selection')}
-                title={t('Clear selection (Escape)')}
-              >
-                <X />
-                <span className='sr-only'>{t('Clear selection')}</span>
-              </Button>
+            <TooltipTrigger
+              render={
+                <Button
+                  variant='outline'
+                  size='icon'
+                  onClick={handleClearSelection}
+                  className='size-6 rounded-full'
+                  aria-label={t('Clear selection')}
+                  title={t('Clear selection (Escape)')}
+                />
+              }
+            >
+              <X />
+              <span className='sr-only'>{t('Clear selection')}</span>
             </TooltipTrigger>
             <TooltipContent>
               <p>{t('Clear selection (Escape)')}</p>
diff --git a/web/default/src/components/data-table/column-header.tsx b/web/default/src/components/data-table/column-header.tsx
index 50da0e2a54f..5cadfb94dba 100644
--- a/web/default/src/components/data-table/column-header.tsx
+++ b/web/default/src/components/data-table/column-header.tsx
@@ -1,10 +1,10 @@
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  CaretSortIcon,
-  EyeNoneIcon,
-} from '@radix-ui/react-icons'
 import { type Column } from '@tanstack/react-table'
+import {
+  ArrowDown as ArrowDownIcon,
+  ArrowUp as ArrowUpIcon,
+  ChevronsUpDown as CaretSortIcon,
+  EyeOff as EyeNoneIcon,
+} from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
@@ -35,21 +35,23 @@ export function DataTableColumnHeader<TData, TValue>({
   return (
     <div className={cn('flex items-center space-x-2', className)}>
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant='ghost'
-            size='sm'
-            className='data-[state=open]:bg-accent -ms-3 h-8'
-          >
-            <span>{title}</span>
-            {column.getIsSorted() === 'desc' ? (
-              <ArrowDownIcon className='ms-2 h-4 w-4' />
-            ) : column.getIsSorted() === 'asc' ? (
-              <ArrowUpIcon className='ms-2 h-4 w-4' />
-            ) : (
-              <CaretSortIcon className='ms-2 h-4 w-4' />
-            )}
-          </Button>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              variant='ghost'
+              size='sm'
+              className='data-popup-open:bg-accent -ms-3 h-8'
+            />
+          }
+        >
+          <span>{title}</span>
+          {column.getIsSorted() === 'desc' ? (
+            <ArrowDownIcon className='ms-2 h-4 w-4' />
+          ) : column.getIsSorted() === 'asc' ? (
+            <ArrowUpIcon className='ms-2 h-4 w-4' />
+          ) : (
+            <CaretSortIcon className='ms-2 h-4 w-4' />
+          )}
         </DropdownMenuTrigger>
         <DropdownMenuContent align='start'>
           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
diff --git a/web/default/src/components/data-table/data-table-page.tsx b/web/default/src/components/data-table/data-table-page.tsx
new file mode 100644
index 00000000000..14f62d2757d
--- /dev/null
+++ b/web/default/src/components/data-table/data-table-page.tsx
@@ -0,0 +1,372 @@
+import * as React from 'react'
+import {
+  flexRender,
+  type ColumnDef,
+  type Row,
+  type Table as TanstackTable,
+} from '@tanstack/react-table'
+import { useMediaQuery } from '@/hooks'
+import { cn } from '@/lib/utils'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { PageFooterPortal } from '@/components/layout'
+import { MobileCardList } from './mobile-card-list'
+import { DataTablePagination } from './pagination'
+import { TableEmpty } from './table-empty'
+import { TableSkeleton } from './table-skeleton'
+import { DataTableToolbar } from './toolbar'
+
+/**
+ * Pass-through configuration for the default {@link DataTableToolbar}.
+ * Pass `toolbar` (ReactNode) instead to fully replace the default toolbar.
+ */
+export type DataTablePageToolbarProps<TData> = Omit<
+  React.ComponentProps<typeof DataTableToolbar<TData>>,
+  'table'
+>
+
+export type DataTablePageProps<TData> = {
+  /**
+   * TanStack Table instance returned from `useReactTable`.
+   */
+  table: TanstackTable<TData>
+
+  /**
+   * Column definitions. Used for skeleton column count and empty-state colSpan.
+   */
+  columns: ColumnDef<TData, unknown>[]
+
+  /**
+   * Initial loading state — renders {@link TableSkeleton} or mobile skeleton.
+   */
+  isLoading?: boolean
+
+  /**
+   * Refetch / background loading — dims the table without removing rows.
+   */
+  isFetching?: boolean
+
+  /**
+   * Empty-state title (used for both desktop {@link TableEmpty} and mobile fallback).
+   */
+  emptyTitle?: string
+
+  /**
+   * Empty-state description.
+   */
+  emptyDescription?: string
+
+  /**
+   * Empty-state icon override (desktop only; mobile uses default Database icon).
+   */
+  emptyIcon?: React.ReactNode
+
+  /**
+   * Empty-state extra content — e.g. a "Create" button below the message.
+   */
+  emptyAction?: React.ReactNode
+
+  /**
+   * Custom toolbar node — fully replaces the default {@link DataTableToolbar}.
+   * Useful for layouts like "primary buttons + toolbar" or feature-specific filter cards.
+   * If provided, `toolbarProps` is ignored.
+   */
+  toolbar?: React.ReactNode
+
+  /**
+   * Pass-through props for the default {@link DataTableToolbar}.
+   * Ignored if `toolbar` is provided. Pass `null` to omit the toolbar entirely.
+   */
+  toolbarProps?: DataTablePageToolbarProps<TData> | null
+
+  /**
+   * Bulk action bar — typically a wrapped {@link DataTableBulkActions} component.
+   * Rendered only on desktop (mobile selection is uncommon).
+   */
+  bulkActions?: React.ReactNode
+
+  /**
+   * Custom mobile list node — fully replaces the default {@link MobileCardList}.
+   */
+  mobile?: React.ReactNode
+
+  /**
+   * Pass-through props for the default {@link MobileCardList}.
+   * Ignored if `mobile` is provided.
+   */
+  mobileProps?: {
+    getRowKey?: (row: Row<TData>) => string | number
+    getRowClassName?: (row: Row<TData>) => string | undefined
+  }
+
+  /**
+   * Disable the mobile-specific layout entirely — always renders desktop table.
+   * Useful for pages where the table is read-only and short.
+   */
+  hideMobile?: boolean
+
+  /**
+   * Row className resolver — applied to both desktop `TableRow` and mobile card.
+   * Composes with the default `data-state="selected"` styling on desktop.
+   * The `ctx.isMobile` flag is provided so consumers can return the
+   * appropriate variant (e.g. `DISABLED_ROW_DESKTOP` vs `DISABLED_ROW_MOBILE`)
+   * without having to re-call `useMediaQuery` themselves.
+   */
+  getRowClassName?: (
+    row: Row<TData>,
+    ctx: { isMobile: boolean }
+  ) => string | undefined
+
+  /**
+   * Custom desktop row renderer — replaces the default `<TableRow>`/`<TableCell>` mapping.
+   * Use for expanded rows, aggregate rows, click-on-row navigation, etc.
+   */
+  renderRow?: (row: Row<TData>) => React.ReactNode
+
+  /**
+   * Apply explicit column widths from `header.getSize()` to `<TableHead>`.
+   * Enable this when your column definitions include `size` and you want it honored.
+   * Off by default (TanStack Table assigns a default size of 150 to all columns
+   * which would unintentionally constrain layouts that don't define sizes).
+   */
+  applyHeaderSize?: boolean
+
+  /**
+   * Optional skeleton key prefix for stable React keys across re-renders.
+   */
+  skeletonKeyPrefix?: string
+
+  /**
+   * Whether to render pagination. Defaults to `true`.
+   */
+  showPagination?: boolean
+
+  /**
+   * Render pagination via `PageFooterPortal` (sticks to page footer).
+   * Defaults to `true`. Set `false` to render inline below the table.
+   */
+  paginationInFooter?: boolean
+
+  /**
+   * Extra content rendered between the table/mobile list and the pagination.
+   * E.g. summary stats, helper text.
+   */
+  afterTable?: React.ReactNode
+
+  /**
+   * Outer wrapper className (applied to the toolbar+table column).
+   */
+  className?: string
+
+  /**
+   * Desktop table container className (the bordered scroll wrapper).
+   */
+  tableClassName?: string
+
+  /**
+   * Desktop `<TableHeader>` className override.
+   * Useful for sticky headers (`'sticky top-0 z-10 bg-muted/30'`) on long lists.
+   */
+  tableHeaderClassName?: string
+}
+
+/**
+ * Unified table page wrapper. Encapsulates the canonical structure used across
+ * all list pages: toolbar → desktop table / mobile list → pagination, plus
+ * loading/empty states and an opt-in bulk action bar.
+ *
+ * Most pages should be expressible as:
+ * ```tsx
+ * <DataTablePage
+ *   table={table}
+ *   columns={columns}
+ *   isLoading={isLoading}
+ *   isFetching={isFetching}
+ *   emptyTitle={t('No X Found')}
+ *   toolbarProps={{ searchPlaceholder: t('Filter...'), filters }}
+ *   bulkActions={<MyBulkActions table={table} />}
+ * />
+ * ```
+ *
+ * For complex layouts (custom mobile, expanded rows, custom toolbar), use the
+ * `toolbar` / `mobile` / `renderRow` slots instead of the `*Props` variants.
+ */
+export function DataTablePage<TData>(props: DataTablePageProps<TData>) {
+  const isMobile = useMediaQuery('(max-width: 640px)')
+  const showMobile = isMobile && !props.hideMobile
+
+  const toolbarNode = renderToolbar(props)
+  const mobileNode = renderMobile(props, showMobile)
+  const desktopNode = renderDesktop(props, showMobile)
+
+  return (
+    <>
+      <div className={cn('space-y-2.5 sm:space-y-3', props.className)}>
+        {toolbarNode}
+        {mobileNode}
+        {desktopNode}
+        {props.afterTable}
+      </div>
+
+      {/* Bulk actions are typically a fixed-position toolbar; let the consumer
+          handle its own visibility, we just gate it to non-mobile. */}
+      {!showMobile && props.bulkActions}
+
+      {props.showPagination !== false &&
+        (props.paginationInFooter !== false ? (
+          <PageFooterPortal>
+            <DataTablePagination table={props.table} />
+          </PageFooterPortal>
+        ) : (
+          <div className='pt-2'>
+            <DataTablePagination table={props.table} />
+          </div>
+        ))}
+    </>
+  )
+}
+
+function renderToolbar<TData>(
+  props: DataTablePageProps<TData>
+): React.ReactNode {
+  if (props.toolbar !== undefined) {
+    return props.toolbar
+  }
+  if (props.toolbarProps === null) {
+    return null
+  }
+  if (props.toolbarProps) {
+    return <DataTableToolbar table={props.table} {...props.toolbarProps} />
+  }
+  return null
+}
+
+function renderMobile<TData>(
+  props: DataTablePageProps<TData>,
+  showMobile: boolean
+): React.ReactNode {
+  if (!showMobile) return null
+  if (props.mobile !== undefined) return props.mobile
+
+  const ownGetRowClassName = props.getRowClassName
+  const mobileGetRowClassName =
+    props.mobileProps?.getRowClassName ??
+    (ownGetRowClassName
+      ? (row: Row<TData>) => ownGetRowClassName(row, { isMobile: true })
+      : undefined)
+
+  return (
+    <MobileCardList
+      table={props.table}
+      isLoading={props.isLoading}
+      emptyTitle={props.emptyTitle}
+      emptyDescription={props.emptyDescription}
+      getRowKey={props.mobileProps?.getRowKey}
+      getRowClassName={mobileGetRowClassName}
+    />
+  )
+}
+
+function renderDesktop<TData>(
+  props: DataTablePageProps<TData>,
+  showMobile: boolean
+): React.ReactNode {
+  if (showMobile) return null
+
+  const rows = props.table.getRowModel().rows
+  const isFetchingOnly = props.isFetching && !props.isLoading
+
+  return (
+    <div
+      className={cn(
+        'overflow-hidden rounded-lg border transition-opacity duration-150',
+        isFetchingOnly && 'pointer-events-none opacity-60',
+        props.tableClassName
+      )}
+    >
+      <Table>
+        <TableHeader className={props.tableHeaderClassName}>
+          {props.table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead
+                  key={header.id}
+                  colSpan={header.colSpan}
+                  style={
+                    props.applyHeaderSize
+                      ? { width: header.getSize() }
+                      : undefined
+                  }
+                >
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {props.isLoading ? (
+            <TableSkeleton
+              table={props.table}
+              keyPrefix={props.skeletonKeyPrefix}
+            />
+          ) : rows.length === 0 ? (
+            <TableEmpty
+              colSpan={props.columns.length}
+              title={props.emptyTitle}
+              description={props.emptyDescription}
+              icon={props.emptyIcon}
+            >
+              {props.emptyAction}
+            </TableEmpty>
+          ) : (
+            rows.map((row) => {
+              if (props.renderRow) {
+                return props.renderRow(row)
+              }
+              return (
+                <DefaultRow
+                  key={row.id}
+                  row={row}
+                  className={props.getRowClassName?.(row, { isMobile: false })}
+                />
+              )
+            })
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
+function DefaultRow<TData>({
+  row,
+  className,
+}: {
+  row: Row<TData>
+  className?: string
+}) {
+  return (
+    <TableRow
+      data-state={row.getIsSelected() && 'selected'}
+      className={className}
+    >
+      {row.getVisibleCells().map((cell) => (
+        <TableCell key={cell.id}>
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </TableCell>
+      ))}
+    </TableRow>
+  )
+}
diff --git a/web/default/src/components/data-table/faceted-filter.tsx b/web/default/src/components/data-table/faceted-filter.tsx
index 62ebe7fdc04..a37148884cf 100644
--- a/web/default/src/components/data-table/faceted-filter.tsx
+++ b/web/default/src/components/data-table/faceted-filter.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { CheckIcon, PlusCircledIcon } from '@radix-ui/react-icons'
 import { type Column } from '@tanstack/react-table'
+import { Check as CheckIcon, PlusCircle as PlusCircledIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/lib/utils'
 import { Badge } from '@/components/ui/badge'
@@ -48,44 +48,46 @@ export function DataTableFacetedFilter<TData, TValue>({
 
   return (
     <Popover>
-      <PopoverTrigger asChild>
-        <Button variant='outline' size='sm' className='h-8 border-dashed'>
-          <PlusCircledIcon className='size-4' />
-          {title}
-          {selectedValues?.size > 0 && (
-            <>
-              <Separator orientation='vertical' className='mx-2 h-4' />
-              <Badge
-                variant='secondary'
-                className='rounded-sm px-1 font-normal lg:hidden'
-              >
-                {selectedValues.size}
-              </Badge>
-              <div className='hidden space-x-1 lg:flex'>
-                {selectedValues.size > 2 ? (
-                  <Badge
-                    variant='secondary'
-                    className='rounded-sm px-1 font-normal'
-                  >
-                    {selectedValues.size} {t('selected')}
-                  </Badge>
-                ) : (
-                  options
-                    .filter((option) => selectedValues.has(option.value))
-                    .map((option) => (
-                      <Badge
-                        variant='secondary'
-                        key={option.value}
-                        className='rounded-sm px-1 font-normal'
-                      >
-                        {t(option.label)}
-                      </Badge>
-                    ))
-                )}
-              </div>
-            </>
-          )}
-        </Button>
+      <PopoverTrigger
+        render={
+          <Button variant='outline' size='sm' className='h-8 border-dashed' />
+        }
+      >
+        <PlusCircledIcon className='size-4' />
+        {title}
+        {selectedValues?.size > 0 && (
+          <>
+            <Separator orientation='vertical' className='mx-2 h-4' />
+            <Badge
+              variant='secondary'
+              className='rounded-sm px-1 font-normal lg:hidden'
+            >
+              {selectedValues.size}
+            </Badge>
+            <div className='hidden space-x-1 lg:flex'>
+              {selectedValues.size > 2 ? (
+                <Badge
+                  variant='secondary'
+                  className='rounded-sm px-1 font-normal'
+                >
+                  {selectedValues.size} {t('selected')}
+                </Badge>
+              ) : (
+                options
+                  .filter((option) => selectedValues.has(option.value))
+                  .map((option) => (
+                    <Badge
+                      variant='secondary'
+                      key={option.value}
+                      className='rounded-sm px-1 font-normal'
+                    >
+                      {t(option.label)}
+                    </Badge>
+                  ))
+              )}
+            </div>
+          </>
+        )}
       </PopoverTrigger>
       <PopoverContent className='w-[200px] p-0' align='start'>
         <Command>
diff --git a/web/default/src/components/data-table/index.ts b/web/default/src/components/data-table/index.ts
index adb13de1ef3..12e86c78025 100644
--- a/web/default/src/components/data-table/index.ts
+++ b/web/default/src/components/data-table/index.ts
@@ -7,6 +7,7 @@ export { DataTableBulkActions } from './bulk-actions'
 export { TableSkeleton } from './table-skeleton'
 export { TableEmpty } from './table-empty'
 export { MobileCardList } from './mobile-card-list'
+export { DataTablePage, type DataTablePageProps } from './data-table-page'
 
 export const DISABLED_ROW_DESKTOP =
   'bg-muted/85 hover:bg-muted [&>td:first-child]:border-l-muted-foreground/35 dark:bg-zinc-700/55 dark:hover:bg-zinc-700/70 [&>td:first-child]:border-l-4 [&>td:first-child]:pl-1 dark:[&>td:first-child]:border-l-zinc-300/70'
diff --git a/web/default/src/components/data-table/mobile-card-list.tsx b/web/default/src/components/data-table/mobile-card-list.tsx
index 1ec364c3921..6b350131048 100644
--- a/web/default/src/components/data-table/mobile-card-list.tsx
+++ b/web/default/src/components/data-table/mobile-card-list.tsx
@@ -6,6 +6,7 @@ import {
 } from '@tanstack/react-table'
 import { Database } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
 import {
   Empty,
   EmptyDescription,
@@ -14,7 +15,6 @@ import {
   EmptyTitle,
 } from '@/components/ui/empty'
 import { Skeleton } from '@/components/ui/skeleton'
-import { cn } from '@/lib/utils'
 
 interface MobileCardListProps<TData> {
   table: Table<TData>
diff --git a/web/default/src/components/data-table/pagination.tsx b/web/default/src/components/data-table/pagination.tsx
index b2f3b049ade..a3df3c5b315 100644
--- a/web/default/src/components/data-table/pagination.tsx
+++ b/web/default/src/components/data-table/pagination.tsx
@@ -1,10 +1,10 @@
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DoubleArrowLeftIcon,
-  DoubleArrowRightIcon,
-} from '@radix-ui/react-icons'
 import { type Table } from '@tanstack/react-table'
+import {
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+  ChevronsLeft as DoubleArrowLeftIcon,
+  ChevronsRight as DoubleArrowRightIcon,
+} from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { cn, getPageNumbers } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
diff --git a/web/default/src/components/data-table/toolbar.tsx b/web/default/src/components/data-table/toolbar.tsx
index a747366649f..5c6d77bfb10 100644
--- a/web/default/src/components/data-table/toolbar.tsx
+++ b/web/default/src/components/data-table/toolbar.tsx
@@ -1,82 +1,152 @@
-import { useState } from 'react'
-import { Cross2Icon } from '@radix-ui/react-icons'
+import * as React from 'react'
+import { useState, type ReactNode } from 'react'
 import { type Table } from '@tanstack/react-table'
-import { SlidersHorizontal } from 'lucide-react'
+import { ChevronDown, Loader2, X as Cross2Icon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { DataTableFacetedFilter } from './faceted-filter'
 import { DataTableViewOptions } from './view-options'
 
-type DataTableToolbarProps<TData> = {
+type FilterDef = {
+  columnId: string
+  title: string
+  options: {
+    label: string
+    value: string
+    icon?: React.ComponentType<{ className?: string }>
+    iconNode?: React.ReactNode
+    count?: number
+  }[]
+  singleSelect?: boolean
+}
+
+export type DataTableToolbarProps<TData> = {
   table: Table<TData>
+  /**
+   * Placeholder for the default search input. Defaults to `t('Filter...')`.
+   */
   searchPlaceholder?: string
+  /**
+   * Column id to filter on. When provided, the search input filters
+   * a specific column. When omitted, the search input updates the
+   * table's `globalFilter`.
+   */
   searchKey?: string
-  filters?: {
-    columnId: string
-    title: string
-    options: {
-      label: string
-      value: string
-      icon?: React.ComponentType<{ className?: string }>
-      iconNode?: React.ReactNode
-      count?: number
-    }[]
-    singleSelect?: boolean
-  }[]
-  /** Custom search component to replace the default input */
-  customSearch?: React.ReactNode
-  /** Additional search input to show alongside the main search */
-  additionalSearch?: React.ReactNode
-  /** Whether additional filters are active (for showing reset button) */
+  /**
+   * Column-level filter chips (faceted multi-select / single-select).
+   */
+  filters?: FilterDef[]
+  /**
+   * Replaces the default search input entirely. Use when the primary
+   * "search" is something custom — e.g. a date-time range picker.
+   */
+  customSearch?: ReactNode
+  /**
+   * Extra inputs/selects displayed in the primary row alongside the
+   * search input and filter chips.
+   */
+  additionalSearch?: ReactNode
+  /**
+   * Whether non-table filters (e.g. `additionalSearch` or `expandable`
+   * inputs) are currently active. Controls Reset button visibility
+   * when no column filters are set.
+   */
   hasAdditionalFilters?: boolean
-  /** Callback when reset button is clicked (for clearing additional filters) */
+  /**
+   * Callback invoked when the user clicks Reset.
+   */
   onReset?: () => void
+  /**
+   * Additional filter inputs hidden behind an Expand/Collapse toggle.
+   * Inputs flow inline with the primary row when expanded.
+   */
+  expandable?: ReactNode
+  /**
+   * When `expandable` is collapsed, highlights the toggle if any of
+   * the expandable inputs currently hold a value.
+   */
+  hasExpandedActiveFilters?: boolean
+  /**
+   * Custom action buttons rendered BEFORE the built-in
+   * Reset / Search / View buttons.
+   */
+  preActions?: ReactNode
+  /**
+   * Explicit "Search" / "Apply" callback. When provided the toolbar
+   * shows a primary Search button. Filters are committed only on click
+   * (form-mode workflow).
+   */
+  onSearch?: () => void
+  /**
+   * Loading state for the explicit Search button.
+   */
+  searchLoading?: boolean
+  /**
+   * Hide the View Options (column visibility) dropdown.
+   */
+  hideViewOptions?: boolean
+  /**
+   * Outer wrapper className override.
+   */
+  className?: string
 }
 
-export function DataTableToolbar<TData>({
-  table,
-  searchPlaceholder,
-  searchKey,
-  filters = [],
-  customSearch,
-  additionalSearch,
-  hasAdditionalFilters = false,
-  onReset,
-}: DataTableToolbarProps<TData>) {
+/**
+ * Unified data-table filter panel — Ant Design Pro inspired.
+ *
+ * Layout (single flex-wrap row):
+ * - Filters (search input + additional inputs + filter chips + expandable
+ *   inputs) flow horizontally and wrap as needed.
+ * - The action cluster (Reset / Search / View / Expand) hugs the right
+ *   edge via `ms-auto`. When filters fill a row, the cluster naturally
+ *   wraps to the next line — still right-aligned — matching the
+ *   collapsed/expanded states from the user's reference design.
+ *
+ * No background panel, no row separators — relies on whitespace and the
+ * adjacent table border for visual hierarchy.
+ */
+export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
   const { t } = useTranslation()
-  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false)
-  const resolvedSearchPlaceholder = searchPlaceholder ?? t('Filter...')
+  const [expanded, setExpanded] = useState(false)
+
+  const filters = props.filters ?? []
+  const hasExpandable = props.expandable != null
+  const hasSearch = props.onSearch != null
+
   const isFiltered =
-    table.getState().columnFilters.length > 0 ||
-    table.getState().globalFilter ||
-    hasAdditionalFilters
+    props.table.getState().columnFilters.length > 0 ||
+    !!props.table.getState().globalFilter ||
+    !!props.hasAdditionalFilters
 
-  const activeFilterCount =
-    table.getState().columnFilters.length + (hasAdditionalFilters ? 1 : 0)
-  const hasFilterContent = filters.length > 0 || additionalSearch != null
+  const placeholder = props.searchPlaceholder ?? t('Filter...')
 
-  const searchInput = searchKey ? (
+  const searchInput = props.searchKey ? (
     <Input
-      placeholder={resolvedSearchPlaceholder}
-      value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ''}
+      placeholder={placeholder}
+      value={
+        (props.table.getColumn(props.searchKey)?.getFilterValue() as string) ??
+        ''
+      }
       onChange={(event) =>
-        table.getColumn(searchKey)?.setFilterValue(event.target.value)
+        props.table
+          .getColumn(props.searchKey!)
+          ?.setFilterValue(event.target.value)
       }
-      className='h-9 w-full sm:h-8 sm:w-[150px] lg:w-[250px]'
+      className='w-full sm:w-[200px] lg:w-[240px]'
     />
   ) : (
     <Input
-      placeholder={resolvedSearchPlaceholder}
-      value={table.getState().globalFilter ?? ''}
-      onChange={(event) => table.setGlobalFilter(event.target.value)}
-      className='h-9 w-full sm:h-8 sm:w-[150px] lg:w-[250px]'
+      placeholder={placeholder}
+      value={props.table.getState().globalFilter ?? ''}
+      onChange={(event) => props.table.setGlobalFilter(event.target.value)}
+      className='w-full sm:w-[200px] lg:w-[240px]'
     />
   )
 
   const filterChips = filters.map((filter) => {
-    const column = table.getColumn(filter.columnId)
+    const column = props.table.getColumn(filter.columnId)
     if (!column) return null
     return (
       <DataTableFacetedFilter
@@ -89,65 +159,82 @@ export function DataTableToolbar<TData>({
     )
   })
 
-  const resetButton = isFiltered ? (
+  const handleReset = () => {
+    props.table.resetColumnFilters()
+    props.table.setGlobalFilter('')
+    props.onReset?.()
+  }
+
+  // Reset: outline text-only for form mode (always visible, disabled when
+  // nothing to reset); ghost text + X for filter-as-you-type mode (only
+  // visible when active filters exist).
+  const resetButton = hasSearch ? (
+    <Button variant='outline' onClick={handleReset} disabled={!isFiltered}>
+      {t('Reset')}
+    </Button>
+  ) : isFiltered ? (
     <Button
       variant='ghost'
-      onClick={() => {
-        table.resetColumnFilters()
-        table.setGlobalFilter('')
-        onReset?.()
-      }}
-      className='h-8 px-2 lg:px-3'
+      onClick={handleReset}
+      className='text-muted-foreground hover:text-foreground gap-1 px-2'
     >
       {t('Reset')}
-      <Cross2Icon className='ms-2 h-4 w-4' />
+      <Cross2Icon />
     </Button>
   ) : null
 
-  return (
-    <div className='space-y-2'>
-      <div className='flex items-center gap-1.5 sm:gap-2'>
-        {/* Search input */}
-        {customSearch !== undefined ? customSearch : searchInput}
+  const searchButton = hasSearch ? (
+    <Button onClick={props.onSearch} disabled={props.searchLoading}>
+      {props.searchLoading && <Loader2 className='animate-spin' />}
+      {t('Search')}
+    </Button>
+  ) : null
 
-        {/* Desktop: filters inline */}
-        {additionalSearch && (
-          <div className='hidden w-auto sm:block'>{additionalSearch}</div>
-        )}
-        <div className='hidden flex-wrap gap-2 sm:flex'>{filterChips}</div>
-        <div className='hidden sm:block'>{resetButton}</div>
+  const viewOptionsNode = !props.hideViewOptions ? (
+    <DataTableViewOptions table={props.table} />
+  ) : null
 
-        {/* Mobile: filter toggle button */}
-        {hasFilterContent && (
-          <Button
-            variant='outline'
-            size='sm'
-            className='relative h-9 shrink-0 gap-1 px-2 sm:hidden'
-            onClick={() => setMobileFiltersOpen((v) => !v)}
-          >
-            <SlidersHorizontal className='h-3.5 w-3.5' />
-            {activeFilterCount > 0 && (
-              <Badge
-                variant='secondary'
-                className='h-4 min-w-4 rounded-full px-1 text-[10px] leading-none'
-              >
-                {activeFilterCount}
-              </Badge>
-            )}
-          </Button>
+  const expandToggle = hasExpandable ? (
+    <Button
+      variant='ghost'
+      onClick={() => setExpanded((p) => !p)}
+      aria-expanded={expanded}
+      className={cn(
+        'text-muted-foreground hover:text-foreground gap-1 px-2',
+        props.hasExpandedActiveFilters &&
+          !expanded &&
+          'text-primary hover:text-primary'
+      )}
+    >
+      {expanded ? t('Collapse') : t('Expand')}
+      <ChevronDown
+        className={cn(
+          'size-3.5 transition-transform duration-200',
+          expanded && 'rotate-180'
         )}
+      />
+    </Button>
+  ) : null
 
-        <DataTableViewOptions table={table} />
-      </div>
-
-      {/* Mobile: collapsible filter area */}
-      {hasFilterContent && mobileFiltersOpen && (
-        <div className='bg-muted/30 flex flex-wrap items-center gap-2 rounded-lg border p-2 sm:hidden'>
-          {additionalSearch && <div className='w-full'>{additionalSearch}</div>}
-          {filterChips}
-          {resetButton}
-        </div>
+  return (
+    <div
+      className={cn(
+        'flex flex-wrap items-center gap-2 sm:gap-3',
+        props.className
       )}
+    >
+      {props.customSearch !== undefined ? props.customSearch : searchInput}
+      {props.additionalSearch}
+      {filterChips}
+      {expanded && hasExpandable && props.expandable}
+
+      <div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'>
+        {props.preActions}
+        {resetButton}
+        {searchButton}
+        {viewOptionsNode}
+        {expandToggle}
+      </div>
     </div>
   )
 }
diff --git a/web/default/src/components/data-table/view-options.tsx b/web/default/src/components/data-table/view-options.tsx
index a2dad238fa8..7b4fd9584c1 100644
--- a/web/default/src/components/data-table/view-options.tsx
+++ b/web/default/src/components/data-table/view-options.tsx
@@ -1,5 +1,3 @@
-import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
-import { MixerHorizontalIcon } from '@radix-ui/react-icons'
 import { type Table } from '@tanstack/react-table'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
@@ -7,8 +5,9 @@ import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 
 type DataTableViewOptionsProps<TData> = {
@@ -21,37 +20,39 @@ export function DataTableViewOptions<TData>({
   const { t } = useTranslation()
   return (
     <DropdownMenu modal={false}>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant='outline'
-          size='sm'
-          className='ms-auto h-9 w-9 px-0 sm:h-8 sm:w-auto sm:px-3 lg:flex'
-        >
-          <MixerHorizontalIcon className='size-4' />
-          <span className='hidden sm:inline'>{t('View')}</span>
-        </Button>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant='outline'
+            className='shrink-0'
+            aria-label={t('View')}
+          />
+        }
+      >
+        {t('View')}
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end' className='w-[150px]'>
-        <DropdownMenuLabel>{t('Toggle columns')}</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {table
-          .getAllColumns()
-          .filter(
-            (column) =>
-              typeof column.accessorFn !== 'undefined' && column.getCanHide()
-          )
-          .map((column) => {
-            return (
-              <DropdownMenuCheckboxItem
-                key={column.id}
-                className='capitalize'
-                checked={column.getIsVisible()}
-                onCheckedChange={(value) => column.toggleVisibility(!!value)}
-              >
-                {column.columnDef.meta?.label ?? column.id}
-              </DropdownMenuCheckboxItem>
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>{t('Toggle columns')}</DropdownMenuLabel>
+          {table
+            .getAllColumns()
+            .filter(
+              (column) =>
+                typeof column.accessorFn !== 'undefined' && column.getCanHide()
             )
-          })}
+            .map((column) => {
+              return (
+                <DropdownMenuCheckboxItem
+                  key={column.id}
+                  className='capitalize'
+                  checked={column.getIsVisible()}
+                  onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                >
+                  {column.columnDef.meta?.label ?? column.id}
+                </DropdownMenuCheckboxItem>
+              )
+            })}
+        </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   )
diff --git a/web/default/src/components/date-picker.tsx b/web/default/src/components/date-picker.tsx
index 1eab5520abf..88dd4dbf98e 100644
--- a/web/default/src/components/date-picker.tsx
+++ b/web/default/src/components/date-picker.tsx
@@ -36,19 +36,21 @@ export function DatePicker({
     calendarLocales[i18n.language as keyof typeof calendarLocales] ?? enUS
   return (
     <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant='outline'
-          data-empty={!selected}
-          className='data-[empty=true]:text-muted-foreground w-[240px] justify-start text-start font-normal'
-        >
-          {selected ? (
-            dayjs(selected).format('YYYY-MM-DD')
-          ) : (
-            <span>{placeholderText}</span>
-          )}
-          <CalendarIcon className='ms-auto h-4 w-4 opacity-50' />
-        </Button>
+      <PopoverTrigger
+        render={
+          <Button
+            variant='outline'
+            data-empty={!selected}
+            className='data-[empty=true]:text-muted-foreground w-[240px] justify-start text-start font-normal'
+          />
+        }
+      >
+        {selected ? (
+          dayjs(selected).format('YYYY-MM-DD')
+        ) : (
+          <span>{placeholderText}</span>
+        )}
+        <CalendarIcon className='ms-auto h-4 w-4 opacity-50' />
       </PopoverTrigger>
       <PopoverContent className='w-auto p-0'>
         <Calendar
diff --git a/web/default/src/components/datetime-picker.tsx b/web/default/src/components/datetime-picker.tsx
index ac0e18689b9..76419a40da1 100644
--- a/web/default/src/components/datetime-picker.tsx
+++ b/web/default/src/components/datetime-picker.tsx
@@ -93,17 +93,19 @@ export function DateTimePicker({
   return (
     <div className={cn('flex gap-2', className)}>
       <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant='outline'
-            className={cn(
-              'flex-1 justify-between font-normal',
-              !date && 'text-muted-foreground'
-            )}
-          >
-            {date ? dayjs(date).format('YYYY-MM-DD') : placeholderText}
-            <ChevronDownIcon className='h-4 w-4 opacity-50' />
-          </Button>
+        <PopoverTrigger
+          render={
+            <Button
+              variant='outline'
+              className={cn(
+                'flex-1 justify-between font-normal',
+                !date && 'text-muted-foreground'
+              )}
+            />
+          }
+        >
+          {date ? dayjs(date).format('YYYY-MM-DD') : placeholderText}
+          <ChevronDownIcon className='h-4 w-4 opacity-50' />
         </PopoverTrigger>
         <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
           <Calendar
diff --git a/web/default/src/components/language-switcher.tsx b/web/default/src/components/language-switcher.tsx
index 7d4168982f3..4c3158c95c8 100644
--- a/web/default/src/components/language-switcher.tsx
+++ b/web/default/src/components/language-switcher.tsx
@@ -41,11 +41,17 @@ export function LanguageSwitcher() {
 
   return (
     <DropdownMenu modal={false}>
-      <DropdownMenuTrigger asChild>
-        <Button variant='ghost' size='icon' className='h-9 w-9 rounded-full'>
-          <Languages className='size-[1.2rem]' />
-          <span className='sr-only'>{t('Change language')}</span>
-        </Button>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant='ghost'
+            size='icon'
+            className='h-9 w-9 rounded-full'
+          />
+        }
+      >
+        <Languages className='size-[1.2rem]' />
+        <span className='sr-only'>{t('Change language')}</span>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end'>
         {languages.map((lang) => (
diff --git a/web/default/src/components/layout/components/app-header.tsx b/web/default/src/components/layout/components/app-header.tsx
index 40ffae8962d..b5889f50071 100644
--- a/web/default/src/components/layout/components/app-header.tsx
+++ b/web/default/src/components/layout/components/app-header.tsx
@@ -1,4 +1,5 @@
 import { useNotifications } from '@/hooks/use-notifications'
+import { useSidebarData } from '@/hooks/use-sidebar-data'
 import { useTopNavLinks } from '@/hooks/use-top-nav-links'
 import { ConfigDrawer } from '@/components/config-drawer'
 import { LanguageSwitcher } from '@/components/language-switcher'
@@ -10,6 +11,7 @@ import { defaultTopNavLinks } from '../config/top-nav.config'
 import { type TopNavLink } from '../types'
 import { Header } from './header'
 import { TopNav } from './top-nav'
+import { WorkspaceSwitcher } from './workspace-switcher'
 
 /**
  * General application Header component
@@ -87,20 +89,30 @@ export function AppHeader({
   // Prioritize dynamically generated links from backend
   const dynamicLinks = useTopNavLinks()
   const links = dynamicLinks.length > 0 ? dynamicLinks : navLinks
+  const sidebarData = useSidebarData()
 
   // Notifications hook
   const notifications = useNotifications()
 
-  // Determine left content: custom content > navigation bar > null
-  const leftSection =
-    leftContent || (showTopNav ? <TopNav links={links} /> : null)
-
   return (
     <>
       <Header>
-        {leftSection}
+        <WorkspaceSwitcher
+          variant='inline'
+          workspaces={sidebarData.workspaces}
+        />
+
+        {leftContent ? (
+          <div className='ms-2 flex items-center'>{leftContent}</div>
+        ) : null}
+
         {rightContent ?? (
-          <div className='ms-auto flex items-center space-x-4'>
+          <div className='ms-auto flex items-center gap-1 sm:gap-2'>
+            {showTopNav && (
+              <div className='me-1 hidden lg:block'>
+                <TopNav links={links} />
+              </div>
+            )}
             {showSearch && <Search />}
             {showNotifications && (
               <NotificationButton
diff --git a/web/default/src/components/layout/components/app-sidebar.tsx b/web/default/src/components/layout/components/app-sidebar.tsx
index 303d574e9d1..d37556e77a2 100644
--- a/web/default/src/components/layout/components/app-sidebar.tsx
+++ b/web/default/src/components/layout/components/app-sidebar.tsx
@@ -6,15 +6,9 @@ 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 { Sidebar, SidebarContent, SidebarRail } from '@/components/ui/sidebar'
 import { getNavGroupsForPath } from '../lib/workspace-registry'
 import { NavGroup } from './nav-group'
-import { WorkspaceSwitcher } from './workspace-switcher'
 
 /**
  * Application sidebar component
@@ -51,10 +45,7 @@ export function AppSidebar() {
 
   return (
     <Sidebar collapsible={collapsible} variant={variant}>
-      <SidebarHeader>
-        <WorkspaceSwitcher workspaces={sidebarData.workspaces} />
-      </SidebarHeader>
-      <SidebarContent>
+      <SidebarContent className='py-2'>
         {currentNavGroups.map((props) => {
           const key = props.id || props.title
           return <NavGroup key={key} {...props} />
diff --git a/web/default/src/components/layout/components/authenticated-layout.tsx b/web/default/src/components/layout/components/authenticated-layout.tsx
index 3ede5f25be8..77c42d89af5 100644
--- a/web/default/src/components/layout/components/authenticated-layout.tsx
+++ b/web/default/src/components/layout/components/authenticated-layout.tsx
@@ -6,6 +6,7 @@ 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 { AppHeader } from './app-header'
 import { AppSidebar } from './app-sidebar'
 
 type AuthenticatedLayoutProps = {
@@ -19,18 +20,21 @@ export function AuthenticatedLayout(props: AuthenticatedLayoutProps) {
     <LayoutProvider>
       <SearchProvider>
         <WorkspaceProvider>
-          <SidebarProvider defaultOpen={defaultOpen}>
+          <SidebarProvider defaultOpen={defaultOpen} className='flex-col'>
             <SkipToMain />
-            <AppSidebar />
-            <SidebarInset
-              className={cn(
-                '@container/content',
-                'h-svh',
-                'peer-data-[variant=inset]:h-[calc(100svh-(var(--spacing)*4))]'
-              )}
-            >
-              {props.children ?? <AnimatedOutlet />}
-            </SidebarInset>
+            <AppHeader />
+            <div className='flex min-h-0 w-full flex-1'>
+              <AppSidebar />
+              <SidebarInset
+                className={cn(
+                  '@container/content',
+                  'h-[calc(100svh-var(--app-header-height,0px))]',
+                  'peer-data-[variant=inset]:h-[calc(100svh-var(--app-header-height,0px)-(var(--spacing)*4))]'
+                )}
+              >
+                {props.children ?? <AnimatedOutlet />}
+              </SidebarInset>
+            </div>
           </SidebarProvider>
         </WorkspaceProvider>
       </SearchProvider>
diff --git a/web/default/src/components/layout/components/chat-presets-item.tsx b/web/default/src/components/layout/components/chat-presets-item.tsx
index aae9fe99624..9fd329a7eb7 100644
--- a/web/default/src/components/layout/components/chat-presets-item.tsx
+++ b/web/default/src/components/layout/components/chat-presets-item.tsx
@@ -53,14 +53,17 @@ function ChatMenuItem({
   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
+          isActive={active}
+          render={
+            <Link
+              to='/chat/$chatId'
+              params={{ chatId: preset.id }}
+              onClick={onNavigate}
+            />
+          }
+        >
+          <span>{preset.name}</span>
         </SidebarMenuSubButton>
       </SidebarMenuSubItem>
     )
@@ -92,10 +95,10 @@ function DropdownPresetItem({
 }) {
   if (preset.type === 'web') {
     return (
-      <DropdownMenuItem asChild>
-        <Link to='/chat/$chatId' params={{ chatId: preset.id }}>
-          {preset.name}
-        </Link>
+      <DropdownMenuItem
+        render={<Link to='/chat/$chatId' params={{ chatId: preset.id }} />}
+      >
+        {preset.name}
       </DropdownMenuItem>
     )
   }
@@ -187,12 +190,12 @@ export function ChatPresetsItem({ item }: { item: NavChatPresets }) {
     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
+            render={<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' />
           </DropdownMenuTrigger>
           <DropdownMenuContent align='start'>
             {visiblePresets.map((preset) => (
@@ -218,40 +221,39 @@ export function ChatPresetsItem({ item }: { item: NavChatPresets }) {
   // Expanded state - render collapsible menu
   return (
     <Collapsible
-      asChild
       defaultOpen={normalizedHref.startsWith('/chat')}
       className='group/collapsible'
+      render={<SidebarMenuItem />}
     >
-      <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>
+      <CollapsibleTrigger
+        className='group/collapsible-trigger'
+        render={<SidebarMenuButton />}
+      >
+        {item.icon && <item.icon />}
+        <span>{item.title}</span>
+        <ChevronRight className='ms-auto transition-transform duration-200 group-data-[panel-open]/collapsible-trigger:rotate-90' />
+      </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>
     </Collapsible>
   )
 }
diff --git a/web/default/src/components/layout/components/footer.tsx b/web/default/src/components/layout/components/footer.tsx
index ced5380556c..b74da94b6b3 100644
--- a/web/default/src/components/layout/components/footer.tsx
+++ b/web/default/src/components/layout/components/footer.tsx
@@ -67,7 +67,7 @@ function ProjectAttribution(props: { currentYear: number }) {
           href='https://github.com/QuantumNous/new-api'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-foreground/70 font-medium transition-colors hover:text-foreground'
+          className='text-foreground/70 hover:text-foreground font-medium transition-colors'
         >
           {t('New API')}
         </a>
@@ -152,7 +152,12 @@ export function Footer(props: FooterProps) {
 
   if (footerHtml) {
     return (
-      <footer className={cn('border-border/40 relative z-10 border-t', props.className)}>
+      <footer
+        className={cn(
+          'border-border/40 relative z-10 border-t',
+          props.className
+        )}
+      >
         <div className='mx-auto w-full max-w-6xl px-6 py-5'>
           <div className='bg-muted/20 border-border/50 flex flex-col items-center justify-between gap-4 rounded-2xl border px-4 py-4 backdrop-blur-sm sm:flex-row sm:px-5'>
             <div
diff --git a/web/default/src/components/layout/components/header.tsx b/web/default/src/components/layout/components/header.tsx
index 7c779a258b0..3dbaa475939 100644
--- a/web/default/src/components/layout/components/header.tsx
+++ b/web/default/src/components/layout/components/header.tsx
@@ -1,5 +1,4 @@
 import { cn } from '@/lib/utils'
-import { Separator } from '@/components/ui/separator'
 import { SidebarTrigger } from '@/components/ui/sidebar'
 
 type HeaderProps = React.HTMLAttributes<HTMLElement>
@@ -7,12 +6,14 @@ 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)}
+      className={cn(
+        'sticky top-0 z-40 h-[var(--app-header-height,3rem)] w-full shrink-0 bg-transparent',
+        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' />
+      <div className='flex h-full items-center gap-1.5 px-2 sm:gap-2 sm:px-3'>
+        <SidebarTrigger variant='ghost' className='size-8' />
         {children}
       </div>
     </header>
diff --git a/web/default/src/components/layout/components/mobile-drawer.tsx b/web/default/src/components/layout/components/mobile-drawer.tsx
index 168eac17d3d..71bdc9c6fa6 100644
--- a/web/default/src/components/layout/components/mobile-drawer.tsx
+++ b/web/default/src/components/layout/components/mobile-drawer.tsx
@@ -137,10 +137,13 @@ interface MobileSignInButtonProps {
 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
+      variant='secondary'
+      size='sm'
+      className='h-10 w-full'
+      render={<Link to='/sign-in' onClick={onNavigate} />}
+    >
+      {t('Sign in')}
     </Button>
   )
 }
diff --git a/web/default/src/components/layout/components/nav-group.tsx b/web/default/src/components/layout/components/nav-group.tsx
index e2841bd55ba..c8857c116c7 100644
--- a/web/default/src/components/layout/components/nav-group.tsx
+++ b/web/default/src/components/layout/components/nav-group.tsx
@@ -10,6 +10,7 @@ import {
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
@@ -44,8 +45,10 @@ export function NavGroup({ title, items }: NavGroupProps) {
   const href = useLocation({ select: (location) => location.href })
 
   return (
-    <SidebarGroup>
-      <SidebarGroupLabel>{title}</SidebarGroupLabel>
+    <SidebarGroup className='px-2 py-1'>
+      <SidebarGroupLabel className='text-muted-foreground/70 px-2 text-[11px] font-medium tracking-wider uppercase'>
+        {title}
+      </SidebarGroupLabel>
       <SidebarMenu>
         {items.map((item) => {
           const key = `${item.title}-${item.url || item.type}`
@@ -102,15 +105,13 @@ function SidebarMenuLink({ item, href }: { item: NavLink; href: string }) {
   return (
     <SidebarMenuItem>
       <SidebarMenuButton
-        asChild
         isActive={checkIsActive(href, item)}
         tooltip={item.title}
+        render={<Link to={item.url} onClick={() => setOpenMobile(false)} />}
       >
-        <Link to={item.url} onClick={() => setOpenMobile(false)}>
-          {item.icon && <item.icon />}
-          <span>{item.title}</span>
-          {item.badge && <NavBadge>{item.badge}</NavBadge>}
-        </Link>
+        {item.icon && <item.icon />}
+        <span>{item.title}</span>
+        {item.badge && <NavBadge>{item.badge}</NavBadge>}
       </SidebarMenuButton>
     </SidebarMenuItem>
   )
@@ -142,39 +143,38 @@ function SidebarMenuCollapsible({
 
   return (
     <Collapsible
-      asChild
       open={isOpen}
       onOpenChange={setIsOpen}
       className='group/collapsible'
+      render={<SidebarMenuItem />}
     >
-      <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>
+      <CollapsibleTrigger
+        className='group/collapsible-trigger'
+        render={<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-[panel-open]/collapsible-trigger:rotate-90' />
+      </CollapsibleTrigger>
+      <CollapsibleContent className='CollapsibleContent'>
+        <SidebarMenuSub>
+          {item.items.map((subItem) => (
+            <SidebarMenuSubItem key={subItem.title}>
+              <SidebarMenuSubButton
+                isActive={checkIsActive(href, subItem)}
+                render={
+                  <Link to={subItem.url} onClick={() => setOpenMobile(false)} />
+                }
+              >
+                {subItem.icon && <subItem.icon />}
+                <span>{subItem.title}</span>
+                {subItem.badge && <NavBadge>{subItem.badge}</NavBadge>}
+              </SidebarMenuSubButton>
+            </SidebarMenuSubItem>
+          ))}
+        </SidebarMenuSub>
+      </CollapsibleContent>
     </Collapsible>
   )
 }
@@ -192,36 +192,44 @@ function SidebarMenuCollapsedDropdown({
   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
+          className='group/dropdown-trigger'
+          render={
+            <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-[popup-open]/dropdown-trigger:rotate-90' />
         </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' : ''}`}
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>
+              {item.title} {item.badge ? `(${item.badge})` : ''}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {item.items.map((sub) => (
+              <DropdownMenuItem
+                key={`${sub.title}-${sub.url}`}
+                render={
+                  <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>
-          ))}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuGroup>
         </DropdownMenuContent>
       </DropdownMenu>
     </SidebarMenuItem>
diff --git a/web/default/src/components/layout/components/public-header.tsx b/web/default/src/components/layout/components/public-header.tsx
index 476cddbda1b..c3a83e18e87 100644
--- a/web/default/src/components/layout/components/public-header.tsx
+++ b/web/default/src/components/layout/components/public-header.tsx
@@ -180,9 +180,9 @@ export function PublicHeader(props: PublicHeaderProps) {
                     <Button
                       size='sm'
                       className='h-8 rounded-lg px-3.5 text-xs font-medium'
-                      asChild
+                      render={<Link to='/sign-in' />}
                     >
-                      <Link to='/sign-in'>{t('Sign in')}</Link>
+                      {t('Sign in')}
                     </Button>
                   )}
                 </>
diff --git a/web/default/src/components/layout/components/public-layout.tsx b/web/default/src/components/layout/components/public-layout.tsx
index 9c96bb0bb40..cbe8d8218b7 100644
--- a/web/default/src/components/layout/components/public-layout.tsx
+++ b/web/default/src/components/layout/components/public-layout.tsx
@@ -16,7 +16,7 @@ type PublicLayoutProps = {
 
 export function PublicLayout(props: PublicLayoutProps) {
   return (
-    <div className='bg-background text-foreground relative min-h-svh overflow-hidden'>
+    <div className='bg-background text-foreground relative min-h-svh overflow-x-clip'>
       <PublicHeader
         navContent={props.navContent}
         navLinks={props.navLinks}
diff --git a/web/default/src/components/layout/components/section-page-layout.tsx b/web/default/src/components/layout/components/section-page-layout.tsx
index ca4c6eb878b..600af58c29d 100644
--- a/web/default/src/components/layout/components/section-page-layout.tsx
+++ b/web/default/src/components/layout/components/section-page-layout.tsx
@@ -5,7 +5,6 @@ import {
   type ReactElement,
   type ReactNode,
 } from 'react'
-import { AppHeader } from './app-header'
 import { Main } from './main'
 import { PageFooterProvider } from './page-footer'
 
@@ -46,7 +45,6 @@ export function SectionPageLayout(props: SectionPageLayoutProps) {
   )
 
   let title: ReactNode = null
-  let description: ReactNode = null
   let actions: ReactNode = null
   let content: ReactNode = null
   let breadcrumb: ReactNode = null
@@ -55,8 +53,6 @@ export function SectionPageLayout(props: SectionPageLayoutProps) {
     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)
@@ -67,21 +63,16 @@ export function SectionPageLayout(props: SectionPageLayoutProps) {
 
   return (
     <PageFooterProvider container={footerContainer}>
-      <AppHeader />
-
       <Main>
-        <div className='shrink-0 px-3 pt-3 pb-2.5 sm:px-4 sm:pt-6 sm:pb-4'>
-          {breadcrumb != null && <div className='mb-2 sm:mb-3'>{breadcrumb}</div>}
+        <div className='shrink-0 px-3 pt-3 pb-2.5 sm:px-4 sm:pt-5 sm:pb-3'>
+          {breadcrumb != null && (
+            <div className='mb-2 sm:mb-3'>{breadcrumb}</div>
+          )}
           <div className='flex flex-wrap items-center justify-between gap-x-3 gap-y-2 sm:gap-x-4'>
             <div className='min-w-0'>
               <h2 className='truncate text-base font-bold tracking-tight sm:text-lg'>
                 {title}
               </h2>
-              {description != null && (
-                <p className='text-muted-foreground line-clamp-2 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'>
@@ -91,7 +82,7 @@ export function SectionPageLayout(props: SectionPageLayoutProps) {
           </div>
         </div>
 
-        <div className='min-h-0 flex-1 overflow-auto px-3 pb-3 sm:px-4 sm:pb-4'>
+        <div className='min-h-0 flex-1 overflow-auto px-3 pt-1 pb-3 sm:px-4 sm:pt-1.5 sm:pb-4'>
           {content}
         </div>
 
diff --git a/web/default/src/components/layout/components/top-nav.tsx b/web/default/src/components/layout/components/top-nav.tsx
index 953cac23330..c9bdf8f23bf 100644
--- a/web/default/src/components/layout/components/top-nav.tsx
+++ b/web/default/src/components/layout/components/top-nav.tsx
@@ -37,34 +37,37 @@ export function TopNav({ className, links, ...props }: TopNavProps) {
       {/* 移动端下拉菜单 */}
       <div className='lg:hidden'>
         <DropdownMenu modal={false}>
-          <DropdownMenuTrigger asChild>
-            <Button size='icon' variant='outline' className='size-7'>
-              <Menu />
-            </Button>
+          <DropdownMenuTrigger
+            render={<Button size='icon' variant='outline' className='size-7' />}
+          >
+            <Menu />
           </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>
+                <DropdownMenuItem
+                  key={`${title}-${href}`}
+                  render={
+                    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>
diff --git a/web/default/src/components/layout/components/workspace-switcher.tsx b/web/default/src/components/layout/components/workspace-switcher.tsx
index fc1801d8b60..a90033929fa 100644
--- a/web/default/src/components/layout/components/workspace-switcher.tsx
+++ b/web/default/src/components/layout/components/workspace-switcher.tsx
@@ -4,11 +4,13 @@ import { ChevronsUpDown } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useAuthStore } from '@/stores/auth-store'
 import { ROLE } from '@/lib/roles'
+import { cn } from '@/lib/utils'
 import { useStatus } from '@/hooks/use-status'
 import { useSystemConfig } from '@/hooks/use-system-config'
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuTrigger,
@@ -27,6 +29,12 @@ type WorkspaceSwitcherProps = {
   workspaces: Workspace[]
   defaultName?: string
   defaultVersion?: string
+  /**
+   * Visual layout:
+   * - 'sidebar': stacked card style (used inside the sidebar header).
+   * - 'inline': compact horizontal pill (used inside the top app bar).
+   */
+  variant?: 'sidebar' | 'inline'
 }
 
 /**
@@ -39,6 +47,7 @@ export function WorkspaceSwitcher({
   workspaces,
   defaultName = 'New API',
   defaultVersion,
+  variant = 'sidebar',
 }: WorkspaceSwitcherProps) {
   const { t } = useTranslation()
   const navigate = useNavigate()
@@ -121,6 +130,88 @@ export function WorkspaceSwitcher({
   }
 
   const canSwitchWorkspace = availableWorkspaces.length > 1
+
+  const renderWorkspaceList = () => (
+    <DropdownMenuGroup>
+      <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>
+      ))}
+    </DropdownMenuGroup>
+  )
+
+  if (variant === 'inline') {
+    const inlineLogo =
+      activeWorkspace.id === WORKSPACE_IDS.SYSTEM_SETTINGS ? (
+        <div className='bg-primary text-primary-foreground flex size-5 items-center justify-center rounded-md'>
+          <activeWorkspace.logo className='size-3' />
+        </div>
+      ) : (
+        <div className='flex size-5 items-center justify-center overflow-hidden rounded-md'>
+          <img
+            src={logo}
+            alt={t('Logo')}
+            className='size-full rounded-md object-cover'
+          />
+        </div>
+      )
+
+    const inlineButtonClass = cn(
+      'inline-flex h-7 items-center gap-1.5 rounded-md px-1.5 text-sm font-medium text-foreground outline-none select-none transition-colors',
+      'hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/40',
+      'data-popup-open:bg-accent'
+    )
+
+    if (!canSwitchWorkspace) {
+      return (
+        <div
+          className={cn(
+            inlineButtonClass,
+            'cursor-default hover:bg-transparent'
+          )}
+        >
+          {inlineLogo}
+          <span className='max-w-[12rem] truncate'>{activeWorkspace.name}</span>
+        </div>
+      )
+    }
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger className={inlineButtonClass}>
+          {inlineLogo}
+          <span className='max-w-[12rem] truncate'>{activeWorkspace.name}</span>
+          <ChevronsUpDown className='text-muted-foreground size-3.5' />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          className='min-w-56 rounded-lg'
+          align='start'
+          side='bottom'
+          sideOffset={6}
+        >
+          {renderWorkspaceList()}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    )
+  }
+
   const workspaceButtonContent = (
     <>
       {activeWorkspace.id === WORKSPACE_IDS.SYSTEM_SETTINGS ? (
@@ -151,54 +242,32 @@ export function WorkspaceSwitcher({
       <SidebarMenuItem>
         {canSwitchWorkspace ? (
           <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <SidebarMenuButton
-                size='lg'
-                className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'
-              >
-                {workspaceButtonContent}
-              </SidebarMenuButton>
+            <DropdownMenuTrigger
+              render={
+                <SidebarMenuButton
+                  size='lg'
+                  className='data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground'
+                />
+              }
+            >
+              {workspaceButtonContent}
             </DropdownMenuTrigger>
             <DropdownMenuContent
-              className='w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg'
+              className='w-(--anchor-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>
-              ))}
+              {renderWorkspaceList()}
             </DropdownMenuContent>
           </DropdownMenu>
         ) : (
           <SidebarMenuButton
-            asChild
             size='lg'
-            className='cursor-default hover:bg-transparent hover:text-sidebar-foreground active:bg-transparent active:text-sidebar-foreground'
+            className='hover:text-sidebar-foreground active:text-sidebar-foreground cursor-default hover:bg-transparent active:bg-transparent'
+            render={<div />}
           >
-            <div>{workspaceButtonContent}</div>
+            {workspaceButtonContent}
           </SidebarMenuButton>
         )}
       </SidebarMenuItem>
diff --git a/web/default/src/components/learn-more.tsx b/web/default/src/components/learn-more.tsx
index 48472875fe7..210d6716420 100644
--- a/web/default/src/components/learn-more.tsx
+++ b/web/default/src/components/learn-more.tsx
@@ -1,4 +1,3 @@
-import { type Root, type Content, type Trigger } from '@radix-ui/react-popover'
 import { CircleQuestionMark } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/lib/utils'
@@ -9,9 +8,10 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover'
 
-type LearnMoreProps = React.ComponentProps<typeof Root> & {
-  contentProps?: React.ComponentProps<typeof Content>
-  triggerProps?: React.ComponentProps<typeof Trigger>
+type LearnMoreProps = Omit<React.ComponentProps<typeof Popover>, 'children'> & {
+  children?: React.ReactNode
+  contentProps?: React.ComponentProps<typeof PopoverContent>
+  triggerProps?: React.ComponentProps<typeof PopoverTrigger>
 }
 
 export function LearnMore({
@@ -24,14 +24,12 @@ export function LearnMore({
   return (
     <Popover {...props}>
       <PopoverTrigger
-        asChild
         {...triggerProps}
         className={cn('size-5 rounded-full', triggerProps?.className)}
+        render={<Button variant='outline' size='icon' />}
       >
-        <Button variant='outline' size='icon'>
-          <span className='sr-only'>{t('Learn more')}</span>
-          <CircleQuestionMark className='size-4 [&>circle]:hidden' />
-        </Button>
+        <span className='sr-only'>{t('Learn more')}</span>
+        <CircleQuestionMark className='size-4 [&>circle]:hidden' />
       </PopoverTrigger>
       <PopoverContent
         side='top'
diff --git a/web/default/src/components/long-text.tsx b/web/default/src/components/long-text.tsx
index ace1d4642e6..c4837d31cb1 100644
--- a/web/default/src/components/long-text.tsx
+++ b/web/default/src/components/long-text.tsx
@@ -46,12 +46,12 @@ export function LongText({
   return (
     <>
       <div className='hidden sm:block'>
-        <TooltipProvider delayDuration={0}>
+        <TooltipProvider delay={0}>
           <Tooltip>
-            <TooltipTrigger asChild>
-              <div ref={ref} className={cn('truncate', className)}>
-                {children}
-              </div>
+            <TooltipTrigger
+              render={<div ref={ref} className={cn('truncate', className)} />}
+            >
+              {children}
             </TooltipTrigger>
             <TooltipContent>
               <p className={contentClassName}>{children}</p>
@@ -61,10 +61,10 @@ export function LongText({
       </div>
       <div className='sm:hidden'>
         <Popover>
-          <PopoverTrigger asChild>
-            <div ref={ref} className={cn('truncate', className)}>
-              {children}
-            </div>
+          <PopoverTrigger
+            render={<div ref={ref} className={cn('truncate', className)} />}
+          >
+            {children}
           </PopoverTrigger>
           <PopoverContent className={cn('w-fit', contentClassName)}>
             <p>{children}</p>
diff --git a/web/default/src/components/masked-value-display.tsx b/web/default/src/components/masked-value-display.tsx
index 2a491836a4a..c3d2b8dfe82 100644
--- a/web/default/src/components/masked-value-display.tsx
+++ b/web/default/src/components/masked-value-display.tsx
@@ -26,10 +26,12 @@ export function MaskedValueDisplay(props: MaskedValueDisplayProps) {
   return (
     <div className='flex items-center'>
       <Popover>
-        <PopoverTrigger asChild>
-          <Button variant='ghost' size='sm' className='h-7 font-mono'>
-            {props.maskedValue}
-          </Button>
+        <PopoverTrigger
+          render={
+            <Button variant='ghost' size='sm' className='h-7 font-mono' />
+          }
+        >
+          {props.maskedValue}
         </PopoverTrigger>
         <PopoverContent
           className='w-auto max-w-[min(90vw,28rem)]'
diff --git a/web/default/src/components/model-group-selector.tsx b/web/default/src/components/model-group-selector.tsx
index eb5b2f4d288..8d3401376d9 100644
--- a/web/default/src/components/model-group-selector.tsx
+++ b/web/default/src/components/model-group-selector.tsx
@@ -299,20 +299,21 @@ export const ModelSelector: React.FC<ModelSelectorProps> = React.memo(
           </Drawer>
         ) : (
           <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-              <ModelTriggerButton
-                currentLabel={currentModel?.label || t('Model')}
-                triggerClassName={className}
-                isDisabled={disabled}
-                aria-expanded={open}
-              />
-            </PopoverTrigger>
+            <PopoverTrigger
+              render={
+                <ModelTriggerButton
+                  currentLabel={currentModel?.label || t('Model')}
+                  triggerClassName={className}
+                  isDisabled={disabled}
+                  aria-expanded={open}
+                />
+              }
+            />
             <PopoverContent
               className='bg-popover z-40 w-[90vw] max-w-[20em] rounded-lg border p-0 !shadow-none sm:w-[20em]'
               align='start'
               side='bottom'
               sideOffset={4}
-              avoidCollisions={true}
               collisionPadding={8}
             >
               {renderModelCommandContent()}
@@ -492,20 +493,21 @@ export const GroupSelector: React.FC<GroupSelectorProps> = React.memo(
           </Drawer>
         ) : (
           <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-              <GroupTriggerButton
-                currentLabel={currentGroup?.label || t('Group')}
-                triggerClassName={className}
-                isDisabled={disabled}
-                aria-expanded={open}
-              />
-            </PopoverTrigger>
+            <PopoverTrigger
+              render={
+                <GroupTriggerButton
+                  currentLabel={currentGroup?.label || t('Group')}
+                  triggerClassName={className}
+                  isDisabled={disabled}
+                  aria-expanded={open}
+                />
+              }
+            />
             <PopoverContent
               className='bg-popover z-50 w-[90vw] max-w-[14em] rounded-lg border p-0 !shadow-none sm:w-[14em]'
               align='start'
               side='bottom'
               sideOffset={4}
-              avoidCollisions={true}
               collisionPadding={8}
             >
               {renderGroupCommandContent()}
diff --git a/web/default/src/components/profile-dropdown.tsx b/web/default/src/components/profile-dropdown.tsx
index 3a7ff6a489e..526fb1c0761 100644
--- a/web/default/src/components/profile-dropdown.tsx
+++ b/web/default/src/components/profile-dropdown.tsx
@@ -1,131 +1,123 @@
-import { useState } from 'react'
-import { Link } from '@tanstack/react-router'
+import { useMemo } from 'react'
+import { useNavigate } from '@tanstack/react-router'
 import { User, Wallet, LogOut, Settings } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useAuthStore } from '@/stores/auth-store'
+import { getUserAvatarFallback, getUserAvatarStyle } from '@/lib/avatar'
 import { ROLE } from '@/lib/roles'
 import useDialogState from '@/hooks/use-dialog'
 import { useUserDisplay } from '@/hooks/use-user-display'
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
 import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-  SheetClose,
-} from '@/components/ui/sheet'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 import { SignOutDialog } from '@/components/sign-out-dialog'
 
+const avatarFallbackClassName = 'font-semibold text-white'
+
 export function ProfileDropdown() {
   const { t } = useTranslation()
+  const navigate = useNavigate()
   const [open, setOpen] = useDialogState()
-  const [sheetOpen, setSheetOpen] = useState(false)
   const user = useAuthStore((state) => state.auth.user)
-  const { displayName, initials, roleLabel } = useUserDisplay(user)
+  const { displayName, roleLabel } = useUserDisplay(user)
   const isSuperAdmin = user?.role === ROLE.SUPER_ADMIN
+  const avatarName = user?.username || displayName
+  const avatarFallback = getUserAvatarFallback(avatarName)
+  const avatarFallbackStyle = useMemo(
+    () => getUserAvatarStyle(avatarName),
+    [avatarName]
+  )
 
   return (
     <>
-      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-        <SheetTrigger asChild>
-          <Button variant='ghost' className='relative h-9 w-9 rounded-full p-0'>
-            <Avatar className='h-9 w-9'>
-              <AvatarImage src='/avatars/01.png' alt={`@${displayName}`} />
-              <AvatarFallback>{initials}</AvatarFallback>
-            </Avatar>
-          </Button>
-        </SheetTrigger>
-        <SheetContent
-          side='right'
-          className='flex w-full flex-col p-0 sm:max-w-sm'
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              variant='ghost'
+              className='relative size-6 rounded-full p-0'
+            />
+          }
         >
-          <SheetHeader className='border-b p-4'>
-            <SheetTitle className='text-left'>{t('User Menu')}</SheetTitle>
-          </SheetHeader>
-
-          <div className='flex flex-1 flex-col overflow-y-auto'>
-            {/* User info section */}
-            <div className='border-b p-2.5 pb-6.5'>
-              <div className='flex items-center gap-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 text-sm font-medium'>
-                    {displayName}
-                  </p>
-                  <div className='flex items-center gap-1.5'>
-                    <span className='text-muted-foreground text-xs'>
-                      {roleLabel}
+          <Avatar className='size-6'>
+            <AvatarFallback
+              className={`${avatarFallbackClassName} text-[11px]`}
+              style={avatarFallbackStyle}
+            >
+              {avatarFallback}
+            </AvatarFallback>
+          </Avatar>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align='end' sideOffset={8} className='w-56'>
+          <div className='flex items-center gap-2 px-1.5 py-1.5'>
+            <Avatar className='size-8'>
+              <AvatarFallback
+                className={`${avatarFallbackClassName} text-xs`}
+                style={avatarFallbackStyle}
+              >
+                {avatarFallback}
+              </AvatarFallback>
+            </Avatar>
+            <div className='flex flex-1 flex-col gap-0.5 overflow-hidden'>
+              <p className='text-foreground truncate text-sm 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 truncate text-xs'>
+                      {String(user.group)}
                     </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>
             </div>
+          </div>
 
-            {/* Navigation links */}
-            <SheetClose asChild>
-              <Link
-                to='/profile'
-                className='text-primary/60 hover:text-primary/80 flex items-center gap-2.5 border-b p-2.5 transition-colors'
-              >
-                <User className='size-4' />
-                {t('Profile')}
-              </Link>
-            </SheetClose>
+          <DropdownMenuSeparator />
 
-            <SheetClose asChild>
-              <Link
-                to='/wallet'
-                className='text-primary/60 hover:text-primary/80 flex items-center gap-2.5 border-b p-2.5 transition-colors'
-              >
-                <Wallet className='size-4' />
-                {t('Wallet')}
-              </Link>
-            </SheetClose>
+          <DropdownMenuItem onClick={() => navigate({ to: '/profile' })}>
+            <User className='size-4' />
+            {t('Profile')}
+          </DropdownMenuItem>
 
-            {/* System Settings - only for super admin */}
-            {isSuperAdmin && (
-              <SheetClose asChild>
-                <Link
-                  to='/system-settings/general'
-                  search={{ section: 'system-info' }}
-                  className='text-primary/60 hover:text-primary/80 flex items-center gap-2.5 border-b p-2.5 transition-colors'
-                >
-                  <Settings className='size-4' />
-                  {t('System Settings')}
-                </Link>
-              </SheetClose>
-            )}
+          <DropdownMenuItem onClick={() => navigate({ to: '/wallet' })}>
+            <Wallet className='size-4' />
+            {t('Wallet')}
+          </DropdownMenuItem>
 
-            {/* Sign out */}
-            <Button
-              variant='ghost'
-              onClick={() => {
-                setSheetOpen(false)
-                setOpen(true)
-              }}
-              className='text-destructive hover:text-destructive/80 h-auto w-full justify-start gap-2.5 p-2.5 hover:bg-transparent'
+          {isSuperAdmin && (
+            <DropdownMenuItem
+              onClick={() =>
+                navigate({
+                  to: '/system-settings/general',
+                  search: { section: 'system-info' },
+                })
+              }
             >
-              <LogOut className='size-4' />
-              {t('Sign out')}
-            </Button>
-          </div>
-        </SheetContent>
-      </Sheet>
+              <Settings className='size-4' />
+              {t('System Settings')}
+            </DropdownMenuItem>
+          )}
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem variant='destructive' onClick={() => setOpen(true)}>
+            <LogOut className='size-4' />
+            {t('Sign out')}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
 
       <SignOutDialog open={!!open} onOpenChange={setOpen} />
     </>
diff --git a/web/default/src/components/select-dropdown.tsx b/web/default/src/components/select-dropdown.tsx
deleted file mode 100644
index c73a0072683..00000000000
--- a/web/default/src/components/select-dropdown.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Loader } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
-import { FormControl } from '@/components/ui/form'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-
-type SelectDropdownProps = {
-  onValueChange?: (value: string) => void
-  defaultValue: string | undefined
-  placeholder?: string
-  isPending?: boolean
-  items: { label: string; value: string }[] | undefined
-  disabled?: boolean
-  className?: string
-  isControlled?: boolean
-}
-
-export function SelectDropdown({
-  defaultValue,
-  onValueChange,
-  isPending,
-  items,
-  placeholder,
-  disabled,
-  className = '',
-  isControlled = false,
-}: SelectDropdownProps) {
-  const { t } = useTranslation()
-  const placeholderText = placeholder ?? t('Select')
-  const defaultState = isControlled
-    ? { value: defaultValue, onValueChange }
-    : { defaultValue, onValueChange }
-  return (
-    <Select {...defaultState}>
-      <FormControl>
-        <SelectTrigger disabled={disabled} className={cn(className)}>
-          <SelectValue placeholder={placeholderText} />
-        </SelectTrigger>
-      </FormControl>
-      <SelectContent>
-        {isPending ? (
-          <SelectItem disabled value='loading' className='h-14'>
-            <div className='flex items-center justify-center gap-2'>
-              <Loader className='h-5 w-5 animate-spin' />
-              {'  '}
-              {t('Loading...')}
-            </div>
-          </SelectItem>
-        ) : (
-          items?.map(({ label, value }) => (
-            <SelectItem key={value} value={value}>
-              {label}
-            </SelectItem>
-          ))
-        )}
-      </SelectContent>
-    </Select>
-  )
-}
diff --git a/web/default/src/components/status-badge.tsx b/web/default/src/components/status-badge.tsx
index d638030c28d..dec9f017055 100644
--- a/web/default/src/components/status-badge.tsx
+++ b/web/default/src/components/status-badge.tsx
@@ -110,7 +110,8 @@ export function StatusBadge({
     onClick?.(e)
   }
 
-  const content = children ?? (label ? <span className='truncate'>{label}</span> : null)
+  const content =
+    children ?? (label ? <span className='truncate'>{label}</span> : null)
 
   return (
     <span
diff --git a/web/default/src/components/theme-switch.tsx b/web/default/src/components/theme-switch.tsx
index f31c259ad99..5cf64e86071 100644
--- a/web/default/src/components/theme-switch.tsx
+++ b/web/default/src/components/theme-switch.tsx
@@ -25,12 +25,18 @@ export function ThemeSwitch() {
 
   return (
     <DropdownMenu modal={false}>
-      <DropdownMenuTrigger asChild>
-        <Button variant='ghost' size='icon' className='h-9 w-9 rounded-full'>
-          <Sun className='size-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90' />
-          <Moon className='absolute size-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0' />
-          <span className='sr-only'>{t('Toggle theme')}</span>
-        </Button>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant='ghost'
+            size='icon'
+            className='h-9 w-9 rounded-full'
+          />
+        }
+      >
+        <Sun className='size-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90' />
+        <Moon className='absolute size-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0' />
+        <span className='sr-only'>{t('Toggle theme')}</span>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end'>
         <DropdownMenuItem onClick={() => setTheme('light')}>
diff --git a/web/default/src/components/ui/accordion.tsx b/web/default/src/components/ui/accordion.tsx
index 0ac76ce0ebe..1b67ad11f9f 100644
--- a/web/default/src/components/ui/accordion.tsx
+++ b/web/default/src/components/ui/accordion.tsx
@@ -1,24 +1,23 @@
-'use client'
-
-import * as React from 'react'
-import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { ChevronDownIcon } from 'lucide-react'
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
+import { ArrowDown01Icon, ArrowUp01Icon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
 import { cn } from '@/lib/utils'
 
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot='accordion' {...props} />
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot='accordion'
+      className={cn('flex w-full flex-col', className)}
+      {...props}
+    />
+  )
 }
 
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
   return (
     <AccordionPrimitive.Item
       data-slot='accordion-item'
-      className={cn('border-b last:border-b-0', className)}
+      className={cn('not-last:border-b', className)}
       {...props}
     />
   )
@@ -28,19 +27,30 @@ function AccordionTrigger({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+}: AccordionPrimitive.Trigger.Props) {
   return (
     <AccordionPrimitive.Header className='flex'>
       <AccordionPrimitive.Trigger
         data-slot='accordion-trigger'
         className={cn(
-          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          'group/accordion-trigger focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4',
           className
         )}
         {...props}
       >
         {children}
-        <ChevronDownIcon className='text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200' />
+        <HugeiconsIcon
+          icon={ArrowDown01Icon}
+          strokeWidth={2}
+          data-slot='accordion-trigger-icon'
+          className='pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden'
+        />
+        <HugeiconsIcon
+          icon={ArrowUp01Icon}
+          strokeWidth={2}
+          data-slot='accordion-trigger-icon'
+          className='pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline'
+        />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   )
@@ -50,15 +60,22 @@ function AccordionContent({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+}: AccordionPrimitive.Panel.Props) {
   return (
-    <AccordionPrimitive.Content
+    <AccordionPrimitive.Panel
       data-slot='accordion-content'
-      className='data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm'
+      className='data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm'
       {...props}
     >
-      <div className={cn('pt-0 pb-4', className)}>{children}</div>
-    </AccordionPrimitive.Content>
+      <div
+        className={cn(
+          '[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
   )
 }
 
diff --git a/web/default/src/components/ui/alert-dialog.tsx b/web/default/src/components/ui/alert-dialog.tsx
index 0147d61168b..a695f4c7191 100644
--- a/web/default/src/components/ui/alert-dialog.tsx
+++ b/web/default/src/components/ui/alert-dialog.tsx
@@ -1,25 +1,21 @@
+'use client'
+
 import * as React from 'react'
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'
 import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
+import { Button } from '@/components/ui/button'
 
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
   return <AlertDialogPrimitive.Root data-slot='alert-dialog' {...props} />
 }
 
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
   return (
     <AlertDialogPrimitive.Trigger data-slot='alert-dialog-trigger' {...props} />
   )
 }
 
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
   return (
     <AlertDialogPrimitive.Portal data-slot='alert-dialog-portal' {...props} />
   )
@@ -28,12 +24,12 @@ function AlertDialogPortal({
 function AlertDialogOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+}: AlertDialogPrimitive.Backdrop.Props) {
   return (
-    <AlertDialogPrimitive.Overlay
+    <AlertDialogPrimitive.Backdrop
       data-slot='alert-dialog-overlay'
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
         className
       )}
       {...props}
@@ -43,15 +39,19 @@ function AlertDialogOverlay({
 
 function AlertDialogContent({
   className,
+  size = 'default',
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: 'default' | 'sm'
+}) {
   return (
     <AlertDialogPortal>
       <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
+      <AlertDialogPrimitive.Popup
         data-slot='alert-dialog-content'
+        data-size={size}
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          'group/alert-dialog-content bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm',
           className
         )}
         {...props}
@@ -67,7 +67,10 @@ function AlertDialogHeader({
   return (
     <div
       data-slot='alert-dialog-header'
-      className={cn('flex flex-col gap-2 text-center sm:text-start', className)}
+      className={cn(
+        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+        className
+      )}
       {...props}
     />
   )
@@ -81,7 +84,23 @@ function AlertDialogFooter({
     <div
       data-slot='alert-dialog-footer'
       className={cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        'bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='alert-dialog-media'
+      className={cn(
+        "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
         className
       )}
       {...props}
@@ -96,7 +115,10 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       data-slot='alert-dialog-title'
-      className={cn('text-lg font-semibold', className)}
+      className={cn(
+        'text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+        className
+      )}
       {...props}
     />
   )
@@ -109,7 +131,10 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot='alert-dialog-description'
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn(
+        'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
+        className
+      )}
       {...props}
     />
   )
@@ -118,10 +143,11 @@ function AlertDialogDescription({
 function AlertDialogAction({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+}: React.ComponentProps<typeof Button>) {
   return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
+    <Button
+      data-slot='alert-dialog-action'
+      className={cn(className)}
       {...props}
     />
   )
@@ -129,11 +155,16 @@ function AlertDialogAction({
 
 function AlertDialogCancel({
   className,
+  variant = 'outline',
+  size = 'default',
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
   return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: 'outline' }), className)}
+    <AlertDialogPrimitive.Close
+      data-slot='alert-dialog-cancel'
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
       {...props}
     />
   )
@@ -141,14 +172,15 @@ function AlertDialogCancel({
 
 export {
   AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
+  AlertDialogAction,
+  AlertDialogCancel,
   AlertDialogContent,
-  AlertDialogHeader,
+  AlertDialogDescription,
   AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
   AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
+  AlertDialogTrigger,
 }
diff --git a/web/default/src/components/ui/alert.tsx b/web/default/src/components/ui/alert.tsx
index be05f751780..19ecad9389f 100644
--- a/web/default/src/components/ui/alert.tsx
+++ b/web/default/src/components/ui/alert.tsx
@@ -3,13 +3,13 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: 'bg-card text-card-foreground',
         destructive:
-          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+          'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
       },
     },
     defaultVariants: {
@@ -38,7 +38,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot='alert-title'
       className={cn(
-        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+        '[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3',
         className
       )}
       {...props}
@@ -54,7 +54,7 @@ function AlertDescription({
     <div
       data-slot='alert-description'
       className={cn(
-        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        'text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',
         className
       )}
       {...props}
@@ -62,4 +62,14 @@ function AlertDescription({
   )
 }
 
-export { Alert, AlertTitle, AlertDescription }
+function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='alert-action'
+      className={cn('absolute top-2 right-2', className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }
diff --git a/web/default/src/components/ui/aspect-ratio.tsx b/web/default/src/components/ui/aspect-ratio.tsx
new file mode 100644
index 00000000000..e5510b1e561
--- /dev/null
+++ b/web/default/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,22 @@
+import { cn } from '@/lib/utils'
+
+function AspectRatio({
+  ratio,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & { ratio: number }) {
+  return (
+    <div
+      data-slot='aspect-ratio'
+      style={
+        {
+          '--ratio': ratio,
+        } as React.CSSProperties
+      }
+      className={cn('relative aspect-(--ratio)', className)}
+      {...props}
+    />
+  )
+}
+
+export { AspectRatio }
diff --git a/web/default/src/components/ui/avatar.tsx b/web/default/src/components/ui/avatar.tsx
index f444ecf6c53..1ecc6ba1459 100644
--- a/web/default/src/components/ui/avatar.tsx
+++ b/web/default/src/components/ui/avatar.tsx
@@ -1,16 +1,20 @@
 import * as React from 'react'
-import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'
 import { cn } from '@/lib/utils'
 
 function Avatar({
   className,
+  size = 'default',
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+}: AvatarPrimitive.Root.Props & {
+  size?: 'default' | 'sm' | 'lg'
+}) {
   return (
     <AvatarPrimitive.Root
       data-slot='avatar'
+      data-size={size}
       className={cn(
-        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        'group/avatar after:border-border relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
         className
       )}
       {...props}
@@ -18,14 +22,14 @@ function Avatar({
   )
 }
 
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
   return (
     <AvatarPrimitive.Image
       data-slot='avatar-image'
-      className={cn('aspect-square size-full', className)}
+      className={cn(
+        'aspect-square size-full rounded-full object-cover',
+        className
+      )}
       {...props}
     />
   )
@@ -34,12 +38,28 @@ function AvatarImage({
 function AvatarFallback({
   className,
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+}: AvatarPrimitive.Fallback.Props) {
   return (
     <AvatarPrimitive.Fallback
       data-slot='avatar-fallback'
       className={cn(
-        'bg-muted flex size-full items-center justify-center rounded-full',
+        'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot='avatar-badge'
+      className={cn(
+        'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none',
+        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
         className
       )}
       {...props}
@@ -47,4 +67,40 @@ function AvatarFallback({
   )
 }
 
-export { Avatar, AvatarImage, AvatarFallback }
+function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='avatar-group'
+      className={cn(
+        'group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='avatar-group-count'
+      className={cn(
+        'bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}
diff --git a/web/default/src/components/ui/badge.tsx b/web/default/src/components/ui/badge.tsx
index 474c0ab4ee9..e6e62402696 100644
--- a/web/default/src/components/ui/badge.tsx
+++ b/web/default/src/components/ui/badge.tsx
@@ -1,21 +1,23 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
   {
     variants: {
       variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
         secondary:
-          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+          'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
         destructive:
-          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
         outline:
-          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+          'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost:
+          'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
     },
     defaultVariants: {
@@ -26,20 +28,24 @@ const badgeVariants = cva(
 
 function Badge({
   className,
-  variant,
-  asChild = false,
+  variant = 'default',
+  render,
   ...props
-}: React.ComponentProps<'span'> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'span'
-
-  return (
-    <Comp
-      data-slot='badge'
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
+}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: 'span',
+    props: mergeProps<'span'>(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: 'badge',
+      variant,
+    },
+  })
 }
 
 export { Badge, badgeVariants }
diff --git a/web/default/src/components/ui/breadcrumb.tsx b/web/default/src/components/ui/breadcrumb.tsx
new file mode 100644
index 00000000000..e71db3c603e
--- /dev/null
+++ b/web/default/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react'
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import {
+  ArrowRight01Icon,
+  MoreHorizontalCircle01Icon,
+} from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { cn } from '@/lib/utils'
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      aria-label='breadcrumb'
+      data-slot='breadcrumb'
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot='breadcrumb-list'
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot='breadcrumb-item'
+      className={cn('inline-flex items-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<'a'>) {
+  return useRender({
+    defaultTagName: 'a',
+    props: mergeProps<'a'>(
+      {
+        className: cn('transition-colors hover:text-foreground', className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: 'breadcrumb-link',
+    },
+  })
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot='breadcrumb-page'
+      role='link'
+      aria-disabled='true'
+      aria-current='page'
+      className={cn('text-foreground font-normal', className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot='breadcrumb-separator'
+      role='presentation'
+      aria-hidden='true'
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot='breadcrumb-ellipsis'
+      role='presentation'
+      aria-hidden='true'
+      className={cn(
+        'flex size-5 items-center justify-center [&>svg]:size-4',
+        className
+      )}
+      {...props}
+    >
+      <HugeiconsIcon icon={MoreHorizontalCircle01Icon} strokeWidth={2} />
+      <span className='sr-only'>More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/web/default/src/components/ui/button-group.tsx b/web/default/src/components/ui/button-group.tsx
new file mode 100644
index 00000000000..688ac26c7cb
--- /dev/null
+++ b/web/default/src/components/ui/button-group.tsx
@@ -0,0 +1,86 @@
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          '*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',
+        vertical:
+          'flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role='group'
+      data-slot='button-group'
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<'div'>) {
+  return useRender({
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
+      {
+        className: cn(
+          "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: 'button-group-text',
+    },
+  })
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot='button-group-separator'
+      orientation={orientation}
+      className={cn(
+        'bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}
diff --git a/web/default/src/components/ui/button.tsx b/web/default/src/components/ui/button.tsx
index 712c18b754f..64d812e34d0 100644
--- a/web/default/src/components/ui/button.tsx
+++ b/web/default/src/components/ui/button.tsx
@@ -1,31 +1,36 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
+import { isValidElement } from 'react'
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+          'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
         ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+        destructive:
+          'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-        'icon-sm': 'size-8',
-        'icon-lg': 'size-10',
+        default:
+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        icon: 'size-8',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
       },
     },
     defaultVariants: {
@@ -35,22 +40,28 @@ const buttonVariants = cva(
   }
 )
 
+function isNativeButtonRender(render: ButtonPrimitive.Props['render']) {
+  if (!render || !isValidElement(render)) {
+    return true
+  }
+
+  return render.type === 'button'
+}
+
 function Button({
   className,
-  variant,
-  size,
-  asChild = false,
+  variant = 'default',
+  size = 'default',
+  nativeButton,
+  render,
   ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : 'button'
-
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
   return (
-    <Comp
+    <ButtonPrimitive
       data-slot='button'
       className={cn(buttonVariants({ variant, size, className }))}
+      nativeButton={nativeButton ?? isNativeButtonRender(render)}
+      render={render}
       {...props}
     />
   )
diff --git a/web/default/src/components/ui/calendar.tsx b/web/default/src/components/ui/calendar.tsx
index 51520ad039c..99a37f3d500 100644
--- a/web/default/src/components/ui/calendar.tsx
+++ b/web/default/src/components/ui/calendar.tsx
@@ -1,17 +1,16 @@
 import * as React from 'react'
 import {
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from 'lucide-react'
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ArrowDownIcon,
+} from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
 import {
-  DayButton,
   DayPicker,
-  type DropdownProps,
   getDefaultClassNames,
+  type DayButton,
+  type Locale,
 } from 'react-day-picker'
-import dayjs from '@/lib/dayjs'
 import { cn } from '@/lib/utils'
 import { Button, buttonVariants } from '@/components/ui/button'
 
@@ -21,99 +20,108 @@ function Calendar({
   showOutsideDays = true,
   captionLayout = 'label',
   buttonVariant = 'ghost',
+  locale,
   formatters,
   components,
-  locale,
   ...props
 }: React.ComponentProps<typeof DayPicker> & {
   buttonVariant?: React.ComponentProps<typeof Button>['variant']
-  /** react-day-picker locale for i18n (month/weekday labels). Pass the locale used by your i18n/date setup. */
-  locale?: React.ComponentProps<typeof DayPicker>['locale']
 }) {
   const defaultClassNames = getDefaultClassNames()
-  const localeCode = locale?.code ?? 'default'
 
   return (
     <DayPicker
-      locale={locale}
       showOutsideDays={showOutsideDays}
       className={cn(
-        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+        'group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
       )}
       captionLayout={captionLayout}
+      locale={locale}
       formatters={{
         formatMonthDropdown: (date) =>
-          date.toLocaleString(localeCode, { month: 'short' }),
+          date.toLocaleString(locale?.code, { month: 'short' }),
         ...formatters,
       }}
       classNames={{
         root: cn('w-fit', defaultClassNames.root),
         months: cn(
-          'flex gap-4 flex-col md:flex-row relative',
+          'relative flex flex-col gap-4 md:flex-row',
           defaultClassNames.months
         ),
-        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
         nav: cn(
-          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+          'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+          'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          'flex items-center justify-center gap-0.5',
+          'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
           defaultClassNames.dropdowns
         ),
-        dropdown_root: cn('relative', defaultClassNames.dropdown_root),
-        dropdown: cn('sr-only', defaultClassNames.dropdown),
+        dropdown_root: cn(
+          'relative rounded-(--cell-radius)',
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          'absolute inset-0 bg-popover opacity-0',
+          defaultClassNames.dropdown
+        ),
         caption_label: cn(
-          'select-none font-medium',
+          'font-medium select-none',
           captionLayout === 'label'
             ? 'text-sm'
-            : 'rounded-md ps-2 pe-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+            : 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
           defaultClassNames.caption_label
         ),
         table: 'w-full border-collapse',
         weekdays: cn('flex', defaultClassNames.weekdays),
         weekday: cn(
-          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+          'flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none',
           defaultClassNames.weekday
         ),
-        week: cn('flex w-full mt-2', defaultClassNames.week),
+        week: cn('mt-2 flex w-full', defaultClassNames.week),
         week_number_header: cn(
-          'select-none w-(--cell-size)',
+          'w-(--cell-size) select-none',
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          'text-[0.8rem] select-none text-muted-foreground',
+          'text-[0.8rem] text-muted-foreground select-none',
           defaultClassNames.week_number
         ),
         day: cn(
-          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+          'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',
+          props.showWeekNumber
+            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
+            : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',
           defaultClassNames.day
         ),
         range_start: cn(
-          'rounded-l-md bg-accent',
+          'relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted',
           defaultClassNames.range_start
         ),
         range_middle: cn('rounded-none', defaultClassNames.range_middle),
-        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+        range_end: cn(
+          'relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted',
+          defaultClassNames.range_end
+        ),
         today: cn(
-          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
+          'rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none',
           defaultClassNames.today
         ),
         outside: cn(
@@ -141,13 +149,20 @@ function Calendar({
         Chevron: ({ className, orientation, ...props }) => {
           if (orientation === 'left') {
             return (
-              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
+              <HugeiconsIcon
+                icon={ArrowLeftIcon}
+                strokeWidth={2}
+                className={cn('size-4', className)}
+                {...props}
+              />
             )
           }
 
           if (orientation === 'right') {
             return (
-              <ChevronRightIcon
+              <HugeiconsIcon
+                icon={ArrowRightIcon}
+                strokeWidth={2}
                 className={cn('size-4', className)}
                 {...props}
               />
@@ -155,11 +170,17 @@ function Calendar({
           }
 
           return (
-            <ChevronDownIcon className={cn('size-4', className)} {...props} />
+            <HugeiconsIcon
+              icon={ArrowDownIcon}
+              strokeWidth={2}
+              className={cn('size-4', className)}
+              {...props}
+            />
           )
         },
-        DayButton: CalendarDayButton,
-        Dropdown: CalendarDropdown,
+        DayButton: ({ ...props }) => (
+          <CalendarDayButton locale={locale} {...props} />
+        ),
         WeekNumber: ({ children, ...props }) => {
           return (
             <td {...props}>
@@ -180,8 +201,9 @@ function CalendarDayButton({
   className,
   day,
   modifiers,
+  locale,
   ...props
-}: React.ComponentProps<typeof DayButton>) {
+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
   const defaultClassNames = getDefaultClassNames()
 
   const ref = React.useRef<HTMLButtonElement>(null)
@@ -191,10 +213,9 @@ function CalendarDayButton({
 
   return (
     <Button
-      ref={ref}
       variant='ghost'
       size='icon'
-      data-day={dayjs(day.date).format('YYYY-MM-DD')}
+      data-day={day.date.toLocaleDateString(locale?.code)}
       data-selected-single={
         modifiers.selected &&
         !modifiers.range_start &&
@@ -205,7 +226,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        'group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70',
         defaultClassNames.day,
         className
       )}
@@ -214,95 +235,4 @@ function CalendarDayButton({
   )
 }
 
-function CalendarDropdown(props: DropdownProps) {
-  const { options, value, onChange, 'aria-label': ariaLabel } = props
-  const [open, setOpen] = React.useState(false)
-  const containerRef = React.useRef<HTMLDivElement>(null)
-  const listRef = React.useRef<HTMLDivElement>(null)
-
-  const selectedOption = options?.find((opt) => opt.value === value)
-
-  // Handle all events in a single effect
-  React.useEffect(() => {
-    if (!open) return
-
-    // Scroll to selected option
-    const selectedEl = listRef.current?.querySelector('[data-selected="true"]')
-    selectedEl?.scrollIntoView({ block: 'center' })
-
-    // Event handlers
-    const onClickOutside = (e: MouseEvent) => {
-      if (!containerRef.current?.contains(e.target as Node)) setOpen(false)
-    }
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setOpen(false)
-    }
-
-    document.addEventListener('mousedown', onClickOutside)
-    document.addEventListener('keydown', onKeyDown)
-    return () => {
-      document.removeEventListener('mousedown', onClickOutside)
-      document.removeEventListener('keydown', onKeyDown)
-    }
-  }, [open])
-
-  const handleSelect = (optValue: number) => {
-    onChange?.({
-      target: { value: String(optValue) },
-    } as React.ChangeEvent<HTMLSelectElement>)
-    setOpen(false)
-  }
-
-  return (
-    <div ref={containerRef} className='relative'>
-      <Button
-        variant='ghost'
-        size='sm'
-        aria-label={ariaLabel}
-        aria-expanded={open}
-        onClick={() => setOpen((v) => !v)}
-        className='h-8 gap-1 px-2 font-medium'
-      >
-        {selectedOption?.label}
-        <ChevronDownIcon
-          className={cn(
-            'size-3.5 opacity-50 transition-transform',
-            open && 'rotate-180'
-          )}
-        />
-      </Button>
-
-      {open && (
-        <div className='bg-popover text-popover-foreground absolute top-full left-1/2 z-50 mt-1 min-w-max -translate-x-1/2 rounded-md border shadow-md'>
-          <div
-            ref={listRef}
-            className='max-h-60 overflow-y-auto p-1'
-            onWheel={(e) => e.stopPropagation()}
-          >
-            {options?.map((opt) => (
-              <button
-                key={opt.value}
-                type='button'
-                disabled={opt.disabled}
-                data-selected={opt.value === value}
-                onClick={() => handleSelect(opt.value)}
-                className={cn(
-                  'hover:bg-accent hover:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm whitespace-nowrap outline-hidden select-none',
-                  opt.disabled && 'pointer-events-none opacity-50',
-                  opt.value === value && 'bg-accent text-accent-foreground'
-                )}
-              >
-                {opt.label}
-                {opt.value === value && (
-                  <CheckIcon className='absolute right-2 size-4' />
-                )}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export { Calendar, CalendarDayButton, CalendarDropdown }
+export { Calendar, CalendarDayButton }
diff --git a/web/default/src/components/ui/card.tsx b/web/default/src/components/ui/card.tsx
index 5f71c3ff841..32524c28d47 100644
--- a/web/default/src/components/ui/card.tsx
+++ b/web/default/src/components/ui/card.tsx
@@ -1,12 +1,17 @@
 import * as React from 'react'
 import { cn } from '@/lib/utils'
 
-function Card({ className, ...props }: React.ComponentProps<'div'>) {
+function Card({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
   return (
     <div
       data-slot='card'
+      data-size={size}
       className={cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        'group/card bg-card text-card-foreground ring-foreground/10 flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
         className
       )}
       {...props}
@@ -19,7 +24,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot='card-header'
       className={cn(
-        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3',
         className
       )}
       {...props}
@@ -31,7 +36,10 @@ function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot='card-title'
-      className={cn('leading-none font-semibold', className)}
+      className={cn(
+        'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
+        className
+      )}
       {...props}
     />
   )
@@ -64,7 +72,7 @@ function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot='card-content'
-      className={cn('px-6', className)}
+      className={cn('px-4 group-data-[size=sm]/card:px-3', className)}
       {...props}
     />
   )
@@ -74,7 +82,10 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot='card-footer'
-      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      className={cn(
+        'bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3',
+        className
+      )}
       {...props}
     />
   )
diff --git a/web/default/src/components/ui/carousel.tsx b/web/default/src/components/ui/carousel.tsx
index be99dd9a7d7..0dbed41e677 100644
--- a/web/default/src/components/ui/carousel.tsx
+++ b/web/default/src/components/ui/carousel.tsx
@@ -1,10 +1,11 @@
 'use client'
 
 import * as React from 'react'
+import { ArrowLeft01Icon, ArrowRight01Icon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
 } from 'embla-carousel-react'
-import { ArrowLeft, ArrowRight } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 
@@ -173,7 +174,7 @@ function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
 function CarouselPrevious({
   className,
   variant = 'outline',
-  size = 'icon',
+  size = 'icon-sm',
   ...props
 }: React.ComponentProps<typeof Button>) {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
@@ -184,7 +185,7 @@ function CarouselPrevious({
       variant={variant}
       size={size}
       className={cn(
-        'absolute size-8 rounded-full',
+        'absolute touch-manipulation rounded-full',
         orientation === 'horizontal'
           ? 'top-1/2 -left-12 -translate-y-1/2'
           : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
@@ -194,7 +195,7 @@ function CarouselPrevious({
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeft />
+      <HugeiconsIcon icon={ArrowLeft01Icon} strokeWidth={2} />
       <span className='sr-only'>Previous slide</span>
     </Button>
   )
@@ -203,7 +204,7 @@ function CarouselPrevious({
 function CarouselNext({
   className,
   variant = 'outline',
-  size = 'icon',
+  size = 'icon-sm',
   ...props
 }: React.ComponentProps<typeof Button>) {
   const { orientation, scrollNext, canScrollNext } = useCarousel()
@@ -214,7 +215,7 @@ function CarouselNext({
       variant={variant}
       size={size}
       className={cn(
-        'absolute size-8 rounded-full',
+        'absolute touch-manipulation rounded-full',
         orientation === 'horizontal'
           ? 'top-1/2 -right-12 -translate-y-1/2'
           : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
@@ -224,7 +225,7 @@ function CarouselNext({
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRight />
+      <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} />
       <span className='sr-only'>Next slide</span>
     </Button>
   )
@@ -237,4 +238,5 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
+  useCarousel,
 }
diff --git a/web/default/src/components/ui/chart.tsx b/web/default/src/components/ui/chart.tsx
new file mode 100644
index 00000000000..c75acec818f
--- /dev/null
+++ b/web/default/src/components/ui/chart.tsx
@@ -0,0 +1,370 @@
+import * as React from 'react'
+import * as RechartsPrimitive from 'recharts'
+import type { TooltipValueType } from 'recharts'
+import { cn } from '@/lib/utils'
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const
+
+const INITIAL_DIMENSION = { width: 320, height: 200 } as const
+type TooltipNameType = number | string
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+>
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />')
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}: React.ComponentProps<'div'> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >['children']
+  initialDimension?: {
+    width: number
+    height: number
+  }
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot='chart'
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer
+          initialDimension={initialDimension}
+        >
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme ?? config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join('\n')}
+}
+`
+          )
+          .join('\n'),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = 'dot',
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<'div'> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: 'line' | 'dot' | 'dashed'
+    nameKey?: string
+    labelKey?: string
+  } & Omit<
+    RechartsPrimitive.DefaultTooltipContentProps<
+      TooltipValueType,
+      TooltipNameType
+    >,
+    'accessibilityLayer'
+  >) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === 'string'
+        ? (config[label]?.label ?? label)
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn('font-medium', labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn('font-medium', labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== 'dot'
+
+  return (
+    <div
+      className={cn(
+        'border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className='grid gap-1.5'>
+        {payload
+          .filter((item) => item.type !== 'none')
+          .map((item, index) => {
+            const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color ?? item.payload?.fill ?? item.color
+
+            return (
+              <div
+                key={index}
+                className={cn(
+                  '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                  indicator === 'dot' && 'items-center'
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
+                            {
+                              'h-2.5 w-2.5': indicator === 'dot',
+                              'w-1': indicator === 'line',
+                              'w-0 border-[1.5px] border-dashed bg-transparent':
+                                indicator === 'dashed',
+                              'my-0.5': nestLabel && indicator === 'dashed',
+                            }
+                          )}
+                          style={
+                            {
+                              '--color-bg': indicatorColor,
+                              '--color-border': indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        'flex flex-1 justify-between leading-none',
+                        nestLabel ? 'items-end' : 'items-center'
+                      )}
+                    >
+                      <div className='grid gap-1.5'>
+                        {nestLabel ? tooltipLabel : null}
+                        <span className='text-muted-foreground'>
+                          {itemConfig?.label ?? item.name}
+                        </span>
+                      </div>
+                      {item.value != null && (
+                        <span className='text-foreground font-mono font-medium tabular-nums'>
+                          {typeof item.value === 'number'
+                            ? item.value.toLocaleString()
+                            : String(item.value)}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+}: React.ComponentProps<'div'> & {
+  hideIcon?: boolean
+  nameKey?: string
+} & RechartsPrimitive.DefaultLegendContentProps) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center gap-4',
+        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+        className
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== 'none')
+        .map((item, index) => {
+          const key = `${nameKey ?? item.dataKey ?? 'value'}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className='h-2 w-2 shrink-0 rounded-[2px]'
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== 'object' || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    'payload' in payload &&
+    typeof payload.payload === 'object' &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === 'string'
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/web/default/src/components/ui/checkbox.tsx b/web/default/src/components/ui/checkbox.tsx
index 953c489ada3..de17aa9322d 100644
--- a/web/default/src/components/ui/checkbox.tsx
+++ b/web/default/src/components/ui/checkbox.tsx
@@ -1,26 +1,25 @@
-import * as React from 'react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { CheckIcon } from 'lucide-react'
+'use client'
+
+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
+import { Tick02Icon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
 import { cn } from '@/lib/utils'
 
-function Checkbox({
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
   return (
     <CheckboxPrimitive.Root
       data-slot='checkbox'
       className={cn(
-        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        'peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3',
         className
       )}
       {...props}
     >
       <CheckboxPrimitive.Indicator
         data-slot='checkbox-indicator'
-        className='flex items-center justify-center text-current transition-none'
+        className='grid place-content-center text-current transition-none [&>svg]:size-3.5'
       >
-        <CheckIcon className='size-3.5' />
+        <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )
diff --git a/web/default/src/components/ui/collapsible.tsx b/web/default/src/components/ui/collapsible.tsx
index 3c45b7a2bca..e08f373af9a 100644
--- a/web/default/src/components/ui/collapsible.tsx
+++ b/web/default/src/components/ui/collapsible.tsx
@@ -1,32 +1,18 @@
-'use client'
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible'
 
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
-
-function Collapsible({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
   return <CollapsiblePrimitive.Root data-slot='collapsible' {...props} />
 }
 
-function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
   return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot='collapsible-trigger'
-      {...props}
-    />
+    <CollapsiblePrimitive.Trigger data-slot='collapsible-trigger' {...props} />
   )
 }
 
-function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
   return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot='collapsible-content'
-      {...props}
-    />
+    <CollapsiblePrimitive.Panel data-slot='collapsible-content' {...props} />
   )
 }
 
diff --git a/web/default/src/components/ui/combobox.tsx b/web/default/src/components/ui/combobox.tsx
index 8975ba93cbc..399b6b571c1 100644
--- a/web/default/src/components/ui/combobox.tsx
+++ b/web/default/src/components/ui/combobox.tsx
@@ -1,153 +1,358 @@
 import * as React from 'react'
-import { Check, ChevronsUpDown } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
+import { Combobox as ComboboxPrimitive } from '@base-ui/react'
+import {
+  ArrowDown01Icon,
+  Cancel01Icon,
+  Tick02Icon,
+} from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command'
+  ComboboxInput as LegacyComboboxInput,
+  type ComboboxInputOption,
+} from '@/components/ui/combobox-input'
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-
-export type ComboboxOption = {
-  value: string
-  label: string
-  icon?: React.ReactNode
-}
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from '@/components/ui/input-group'
 
-interface ComboboxProps {
-  options: ComboboxOption[]
+type LegacyComboboxProps = {
+  options: ComboboxInputOption[]
   value?: string
-  onValueChange: (value: string) => void
+  onValueChange?: (value: string | null) => void
   placeholder?: string
   searchPlaceholder?: string
   emptyText?: string
-  className?: string
   allowCustomValue?: boolean
+  className?: string
+  id?: string
 }
 
-export function Combobox({
-  options,
-  value,
-  onValueChange,
-  placeholder = 'Select option...',
-  searchPlaceholder = 'Search...',
-  emptyText = 'No option found.',
-  className,
-  allowCustomValue = false,
-}: ComboboxProps) {
-  const { t } = useTranslation()
-  const [open, setOpen] = React.useState(false)
-  const [searchValue, setSearchValue] = React.useState('')
-
-  const selectedOption = options.find((option) => option.value === value)
-  const displayValue = selectedOption?.label || value || placeholder
-
-  const filteredOptions = React.useMemo(() => {
-    if (!searchValue) return options
-    const search = searchValue.toLowerCase()
-    return options.filter(
-      (option) =>
-        option.label.toLowerCase().includes(search) ||
-        option.value.toLowerCase().includes(search)
+function Combobox(props: LegacyComboboxProps): React.ReactElement
+function Combobox<Value, Multiple extends boolean | undefined = false>(
+  props: ComboboxPrimitive.Root.Props<Value, Multiple>
+): React.ReactElement
+function Combobox(
+  props:
+    | ComboboxPrimitive.Root.Props<unknown, boolean | undefined>
+    | LegacyComboboxProps
+) {
+  if ('options' in props) {
+    return (
+      <LegacyComboboxInput
+        id={props.id}
+        options={props.options}
+        value={props.value ?? ''}
+        onValueChange={(value) => props.onValueChange?.(value)}
+        placeholder={props.searchPlaceholder ?? props.placeholder}
+        emptyText={props.emptyText}
+        className={props.className}
+      />
     )
-  }, [options, searchValue])
-
-  const handleSelect = (selectedValue: string) => {
-    onValueChange(selectedValue === value ? '' : selectedValue)
-    setOpen(false)
-    setSearchValue('')
   }
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (allowCustomValue && e.key === 'Enter' && searchValue) {
-      e.preventDefault()
-      // Check if search value matches any existing option
-      const exactMatch = options.find(
-        (opt) => opt.value.toLowerCase() === searchValue.toLowerCase()
-      )
-      if (exactMatch) {
-        handleSelect(exactMatch.value)
-      } else {
-        // Use custom value
-        onValueChange(searchValue)
-        setOpen(false)
-        setSearchValue('')
-      }
-    }
-  }
+  return <ComboboxPrimitive.Root {...props} />
+}
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot='combobox-value' {...props} />
+}
 
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant='outline'
-          role='combobox'
-          aria-expanded={open}
-          className={cn('w-full justify-between', className)}
-        >
-          <span className='truncate'>
-            {selectedOption?.icon && (
-              <span className='mr-2 inline-block'>{selectedOption.icon}</span>
-            )}
-            {displayValue}
-          </span>
-          <ChevronsUpDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className='w-[var(--radix-popover-trigger-width)] p-0'
-        onWheel={(e) => e.stopPropagation()}
-        onTouchMove={(e) => e.stopPropagation()}
-        onPointerDown={(e) => e.stopPropagation()}
+    <ComboboxPrimitive.Trigger
+      data-slot='combobox-trigger'
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <HugeiconsIcon
+        icon={ArrowDown01Icon}
+        strokeWidth={2}
+        className='text-muted-foreground pointer-events-none size-4'
+      />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot='combobox-clear'
+      render={<InputGroupButton variant='ghost' size='icon-xs' />}
+      className={cn(className)}
+      {...props}
+    >
+      <HugeiconsIcon
+        icon={Cancel01Icon}
+        strokeWidth={2}
+        className='pointer-events-none'
+      />
+    </ComboboxPrimitive.Clear>
+  )
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup className={cn('w-auto', className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align='inline-end'>
+        {showTrigger && (
+          <InputGroupButton
+            size='icon-xs'
+            variant='ghost'
+            render={<ComboboxTrigger />}
+            data-slot='input-group-button'
+            className='group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent'
+            disabled={disabled}
+          />
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  className,
+  side = 'bottom',
+  sideOffset = 6,
+  align = 'start',
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className='isolate z-50'
+      >
+        <ComboboxPrimitive.Popup
+          data-slot='combobox-content'
+          data-chips={!!anchor}
+          className={cn(
+            'dark group/combobox-content bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none',
+            className
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot='combobox-list'
+      className={cn(
+        'no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot='combobox-item'
+      className={cn(
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className='pointer-events-none absolute right-2 flex size-4 items-center justify-center' />
+        }
       >
-        <Command shouldFilter={false}>
-          <CommandInput
-            placeholder={searchPlaceholder}
-            value={searchValue}
-            onValueChange={setSearchValue}
-            onKeyDown={handleKeyDown}
+        <HugeiconsIcon
+          icon={Tick02Icon}
+          strokeWidth={2}
+          className='pointer-events-none'
+        />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot='combobox-group'
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot='combobox-label'
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot='combobox-collection' {...props} />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot='combobox-empty'
+      className={cn(
+        'text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot='combobox-separator'
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot='combobox-chips'
+      className={cn(
+        'border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot='combobox-chip'
+      className={cn(
+        'bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant='ghost' size='icon-xs' />}
+          className='-ml-1 opacity-50 hover:opacity-100'
+          data-slot='combobox-chip-remove'
+        >
+          <HugeiconsIcon
+            icon={Cancel01Icon}
+            strokeWidth={2}
+            className='pointer-events-none'
           />
-          <CommandList>
-            <CommandEmpty>
-              {emptyText}
-              {allowCustomValue && searchValue && (
-                <div className='mt-2 text-xs'>
-                  {t('Press Enter to use "{{value}}"', {
-                    value: searchValue,
-                  })}
-                </div>
-              )}
-            </CommandEmpty>
-            <CommandGroup>
-              {filteredOptions.map((option) => (
-                <CommandItem
-                  key={option.value}
-                  value={option.value}
-                  onSelect={handleSelect}
-                >
-                  <Check
-                    className={cn(
-                      'mr-2 h-4 w-4',
-                      value === option.value ? 'opacity-100' : 'opacity-0'
-                    )}
-                  />
-                  {option.icon && <span className='mr-2'>{option.icon}</span>}
-                  {option.label}
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot='combobox-chip-input'
+      className={cn('min-w-16 flex-1 outline-none', className)}
+      {...props}
+    />
   )
 }
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}
diff --git a/web/default/src/components/ui/command.tsx b/web/default/src/components/ui/command.tsx
index fb108aa9124..6ad92135d02 100644
--- a/web/default/src/components/ui/command.tsx
+++ b/web/default/src/components/ui/command.tsx
@@ -1,6 +1,9 @@
+'use client'
+
 import * as React from 'react'
+import { SearchIcon, Tick02Icon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
 import { Command as CommandPrimitive } from 'cmdk'
-import { SearchIcon } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import {
   Dialog,
@@ -9,6 +12,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
+import { InputGroup, InputGroupAddon } from '@/components/ui/input-group'
 
 function Command({
   className,
@@ -18,7 +22,7 @@ function Command({
     <CommandPrimitive
       data-slot='command'
       className={cn(
-        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        'bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1',
         className
       )}
       {...props}
@@ -31,13 +35,14 @@ function CommandDialog({
   description = 'Search for a command to run...',
   children,
   className,
-  showCloseButton = true,
+  showCloseButton = false,
   ...props
-}: React.ComponentProps<typeof Dialog> & {
+}: Omit<React.ComponentProps<typeof Dialog>, 'children'> & {
   title?: string
   description?: string
   className?: string
   showCloseButton?: boolean
+  children: React.ReactNode
 }) {
   return (
     <Dialog {...props}>
@@ -46,12 +51,13 @@ function CommandDialog({
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
       <DialogContent
-        className={cn('overflow-hidden p-0', className)}
+        className={cn(
+          'top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0',
+          className
+        )}
         showCloseButton={showCloseButton}
       >
-        <Command className='[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>
-          {children}
-        </Command>
+        {children}
       </DialogContent>
     </Dialog>
   )
@@ -62,19 +68,24 @@ function CommandInput({
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
-    <div
-      data-slot='command-input-wrapper'
-      className='flex h-9 items-center gap-2 border-b px-3'
-    >
-      <SearchIcon className='size-4 shrink-0 opacity-50' />
-      <CommandPrimitive.Input
-        data-slot='command-input'
-        className={cn(
-          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-          className
-        )}
-        {...props}
-      />
+    <div data-slot='command-input-wrapper' className='p-1 pb-0'>
+      <InputGroup className='border-input/30 bg-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!'>
+        <CommandPrimitive.Input
+          data-slot='command-input'
+          className={cn(
+            'w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+            className
+          )}
+          {...props}
+        />
+        <InputGroupAddon>
+          <HugeiconsIcon
+            icon={SearchIcon}
+            strokeWidth={2}
+            className='size-4 shrink-0 opacity-50'
+          />
+        </InputGroupAddon>
+      </InputGroup>
     </div>
   )
 }
@@ -87,7 +98,7 @@ function CommandList({
     <CommandPrimitive.List
       data-slot='command-list'
       className={cn(
-        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        'no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none',
         className
       )}
       {...props}
@@ -96,12 +107,13 @@ function CommandList({
 }
 
 function CommandEmpty({
+  className,
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
   return (
     <CommandPrimitive.Empty
       data-slot='command-empty'
-      className='py-6 text-center text-sm'
+      className={cn('py-6 text-center text-sm', className)}
       {...props}
     />
   )
@@ -115,7 +127,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot='command-group'
       className={cn(
-        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        'text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
         className
       )}
       {...props}
@@ -138,17 +150,25 @@ function CommandSeparator({
 
 function CommandItem({
   className,
+  children,
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Item>) {
   return (
     <CommandPrimitive.Item
       data-slot='command-item'
       className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/command-item data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
-    />
+    >
+      {children}
+      <HugeiconsIcon
+        icon={Tick02Icon}
+        strokeWidth={2}
+        className='ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100'
+      />
+    </CommandPrimitive.Item>
   )
 }
 
@@ -160,7 +180,7 @@ function CommandShortcut({
     <span
       data-slot='command-shortcut'
       className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
+        'text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest',
         className
       )}
       {...props}
diff --git a/web/default/src/components/ui/context-menu.tsx b/web/default/src/components/ui/context-menu.tsx
new file mode 100644
index 00000000000..09b8e932673
--- /dev/null
+++ b/web/default/src/components/ui/context-menu.tsx
@@ -0,0 +1,276 @@
+'use client'
+
+import * as React from 'react'
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu'
+import { ArrowRight01Icon, Tick02Icon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { cn } from '@/lib/utils'
+
+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
+  return <ContextMenuPrimitive.Root data-slot='context-menu' {...props} />
+}
+
+function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot='context-menu-portal' {...props} />
+  )
+}
+
+function ContextMenuTrigger({
+  className,
+  ...props
+}: ContextMenuPrimitive.Trigger.Props) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot='context-menu-trigger'
+      className={cn('select-none', className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  className,
+  align = 'start',
+  alignOffset = 4,
+  side = 'right',
+  sideOffset = 0,
+  ...props
+}: ContextMenuPrimitive.Popup.Props &
+  Pick<
+    ContextMenuPrimitive.Positioner.Props,
+    'align' | 'alignOffset' | 'side' | 'sideOffset'
+  >) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Positioner
+        className='isolate z-50 outline-none'
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <ContextMenuPrimitive.Popup
+          data-slot='context-menu-content'
+          className={cn(
+            'dark bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none',
+            className
+          )}
+          {...props}
+        />
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
+  return (
+    <ContextMenuPrimitive.Group data-slot='context-menu-group' {...props} />
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ContextMenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.GroupLabel
+      data-slot='context-menu-label'
+      data-inset={inset}
+      className={cn(
+        'text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: ContextMenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot='context-menu-item'
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-menu-item focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
+  return (
+    <ContextMenuPrimitive.SubmenuRoot data-slot='context-menu-sub' {...props} />
+  )
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ContextMenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubmenuTrigger
+      data-slot='context-menu-sub-trigger'
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <HugeiconsIcon
+        icon={ArrowRight01Icon}
+        strokeWidth={2}
+        className='ml-auto'
+      />
+    </ContextMenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  ...props
+}: React.ComponentProps<typeof ContextMenuContent>) {
+  return (
+    <ContextMenuContent
+      data-slot='context-menu-sub-content'
+      className='dark shadow-lg'
+      side='right'
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: ContextMenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot='context-menu-checkbox-item'
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className='pointer-events-none absolute right-2'>
+        <ContextMenuPrimitive.CheckboxItemIndicator>
+          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
+        </ContextMenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: ContextMenuPrimitive.RadioGroup.Props) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot='context-menu-radio-group'
+      {...props}
+    />
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: ContextMenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot='context-menu-radio-item'
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className='pointer-events-none absolute right-2'>
+        <ContextMenuPrimitive.RadioItemIndicator>
+          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
+        </ContextMenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: ContextMenuPrimitive.Separator.Props) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot='context-menu-separator'
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot='context-menu-shortcut'
+      className={cn(
+        'text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
diff --git a/web/default/src/components/ui/dialog.tsx b/web/default/src/components/ui/dialog.tsx
index db3fbb09ef7..c7aad08b814 100644
--- a/web/default/src/components/ui/dialog.tsx
+++ b/web/default/src/components/ui/dialog.tsx
@@ -1,41 +1,35 @@
 import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { XIcon } from 'lucide-react'
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
+import { Cancel01Icon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
 
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
   return <DialogPrimitive.Root data-slot='dialog' {...props} />
 }
 
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
   return <DialogPrimitive.Trigger data-slot='dialog-trigger' {...props} />
 }
 
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
   return <DialogPrimitive.Portal data-slot='dialog-portal' {...props} />
 }
 
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
   return <DialogPrimitive.Close data-slot='dialog-close' {...props} />
 }
 
 function DialogOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+}: DialogPrimitive.Backdrop.Props) {
   return (
-    <DialogPrimitive.Overlay
+    <DialogPrimitive.Backdrop
       data-slot='dialog-overlay'
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
         className
       )}
       {...props}
@@ -48,16 +42,16 @@ function DialogContent({
   children,
   showCloseButton = true,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+}: DialogPrimitive.Popup.Props & {
   showCloseButton?: boolean
 }) {
   return (
-    <DialogPortal data-slot='dialog-portal'>
+    <DialogPortal>
       <DialogOverlay />
-      <DialogPrimitive.Content
+      <DialogPrimitive.Popup
         data-slot='dialog-content'
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          'bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm',
           className
         )}
         {...props}
@@ -66,13 +60,19 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot='dialog-close'
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            render={
+              <Button
+                variant='ghost'
+                className='absolute top-2 right-2'
+                size='icon-sm'
+              />
+            }
           >
-            <XIcon />
+            <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} />
             <span className='sr-only'>Close</span>
           </DialogPrimitive.Close>
         )}
-      </DialogPrimitive.Content>
+      </DialogPrimitive.Popup>
     </DialogPortal>
   )
 }
@@ -81,33 +81,44 @@ function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot='dialog-header'
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      className={cn('flex flex-col gap-2', className)}
       {...props}
     />
   )
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showCloseButton?: boolean
+}) {
   return (
     <div
       data-slot='dialog-footer'
       className={cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        'bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end',
         className
       )}
       {...props}
-    />
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant='outline' />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
   )
 }
 
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return (
     <DialogPrimitive.Title
       data-slot='dialog-title'
-      className={cn('text-lg leading-none font-semibold', className)}
+      className={cn('text-base leading-none font-medium', className)}
       {...props}
     />
   )
@@ -116,11 +127,14 @@ function DialogTitle({
 function DialogDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+}: DialogPrimitive.Description.Props) {
   return (
     <DialogPrimitive.Description
       data-slot='dialog-description'
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn(
+        'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
+        className
+      )}
       {...props}
     />
   )
diff --git a/web/default/src/components/ui/direction.tsx b/web/default/src/components/ui/direction.tsx
new file mode 100644
index 00000000000..78957c0b328
--- /dev/null
+++ b/web/default/src/components/ui/direction.tsx
@@ -0,0 +1,4 @@
+export {
+  DirectionProvider,
+  useDirection,
+} from '@base-ui/react/direction-provider'
diff --git a/web/default/src/components/ui/drawer.tsx b/web/default/src/components/ui/drawer.tsx
index 532b30a8f0e..545cf1e3329 100644
--- a/web/default/src/components/ui/drawer.tsx
+++ b/web/default/src/components/ui/drawer.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { Drawer as DrawerPrimitive } from 'vaul'
 import { cn } from '@/lib/utils'
@@ -34,7 +36,7 @@ function DrawerOverlay({
     <DrawerPrimitive.Overlay
       data-slot='drawer-overlay'
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs',
         className
       )}
       {...props}
@@ -53,16 +55,12 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot='drawer-content'
         className={cn(
-          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
-          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
-          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
-          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
-          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
+          'group/drawer-content bg-popover text-popover-foreground fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
           className
         )}
         {...props}
       >
-        <div className='bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block' />
+        <div className='bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block' />
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -74,7 +72,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot='drawer-header'
       className={cn(
-        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
+        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left',
         className
       )}
       {...props}
@@ -99,7 +97,7 @@ function DrawerTitle({
   return (
     <DrawerPrimitive.Title
       data-slot='drawer-title'
-      className={cn('text-foreground font-semibold', className)}
+      className={cn('text-foreground text-base font-medium', className)}
       {...props}
     />
   )
diff --git a/web/default/src/components/ui/dropdown-menu.tsx b/web/default/src/components/ui/dropdown-menu.tsx
index e17b353ce9f..16682b71fd0 100644
--- a/web/default/src/components/ui/dropdown-menu.tsx
+++ b/web/default/src/components/ui/dropdown-menu.tsx
@@ -1,60 +1,76 @@
-'use client'
-
 import * as React from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+import { Menu as MenuPrimitive } from '@base-ui/react/menu'
+import { ArrowRight01Icon, Tick02Icon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
 import { cn } from '@/lib/utils'
 
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot='dropdown-menu' {...props} />
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot='dropdown-menu' {...props} />
 }
 
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot='dropdown-menu-portal' {...props} />
-  )
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot='dropdown-menu-portal' {...props} />
 }
 
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot='dropdown-menu-trigger'
-      {...props}
-    />
-  )
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot='dropdown-menu-trigger' {...props} />
 }
 
 function DropdownMenuContent({
-  className,
+  align = 'start',
+  alignOffset = 0,
+  side = 'bottom',
   sideOffset = 4,
+  className,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    'align' | 'alignOffset' | 'side' | 'sideOffset'
+  >) {
   return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot='dropdown-menu-content'
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className='isolate z-50 outline-none'
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
         sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
+      >
+        <MenuPrimitive.Popup
+          data-slot='dropdown-menu-content'
+          className={cn(
+            'bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden',
+            className
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
   )
 }
 
-function DropdownMenuGroup({
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot='dropdown-menu-group' {...props} />
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
   return (
-    <DropdownMenuPrimitive.Group data-slot='dropdown-menu-group' {...props} />
+    <MenuPrimitive.GroupLabel
+      data-slot='dropdown-menu-label'
+      data-inset={inset}
+      className={cn(
+        'text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7',
+        className
+      )}
+      {...props}
+    />
   )
 }
 
@@ -63,17 +79,17 @@ function DropdownMenuItem({
   inset,
   variant = 'default',
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+}: MenuPrimitive.Item.Props & {
   inset?: boolean
   variant?: 'default' | 'destructive'
 }) {
   return (
-    <DropdownMenuPrimitive.Item
+    <MenuPrimitive.Item
       data-slot='dropdown-menu-item'
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/dropdown-menu-item focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -81,93 +97,141 @@ function DropdownMenuItem({
   )
 }
 
-function DropdownMenuCheckboxItem({
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot='dropdown-menu-sub' {...props} />
+}
+
+function DropdownMenuSubTrigger({
   className,
+  inset,
   children,
-  checked,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
   return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot='dropdown-menu-checkbox-item'
+    <MenuPrimitive.SubmenuTrigger
+      data-slot='dropdown-menu-sub-trigger'
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
-      checked={checked}
       {...props}
     >
-      <span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className='size-4' />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
       {children}
-    </DropdownMenuPrimitive.CheckboxItem>
+      <HugeiconsIcon
+        icon={ArrowRight01Icon}
+        strokeWidth={2}
+        className='ml-auto'
+      />
+    </MenuPrimitive.SubmenuTrigger>
   )
 }
 
-function DropdownMenuRadioGroup({
+function DropdownMenuSubContent({
+  align = 'start',
+  alignOffset = -3,
+  side = 'right',
+  sideOffset = 0,
+  className,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+}: React.ComponentProps<typeof DropdownMenuContent>) {
   return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot='dropdown-menu-radio-group'
+    <DropdownMenuContent
+      data-slot='dropdown-menu-sub-content'
+      className={cn(
+        'bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 w-auto min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100',
+        className
+      )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
       {...props}
     />
   )
 }
 
-function DropdownMenuRadioItem({
+function DropdownMenuCheckboxItem({
   className,
   children,
+  checked,
+  inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
   return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot='dropdown-menu-radio-item'
+    <MenuPrimitive.CheckboxItem
+      data-slot='dropdown-menu-checkbox-item'
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
+      checked={checked}
       {...props}
     >
-      <span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className='size-2 fill-current' />
-        </DropdownMenuPrimitive.ItemIndicator>
+      <span
+        className='pointer-events-none absolute right-2 flex items-center justify-center'
+        data-slot='dropdown-menu-checkbox-item-indicator'
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
+        </MenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
-    </DropdownMenuPrimitive.RadioItem>
+    </MenuPrimitive.CheckboxItem>
   )
 }
 
-function DropdownMenuLabel({
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot='dropdown-menu-radio-group'
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
   className,
+  children,
   inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+}: MenuPrimitive.RadioItem.Props & {
   inset?: boolean
 }) {
   return (
-    <DropdownMenuPrimitive.Label
-      data-slot='dropdown-menu-label'
+    <MenuPrimitive.RadioItem
+      data-slot='dropdown-menu-radio-item'
       data-inset={inset}
       className={cn(
-        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
-    />
+    >
+      <span
+        className='pointer-events-none absolute right-2 flex items-center justify-center'
+        data-slot='dropdown-menu-radio-item-indicator'
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
   )
 }
 
 function DropdownMenuSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+}: MenuPrimitive.Separator.Props) {
   return (
-    <DropdownMenuPrimitive.Separator
+    <MenuPrimitive.Separator
       data-slot='dropdown-menu-separator'
       className={cn('bg-border -mx-1 my-1 h-px', className)}
       {...props}
@@ -183,53 +247,7 @@ function DropdownMenuShortcut({
     <span
       data-slot='dropdown-menu-shortcut'
       className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot='dropdown-menu-sub' {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot='dropdown-menu-sub-trigger'
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className='ml-auto size-4' />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot='dropdown-menu-sub-content'
-      className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
         className
       )}
       {...props}
diff --git a/web/default/src/components/ui/empty.tsx b/web/default/src/components/ui/empty.tsx
index a63830e75e1..526d582f9f2 100644
--- a/web/default/src/components/ui/empty.tsx
+++ b/web/default/src/components/ui/empty.tsx
@@ -6,7 +6,7 @@ function Empty({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot='empty'
       className={cn(
-        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
+        'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance',
         className
       )}
       {...props}
@@ -18,22 +18,19 @@ function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot='empty-header'
-      className={cn(
-        'flex max-w-md flex-col items-center gap-2 text-center',
-        className
-      )}
+      className={cn('flex max-w-sm flex-col items-center gap-2', className)}
       {...props}
     />
   )
 }
 
 const emptyMediaVariants = cva(
-  'flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
   {
     variants: {
       variant: {
         default: 'bg-transparent',
-        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
       },
     },
     defaultVariants: {
@@ -61,7 +58,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot='empty-title'
-      className={cn('text-lg font-medium tracking-tight', className)}
+      className={cn('text-sm font-medium tracking-tight', className)}
       {...props}
     />
   )
@@ -85,7 +82,7 @@ function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot='empty-content'
       className={cn(
-        'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
+        'flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance',
         className
       )}
       {...props}
diff --git a/web/default/src/components/ui/field.tsx b/web/default/src/components/ui/field.tsx
new file mode 100644
index 00000000000..e0b91d7331b
--- /dev/null
+++ b/web/default/src/components/ui/field.tsx
@@ -0,0 +1,235 @@
+import { useMemo } from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+import { Separator } from '@/components/ui/separator'
+
+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
+  return (
+    <fieldset
+      data-slot='field-set'
+      className={cn(
+        'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = 'legend',
+  ...props
+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+  return (
+    <legend
+      data-slot='field-legend'
+      data-variant={variant}
+      className={cn(
+        'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='field-group'
+      className={cn(
+        'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  'group/field flex w-full gap-2 data-[invalid=true]:text-destructive',
+  {
+    variants: {
+      orientation: {
+        vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
+        horizontal:
+          'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        responsive:
+          'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+      },
+    },
+    defaultVariants: {
+      orientation: 'vertical',
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role='group'
+      data-slot='field'
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='field-content'
+      className={cn(
+        'group/field-content flex flex-1 flex-col gap-0.5 leading-snug',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot='field-label'
+      className={cn(
+        'group/field-label peer/field-label has-data-checked:border-primary/30 has-data-checked:bg-primary/5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5',
+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='field-label'
+      className={cn(
+        'flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot='field-description'
+      className={cn(
+        'text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
+        'last:mt-0 nth-last-2:-mt-1',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot='field-separator'
+      data-content={!!children}
+      className={cn(
+        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+        className
+      )}
+      {...props}
+    >
+      <Separator className='absolute inset-0 top-1/2' />
+      {children && (
+        <span
+          className='bg-background text-muted-foreground relative mx-auto block w-fit px-2'
+          data-slot='field-separator-content'
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<'div'> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className='ml-4 flex list-disc flex-col gap-1'>
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role='alert'
+      data-slot='field-error'
+      className={cn('text-destructive text-sm font-normal', className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}
diff --git a/web/default/src/components/ui/form.tsx b/web/default/src/components/ui/form.tsx
index 06bf030d717..cf1387fbd7d 100644
--- a/web/default/src/components/ui/form.tsx
+++ b/web/default/src/components/ui/form.tsx
@@ -8,8 +8,7 @@ import {
   type FieldPath,
   type FieldValues,
 } from 'react-hook-form'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { Slot } from '@radix-ui/react-slot'
+import { useRender } from '@base-ui/react/use-render'
 import { cn } from '@/lib/utils'
 import { Label } from '@/components/ui/label'
 
@@ -87,7 +86,7 @@ function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
 function FormLabel({
   className,
   ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+}: React.ComponentProps<typeof Label>) {
   const { error, formItemId } = useFormField()
 
   return (
@@ -101,22 +100,24 @@ function FormLabel({
   )
 }
 
-function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+function FormControl({
+  children,
+  ...props
+}: { children: React.ReactElement } & Record<string, unknown>) {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 
-  return (
-    <Slot
-      data-slot='form-control'
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
+  return useRender({
+    render: children,
+    props: {
+      'data-slot': 'form-control',
+      id: formItemId,
+      'aria-describedby': !error
+        ? `${formDescriptionId}`
+        : `${formDescriptionId} ${formMessageId}`,
+      'aria-invalid': !!error,
+      ...props,
+    },
+  })
 }
 
 function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
diff --git a/web/default/src/components/ui/hover-card.tsx b/web/default/src/components/ui/hover-card.tsx
index a05ff056500..ccb6b2b38b6 100644
--- a/web/default/src/components/ui/hover-card.tsx
+++ b/web/default/src/components/ui/hover-card.tsx
@@ -1,40 +1,49 @@
-import * as React from 'react'
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+'use client'
+
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card'
 import { cn } from '@/lib/utils'
 
-function HoverCard({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot='hover-card' {...props} />
+function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
+  return <PreviewCardPrimitive.Root data-slot='hover-card' {...props} />
 }
 
-function HoverCardTrigger({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
   return (
-    <HoverCardPrimitive.Trigger data-slot='hover-card-trigger' {...props} />
+    <PreviewCardPrimitive.Trigger data-slot='hover-card-trigger' {...props} />
   )
 }
 
 function HoverCardContent({
   className,
-  align = 'center',
+  side = 'bottom',
   sideOffset = 4,
+  align = 'center',
+  alignOffset = 4,
   ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+}: PreviewCardPrimitive.Popup.Props &
+  Pick<
+    PreviewCardPrimitive.Positioner.Props,
+    'align' | 'alignOffset' | 'side' | 'sideOffset'
+  >) {
   return (
-    <HoverCardPrimitive.Portal data-slot='hover-card-portal'>
-      <HoverCardPrimitive.Content
-        data-slot='hover-card-content'
+    <PreviewCardPrimitive.Portal data-slot='hover-card-portal'>
+      <PreviewCardPrimitive.Positioner
         align={align}
+        alignOffset={alignOffset}
+        side={side}
         sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-          className
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
+        className='isolate z-50'
+      >
+        <PreviewCardPrimitive.Popup
+          data-slot='hover-card-content'
+          className={cn(
+            'bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 w-64 origin-(--transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100',
+            className
+          )}
+          {...props}
+        />
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
   )
 }
 
diff --git a/web/default/src/components/ui/input-group.tsx b/web/default/src/components/ui/input-group.tsx
index a6f9cf8c518..afb8f1c876d 100644
--- a/web/default/src/components/ui/input-group.tsx
+++ b/web/default/src/components/ui/input-group.tsx
@@ -13,21 +13,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot='input-group'
       role='group'
       className={cn(
-        'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
-        'h-9 min-w-0 has-[>textarea]:h-auto',
-
-        // Variants based on alignment.
-        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
-        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
-        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
-        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
-
-        // Focus state.
-        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
-
-        // Error state.
-        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
-
+        'group/input-group border-input has-disabled:bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
         className
       )}
       {...props}
@@ -36,18 +22,18 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
 }
 
 const inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
         'inline-start':
-          'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
+          'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',
         'inline-end':
-          'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
+          'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',
         'block-start':
-          'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
+          'order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2',
         'block-end':
-          'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
+          'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
       },
     },
     defaultVariants: {
@@ -79,14 +65,14 @@ function InputGroupAddon({
 }
 
 const inputGroupButtonVariants = cva(
-  'text-sm shadow-none flex gap-2 items-center',
+  'flex items-center gap-2 text-sm shadow-none',
   {
     variants: {
       size: {
-        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-        sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: '',
         'icon-xs':
-          'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
+          'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
         'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
       },
     },
@@ -102,8 +88,10 @@ function InputGroupButton({
   variant = 'ghost',
   size = 'xs',
   ...props
-}: Omit<React.ComponentProps<typeof Button>, 'size'> &
-  VariantProps<typeof inputGroupButtonVariants>) {
+}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: 'button' | 'submit' | 'reset'
+  }) {
   return (
     <Button
       type={type}
@@ -135,7 +123,7 @@ function InputGroupInput({
     <Input
       data-slot='input-group-control'
       className={cn(
-        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+        'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
         className
       )}
       {...props}
@@ -151,7 +139,7 @@ function InputGroupTextarea({
     <Textarea
       data-slot='input-group-control'
       className={cn(
-        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+        'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
         className
       )}
       {...props}
diff --git a/web/default/src/components/ui/input-otp.tsx b/web/default/src/components/ui/input-otp.tsx
index 91acccd70ce..c1fb56c57b2 100644
--- a/web/default/src/components/ui/input-otp.tsx
+++ b/web/default/src/components/ui/input-otp.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
+import { MinusSignIcon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
 import { OTPInput, OTPInputContext } from 'input-otp'
-import { MinusIcon } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
 function InputOTP({
@@ -14,9 +15,10 @@ function InputOTP({
     <OTPInput
       data-slot='input-otp'
       containerClassName={cn(
-        'flex items-center gap-2 has-disabled:opacity-50',
+        'cn-input-otp flex items-center has-disabled:opacity-50',
         containerClassName
       )}
+      spellCheck={false}
       className={cn('disabled:cursor-not-allowed', className)}
       {...props}
     />
@@ -27,7 +29,10 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot='input-otp-group'
-      className={cn('flex items-center', className)}
+      className={cn(
+        'has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 flex items-center rounded-lg has-aria-invalid:ring-3',
+        className
+      )}
       {...props}
     />
   )
@@ -48,7 +53,7 @@ function InputOTPSlot({
       data-slot='input-otp-slot'
       data-active={isActive}
       className={cn(
-        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+        'border-input aria-invalid:border-destructive data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40 relative flex size-8 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-3',
         className
       )}
       {...props}
@@ -65,8 +70,13 @@ function InputOTPSlot({
 
 function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
   return (
-    <div data-slot='input-otp-separator' role='separator' {...props}>
-      <MinusIcon />
+    <div
+      data-slot='input-otp-separator'
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      role='separator'
+      {...props}
+    >
+      <HugeiconsIcon icon={MinusSignIcon} strokeWidth={2} />
     </div>
   )
 }
diff --git a/web/default/src/components/ui/input.tsx b/web/default/src/components/ui/input.tsx
index 7fede1da598..88be1ee01f0 100644
--- a/web/default/src/components/ui/input.tsx
+++ b/web/default/src/components/ui/input.tsx
@@ -1,15 +1,14 @@
 import * as React from 'react'
+import { Input as InputPrimitive } from '@base-ui/react/input'
 import { cn } from '@/lib/utils'
 
 function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
   return (
-    <input
+    <InputPrimitive
       type={type}
       data-slot='input'
       className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
         className
       )}
       {...props}
diff --git a/web/default/src/components/ui/item.tsx b/web/default/src/components/ui/item.tsx
new file mode 100644
index 00000000000..1ab9f341089
--- /dev/null
+++ b/web/default/src/components/ui/item.tsx
@@ -0,0 +1,200 @@
+import * as React from 'react'
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+
+function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      role='list'
+      data-slot='item-group'
+      className={cn(
+        'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot='item-separator'
+      orientation='horizontal'
+      className={cn('my-2', className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  'group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent',
+        outline: 'border-border',
+        muted: 'border-transparent bg-muted/50',
+      },
+      size: {
+        default: 'gap-2.5 px-3 py-2.5',
+        sm: 'gap-2.5 px-3 py-2.5',
+        xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = 'default',
+  size = 'default',
+  render,
+  ...props
+}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {
+  return useRender({
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
+      {
+        className: cn(itemVariants({ variant, size, className })),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: 'item',
+      variant,
+      size,
+    },
+  })
+}
+
+const itemMediaVariants = cva(
+  'flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot='item-media'
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='item-content'
+      className={cn(
+        'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='item-title'
+      className={cn(
+        'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot='item-description'
+      className={cn(
+        'text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='item-actions'
+      className={cn('flex items-center gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='item-header'
+      className={cn(
+        'flex basis-full items-center justify-between gap-2',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='item-footer'
+      className={cn(
+        'flex basis-full items-center justify-between gap-2',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}
diff --git a/web/default/src/components/ui/kbd.tsx b/web/default/src/components/ui/kbd.tsx
new file mode 100644
index 00000000000..ab528b1f279
--- /dev/null
+++ b/web/default/src/components/ui/kbd.tsx
@@ -0,0 +1,26 @@
+import { cn } from '@/lib/utils'
+
+function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      data-slot='kbd'
+      className={cn(
+        "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <kbd
+      data-slot='kbd-group'
+      className={cn('inline-flex items-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }
diff --git a/web/default/src/components/ui/label.tsx b/web/default/src/components/ui/label.tsx
index 83165349690..ca104bfa041 100644
--- a/web/default/src/components/ui/label.tsx
+++ b/web/default/src/components/ui/label.tsx
@@ -1,64 +1,18 @@
 'use client'
 
 import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
 import { cn } from '@/lib/utils'
 
-const requiredMarkerPattern = /\s\*$/
-
-function renderRequiredMarker(text: string, key?: React.Key) {
-  if (!requiredMarkerPattern.test(text)) {
-    return text
-  }
-
-  return (
-    <span key={key}>
-      {text.slice(0, -1)}
-      <span className='text-destructive'>*</span>
-    </span>
-  )
-}
-
-function renderLabelChildren(children: React.ReactNode) {
-  const childArray = React.Children.toArray(children)
-
-  if (childArray.length === 0) {
-    return children
-  }
-
-  if (
-    childArray.every(
-      (child) => typeof child === 'string' || typeof child === 'number'
-    )
-  ) {
-    return renderRequiredMarker(childArray.join(''))
-  }
-
-  return childArray.map((child, index) => {
-    if (typeof child === 'string' || typeof child === 'number') {
-      return renderRequiredMarker(String(child), index)
-    }
-
-    return child
-  })
-}
-
-function Label({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function Label({ className, ...props }: React.ComponentProps<'label'>) {
   return (
-    <LabelPrimitive.Root
+    <label
       data-slot='label'
       className={cn(
         'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
         className
       )}
       {...props}
-    >
-      {renderLabelChildren(children)}
-    </LabelPrimitive.Root>
+    />
   )
 }
 
diff --git a/web/default/src/components/ui/menubar.tsx b/web/default/src/components/ui/menubar.tsx
new file mode 100644
index 00000000000..420c3f30537
--- /dev/null
+++ b/web/default/src/components/ui/menubar.tsx
@@ -0,0 +1,284 @@
+'use client'
+
+import * as React from 'react'
+import { Menu as MenuPrimitive } from '@base-ui/react/menu'
+import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar'
+import { Tick02Icon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { cn } from '@/lib/utils'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+function Menubar({ className, ...props }: MenubarPrimitive.Props) {
+  return (
+    <MenubarPrimitive
+      data-slot='menubar'
+      className={cn(
+        'flex h-8 items-center gap-0.5 rounded-lg border p-[3px]',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
+  return <DropdownMenu data-slot='menubar-menu' {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuGroup>) {
+  return <DropdownMenuGroup data-slot='menubar-group' {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPortal>) {
+  return <DropdownMenuPortal data-slot='menubar-portal' {...props} />
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuTrigger>) {
+  return (
+    <DropdownMenuTrigger
+      data-slot='menubar-trigger'
+      className={cn(
+        'hover:bg-muted aria-expanded:bg-muted flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = 'start',
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot='menubar-content'
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        'dark bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuItem>) {
+  return (
+    <DropdownMenuItem
+      data-slot='menubar-item'
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/menubar-item focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:*:[svg]:text-destructive! gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot='menubar-checkbox-item'
+      data-inset={inset}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenuPrimitive.CheckboxItemIndicator>
+          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
+  return <DropdownMenuRadioGroup data-slot='menubar-radio-group' {...props} />
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot='menubar-radio-item'
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenuPrimitive.RadioItemIndicator>
+          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuLabel> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuLabel
+      data-slot='menubar-label'
+      data-inset={inset}
+      className={cn(
+        'px-1.5 py-1 text-sm font-medium data-inset:pl-7',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSeparator>) {
+  return (
+    <DropdownMenuSeparator
+      data-slot='menubar-separator'
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuShortcut>) {
+  return (
+    <DropdownMenuShortcut
+      data-slot='menubar-shortcut'
+      className={cn(
+        'text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSub>) {
+  return <DropdownMenuSub data-slot='menubar-sub' {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuSubTrigger
+      data-slot='menubar-sub-trigger'
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSubContent>) {
+  return (
+    <DropdownMenuSubContent
+      data-slot='menubar-sub-content'
+      className={cn(
+        'dark bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
diff --git a/web/default/src/components/ui/native-select.tsx b/web/default/src/components/ui/native-select.tsx
new file mode 100644
index 00000000000..4117c93b9c3
--- /dev/null
+++ b/web/default/src/components/ui/native-select.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react'
+import { UnfoldMoreIcon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { cn } from '@/lib/utils'
+
+type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {
+  size?: 'sm' | 'default'
+}
+
+function NativeSelect({
+  className,
+  size = 'default',
+  ...props
+}: NativeSelectProps) {
+  return (
+    <div
+      className={cn(
+        'group/native-select relative w-fit has-[select:disabled]:opacity-50',
+        className
+      )}
+      data-slot='native-select-wrapper'
+      data-size={size}
+    >
+      <select
+        data-slot='native-select'
+        data-size={size}
+        className='border-input selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5'
+        {...props}
+      />
+      <HugeiconsIcon
+        icon={UnfoldMoreIcon}
+        strokeWidth={2}
+        className='text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none'
+        aria-hidden='true'
+        data-slot='native-select-icon'
+      />
+    </div>
+  )
+}
+
+function NativeSelectOption({
+  className,
+  ...props
+}: React.ComponentProps<'option'>) {
+  return (
+    <option
+      data-slot='native-select-option'
+      className={cn('bg-[Canvas] text-[CanvasText]', className)}
+      {...props}
+    />
+  )
+}
+
+function NativeSelectOptGroup({
+  className,
+  ...props
+}: React.ComponentProps<'optgroup'>) {
+  return (
+    <optgroup
+      data-slot='native-select-optgroup'
+      className={cn('bg-[Canvas] text-[CanvasText]', className)}
+      {...props}
+    />
+  )
+}
+
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }
diff --git a/web/default/src/components/ui/navigation-menu.tsx b/web/default/src/components/ui/navigation-menu.tsx
new file mode 100644
index 00000000000..82330b53244
--- /dev/null
+++ b/web/default/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,173 @@
+import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu'
+import { ArrowDown01Icon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+function NavigationMenu({
+  align = 'start',
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Root.Props &
+  Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot='navigation-menu'
+      className={cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <NavigationMenuPositioner align={align} />
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot='navigation-menu-list'
+      className={cn(
+        'group flex flex-1 list-none items-center justify-center gap-0',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot='navigation-menu-item'
+      className={cn('relative', className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  'group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted'
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.Trigger.Props) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot='navigation-menu-trigger'
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      {...props}
+    >
+      {children}{' '}
+      <HugeiconsIcon
+        icon={ArrowDown01Icon}
+        strokeWidth={2}
+        className='relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180'
+        aria-hidden='true'
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: NavigationMenuPrimitive.Content.Props) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot='navigation-menu-content'
+      className={cn(
+        'data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuPositioner({
+  className,
+  side = 'bottom',
+  sideOffset = 8,
+  align = 'start',
+  alignOffset = 0,
+  ...props
+}: NavigationMenuPrimitive.Positioner.Props) {
+  return (
+    <NavigationMenuPrimitive.Portal>
+      <NavigationMenuPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        className={cn(
+          'isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0',
+          className
+        )}
+        {...props}
+      >
+        <NavigationMenuPrimitive.Popup className='data-[ending-style]:easing-[ease] xs:w-(--popup-width) bg-popover text-popover-foreground ring-foreground/10 relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0'>
+          <NavigationMenuPrimitive.Viewport className='relative size-full overflow-hidden' />
+        </NavigationMenuPrimitive.Popup>
+      </NavigationMenuPrimitive.Positioner>
+    </NavigationMenuPrimitive.Portal>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: NavigationMenuPrimitive.Link.Props) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot='navigation-menu-link'
+      className={cn(
+        "hover:bg-muted focus:bg-muted focus-visible:ring-ring/50 data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
+  return (
+    <NavigationMenuPrimitive.Icon
+      data-slot='navigation-menu-indicator'
+      className={cn(
+        'data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden',
+        className
+      )}
+      {...props}
+    >
+      <div className='bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md' />
+    </NavigationMenuPrimitive.Icon>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuPositioner,
+}
diff --git a/web/default/src/components/ui/pagination.tsx b/web/default/src/components/ui/pagination.tsx
new file mode 100644
index 00000000000..226c0906f8a
--- /dev/null
+++ b/web/default/src/components/ui/pagination.tsx
@@ -0,0 +1,141 @@
+import * as React from 'react'
+import {
+  ArrowLeft01Icon,
+  ArrowRight01Icon,
+  MoreHorizontalCircle01Icon,
+} from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      role='navigation'
+      aria-label='pagination'
+      data-slot='pagination'
+      className={cn('mx-auto flex w-full justify-center', className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot='pagination-content'
+      className={cn('flex items-center gap-0.5', className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
+  return <li data-slot='pagination-item' {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<React.ComponentProps<typeof Button>, 'size'> &
+  React.ComponentProps<'a'>
+
+function PaginationLink({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <Button
+      variant={isActive ? 'outline' : 'ghost'}
+      size={size}
+      className={cn(className)}
+      nativeButton={false}
+      render={
+        <a
+          aria-current={isActive ? 'page' : undefined}
+          data-slot='pagination-link'
+          data-active={isActive}
+          {...props}
+        />
+      }
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  text = 'Previous',
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label='Go to previous page'
+      size='default'
+      className={cn('pl-1.5!', className)}
+      {...props}
+    >
+      <HugeiconsIcon
+        icon={ArrowLeft01Icon}
+        strokeWidth={2}
+        data-icon='inline-start'
+      />
+      <span className='hidden sm:block'>{text}</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  text = 'Next',
+  ...props
+}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
+  return (
+    <PaginationLink
+      aria-label='Go to next page'
+      size='default'
+      className={cn('pr-1.5!', className)}
+      {...props}
+    >
+      <span className='hidden sm:block'>{text}</span>
+      <HugeiconsIcon
+        icon={ArrowRight01Icon}
+        strokeWidth={2}
+        data-icon='inline-end'
+      />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      aria-hidden
+      data-slot='pagination-ellipsis'
+      className={cn(
+        "flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <HugeiconsIcon icon={MoreHorizontalCircle01Icon} strokeWidth={2} />
+      <span className='sr-only'>More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/web/default/src/components/ui/popover.tsx b/web/default/src/components/ui/popover.tsx
index 490f6f28f2f..c3eb9b9db47 100644
--- a/web/default/src/components/ui/popover.tsx
+++ b/web/default/src/components/ui/popover.tsx
@@ -1,45 +1,99 @@
 import * as React from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover'
 import { cn } from '@/lib/utils'
 
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
   return <PopoverPrimitive.Root data-slot='popover' {...props} />
 }
 
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
   return <PopoverPrimitive.Trigger data-slot='popover-trigger' {...props} />
 }
 
 function PopoverContent({
   className,
   align = 'center',
+  alignOffset = 0,
+  side = 'bottom',
   sideOffset = 4,
+  collisionPadding,
+  collisionBoundary,
+  collisionAvoidance,
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+}: PopoverPrimitive.Popup.Props &
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    | 'align'
+    | 'alignOffset'
+    | 'side'
+    | 'sideOffset'
+    | 'collisionPadding'
+    | 'collisionBoundary'
+    | 'collisionAvoidance'
+  >) {
   return (
     <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot='popover-content'
+      <PopoverPrimitive.Positioner
         align={align}
+        alignOffset={alignOffset}
+        side={side}
         sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-          className
-        )}
-        {...props}
-      />
+        collisionPadding={collisionPadding}
+        collisionBoundary={collisionBoundary}
+        collisionAvoidance={collisionAvoidance}
+        className='isolate z-50'
+      >
+        <PopoverPrimitive.Popup
+          data-slot='popover-content'
+          className={cn(
+            'bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100',
+            className
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
     </PopoverPrimitive.Portal>
   )
 }
 
-function PopoverAnchor({
+function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='popover-header'
+      className={cn('flex flex-col gap-0.5 text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot='popover-title'
+      className={cn('font-medium', className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot='popover-anchor' {...props} />
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot='popover-description'
+      className={cn('text-muted-foreground', className)}
+      {...props}
+    />
+  )
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}
diff --git a/web/default/src/components/ui/progress.tsx b/web/default/src/components/ui/progress.tsx
index 6a3bac74b5e..16b58536fba 100644
--- a/web/default/src/components/ui/progress.tsx
+++ b/web/default/src/components/ui/progress.tsx
@@ -1,30 +1,82 @@
 'use client'
 
-import * as React from 'react'
-import * as ProgressPrimitive from '@radix-ui/react-progress'
+import { Progress as ProgressPrimitive } from '@base-ui/react/progress'
 import { cn } from '@/lib/utils'
 
 function Progress({
   className,
+  children,
   value,
   ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+}: ProgressPrimitive.Root.Props) {
   return (
     <ProgressPrimitive.Root
+      value={value}
       data-slot='progress'
+      className={cn('flex flex-wrap gap-3', className)}
+      {...props}
+    >
+      {children}
+      <ProgressTrack>
+        <ProgressIndicator />
+      </ProgressTrack>
+    </ProgressPrimitive.Root>
+  )
+}
+
+function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
+  return (
+    <ProgressPrimitive.Track
       className={cn(
-        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        'bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-full',
         className
       )}
+      data-slot='progress-track'
       {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot='progress-indicator'
-        className='bg-primary h-full w-full flex-1 transition-all'
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
+    />
+  )
+}
+
+function ProgressIndicator({
+  className,
+  ...props
+}: ProgressPrimitive.Indicator.Props) {
+  return (
+    <ProgressPrimitive.Indicator
+      data-slot='progress-indicator'
+      className={cn('bg-primary h-full transition-all', className)}
+      {...props}
+    />
+  )
+}
+
+function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
+  return (
+    <ProgressPrimitive.Label
+      className={cn('text-sm font-medium', className)}
+      data-slot='progress-label'
+      {...props}
+    />
   )
 }
 
-export { Progress }
+function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
+  return (
+    <ProgressPrimitive.Value
+      className={cn(
+        'text-muted-foreground ml-auto text-sm tabular-nums',
+        className
+      )}
+      data-slot='progress-value'
+      {...props}
+    />
+  )
+}
+
+export {
+  Progress,
+  ProgressTrack,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressValue,
+}
diff --git a/web/default/src/components/ui/radio-group.tsx b/web/default/src/components/ui/radio-group.tsx
index 8505fe73685..a28a70adb3e 100644
--- a/web/default/src/components/ui/radio-group.tsx
+++ b/web/default/src/components/ui/radio-group.tsx
@@ -1,41 +1,34 @@
-import * as React from 'react'
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
-import { CircleIcon } from 'lucide-react'
+import { Radio as RadioPrimitive } from '@base-ui/react/radio'
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'
 import { cn } from '@/lib/utils'
 
-function RadioGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
   return (
-    <RadioGroupPrimitive.Root
+    <RadioGroupPrimitive
       data-slot='radio-group'
-      className={cn('grid gap-3', className)}
+      className={cn('grid w-full gap-2', className)}
       {...props}
     />
   )
 }
 
-function RadioGroupItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
   return (
-    <RadioGroupPrimitive.Item
+    <RadioPrimitive.Root
       data-slot='radio-group-item'
       className={cn(
-        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        'group/radio-group-item peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3',
         className
       )}
       {...props}
     >
-      <RadioGroupPrimitive.Indicator
+      <RadioPrimitive.Indicator
         data-slot='radio-group-indicator'
-        className='relative flex items-center justify-center'
+        className='flex size-4 items-center justify-center'
       >
-        <CircleIcon className='fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2' />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
+        <span className='bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full' />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
   )
 }
 
diff --git a/web/default/src/components/ui/resizable.tsx b/web/default/src/components/ui/resizable.tsx
new file mode 100644
index 00000000000..a3fc003a263
--- /dev/null
+++ b/web/default/src/components/ui/resizable.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import * as ResizablePrimitive from 'react-resizable-panels'
+import { cn } from '@/lib/utils'
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot='resizable-panel-group'
+      className={cn(
+        'flex h-full w-full aria-[orientation=vertical]:flex-col',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot='resizable-panel' {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot='resizable-handle'
+      className={cn(
+        'bg-border ring-offset-background focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90',
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className='bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg' />
+      )}
+    </ResizablePrimitive.Separator>
+  )
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
diff --git a/web/default/src/components/ui/scroll-area.tsx b/web/default/src/components/ui/scroll-area.tsx
index dcbed7e3baa..282ba9abff4 100644
--- a/web/default/src/components/ui/scroll-area.tsx
+++ b/web/default/src/components/ui/scroll-area.tsx
@@ -1,12 +1,11 @@
-import * as React from 'react'
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'
 import { cn } from '@/lib/utils'
 
 function ScrollArea({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+}: ScrollAreaPrimitive.Root.Props) {
   return (
     <ScrollAreaPrimitive.Root
       data-slot='scroll-area'
@@ -29,26 +28,23 @@ function ScrollBar({
   className,
   orientation = 'vertical',
   ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+}: ScrollAreaPrimitive.Scrollbar.Props) {
   return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
+    <ScrollAreaPrimitive.Scrollbar
       data-slot='scroll-area-scrollbar'
+      data-orientation={orientation}
       orientation={orientation}
       className={cn(
-        'flex touch-none p-px transition-colors select-none',
-        orientation === 'vertical' &&
-          'h-full w-2.5 border-l border-l-transparent',
-        orientation === 'horizontal' &&
-          'h-2.5 flex-col border-t border-t-transparent',
+        'flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent',
         className
       )}
       {...props}
     >
-      <ScrollAreaPrimitive.ScrollAreaThumb
+      <ScrollAreaPrimitive.Thumb
         data-slot='scroll-area-thumb'
         className='bg-border relative flex-1 rounded-full'
       />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+    </ScrollAreaPrimitive.Scrollbar>
   )
 }
 
diff --git a/web/default/src/components/ui/select.tsx b/web/default/src/components/ui/select.tsx
index 46de167dc1f..ef0b5888f8c 100644
--- a/web/default/src/components/ui/select.tsx
+++ b/web/default/src/components/ui/select.tsx
@@ -1,26 +1,36 @@
 'use client'
 
 import * as React from 'react'
-import * as SelectPrimitive from '@radix-ui/react-select'
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+import { Select as SelectPrimitive } from '@base-ui/react/select'
+import {
+  UnfoldMoreIcon,
+  Tick02Icon,
+  ArrowUp01Icon,
+  ArrowDown01Icon,
+} from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
 import { cn } from '@/lib/utils'
 
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot='select' {...props} />
-}
+const Select = SelectPrimitive.Root
 
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot='select-group' {...props} />
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot='select-group'
+      className={cn('scroll-my-1 p-1', className)}
+      {...props}
+    />
+  )
 }
 
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot='select-value' {...props} />
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot='select-value'
+      className={cn('flex flex-1 text-left', className)}
+      {...props}
+    />
+  )
 }
 
 function SelectTrigger({
@@ -28,7 +38,7 @@ function SelectTrigger({
   size = 'default',
   children,
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+}: SelectPrimitive.Trigger.Props & {
   size?: 'sm' | 'default'
 }) {
   return (
@@ -36,15 +46,21 @@ function SelectTrigger({
       data-slot='select-trigger'
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
     >
       {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className='size-4 opacity-50' />
-      </SelectPrimitive.Icon>
+      <SelectPrimitive.Icon
+        render={
+          <HugeiconsIcon
+            icon={UnfoldMoreIcon}
+            strokeWidth={2}
+            className='text-muted-foreground pointer-events-none size-4'
+          />
+        }
+      />
     </SelectPrimitive.Trigger>
   )
 }
@@ -52,36 +68,41 @@ function SelectTrigger({
 function SelectContent({
   className,
   children,
-  position = 'popper',
+  side = 'bottom',
+  sideOffset = 4,
   align = 'center',
+  alignOffset = 0,
+  alignItemWithTrigger = true,
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'
+  >) {
   return (
     <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot='select-content'
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
-          position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-          className
-        )}
-        position={position}
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
         align={align}
-        {...props}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className='isolate z-50'
       >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
+        <SelectPrimitive.Popup
+          data-slot='select-content'
+          data-align-trigger={alignItemWithTrigger}
           className={cn(
-            'p-1',
-            position === 'popper' &&
-              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'
+            'dark bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none',
+            className
           )}
+          {...props}
         >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
     </SelectPrimitive.Portal>
   )
 }
@@ -89,11 +110,11 @@ function SelectContent({
 function SelectLabel({
   className,
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+}: SelectPrimitive.GroupLabel.Props) {
   return (
-    <SelectPrimitive.Label
+    <SelectPrimitive.GroupLabel
       data-slot='select-label'
-      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      className={cn('text-muted-foreground px-1.5 py-1 text-xs', className)}
       {...props}
     />
   )
@@ -103,22 +124,30 @@ function SelectItem({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+}: SelectPrimitive.Item.Props) {
   return (
     <SelectPrimitive.Item
       data-slot='select-item'
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
     >
-      <span className='absolute right-2 flex size-3.5 items-center justify-center'>
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className='size-4' />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemText className='flex flex-1 shrink-0 gap-2 whitespace-nowrap'>
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className='pointer-events-none absolute right-2 flex size-4 items-center justify-center' />
+        }
+      >
+        <HugeiconsIcon
+          icon={Tick02Icon}
+          strokeWidth={2}
+          className='pointer-events-none'
+        />
+      </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
   )
 }
@@ -126,7 +155,7 @@ function SelectItem({
 function SelectSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+}: SelectPrimitive.Separator.Props) {
   return (
     <SelectPrimitive.Separator
       data-slot='select-separator'
@@ -139,36 +168,36 @@ function SelectSeparator({
 function SelectScrollUpButton({
   className,
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
   return (
-    <SelectPrimitive.ScrollUpButton
+    <SelectPrimitive.ScrollUpArrow
       data-slot='select-scroll-up-button'
       className={cn(
-        'flex cursor-default items-center justify-center py-1',
+        "bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
     >
-      <ChevronUpIcon className='size-4' />
-    </SelectPrimitive.ScrollUpButton>
+      <HugeiconsIcon icon={ArrowUp01Icon} strokeWidth={2} />
+    </SelectPrimitive.ScrollUpArrow>
   )
 }
 
 function SelectScrollDownButton({
   className,
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
   return (
-    <SelectPrimitive.ScrollDownButton
+    <SelectPrimitive.ScrollDownArrow
       data-slot='select-scroll-down-button'
       className={cn(
-        'flex cursor-default items-center justify-center py-1',
+        "bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
     >
-      <ChevronDownIcon className='size-4' />
-    </SelectPrimitive.ScrollDownButton>
+      <HugeiconsIcon icon={ArrowDown01Icon} strokeWidth={2} />
+    </SelectPrimitive.ScrollDownArrow>
   )
 }
 
diff --git a/web/default/src/components/ui/separator.tsx b/web/default/src/components/ui/separator.tsx
index f4183245af9..bcab1cf897c 100644
--- a/web/default/src/components/ui/separator.tsx
+++ b/web/default/src/components/ui/separator.tsx
@@ -1,20 +1,17 @@
-import * as React from 'react'
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator'
 import { cn } from '@/lib/utils'
 
 function Separator({
   className,
   orientation = 'horizontal',
-  decorative = true,
   ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+}: SeparatorPrimitive.Props) {
   return (
-    <SeparatorPrimitive.Root
+    <SeparatorPrimitive
       data-slot='separator'
-      decorative={decorative}
       orientation={orientation}
       className={cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
+        'bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
         className
       )}
       {...props}
diff --git a/web/default/src/components/ui/sheet.tsx b/web/default/src/components/ui/sheet.tsx
index 6ad3df121d7..30283ace373 100644
--- a/web/default/src/components/ui/sheet.tsx
+++ b/web/default/src/components/ui/sheet.tsx
@@ -1,39 +1,34 @@
+'use client'
+
 import * as React from 'react'
-import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { XIcon } from 'lucide-react'
+import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'
+import { Cancel01Icon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
 import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
 
-function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
   return <SheetPrimitive.Root data-slot='sheet' {...props} />
 }
 
-function SheetTrigger({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
   return <SheetPrimitive.Trigger data-slot='sheet-trigger' {...props} />
 }
 
-function SheetClose({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
   return <SheetPrimitive.Close data-slot='sheet-close' {...props} />
 }
 
-function SheetPortal({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
   return <SheetPrimitive.Portal data-slot='sheet-portal' {...props} />
 }
 
-function SheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
   return (
-    <SheetPrimitive.Overlay
+    <SheetPrimitive.Backdrop
       data-slot='sheet-overlay'
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',
         className
       )}
       {...props}
@@ -45,35 +40,54 @@ function SheetContent({
   className,
   children,
   side = 'right',
+  showCloseButton = true,
   ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+}: SheetPrimitive.Popup.Props & {
   side?: 'top' | 'right' | 'bottom' | 'left'
+  showCloseButton?: boolean
 }) {
+  // Side-specific classes are emitted via JS conditionals (rather than
+  // `data-[side=*]:` variants) so consumer-provided width overrides such as
+  // `sm:max-w-2xl` can be correctly merged by `tailwind-merge` and the CSS
+  // cascade — the data-attribute variants would otherwise win on specificity
+  // and trap the panel at the default `sm:max-w-sm` width.
   return (
     <SheetPortal>
       <SheetOverlay />
-      <SheetPrimitive.Content
+      <SheetPrimitive.Popup
         data-slot='sheet-content'
+        data-side={side}
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+          'bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0',
           side === 'right' &&
-            'data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm',
+            'inset-y-0 right-0 h-full w-3/4 border-l data-ending-style:translate-x-[2.5rem] data-starting-style:translate-x-[2.5rem] sm:max-w-sm',
           side === 'left' &&
-            'data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm',
+            'inset-y-0 left-0 h-full w-3/4 border-r data-ending-style:translate-x-[-2.5rem] data-starting-style:translate-x-[-2.5rem] sm:max-w-sm',
           side === 'top' &&
-            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+            'inset-x-0 top-0 h-auto border-b data-ending-style:translate-y-[-2.5rem] data-starting-style:translate-y-[-2.5rem]',
           side === 'bottom' &&
-            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+            'inset-x-0 bottom-0 h-auto border-t data-ending-style:translate-y-[2.5rem] data-starting-style:translate-y-[2.5rem]',
           className
         )}
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className='ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none'>
-          <XIcon className='size-4' />
-          <span className='sr-only'>Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot='sheet-close'
+            render={
+              <Button
+                variant='ghost'
+                className='absolute top-3 right-3'
+                size='icon-sm'
+              />
+            }
+          >
+            <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} />
+            <span className='sr-only'>Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
     </SheetPortal>
   )
 }
@@ -82,7 +96,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot='sheet-header'
-      className={cn('flex flex-col gap-1.5 p-4', className)}
+      className={cn('flex flex-col gap-0.5 p-4', className)}
       {...props}
     />
   )
@@ -98,14 +112,11 @@ function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
   )
 }
 
-function SheetTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
   return (
     <SheetPrimitive.Title
       data-slot='sheet-title'
-      className={cn('text-foreground font-semibold', className)}
+      className={cn('text-foreground text-base font-medium', className)}
       {...props}
     />
   )
@@ -114,7 +125,7 @@ function SheetTitle({
 function SheetDescription({
   className,
   ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+}: SheetPrimitive.Description.Props) {
   return (
     <SheetPrimitive.Description
       data-slot='sheet-description'
diff --git a/web/default/src/components/ui/sidebar.tsx b/web/default/src/components/ui/sidebar.tsx
index 20b2be1938e..4c1c5a2d63c 100644
--- a/web/default/src/components/ui/sidebar.tsx
+++ b/web/default/src/components/ui/sidebar.tsx
@@ -1,8 +1,11 @@
+'use client'
+
 import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { VariantProps, cva } from 'class-variance-authority'
-import { PanelLeftIcon } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import { SidebarLeftIcon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 import { useIsMobile } from '@/hooks/use-mobile'
 import { Button } from '@/components/ui/button'
@@ -19,15 +22,14 @@ import { Skeleton } from '@/components/ui/skeleton'
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
 
 const SIDEBAR_COOKIE_NAME = 'sidebar_state'
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = '16rem'
-const SIDEBAR_WIDTH_MOBILE = '18rem'
-const SIDEBAR_WIDTH_ICON = '3rem'
+const SIDEBAR_WIDTH = '13rem'
+const SIDEBAR_WIDTH_MOBILE = '17rem'
+const SIDEBAR_WIDTH_ICON = '2.75rem'
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
 
 type SidebarContextProps = {
@@ -126,25 +128,23 @@ function SidebarProvider({
 
   return (
     <SidebarContext.Provider value={contextValue}>
-      <TooltipProvider delayDuration={0}>
-        <div
-          data-slot='sidebar-wrapper'
-          style={
-            {
-              '--sidebar-width': SIDEBAR_WIDTH,
-              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-              ...style,
-            } as React.CSSProperties
-          }
-          className={cn(
-            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </div>
-      </TooltipProvider>
+      <div
+        data-slot='sidebar-wrapper'
+        style={
+          {
+            '--sidebar-width': SIDEBAR_WIDTH,
+            '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
     </SidebarContext.Provider>
   )
 }
@@ -155,13 +155,13 @@ function Sidebar({
   collapsible = 'offcanvas',
   className,
   children,
+  dir,
   ...props
 }: React.ComponentProps<'div'> & {
   side?: 'left' | 'right'
   variant?: 'sidebar' | 'floating' | 'inset'
   collapsible?: 'offcanvas' | 'icon' | 'none'
 }) {
-  const { t } = useTranslation()
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 
   if (collapsible === 'none') {
@@ -183,6 +183,7 @@ function Sidebar({
     return (
       <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
         <SheetContent
+          dir={dir}
           data-sidebar='sidebar'
           data-slot='sidebar'
           data-mobile='true'
@@ -195,10 +196,8 @@ function Sidebar({
           side={side}
         >
           <SheetHeader className='sr-only'>
-            <SheetTitle>{t('Sidebar')}</SheetTitle>
-            <SheetDescription>
-              {t('Displays the mobile sidebar.')}
-            </SheetDescription>
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
           </SheetHeader>
           <div className='flex h-full w-full flex-col'>{children}</div>
         </SheetContent>
@@ -219,7 +218,7 @@ function Sidebar({
       <div
         data-slot='sidebar-gap'
         className={cn(
-          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-250 ease-[cubic-bezier(0.33,1,0.68,1)]',
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
           'group-data-[collapsible=offcanvas]:w-0',
           'group-data-[side=right]:rotate-180',
           variant === 'floating' || variant === 'inset'
@@ -229,15 +228,13 @@ function Sidebar({
       />
       <div
         data-slot='sidebar-container'
+        data-side={side}
         className={cn(
-          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[inset-inline,width] duration-250 ease-[cubic-bezier(0.33,1,0.68,1)] md:flex',
-          side === 'left'
-            ? 'start-0 group-data-[collapsible=offcanvas]:-start-[calc(var(--sidebar-width))]'
-            : 'end-0 group-data-[collapsible=offcanvas]:-end-[calc(var(--sidebar-width))]',
+          'fixed top-[var(--app-header-height,0px)] bottom-0 z-10 hidden h-[calc(100svh-var(--app-header-height,0px))] w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',
           // Adjust the padding for floating and inset variants.
           variant === 'floating' || variant === 'inset'
             ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s',
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
           className
         )}
         {...props}
@@ -245,7 +242,7 @@ function Sidebar({
         <div
           data-sidebar='sidebar'
           data-slot='sidebar-inner'
-          className='bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm'
+          className='bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1'
         >
           {children}
         </div>
@@ -266,15 +263,15 @@ function SidebarTrigger({
       data-sidebar='trigger'
       data-slot='sidebar-trigger'
       variant='ghost'
-      size='icon'
-      className={cn('size-7', className)}
+      size='icon-sm'
+      className={cn(className)}
       onClick={(event) => {
         onClick?.(event)
         toggleSidebar()
       }}
       {...props}
     >
-      <PanelLeftIcon />
+      <HugeiconsIcon icon={SidebarLeftIcon} strokeWidth={2} />
       <span className='sr-only'>Toggle Sidebar</span>
     </Button>
   )
@@ -292,17 +289,12 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
       onClick={toggleSidebar}
       title='Toggle Sidebar'
       className={cn(
-        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex',
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
         'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
         '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:start-full',
-        '[[data-side=left][data-collapsible=offcanvas]_&]:-end-2',
-        '[[data-side=right][data-collapsible=offcanvas]_&]:-start-2',
-
-        // RTL support
-        'rtl:translate-x-1/2',
-        'rtl:in-data-[side=left]:cursor-e-resize rtl:in-data-[side=right]:cursor-w-resize',
-        'rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
         className
       )}
       {...props}
@@ -310,13 +302,12 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
   )
 }
 
-function SidebarInset({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
   return (
-    <div
+    <main
       data-slot='sidebar-inset'
       className={cn(
-        'bg-background relative flex w-full flex-1 flex-col',
-        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2',
+        'bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
         className
       )}
       {...props}
@@ -380,7 +371,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot='sidebar-content'
       data-sidebar='content'
       className={cn(
-        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
         className
       )}
       {...props}
@@ -401,46 +392,50 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
 
 function SidebarGroupLabel({
   className,
-  asChild = false,
+  render,
   ...props
-}: React.ComponentProps<'div'> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'div'
-
-  return (
-    <Comp
-      data-slot='sidebar-group-label'
-      data-sidebar='group-label'
-      className={cn(
-        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-250 ease-[cubic-bezier(0.33,1,0.68,1)] focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-        className
-      )}
-      {...props}
-    />
-  )
+}: useRender.ComponentProps<'div'> & React.ComponentProps<'div'>) {
+  return useRender({
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
+      {
+        className: cn(
+          'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: 'sidebar-group-label',
+      sidebar: 'group-label',
+    },
+  })
 }
 
 function SidebarGroupAction({
   className,
-  asChild = false,
+  render,
   ...props
-}: React.ComponentProps<'button'> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'button'
-
-  return (
-    <Comp
-      data-slot='sidebar-group-action'
-      data-sidebar='group-action'
-      className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        // Increases the hit area of the button on mobile.
-        'after:absolute after:-inset-2 md:after:hidden',
-        'group-data-[collapsible=icon]:hidden',
-        className
-      )}
-      {...props}
-    />
-  )
+}: useRender.ComponentProps<'button'> & React.ComponentProps<'button'>) {
+  return useRender({
+    defaultTagName: 'button',
+    props: mergeProps<'button'>(
+      {
+        className: cn(
+          'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: 'sidebar-group-action',
+      sidebar: 'group-action',
+    },
+  })
 }
 
 function SidebarGroupContent({
@@ -462,7 +457,7 @@ function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
     <ul
       data-slot='sidebar-menu'
       data-sidebar='menu'
-      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      className={cn('flex w-full min-w-0 flex-col gap-0', className)}
       {...props}
     />
   )
@@ -480,13 +475,13 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding,background-color,color,transform] duration-150 ease-out hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
   {
     variants: {
       variant: {
         default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
         outline:
-          'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
       },
       size: {
         default: 'h-8 text-sm',
@@ -502,34 +497,38 @@ const sidebarMenuButtonVariants = cva(
 )
 
 function SidebarMenuButton({
-  asChild = false,
+  render,
   isActive = false,
   variant = 'default',
   size = 'default',
   tooltip,
   className,
   ...props
-}: React.ComponentProps<'button'> & {
-  asChild?: boolean
-  isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
-} & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : 'button'
+}: useRender.ComponentProps<'button'> &
+  React.ComponentProps<'button'> & {
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>) {
   const { isMobile, state } = useSidebar()
-
-  const button = (
-    <Comp
-      data-slot='sidebar-menu-button'
-      data-sidebar='menu-button'
-      data-size={size}
-      data-active={isActive}
-      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-      {...props}
-    />
-  )
+  const comp = useRender({
+    defaultTagName: 'button',
+    props: mergeProps<'button'>(
+      {
+        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      },
+      props
+    ),
+    render: !tooltip ? render : <TooltipTrigger render={render} />,
+    state: {
+      slot: 'sidebar-menu-button',
+      sidebar: 'menu-button',
+      size,
+      active: isActive,
+    },
+  })
 
   if (!tooltip) {
-    return button
+    return comp
   }
 
   if (typeof tooltip === 'string') {
@@ -540,7 +539,7 @@ function SidebarMenuButton({
 
   return (
     <Tooltip>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      {comp}
       <TooltipContent
         side='right'
         align='center'
@@ -553,34 +552,32 @@ function SidebarMenuButton({
 
 function SidebarMenuAction({
   className,
-  asChild = false,
+  render,
   showOnHover = false,
   ...props
-}: React.ComponentProps<'button'> & {
-  asChild?: boolean
-  showOnHover?: boolean
-}) {
-  const Comp = asChild ? Slot : 'button'
-
-  return (
-    <Comp
-      data-slot='sidebar-menu-action'
-      data-sidebar='menu-action'
-      className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        // Increases the hit area of the button on mobile.
-        'after:absolute after:-inset-2 md:after:hidden',
-        'peer-data-[size=sm]/menu-button:top-1',
-        'peer-data-[size=default]/menu-button:top-1.5',
-        'peer-data-[size=lg]/menu-button:top-2.5',
-        'group-data-[collapsible=icon]:hidden',
-        showOnHover &&
-          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
-        className
-      )}
-      {...props}
-    />
-  )
+}: useRender.ComponentProps<'button'> &
+  React.ComponentProps<'button'> & {
+    showOnHover?: boolean
+  }) {
+  return useRender({
+    defaultTagName: 'button',
+    props: mergeProps<'button'>(
+      {
+        className: cn(
+          'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
+          showOnHover &&
+            'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: 'sidebar-menu-action',
+      sidebar: 'menu-action',
+    },
+  })
 }
 
 function SidebarMenuBadge({
@@ -592,12 +589,7 @@ function SidebarMenuBadge({
       data-slot='sidebar-menu-badge'
       data-sidebar='menu-badge'
       className={cn(
-        'text-sidebar-foreground pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
-        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-        'peer-data-[size=sm]/menu-button:top-1',
-        'peer-data-[size=default]/menu-button:top-1.5',
-        'peer-data-[size=lg]/menu-button:top-2.5',
-        'group-data-[collapsible=icon]:hidden',
+        'text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1',
         className
       )}
       {...props}
@@ -613,9 +605,9 @@ function SidebarMenuSkeleton({
   showIcon?: boolean
 }) {
   // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
+  const [width] = React.useState(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
+  })
 
   return (
     <div
@@ -649,8 +641,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
       data-slot='sidebar-menu-sub'
       data-sidebar='menu-sub'
       className={cn(
-        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s px-2.5 py-0.5',
-        'group-data-[collapsible=icon]:hidden',
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',
         className
       )}
       {...props}
@@ -673,35 +664,35 @@ function SidebarMenuSubItem({
 }
 
 function SidebarMenuSubButton({
-  asChild = false,
+  render,
   size = 'md',
   isActive = false,
   className,
   ...props
-}: React.ComponentProps<'a'> & {
-  asChild?: boolean
-  size?: 'sm' | 'md'
-  isActive?: boolean
-}) {
-  const Comp = asChild ? Slot : 'a'
-
-  return (
-    <Comp
-      data-slot='sidebar-menu-sub-button'
-      data-sidebar='menu-sub-button'
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-inherit',
-        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-        size === 'sm' && 'text-xs',
-        size === 'md' && 'text-sm',
-        'group-data-[collapsible=icon]:hidden',
-        className
-      )}
-      {...props}
-    />
-  )
+}: useRender.ComponentProps<'a'> &
+  React.ComponentProps<'a'> & {
+    size?: 'sm' | 'md'
+    isActive?: boolean
+  }) {
+  return useRender({
+    defaultTagName: 'a',
+    props: mergeProps<'a'>(
+      {
+        className: cn(
+          'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: 'sidebar-menu-sub-button',
+      sidebar: 'menu-sub-button',
+      size,
+      active: isActive,
+    },
+  })
 }
 
 export {
diff --git a/web/default/src/components/ui/skeleton.tsx b/web/default/src/components/ui/skeleton.tsx
index 04dc1a0c564..9c58bd36cbf 100644
--- a/web/default/src/components/ui/skeleton.tsx
+++ b/web/default/src/components/ui/skeleton.tsx
@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot='skeleton'
-      className={cn('skeleton-shimmer rounded-md', className)}
+      className={cn('bg-muted animate-pulse rounded-md', className)}
       {...props}
     />
   )
diff --git a/web/default/src/components/ui/slider.tsx b/web/default/src/components/ui/slider.tsx
new file mode 100644
index 00000000000..1884bdbc823
--- /dev/null
+++ b/web/default/src/components/ui/slider.tsx
@@ -0,0 +1,51 @@
+import { Slider as SliderPrimitive } from '@base-ui/react/slider'
+import { cn } from '@/lib/utils'
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderPrimitive.Root.Props) {
+  const _values = Array.isArray(value)
+    ? value
+    : Array.isArray(defaultValue)
+      ? defaultValue
+      : [min, max]
+
+  return (
+    <SliderPrimitive.Root
+      className={cn('data-horizontal:w-full data-vertical:h-full', className)}
+      data-slot='slider'
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment='edge'
+      {...props}
+    >
+      <SliderPrimitive.Control className='relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col'>
+        <SliderPrimitive.Track
+          data-slot='slider-track'
+          className='bg-muted relative grow overflow-hidden rounded-full select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1'
+        >
+          <SliderPrimitive.Indicator
+            data-slot='slider-range'
+            className='bg-primary select-none data-horizontal:h-full data-vertical:w-full'
+          />
+        </SliderPrimitive.Track>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <SliderPrimitive.Thumb
+            data-slot='slider-thumb'
+            key={index}
+            className='border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50'
+          />
+        ))}
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/web/default/src/components/ui/sonner.tsx b/web/default/src/components/ui/sonner.tsx
index d317c41ba9e..c49ec55fc7b 100644
--- a/web/default/src/components/ui/sonner.tsx
+++ b/web/default/src/components/ui/sonner.tsx
@@ -1,21 +1,76 @@
-import { Toaster as Sonner, ToasterProps } from 'sonner'
-import { useTheme } from '@/context/theme-provider'
+'use client'
 
-export function Toaster({ ...props }: ToasterProps) {
+import {
+  CheckmarkCircle02Icon,
+  InformationCircleIcon,
+  Alert02Icon,
+  MultiplicationSignCircleIcon,
+  Loading03Icon,
+} from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner, type ToasterProps } from 'sonner'
+
+const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = 'system' } = useTheme()
 
   return (
     <Sonner
       theme={theme as ToasterProps['theme']}
-      className='toaster group [&_div[data-content]]:w-full'
+      className='toaster group'
+      icons={{
+        success: (
+          <HugeiconsIcon
+            icon={CheckmarkCircle02Icon}
+            strokeWidth={2}
+            className='size-4'
+          />
+        ),
+        info: (
+          <HugeiconsIcon
+            icon={InformationCircleIcon}
+            strokeWidth={2}
+            className='size-4'
+          />
+        ),
+        warning: (
+          <HugeiconsIcon
+            icon={Alert02Icon}
+            strokeWidth={2}
+            className='size-4'
+          />
+        ),
+        error: (
+          <HugeiconsIcon
+            icon={MultiplicationSignCircleIcon}
+            strokeWidth={2}
+            className='size-4'
+          />
+        ),
+        loading: (
+          <HugeiconsIcon
+            icon={Loading03Icon}
+            strokeWidth={2}
+            className='size-4 animate-spin'
+          />
+        ),
+      }}
       style={
         {
           '--normal-bg': 'var(--popover)',
           '--normal-text': 'var(--popover-foreground)',
           '--normal-border': 'var(--border)',
+          '--border-radius': 'var(--radius)',
         } as React.CSSProperties
       }
+      toastOptions={{
+        classNames: {
+          toast: 'cn-toast',
+        },
+      }}
       {...props}
     />
   )
 }
+
+export { Toaster }
diff --git a/web/default/src/components/ui/spinner.tsx b/web/default/src/components/ui/spinner.tsx
new file mode 100644
index 00000000000..24a1f9e2a74
--- /dev/null
+++ b/web/default/src/components/ui/spinner.tsx
@@ -0,0 +1,25 @@
+import { Loading03Icon } from '@hugeicons/core-free-icons'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { cn } from '@/lib/utils'
+
+type SpinnerProps = Omit<
+  React.ComponentProps<typeof HugeiconsIcon>,
+  'icon' | 'strokeWidth'
+> & {
+  strokeWidth?: number
+}
+
+function Spinner({ className, strokeWidth = 2, ...props }: SpinnerProps) {
+  return (
+    <HugeiconsIcon
+      icon={Loading03Icon}
+      strokeWidth={strokeWidth}
+      role='status'
+      aria-label='Loading'
+      className={cn('size-4 animate-spin', className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }
diff --git a/web/default/src/components/ui/switch.tsx b/web/default/src/components/ui/switch.tsx
index cddf07f2ee0..2f09d9cbccd 100644
--- a/web/default/src/components/ui/switch.tsx
+++ b/web/default/src/components/ui/switch.tsx
@@ -1,25 +1,26 @@
-import * as React from 'react'
-import * as SwitchPrimitive from '@radix-ui/react-switch'
+import { Switch as SwitchPrimitive } from '@base-ui/react/switch'
 import { cn } from '@/lib/utils'
 
 function Switch({
   className,
+  size = 'default',
   ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+}: SwitchPrimitive.Root.Props & {
+  size?: 'sm' | 'default'
+}) {
   return (
     <SwitchPrimitive.Root
       data-slot='switch'
+      data-size={size}
       className={cn(
-        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        'peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]',
         className
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot='switch-thumb'
-        className={cn(
-          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 rtl:data-[state=checked]:-translate-x-[calc(100%-2px)]'
-        )}
+        className='bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0'
       />
     </SwitchPrimitive.Root>
   )
diff --git a/web/default/src/components/ui/table.tsx b/web/default/src/components/ui/table.tsx
index f8a28bffdc6..9a5e8508660 100644
--- a/web/default/src/components/ui/table.tsx
+++ b/web/default/src/components/ui/table.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react'
 import { cn } from '@/lib/utils'
 
@@ -5,7 +7,7 @@ function Table({ className, ...props }: React.ComponentProps<'table'>) {
   return (
     <div
       data-slot='table-container'
-      className='relative w-full overflow-x-auto overflow-y-clip'
+      className='relative w-full overflow-x-auto'
     >
       <table
         data-slot='table'
@@ -54,7 +56,7 @@ function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
     <tr
       data-slot='table-row'
       className={cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        'hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
         className
       )}
       {...props}
@@ -67,7 +69,7 @@ function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
     <th
       data-slot='table-head'
       className={cn(
-        'text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]',
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0',
         className
       )}
       {...props}
@@ -80,7 +82,7 @@ function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
     <td
       data-slot='table-cell'
       className={cn(
-        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]',
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0',
         className
       )}
       {...props}
diff --git a/web/default/src/components/ui/tabs.tsx b/web/default/src/components/ui/tabs.tsx
index ba769fd0215..ee27a7201c4 100644
--- a/web/default/src/components/ui/tabs.tsx
+++ b/web/default/src/components/ui/tabs.tsx
@@ -1,45 +1,64 @@
-import * as React from 'react'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 function Tabs({
   className,
+  orientation = 'horizontal',
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+}: TabsPrimitive.Root.Props) {
   return (
     <TabsPrimitive.Root
       data-slot='tabs'
-      className={cn('flex flex-col gap-2', className)}
+      data-orientation={orientation}
+      className={cn(
+        'group/tabs flex gap-2 data-horizontal:flex-col',
+        className
+      )}
       {...props}
     />
   )
 }
 
+const tabsListVariants = cva(
+  'group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted',
+        line: 'gap-1 bg-transparent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
 function TabsList({
   className,
+  variant = 'default',
   ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
   return (
     <TabsPrimitive.List
       data-slot='tabs-list'
-      className={cn(
-        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
-        className
-      )}
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
       {...props}
     />
   )
 }
 
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
   return (
-    <TabsPrimitive.Trigger
+    <TabsPrimitive.Tab
       data-slot='tabs-trigger'
       className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+        'data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',
+        'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
         className
       )}
       {...props}
@@ -47,17 +66,14 @@ function TabsTrigger({
   )
 }
 
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
   return (
-    <TabsPrimitive.Content
+    <TabsPrimitive.Panel
       data-slot='tabs-content'
-      className={cn('flex-1 outline-none', className)}
+      className={cn('flex-1 text-sm outline-none', className)}
       {...props}
     />
   )
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/web/default/src/components/ui/textarea.tsx b/web/default/src/components/ui/textarea.tsx
index eef296a823c..abebce0b707 100644
--- a/web/default/src/components/ui/textarea.tsx
+++ b/web/default/src/components/ui/textarea.tsx
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
     <textarea
       data-slot='textarea'
       className={cn(
-        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
         className
       )}
       {...props}
diff --git a/web/default/src/components/ui/titled-card.tsx b/web/default/src/components/ui/titled-card.tsx
index f7d1ecf78e0..d9d24d37de7 100644
--- a/web/default/src/components/ui/titled-card.tsx
+++ b/web/default/src/components/ui/titled-card.tsx
@@ -54,23 +54,25 @@ export function TitledCard({
             )}
             <div className='min-w-0'>
               <CardTitle
-                className={cn('text-lg tracking-tight sm:text-xl', titleClassName)}
+                className={cn(
+                  'text-lg tracking-tight sm:text-xl',
+                  titleClassName
+                )}
               >
                 {title}
               </CardTitle>
               {description != null && (
                 <CardDescription
-                  className={cn(
-                    'text-xs sm:text-sm',
-                    descriptionClassName
-                  )}
+                  className={cn('text-xs sm:text-sm', descriptionClassName)}
                 >
                   {description}
                 </CardDescription>
               )}
             </div>
           </div>
-          {action != null && <div className='w-full shrink-0 sm:w-auto'>{action}</div>}
+          {action != null && (
+            <div className='w-full shrink-0 sm:w-auto'>{action}</div>
+          )}
         </div>
       </CardHeader>
       <CardContent className={cn('p-3 sm:p-5', contentClassName)}>
diff --git a/web/default/src/components/ui/toggle-group.tsx b/web/default/src/components/ui/toggle-group.tsx
new file mode 100644
index 00000000000..a400c035bb0
--- /dev/null
+++ b/web/default/src/components/ui/toggle-group.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react'
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group'
+import { type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { toggleVariants } from '@/components/ui/toggle'
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: 'horizontal' | 'vertical'
+  }
+>({
+  size: 'default',
+  variant: 'default',
+  spacing: 0,
+  orientation: 'horizontal',
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  orientation = 'horizontal',
+  children,
+  ...props
+}: ToggleGroupPrimitive.Props &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+    orientation?: 'horizontal' | 'vertical'
+  }) {
+  return (
+    <ToggleGroupPrimitive
+      data-slot='toggle-group'
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ '--gap': spacing } as React.CSSProperties}
+      className={cn(
+        'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]',
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider
+        value={{ variant, size, spacing, orientation }}
+      >
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <TogglePrimitive
+      data-slot='toggle-group-item'
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        'shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </TogglePrimitive>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/web/default/src/components/ui/toggle.tsx b/web/default/src/components/ui/toggle.tsx
new file mode 100644
index 00000000000..28cebdc350b
--- /dev/null
+++ b/web/default/src/components/ui/toggle.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent hover:bg-muted',
+      },
+      size: {
+        default:
+          'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant = 'default',
+  size = 'default',
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot='toggle'
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }
diff --git a/web/default/src/components/ui/tooltip.tsx b/web/default/src/components/ui/tooltip.tsx
index 3f104f87d15..a15e8a2f0cb 100644
--- a/web/default/src/components/ui/tooltip.tsx
+++ b/web/default/src/components/ui/tooltip.tsx
@@ -1,56 +1,61 @@
-import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
 import { cn } from '@/lib/utils'
 
 function TooltipProvider({
-  delayDuration = 0,
+  delay = 0,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+}: TooltipPrimitive.Provider.Props) {
   return (
     <TooltipPrimitive.Provider
       data-slot='tooltip-provider'
-      delayDuration={delayDuration}
+      delay={delay}
       {...props}
     />
   )
 }
 
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot='tooltip' {...props} />
-    </TooltipProvider>
-  )
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot='tooltip' {...props} />
 }
 
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
   return <TooltipPrimitive.Trigger data-slot='tooltip-trigger' {...props} />
 }
 
 function TooltipContent({
   className,
-  sideOffset = 0,
+  side = 'top',
+  sideOffset = 4,
+  align = 'center',
+  alignOffset = 0,
   children,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    'align' | 'alignOffset' | 'side' | 'sideOffset'
+  >) {
   return (
     <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot='tooltip-content'
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
         sideOffset={sideOffset}
-        className={cn(
-          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
-          className
-        )}
-        {...props}
+        className='isolate z-50'
       >
-        {children}
-        <TooltipPrimitive.Arrow className='bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]' />
-      </TooltipPrimitive.Content>
+        <TooltipPrimitive.Popup
+          data-slot='tooltip-content'
+          className={cn(
+            'bg-foreground text-background data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm',
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className='bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5' />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
   )
 }
diff --git a/web/default/src/context/direction-provider.tsx b/web/default/src/context/direction-provider.tsx
index 4a1868cc16c..cfc024fa52d 100644
--- a/web/default/src/context/direction-provider.tsx
+++ b/web/default/src/context/direction-provider.tsx
@@ -1,5 +1,5 @@
 import { createContext, useContext, useEffect, useState } from 'react'
-import { DirectionProvider as RdxDirProvider } from '@radix-ui/react-direction'
+import { DirectionProvider as BaseDirectionProvider } from '@base-ui/react/direction-provider'
 import { getCookie, setCookie, removeCookie } from '@/lib/cookies'
 
 export type Direction = 'ltr' | 'rtl'
@@ -46,7 +46,7 @@ export function DirectionProvider({ children }: { children: React.ReactNode }) {
         resetDir,
       }}
     >
-      <RdxDirProvider dir={dir}>{children}</RdxDirProvider>
+      <BaseDirectionProvider direction={dir}>{children}</BaseDirectionProvider>
     </DirectionContext>
   )
 }
diff --git a/web/default/src/context/theme-customization-provider.tsx b/web/default/src/context/theme-customization-provider.tsx
new file mode 100644
index 00000000000..6b14c4fde3a
--- /dev/null
+++ b/web/default/src/context/theme-customization-provider.tsx
@@ -0,0 +1,208 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { getCookie, removeCookie, setCookie } from '@/lib/cookies'
+import {
+  CONTENT_LAYOUT_VALUES,
+  type ContentLayout,
+  DEFAULT_THEME_CUSTOMIZATION,
+  THEME_COOKIE_KEYS,
+  THEME_PRESET_VALUES,
+  THEME_RADIUS_VALUES,
+  THEME_SCALE_VALUES,
+  type ThemeCustomization,
+  type ThemePreset,
+  type ThemeRadius,
+  type ThemeScale,
+} from '@/lib/theme-customization'
+
+const COOKIE_MAX_AGE = 60 * 60 * 24 * 365 // 1 year
+
+function readCookie<T extends string>(
+  name: string,
+  allowed: ReadonlySet<T>,
+  fallback: T
+): T {
+  const value = getCookie(name)
+  return value && allowed.has(value as T) ? (value as T) : fallback
+}
+
+function applyAttribute(name: string, value: string | null) {
+  if (typeof document === 'undefined') return
+  const body = document.body
+  if (!body) return
+  if (value === null) {
+    body.removeAttribute(name)
+  } else {
+    body.setAttribute(name, value)
+  }
+}
+
+type ThemeCustomizationContextType = {
+  defaults: ThemeCustomization
+  customization: ThemeCustomization
+  setPreset: (preset: ThemePreset) => void
+  setRadius: (radius: ThemeRadius) => void
+  setScale: (scale: ThemeScale) => void
+  setContentLayout: (contentLayout: ContentLayout) => void
+  resetCustomization: () => void
+}
+
+// Fallback used when a consumer renders outside the provider (e.g. an error
+// route mounted before providers are ready, or stale HMR boundaries). Keeping
+// it permissive prevents the whole tree from crashing — the UI just behaves
+// like the defaults until the real provider re-mounts.
+const FALLBACK_CONTEXT: ThemeCustomizationContextType = {
+  defaults: DEFAULT_THEME_CUSTOMIZATION,
+  customization: DEFAULT_THEME_CUSTOMIZATION,
+  setPreset: () => {},
+  setRadius: () => {},
+  setScale: () => {},
+  setContentLayout: () => {},
+  resetCustomization: () => {},
+}
+
+const ThemeCustomizationContext =
+  createContext<ThemeCustomizationContextType>(FALLBACK_CONTEXT)
+
+export function ThemeCustomizationProvider(props: {
+  children: React.ReactNode
+}) {
+  const [preset, _setPreset] = useState<ThemePreset>(() =>
+    readCookie<ThemePreset>(
+      THEME_COOKIE_KEYS.preset,
+      THEME_PRESET_VALUES,
+      DEFAULT_THEME_CUSTOMIZATION.preset
+    )
+  )
+  const [radius, _setRadius] = useState<ThemeRadius>(() =>
+    readCookie<ThemeRadius>(
+      THEME_COOKIE_KEYS.radius,
+      THEME_RADIUS_VALUES,
+      DEFAULT_THEME_CUSTOMIZATION.radius
+    )
+  )
+  const [scale, _setScale] = useState<ThemeScale>(() =>
+    readCookie<ThemeScale>(
+      THEME_COOKIE_KEYS.scale,
+      THEME_SCALE_VALUES,
+      DEFAULT_THEME_CUSTOMIZATION.scale
+    )
+  )
+  const [contentLayout, _setContentLayout] = useState<ContentLayout>(() =>
+    readCookie<ContentLayout>(
+      THEME_COOKIE_KEYS.contentLayout,
+      CONTENT_LAYOUT_VALUES,
+      DEFAULT_THEME_CUSTOMIZATION.contentLayout
+    )
+  )
+
+  // Mirror state to the <body> via data-* attributes so theme-presets.css can
+  // override CSS variables at the right cascade layer.
+  useEffect(() => {
+    applyAttribute(
+      'data-theme-preset',
+      preset === DEFAULT_THEME_CUSTOMIZATION.preset ? null : preset
+    )
+  }, [preset])
+
+  useEffect(() => {
+    applyAttribute(
+      'data-theme-radius',
+      radius === DEFAULT_THEME_CUSTOMIZATION.radius ? null : radius
+    )
+  }, [radius])
+
+  useEffect(() => {
+    applyAttribute(
+      'data-theme-scale',
+      scale === DEFAULT_THEME_CUSTOMIZATION.scale ? null : scale
+    )
+  }, [scale])
+
+  useEffect(() => {
+    applyAttribute('data-theme-content-layout', contentLayout)
+  }, [contentLayout])
+
+  const setPreset = useCallback((value: ThemePreset) => {
+    _setPreset(value)
+    if (value === DEFAULT_THEME_CUSTOMIZATION.preset) {
+      removeCookie(THEME_COOKIE_KEYS.preset)
+    } else {
+      setCookie(THEME_COOKIE_KEYS.preset, value, COOKIE_MAX_AGE)
+    }
+  }, [])
+
+  const setRadius = useCallback((value: ThemeRadius) => {
+    _setRadius(value)
+    if (value === DEFAULT_THEME_CUSTOMIZATION.radius) {
+      removeCookie(THEME_COOKIE_KEYS.radius)
+    } else {
+      setCookie(THEME_COOKIE_KEYS.radius, value, COOKIE_MAX_AGE)
+    }
+  }, [])
+
+  const setScale = useCallback((value: ThemeScale) => {
+    _setScale(value)
+    if (value === DEFAULT_THEME_CUSTOMIZATION.scale) {
+      removeCookie(THEME_COOKIE_KEYS.scale)
+    } else {
+      setCookie(THEME_COOKIE_KEYS.scale, value, COOKIE_MAX_AGE)
+    }
+  }, [])
+
+  const setContentLayout = useCallback((value: ContentLayout) => {
+    _setContentLayout(value)
+    if (value === DEFAULT_THEME_CUSTOMIZATION.contentLayout) {
+      removeCookie(THEME_COOKIE_KEYS.contentLayout)
+    } else {
+      setCookie(THEME_COOKIE_KEYS.contentLayout, value, COOKIE_MAX_AGE)
+    }
+  }, [])
+
+  const resetCustomization = useCallback(() => {
+    setPreset(DEFAULT_THEME_CUSTOMIZATION.preset)
+    setRadius(DEFAULT_THEME_CUSTOMIZATION.radius)
+    setScale(DEFAULT_THEME_CUSTOMIZATION.scale)
+    setContentLayout(DEFAULT_THEME_CUSTOMIZATION.contentLayout)
+  }, [setPreset, setRadius, setScale, setContentLayout])
+
+  const value = useMemo<ThemeCustomizationContextType>(
+    () => ({
+      defaults: DEFAULT_THEME_CUSTOMIZATION,
+      customization: { preset, radius, scale, contentLayout },
+      setPreset,
+      setRadius,
+      setScale,
+      setContentLayout,
+      resetCustomization,
+    }),
+    [
+      preset,
+      radius,
+      scale,
+      contentLayout,
+      setPreset,
+      setRadius,
+      setScale,
+      setContentLayout,
+      resetCustomization,
+    ]
+  )
+
+  return (
+    <ThemeCustomizationContext.Provider value={value}>
+      {props.children}
+    </ThemeCustomizationContext.Provider>
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export function useThemeCustomization() {
+  return useContext(ThemeCustomizationContext)
+}
diff --git a/web/default/src/features/auth/components/legal-consent.tsx b/web/default/src/features/auth/components/legal-consent.tsx
index 48e6bff3a3d..3e8e5c0414a 100644
--- a/web/default/src/features/auth/components/legal-consent.tsx
+++ b/web/default/src/features/auth/components/legal-consent.tsx
@@ -25,7 +25,7 @@ export function LegalConsent({
     return null
   }
 
-  const handleChange = (value: boolean | 'indeterminate') => {
+  const handleChange = (value: boolean) => {
     onCheckedChange(value === true)
   }
 
diff --git a/web/default/src/features/auth/sign-in/components/user-auth-form.tsx b/web/default/src/features/auth/sign-in/components/user-auth-form.tsx
index 39d45541a26..4fbb9d74597 100644
--- a/web/default/src/features/auth/sign-in/components/user-auth-form.tsx
+++ b/web/default/src/features/auth/sign-in/components/user-auth-form.tsx
@@ -305,6 +305,7 @@ export function UserAuthForm({
 
         {/* Submit Button */}
         <Button
+          type='submit'
           className='mt-2 w-full justify-center gap-2'
           disabled={isLoading || (requiresLegalConsent && !agreedToLegal)}
         >
diff --git a/web/default/src/features/auth/sign-up/components/sign-up-form.tsx b/web/default/src/features/auth/sign-up/components/sign-up-form.tsx
index d71c80e7f99..2bc1cabb262 100644
--- a/web/default/src/features/auth/sign-up/components/sign-up-form.tsx
+++ b/web/default/src/features/auth/sign-up/components/sign-up-form.tsx
@@ -321,6 +321,7 @@ export function SignUpForm({
 
         {/* Submit Button */}
         <Button
+          type='submit'
           className='mt-2 w-full justify-center gap-2'
           disabled={isLoading || (requiresLegalConsent && !agreedToLegal)}
         >
diff --git a/web/default/src/features/channels/components/channels-columns.tsx b/web/default/src/features/channels/components/channels-columns.tsx
index fb89a0fce5d..47f7d6e4d36 100644
--- a/web/default/src/features/channels/components/channels-columns.tsx
+++ b/web/default/src/features/channels/components/channels-columns.tsx
@@ -351,10 +351,10 @@ function BalanceCell({ channel }: { channel: Channel }) {
           aria-hidden='true'
         />
         <Tooltip>
-          <TooltipTrigger asChild>
-            <span className='text-muted-foreground cursor-help'>
-              {usedDisplay}
-            </span>
+          <TooltipTrigger
+            render={<span className='text-muted-foreground cursor-help' />}
+          >
+            {usedDisplay}
           </TooltipTrigger>
           <TooltipContent>
             <p>
@@ -364,22 +364,24 @@ function BalanceCell({ channel }: { channel: Channel }) {
         </Tooltip>
         <span className='text-muted-foreground/30'>·</span>
         <Tooltip>
-          <TooltipTrigger asChild>
-            <span
-              className={cn(
-                'cursor-pointer transition-opacity hover:opacity-70',
-                channel.type === 57
-                  ? 'text-primary'
-                  : textColorMap[isUpdating ? 'neutral' : variant]
-              )}
-              onClick={handleClickUpdate}
-            >
-              {isUpdating
-                ? 'Updating...'
-                : channel.type === 57
-                  ? t('Account Info')
-                  : remainingDisplay}
-            </span>
+          <TooltipTrigger
+            render={
+              <span
+                className={cn(
+                  'cursor-pointer transition-opacity hover:opacity-70',
+                  channel.type === 57
+                    ? 'text-primary'
+                    : textColorMap[isUpdating ? 'neutral' : variant]
+                )}
+                onClick={handleClickUpdate}
+              />
+            }
+          >
+            {isUpdating
+              ? 'Updating...'
+              : channel.type === 57
+                ? t('Account Info')
+                : remainingDisplay}
           </TooltipTrigger>
           <TooltipContent>
             <p>
@@ -434,10 +436,8 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
       id: 'select',
       header: ({ table }) => (
         <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && 'indeterminate')
-          }
+          checked={table.getIsAllPageRowsSelected()}
+          indeterminate={table.getIsSomePageRowsSelected()}
           onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
           aria-label='Select all'
         />
@@ -540,11 +540,13 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
               <div className='flex items-center gap-1.5'>
                 <span className='font-medium'>{truncateText(name, 30)}</span>
                 {isPassThrough && (
-                  <TooltipProvider delayDuration={100}>
+                  <TooltipProvider delay={100}>
                     <Tooltip>
-                      <TooltipTrigger asChild>
-                        <AlertTriangle className='h-3.5 w-3.5 flex-shrink-0 text-amber-500' />
-                      </TooltipTrigger>
+                      <TooltipTrigger
+                        render={
+                          <AlertTriangle className='h-3.5 w-3.5 flex-shrink-0 text-amber-500' />
+                        }
+                      ></TooltipTrigger>
                       <TooltipContent side='top'>
                         {t(
                           'Request body pass-through is enabled. The request body will be sent directly to the upstream without any conversion.'
@@ -564,12 +566,14 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
                 <UpstreamUpdateTags channel={channel} />
               </div>
               {channel.remark && (
-                <TooltipProvider delayDuration={200}>
+                <TooltipProvider delay={200}>
                   <Tooltip>
-                    <TooltipTrigger asChild>
-                      <span className='text-muted-foreground text-xs'>
-                        {truncateText(channel.remark, 40)}
-                      </span>
+                    <TooltipTrigger
+                      render={
+                        <span className='text-muted-foreground text-xs' />
+                      }
+                    >
+                      {truncateText(channel.remark, 40)}
                     </TooltipTrigger>
                     <TooltipContent side='bottom' className='max-w-xs'>
                       {channel.remark}
@@ -629,12 +633,14 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
           <div className='flex items-center gap-2'>
             <div className='flex items-center gap-1.5'>
               {isMultiKey && (
-                <TooltipProvider delayDuration={100}>
+                <TooltipProvider delay={100}>
                   <Tooltip>
-                    <TooltipTrigger asChild>
-                      <span className='border-border bg-muted text-primary inline-flex h-6 w-6 items-center justify-center rounded-full border'>
-                        <MultiKeyModeIcon className='h-3.5 w-3.5' />
-                      </span>
+                    <TooltipTrigger
+                      render={
+                        <span className='border-border bg-muted text-primary inline-flex h-6 w-6 items-center justify-center rounded-full border' />
+                      }
+                    >
+                      <MultiKeyModeIcon className='h-3.5 w-3.5' />
                     </TooltipTrigger>
                     <TooltipContent side='top'>
                       {multiKeyTooltip}
@@ -651,21 +657,23 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
               copyable={false}
             />
             {isIonet && (
-              <TooltipProvider delayDuration={100}>
+              <TooltipProvider delay={100}>
                 <Tooltip>
-                  <TooltipTrigger asChild>
-                    <span
-                      className='flex cursor-pointer items-center gap-1.5 text-xs font-medium'
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        if (!deploymentId) return
-                        const targetUrl = `/console/deployment?deployment_id=${deploymentId}`
-                        window.open(targetUrl, '_blank', 'noopener')
-                      }}
-                    >
-                      <span className='text-muted-foreground/30'>·</span>
-                      <span className={cn(textColorMap.purple)}>IO.NET</span>
-                    </span>
+                  <TooltipTrigger
+                    render={
+                      <span
+                        className='flex cursor-pointer items-center gap-1.5 text-xs font-medium'
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          if (!deploymentId) return
+                          const targetUrl = `/console/deployment?deployment_id=${deploymentId}`
+                          window.open(targetUrl, '_blank', 'noopener')
+                        }}
+                      />
+                    }
+                  >
+                    <span className='text-muted-foreground/30'>·</span>
+                    <span className={cn(textColorMap.purple)}>IO.NET</span>
                   </TooltipTrigger>
                   <TooltipContent side='top'>
                     <div className='max-w-xs space-y-1'>
@@ -769,18 +777,16 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
 
           if (statusReason || statusTime) {
             return (
-              <TooltipProvider delayDuration={100}>
+              <TooltipProvider delay={100}>
                 <Tooltip>
-                  <TooltipTrigger asChild>
-                    <span>
-                      <StatusBadge
-                        label={label}
-                        variant={config.variant}
-                        showDot={config.showDot}
-                        size='sm'
-                        copyable={false}
-                      />
-                    </span>
+                  <TooltipTrigger render={<span />}>
+                    <StatusBadge
+                      label={label}
+                      variant={config.variant}
+                      showDot={config.showDot}
+                      size='sm'
+                      copyable={false}
+                    />
                   </TooltipTrigger>
                   <TooltipContent side='top' className='max-w-xs'>
                     <div className='space-y-1 text-xs'>
@@ -849,8 +855,8 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
         return (
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedItems(modelBadges, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedItems(modelBadges, 2)}
               </TooltipTrigger>
               {modelArray.length > 2 && (
                 <TooltipContent
@@ -884,8 +890,8 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
         return (
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedItems(groupBadges, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedItems(groupBadges, 2)}
               </TooltipTrigger>
               {groupArray.length > 2 && (
                 <TooltipContent
@@ -1002,10 +1008,12 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
         return (
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <span className='text-muted-foreground cursor-pointer font-mono text-sm'>
-                  {timeText}
-                </span>
+              <TooltipTrigger
+                render={
+                  <span className='text-muted-foreground cursor-pointer font-mono text-sm' />
+                }
+              >
+                {timeText}
               </TooltipTrigger>
               <TooltipContent side='top'>
                 <p className='font-mono text-sm'>{fullDate}</p>
diff --git a/web/default/src/features/channels/components/channels-primary-buttons.tsx b/web/default/src/features/channels/components/channels-primary-buttons.tsx
index f80e6ba806e..442b3c7fc54 100644
--- a/web/default/src/features/channels/components/channels-primary-buttons.tsx
+++ b/web/default/src/features/channels/components/channels-primary-buttons.tsx
@@ -94,10 +94,8 @@ export function ChannelsPrimaryButtons() {
 
         {/* More Actions */}
         <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant='outline' size='sm'>
-              <MoreHorizontal className='h-4 w-4' />
-            </Button>
+          <DropdownMenuTrigger render={<Button variant='outline' size='sm' />}>
+            <MoreHorizontal className='h-4 w-4' />
           </DropdownMenuTrigger>
           <DropdownMenuContent align='end' className='w-56'>
             {/* Mobile-only: toggle switches */}
diff --git a/web/default/src/features/channels/components/channels-table.tsx b/web/default/src/features/channels/components/channels-table.tsx
index 86a5aaf4d6e..24a4bc63aa4 100644
--- a/web/default/src/features/channels/components/channels-table.tsx
+++ b/web/default/src/features/channels/components/channels-table.tsx
@@ -2,7 +2,6 @@ import { useState, useMemo, useEffect } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { getRouteApi } from '@tanstack/react-router'
 import {
-  flexRender,
   getCoreRowModel,
   useReactTable,
   getExpandedRowModel,
@@ -14,27 +13,13 @@ import {
 import { useDebounce, useMediaQuery } from '@/hooks'
 import { useTranslation } from 'react-i18next'
 import { getLobeIcon } from '@/lib/lobe-icon'
-import { cn } from '@/lib/utils'
 import { useTableUrlState } from '@/hooks/use-table-url-state'
 import { Input } from '@/components/ui/input'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
 import {
   DISABLED_ROW_DESKTOP,
   DISABLED_ROW_MOBILE,
-  DataTableToolbar,
-  TableSkeleton,
-  TableEmpty,
-  MobileCardList,
+  DataTablePage,
 } from '@/components/data-table'
-import { DataTablePagination } from '@/components/data-table/pagination'
-import { PageFooterPortal } from '@/components/layout'
 import { getChannels, searchChannels, getGroups } from '../api'
 import {
   DEFAULT_PAGE_SIZE,
@@ -331,122 +316,56 @@ export function ChannelsTable() {
   ]
 
   return (
-    <>
-      <div className='space-y-3 sm:space-y-4'>
-        <DataTableToolbar
-          table={table}
-          searchPlaceholder={t('Filter by name, ID, or key...')}
-          additionalSearch={
-            <Input
-              placeholder={t('Filter by model...')}
-              value={modelFilterInput}
-              onChange={(e) => setModelFilterInput(e.target.value)}
-              className='h-8 w-full sm:w-[150px] lg:w-[200px]'
-            />
-          }
-          filters={[
-            {
-              columnId: 'status',
-              title: t('Status'),
-              options: [...CHANNEL_STATUS_OPTIONS],
-              singleSelect: true,
-            },
-            {
-              columnId: 'type',
-              title: t('Type'),
-              options: typeFilterOptions,
-              singleSelect: true,
-            },
-            {
-              columnId: 'group',
-              title: t('Group'),
-              options: groupFilterOptions,
-              singleSelect: true,
-            },
-          ]}
-        />
-
-        {isMobile ? (
-          <MobileCardList
-            table={table}
-            isLoading={isLoading}
-            emptyTitle='No Channels Found'
-            emptyDescription='No channels available. Create your first channel to get started.'
-            getRowClassName={(row) =>
-              isDisabledChannelRow(row.original) ? DISABLED_ROW_MOBILE : undefined
-            }
+    <DataTablePage
+      table={table}
+      columns={columns}
+      isLoading={isLoading}
+      isFetching={isFetching}
+      emptyTitle={t('No Channels Found')}
+      emptyDescription={t(
+        'No channels available. Create your first channel to get started.'
+      )}
+      skeletonKeyPrefix='channel-skeleton'
+      applyHeaderSize
+      toolbarProps={{
+        searchPlaceholder: t('Filter by name, ID, or key...'),
+        additionalSearch: (
+          <Input
+            placeholder={t('Filter by model...')}
+            value={modelFilterInput}
+            onChange={(e) => setModelFilterInput(e.target.value)}
+            className='w-full sm:w-[150px] lg:w-[180px]'
           />
-        ) : (
-          <>
-            <div
-              className={cn(
-                'overflow-hidden rounded-md border transition-opacity duration-150',
-                isFetching && !isLoading && 'pointer-events-none opacity-50'
-              )}
-            >
-              <Table>
-                <TableHeader>
-                  {table.getHeaderGroups().map((headerGroup) => (
-                    <TableRow key={headerGroup.id}>
-                      {headerGroup.headers.map((header) => (
-                        <TableHead
-                          key={header.id}
-                          style={{ width: header.getSize() }}
-                        >
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext()
-                              )}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableHeader>
-                <TableBody>
-                  {isLoading ? (
-                    <TableSkeleton table={table} keyPrefix='channel-skeleton' />
-                  ) : table.getRowModel().rows.length === 0 ? (
-                    <TableEmpty
-                      colSpan={columns.length}
-                      title={t('No Channels Found')}
-                      description={t(
-                        'No channels available. Create your first channel to get started.'
-                      )}
-                    />
-                  ) : (
-                    table.getRowModel().rows.map((row) => (
-                      <TableRow
-                        key={row.id}
-                        data-state={row.getIsSelected() && 'selected'}
-                        className={cn(
-                          isDisabledChannelRow(row.original) &&
-                            DISABLED_ROW_DESKTOP
-                        )}
-                      >
-                        {row.getVisibleCells().map((cell) => (
-                          <TableCell key={cell.id}>
-                            {flexRender(
-                              cell.column.columnDef.cell,
-                              cell.getContext()
-                            )}
-                          </TableCell>
-                        ))}
-                      </TableRow>
-                    ))
-                  )}
-                </TableBody>
-              </Table>
-            </div>
-
-            <DataTableBulkActions table={table} />
-          </>
-        )}
-      </div>
-      <PageFooterPortal>
-        <DataTablePagination table={table} />
-      </PageFooterPortal>
-    </>
+        ),
+        filters: [
+          {
+            columnId: 'status',
+            title: t('Status'),
+            options: [...CHANNEL_STATUS_OPTIONS],
+            singleSelect: true,
+          },
+          {
+            columnId: 'type',
+            title: t('Type'),
+            options: typeFilterOptions,
+            singleSelect: true,
+          },
+          {
+            columnId: 'group',
+            title: t('Group'),
+            options: groupFilterOptions,
+            singleSelect: true,
+          },
+        ],
+      }}
+      getRowClassName={(row, { isMobile }) =>
+        isDisabledChannelRow(row.original)
+          ? isMobile
+            ? DISABLED_ROW_MOBILE
+            : DISABLED_ROW_DESKTOP
+          : undefined
+      }
+      bulkActions={<DataTableBulkActions table={table} />}
+    />
   )
 }
diff --git a/web/default/src/features/channels/components/data-table-bulk-actions.tsx b/web/default/src/features/channels/components/data-table-bulk-actions.tsx
index f7dc832b0cc..a102441e0c2 100644
--- a/web/default/src/features/channels/components/data-table-bulk-actions.tsx
+++ b/web/default/src/features/channels/components/data-table-bulk-actions.tsx
@@ -83,18 +83,20 @@ export function DataTableBulkActions<TData>({
     <>
       <BulkActionsToolbar table={table} entityName='channel'>
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='outline'
-              size='icon'
-              onClick={handleEnableAll}
-              className='size-8'
-              aria-label={t('Enable selected channels')}
-              title={t('Enable selected channels')}
-            >
-              <Power />
-              <span className='sr-only'>{t('Enable selected channels')}</span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='outline'
+                size='icon'
+                onClick={handleEnableAll}
+                className='size-8'
+                aria-label={t('Enable selected channels')}
+                title={t('Enable selected channels')}
+              />
+            }
+          >
+            <Power />
+            <span className='sr-only'>{t('Enable selected channels')}</span>
           </TooltipTrigger>
           <TooltipContent>
             <p>{t('Enable selected channels')}</p>
@@ -102,18 +104,20 @@ export function DataTableBulkActions<TData>({
         </Tooltip>
 
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='outline'
-              size='icon'
-              onClick={handleDisableAll}
-              className='size-8'
-              aria-label={t('Disable selected channels')}
-              title={t('Disable selected channels')}
-            >
-              <PowerOff />
-              <span className='sr-only'>{t('Disable selected channels')}</span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='outline'
+                size='icon'
+                onClick={handleDisableAll}
+                className='size-8'
+                aria-label={t('Disable selected channels')}
+                title={t('Disable selected channels')}
+              />
+            }
+          >
+            <PowerOff />
+            <span className='sr-only'>{t('Disable selected channels')}</span>
           </TooltipTrigger>
           <TooltipContent>
             <p>{t('Disable selected channels')}</p>
@@ -121,20 +125,22 @@ export function DataTableBulkActions<TData>({
         </Tooltip>
 
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='outline'
-              size='icon'
-              onClick={() => setShowTagDialog(true)}
-              className='size-8'
-              aria-label={t('Set tag for selected channels')}
-              title={t('Set tag for selected channels')}
-            >
-              <Tag />
-              <span className='sr-only'>
-                {t('Set tag for selected channels')}
-              </span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='outline'
+                size='icon'
+                onClick={() => setShowTagDialog(true)}
+                className='size-8'
+                aria-label={t('Set tag for selected channels')}
+                title={t('Set tag for selected channels')}
+              />
+            }
+          >
+            <Tag />
+            <span className='sr-only'>
+              {t('Set tag for selected channels')}
+            </span>
           </TooltipTrigger>
           <TooltipContent>
             <p>{t('Set tag for selected channels')}</p>
@@ -142,18 +148,20 @@ export function DataTableBulkActions<TData>({
         </Tooltip>
 
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='destructive'
-              size='icon'
-              onClick={() => setShowDeleteConfirm(true)}
-              className='size-8'
-              aria-label={t('Delete selected channels')}
-              title={t('Delete selected channels')}
-            >
-              <Trash2 />
-              <span className='sr-only'>{t('Delete selected channels')}</span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='destructive'
+                size='icon'
+                onClick={() => setShowDeleteConfirm(true)}
+                className='size-8'
+                aria-label={t('Delete selected channels')}
+                title={t('Delete selected channels')}
+              />
+            }
+          >
+            <Trash2 />
+            <span className='sr-only'>{t('Delete selected channels')}</span>
           </TooltipTrigger>
           <TooltipContent>
             <p>{t('Delete selected channels')}</p>
diff --git a/web/default/src/features/channels/components/data-table-row-actions.tsx b/web/default/src/features/channels/components/data-table-row-actions.tsx
index a15b17a074d..73ccd1bb282 100644
--- a/web/default/src/features/channels/components/data-table-row-actions.tsx
+++ b/web/default/src/features/channels/components/data-table-row-actions.tsx
@@ -124,46 +124,50 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
   return (
     <div className='flex items-center justify-end gap-1'>
       <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant='ghost'
-            size='icon-sm'
-            onClick={handleDirectTest}
-            disabled={isTesting}
-            aria-label={t('Test Connection')}
-          >
-            {isTesting ? (
-              <Loader2 className='size-4 animate-spin' />
-            ) : (
-              <Gauge className='size-4' />
-            )}
-          </Button>
+        <TooltipTrigger
+          render={
+            <Button
+              variant='ghost'
+              size='icon-sm'
+              onClick={handleDirectTest}
+              disabled={isTesting}
+              aria-label={t('Test Connection')}
+            />
+          }
+        >
+          {isTesting ? (
+            <Loader2 className='size-4 animate-spin' />
+          ) : (
+            <Gauge className='size-4' />
+          )}
         </TooltipTrigger>
         <TooltipContent>{t('Test Connection')}</TooltipContent>
       </Tooltip>
 
       <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant='ghost'
-            size='icon-sm'
-            onClick={handleToggleStatus}
-            disabled={isTogglingStatus}
-            aria-label={isEnabled ? t('Disable') : t('Enable')}
-            className={
-              isEnabled
-                ? 'text-destructive hover:text-destructive'
-                : 'text-emerald-600 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-400'
-            }
-          >
-            {isTogglingStatus ? (
-              <Loader2 className='size-4 animate-spin' />
-            ) : isEnabled ? (
-              <PowerOff className='size-4' />
-            ) : (
-              <Power className='size-4' />
-            )}
-          </Button>
+        <TooltipTrigger
+          render={
+            <Button
+              variant='ghost'
+              size='icon-sm'
+              onClick={handleToggleStatus}
+              disabled={isTogglingStatus}
+              aria-label={isEnabled ? t('Disable') : t('Enable')}
+              className={
+                isEnabled
+                  ? 'text-destructive hover:text-destructive'
+                  : 'text-emerald-600 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-400'
+              }
+            />
+          }
+        >
+          {isTogglingStatus ? (
+            <Loader2 className='size-4 animate-spin' />
+          ) : isEnabled ? (
+            <PowerOff className='size-4' />
+          ) : (
+            <Power className='size-4' />
+          )}
         </TooltipTrigger>
         <TooltipContent>
           {isEnabled ? t('Disable') : t('Enable')}
@@ -171,14 +175,16 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
       </Tooltip>
 
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant='ghost'
-            className='data-[state=open]:bg-muted flex h-8 w-8 p-0'
-          >
-            <MoreHorizontal className='h-4 w-4' />
-            <span className='sr-only'>{t('Open menu')}</span>
-          </Button>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              variant='ghost'
+              className='data-popup-open:bg-muted flex h-8 w-8 p-0'
+            />
+          }
+        >
+          <MoreHorizontal className='h-4 w-4' />
+          <span className='sr-only'>{t('Open menu')}</span>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='end' className='w-48'>
           {/* Edit */}
diff --git a/web/default/src/features/channels/components/data-table-tag-row-actions.tsx b/web/default/src/features/channels/components/data-table-tag-row-actions.tsx
index 02e5acdb8f2..336151f8f8b 100644
--- a/web/default/src/features/channels/components/data-table-tag-row-actions.tsx
+++ b/web/default/src/features/channels/components/data-table-tag-row-actions.tsx
@@ -47,14 +47,16 @@ export function DataTableTagRowActions({ row }: DataTableTagRowActionsProps) {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant='ghost'
-          className='data-[state=open]:bg-muted flex h-8 w-8 p-0'
-        >
-          <MoreHorizontal className='h-4 w-4' />
-          <span className='sr-only'>{t('Open menu')}</span>
-        </Button>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant='ghost'
+            className='data-popup-open:bg-muted flex h-8 w-8 p-0'
+          />
+        }
+      >
+        <MoreHorizontal className='h-4 w-4' />
+        <span className='sr-only'>{t('Open menu')}</span>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end' className='w-48'>
         {/* Edit Tag */}
diff --git a/web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx b/web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx
index 9d2990f22de..5e2a34196b7 100644
--- a/web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx
+++ b/web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx
@@ -252,10 +252,8 @@ export function ChannelTestDialog({
         id: 'select',
         header: ({ table }) => (
           <Checkbox
-            checked={
-              table.getIsAllPageRowsSelected() ||
-              (table.getIsSomePageRowsSelected() && 'indeterminate')
-            }
+            checked={table.getIsAllPageRowsSelected()}
+            indeterminate={table.getIsSomePageRowsSelected()}
             onCheckedChange={(value) =>
               table.toggleAllPageRowsSelected(!!value)
             }
@@ -432,7 +430,10 @@ export function ChannelTestDialog({
           <div className='grid gap-4 md:grid-cols-2'>
             <div className='grid gap-2'>
               <Label htmlFor='endpoint-type'>{t('Endpoint Type')}</Label>
-              <Select value={endpointType} onValueChange={setEndpointType}>
+              <Select
+                value={endpointType}
+                onValueChange={(v) => v !== null && setEndpointType(v)}
+              >
                 <SelectTrigger id='endpoint-type'>
                   <SelectValue placeholder={t('Auto detect (default)')} />
                 </SelectTrigger>
@@ -586,21 +587,23 @@ function TestModelsBulkActions({
   return (
     <BulkActionsToolbar table={table} entityName='model'>
       <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            size='sm'
-            onClick={() => onTestSelected(selectedModels)}
-            disabled={disabled || selectedModels.length === 0}
-          >
-            {disabled ? (
-              <>
-                <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                {t('Testing...')}
-              </>
-            ) : (
-              buttonLabel
-            )}
-          </Button>
+        <TooltipTrigger
+          render={
+            <Button
+              size='sm'
+              onClick={() => onTestSelected(selectedModels)}
+              disabled={disabled || selectedModels.length === 0}
+            />
+          }
+        >
+          {disabled ? (
+            <>
+              <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+              {t('Testing...')}
+            </>
+          ) : (
+            buttonLabel
+          )}
         </TooltipTrigger>
         <TooltipContent>
           <p>{t('Run tests for the selected models')}</p>
diff --git a/web/default/src/features/channels/components/dialogs/edit-tag-dialog.tsx b/web/default/src/features/channels/components/dialogs/edit-tag-dialog.tsx
index 0348cfa86d9..92c345d0a25 100644
--- a/web/default/src/features/channels/components/dialogs/edit-tag-dialog.tsx
+++ b/web/default/src/features/channels/components/dialogs/edit-tag-dialog.tsx
@@ -275,8 +275,9 @@ export function EditTagDialog({ open, onOpenChange }: EditTagDialogProps) {
                   </div>
 
                   <div className='flex gap-2'>
-                    <Select
+                    <Select<string>
                       onValueChange={(value) => {
+                        if (value === null) return
                         if (!selectedModels.includes(value)) {
                           setSelectedModels([...selectedModels, value])
                         }
diff --git a/web/default/src/features/channels/components/dialogs/fetch-models-dialog.tsx b/web/default/src/features/channels/components/dialogs/fetch-models-dialog.tsx
index d2c958ea64a..368fd992e54 100644
--- a/web/default/src/features/channels/components/dialogs/fetch-models-dialog.tsx
+++ b/web/default/src/features/channels/components/dialogs/fetch-models-dialog.tsx
@@ -316,9 +316,9 @@ export function FetchModelsDialog({
                   <span>{model}</span>
                   {redirectOnlySet.has(normalizeModelName(model)) && (
                     <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Info className='h-3.5 w-3.5 text-amber-500' />
-                      </TooltipTrigger>
+                      <TooltipTrigger
+                        render={<Info className='h-3.5 w-3.5 text-amber-500' />}
+                      ></TooltipTrigger>
                       <TooltipContent>
                         {t('From model redirect, not yet added to models list')}
                       </TooltipContent>
diff --git a/web/default/src/features/channels/components/dialogs/missing-models-confirmation-dialog.tsx b/web/default/src/features/channels/components/dialogs/missing-models-confirmation-dialog.tsx
index 9eb9b01d753..af026e51837 100644
--- a/web/default/src/features/channels/components/dialogs/missing-models-confirmation-dialog.tsx
+++ b/web/default/src/features/channels/components/dialogs/missing-models-confirmation-dialog.tsx
@@ -49,21 +49,21 @@ export function MissingModelsConfirmationDialog({
           <AlertDialogTitle>
             {t('Models not in list, may fail to invoke')}
           </AlertDialogTitle>
-          <AlertDialogDescription asChild>
-            <div className='space-y-3 text-sm'>
-              <div>
-                {t(
-                  'The following models in the model redirect have not been added to the "Models" list and may fail during invocation due to missing available models:'
-                )}
-              </div>
-              <div className='rounded-md bg-red-50 p-2 font-mono text-xs break-all text-red-600 dark:bg-red-950/50 dark:text-red-400'>
-                {missingModels.join(', ')}
-              </div>
-              <div>
-                {t(
-                  'You can manually add them in "Custom Model Names", click "Fill" and then submit, or use the operations below to handle automatically.'
-                )}
-              </div>
+          <AlertDialogDescription
+            render={<div className='space-y-3 text-sm' />}
+          >
+            <div>
+              {t(
+                'The following models in the model redirect have not been added to the "Models" list and may fail during invocation due to missing available models:'
+              )}
+            </div>
+            <div className='rounded-md bg-red-50 p-2 font-mono text-xs break-all text-red-600 dark:bg-red-950/50 dark:text-red-400'>
+              {missingModels.join(', ')}
+            </div>
+            <div>
+              {t(
+                'You can manually add them in "Custom Model Names", click "Fill" and then submit, or use the operations below to handle automatically.'
+              )}
             </div>
           </AlertDialogDescription>
         </AlertDialogHeader>
diff --git a/web/default/src/features/channels/components/dialogs/multi-key-manage-dialog.tsx b/web/default/src/features/channels/components/dialogs/multi-key-manage-dialog.tsx
index f29fe0b914f..269e3266927 100644
--- a/web/default/src/features/channels/components/dialogs/multi-key-manage-dialog.tsx
+++ b/web/default/src/features/channels/components/dialogs/multi-key-manage-dialog.tsx
@@ -258,7 +258,7 @@ export function MultiKeyManageDialog({
             <div className='flex shrink-0 items-center justify-between'>
               <Select
                 value={statusFilter === null ? 'all' : statusFilter.toString()}
-                onValueChange={handleStatusFilterChange}
+                onValueChange={(v) => v !== null && handleStatusFilterChange(v)}
               >
                 <SelectTrigger className='w-40'>
                   <SelectValue placeholder={t('All Status')} />
diff --git a/web/default/src/features/channels/components/dialogs/param-override-editor-dialog.tsx b/web/default/src/features/channels/components/dialogs/param-override-editor-dialog.tsx
index 56ce09ec620..255fccedf31 100644
--- a/web/default/src/features/channels/components/dialogs/param-override-editor-dialog.tsx
+++ b/web/default/src/features/channels/components/dialogs/param-override-editor-dialog.tsx
@@ -2142,6 +2142,7 @@ function RuleEditor(ruleEditorProps: RuleEditorProps) {
             <Select
               value={mode}
               onValueChange={(nextMode) =>
+                nextMode !== null &&
                 ruleEditorProps.updateOperation(operation.id, {
                   mode: nextMode,
                 })
@@ -2340,6 +2341,7 @@ function RuleEditor(ruleEditorProps: RuleEditorProps) {
               <Select
                 value={operation.logic || 'OR'}
                 onValueChange={(v) =>
+                  v !== null &&
                   ruleEditorProps.updateOperation(operation.id, {
                     logic: v,
                   })
@@ -2515,6 +2517,7 @@ function ConditionEditor(conditionEditorProps: ConditionEditorProps) {
                 <Select
                   value={condition.mode}
                   onValueChange={(v) =>
+                    v !== null &&
                     conditionEditorProps.updateCondition(
                       conditionEditorProps.operationId,
                       condition.id,
@@ -3020,6 +3023,7 @@ function PruneObjectsEditor(pruneObjectsEditorProps: PruneObjectsEditorProps) {
                         <Select
                           value={rule.mode}
                           onValueChange={(v) =>
+                            v !== null &&
                             pruneObjectsEditorProps.updateRule(
                               pruneObjectsEditorProps.operationId,
                               rule.id,
@@ -3124,6 +3128,7 @@ function SyncFieldsEditor(syncFieldsEditorProps: SyncFieldsEditorProps) {
             <Select
               value={syncFieldsEditorProps.syncFromTarget.type || 'json'}
               onValueChange={(v) =>
+                v !== null &&
                 syncFieldsEditorProps.updateOperation(
                   syncFieldsEditorProps.operationId,
                   {
@@ -3172,6 +3177,7 @@ function SyncFieldsEditor(syncFieldsEditorProps: SyncFieldsEditorProps) {
             <Select
               value={syncFieldsEditorProps.syncToTarget.type || 'json'}
               onValueChange={(v) =>
+                v !== null &&
                 syncFieldsEditorProps.updateOperation(
                   syncFieldsEditorProps.operationId,
                   {
diff --git a/web/default/src/features/channels/components/drawers/channel-mutate-drawer.tsx b/web/default/src/features/channels/components/drawers/channel-mutate-drawer.tsx
index 1d5ada51716..a28d2cad653 100644
--- a/web/default/src/features/channels/components/drawers/channel-mutate-drawer.tsx
+++ b/web/default/src/features/channels/components/drawers/channel-mutate-drawer.tsx
@@ -2247,16 +2247,18 @@ export function ChannelMutateDrawer({
                           {t('Model Mapping')}
                         </FormLabel>
                         <Tooltip>
-                          <TooltipTrigger asChild>
-                            <Button
-                              type='button'
-                              variant='ghost'
-                              size='icon-sm'
-                              className='text-muted-foreground hover:text-foreground size-auto p-0'
-                              aria-label='How model mapping works'
-                            >
-                              <HelpCircle className='h-4 w-4' />
-                            </Button>
+                          <TooltipTrigger
+                            render={
+                              <Button
+                                type='button'
+                                variant='ghost'
+                                size='icon-sm'
+                                className='text-muted-foreground hover:text-foreground size-auto p-0'
+                                aria-label='How model mapping works'
+                              />
+                            }
+                          >
+                            <HelpCircle className='h-4 w-4' />
                           </TooltipTrigger>
                           <TooltipContent
                             side='top'
@@ -2362,28 +2364,30 @@ export function ChannelMutateDrawer({
                 open={advancedSettingsOpen}
                 onOpenChange={handleAdvancedSettingsOpenChange}
               >
-                <CollapsibleTrigger asChild>
-                  <button
-                    type='button'
-                    className='bg-card hover:bg-accent/50 flex w-full items-center justify-between rounded-xl border px-5 py-4 text-left transition-colors'
-                  >
-                    <div className='space-y-0.5'>
-                      <div className='text-[13px] font-semibold'>
-                        {t('Advanced Settings')}
-                      </div>
-                      <div className='text-muted-foreground text-xs'>
-                        {t(
-                          'Request overrides, routing behavior, and upstream model automation'
-                        )}
-                      </div>
+                <CollapsibleTrigger
+                  render={
+                    <button
+                      type='button'
+                      className='bg-card hover:bg-accent/50 flex w-full items-center justify-between rounded-xl border px-5 py-4 text-left transition-colors'
+                    />
+                  }
+                >
+                  <div className='space-y-0.5'>
+                    <div className='text-[13px] font-semibold'>
+                      {t('Advanced Settings')}
                     </div>
-                    <ChevronDown
-                      className={cn(
-                        'text-muted-foreground h-4 w-4 shrink-0 transition-transform',
-                        advancedSettingsOpen && 'rotate-180'
+                    <div className='text-muted-foreground text-xs'>
+                      {t(
+                        'Request overrides, routing behavior, and upstream model automation'
                       )}
-                    />
-                  </button>
+                    </div>
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      'text-muted-foreground h-4 w-4 shrink-0 transition-transform',
+                      advancedSettingsOpen && 'rotate-180'
+                    )}
+                  />
                 </CollapsibleTrigger>
 
                 <CollapsibleContent className='mt-5 space-y-5'>
@@ -3277,10 +3281,10 @@ export function ChannelMutateDrawer({
           </Form>
 
           <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
-            <SheetClose asChild>
-              <Button variant='outline' disabled={isSubmitting}>
-                {t('Cancel')}
-              </Button>
+            <SheetClose
+              render={<Button variant='outline' disabled={isSubmitting} />}
+            >
+              {t('Cancel')}
             </SheetClose>
             <Button form='channel-form' type='submit' disabled={isSubmitting}>
               {isSubmitting && (
diff --git a/web/default/src/features/dashboard/components/models/consumption-distribution-chart.tsx b/web/default/src/features/dashboard/components/models/consumption-distribution-chart.tsx
index 42bdf0d0e05..58c2a61f11e 100644
--- a/web/default/src/features/dashboard/components/models/consumption-distribution-chart.tsx
+++ b/web/default/src/features/dashboard/components/models/consumption-distribution-chart.tsx
@@ -26,11 +26,13 @@ interface ConsumptionDistributionChartProps {
   defaultChartType?: ConsumptionDistributionChartType
 }
 
-const CHART_TYPE_ICONS: Record<ConsumptionDistributionChartType, typeof BarChart3> =
-  {
-    bar: BarChart3,
-    area: AreaChart,
-  }
+const CHART_TYPE_ICONS: Record<
+  ConsumptionDistributionChartType,
+  typeof BarChart3
+> = {
+  bar: BarChart3,
+  area: AreaChart,
+}
 
 export function ConsumptionDistributionChart(
   props: ConsumptionDistributionChartProps
@@ -80,15 +82,13 @@ export function ConsumptionDistributionChart(
       <div className='flex w-full flex-col gap-1.5 border-b px-3 py-2 sm:gap-3 sm:px-5 sm:py-3 lg:flex-row lg:items-center lg:justify-between'>
         <div className='flex items-center gap-2'>
           <WalletCards className='text-muted-foreground/60 size-4' />
-          <div className='text-sm font-semibold'>
-            {t('Quota Distribution')}
-          </div>
+          <div className='text-sm font-semibold'>{t('Quota Distribution')}</div>
           <span className='text-muted-foreground text-xs'>
             {t('Total:')} {chartData.totalQuotaDisplay}
           </span>
         </div>
 
-        <div className='bg-muted/60 inline-flex h-7 w-full overflow-x-auto rounded-md border p-0.5 sm:h-8 sm:w-auto'>
+        <div className='bg-muted/60 inline-flex h-7 w-full overflow-x-auto rounded-lg border p-0.5 sm:h-8 sm:w-auto'>
           {CONSUMPTION_DISTRIBUTION_CHART_OPTIONS.map((item) => {
             const Icon = CHART_TYPE_ICONS[item.value]
             return (
@@ -96,7 +96,7 @@ export function ConsumptionDistributionChart(
                 key={item.value}
                 type='button'
                 onClick={() => setChartType(item.value)}
-                className={`inline-flex shrink-0 items-center gap-1.5 rounded-[5px] px-3 text-xs font-medium transition-colors ${
+                className={`inline-flex shrink-0 items-center gap-1.5 rounded-md px-3 text-xs font-medium transition-colors ${
                   chartType === item.value
                     ? 'bg-background text-foreground shadow-sm'
                     : 'text-muted-foreground hover:text-foreground'
diff --git a/web/default/src/features/dashboard/components/models/log-stat-cards.tsx b/web/default/src/features/dashboard/components/models/log-stat-cards.tsx
index f8bc5a9d2e2..9c9824a0ed7 100644
--- a/web/default/src/features/dashboard/components/models/log-stat-cards.tsx
+++ b/web/default/src/features/dashboard/components/models/log-stat-cards.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
+import { useAuthStore } from '@/stores/auth-store'
 import { formatNumber, formatQuota } from '@/lib/format'
 import { computeTimeRange } from '@/lib/time'
-import { useAuthStore } from '@/stores/auth-store'
 import { Skeleton } from '@/components/ui/skeleton'
 import { getUserQuotaDates } from '@/features/dashboard/api'
 import { useModelStatCardsConfig } from '@/features/dashboard/hooks/use-dashboard-config'
diff --git a/web/default/src/features/dashboard/components/models/model-charts.tsx b/web/default/src/features/dashboard/components/models/model-charts.tsx
index c46bad90c6f..4c3c4e342b6 100644
--- a/web/default/src/features/dashboard/components/models/model-charts.tsx
+++ b/web/default/src/features/dashboard/components/models/model-charts.tsx
@@ -89,13 +89,13 @@ export function ModelCharts(props: ModelChartsProps) {
           </span>
         </div>
 
-        <div className='bg-muted/60 inline-flex h-7 w-full overflow-x-auto rounded-md border p-0.5 sm:h-8 sm:w-auto'>
+        <div className='bg-muted/60 inline-flex h-7 w-full overflow-x-auto rounded-lg border p-0.5 sm:h-8 sm:w-auto'>
           {MODEL_ANALYTICS_CHART_OPTIONS.map((tab) => (
             <button
               key={tab.value}
               type='button'
               onClick={() => setActiveTab(tab.value)}
-              className={`shrink-0 rounded-[5px] px-3 text-xs font-medium transition-colors ${
+              className={`shrink-0 rounded-md px-3 text-xs font-medium transition-colors ${
                 activeTab === tab.value
                   ? 'bg-background text-foreground shadow-sm'
                   : 'text-muted-foreground hover:text-foreground'
diff --git a/web/default/src/features/dashboard/components/models/models-chart-preferences.tsx b/web/default/src/features/dashboard/components/models/models-chart-preferences.tsx
index 76d460041cc..0af10d9cfa3 100644
--- a/web/default/src/features/dashboard/components/models/models-chart-preferences.tsx
+++ b/web/default/src/features/dashboard/components/models/models-chart-preferences.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Save, Settings2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import type { TimeGranularity } from '@/lib/time'
 import { Button } from '@/components/ui/button'
 import {
   Dialog,
@@ -30,7 +31,6 @@ import type {
   DashboardChartPreferences,
   ModelAnalyticsChartTab,
 } from '@/features/dashboard/types'
-import type { TimeGranularity } from '@/lib/time'
 
 interface ModelsChartPreferencesProps {
   preferences: DashboardChartPreferences
@@ -55,11 +55,9 @@ export function ModelsChartPreferences(props: ModelsChartPreferencesProps) {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button variant='outline' size='sm'>
-          <Settings2 className='mr-2 h-4 w-4' />
-          {t('Preferences')}
-        </Button>
+      <DialogTrigger render={<Button variant='outline' size='sm' />}>
+        <Settings2 className='mr-2 h-4 w-4' />
+        {t('Preferences')}
       </DialogTrigger>
       <DialogContent className='sm:max-w-md'>
         <DialogHeader>
diff --git a/web/default/src/features/dashboard/components/models/models-filter-dialog.tsx b/web/default/src/features/dashboard/components/models/models-filter-dialog.tsx
index fd4db4f389e..2d4662dcaee 100644
--- a/web/default/src/features/dashboard/components/models/models-filter-dialog.tsx
+++ b/web/default/src/features/dashboard/components/models/models-filter-dialog.tsx
@@ -68,8 +68,8 @@ export function ModelsFilter(props: ModelsFilterProps) {
   const [filters, setFilters] = useState<DashboardFilters>(() =>
     buildDefaultDashboardFilters(props.preferences)
   )
-  const [selectedRange, setSelectedRange] = useState<number | null>(() =>
-    props.preferences.defaultTimeRangeDays
+  const [selectedRange, setSelectedRange] = useState<number | null>(
+    () => props.preferences.defaultTimeRangeDays
   )
 
   useEffect(() => {
@@ -121,11 +121,9 @@ export function ModelsFilter(props: ModelsFilterProps) {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button variant='outline' size='sm'>
-          <Filter className='mr-2 h-4 w-4' />
-          {t('Filter')}
-        </Button>
+      <DialogTrigger render={<Button variant='outline' size='sm' />}>
+        <Filter className='mr-2 h-4 w-4' />
+        {t('Filter')}
       </DialogTrigger>
       <DialogContent className='flex max-h-[calc(100dvh-2rem)] flex-col max-sm:h-dvh max-sm:w-screen max-sm:max-w-none max-sm:rounded-none max-sm:p-4 sm:max-w-lg'>
         <DialogHeader>
diff --git a/web/default/src/features/dashboard/components/overview/api-info-item.tsx b/web/default/src/features/dashboard/components/overview/api-info-item.tsx
index 19cb88b4d26..208e5866728 100644
--- a/web/default/src/features/dashboard/components/overview/api-info-item.tsx
+++ b/web/default/src/features/dashboard/components/overview/api-info-item.tsx
@@ -110,13 +110,11 @@ export function ApiInfoItemComponent(props: ApiInfoItemProps) {
           <Button
             variant='ghost'
             size='sm'
-            asChild
             className='hidden size-7 p-0 sm:inline-flex'
             title={t('Open in New Tab')}
+            render={<a href={item.url} target='_blank' rel='noreferrer' />}
           >
-            <a href={item.url} target='_blank' rel='noreferrer'>
-              <ExternalLink className='size-3.5' />
-            </a>
+            <ExternalLink className='size-3.5' />
           </Button>
         </div>
       </div>
diff --git a/web/default/src/features/dashboard/components/overview/faq-panel.tsx b/web/default/src/features/dashboard/components/overview/faq-panel.tsx
index fb51cb3f074..df70646e1fc 100644
--- a/web/default/src/features/dashboard/components/overview/faq-panel.tsx
+++ b/web/default/src/features/dashboard/components/overview/faq-panel.tsx
@@ -30,7 +30,7 @@ export function FAQPanel() {
       height='h-64 sm:h-80'
     >
       <ScrollArea className='h-64 sm:h-80'>
-        <Accordion type='single' collapsible className='w-full'>
+        <Accordion className='w-full'>
           {list.map((item: FAQItem, idx: number) => {
             const key = item.id ?? `faq-${idx}`
             const value = `item-${key}`
diff --git a/web/default/src/features/dashboard/components/overview/summary-cards.tsx b/web/default/src/features/dashboard/components/overview/summary-cards.tsx
index 78bfa9bae42..f208b3d38e5 100644
--- a/web/default/src/features/dashboard/components/overview/summary-cards.tsx
+++ b/web/default/src/features/dashboard/components/overview/summary-cards.tsx
@@ -68,12 +68,10 @@ export function SummaryCards() {
                     variant='outline'
                     size='sm'
                     className='hidden h-6 gap-1 px-2 text-xs sm:inline-flex'
-                    asChild
+                    render={<Link to='/wallet' />}
                   >
-                    <Link to='/wallet'>
-                      <CreditCard className='size-3' />
-                      {t('Recharge')}
-                    </Link>
+                    <CreditCard className='size-3' />
+                    {t('Recharge')}
                   </Button>
                 ) : undefined
               }
diff --git a/web/default/src/features/dashboard/components/ui/stat-card.tsx b/web/default/src/features/dashboard/components/ui/stat-card.tsx
index 0746293461d..40fb1551c78 100644
--- a/web/default/src/features/dashboard/components/ui/stat-card.tsx
+++ b/web/default/src/features/dashboard/components/ui/stat-card.tsx
@@ -21,9 +21,7 @@ export function StatCard(props: StatCardProps) {
           <Icon className='text-muted-foreground/60 size-3.5 shrink-0' />
           <span className='line-clamp-2 leading-snug'>{props.title}</span>
         </div>
-        {props.action && (
-          <div className='shrink-0'>{props.action}</div>
-        )}
+        {props.action && <div className='shrink-0'>{props.action}</div>}
       </div>
 
       {props.loading ? (
diff --git a/web/default/src/features/dashboard/components/users/user-charts.tsx b/web/default/src/features/dashboard/components/users/user-charts.tsx
index 621c1b57bff..4f7f9b58a29 100644
--- a/web/default/src/features/dashboard/components/users/user-charts.tsx
+++ b/web/default/src/features/dashboard/components/users/user-charts.tsx
@@ -125,13 +125,13 @@ export function UserCharts() {
   return (
     <div className='space-y-3'>
       <div className='flex items-center gap-1.5 overflow-x-auto pb-1 sm:gap-2'>
-        <div className='flex shrink-0 items-center gap-1.5 rounded-md border p-0.5'>
+        <div className='flex shrink-0 items-center gap-1.5 rounded-lg border p-0.5'>
           {TIME_RANGE_PRESETS.map((preset) => (
             <button
               key={preset.days}
               type='button'
               onClick={() => handleRangeChange(preset.days)}
-              className={`rounded-[5px] px-2.5 py-1 text-xs font-medium transition-colors ${
+              className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
                 selectedRange === preset.days
                   ? 'bg-primary text-primary-foreground shadow-sm'
                   : 'text-muted-foreground hover:bg-muted hover:text-foreground'
@@ -142,7 +142,7 @@ export function UserCharts() {
           ))}
         </div>
 
-        <div className='flex shrink-0 items-center gap-1.5 rounded-md border p-0.5'>
+        <div className='flex shrink-0 items-center gap-1.5 rounded-lg border p-0.5'>
           {TIME_GRANULARITY_OPTIONS.map((opt) => (
             <button
               key={opt.value}
@@ -150,7 +150,7 @@ export function UserCharts() {
               onClick={() =>
                 handleGranularityChange(opt.value as TimeGranularity)
               }
-              className={`rounded-[5px] px-2.5 py-1 text-xs font-medium transition-colors ${
+              className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
                 timeGranularity === opt.value
                   ? 'bg-primary text-primary-foreground shadow-sm'
                   : 'text-muted-foreground hover:bg-muted hover:text-foreground'
@@ -161,7 +161,7 @@ export function UserCharts() {
           ))}
         </div>
 
-        <div className='flex shrink-0 items-center gap-1.5 rounded-md border p-0.5'>
+        <div className='flex shrink-0 items-center gap-1.5 rounded-lg border p-0.5'>
           <span className='text-muted-foreground px-2 text-xs font-medium'>
             {t('Top Users')}
           </span>
@@ -170,7 +170,7 @@ export function UserCharts() {
               key={limit}
               type='button'
               onClick={() => setTopUserLimit(limit)}
-              className={`rounded-[5px] px-2.5 py-1 text-xs font-medium transition-colors ${
+              className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
                 topUserLimit === limit
                   ? 'bg-primary text-primary-foreground shadow-sm'
                   : 'text-muted-foreground hover:bg-muted hover:text-foreground'
diff --git a/web/default/src/features/dashboard/index.tsx b/web/default/src/features/dashboard/index.tsx
index af7a4a39821..d12de8ae9fa 100644
--- a/web/default/src/features/dashboard/index.tsx
+++ b/web/default/src/features/dashboard/index.tsx
@@ -11,11 +11,6 @@ import {
   CardStaggerItem,
   FadeIn,
 } from '@/components/page-transition'
-import {
-  buildDefaultDashboardFilters,
-  getSavedChartPreferences,
-  saveChartPreferences,
-} from './lib'
 import { ModelsChartPreferences } from './components/models/models-chart-preferences'
 import { ModelsFilter } from './components/models/models-filter-dialog'
 import { AnnouncementsPanel } from './components/overview/announcements-panel'
@@ -24,6 +19,11 @@ import { FAQPanel } from './components/overview/faq-panel'
 import { SummaryCards } from './components/overview/summary-cards'
 import { UptimePanel } from './components/overview/uptime-panel'
 import { DEFAULT_TIME_GRANULARITY } from './constants'
+import {
+  buildDefaultDashboardFilters,
+  getSavedChartPreferences,
+  saveChartPreferences,
+} from './lib'
 import {
   type DashboardSectionId,
   DASHBOARD_DEFAULT_SECTION,
@@ -168,7 +168,8 @@ export function Dashboard() {
     },
     [navigate]
   )
-  const showSectionTabs = activeSection !== 'overview' && visibleSections.length > 1
+  const showSectionTabs =
+    activeSection !== 'overview' && visibleSections.length > 1
   const modelActions =
     activeSection === 'models' ? (
       <>
diff --git a/web/default/src/features/dashboard/lib/charts.ts b/web/default/src/features/dashboard/lib/charts.ts
index 7e86d9a2be5..a6092bb0bc9 100644
--- a/web/default/src/features/dashboard/lib/charts.ts
+++ b/web/default/src/features/dashboard/lib/charts.ts
@@ -71,9 +71,7 @@ export function processChartData(
     return (array: TooltipLineItem[]) => {
       const modelItems = array.filter((item) => !isOtherTooltipKey(item.key))
       const otherItems = array.filter((item) => isOtherTooltipKey(item.key))
-      modelItems.sort(
-        (a, b) => (Number(b.value) || 0) - (Number(a.value) || 0)
-      )
+      modelItems.sort((a, b) => (Number(b.value) || 0) - (Number(a.value) || 0))
       array = [...modelItems, ...otherItems]
 
       let sum = 0
@@ -91,13 +89,15 @@ export function processChartData(
 
       if (collapseOverflow && array.length > MAX_TOOLTIP_MODELS) {
         const visible = modelItems.slice(0, MAX_TOOLTIP_MODELS)
-        const otherSum = [...modelItems.slice(MAX_TOOLTIP_MODELS), ...otherItems]
-          .reduce((sum, item) => {
-            const raw = item.datum
-              ? Number((item.datum as Record<string, unknown>)?.rawQuota) || 0
-              : 0
-            return sum + raw
-          }, 0)
+        const otherSum = [
+          ...modelItems.slice(MAX_TOOLTIP_MODELS),
+          ...otherItems,
+        ].reduce((sum, item) => {
+          const raw = item.datum
+            ? Number((item.datum as Record<string, unknown>)?.rawQuota) || 0
+            : 0
+          return sum + raw
+        }, 0)
         array = [
           ...visible,
           {
diff --git a/web/default/src/features/dashboard/lib/filters.ts b/web/default/src/features/dashboard/lib/filters.ts
index 6c4a1f01f3f..9552d5f9570 100644
--- a/web/default/src/features/dashboard/lib/filters.ts
+++ b/web/default/src/features/dashboard/lib/filters.ts
@@ -99,9 +99,7 @@ export function getSavedChartPreferences(): DashboardChartPreferences {
       defaultTimeRangeDays: isTimeRangePresetDays(parsed.defaultTimeRangeDays)
         ? parsed.defaultTimeRangeDays
         : fallbackPreferences.defaultTimeRangeDays,
-      defaultTimeGranularity: isTimeGranularity(
-        parsed.defaultTimeGranularity
-      )
+      defaultTimeGranularity: isTimeGranularity(parsed.defaultTimeGranularity)
         ? parsed.defaultTimeGranularity
         : fallbackPreferences.defaultTimeGranularity,
     }
diff --git a/web/default/src/features/home/components/hero-buttons.tsx b/web/default/src/features/home/components/hero-buttons.tsx
index 8cdb82c6d39..b3ce28987d9 100644
--- a/web/default/src/features/home/components/hero-buttons.tsx
+++ b/web/default/src/features/home/components/hero-buttons.tsx
@@ -14,24 +14,20 @@ export function HeroButtons({ isAuthenticated }: HeroButtonsProps) {
   const { t } = useTranslation()
   if (isAuthenticated) {
     return (
-      <Button size='lg' asChild>
-        <Link to='/dashboard'>
-          {t('Go to Dashboard')} <ArrowRight className='ml-2 h-5 w-5' />
-        </Link>
+      <Button size='lg' render={<Link to='/dashboard' />}>
+        {t('Go to Dashboard')} <ArrowRight className='ml-2 h-5 w-5' />
       </Button>
     )
   }
 
   return (
     <>
-      <Button size='lg' asChild>
-        <Link to='/sign-up'>
-          {t('Get Started')}
-          <ArrowRight className='ml-2 h-5 w-5' />
-        </Link>
+      <Button size='lg' render={<Link to='/sign-up' />}>
+        {t('Get Started')}
+        <ArrowRight className='ml-2 h-5 w-5' />
       </Button>
-      <Button size='lg' variant='outline' asChild>
-        <Link to='/sign-in'>{t('Sign In')}</Link>
+      <Button size='lg' variant='outline' render={<Link to='/sign-in' />}>
+        {t('Sign In')}
       </Button>
     </>
   )
diff --git a/web/default/src/features/home/components/hero-terminal-demo.tsx b/web/default/src/features/home/components/hero-terminal-demo.tsx
index 6be8c649fce..1ff3a533fe9 100644
--- a/web/default/src/features/home/components/hero-terminal-demo.tsx
+++ b/web/default/src/features/home/components/hero-terminal-demo.tsx
@@ -40,7 +40,8 @@ const ACCENT_CLASSES: Record<
   blue: {
     activeText: 'text-blue-600 dark:text-blue-400',
     activeBorder: 'border-blue-500 dark:border-blue-400',
-    badge: 'bg-blue-500/10 text-blue-600 dark:bg-blue-400/10 dark:text-blue-400',
+    badge:
+      'bg-blue-500/10 text-blue-600 dark:bg-blue-400/10 dark:text-blue-400',
   },
   violet: {
     activeText: 'text-violet-600 dark:text-violet-400',
@@ -80,10 +81,7 @@ const API_DEMOS: ApiDemoConfig[] = [
     method: 'POST',
     endpoint: '/v1/responses',
     headers: ['"Authorization: Bearer sk-••••"'],
-    request: [
-      '"model": "your-model",',
-      '"input": "..."',
-    ],
+    request: ['"model": "your-model",', '"input": "..."'],
     response: [
       '{',
       '  "output": [{ "type": "output_text", "text": <text> }],',
@@ -209,10 +207,10 @@ export function HeroTerminalDemo() {
                 key={item.id}
                 onClick={() => handleSelect(index)}
                 className={cn(
-                  '-mb-px relative flex items-center gap-1.5 border-b-2 px-2.5 py-2.5 text-[11px] font-medium tracking-wide transition-colors sm:px-3 sm:text-xs',
+                  'relative -mb-px flex items-center gap-1.5 border-b-2 px-2.5 py-2.5 text-[11px] font-medium tracking-wide transition-colors sm:px-3 sm:text-xs',
                   isActive
                     ? `${tone.activeBorder} ${tone.activeText}`
-                    : 'border-transparent text-foreground/40 hover:text-foreground/70'
+                    : 'text-foreground/40 hover:text-foreground/70 border-transparent'
                 )}
               >
                 {item.label}
@@ -221,7 +219,7 @@ export function HeroTerminalDemo() {
           })}
           <div className='ml-auto flex items-center gap-2 pr-2 sm:pr-3'>
             <span className='inline-block size-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.45)]' />
-            <span className='font-mono text-[10px] tracking-wider text-foreground/40 uppercase'>
+            <span className='text-foreground/40 font-mono text-[10px] tracking-wider uppercase'>
               200 ok
             </span>
           </div>
@@ -244,7 +242,7 @@ export function HeroTerminalDemo() {
           </span>
           <code
             className={cn(
-              'truncate font-mono text-[12.5px] text-foreground/75 transition-opacity duration-200',
+              'text-foreground/75 truncate font-mono text-[12.5px] transition-opacity duration-200',
               transitioning ? 'opacity-0' : 'opacity-100'
             )}
           >
@@ -268,17 +266,17 @@ export function HeroTerminalDemo() {
             'border-border/40 bg-muted/30 dark:border-white/[0.05] dark:bg-white/[0.02]'
           )}
         >
-          <div className='flex items-center gap-3 text-[10px] tabular-nums text-foreground/40'>
+          <div className='text-foreground/40 flex items-center gap-3 text-[10px] tabular-nums'>
             <span className='flex items-center gap-1'>
               <span className='font-mono'>{demo.latency}</span>
               <span className='tracking-wider uppercase'>ms</span>
             </span>
-            <span className='size-1 rounded-full bg-foreground/15' />
+            <span className='bg-foreground/15 size-1 rounded-full' />
             <span className='flex items-center gap-1'>
               <span className='font-mono'>{demo.tokens}</span>
               <span className='tracking-wider uppercase'>tokens</span>
             </span>
-            <span className='size-1 rounded-full bg-foreground/15' />
+            <span className='bg-foreground/15 size-1 rounded-full' />
             <span className='flex items-center gap-1'>
               <span className='tracking-wider uppercase'>cost</span>
               <span className='font-mono'>
@@ -286,7 +284,7 @@ export function HeroTerminalDemo() {
               </span>
             </span>
           </div>
-          <span className='font-mono text-[10px] tracking-wider text-foreground/30 uppercase'>
+          <span className='text-foreground/30 font-mono text-[10px] tracking-wider uppercase'>
             stream · sse
           </span>
         </div>
@@ -352,9 +350,7 @@ function ResponseBlock(props: { demo: ApiDemoConfig; transitioning: boolean }) {
         )}
       >
         {demo.response.map((line, i) => (
-          <CodeLine key={i}>
-            {renderResponseLine(line, demo)}
-          </CodeLine>
+          <CodeLine key={i}>{renderResponseLine(line, demo)}</CodeLine>
         ))}
       </div>
     </div>
@@ -363,7 +359,7 @@ function ResponseBlock(props: { demo: ApiDemoConfig; transitioning: boolean }) {
 
 function SectionLabel(props: { children: ReactNode }) {
   return (
-    <span className='font-sans text-[10px] font-semibold tracking-[0.18em] text-foreground/30 uppercase'>
+    <span className='text-foreground/30 font-sans text-[10px] font-semibold tracking-[0.18em] uppercase'>
       {props.children}
     </span>
   )
@@ -401,9 +397,7 @@ function renderResponseLine(line: string, demo: ApiDemoConfig): ReactNode {
         </Accent>
       )
     } else if (placeholder === '<tokens>') {
-      segments.push(
-        <NumberText key={`ph-${idx}`}>{demo.tokens}</NumberText>
-      )
+      segments.push(<NumberText key={`ph-${idx}`}>{demo.tokens}</NumberText>)
     } else if (placeholder === '<in>') {
       segments.push(
         <NumberText key={`ph-${idx}`}>
@@ -472,7 +466,7 @@ function tokenize(input: string): ReactNode {
 
 function CodeLine(props: { children: ReactNode; indent?: number }) {
   return (
-    <div className='whitespace-pre-wrap break-words'>
+    <div className='break-words whitespace-pre-wrap'>
       {props.indent ? (
         <span
           aria-hidden
@@ -525,5 +519,7 @@ function Muted(props: { children: ReactNode }) {
 
 function Accent(props: { children: ReactNode; accent: AccentTone }) {
   const tone = ACCENT_CLASSES[props.accent]
-  return <span className={cn('font-medium', tone.activeText)}>{props.children}</span>
+  return (
+    <span className={cn('font-medium', tone.activeText)}>{props.children}</span>
+  )
 }
diff --git a/web/default/src/features/home/components/sections/cta.tsx b/web/default/src/features/home/components/sections/cta.tsx
index 42092ee0b7e..f14510c1592 100644
--- a/web/default/src/features/home/components/sections/cta.tsx
+++ b/web/default/src/features/home/components/sections/cta.tsx
@@ -47,18 +47,16 @@ export function CTA(props: CTAProps) {
           )}
         </p>
         <div className='mt-8 flex items-center justify-center gap-3'>
-          <Button className='group rounded-lg' asChild>
-            <Link to='/sign-up'>
-              {t('Get Started')}
-              <ArrowRight className='ml-1 size-3.5 transition-transform duration-200 group-hover:translate-x-0.5' />
-            </Link>
+          <Button className='group rounded-lg' render={<Link to='/sign-up' />}>
+            {t('Get Started')}
+            <ArrowRight className='ml-1 size-3.5 transition-transform duration-200 group-hover:translate-x-0.5' />
           </Button>
           <Button
             variant='outline'
             className='border-border/50 hover:border-border hover:bg-muted/50 rounded-lg'
-            asChild
+            render={<Link to='/pricing' />}
           >
-            <Link to='/pricing'>{t('View Pricing')}</Link>
+            {t('View Pricing')}
           </Button>
         </div>
       </AnimateInView>
diff --git a/web/default/src/features/home/components/sections/hero.tsx b/web/default/src/features/home/components/sections/hero.tsx
index 0807926ba8e..6187af27062 100644
--- a/web/default/src/features/home/components/sections/hero.tsx
+++ b/web/default/src/features/home/components/sections/hero.tsx
@@ -59,26 +59,28 @@ export function Hero(props: HeroProps) {
           style={{ animationDelay: '160ms' }}
         >
           {props.isAuthenticated ? (
-            <Button className='group rounded-lg' asChild>
-              <Link to='/dashboard'>
-                {t('Go to Dashboard')}
-                <ArrowRight className='ml-1 size-3.5 transition-transform duration-200 group-hover:translate-x-0.5' />
-              </Link>
+            <Button
+              className='group rounded-lg'
+              render={<Link to='/dashboard' />}
+            >
+              {t('Go to Dashboard')}
+              <ArrowRight className='ml-1 size-3.5 transition-transform duration-200 group-hover:translate-x-0.5' />
             </Button>
           ) : (
             <>
-              <Button className='group rounded-lg' asChild>
-                <Link to='/sign-up'>
-                  {t('Get Started')}
-                  <ArrowRight className='ml-1 size-3.5 transition-transform duration-200 group-hover:translate-x-0.5' />
-                </Link>
+              <Button
+                className='group rounded-lg'
+                render={<Link to='/sign-up' />}
+              >
+                {t('Get Started')}
+                <ArrowRight className='ml-1 size-3.5 transition-transform duration-200 group-hover:translate-x-0.5' />
               </Button>
               <Button
                 variant='outline'
                 className='border-border/50 hover:border-border hover:bg-muted/50 rounded-lg'
-                asChild
+                render={<Link to='/pricing' />}
               >
-                <Link to='/pricing'>{t('View Pricing')}</Link>
+                {t('View Pricing')}
               </Button>
             </>
           )}
diff --git a/web/default/src/features/keys/components/api-key-group-combobox.tsx b/web/default/src/features/keys/components/api-key-group-combobox.tsx
index a0f0952a7ed..275b75d2854 100644
--- a/web/default/src/features/keys/components/api-key-group-combobox.tsx
+++ b/web/default/src/features/keys/components/api-key-group-combobox.tsx
@@ -33,7 +33,10 @@ type ApiKeyGroupComboboxProps = {
   disabled?: boolean
 }
 
-function formatGroupRatio(ratio: ApiKeyGroupOption['ratio'], ratioLabel: string) {
+function formatGroupRatio(
+  ratio: ApiKeyGroupOption['ratio'],
+  ratioLabel: string
+) {
   if (ratio === undefined || ratio === null || ratio === '') return null
   return `${ratio}x ${ratioLabel}`
 }
@@ -109,35 +112,37 @@ export function ApiKeyGroupCombobox({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          type='button'
-          variant='outline'
-          role='combobox'
-          aria-expanded={open}
-          disabled={disabled}
-          className='border-input bg-muted/40 h-auto min-h-14 w-full justify-between gap-2 rounded-lg px-3 py-2 text-start shadow-none transition-[background-color,border-color,box-shadow] duration-150 hover:bg-muted/55 hover:text-foreground active:bg-background data-[state=open]:border-ring data-[state=open]:bg-background data-[state=open]:ring-ring/20 data-[state=open]:ring-[3px] sm:min-h-20 sm:gap-3 sm:px-4 sm:py-3'
-        >
-          <span className='flex min-w-0 flex-1 items-center justify-between gap-2 sm:gap-3'>
-            <span className='min-w-0'>
-              <span className='block truncate font-medium'>
-                {selectedOption?.value || placeholder || t('Select a group')}
-              </span>
-              {selectedOption?.desc && (
-                <span className='text-muted-foreground block truncate text-[11px] sm:text-xs'>
-                  {selectedOption.desc}
-                </span>
-              )}
-            </span>
-            <span className='hidden sm:block'>
-              <GroupRatioBadge ratio={selectedOption?.ratio} />
+      <PopoverTrigger
+        render={
+          <Button
+            type='button'
+            variant='outline'
+            role='combobox'
+            aria-expanded={open}
+            disabled={disabled}
+            className='border-input bg-muted/40 hover:bg-muted/55 hover:text-foreground active:bg-background data-popup-open:border-ring data-popup-open:bg-background data-popup-open:ring-ring/20 h-auto min-h-14 w-full justify-between gap-2 rounded-lg px-3 py-2 text-start shadow-none transition-[background-color,border-color,box-shadow] duration-150 data-popup-open:ring-[3px] sm:min-h-20 sm:gap-3 sm:px-4 sm:py-3'
+          />
+        }
+      >
+        <span className='flex min-w-0 flex-1 items-center justify-between gap-2 sm:gap-3'>
+          <span className='min-w-0'>
+            <span className='block truncate font-medium'>
+              {selectedOption?.value || placeholder || t('Select a group')}
             </span>
+            {selectedOption?.desc && (
+              <span className='text-muted-foreground block truncate text-[11px] sm:text-xs'>
+                {selectedOption.desc}
+              </span>
+            )}
+          </span>
+          <span className='hidden sm:block'>
+            <GroupRatioBadge ratio={selectedOption?.ratio} />
           </span>
-          <ChevronsUpDown className='h-4 w-4 shrink-0 opacity-50' />
-        </Button>
+        </span>
+        <ChevronsUpDown className='h-4 w-4 shrink-0 opacity-50' />
       </PopoverTrigger>
       <PopoverContent
-        className='data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-100 data-[side=bottom]:slide-in-from-top-0 data-[side=left]:slide-in-from-right-0 data-[side=right]:slide-in-from-left-0 data-[side=top]:slide-in-from-bottom-0 w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-xl p-0 shadow-lg data-[state=closed]:duration-75 data-[state=open]:duration-100'
+        className='data-closed:zoom-out-100 data-open:zoom-in-100 data-[side=bottom]:slide-in-from-top-0 data-[side=left]:slide-in-from-right-0 data-[side=right]:slide-in-from-left-0 data-[side=top]:slide-in-from-bottom-0 w-[var(--anchor-width)] overflow-hidden rounded-xl p-0 shadow-lg data-closed:duration-75 data-open:duration-100'
         onWheel={(event) => event.stopPropagation()}
         onTouchMove={(event) => event.stopPropagation()}
         onPointerDown={(event) => event.stopPropagation()}
@@ -156,7 +161,7 @@ export function ApiKeyGroupCombobox({
                   key={option.value}
                   value={option.value}
                   onSelect={handleSelect}
-                  className='items-start gap-3 rounded-lg px-3 py-3 transition-colors data-[selected=true]:bg-muted'
+                  className='data-[selected=true]:bg-muted items-start gap-3 rounded-lg px-3 py-3 transition-colors'
                 >
                   <Check
                     className={cn(
diff --git a/web/default/src/features/keys/components/api-keys-cells.tsx b/web/default/src/features/keys/components/api-keys-cells.tsx
index 3fb57396028..cd27e93506d 100644
--- a/web/default/src/features/keys/components/api-keys-cells.tsx
+++ b/web/default/src/features/keys/components/api-keys-cells.tsx
@@ -54,14 +54,16 @@ export function ApiKeyCell({ apiKey }: { apiKey: ApiKey }) {
   return (
     <div className='flex items-center'>
       <Popover open={popoverOpen} onOpenChange={handlePopoverOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant='ghost'
-            size='sm'
-            className='text-muted-foreground h-7 font-mono text-xs'
-          >
-            {maskedKey}
-          </Button>
+        <PopoverTrigger
+          render={
+            <Button
+              variant='ghost'
+              size='sm'
+              className='text-muted-foreground h-7 font-mono text-xs'
+            />
+          }
+        >
+          {maskedKey}
         </PopoverTrigger>
         <PopoverContent
           className='w-auto max-w-[min(90vw,28rem)]'
@@ -89,22 +91,24 @@ export function ApiKeyCell({ apiKey }: { apiKey: ApiKey }) {
         </PopoverContent>
       </Popover>
       <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant='ghost'
-            size='icon'
-            className='size-7 shrink-0'
-            onClick={handleCopy}
-            disabled={isLoading}
-          >
-            {isLoading ? (
-              <Loader2 className='size-3.5 animate-spin' />
-            ) : isCopied ? (
-              <Check className='size-3.5 text-green-600' />
-            ) : (
-              <Copy className='size-3.5' />
-            )}
-          </Button>
+        <TooltipTrigger
+          render={
+            <Button
+              variant='ghost'
+              size='icon'
+              className='size-7 shrink-0'
+              onClick={handleCopy}
+              disabled={isLoading}
+            />
+          }
+        >
+          {isLoading ? (
+            <Loader2 className='size-3.5 animate-spin' />
+          ) : isCopied ? (
+            <Check className='size-3.5 text-green-600' />
+          ) : (
+            <Copy className='size-3.5' />
+          )}
         </TooltipTrigger>
         <TooltipContent>
           {isLoading
@@ -131,14 +135,12 @@ export function ModelLimitsCell({ apiKey }: { apiKey: ApiKey }) {
 
   return (
     <Tooltip>
-      <TooltipTrigger asChild>
-        <span>
-          <StatusBadge
-            label={t('{{count}} model(s)', { count: models.length })}
-            variant='neutral'
-            copyable={false}
-          />
-        </span>
+      <TooltipTrigger render={<span />}>
+        <StatusBadge
+          label={t('{{count}} model(s)', { count: models.length })}
+          variant='neutral'
+          copyable={false}
+        />
       </TooltipTrigger>
       <TooltipContent side='top' className='max-w-xs'>
         <div className='max-h-[200px] space-y-0.5 overflow-y-auto text-xs'>
@@ -174,14 +176,12 @@ export function IpRestrictionsCell({ apiKey }: { apiKey: ApiKey }) {
 
   return (
     <Tooltip>
-      <TooltipTrigger asChild>
-        <span>
-          <StatusBadge
-            label={t('{{count}} IP(s)', { count: ips.length })}
-            variant='neutral'
-            copyable={false}
-          />
-        </span>
+      <TooltipTrigger render={<span />}>
+        <StatusBadge
+          label={t('{{count}} IP(s)', { count: ips.length })}
+          variant='neutral'
+          copyable={false}
+        />
       </TooltipTrigger>
       <TooltipContent side='top' className='max-w-xs'>
         <div className='max-h-[200px] space-y-0.5 overflow-y-auto text-xs'>
diff --git a/web/default/src/features/keys/components/api-keys-columns.tsx b/web/default/src/features/keys/components/api-keys-columns.tsx
index e74948f7d80..148484030f5 100644
--- a/web/default/src/features/keys/components/api-keys-columns.tsx
+++ b/web/default/src/features/keys/components/api-keys-columns.tsx
@@ -85,10 +85,8 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
       id: 'select',
       header: ({ table }) => (
         <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && 'indeterminate')
-          }
+          checked={table.getIsAllPageRowsSelected()}
+          indeterminate={table.getIsSomePageRowsSelected()}
           onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
           aria-label='Select all'
           className='translate-y-[2px]'
@@ -171,21 +169,19 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
 
         return (
           <Tooltip>
-            <TooltipTrigger asChild>
-              <div className='w-[150px] space-y-1'>
-                <div className='flex justify-between text-xs'>
-                  <span className='font-medium tabular-nums'>
-                    {formatQuota(remaining)}
-                  </span>
-                  <span className='text-muted-foreground tabular-nums'>
-                    {formatQuota(total)}
-                  </span>
-                </div>
-                <Progress
-                  value={percentage}
-                  className={cn('h-1.5', getQuotaProgressColor(percentage))}
-                />
+            <TooltipTrigger render={<div className='w-[150px] space-y-1' />}>
+              <div className='flex justify-between text-xs'>
+                <span className='font-medium tabular-nums'>
+                  {formatQuota(remaining)}
+                </span>
+                <span className='text-muted-foreground tabular-nums'>
+                  {formatQuota(total)}
+                </span>
               </div>
+              <Progress
+                value={percentage}
+                className={cn('h-1.5', getQuotaProgressColor(percentage))}
+              />
             </TooltipTrigger>
             <TooltipContent>
               <div className='space-y-1 text-xs'>
@@ -219,18 +215,20 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
         if (group === 'auto') {
           return (
             <Tooltip>
-              <TooltipTrigger asChild>
-                <span className='inline-flex items-center gap-1.5 text-xs'>
-                  <GroupBadge group='auto' />
-                  {apiKey.cross_group_retry && (
-                    <>
-                      <span className='text-muted-foreground/30'>·</span>
-                      <span className='text-muted-foreground/60'>
-                        {t('Cross-group')}
-                      </span>
-                    </>
-                  )}
-                </span>
+              <TooltipTrigger
+                render={
+                  <span className='inline-flex items-center gap-1.5 text-xs' />
+                }
+              >
+                <GroupBadge group='auto' />
+                {apiKey.cross_group_retry && (
+                  <>
+                    <span className='text-muted-foreground/30'>·</span>
+                    <span className='text-muted-foreground/60'>
+                      {t('Cross-group')}
+                    </span>
+                  </>
+                )}
               </TooltipTrigger>
               <TooltipContent>
                 <span className='text-xs'>
diff --git a/web/default/src/features/keys/components/api-keys-mutate-drawer.tsx b/web/default/src/features/keys/components/api-keys-mutate-drawer.tsx
index 8d19c292c34..9ce6331596b 100644
--- a/web/default/src/features/keys/components/api-keys-mutate-drawer.tsx
+++ b/web/default/src/features/keys/components/api-keys-mutate-drawer.tsx
@@ -84,7 +84,7 @@ function ApiKeyFormSection(props: ApiKeyFormSectionProps) {
           <Icon className='size-4 sm:size-5' />
         </div>
         <div className='min-w-0'>
-          <h3 className='text-sm font-medium leading-none'>{props.title}</h3>
+          <h3 className='text-sm leading-none font-medium'>{props.title}</h3>
           <p className='text-muted-foreground mt-0.5 text-xs sm:mt-1'>
             {props.description}
           </p>
@@ -285,10 +285,7 @@ export function ApiKeysMutateDrawer({
                   <FormItem>
                     <FormLabel>{t('Name')}</FormLabel>
                     <FormControl>
-                      <Input
-                        {...field}
-                        placeholder={t('Enter a name')}
-                      />
+                      <Input {...field} placeholder={t('Enter a name')} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -492,29 +489,31 @@ export function ApiKeysMutateDrawer({
 
             <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
               <section className='bg-card rounded-lg border'>
-                <CollapsibleTrigger asChild>
-                  <button
-                    type='button'
-                    className='hover:bg-muted/50 flex w-full items-center gap-2.5 px-3 py-2.5 text-left transition-colors sm:gap-3 sm:px-4 sm:py-3'
-                  >
-                    <div className='bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-lg border sm:size-10'>
-                      <Settings2 className='size-4 sm:size-5' />
-                    </div>
-                    <div className='min-w-0 flex-1'>
-                      <h3 className='text-sm font-medium leading-none'>
-                        {t('Advanced Settings')}
-                      </h3>
-                      <p className='text-muted-foreground mt-1 text-xs'>
-                        {t('Set API key access restrictions')}
-                      </p>
-                    </div>
-                    <ChevronDown
-                      className={cn(
-                        'text-muted-foreground size-4 shrink-0 transition-transform',
-                        advancedOpen && 'rotate-180'
-                      )}
+                <CollapsibleTrigger
+                  render={
+                    <button
+                      type='button'
+                      className='hover:bg-muted/50 flex w-full items-center gap-2.5 px-3 py-2.5 text-left transition-colors sm:gap-3 sm:px-4 sm:py-3'
                     />
-                  </button>
+                  }
+                >
+                  <div className='bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-lg border sm:size-10'>
+                    <Settings2 className='size-4 sm:size-5' />
+                  </div>
+                  <div className='min-w-0 flex-1'>
+                    <h3 className='text-sm leading-none font-medium'>
+                      {t('Advanced Settings')}
+                    </h3>
+                    <p className='text-muted-foreground mt-1 text-xs'>
+                      {t('Set API key access restrictions')}
+                    </p>
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      'text-muted-foreground size-4 shrink-0 transition-transform',
+                      advancedOpen && 'rotate-180'
+                    )}
+                  />
                 </CollapsibleTrigger>
                 <CollapsibleContent>
                   <div className='space-y-3 border-t p-3 sm:space-y-4 sm:p-4'>
@@ -579,10 +578,10 @@ export function ApiKeysMutateDrawer({
           </form>
         </Form>
         <SheetFooter className='bg-background grid grid-cols-2 gap-2 border-t px-3 py-3 sm:flex sm:flex-row sm:justify-end sm:px-5 sm:py-4'>
-          <SheetClose asChild>
-            <Button variant='outline' className='w-full sm:w-auto'>
-              {t('Close')}
-            </Button>
+          <SheetClose
+            render={<Button variant='outline' className='w-full sm:w-auto' />}
+          >
+            {t('Close')}
           </SheetClose>
           <Button
             form='api-key-form'
diff --git a/web/default/src/features/keys/components/api-keys-table.tsx b/web/default/src/features/keys/components/api-keys-table.tsx
index 51c9d12a452..affeb033f71 100644
--- a/web/default/src/features/keys/components/api-keys-table.tsx
+++ b/web/default/src/features/keys/components/api-keys-table.tsx
@@ -4,7 +4,6 @@ import { getRouteApi } from '@tanstack/react-router'
 import {
   type SortingState,
   type VisibilityState,
-  flexRender,
   getCoreRowModel,
   getFacetedRowModel,
   getFacetedUniqueValues,
@@ -13,29 +12,12 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-import { useMediaQuery } from '@/hooks'
+import { Database } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { formatQuota } from '@/lib/format'
 import { cn } from '@/lib/utils'
-import { Database } from 'lucide-react'
 import { useTableUrlState } from '@/hooks/use-table-url-state'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
-import {
-  DISABLED_ROW_DESKTOP,
-  DISABLED_ROW_MOBILE,
-  DataTablePagination,
-  DataTableToolbar,
-  TableSkeleton,
-  TableEmpty,
-} from '@/components/data-table'
 import {
   Empty,
   EmptyDescription,
@@ -43,8 +25,12 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from '@/components/ui/empty'
-import { PageFooterPortal } from '@/components/layout'
 import { Skeleton } from '@/components/ui/skeleton'
+import {
+  DISABLED_ROW_DESKTOP,
+  DISABLED_ROW_MOBILE,
+  DataTablePage,
+} from '@/components/data-table'
 import { StatusBadge } from '@/components/status-badge'
 import { getApiKeys, searchApiKeys } from '../api'
 import {
@@ -56,7 +42,6 @@ import {
 import { type ApiKey } from '../types'
 import { ApiKeyCell } from './api-keys-cells'
 import { useApiKeysColumns } from './api-keys-columns'
-import { ApiKeysPrimaryButtons } from './api-keys-primary-buttons'
 import { useApiKeys } from './api-keys-provider'
 import { DataTableBulkActions } from './data-table-bulk-actions'
 import { DataTableRowActions } from './data-table-row-actions'
@@ -188,7 +173,6 @@ export function ApiKeysTable() {
   const { t } = useTranslation()
   const { refreshTrigger } = useApiKeys()
   const columns = useApiKeysColumns()
-  const isMobile = useMediaQuery('(max-width: 640px)')
   const [rowSelection, setRowSelection] = useState({})
   const [sorting, setSorting] = useState<SortingState>([])
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
@@ -299,94 +283,31 @@ export function ApiKeysTable() {
   }, [pageCount, ensurePageInRange])
 
   return (
-    <>
-      <div className='space-y-3 sm:space-y-4'>
-        <div className='flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between'>
-          <ApiKeysPrimaryButtons />
-          <div className='min-w-0 sm:flex sm:justify-end'>
-            <DataTableToolbar
-              table={table}
-              searchPlaceholder={t('Filter by name or key...')}
-              filters={[
-                {
-                  columnId: 'status',
-                  title: t('Status'),
-                  options: API_KEY_STATUS_OPTIONS,
-                },
-              ]}
-            />
-          </div>
-        </div>
-        {isMobile ? (
-          <ApiKeysMobileList
-            table={table}
-            isLoading={isLoading}
-          />
-        ) : (
-          <div
-            className={cn(
-              'overflow-hidden rounded-md border transition-opacity duration-150',
-              isFetching && !isLoading && 'pointer-events-none opacity-50'
-            )}
-          >
-            <Table>
-              <TableHeader>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => (
-                      <TableHead key={header.id} colSpan={header.colSpan}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                      </TableHead>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody>
-                {isLoading ? (
-                  <TableSkeleton table={table} keyPrefix='api-keys-skeleton' />
-                ) : table.getRowModel().rows.length === 0 ? (
-                  <TableEmpty
-                    colSpan={columns.length}
-                    title={t('No API Keys Found')}
-                    description={t(
-                      'No API keys available. Create your first API key to get started.'
-                    )}
-                  />
-                ) : (
-                  table.getRowModel().rows.map((row) => (
-                    <TableRow
-                      key={row.id}
-                      data-state={row.getIsSelected() && 'selected'}
-                      className={cn(
-                        isDisabledApiKeyRow(row.original) &&
-                          DISABLED_ROW_DESKTOP
-                      )}
-                    >
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id}>
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext()
-                          )}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        )}
-        {!isMobile && <DataTableBulkActions table={table} />}
-      </div>
-      <PageFooterPortal>
-        <DataTablePagination table={table} />
-      </PageFooterPortal>
-    </>
+    <DataTablePage
+      table={table}
+      columns={columns}
+      isLoading={isLoading}
+      isFetching={isFetching}
+      emptyTitle={t('No API Keys Found')}
+      emptyDescription={t(
+        'No API keys available. Create your first API key to get started.'
+      )}
+      skeletonKeyPrefix='api-keys-skeleton'
+      toolbarProps={{
+        searchPlaceholder: t('Filter by name or key...'),
+        filters: [
+          {
+            columnId: 'status',
+            title: t('Status'),
+            options: API_KEY_STATUS_OPTIONS,
+          },
+        ],
+      }}
+      mobile={<ApiKeysMobileList table={table} isLoading={isLoading} />}
+      getRowClassName={(row) =>
+        isDisabledApiKeyRow(row.original) ? DISABLED_ROW_DESKTOP : undefined
+      }
+      bulkActions={<DataTableBulkActions table={table} />}
+    />
   )
 }
diff --git a/web/default/src/features/keys/components/data-table-bulk-actions.tsx b/web/default/src/features/keys/components/data-table-bulk-actions.tsx
index ba17bd12641..aa625acc59c 100644
--- a/web/default/src/features/keys/components/data-table-bulk-actions.tsx
+++ b/web/default/src/features/keys/components/data-table-bulk-actions.tsx
@@ -64,21 +64,23 @@ export function DataTableBulkActions<TData>({
     <>
       <BulkActionsToolbar table={table} entityName='API key'>
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='outline'
-              size='icon'
-              className='size-8'
-              onClick={handleBatchCopy}
-              disabled={isCopying}
-              aria-label={t('Copy selected keys')}
-            >
-              {isCopying ? (
-                <Loader2 className='size-4 animate-spin' />
-              ) : (
-                <Copy className='size-4' />
-              )}
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='outline'
+                size='icon'
+                className='size-8'
+                onClick={handleBatchCopy}
+                disabled={isCopying}
+                aria-label={t('Copy selected keys')}
+              />
+            }
+          >
+            {isCopying ? (
+              <Loader2 className='size-4 animate-spin' />
+            ) : (
+              <Copy className='size-4' />
+            )}
           </TooltipTrigger>
           <TooltipContent>
             <p>{t('Copy selected keys')}</p>
@@ -86,17 +88,19 @@ export function DataTableBulkActions<TData>({
         </Tooltip>
 
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='destructive'
-              size='icon'
-              onClick={() => setShowDeleteConfirm(true)}
-              className='size-8'
-              aria-label={t('Delete selected API keys')}
-            >
-              <Trash2 />
-              <span className='sr-only'>{t('Delete selected API keys')}</span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='destructive'
+                size='icon'
+                onClick={() => setShowDeleteConfirm(true)}
+                className='size-8'
+                aria-label={t('Delete selected API keys')}
+              />
+            }
+          >
+            <Trash2 />
+            <span className='sr-only'>{t('Delete selected API keys')}</span>
           </TooltipTrigger>
           <TooltipContent>
             <p>{t('Delete selected API keys')}</p>
diff --git a/web/default/src/features/keys/components/data-table-row-actions.tsx b/web/default/src/features/keys/components/data-table-row-actions.tsx
index 569985f11e6..8b16bcb67af 100644
--- a/web/default/src/features/keys/components/data-table-row-actions.tsx
+++ b/web/default/src/features/keys/components/data-table-row-actions.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useState } from 'react'
-import { DotsHorizontalIcon } from '@radix-ui/react-icons'
 import { type Row } from '@tanstack/react-table'
 import {
   Trash2,
@@ -11,6 +10,7 @@ import {
   Copy,
   Link,
   Loader2,
+  MoreHorizontal as DotsHorizontalIcon,
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
@@ -154,27 +154,29 @@ export function DataTableRowActions<TData>({
   return (
     <div className='flex items-center justify-end gap-1'>
       <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant='ghost'
-            size='icon-sm'
-            onClick={handleToggleStatus}
-            disabled={isTogglingStatus}
-            aria-label={isEnabled ? t('Disable') : t('Enable')}
-            className={
-              isEnabled
-                ? 'text-destructive hover:text-destructive'
-                : 'text-emerald-600 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-400'
-            }
-          >
-            {isTogglingStatus ? (
-              <Loader2 className='size-4 animate-spin' />
-            ) : isEnabled ? (
-              <PowerOff className='size-4' />
-            ) : (
-              <Power className='size-4' />
-            )}
-          </Button>
+        <TooltipTrigger
+          render={
+            <Button
+              variant='ghost'
+              size='icon-sm'
+              onClick={handleToggleStatus}
+              disabled={isTogglingStatus}
+              aria-label={isEnabled ? t('Disable') : t('Enable')}
+              className={
+                isEnabled
+                  ? 'text-destructive hover:text-destructive'
+                  : 'text-emerald-600 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-400'
+              }
+            />
+          }
+        >
+          {isTogglingStatus ? (
+            <Loader2 className='size-4 animate-spin' />
+          ) : isEnabled ? (
+            <PowerOff className='size-4' />
+          ) : (
+            <Power className='size-4' />
+          )}
         </TooltipTrigger>
         <TooltipContent>
           {isEnabled ? t('Disable') : t('Enable')}
@@ -182,14 +184,16 @@ export function DataTableRowActions<TData>({
       </Tooltip>
 
       <DropdownMenu modal={false}>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant='ghost'
-            className='data-[state=open]:bg-muted flex h-8 w-8 p-0'
-          >
-            <DotsHorizontalIcon className='h-4 w-4' />
-            <span className='sr-only'>{t('Open menu')}</span>
-          </Button>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              variant='ghost'
+              className='data-popup-open:bg-muted flex h-8 w-8 p-0'
+            />
+          }
+        >
+          <DotsHorizontalIcon className='h-4 w-4' />
+          <span className='sr-only'>{t('Open menu')}</span>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='end' className='w-[200px]'>
           <DropdownMenuItem
diff --git a/web/default/src/features/keys/index.tsx b/web/default/src/features/keys/index.tsx
index c7bb51fcaca..83acad50fe9 100644
--- a/web/default/src/features/keys/index.tsx
+++ b/web/default/src/features/keys/index.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { SectionPageLayout } from '@/components/layout'
 import { ApiKeysDialogs } from './components/api-keys-dialogs'
+import { ApiKeysPrimaryButtons } from './components/api-keys-primary-buttons'
 import { ApiKeysProvider } from './components/api-keys-provider'
 import { ApiKeysTable } from './components/api-keys-table'
 
@@ -13,6 +14,9 @@ export function ApiKeys() {
         <SectionPageLayout.Description>
           {t('Manage your API keys for accessing the service')}
         </SectionPageLayout.Description>
+        <SectionPageLayout.Actions>
+          <ApiKeysPrimaryButtons />
+        </SectionPageLayout.Actions>
         <SectionPageLayout.Content>
           <ApiKeysTable />
         </SectionPageLayout.Content>
diff --git a/web/default/src/features/legal/legal-document.tsx b/web/default/src/features/legal/legal-document.tsx
index 9df00f847c8..7a483009f8d 100644
--- a/web/default/src/features/legal/legal-document.tsx
+++ b/web/default/src/features/legal/legal-document.tsx
@@ -96,10 +96,16 @@ export function LegalDocument({
                   'The administrator configured an external link for this document.'
                 )}
               </p>
-              <Button asChild>
-                <a href={rawContent} target='_blank' rel='noopener noreferrer'>
-                  {t('View document')}
-                </a>
+              <Button
+                render={
+                  <a
+                    href={rawContent}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                  />
+                }
+              >
+                {t('View document')}
               </Button>
             </CardContent>
           </Card>
diff --git a/web/default/src/features/models/components/data-table-bulk-actions.tsx b/web/default/src/features/models/components/data-table-bulk-actions.tsx
index 1cbd0f40308..629c48e67a2 100644
--- a/web/default/src/features/models/components/data-table-bulk-actions.tsx
+++ b/web/default/src/features/models/components/data-table-bulk-actions.tsx
@@ -84,18 +84,20 @@ export function DataTableBulkActions<TData>({
     <>
       <BulkActionsToolbar table={table} entityName='model'>
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='outline'
-              size='icon'
-              onClick={handleEnableAll}
-              className='size-8'
-              aria-label={t('Enable selected models')}
-              title={t('Enable selected models')}
-            >
-              <Power />
-              <span className='sr-only'>{t('Enable selected models')}</span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='outline'
+                size='icon'
+                onClick={handleEnableAll}
+                className='size-8'
+                aria-label={t('Enable selected models')}
+                title={t('Enable selected models')}
+              />
+            }
+          >
+            <Power />
+            <span className='sr-only'>{t('Enable selected models')}</span>
           </TooltipTrigger>
           <TooltipContent>
             <p>{t('Enable selected models')}</p>
@@ -103,18 +105,20 @@ export function DataTableBulkActions<TData>({
         </Tooltip>
 
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='outline'
-              size='icon'
-              onClick={handleDisableAll}
-              className='size-8'
-              aria-label={t('Disable selected models')}
-              title={t('Disable selected models')}
-            >
-              <PowerOff />
-              <span className='sr-only'>{t('Disable selected models')}</span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='outline'
+                size='icon'
+                onClick={handleDisableAll}
+                className='size-8'
+                aria-label={t('Disable selected models')}
+                title={t('Disable selected models')}
+              />
+            }
+          >
+            <PowerOff />
+            <span className='sr-only'>{t('Disable selected models')}</span>
           </TooltipTrigger>
           <TooltipContent>
             <p>{t('Disable selected models')}</p>
@@ -122,18 +126,20 @@ export function DataTableBulkActions<TData>({
         </Tooltip>
 
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='outline'
-              size='icon'
-              onClick={handleCopyNames}
-              className='size-8'
-              aria-label={t('Copy model names')}
-              title={t('Copy model names')}
-            >
-              <Copy />
-              <span className='sr-only'>{t('Copy model names')}</span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='outline'
+                size='icon'
+                onClick={handleCopyNames}
+                className='size-8'
+                aria-label={t('Copy model names')}
+                title={t('Copy model names')}
+              />
+            }
+          >
+            <Copy />
+            <span className='sr-only'>{t('Copy model names')}</span>
           </TooltipTrigger>
           <TooltipContent>
             <p>{t('Copy model names')}</p>
@@ -141,18 +147,20 @@ export function DataTableBulkActions<TData>({
         </Tooltip>
 
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='destructive'
-              size='icon'
-              onClick={() => setShowDeleteConfirm(true)}
-              className='size-8'
-              aria-label={t('Delete selected models')}
-              title={t('Delete selected models')}
-            >
-              <Trash2 />
-              <span className='sr-only'>{t('Delete selected models')}</span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='destructive'
+                size='icon'
+                onClick={() => setShowDeleteConfirm(true)}
+                className='size-8'
+                aria-label={t('Delete selected models')}
+                title={t('Delete selected models')}
+              />
+            }
+          >
+            <Trash2 />
+            <span className='sr-only'>{t('Delete selected models')}</span>
           </TooltipTrigger>
           <TooltipContent>
             <p>{t('Delete selected models')}</p>
diff --git a/web/default/src/features/models/components/data-table-row-actions.tsx b/web/default/src/features/models/components/data-table-row-actions.tsx
index 302c7049add..de20680a248 100644
--- a/web/default/src/features/models/components/data-table-row-actions.tsx
+++ b/web/default/src/features/models/components/data-table-row-actions.tsx
@@ -45,14 +45,16 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant='ghost'
-          className='data-[state=open]:bg-muted flex h-8 w-8 p-0'
-        >
-          <MoreHorizontal className='h-4 w-4' />
-          <span className='sr-only'>{t('Open menu')}</span>
-        </Button>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant='ghost'
+            className='data-popup-open:bg-muted flex h-8 w-8 p-0'
+          />
+        }
+      >
+        <MoreHorizontal className='h-4 w-4' />
+        <span className='sr-only'>{t('Open menu')}</span>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end' className='w-48'>
         {/* Edit */}
diff --git a/web/default/src/features/models/components/deployments-table.tsx b/web/default/src/features/models/components/deployments-table.tsx
index a86630af461..410748f6549 100644
--- a/web/default/src/features/models/components/deployments-table.tsx
+++ b/web/default/src/features/models/components/deployments-table.tsx
@@ -2,7 +2,6 @@ import { useEffect, useMemo, useState } from 'react'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { getRouteApi } from '@tanstack/react-router'
 import {
-  flexRender,
   getCoreRowModel,
   useReactTable,
   type VisibilityState,
@@ -10,7 +9,6 @@ import {
 import { useMediaQuery } from '@/hooks'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
-import { cn } from '@/lib/utils'
 import { useTableUrlState } from '@/hooks/use-table-url-state'
 import {
   AlertDialog,
@@ -22,22 +20,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
-import {
-  DataTableToolbar,
-  MobileCardList,
-  TableEmpty,
-  TableSkeleton,
-} from '@/components/data-table'
-import { DataTablePagination } from '@/components/data-table/pagination'
-import { PageFooterPortal } from '@/components/layout'
+import { DataTablePage } from '@/components/data-table'
 import { deleteDeployment, listDeployments, searchDeployments } from '../api'
 import { getDeploymentStatusOptions } from '../constants'
 import { deploymentsQueryKeys } from '../lib'
@@ -229,95 +212,29 @@ export function DeploymentsTable() {
 
   return (
     <>
-      <div className='space-y-3 sm:space-y-4'>
-        <DataTableToolbar
-          table={table}
-          searchPlaceholder={t('Search deployments...')}
-          filters={[
+      <DataTablePage
+        table={table}
+        columns={columns}
+        isLoading={isLoading}
+        isFetching={isFetching}
+        emptyTitle={t('No Deployments Found')}
+        emptyDescription={t(
+          'No deployments available. Create one to get started.'
+        )}
+        skeletonKeyPrefix='deployment-skeleton'
+        applyHeaderSize
+        toolbarProps={{
+          searchPlaceholder: t('Search deployments...'),
+          filters: [
             {
               columnId: 'status',
               title: t('Status'),
               options: statusFilterOptions,
               singleSelect: true,
             },
-          ]}
-        />
-
-        {isMobile ? (
-          <MobileCardList
-            table={table}
-            isLoading={isLoading}
-            emptyTitle={t('No Deployments Found')}
-            emptyDescription={t(
-              'No deployments available. Create one to get started.'
-            )}
-          />
-        ) : (
-          <div
-            className={cn(
-              'overflow-hidden rounded-md border transition-opacity duration-150',
-              isFetching && !isLoading && 'pointer-events-none opacity-50'
-            )}
-          >
-            <Table>
-              <TableHeader>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => (
-                      <TableHead
-                        key={header.id}
-                        style={{ width: header.getSize() }}
-                      >
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                      </TableHead>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody>
-                {isLoading ? (
-                  <TableSkeleton
-                    table={table}
-                    keyPrefix='deployment-skeleton'
-                  />
-                ) : table.getRowModel().rows.length === 0 ? (
-                  <TableEmpty
-                    colSpan={table.getVisibleLeafColumns().length}
-                    title={t('No Deployments Found')}
-                    description={t(
-                      'No deployments available. Create one to get started.'
-                    )}
-                  />
-                ) : (
-                  table.getRowModel().rows.map((row) => (
-                    <TableRow key={row.id}>
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id}>
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext()
-                          )}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        )}
-      </div>
-
-      <PageFooterPortal>
-        <DataTablePagination
-          table={table as ReturnType<typeof useReactTable>}
-        />
-      </PageFooterPortal>
+          ],
+        }}
+      />
 
       <ViewLogsDialog
         open={logsOpen}
diff --git a/web/default/src/features/models/components/dialogs/create-deployment-drawer.tsx b/web/default/src/features/models/components/dialogs/create-deployment-drawer.tsx
index 3b4ee0f649d..046bcc272b5 100644
--- a/web/default/src/features/models/components/dialogs/create-deployment-drawer.tsx
+++ b/web/default/src/features/models/components/dialogs/create-deployment-drawer.tsx
@@ -730,8 +730,8 @@ export function CreateDeploymentDrawer({
         </Form>
 
         <SheetFooter className='gap-2'>
-          <SheetClose asChild>
-            <Button variant='outline'>{t('Cancel')}</Button>
+          <SheetClose render={<Button variant='outline' />}>
+            {t('Cancel')}
           </SheetClose>
           <Button
             form='deployment-form'
diff --git a/web/default/src/features/models/components/dialogs/missing-models-dialog.tsx b/web/default/src/features/models/components/dialogs/missing-models-dialog.tsx
index c018610e17c..097246e88a0 100644
--- a/web/default/src/features/models/components/dialogs/missing-models-dialog.tsx
+++ b/web/default/src/features/models/components/dialogs/missing-models-dialog.tsx
@@ -100,11 +100,7 @@ export function MissingModelsDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         className='flex max-h-[85vh] max-w-2xl flex-col gap-3 p-4'
-        onOpenAutoFocus={(event) => {
-          if (isMobile) {
-            event.preventDefault()
-          }
-        }}
+        initialFocus={!isMobile}
       >
         <DialogHeader className='flex-shrink-0 text-start'>
           <DialogTitle>{t('Missing Models')}</DialogTitle>
diff --git a/web/default/src/features/models/components/dialogs/prefill-group-management-dialog.tsx b/web/default/src/features/models/components/dialogs/prefill-group-management-dialog.tsx
index 2b3eb0c3e70..2ec7817eebd 100644
--- a/web/default/src/features/models/components/dialogs/prefill-group-management-dialog.tsx
+++ b/web/default/src/features/models/components/dialogs/prefill-group-management-dialog.tsx
@@ -183,15 +183,17 @@ export function PrefillGroupManagementDialog({
                 </DialogDescription>
               </DialogHeader>
 
-              <DialogClose asChild>
-                <Button
-                  variant='ghost'
-                  size='icon'
-                  className='text-muted-foreground hover:text-foreground absolute top-4 right-4 rounded-full border border-transparent sm:top-5 sm:right-6'
-                >
-                  <span className='sr-only'>{t('Close dialog')}</span>
-                  <X className='h-4 w-4' />
-                </Button>
+              <DialogClose
+                render={
+                  <Button
+                    variant='ghost'
+                    size='icon'
+                    className='text-muted-foreground hover:text-foreground absolute top-4 right-4 rounded-full border border-transparent sm:top-5 sm:right-6'
+                  />
+                }
+              >
+                <span className='sr-only'>{t('Close dialog')}</span>
+                <X className='h-4 w-4' />
               </DialogClose>
             </div>
 
diff --git a/web/default/src/features/models/components/dialogs/sync-wizard-dialog.tsx b/web/default/src/features/models/components/dialogs/sync-wizard-dialog.tsx
index 07cdc8be41e..c03dc4093c3 100644
--- a/web/default/src/features/models/components/dialogs/sync-wizard-dialog.tsx
+++ b/web/default/src/features/models/components/dialogs/sync-wizard-dialog.tsx
@@ -110,11 +110,7 @@ export function SyncWizardDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
         className='flex max-h-[90vh] w-full flex-col gap-4 p-4 sm:max-w-2xl sm:p-6'
-        onOpenAutoFocus={(event) => {
-          if (isMobile) {
-            event.preventDefault()
-          }
-        }}
+        initialFocus={!isMobile}
       >
         <DialogHeader className='flex-shrink-0 text-start'>
           <DialogTitle>{t('Sync Upstream Models')}</DialogTitle>
diff --git a/web/default/src/features/models/components/dialogs/upstream-conflict-dialog.tsx b/web/default/src/features/models/components/dialogs/upstream-conflict-dialog.tsx
index db86ecaea0b..95a406bd43f 100644
--- a/web/default/src/features/models/components/dialogs/upstream-conflict-dialog.tsx
+++ b/web/default/src/features/models/components/dialogs/upstream-conflict-dialog.tsx
@@ -230,15 +230,17 @@ export function UpstreamConflictDialog({
       enableHiding: false,
       cell: ({ row }) => (
         <Popover>
-          <PopoverTrigger asChild>
-            <Button
-              variant='ghost'
-              size='sm'
-              className={isMobile ? 'h-7 w-7 p-0' : 'h-7 gap-2 px-2 text-xs'}
-            >
-              <MousePointerClick className='h-3.5 w-3.5' />
-              {!isMobile && 'View diff'}
-            </Button>
+          <PopoverTrigger
+            render={
+              <Button
+                variant='ghost'
+                size='sm'
+                className={isMobile ? 'h-7 w-7 p-0' : 'h-7 gap-2 px-2 text-xs'}
+              />
+            }
+          >
+            <MousePointerClick className='h-3.5 w-3.5' />
+            {!isMobile && 'View diff'}
           </PopoverTrigger>
           <PopoverContent className='w-[min(90vw,24rem)] space-y-4 text-sm'>
             <div>
@@ -279,10 +281,8 @@ export function UpstreamConflictDialog({
       id: 'select',
       header: ({ table }) => (
         <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && 'indeterminate')
-          }
+          checked={table.getIsAllPageRowsSelected()}
+          indeterminate={table.getIsSomePageRowsSelected()}
           onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
           aria-label='Select all'
         />
@@ -437,11 +437,7 @@ export function UpstreamConflictDialog({
     >
       <DialogContent
         className='flex max-h-[90vh] w-full flex-col gap-4 p-4 sm:max-w-5xl sm:p-6'
-        onOpenAutoFocus={(event) => {
-          if (isMobile) {
-            event.preventDefault()
-          }
-        }}
+        initialFocus={!isMobile}
       >
         <div className='flex min-h-0 flex-1 flex-col gap-4 overflow-hidden'>
           <DialogHeader className='flex-shrink-0 text-start'>
diff --git a/web/default/src/features/models/components/dialogs/view-details-dialog.tsx b/web/default/src/features/models/components/dialogs/view-details-dialog.tsx
index ae2a9d33344..e23c2e8905c 100644
--- a/web/default/src/features/models/components/dialogs/view-details-dialog.tsx
+++ b/web/default/src/features/models/components/dialogs/view-details-dialog.tsx
@@ -105,7 +105,7 @@ export function ViewDetailsDialog({
         </DialogHeader>
 
         <div className='max-h-[calc(100dvh-8.5rem)] space-y-3 overflow-y-auto py-2 pr-1 sm:max-h-[72vh] sm:space-y-4'>
-            <div className='flex flex-wrap items-center justify-between gap-2'>
+          <div className='flex flex-wrap items-center justify-between gap-2'>
             <div className='text-muted-foreground text-sm'>
               {t('Deployment ID')}:{' '}
               <span className='font-mono'>{deploymentId}</span>
@@ -252,7 +252,11 @@ export function ViewDetailsDialog({
         </div>
 
         <DialogFooter>
-          <Button variant='outline' onClick={() => onOpenChange(false)} className='w-full sm:w-auto'>
+          <Button
+            variant='outline'
+            onClick={() => onOpenChange(false)}
+            className='w-full sm:w-auto'
+          >
             {t('Close')}
           </Button>
         </DialogFooter>
diff --git a/web/default/src/features/models/components/dialogs/view-logs-dialog.tsx b/web/default/src/features/models/components/dialogs/view-logs-dialog.tsx
index 14e44da0cdb..5fb91f2c4fa 100644
--- a/web/default/src/features/models/components/dialogs/view-logs-dialog.tsx
+++ b/web/default/src/features/models/components/dialogs/view-logs-dialog.tsx
@@ -176,7 +176,7 @@ export function ViewLogsDialog({
             </div>
             <Select
               value={containerId}
-              onValueChange={(v) => setContainerId(v)}
+              onValueChange={(v) => v !== null && setContainerId(v)}
               disabled={isLoadingContainers || containers.length === 0}
             >
               <SelectTrigger>
diff --git a/web/default/src/features/models/components/drawers/model-mutate-drawer.tsx b/web/default/src/features/models/components/drawers/model-mutate-drawer.tsx
index 996de746088..8ee6bc618fe 100644
--- a/web/default/src/features/models/components/drawers/model-mutate-drawer.tsx
+++ b/web/default/src/features/models/components/drawers/model-mutate-drawer.tsx
@@ -793,7 +793,11 @@ export function ModelMutateDrawer({
             <div className='space-y-4'>
               <div className='flex items-center justify-between'>
                 <h3 className='text-sm font-semibold'>{t('Endpoints')}</h3>
-                <Select onValueChange={handleFillEndpointTemplate}>
+                <Select<string>
+                  onValueChange={(v) =>
+                    v !== null && handleFillEndpointTemplate(v)
+                  }
+                >
                   <SelectTrigger size='sm' className='w-[200px]'>
                     <SelectValue placeholder={t('Load template...')} />
                   </SelectTrigger>
@@ -1049,19 +1053,21 @@ export function ModelMutateDrawer({
                     open={advancedOpen}
                     onOpenChange={setAdvancedOpen}
                   >
-                    <CollapsibleTrigger asChild>
-                      <Button
-                        type='button'
-                        variant='outline'
-                        className='flex w-full items-center justify-between'
-                      >
-                        {t('Advanced options')}
-                        <ChevronDown
-                          className={`h-4 w-4 transition-transform duration-200 ${
-                            advancedOpen ? 'rotate-180' : ''
-                          }`}
+                    <CollapsibleTrigger
+                      render={
+                        <Button
+                          type='button'
+                          variant='outline'
+                          className='flex w-full items-center justify-between'
                         />
-                      </Button>
+                      }
+                    >
+                      {t('Advanced options')}
+                      <ChevronDown
+                        className={`h-4 w-4 transition-transform duration-200 ${
+                          advancedOpen ? 'rotate-180' : ''
+                        }`}
+                      />
                     </CollapsibleTrigger>
                     <CollapsibleContent className='space-y-6 pt-6'>
                       <FormField
@@ -1233,10 +1239,10 @@ export function ModelMutateDrawer({
         </Form>
 
         <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
-          <SheetClose asChild>
-            <Button variant='outline' disabled={isSubmitting}>
-              {t('Cancel')}
-            </Button>
+          <SheetClose
+            render={<Button variant='outline' disabled={isSubmitting} />}
+          >
+            {t('Cancel')}
           </SheetClose>
           <Button form='model-form' type='submit' disabled={isSubmitting}>
             {isSubmitting && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
diff --git a/web/default/src/features/models/components/drawers/prefill-group-form-drawer.tsx b/web/default/src/features/models/components/drawers/prefill-group-form-drawer.tsx
index 0930118132f..60f8c1a85a3 100644
--- a/web/default/src/features/models/components/drawers/prefill-group-form-drawer.tsx
+++ b/web/default/src/features/models/components/drawers/prefill-group-form-drawer.tsx
@@ -253,8 +253,9 @@ export function PrefillGroupFormDrawer({
                     <FormLabel>Group Type</FormLabel>
                     <Select
                       value={field.value}
-                      onValueChange={(value: PrefillGroupType) =>
-                        field.onChange(value)
+                      onValueChange={(value) =>
+                        value !== null &&
+                        field.onChange(value as PrefillGroupType)
                       }
                     >
                       <FormControl>
@@ -344,10 +345,12 @@ export function PrefillGroupFormDrawer({
         </Form>
 
         <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
-          <SheetClose asChild>
-            <Button type='button' variant='outline' disabled={isSaving}>
-              {t('Cancel')}
-            </Button>
+          <SheetClose
+            render={
+              <Button type='button' variant='outline' disabled={isSaving} />
+            }
+          >
+            {t('Cancel')}
           </SheetClose>
           <Button type='submit' form='prefill-group-form' disabled={isSaving}>
             {isSaving && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
diff --git a/web/default/src/features/models/components/models-columns.tsx b/web/default/src/features/models/components/models-columns.tsx
index 08eb35c63a8..85a7b05adf7 100644
--- a/web/default/src/features/models/components/models-columns.tsx
+++ b/web/default/src/features/models/components/models-columns.tsx
@@ -73,10 +73,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
       id: 'select',
       header: ({ table }) => (
         <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && 'indeterminate')
-          }
+          checked={table.getIsAllPageRowsSelected()}
+          indeterminate={table.getIsSomePageRowsSelected()}
           onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
           aria-label='Select all'
         />
@@ -202,9 +200,7 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
           return (
             <TooltipProvider>
               <Tooltip>
-                <TooltipTrigger asChild>
-                  <div>{badge}</div>
-                </TooltipTrigger>
+                <TooltipTrigger render={<div />}>{badge}</TooltipTrigger>
                 <TooltipContent
                   side='top'
                   className='border-border bg-popover max-h-48 max-w-[320px] overflow-y-auto p-2'
@@ -324,8 +320,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
         return (
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedItems(tagBadges, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedItems(tagBadges, 2)}
               </TooltipTrigger>
               {tagArray.length > 2 && (
                 <TooltipContent
@@ -363,8 +359,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
         return (
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedItems(endpointBadges, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedItems(endpointBadges, 2)}
               </TooltipTrigger>
               {endpointArray.length > 2 && (
                 <TooltipContent
@@ -411,8 +407,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
         return (
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedItems(channelBadges, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedItems(channelBadges, 2)}
               </TooltipTrigger>
               {channels.length > 2 && (
                 <TooltipContent
@@ -451,8 +447,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
         return (
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedItems(groupBadges, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedItems(groupBadges, 2)}
               </TooltipTrigger>
               {groups.length > 2 && (
                 <TooltipContent
@@ -504,8 +500,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
         return (
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedItems(quotaBadges, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedItems(quotaBadges, 2)}
               </TooltipTrigger>
               {quotaTypes.length > 2 && (
                 <TooltipContent
diff --git a/web/default/src/features/models/components/models-primary-buttons.tsx b/web/default/src/features/models/components/models-primary-buttons.tsx
index f8993379fad..4e5bb192bc6 100644
--- a/web/default/src/features/models/components/models-primary-buttons.tsx
+++ b/web/default/src/features/models/components/models-primary-buttons.tsx
@@ -53,10 +53,8 @@ export function ModelsPrimaryButtons() {
 
       {/* More Actions */}
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant='outline' size='sm'>
-            <MoreHorizontal className='h-4 w-4' />
-          </Button>
+        <DropdownMenuTrigger render={<Button variant='outline' size='sm' />}>
+          <MoreHorizontal className='h-4 w-4' />
         </DropdownMenuTrigger>
         <DropdownMenuContent align='end' className='w-56'>
           <DropdownMenuItem onClick={handleMissingModels}>
diff --git a/web/default/src/features/models/components/models-table.tsx b/web/default/src/features/models/components/models-table.tsx
index d7881026206..87101c5de7b 100644
--- a/web/default/src/features/models/components/models-table.tsx
+++ b/web/default/src/features/models/components/models-table.tsx
@@ -2,7 +2,6 @@ import { useState, useMemo, useEffect } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { getRouteApi } from '@tanstack/react-router'
 import {
-  flexRender,
   getCoreRowModel,
   useReactTable,
   type SortingState,
@@ -10,24 +9,8 @@ import {
 } from '@tanstack/react-table'
 import { useMediaQuery } from '@/hooks'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
 import { useTableUrlState } from '@/hooks/use-table-url-state'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
-import {
-  DataTableToolbar,
-  TableSkeleton,
-  TableEmpty,
-  MobileCardList,
-} from '@/components/data-table'
-import { DataTablePagination } from '@/components/data-table/pagination'
-import { PageFooterPortal } from '@/components/layout'
+import { DataTablePage } from '@/components/data-table'
 import { getModels, searchModels, getVendors } from '../api'
 import {
   DEFAULT_PAGE_SIZE,
@@ -219,111 +202,41 @@ export function ModelsTable() {
   ]
 
   return (
-    <>
-      <div className='space-y-3 sm:space-y-4'>
-        <DataTableToolbar
-          table={table}
-          searchPlaceholder={t('Filter by model name...')}
-          filters={[
-            {
-              columnId: 'status',
-              title: t('Status'),
-              options: [...getModelStatusOptions(t)],
-              singleSelect: true,
-            },
-            {
-              columnId: 'vendor_id',
-              title: t('Vendor'),
-              options: vendorFilterOptions,
-              singleSelect: true,
-            },
-            {
-              columnId: 'sync_official',
-              title: t('Official Sync'),
-              options: [...getSyncStatusOptions(t)],
-              singleSelect: true,
-            },
-          ]}
-        />
-
-        {isMobile ? (
-          <MobileCardList
-            table={table}
-            isLoading={isLoading}
-            emptyTitle={t('No Models Found')}
-            emptyDescription={t(
-              'No models available. Create your first model to get started.'
-            )}
-          />
-        ) : (
-          <>
-            <div
-              className={cn(
-                'overflow-hidden rounded-md border transition-opacity duration-150',
-                isFetching && !isLoading && 'pointer-events-none opacity-50'
-              )}
-            >
-              <Table>
-                <TableHeader>
-                  {table.getHeaderGroups().map((headerGroup) => (
-                    <TableRow key={headerGroup.id}>
-                      {headerGroup.headers.map((header) => (
-                        <TableHead
-                          key={header.id}
-                          style={{ width: header.getSize() }}
-                        >
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext()
-                              )}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableHeader>
-                <TableBody>
-                  {isLoading ? (
-                    <TableSkeleton table={table} keyPrefix='model-skeleton' />
-                  ) : table.getRowModel().rows.length === 0 ? (
-                    <TableEmpty
-                      colSpan={columns.length}
-                      title={t('No Models Found')}
-                      description={t(
-                        'No models available. Create your first model to get started.'
-                      )}
-                    />
-                  ) : (
-                    table.getRowModel().rows.map((row) => (
-                      <TableRow
-                        key={row.id}
-                        data-state={row.getIsSelected() && 'selected'}
-                      >
-                        {row.getVisibleCells().map((cell) => (
-                          <TableCell key={cell.id}>
-                            {flexRender(
-                              cell.column.columnDef.cell,
-                              cell.getContext()
-                            )}
-                          </TableCell>
-                        ))}
-                      </TableRow>
-                    ))
-                  )}
-                </TableBody>
-              </Table>
-            </div>
-
-            <DataTableBulkActions table={table} />
-          </>
-        )}
-      </div>
-      <PageFooterPortal>
-        <DataTablePagination
-          table={table as ReturnType<typeof useReactTable>}
-        />
-      </PageFooterPortal>
-    </>
+    <DataTablePage
+      table={table}
+      columns={columns}
+      isLoading={isLoading}
+      isFetching={isFetching}
+      emptyTitle={t('No Models Found')}
+      emptyDescription={t(
+        'No models available. Create your first model to get started.'
+      )}
+      skeletonKeyPrefix='model-skeleton'
+      applyHeaderSize
+      toolbarProps={{
+        searchPlaceholder: t('Filter by model name...'),
+        filters: [
+          {
+            columnId: 'status',
+            title: t('Status'),
+            options: [...getModelStatusOptions(t)],
+            singleSelect: true,
+          },
+          {
+            columnId: 'vendor_id',
+            title: t('Vendor'),
+            options: vendorFilterOptions,
+            singleSelect: true,
+          },
+          {
+            columnId: 'sync_official',
+            title: t('Official Sync'),
+            options: [...getSyncStatusOptions(t)],
+            singleSelect: true,
+          },
+        ],
+      }}
+      bulkActions={<DataTableBulkActions table={table} />}
+    />
   )
 }
diff --git a/web/default/src/features/models/index.tsx b/web/default/src/features/models/index.tsx
index df8fb005e02..76b8291f45b 100644
--- a/web/default/src/features/models/index.tsx
+++ b/web/default/src/features/models/index.tsx
@@ -107,9 +107,7 @@ function ModelsContent() {
   return (
     <>
       <SectionPageLayout>
-        <SectionPageLayout.Title>
-          {t(meta.titleKey)}
-        </SectionPageLayout.Title>
+        <SectionPageLayout.Title>{t(meta.titleKey)}</SectionPageLayout.Title>
         <SectionPageLayout.Description>
           {t(meta.descriptionKey)}
         </SectionPageLayout.Description>
diff --git a/web/default/src/features/playground/components/message-action-button.tsx b/web/default/src/features/playground/components/message-action-button.tsx
index 61e55cd84b6..4551b8a195c 100644
--- a/web/default/src/features/playground/components/message-action-button.tsx
+++ b/web/default/src/features/playground/components/message-action-button.tsx
@@ -31,17 +31,19 @@ export function MessageActionButton({
 
   return (
     <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant='ghost'
-          size='icon'
-          className={`${baseStyle} ${className}`}
-          onClick={onClick}
-          disabled={disabled}
-          aria-label={label}
-        >
-          <Icon className={MESSAGE_ACTION_BUTTON_STYLES.ICON} />
-        </Button>
+      <TooltipTrigger
+        render={
+          <Button
+            variant='ghost'
+            size='icon'
+            className={`${baseStyle} ${className}`}
+            onClick={onClick}
+            disabled={disabled}
+            aria-label={label}
+          />
+        }
+      >
+        <Icon className={MESSAGE_ACTION_BUTTON_STYLES.ICON} />
       </TooltipTrigger>
       <TooltipContent>
         <p>{label}</p>
diff --git a/web/default/src/features/playground/components/message-actions.tsx b/web/default/src/features/playground/components/message-actions.tsx
index d424690bd3b..90437017ac9 100644
--- a/web/default/src/features/playground/components/message-actions.tsx
+++ b/web/default/src/features/playground/components/message-actions.tsx
@@ -56,7 +56,7 @@ export function MessageActions({
     : 'opacity-0 group-hover:opacity-100 max-md:opacity-100'
 
   return (
-    <TooltipProvider delayDuration={300}>
+    <TooltipProvider delay={300}>
       <div
         className={`flex items-center gap-0.5 transition-opacity ${visibilityClass} ${className}`}
       >
diff --git a/web/default/src/features/playground/components/playground-input.tsx b/web/default/src/features/playground/components/playground-input.tsx
index 4587d2bea5f..6a53e26f513 100644
--- a/web/default/src/features/playground/components/playground-input.tsx
+++ b/web/default/src/features/playground/components/playground-input.tsx
@@ -114,16 +114,18 @@ export function PlaygroundInput({
         <PromptInputFooter className='p-2.5'>
           <PromptInputTools>
             <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <PromptInputButton
-                  className='!rounded-full border font-medium'
-                  disabled={disabled}
-                  variant='outline'
-                >
-                  <PaperclipIcon size={16} />
-                  <span className='hidden sm:inline'>{t('Attach')}</span>
-                  <span className='sr-only sm:hidden'>{t('Attach')}</span>
-                </PromptInputButton>
+              <DropdownMenuTrigger
+                render={
+                  <PromptInputButton
+                    className='!rounded-full border font-medium'
+                    disabled={disabled}
+                    variant='outline'
+                  />
+                }
+              >
+                <PaperclipIcon size={16} />
+                <span className='hidden sm:inline'>{t('Attach')}</span>
+                <span className='sr-only sm:hidden'>{t('Attach')}</span>
               </DropdownMenuTrigger>
               <DropdownMenuContent align='start'>
                 <DropdownMenuItem
diff --git a/web/default/src/features/pricing/components/dynamic-pricing-breakdown.tsx b/web/default/src/features/pricing/components/dynamic-pricing-breakdown.tsx
index d9f50f0f133..f0847e14995 100644
--- a/web/default/src/features/pricing/components/dynamic-pricing-breakdown.tsx
+++ b/web/default/src/features/pricing/components/dynamic-pricing-breakdown.tsx
@@ -242,8 +242,7 @@ export function DynamicPricingBreakdown({
                   key={`tier-mobile-${i}`}
                   className={cn(
                     'rounded-md border p-2',
-                    isMatched &&
-                      'border-emerald-500/40 bg-emerald-500/10'
+                    isMatched && 'border-emerald-500/40 bg-emerald-500/10'
                   )}
                 >
                   <div className='mb-1.5 flex flex-wrap items-center gap-1.5'>
diff --git a/web/default/src/features/pricing/components/filter-bar.tsx b/web/default/src/features/pricing/components/filter-bar.tsx
deleted file mode 100644
index dc68f856978..00000000000
--- a/web/default/src/features/pricing/components/filter-bar.tsx
+++ /dev/null
@@ -1,727 +0,0 @@
-import { useCallback, useMemo, useState } from 'react'
-import {
-  ArrowUpDown,
-  Check,
-  ChevronDown,
-  Filter,
-  RotateCcw,
-  Table2,
-  X,
-} from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { getLobeIcon } from '@/lib/lobe-icon'
-import { cn } from '@/lib/utils'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
-import {
-  FILTER_ALL,
-  QUOTA_TYPES,
-  ENDPOINT_TYPES,
-  VIEW_MODES,
-  getSortLabels,
-  getQuotaTypeLabels,
-  getEndpointTypeLabels,
-  type SortOption,
-  type ViewMode,
-} from '../constants'
-import type { PricingVendor, TokenUnit } from '../types'
-
-interface FilterOption {
-  value: string
-  label: string
-  icon?: React.ReactNode
-}
-
-interface FilterChipProps {
-  label: string
-  value: string
-  options: FilterOption[]
-  onChange: (value: string) => void
-  defaultValue?: string
-  searchPlaceholder?: string
-  className?: string
-}
-
-function FilterChip(props: FilterChipProps) {
-  const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-  const defaultVal = props.defaultValue ?? FILTER_ALL
-  const isActive = props.value !== defaultVal
-  const selectedOption = props.options.find((o) => o.value === props.value)
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <button
-          type='button'
-          role='combobox'
-          aria-expanded={open}
-          className={cn(
-            'inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-medium transition-all',
-            isActive
-              ? 'border-foreground/30 bg-foreground/5 text-foreground'
-              : 'border-border bg-muted/50 text-muted-foreground hover:border-border/80 hover:text-foreground hover:bg-muted',
-            props.className
-          )}
-        >
-          {selectedOption?.icon}
-          <span className='max-w-[100px] truncate'>
-            {isActive && selectedOption ? selectedOption.label : props.label}
-          </span>
-          <ChevronDown
-            className={cn(
-              'size-3.5 transition-transform',
-              open && 'rotate-180'
-            )}
-          />
-        </button>
-      </PopoverTrigger>
-      <PopoverContent className='w-52 p-0' align='start'>
-        <Command>
-          <CommandInput
-            placeholder={props.searchPlaceholder || t('Search...')}
-            className='h-9'
-          />
-          <CommandList className='max-h-64'>
-            <CommandEmpty>{t('No results found')}</CommandEmpty>
-            <CommandGroup>
-              {props.options.map((option) => (
-                <CommandItem
-                  key={option.value}
-                  value={option.label}
-                  onSelect={() => {
-                    props.onChange(option.value)
-                    setOpen(false)
-                  }}
-                  className='gap-2'
-                >
-                  <Check
-                    className={cn(
-                      'size-4 shrink-0',
-                      props.value === option.value ? 'opacity-100' : 'opacity-0'
-                    )}
-                  />
-                  {option.icon && (
-                    <span className='shrink-0'>{option.icon}</span>
-                  )}
-                  <span className='truncate'>{option.label}</span>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-interface SegmentedControlProps {
-  options: Array<{
-    value: string
-    label?: string
-    icon?: React.ComponentType<{ className?: string }>
-    tooltip?: string
-  }>
-  value: string
-  onChange: (value: string) => void
-  ariaLabel?: string
-}
-
-function SegmentedControl(props: SegmentedControlProps) {
-  return (
-    <div
-      role='group'
-      aria-label={props.ariaLabel}
-      className='bg-muted/60 inline-flex h-8 items-center rounded-md border p-0.5'
-    >
-      {props.options.map((option) => {
-        const isActive = option.value === props.value
-        const Icon = option.icon
-        const isIconOnly = Icon && !option.label
-        const button = (
-          <button
-            key={option.value}
-            type='button'
-            onClick={() => props.onChange(option.value)}
-            className={cn(
-              'inline-flex h-[calc(100%)] items-center justify-center rounded-[5px] text-xs font-medium transition-all',
-              isIconOnly ? 'w-7' : 'gap-1.5 px-2.5',
-              isActive
-                ? 'bg-background text-foreground shadow-sm'
-                : 'text-muted-foreground hover:text-foreground'
-            )}
-            aria-pressed={isActive}
-          >
-            {Icon && <Icon className='size-3.5' />}
-            {option.label}
-          </button>
-        )
-
-        if (option.tooltip) {
-          return (
-            <Tooltip key={option.value}>
-              <TooltipTrigger asChild>{button}</TooltipTrigger>
-              <TooltipContent side='bottom' className='text-xs'>
-                {option.tooltip}
-              </TooltipContent>
-            </Tooltip>
-          )
-        }
-
-        return button
-      })}
-    </div>
-  )
-}
-
-interface ActiveFilterBadgeProps {
-  label: string
-  onRemove: () => void
-}
-
-function ActiveFilterBadge(props: ActiveFilterBadgeProps) {
-  const { t } = useTranslation()
-
-  return (
-    <Badge
-      variant='secondary'
-      className='gap-1 py-1 pr-1 pl-2.5 text-xs font-medium'
-    >
-      {props.label}
-      <button
-        type='button'
-        onClick={props.onRemove}
-        className='hover:bg-secondary-foreground/10 rounded-full p-0.5 transition-colors'
-        aria-label={`${t('Remove filter')}: ${props.label}`}
-      >
-        <X className='size-3' />
-      </button>
-    </Badge>
-  )
-}
-
-interface MobileFilterGroupProps {
-  title: string
-  value: string
-  options: FilterOption[]
-  onChange: (value: string) => void
-}
-
-function MobileFilterGroup(props: MobileFilterGroupProps) {
-  return (
-    <div className='space-y-2.5'>
-      <h3 className='text-foreground text-sm font-semibold'>{props.title}</h3>
-      <div className='flex flex-wrap gap-2'>
-        {props.options.map((option) => {
-          const isActive = props.value === option.value
-          return (
-            <button
-              key={option.value}
-              type='button'
-              onClick={() => props.onChange(option.value)}
-              className={cn(
-                'inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-medium transition-all',
-                isActive
-                  ? 'border-foreground/30 bg-foreground/5 text-foreground'
-                  : 'bg-muted text-muted-foreground hover:text-foreground border-transparent'
-              )}
-            >
-              {option.icon}
-              {option.label}
-            </button>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-export interface FilterBarProps {
-  quotaTypeFilter: string
-  endpointTypeFilter: string
-  vendorFilter: string
-  groupFilter: string
-  tagFilter: string
-  onQuotaTypeChange: (v: string) => void
-  onEndpointTypeChange: (v: string) => void
-  onVendorChange: (v: string) => void
-  onGroupChange: (v: string) => void
-  onTagChange: (v: string) => void
-  vendors: PricingVendor[]
-  groups: string[]
-  tags: string[]
-  sortBy: string
-  onSortChange: (v: string) => void
-  tokenUnit: TokenUnit
-  onTokenUnitChange: (v: TokenUnit) => void
-  showRechargePrice: boolean
-  onRechargePriceChange: (v: boolean) => void
-  viewMode: ViewMode
-  onViewModeChange: (v: ViewMode) => void
-  hasActiveFilters: boolean
-  activeFilterCount: number
-  onClearFilters: () => void
-  filteredCount: number
-  totalCount?: number
-}
-
-export function FilterBar(props: FilterBarProps) {
-  const { t } = useTranslation()
-  const [mobileOpen, setMobileOpen] = useState(false)
-
-  const {
-    quotaTypeFilter,
-    endpointTypeFilter,
-    vendorFilter,
-    groupFilter,
-    tagFilter,
-    onQuotaTypeChange,
-    onEndpointTypeChange,
-    onVendorChange,
-    onGroupChange,
-    onTagChange,
-    vendors,
-    groups,
-    tags,
-    onTokenUnitChange,
-    onViewModeChange,
-    onRechargePriceChange,
-  } = props
-
-  const quotaTypeLabels = getQuotaTypeLabels(t)
-  const endpointTypeLabels = getEndpointTypeLabels(t)
-  const sortLabels = getSortLabels(t)
-
-  const typeOptions = useMemo<FilterOption[]>(
-    () =>
-      Object.entries(quotaTypeLabels).map(([value, label]) => ({
-        value,
-        label,
-      })),
-    [quotaTypeLabels]
-  )
-
-  const endpointOptions = useMemo<FilterOption[]>(
-    () =>
-      Object.entries(endpointTypeLabels).map(([value, label]) => ({
-        value,
-        label,
-      })),
-    [endpointTypeLabels]
-  )
-
-  const vendorOptions = useMemo<FilterOption[]>(
-    () => [
-      { value: FILTER_ALL, label: t('All Vendors') },
-      ...vendors.map((v) => ({
-        value: v.name,
-        label: v.name,
-        icon: v.icon ? getLobeIcon(v.icon, 14) : undefined,
-      })),
-    ],
-    [vendors, t]
-  )
-
-  const groupOptions = useMemo<FilterOption[]>(
-    () => [
-      { value: FILTER_ALL, label: t('All Groups') },
-      ...groups.map((g) => ({ value: g, label: g })),
-    ],
-    [groups, t]
-  )
-
-  const tagOptions = useMemo<FilterOption[]>(
-    () => [
-      { value: FILTER_ALL, label: t('All Tags') },
-      ...tags.map((tag) => ({ value: tag, label: tag })),
-    ],
-    [tags, t]
-  )
-
-  const activeFilters = useMemo(() => {
-    const filters: Array<{ key: string; label: string; onRemove: () => void }> =
-      []
-
-    if (quotaTypeFilter !== QUOTA_TYPES.ALL) {
-      filters.push({
-        key: 'quotaType',
-        label:
-          quotaTypeLabels[quotaTypeFilter as keyof typeof quotaTypeLabels] ||
-          quotaTypeFilter,
-        onRemove: () => onQuotaTypeChange(QUOTA_TYPES.ALL),
-      })
-    }
-
-    if (endpointTypeFilter !== ENDPOINT_TYPES.ALL) {
-      filters.push({
-        key: 'endpointType',
-        label:
-          endpointTypeLabels[
-            endpointTypeFilter as keyof typeof endpointTypeLabels
-          ] || endpointTypeFilter,
-        onRemove: () => onEndpointTypeChange(ENDPOINT_TYPES.ALL),
-      })
-    }
-
-    if (vendorFilter !== FILTER_ALL) {
-      filters.push({
-        key: 'vendor',
-        label: vendorFilter,
-        onRemove: () => onVendorChange(FILTER_ALL),
-      })
-    }
-
-    if (groupFilter !== FILTER_ALL) {
-      filters.push({
-        key: 'group',
-        label: groupFilter,
-        onRemove: () => onGroupChange(FILTER_ALL),
-      })
-    }
-
-    if (tagFilter !== FILTER_ALL) {
-      filters.push({
-        key: 'tag',
-        label: tagFilter,
-        onRemove: () => onTagChange(FILTER_ALL),
-      })
-    }
-
-    return filters
-  }, [
-    quotaTypeFilter,
-    endpointTypeFilter,
-    vendorFilter,
-    groupFilter,
-    tagFilter,
-    onQuotaTypeChange,
-    onEndpointTypeChange,
-    onVendorChange,
-    onGroupChange,
-    onTagChange,
-    quotaTypeLabels,
-    endpointTypeLabels,
-  ])
-
-  const handleTokenUnitChange = useCallback(
-    (v: string) => onTokenUnitChange(v as TokenUnit),
-    [onTokenUnitChange]
-  )
-
-  const handleViewModeChange = useCallback(
-    (v: string) => onViewModeChange(v as ViewMode),
-    [onViewModeChange]
-  )
-
-  const handleRechargePriceChange = useCallback(
-    (v: string) => onRechargePriceChange(v === 'recharge'),
-    [onRechargePriceChange]
-  )
-
-  return (
-    <div className='space-y-3'>
-      <div className='flex items-center gap-3'>
-        <div className='hidden flex-1 flex-wrap items-center gap-2 lg:flex'>
-          <FilterChip
-            label={t('Pricing')}
-            value={props.quotaTypeFilter}
-            options={typeOptions}
-            onChange={props.onQuotaTypeChange}
-            defaultValue={QUOTA_TYPES.ALL}
-          />
-          <FilterChip
-            label={t('Endpoint')}
-            value={props.endpointTypeFilter}
-            options={endpointOptions}
-            onChange={props.onEndpointTypeChange}
-            defaultValue={ENDPOINT_TYPES.ALL}
-          />
-          {props.vendors.length > 0 && (
-            <FilterChip
-              label={t('Vendor')}
-              value={props.vendorFilter}
-              options={vendorOptions}
-              onChange={props.onVendorChange}
-              searchPlaceholder={t('Search vendors...')}
-            />
-          )}
-          {props.groups.length > 0 && (
-            <FilterChip
-              label={t('Group')}
-              value={props.groupFilter}
-              options={groupOptions}
-              onChange={props.onGroupChange}
-              searchPlaceholder={t('Search groups...')}
-            />
-          )}
-          {props.tags.length > 0 && (
-            <FilterChip
-              label={t('Tag')}
-              value={props.tagFilter}
-              options={tagOptions}
-              onChange={props.onTagChange}
-              searchPlaceholder={t('Search tags...')}
-            />
-          )}
-        </div>
-
-        <Button
-          variant='outline'
-          size='sm'
-          onClick={() => setMobileOpen(true)}
-          className='gap-1.5 lg:hidden'
-        >
-          <Filter className='size-4' />
-          {t('Filters')}
-          {props.activeFilterCount > 0 && (
-            <Badge className='ml-0.5 size-5 justify-center rounded-full p-0 text-[10px]'>
-              {props.activeFilterCount}
-            </Badge>
-          )}
-        </Button>
-
-        <div className='flex-1 lg:hidden' />
-
-        <div className='flex items-center gap-1.5'>
-          <div className='hidden items-center gap-1.5 sm:flex'>
-            <SegmentedControl
-              options={[
-                { value: 'standard', label: t('Standard') },
-                { value: 'recharge', label: t('Recharge') },
-              ]}
-              value={props.showRechargePrice ? 'recharge' : 'standard'}
-              onChange={handleRechargePriceChange}
-              ariaLabel={t('Price display mode')}
-            />
-            <SegmentedControl
-              options={[
-                { value: 'M', label: '/1M' },
-                { value: 'K', label: '/1K' },
-              ]}
-              value={props.tokenUnit}
-              onChange={handleTokenUnitChange}
-              ariaLabel={t('Token unit')}
-            />
-            <div className='bg-border mx-0.5 h-4 w-px' />
-          </div>
-
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant='outline'
-                size='sm'
-                className='h-8 gap-1.5 px-2.5 text-xs font-medium'
-              >
-                <ArrowUpDown className='size-3.5' />
-                <span className='hidden sm:inline'>
-                  {sortLabels[props.sortBy as SortOption] || t('Sort')}
-                </span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align='end' className='w-44'>
-              {Object.entries(sortLabels).map(([value, label]) => (
-                <DropdownMenuItem
-                  key={value}
-                  onClick={() => props.onSortChange(value)}
-                  className='gap-2'
-                >
-                  <Check
-                    className={cn(
-                      'size-4 shrink-0',
-                      props.sortBy === value ? 'opacity-100' : 'opacity-0'
-                    )}
-                  />
-                  {label}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-
-          <SegmentedControl
-            options={[
-              {
-                value: VIEW_MODES.TABLE,
-                icon: Table2,
-                tooltip: t('Table view'),
-              },
-            ]}
-            value={props.viewMode}
-            onChange={handleViewModeChange}
-            ariaLabel={t('View mode')}
-          />
-        </div>
-      </div>
-
-      {activeFilters.length > 0 && (
-        <div className='flex flex-wrap items-center gap-2'>
-          {activeFilters.map((filter) => (
-            <ActiveFilterBadge
-              key={filter.key}
-              label={filter.label}
-              onRemove={filter.onRemove}
-            />
-          ))}
-          <Button
-            variant='ghost'
-            size='sm'
-            onClick={props.onClearFilters}
-            className='text-muted-foreground hover:text-foreground h-6 gap-1 px-2 text-xs'
-          >
-            <RotateCcw className='size-3' />
-            {t('Clear all')}
-          </Button>
-        </div>
-      )}
-
-      <div className='text-muted-foreground flex items-baseline gap-1 text-sm'>
-        <span className='text-foreground font-semibold tabular-nums'>
-          {props.filteredCount.toLocaleString()}
-        </span>
-        <span>{props.filteredCount === 1 ? t('model') : t('models')}</span>
-        {props.hasActiveFilters && props.totalCount && (
-          <span className='text-muted-foreground/60'>
-            {t('of')} {props.totalCount.toLocaleString()}
-          </span>
-        )}
-      </div>
-
-      <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
-        <SheetContent
-          side='right'
-          className='flex h-dvh w-full flex-col overflow-hidden p-0 sm:max-w-md'
-        >
-          <SheetHeader className='border-b px-4 py-3 sm:px-6 sm:py-4'>
-            <SheetTitle>{t('Filters')}</SheetTitle>
-            <SheetDescription className='sr-only'>
-              {t('Filter models by type, endpoint, vendor, group and tags')}
-            </SheetDescription>
-          </SheetHeader>
-
-          <div className='flex-1 space-y-4 overflow-y-auto px-4 py-4 sm:space-y-6 sm:px-6 sm:py-5'>
-            <MobileFilterGroup
-              title={t('Pricing Type')}
-              value={props.quotaTypeFilter}
-              options={typeOptions}
-              onChange={props.onQuotaTypeChange}
-            />
-            <MobileFilterGroup
-              title={t('Endpoint Type')}
-              value={props.endpointTypeFilter}
-              options={endpointOptions}
-              onChange={props.onEndpointTypeChange}
-            />
-            {props.vendors.length > 0 && (
-              <MobileFilterGroup
-                title={t('Vendor')}
-                value={props.vendorFilter}
-                options={vendorOptions}
-                onChange={props.onVendorChange}
-              />
-            )}
-            {props.groups.length > 0 && (
-              <MobileFilterGroup
-                title={t('Group')}
-                value={props.groupFilter}
-                options={groupOptions}
-                onChange={props.onGroupChange}
-              />
-            )}
-            {props.tags.length > 0 && (
-              <MobileFilterGroup
-                title={t('Tag')}
-                value={props.tagFilter}
-                options={tagOptions}
-                onChange={props.onTagChange}
-              />
-            )}
-
-            <div className='border-t pt-5'>
-              <h3 className='text-foreground mb-3 text-sm font-semibold'>
-                {t('Display Options')}
-              </h3>
-              <div className='space-y-3 sm:space-y-4'>
-                <div className='space-y-2'>
-                  <p className='text-muted-foreground text-xs'>
-                    {t('Price display')}
-                  </p>
-                  <SegmentedControl
-                    options={[
-                      { value: 'standard', label: t('Standard') },
-                      { value: 'recharge', label: t('Recharge') },
-                    ]}
-                    value={props.showRechargePrice ? 'recharge' : 'standard'}
-                    onChange={handleRechargePriceChange}
-                    ariaLabel={t('Price display mode')}
-                  />
-                </div>
-                <div className='space-y-2'>
-                  <p className='text-muted-foreground text-xs'>
-                    {t('Token unit')}
-                  </p>
-                  <SegmentedControl
-                    options={[
-                      { value: 'M', label: t('Per 1M tokens') },
-                      { value: 'K', label: t('Per 1K tokens') },
-                    ]}
-                    value={props.tokenUnit}
-                    onChange={handleTokenUnitChange}
-                    ariaLabel={t('Token unit')}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <SheetFooter className='border-t px-4 py-3 sm:px-6 sm:py-4'>
-            <div className='grid w-full grid-cols-2 gap-2 sm:flex sm:gap-3'>
-              {props.hasActiveFilters && (
-                <Button
-                  variant='outline'
-                  onClick={props.onClearFilters}
-                  className='flex-1'
-                >
-                  {t('Reset')}
-                </Button>
-              )}
-              <Button onClick={() => setMobileOpen(false)} className='flex-1'>
-                {t('Show')} {props.filteredCount} {t('models')}
-              </Button>
-            </div>
-          </SheetFooter>
-        </SheetContent>
-      </Sheet>
-    </div>
-  )
-}
diff --git a/web/default/src/features/pricing/components/index.ts b/web/default/src/features/pricing/components/index.ts
index e862c740909..d15e2606be6 100644
--- a/web/default/src/features/pricing/components/index.ts
+++ b/web/default/src/features/pricing/components/index.ts
@@ -1,4 +1,3 @@
-export { FilterBar } from './filter-bar'
 export { PricingSidebar } from './pricing-sidebar'
 export { PricingToolbar } from './pricing-toolbar'
 export { ModelCard } from './model-card'
@@ -6,5 +5,9 @@ export { ModelCardGrid } from './model-card-grid'
 export { LoadingSkeleton } from './loading-skeleton'
 export { EmptyState } from './empty-state'
 export { SearchBar } from './search-bar'
-export { ModelDetails, ModelDetailsDrawer } from './model-details'
+export {
+  ModelDetails,
+  ModelDetailsContent,
+  ModelDetailsDrawer,
+} from './model-details'
 export { PricingTable } from './pricing-table'
diff --git a/web/default/src/features/pricing/components/model-card.tsx b/web/default/src/features/pricing/components/model-card.tsx
index ca0e12d09be..36d459ebed6 100644
--- a/web/default/src/features/pricing/components/model-card.tsx
+++ b/web/default/src/features/pricing/components/model-card.tsx
@@ -3,16 +3,16 @@ import { ChevronRight, Copy } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { getLobeIcon } from '@/lib/lobe-icon'
 import { cn } from '@/lib/utils'
-import { StatusBadge } from '@/components/status-badge'
 import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
+import { StatusBadge } from '@/components/status-badge'
 import { DEFAULT_TOKEN_UNIT } from '../constants'
-import { parseTags } from '../lib/filters'
-import { isTokenBasedModel } from '../lib/model-helpers'
-import { formatPrice, formatRequestPrice } from '../lib/price'
 import {
   getDynamicDisplayGroupRatio,
   getDynamicPricingSummary,
 } from '../lib/dynamic-price'
+import { parseTags } from '../lib/filters'
+import { isTokenBasedModel } from '../lib/model-helpers'
+import { formatPrice, formatRequestPrice } from '../lib/price'
 import type { PricingModel, TokenUnit } from '../types'
 
 export interface ModelCardProps {
@@ -41,7 +41,8 @@ export const ModelCard = memo(function ModelCard(props: ModelCardProps) {
     : null
   const initial = props.model.model_name?.charAt(0).toUpperCase() || '?'
   const isDynamicPricing =
-    props.model.billing_mode === 'tiered_expr' && Boolean(props.model.billing_expr)
+    props.model.billing_mode === 'tiered_expr' &&
+    Boolean(props.model.billing_expr)
   const hasCachedPrice = isTokenBased && props.model.cache_ratio != null
   const dynamicSummary = isDynamicPricing
     ? getDynamicPricingSummary(props.model, {
@@ -83,7 +84,7 @@ export const ModelCard = memo(function ModelCard(props: ModelCardProps) {
             )}
           </div>
           <div className='min-w-0'>
-            <h3 className='text-foreground truncate font-mono text-[15px] font-bold leading-tight'>
+            <h3 className='text-foreground truncate font-mono text-[15px] leading-tight font-bold'>
               {props.model.model_name}
             </h3>
             <div className='mt-0.5 flex flex-wrap items-baseline gap-x-2 gap-y-0.5 text-xs sm:mt-1 sm:gap-x-3'>
@@ -93,7 +94,7 @@ export const ModelCard = memo(function ModelCard(props: ModelCardProps) {
                     <span className='text-amber-700 dark:text-amber-300'>
                       {t('Special billing expression')}
                     </span>
-                    <code className='text-muted-foreground/70 mt-0.5 line-clamp-1 block break-all font-mono text-[11px]'>
+                    <code className='text-muted-foreground/70 mt-0.5 line-clamp-1 block font-mono text-[11px] break-all'>
                       {dynamicSummary.rawExpression}
                     </code>
                   </span>
@@ -122,14 +123,28 @@ export const ModelCard = memo(function ModelCard(props: ModelCardProps) {
                   <span className='text-muted-foreground whitespace-nowrap'>
                     {t('Input')}{' '}
                     <span className='text-foreground font-mono font-semibold'>
-                      {formatPrice(props.model, 'input', tokenUnit, showRechargePrice, priceRate, usdExchangeRate)}
+                      {formatPrice(
+                        props.model,
+                        'input',
+                        tokenUnit,
+                        showRechargePrice,
+                        priceRate,
+                        usdExchangeRate
+                      )}
                     </span>
                     /{tokenUnitLabel}
                   </span>
                   <span className='text-muted-foreground whitespace-nowrap'>
                     {t('Output')}{' '}
                     <span className='text-foreground font-mono font-semibold'>
-                      {formatPrice(props.model, 'output', tokenUnit, showRechargePrice, priceRate, usdExchangeRate)}
+                      {formatPrice(
+                        props.model,
+                        'output',
+                        tokenUnit,
+                        showRechargePrice,
+                        priceRate,
+                        usdExchangeRate
+                      )}
                     </span>
                     /{tokenUnitLabel}
                   </span>
@@ -137,7 +152,14 @@ export const ModelCard = memo(function ModelCard(props: ModelCardProps) {
                     <span className='text-muted-foreground/60 whitespace-nowrap'>
                       {t('Cached')}{' '}
                       <span className='font-mono'>
-                        {formatPrice(props.model, 'cache', tokenUnit, showRechargePrice, priceRate, usdExchangeRate)}
+                        {formatPrice(
+                          props.model,
+                          'cache',
+                          tokenUnit,
+                          showRechargePrice,
+                          priceRate,
+                          usdExchangeRate
+                        )}
                       </span>
                     </span>
                   )}
@@ -145,9 +167,14 @@ export const ModelCard = memo(function ModelCard(props: ModelCardProps) {
               ) : (
                 <span className='text-muted-foreground whitespace-nowrap'>
                   <span className='text-foreground font-mono font-semibold'>
-                    {formatRequestPrice(props.model, showRechargePrice, priceRate, usdExchangeRate)}
-                  </span>
-                  {' '}/ {t('request')}
+                    {formatRequestPrice(
+                      props.model,
+                      showRechargePrice,
+                      priceRate,
+                      usdExchangeRate
+                    )}
+                  </span>{' '}
+                  / {t('request')}
                 </span>
               )}
             </div>
@@ -202,14 +229,13 @@ export const ModelCard = memo(function ModelCard(props: ModelCardProps) {
       {/* Footer row 2: endpoint + tag chips */}
       <div className='mt-1.5 flex flex-wrap items-center gap-x-2.5 gap-y-0.5 sm:mt-2 sm:gap-x-3 sm:gap-y-1'>
         {bottomTags.map((item) => (
-          <span
-            key={item}
-            className='text-muted-foreground/70 text-xs'
-          >
+          <span key={item} className='text-muted-foreground/70 text-xs'>
             {item}
           </span>
         ))}
-        <span className='text-muted-foreground/50 text-xs'>{tokenUnitLabel}</span>
+        <span className='text-muted-foreground/50 text-xs'>
+          {tokenUnitLabel}
+        </span>
         {hiddenCount > 0 && (
           <span className='text-muted-foreground/40 text-xs'>
             +{hiddenCount}
diff --git a/web/default/src/features/pricing/components/model-details-api.tsx b/web/default/src/features/pricing/components/model-details-api.tsx
new file mode 100644
index 00000000000..1fa31f175cc
--- /dev/null
+++ b/web/default/src/features/pricing/components/model-details-api.tsx
@@ -0,0 +1,871 @@
+import { useMemo, useState } from 'react'
+import {
+  ChevronRight,
+  ExternalLink,
+  Gauge,
+  KeyRound,
+  ScrollText,
+  ShieldCheck,
+  Sigma,
+  Zap,
+} from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import type { BundledLanguage } from 'shiki/bundle/web'
+import { cn } from '@/lib/utils'
+import { useStatus } from '@/hooks/use-status'
+import { Badge } from '@/components/ui/badge'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import {
+  CodeBlock,
+  CodeBlockCopyButton,
+} from '@/components/ai-elements/code-block'
+import {
+  buildRateLimits,
+  buildSupportedParameters,
+  formatRateLimit,
+  type SupportedParameter,
+} from '../lib/mock-stats'
+import { replaceModelInPath } from '../lib/model-helpers'
+import { inferApiInfo } from '../lib/model-metadata'
+import type { PricingModel } from '../types'
+
+// ---------------------------------------------------------------------------
+// Code-sample registry
+// ---------------------------------------------------------------------------
+//
+// Each sample is keyed by language and endpoint type. The endpoint type comes
+// from the model's `supported_endpoint_types`; we render samples only for the
+// types the model actually supports. This keeps copy-pasted code accurate and
+// provider-shaped (OpenAI vs Anthropic vs Gemini, etc.).
+
+type Lang = 'curl' | 'python' | 'typescript' | 'javascript'
+
+const LANG_LABELS: Record<Lang, string> = {
+  curl: 'cURL',
+  python: 'Python',
+  typescript: 'TypeScript',
+  javascript: 'JavaScript',
+}
+
+const LANG_HIGHLIGHT: Record<Lang, BundledLanguage> = {
+  curl: 'bash',
+  python: 'python',
+  typescript: 'typescript',
+  javascript: 'javascript',
+}
+
+type SampleContext = {
+  baseUrl: string
+  apiKeyEnv: string
+  modelName: string
+  endpointType: string
+  endpointPath: string
+}
+
+function buildChatSample(lang: Lang, ctx: SampleContext): string {
+  const url = `${ctx.baseUrl}${ctx.endpointPath}`
+  const isResponses = ctx.endpointType === 'openai-response'
+  const isReasoning = /^o[1-4]|reasoning|thinking|deepseek-r/i.test(
+    ctx.modelName
+  )
+  const userMessage = 'Explain quantum entanglement in one paragraph.'
+
+  const bodyJson = isResponses
+    ? JSON.stringify({ model: ctx.modelName, input: userMessage }, null, 2)
+    : JSON.stringify(
+        {
+          model: ctx.modelName,
+          messages: [{ role: 'user', content: userMessage }],
+          ...(isReasoning ? {} : { temperature: 0.7 }),
+        },
+        null,
+        2
+      )
+
+  const fnCall = isResponses ? 'responses.create' : 'chat.completions.create'
+
+  if (lang === 'curl') {
+    return [
+      `curl ${url} \\`,
+      `  -H "Authorization: Bearer $${ctx.apiKeyEnv}" \\`,
+      `  -H "Content-Type: application/json" \\`,
+      `  -d '${bodyJson.replace(/\n/g, '\n     ')}'`,
+    ].join('\n')
+  }
+
+  if (lang === 'python') {
+    return [
+      'from openai import OpenAI',
+      '',
+      'client = OpenAI(',
+      `    base_url="${ctx.baseUrl}/v1",`,
+      `    api_key="<YOUR_API_KEY>",`,
+      ')',
+      '',
+      isResponses
+        ? `response = client.${fnCall}(\n    model="${ctx.modelName}",\n    input="${userMessage}",\n)\n\nprint(response.output_text)`
+        : `completion = client.${fnCall}(\n    model="${ctx.modelName}",\n    messages=[\n        {"role": "user", "content": "${userMessage}"}\n    ],\n)\n\nprint(completion.choices[0].message.content)`,
+    ].join('\n')
+  }
+
+  if (lang === 'typescript') {
+    return [
+      `import OpenAI from 'openai'`,
+      '',
+      `const client = new OpenAI({`,
+      `  baseURL: '${ctx.baseUrl}/v1',`,
+      `  apiKey: process.env.${ctx.apiKeyEnv},`,
+      `})`,
+      '',
+      isResponses
+        ? `const response = await client.${fnCall}({\n  model: '${ctx.modelName}',\n  input: '${userMessage}',\n})\n\nconsole.log(response.output_text)`
+        : `const completion = await client.${fnCall}({\n  model: '${ctx.modelName}',\n  messages: [{ role: 'user', content: '${userMessage}' }],\n})\n\nconsole.log(completion.choices[0].message.content)`,
+    ].join('\n')
+  }
+
+  return [
+    `const response = await fetch('${url}', {`,
+    `  method: 'POST',`,
+    `  headers: {`,
+    `    Authorization: \`Bearer \${process.env.${ctx.apiKeyEnv}}\`,`,
+    `    'Content-Type': 'application/json',`,
+    `  },`,
+    `  body: JSON.stringify(${bodyJson}),`,
+    `})`,
+    '',
+    `const data = await response.json()`,
+    `console.log(data)`,
+  ].join('\n')
+}
+
+function buildAnthropicSample(lang: Lang, ctx: SampleContext): string {
+  const url = `${ctx.baseUrl}${ctx.endpointPath}`
+  const userMessage = 'Explain quantum entanglement in one paragraph.'
+
+  if (lang === 'curl') {
+    const body = JSON.stringify(
+      {
+        model: ctx.modelName,
+        max_tokens: 1024,
+        messages: [{ role: 'user', content: userMessage }],
+      },
+      null,
+      2
+    )
+    return [
+      `curl ${url} \\`,
+      `  -H "x-api-key: $${ctx.apiKeyEnv}" \\`,
+      `  -H "anthropic-version: 2023-06-01" \\`,
+      `  -H "Content-Type: application/json" \\`,
+      `  -d '${body.replace(/\n/g, '\n     ')}'`,
+    ].join('\n')
+  }
+  if (lang === 'python') {
+    return [
+      'import anthropic',
+      '',
+      'client = anthropic.Anthropic(',
+      `    base_url="${ctx.baseUrl}",`,
+      `    api_key="<YOUR_API_KEY>",`,
+      ')',
+      '',
+      `message = client.messages.create(`,
+      `    model="${ctx.modelName}",`,
+      `    max_tokens=1024,`,
+      `    messages=[{"role": "user", "content": "${userMessage}"}],`,
+      ')',
+      '',
+      'print(message.content[0].text)',
+    ].join('\n')
+  }
+  if (lang === 'typescript') {
+    return [
+      `import Anthropic from '@anthropic-ai/sdk'`,
+      '',
+      `const client = new Anthropic({`,
+      `  baseURL: '${ctx.baseUrl}',`,
+      `  apiKey: process.env.${ctx.apiKeyEnv},`,
+      `})`,
+      '',
+      `const message = await client.messages.create({`,
+      `  model: '${ctx.modelName}',`,
+      `  max_tokens: 1024,`,
+      `  messages: [{ role: 'user', content: '${userMessage}' }],`,
+      `})`,
+      '',
+      `console.log(message.content[0].text)`,
+    ].join('\n')
+  }
+  return [
+    `const response = await fetch('${url}', {`,
+    `  method: 'POST',`,
+    `  headers: {`,
+    `    'x-api-key': process.env.${ctx.apiKeyEnv},`,
+    `    'anthropic-version': '2023-06-01',`,
+    `    'Content-Type': 'application/json',`,
+    `  },`,
+    `  body: JSON.stringify({`,
+    `    model: '${ctx.modelName}',`,
+    `    max_tokens: 1024,`,
+    `    messages: [{ role: 'user', content: '${userMessage}' }],`,
+    `  }),`,
+    `})`,
+    '',
+    `const data = await response.json()`,
+    `console.log(data.content[0].text)`,
+  ].join('\n')
+}
+
+function buildGeminiSample(lang: Lang, ctx: SampleContext): string {
+  const url = `${ctx.baseUrl}${ctx.endpointPath}?key=$${ctx.apiKeyEnv}`
+  const userMessage = 'Explain quantum entanglement in one paragraph.'
+
+  if (lang === 'curl') {
+    const body = JSON.stringify(
+      { contents: [{ parts: [{ text: userMessage }] }] },
+      null,
+      2
+    )
+    return [
+      `curl '${url}' \\`,
+      `  -H 'Content-Type: application/json' \\`,
+      `  -d '${body.replace(/\n/g, '\n     ')}'`,
+    ].join('\n')
+  }
+  if (lang === 'python') {
+    return [
+      'import google.generativeai as genai',
+      '',
+      `genai.configure(api_key="<YOUR_API_KEY>")`,
+      '',
+      `model = genai.GenerativeModel("${ctx.modelName}")`,
+      `response = model.generate_content("${userMessage}")`,
+      '',
+      `print(response.text)`,
+    ].join('\n')
+  }
+  if (lang === 'typescript') {
+    return [
+      `import { GoogleGenerativeAI } from '@google/generative-ai'`,
+      '',
+      `const genAI = new GoogleGenerativeAI(process.env.${ctx.apiKeyEnv}!)`,
+      `const model = genAI.getGenerativeModel({ model: '${ctx.modelName}' })`,
+      '',
+      `const result = await model.generateContent('${userMessage}')`,
+      `console.log(result.response.text())`,
+    ].join('\n')
+  }
+  return [
+    `const response = await fetch('${url}', {`,
+    `  method: 'POST',`,
+    `  headers: { 'Content-Type': 'application/json' },`,
+    `  body: JSON.stringify({`,
+    `    contents: [{ parts: [{ text: '${userMessage}' }] }],`,
+    `  }),`,
+    `})`,
+    '',
+    `const data = await response.json()`,
+    `console.log(data.candidates[0].content.parts[0].text)`,
+  ].join('\n')
+}
+
+function buildEmbeddingSample(lang: Lang, ctx: SampleContext): string {
+  const url = `${ctx.baseUrl}${ctx.endpointPath}`
+  const text = 'The food was delicious and the waiter…'
+
+  if (lang === 'curl') {
+    const body = JSON.stringify({ model: ctx.modelName, input: text }, null, 2)
+    return [
+      `curl ${url} \\`,
+      `  -H "Authorization: Bearer $${ctx.apiKeyEnv}" \\`,
+      `  -H "Content-Type: application/json" \\`,
+      `  -d '${body.replace(/\n/g, '\n     ')}'`,
+    ].join('\n')
+  }
+  if (lang === 'python') {
+    return [
+      'from openai import OpenAI',
+      '',
+      `client = OpenAI(base_url="${ctx.baseUrl}/v1", api_key="<YOUR_API_KEY>")`,
+      '',
+      'response = client.embeddings.create(',
+      `    model="${ctx.modelName}",`,
+      `    input="${text}",`,
+      ')',
+      '',
+      'print(response.data[0].embedding[:8])',
+    ].join('\n')
+  }
+  if (lang === 'typescript') {
+    return [
+      `import OpenAI from 'openai'`,
+      '',
+      `const client = new OpenAI({`,
+      `  baseURL: '${ctx.baseUrl}/v1',`,
+      `  apiKey: process.env.${ctx.apiKeyEnv},`,
+      `})`,
+      '',
+      `const response = await client.embeddings.create({`,
+      `  model: '${ctx.modelName}',`,
+      `  input: '${text}',`,
+      `})`,
+      '',
+      `console.log(response.data[0].embedding.slice(0, 8))`,
+    ].join('\n')
+  }
+  return [
+    `const response = await fetch('${url}', {`,
+    `  method: 'POST',`,
+    `  headers: {`,
+    `    Authorization: \`Bearer \${process.env.${ctx.apiKeyEnv}}\`,`,
+    `    'Content-Type': 'application/json',`,
+    `  },`,
+    `  body: JSON.stringify({`,
+    `    model: '${ctx.modelName}',`,
+    `    input: '${text}',`,
+    `  }),`,
+    `})`,
+    '',
+    `const data = await response.json()`,
+    `console.log(data.data[0].embedding.slice(0, 8))`,
+  ].join('\n')
+}
+
+function buildImageSample(lang: Lang, ctx: SampleContext): string {
+  const url = `${ctx.baseUrl}${ctx.endpointPath}`
+  const prompt = 'A serene koi pond at sunset, ukiyo-e style.'
+
+  if (lang === 'curl') {
+    const body = JSON.stringify(
+      { model: ctx.modelName, prompt, size: '1024x1024', n: 1 },
+      null,
+      2
+    )
+    return [
+      `curl ${url} \\`,
+      `  -H "Authorization: Bearer $${ctx.apiKeyEnv}" \\`,
+      `  -H "Content-Type: application/json" \\`,
+      `  -d '${body.replace(/\n/g, '\n     ')}'`,
+    ].join('\n')
+  }
+  if (lang === 'python') {
+    return [
+      'from openai import OpenAI',
+      '',
+      `client = OpenAI(base_url="${ctx.baseUrl}/v1", api_key="<YOUR_API_KEY>")`,
+      '',
+      'response = client.images.generate(',
+      `    model="${ctx.modelName}",`,
+      `    prompt="${prompt}",`,
+      `    size="1024x1024",`,
+      `    n=1,`,
+      ')',
+      '',
+      'print(response.data[0].url)',
+    ].join('\n')
+  }
+  if (lang === 'typescript') {
+    return [
+      `import OpenAI from 'openai'`,
+      '',
+      `const client = new OpenAI({`,
+      `  baseURL: '${ctx.baseUrl}/v1',`,
+      `  apiKey: process.env.${ctx.apiKeyEnv},`,
+      `})`,
+      '',
+      `const response = await client.images.generate({`,
+      `  model: '${ctx.modelName}',`,
+      `  prompt: '${prompt}',`,
+      `  size: '1024x1024',`,
+      `  n: 1,`,
+      `})`,
+      '',
+      `console.log(response.data[0].url)`,
+    ].join('\n')
+  }
+  return [
+    `const response = await fetch('${url}', {`,
+    `  method: 'POST',`,
+    `  headers: {`,
+    `    Authorization: \`Bearer \${process.env.${ctx.apiKeyEnv}}\`,`,
+    `    'Content-Type': 'application/json',`,
+    `  },`,
+    `  body: JSON.stringify({`,
+    `    model: '${ctx.modelName}',`,
+    `    prompt: '${prompt}',`,
+    `    size: '1024x1024',`,
+    `    n: 1,`,
+    `  }),`,
+    `})`,
+    '',
+    `const data = await response.json()`,
+    `console.log(data.data[0].url)`,
+  ].join('\n')
+}
+
+function buildSample(
+  lang: Lang,
+  endpointType: string,
+  ctx: SampleContext
+): string {
+  if (endpointType === 'anthropic') return buildAnthropicSample(lang, ctx)
+  if (endpointType === 'gemini') return buildGeminiSample(lang, ctx)
+  if (endpointType === 'embeddings' || endpointType === 'jina-rerank')
+    return buildEmbeddingSample(lang, ctx)
+  if (endpointType === 'image-generation') return buildImageSample(lang, ctx)
+  return buildChatSample(lang, ctx)
+}
+
+// ---------------------------------------------------------------------------
+// Code samples section
+// ---------------------------------------------------------------------------
+
+function CodeSamplesSection(props: {
+  model: PricingModel
+  endpointMap: Record<string, { path?: string; method?: string }>
+}) {
+  const { t } = useTranslation()
+  const { status } = useStatus()
+
+  const baseUrl = useMemo(() => {
+    const candidate =
+      (status as Record<string, unknown> | null)?.server_address ??
+      (status as Record<string, unknown> | null)?.serverAddress ??
+      (status?.data as Record<string, unknown> | undefined)?.server_address ??
+      (status?.data as Record<string, unknown> | undefined)?.serverAddress
+    if (candidate && typeof candidate === 'string') {
+      return candidate.replace(/\/$/, '')
+    }
+    if (typeof window !== 'undefined') return window.location.origin
+    return 'https://api.example.com'
+  }, [status])
+
+  const endpoints = useMemo(() => {
+    const types = props.model.supported_endpoint_types || []
+    return types
+      .map((type) => {
+        const info = props.endpointMap[type] || {}
+        let path = info.path || ''
+        if (path && path.includes('{model}')) {
+          path = replaceModelInPath(path, props.model.model_name || '')
+        }
+        return { type, path, method: info.method || 'POST' }
+      })
+      .filter((e) => Boolean(e.path))
+  }, [props.model, props.endpointMap])
+
+  const [endpointType, setEndpointType] = useState<string>(
+    endpoints[0]?.type ?? ''
+  )
+  const [lang, setLang] = useState<Lang>('curl')
+
+  const activeEndpoint = useMemo(() => {
+    return endpoints.find((e) => e.type === endpointType) ?? endpoints[0]
+  }, [endpointType, endpoints])
+
+  if (endpoints.length === 0 || !activeEndpoint) {
+    return null
+  }
+
+  const code = buildSample(lang, activeEndpoint.type, {
+    baseUrl,
+    apiKeyEnv: 'NEW_API_KEY',
+    modelName: props.model.model_name || '',
+    endpointType: activeEndpoint.type,
+    endpointPath: activeEndpoint.path,
+  })
+
+  return (
+    <section>
+      <SectionTitle icon={ScrollText}>{t('Code samples')}</SectionTitle>
+
+      <div className='flex flex-wrap items-center gap-2'>
+        {endpoints.length > 1 && (
+          <Tabs value={endpointType} onValueChange={setEndpointType}>
+            <TabsList className='bg-muted/40 h-8 p-0.5'>
+              {endpoints.map((ep) => (
+                <TabsTrigger
+                  key={ep.type}
+                  value={ep.type}
+                  className='h-7 px-2.5 text-xs'
+                >
+                  {ep.type}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
+        )}
+
+        <Tabs
+          value={lang}
+          onValueChange={(v) => setLang(v as Lang)}
+          className='ml-auto'
+        >
+          <TabsList className='bg-muted/40 h-8 p-0.5'>
+            {(Object.keys(LANG_LABELS) as Lang[]).map((l) => (
+              <TabsTrigger key={l} value={l} className='h-7 px-2.5 text-xs'>
+                {LANG_LABELS[l]}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+      </div>
+
+      <div className='mt-3'>
+        <CodeBlock code={code} language={LANG_HIGHLIGHT[lang]}>
+          <CodeBlockCopyButton />
+        </CodeBlock>
+      </div>
+
+      <p className='text-muted-foreground mt-2 text-xs'>
+        {t('Replace')}{' '}
+        <code className='bg-muted rounded px-1 py-0.5 font-mono text-[11px]'>
+          {'<YOUR_API_KEY>'}
+        </code>{' '}
+        {t('with the API key from your token settings.')}
+      </p>
+    </section>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Supported parameters table
+// ---------------------------------------------------------------------------
+
+function SupportedParametersSection(props: { model: PricingModel }) {
+  const { t } = useTranslation()
+  const params = useMemo(
+    () => buildSupportedParameters(props.model),
+    [props.model]
+  )
+
+  if (params.length === 0) return null
+
+  return (
+    <section>
+      <SectionTitle icon={Sigma}>{t('Supported parameters')}</SectionTitle>
+      <div className='border-border/60 overflow-hidden rounded-lg border'>
+        <Table>
+          <TableHeader>
+            <TableRow className='bg-muted/30 hover:bg-muted/30'>
+              <TableHead className='h-9 w-44 text-xs'>
+                {t('Parameter')}
+              </TableHead>
+              <TableHead className='h-9 w-24 text-xs'>{t('Type')}</TableHead>
+              <TableHead className='h-9 w-32 text-xs'>
+                {t('Default / range')}
+              </TableHead>
+              <TableHead className='h-9 text-xs'>{t('Description')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {params.map((p) => (
+              <TableRow key={p.name} className='hover:bg-muted/20'>
+                <TableCell className='py-2 align-top'>
+                  <div className='flex items-center gap-1.5'>
+                    <code className='font-mono text-xs font-medium'>
+                      {p.name}
+                    </code>
+                    {p.required && (
+                      <Badge
+                        variant='outline'
+                        className='h-4 border-rose-500/40 px-1 text-[9px] text-rose-600 dark:text-rose-400'
+                      >
+                        {t('required')}
+                      </Badge>
+                    )}
+                  </div>
+                </TableCell>
+                <TableCell className='py-2 align-top'>
+                  <Badge
+                    variant='secondary'
+                    className='h-5 rounded-sm px-1.5 font-mono text-[10px] font-normal'
+                  >
+                    {p.type}
+                  </Badge>
+                </TableCell>
+                <TableCell className='py-2 align-top'>
+                  <ParamRangeCell param={p} />
+                </TableCell>
+                <TableCell className='text-muted-foreground py-2 align-top text-xs'>
+                  {t(p.descriptionKey)}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </section>
+  )
+}
+
+function ParamRangeCell(props: { param: SupportedParameter }) {
+  const { defaultValue, range, enumValues } = props.param
+  if (defaultValue !== undefined) {
+    return (
+      <div className='flex flex-wrap items-center gap-1'>
+        <span className='text-muted-foreground text-[11px]'>=</span>
+        <code className='bg-muted rounded px-1 py-0.5 font-mono text-[11px]'>
+          {String(defaultValue)}
+        </code>
+        {range && (
+          <span className='text-muted-foreground text-[11px]'>{range}</span>
+        )}
+      </div>
+    )
+  }
+  if (range) {
+    return (
+      <span className='text-muted-foreground font-mono text-[11px]'>
+        {range}
+      </span>
+    )
+  }
+  if (enumValues && enumValues.length > 0) {
+    return (
+      <div className='flex flex-wrap gap-0.5'>
+        {enumValues.map((v) => (
+          <code
+            key={v}
+            className='bg-muted text-muted-foreground rounded px-1 py-0.5 font-mono text-[10px]'
+          >
+            {v}
+          </code>
+        ))}
+      </div>
+    )
+  }
+  return <span className='text-muted-foreground/60 text-[11px]'>—</span>
+}
+
+// ---------------------------------------------------------------------------
+// Rate-limits table
+// ---------------------------------------------------------------------------
+
+function RateLimitsSection(props: { model: PricingModel }) {
+  const { t } = useTranslation()
+  const limits = useMemo(() => buildRateLimits(props.model), [props.model])
+
+  if (limits.length === 0) return null
+
+  return (
+    <section>
+      <SectionTitle icon={Gauge}>{t('Rate limits')}</SectionTitle>
+      <div className='border-border/60 overflow-hidden rounded-lg border'>
+        <Table>
+          <TableHeader>
+            <TableRow className='bg-muted/30 hover:bg-muted/30'>
+              <TableHead className='h-9 text-xs'>{t('Group')}</TableHead>
+              <TableHead className='h-9 text-right text-xs'>RPM</TableHead>
+              <TableHead className='h-9 text-right text-xs'>TPM</TableHead>
+              <TableHead className='h-9 text-right text-xs'>RPD</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {limits.map((l) => (
+              <TableRow key={l.group} className='hover:bg-muted/20'>
+                <TableCell className='py-2 font-mono text-xs'>
+                  {l.group}
+                </TableCell>
+                <TableCell className='py-2 text-right font-mono text-xs'>
+                  {formatRateLimit(l.rpm)}
+                </TableCell>
+                <TableCell className='py-2 text-right font-mono text-xs'>
+                  {formatRateLimit(l.tpm)}
+                </TableCell>
+                <TableCell className='py-2 text-right font-mono text-xs'>
+                  {formatRateLimit(l.rpd)}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <p className='text-muted-foreground mt-2 text-[11px] leading-relaxed'>
+        {t(
+          'RPM = requests per minute, TPM = tokens per minute, RPD = requests per day. Limits apply per token group.'
+        )}
+      </p>
+    </section>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Provider info card (vendor / tokenizer / license / privacy)
+// ---------------------------------------------------------------------------
+//
+// Exported separately so the Overview tab can render it alongside capabilities
+// and modalities (i.e. "what is this model?" rather than "how do I call it?").
+
+export function ModelDetailsProviderInfo(props: { model: PricingModel }) {
+  const { t } = useTranslation()
+  const info = useMemo(() => inferApiInfo(props.model), [props.model])
+
+  return (
+    <section>
+      <SectionTitle icon={ShieldCheck}>
+        {t('Provider & data privacy')}
+      </SectionTitle>
+
+      <div className='border-border/60 bg-border/60 grid grid-cols-1 gap-px overflow-hidden rounded-lg border sm:grid-cols-2'>
+        <InfoCell label={t('Provider')}>
+          <div className='flex items-center gap-1.5'>
+            <span className='text-sm font-medium'>{info.vendor_label}</span>
+            {info.homepage && (
+              <a
+                href={info.homepage}
+                target='_blank'
+                rel='noopener noreferrer'
+                className='text-muted-foreground hover:text-foreground inline-flex items-center gap-0.5 text-[11px]'
+              >
+                {t('Docs')}
+                <ExternalLink className='size-3' />
+              </a>
+            )}
+          </div>
+        </InfoCell>
+
+        <InfoCell label={t('Tokenizer')}>
+          <div className='flex flex-col gap-0.5'>
+            <code className='font-mono text-xs'>{info.tokenizer}</code>
+            {info.tokenizer_note && (
+              <span className='text-muted-foreground text-[10px]'>
+                {info.tokenizer_note}
+              </span>
+            )}
+          </div>
+        </InfoCell>
+
+        <InfoCell label={t('License')}>
+          <div className='flex flex-col gap-1'>
+            <span className='text-sm'>{info.license}</span>
+            <Badge
+              variant='outline'
+              className={cn(
+                'h-4 w-fit px-1.5 text-[9px] font-medium',
+                info.license_kind === 'open' &&
+                  'border-emerald-500/40 text-emerald-600 dark:text-emerald-400',
+                info.license_kind === 'open-weight' &&
+                  'border-sky-500/40 text-sky-600 dark:text-sky-400',
+                info.license_kind === 'proprietary' &&
+                  'border-amber-500/40 text-amber-600 dark:text-amber-400'
+              )}
+            >
+              {info.license_kind === 'open'
+                ? t('Open source')
+                : info.license_kind === 'open-weight'
+                  ? t('Open weights')
+                  : info.license_kind === 'proprietary'
+                    ? t('Proprietary')
+                    : t('Unknown')}
+            </Badge>
+          </div>
+        </InfoCell>
+
+        <InfoCell label={t('Data retention')}>
+          <span className='text-sm'>
+            {info.data_retention_days === 0
+              ? t('Zero retention')
+              : `${info.data_retention_days} ${t('days')}`}
+          </span>
+          <span className='text-muted-foreground text-[10px]'>
+            {info.training_opt_out
+              ? t('Not used for upstream training by default')
+              : t('May be used for training by upstream provider')}
+          </span>
+        </InfoCell>
+      </div>
+    </section>
+  )
+}
+
+function InfoCell(props: { label: string; children: React.ReactNode }) {
+  return (
+    <div className='bg-card flex flex-col gap-1 px-3 py-2.5'>
+      <span className='text-muted-foreground text-[10px] font-medium tracking-wider uppercase'>
+        {props.label}
+      </span>
+      {props.children}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Authentication preview
+// ---------------------------------------------------------------------------
+
+function AuthSection() {
+  const { t } = useTranslation()
+  return (
+    <section>
+      <SectionTitle icon={KeyRound}>{t('Authentication')}</SectionTitle>
+      <div className='border-border/60 bg-muted/20 flex items-start gap-2 rounded-lg border p-3'>
+        <ChevronRight className='text-muted-foreground mt-0.5 size-3.5 shrink-0' />
+        <div className='space-y-1.5 text-xs leading-relaxed'>
+          <p>
+            {t('All requests must include')}{' '}
+            <code className='bg-muted rounded px-1 py-0.5 font-mono text-[11px]'>
+              Authorization: Bearer &lt;TOKEN&gt;
+            </code>{' '}
+            {t('header. Anthropic-formatted endpoints accept the')}{' '}
+            <code className='bg-muted rounded px-1 py-0.5 font-mono text-[11px]'>
+              x-api-key
+            </code>{' '}
+            {t('header instead.')}
+          </p>
+          <p className='text-muted-foreground'>
+            {t(
+              'Generate tokens from the Tokens page; you can scope them to specific models, groups, IPs, and rate-limits.'
+            )}
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Composite API tab
+// ---------------------------------------------------------------------------
+
+export function ModelDetailsApi(props: {
+  model: PricingModel
+  endpointMap: Record<string, { path?: string; method?: string }>
+}) {
+  return (
+    <div className='space-y-6'>
+      <CodeSamplesSection model={props.model} endpointMap={props.endpointMap} />
+      <AuthSection />
+      <SupportedParametersSection model={props.model} />
+      <RateLimitsSection model={props.model} />
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Local UI helpers
+// ---------------------------------------------------------------------------
+
+function SectionTitle(props: {
+  children: React.ReactNode
+  icon: React.ComponentType<{ className?: string }>
+}) {
+  const Icon = props.icon
+  return (
+    <h3 className='text-foreground mb-3 flex items-center gap-1.5 text-sm font-semibold'>
+      <Icon className='text-muted-foreground/70 size-3.5' />
+      {props.children}
+    </h3>
+  )
+}
+
+// Re-export so the parent can keep its own SectionTitle if it wants:
+export { Zap as ApiTabIcon }
diff --git a/web/default/src/features/pricing/components/model-details-apps.tsx b/web/default/src/features/pricing/components/model-details-apps.tsx
new file mode 100644
index 00000000000..3c0ce1a93d2
--- /dev/null
+++ b/web/default/src/features/pricing/components/model-details-apps.tsx
@@ -0,0 +1,212 @@
+import { useMemo } from 'react'
+import {
+  ArrowDownRight,
+  ArrowUpRight,
+  ExternalLink,
+  Trophy,
+} from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import {
+  buildAppRankings,
+  formatTokenVolume,
+  type AppRanking,
+} from '../lib/mock-stats'
+import type { PricingModel } from '../types'
+
+const COMPACT_NUMBER = new Intl.NumberFormat(undefined, {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+function RankBadge(props: { rank: number }) {
+  const rank = props.rank
+  const isPodium = rank <= 3
+  const palette =
+    rank === 1
+      ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300'
+      : rank === 2
+        ? 'bg-slate-100 text-slate-700 dark:bg-slate-500/20 dark:text-slate-300'
+        : rank === 3
+          ? 'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-300'
+          : 'bg-muted text-muted-foreground'
+  return (
+    <span
+      className={cn(
+        'inline-flex size-7 shrink-0 items-center justify-center rounded-full font-mono text-xs font-bold tabular-nums',
+        palette
+      )}
+    >
+      {isPodium ? <Trophy className='size-3.5' /> : rank}
+    </span>
+  )
+}
+
+function GrowthChip(props: { value: number }) {
+  const value = props.value
+  const isUp = value > 0
+  const isDown = value < 0
+  const palette = isUp
+    ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300'
+    : isDown
+      ? 'bg-rose-100 text-rose-700 dark:bg-rose-500/20 dark:text-rose-300'
+      : 'bg-muted text-muted-foreground'
+  const Icon = isUp ? ArrowUpRight : isDown ? ArrowDownRight : null
+  const formatted = `${value > 0 ? '+' : ''}${value.toFixed(1)}%`
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 font-mono text-[11px] font-semibold tabular-nums',
+        palette
+      )}
+    >
+      {Icon && <Icon className='size-3' />}
+      {formatted}
+    </span>
+  )
+}
+
+function AppLink(props: { app: AppRanking }) {
+  if (!props.app.url) {
+    return <span className='text-foreground'>{props.app.name}</span>
+  }
+  return (
+    <a
+      href={props.app.url}
+      target='_blank'
+      rel='noreferrer'
+      className='text-foreground hover:text-primary inline-flex items-center gap-1 transition-colors'
+    >
+      {props.app.name}
+      <ExternalLink className='text-muted-foreground/40 size-3' />
+    </a>
+  )
+}
+
+export function ModelDetailsApps(props: { model: PricingModel }) {
+  const { t } = useTranslation()
+  const apps = useMemo(() => buildAppRankings(props.model, 12), [props.model])
+
+  if (apps.length === 0) {
+    return (
+      <div className='text-muted-foreground rounded-lg border p-6 text-center text-sm'>
+        {t('No app usage data available for this model.')}
+      </div>
+    )
+  }
+
+  const totalMonthlyTokens = apps.reduce((s, a) => s + a.monthly_tokens, 0)
+  const top = apps[0]
+  const headerCellClass =
+    'text-muted-foreground py-2 text-[10px] font-medium tracking-wider uppercase'
+
+  return (
+    <div className='flex flex-col gap-4'>
+      <div className='grid grid-cols-1 gap-2 sm:grid-cols-3'>
+        <div className='bg-muted/20 rounded-lg border p-3'>
+          <div className='text-muted-foreground text-[10px] font-medium tracking-wider uppercase'>
+            {t('Tracked apps')}
+          </div>
+          <div className='text-foreground mt-1 font-mono text-lg font-semibold tabular-nums'>
+            {apps.length}
+          </div>
+          <p className='text-muted-foreground/70 text-[11px]'>
+            {t('Top integrations using this model')}
+          </p>
+        </div>
+        <div className='bg-muted/20 rounded-lg border p-3'>
+          <div className='text-muted-foreground text-[10px] font-medium tracking-wider uppercase'>
+            {t('Monthly tokens')}
+          </div>
+          <div className='text-foreground mt-1 font-mono text-lg font-semibold tabular-nums'>
+            {COMPACT_NUMBER.format(totalMonthlyTokens)}
+          </div>
+          <p className='text-muted-foreground/70 text-[11px]'>
+            {t('Aggregated across the apps below')}
+          </p>
+        </div>
+        <div className='bg-muted/20 rounded-lg border p-3'>
+          <div className='text-muted-foreground text-[10px] font-medium tracking-wider uppercase'>
+            {t('#1 by usage')}
+          </div>
+          <div className='text-foreground mt-1 truncate text-base font-semibold'>
+            {top.name}
+          </div>
+          <p className='text-muted-foreground/70 truncate text-[11px]'>
+            {top.category} · {formatTokenVolume(top.monthly_tokens)}{' '}
+            {t('tokens / mo')}
+          </p>
+        </div>
+      </div>
+
+      <div className='overflow-x-auto rounded-lg border'>
+        <Table className='text-sm'>
+          <TableHeader>
+            <TableRow className='hover:bg-transparent'>
+              <TableHead className={cn(headerCellClass, 'w-12')}>#</TableHead>
+              <TableHead className={headerCellClass}>{t('App')}</TableHead>
+              <TableHead
+                className={cn(headerCellClass, 'hidden md:table-cell')}
+              >
+                {t('Category')}
+              </TableHead>
+              <TableHead className={`${headerCellClass} text-right`}>
+                {t('Monthly tokens')}
+              </TableHead>
+              <TableHead className={`${headerCellClass} text-right`}>
+                {t('30d change')}
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {apps.map((app) => (
+              <TableRow key={`${app.rank}-${app.name}`}>
+                <TableCell className='py-2.5'>
+                  <RankBadge rank={app.rank} />
+                </TableCell>
+                <TableCell className='py-2.5'>
+                  <div className='flex items-center gap-3'>
+                    <span className='bg-muted text-muted-foreground inline-flex size-7 shrink-0 items-center justify-center rounded-md font-bold'>
+                      {app.initial}
+                    </span>
+                    <div className='min-w-0'>
+                      <div className='text-sm font-medium'>
+                        <AppLink app={app} />
+                      </div>
+                      <p className='text-muted-foreground line-clamp-1 text-xs'>
+                        {app.description}
+                      </p>
+                    </div>
+                  </div>
+                </TableCell>
+                <TableCell className='text-muted-foreground hidden py-2.5 text-xs md:table-cell'>
+                  {app.category}
+                </TableCell>
+                <TableCell className='py-2.5 text-right font-mono tabular-nums'>
+                  {formatTokenVolume(app.monthly_tokens)}
+                </TableCell>
+                <TableCell className='py-2.5 text-right'>
+                  <GrowthChip value={app.growth_pct} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <p className='text-muted-foreground/60 text-[11px] leading-relaxed'>
+        {t(
+          'App rankings shown here are simulated for preview purposes and will be replaced with live usage data once the backend integration is complete.'
+        )}
+      </p>
+    </div>
+  )
+}
diff --git a/web/default/src/features/pricing/components/model-details-capabilities.tsx b/web/default/src/features/pricing/components/model-details-capabilities.tsx
new file mode 100644
index 00000000000..7619b0d88a6
--- /dev/null
+++ b/web/default/src/features/pricing/components/model-details-capabilities.tsx
@@ -0,0 +1,163 @@
+import {
+  BookOpenCheck,
+  Braces,
+  Code2,
+  Database,
+  FileCode,
+  Globe,
+  type LucideIcon,
+  PanelTopOpen,
+  ScanEye,
+  Settings2,
+  Sparkles,
+  Workflow,
+  Zap,
+} from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import type { ModelCapability } from '../types'
+
+type CapabilityMeta = {
+  icon: LucideIcon
+  labelKey: string
+  descriptionKey: string
+}
+
+const CAPABILITY_META: Record<ModelCapability, CapabilityMeta> = {
+  function_calling: {
+    icon: Workflow,
+    labelKey: 'Function calling',
+    descriptionKey:
+      'Invoke developer-defined functions with structured arguments',
+  },
+  streaming: {
+    icon: Zap,
+    labelKey: 'Streaming',
+    descriptionKey: 'Stream tokens incrementally as they are generated',
+  },
+  vision: {
+    icon: ScanEye,
+    labelKey: 'Vision',
+    descriptionKey: 'Understand image inputs alongside text',
+  },
+  json_mode: {
+    icon: Braces,
+    labelKey: 'JSON mode',
+    descriptionKey: 'Force a syntactically valid JSON response',
+  },
+  structured_output: {
+    icon: FileCode,
+    labelKey: 'Structured output',
+    descriptionKey: 'Return data conforming to a JSON schema',
+  },
+  reasoning: {
+    icon: Sparkles,
+    labelKey: 'Reasoning',
+    descriptionKey: 'Multi-step thinking before final answer',
+  },
+  tools: {
+    icon: Settings2,
+    labelKey: 'Tools',
+    descriptionKey: 'Use external tools to extend capabilities',
+  },
+  system_prompt: {
+    icon: PanelTopOpen,
+    labelKey: 'System prompt',
+    descriptionKey: 'Steer behaviour with a system instruction',
+  },
+  web_search: {
+    icon: Globe,
+    labelKey: 'Web search',
+    descriptionKey: 'Search the public web at inference time',
+  },
+  code_interpreter: {
+    icon: Code2,
+    labelKey: 'Code interpreter',
+    descriptionKey: 'Execute code in a sandbox during the response',
+  },
+  caching: {
+    icon: Database,
+    labelKey: 'Prompt caching',
+    descriptionKey: 'Cache repeated prompt prefixes for cheaper, faster reuse',
+  },
+  embeddings: {
+    icon: BookOpenCheck,
+    labelKey: 'Embeddings',
+    descriptionKey: 'Return vector embeddings for inputs',
+  },
+}
+
+/**
+ * Order capabilities for display. We put the most user-facing capabilities
+ * first, then the rest. Anything not listed sinks to the bottom in a stable
+ * order so the layout looks tidy across models.
+ */
+const CAPABILITY_ORDER: ModelCapability[] = [
+  'streaming',
+  'function_calling',
+  'tools',
+  'json_mode',
+  'structured_output',
+  'vision',
+  'reasoning',
+  'caching',
+  'system_prompt',
+  'web_search',
+  'code_interpreter',
+  'embeddings',
+]
+
+function orderCapabilities(capabilities: ModelCapability[]): ModelCapability[] {
+  const set = new Set(capabilities)
+  const ordered = CAPABILITY_ORDER.filter((c) => set.has(c))
+  for (const c of capabilities) {
+    if (!ordered.includes(c)) ordered.push(c)
+  }
+  return ordered
+}
+
+export function ModelDetailsCapabilities(props: {
+  capabilities: ModelCapability[]
+}) {
+  const { t } = useTranslation()
+  const ordered = orderCapabilities(props.capabilities)
+
+  if (ordered.length === 0) {
+    return (
+      <p className='text-muted-foreground text-sm'>
+        {t('No capabilities reported for this model.')}
+      </p>
+    )
+  }
+
+  return (
+    <div className='grid grid-cols-2 gap-2 @md/details:grid-cols-3 @2xl/details:grid-cols-4'>
+      {ordered.map((capability) => {
+        const meta = CAPABILITY_META[capability]
+        if (!meta) return null
+        const Icon = meta.icon
+        return (
+          <div
+            key={capability}
+            className={cn(
+              'group flex items-start gap-2 rounded-lg border p-3 transition-colors',
+              'hover:bg-muted/30'
+            )}
+          >
+            <span className='bg-muted text-foreground inline-flex size-7 shrink-0 items-center justify-center rounded-md transition-colors group-hover:bg-emerald-100 group-hover:text-emerald-700 dark:group-hover:bg-emerald-500/20 dark:group-hover:text-emerald-300'>
+              <Icon className='size-3.5' />
+            </span>
+            <div className='min-w-0 flex-1'>
+              <div className='text-foreground truncate text-xs font-semibold'>
+                {t(meta.labelKey)}
+              </div>
+              <p className='text-muted-foreground mt-0.5 line-clamp-2 text-[11px] leading-snug'>
+                {t(meta.descriptionKey)}
+              </p>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/web/default/src/features/pricing/components/model-details-charts.tsx b/web/default/src/features/pricing/components/model-details-charts.tsx
new file mode 100644
index 00000000000..5b090a1f6ad
--- /dev/null
+++ b/web/default/src/features/pricing/components/model-details-charts.tsx
@@ -0,0 +1,298 @@
+import { useMemo } from 'react'
+import { VChart } from '@visactor/react-vchart'
+import { useTranslation } from 'react-i18next'
+import { useChartTheme } from '@/lib/use-chart-theme'
+import { cn } from '@/lib/utils'
+import { VCHART_OPTION } from '@/lib/vchart'
+import type { LatencyTimePoint, UptimeDayPoint } from '../lib/mock-stats'
+
+function formatHourLabel(iso: string): string {
+  const date = new Date(iso)
+  const hours = date.getHours()
+  return `${String(hours).padStart(2, '0')}:00`
+}
+
+function formatDayLabel(date: string): string {
+  const parsed = new Date(date)
+  return parsed.toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+// ---------------------------------------------------------------------------
+// Latency trend chart (24h, multi-group line chart)
+// ---------------------------------------------------------------------------
+
+export function LatencyTrendChart(props: {
+  series: LatencyTimePoint[]
+  className?: string
+}) {
+  const { t } = useTranslation()
+  const { resolvedTheme, themeReady } = useChartTheme()
+
+  const spec = useMemo(() => {
+    if (props.series.length === 0) return null
+    const data = props.series.map((point) => ({
+      time: formatHourLabel(point.timestamp),
+      group: point.group,
+      ttft: point.ttft_ms,
+    }))
+    return {
+      type: 'line' as const,
+      data: [{ id: 'latency', values: data }],
+      xField: 'time',
+      yField: 'ttft',
+      seriesField: 'group',
+      smooth: true,
+      point: { visible: false },
+      legends: { visible: true, orient: 'top', position: 'start' },
+      tooltip: {
+        mark: {
+          title: { value: (d: { time: string }) => d.time },
+          content: [
+            {
+              key: (d: { group: string }) => d.group,
+              value: (d: { ttft: number }) => `${Math.round(d.ttft)} ms`,
+            },
+          ],
+        },
+      },
+      axes: [
+        {
+          orient: 'bottom',
+          label: {
+            style: { fill: 'currentColor', fontSize: 10 },
+          },
+          tick: { visible: false },
+        },
+        {
+          orient: 'left',
+          label: {
+            formatMethod: (val: number | string) => `${val} ms`,
+            style: { fill: 'currentColor', fontSize: 10 },
+          },
+          grid: { visible: true, style: { lineDash: [3, 3] } },
+        },
+      ],
+    }
+  }, [props.series])
+
+  if (props.series.length === 0) {
+    return (
+      <div
+        className={cn(
+          'text-muted-foreground flex h-48 items-center justify-center rounded-lg border text-xs',
+          props.className
+        )}
+      >
+        {t('No latency data available')}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('h-64 sm:h-72', props.className)}>
+      {themeReady && spec && (
+        <VChart
+          key={`latency-${resolvedTheme}`}
+          spec={{
+            ...spec,
+            theme: resolvedTheme === 'dark' ? 'dark' : 'light',
+            background: 'transparent',
+          }}
+          option={VCHART_OPTION}
+        />
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Uptime bar chart (30 days)
+// ---------------------------------------------------------------------------
+
+export function UptimeBarChart(props: {
+  series: UptimeDayPoint[]
+  className?: string
+}) {
+  const { t } = useTranslation()
+  const { resolvedTheme, themeReady } = useChartTheme()
+
+  const spec = useMemo(() => {
+    if (props.series.length === 0) return null
+
+    const data = props.series.map((point) => ({
+      date: formatDayLabel(point.date),
+      uptime: point.uptime_pct,
+      incidents: point.incidents,
+      outage: point.outage_minutes,
+    }))
+
+    return {
+      type: 'bar' as const,
+      data: [{ id: 'uptime', values: data }],
+      xField: 'date',
+      yField: 'uptime',
+      bar: {
+        style: {
+          fill: (datum: { uptime: number }) => {
+            if (datum.uptime >= 99.9) return '#10b981'
+            if (datum.uptime >= 99.0) return '#f59e0b'
+            return '#ef4444'
+          },
+          cornerRadius: 2,
+        },
+      },
+      tooltip: {
+        mark: {
+          title: { value: (d: { date: string }) => d.date },
+          content: [
+            {
+              key: t('Uptime'),
+              value: (d: { uptime: number }) => `${d.uptime.toFixed(2)}%`,
+            },
+            {
+              key: t('Incidents'),
+              value: (d: { incidents: number }) => `${d.incidents}`,
+            },
+            {
+              key: t('Outage'),
+              value: (d: { outage: number }) => `${d.outage} ${t('minutes')}`,
+            },
+          ],
+        },
+      },
+      axes: [
+        {
+          orient: 'bottom',
+          label: {
+            style: { fill: 'currentColor', fontSize: 10 },
+            autoLimit: true,
+          },
+          tick: { visible: false },
+        },
+        {
+          orient: 'left',
+          min: 95,
+          max: 100,
+          label: {
+            formatMethod: (val: number | string) => `${val}%`,
+            style: { fill: 'currentColor', fontSize: 10 },
+          },
+          grid: { visible: true, style: { lineDash: [3, 3] } },
+        },
+      ],
+    }
+  }, [props.series, t])
+
+  if (props.series.length === 0) {
+    return (
+      <div
+        className={cn(
+          'text-muted-foreground flex h-48 items-center justify-center rounded-lg border text-xs',
+          props.className
+        )}
+      >
+        {t('No uptime data available')}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('h-56 sm:h-64', props.className)}>
+      {themeReady && spec && (
+        <VChart
+          key={`uptime-${resolvedTheme}`}
+          spec={{
+            ...spec,
+            theme: resolvedTheme === 'dark' ? 'dark' : 'light',
+            background: 'transparent',
+          }}
+          option={VCHART_OPTION}
+        />
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Throughput by group (horizontal bar)
+// ---------------------------------------------------------------------------
+
+export function ThroughputBarChart(props: {
+  rows: { group: string; throughput_tps: number }[]
+  className?: string
+}) {
+  const { t } = useTranslation()
+  const { resolvedTheme, themeReady } = useChartTheme()
+
+  const filtered = useMemo(
+    () => props.rows.filter((r) => r.throughput_tps > 0),
+    [props.rows]
+  )
+
+  const spec = useMemo(() => {
+    if (filtered.length === 0) return null
+    return {
+      type: 'bar' as const,
+      direction: 'horizontal' as const,
+      data: [{ id: 'tput', values: filtered.map((r) => ({ ...r })) }],
+      xField: 'throughput_tps',
+      yField: 'group',
+      bar: {
+        style: { fill: '#6366f1', cornerRadius: 2 },
+      },
+      label: {
+        visible: true,
+        position: 'right',
+        style: { fontSize: 11, fill: 'currentColor' },
+        formatMethod: (text: string) => `${text} t/s`,
+      },
+      axes: [
+        {
+          orient: 'left',
+          label: { style: { fill: 'currentColor', fontSize: 10 } },
+          tick: { visible: false },
+        },
+        {
+          orient: 'bottom',
+          label: { style: { fill: 'currentColor', fontSize: 10 } },
+          grid: { visible: true, style: { lineDash: [3, 3] } },
+        },
+      ],
+      tooltip: {
+        mark: {
+          title: { value: (d: { group: string }) => d.group },
+          content: [
+            {
+              key: t('Throughput'),
+              value: (d: { throughput_tps: number }) =>
+                `${d.throughput_tps.toFixed(1)} t/s`,
+            },
+          ],
+        },
+      },
+    }
+  }, [filtered, t])
+
+  if (filtered.length === 0) {
+    return null
+  }
+
+  return (
+    <div className={cn('h-48 sm:h-56', props.className)}>
+      {themeReady && spec && (
+        <VChart
+          key={`tput-${resolvedTheme}`}
+          spec={{
+            ...spec,
+            theme: resolvedTheme === 'dark' ? 'dark' : 'light',
+            background: 'transparent',
+          }}
+          option={VCHART_OPTION}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/web/default/src/features/pricing/components/model-details-modalities.tsx b/web/default/src/features/pricing/components/model-details-modalities.tsx
new file mode 100644
index 00000000000..5f1ad0f2d0d
--- /dev/null
+++ b/web/default/src/features/pricing/components/model-details-modalities.tsx
@@ -0,0 +1,155 @@
+import {
+  FileText,
+  Image as ImageIcon,
+  Mic2,
+  Type as TypeIcon,
+  Video,
+} from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import type { Modality } from '../types'
+
+type IconComponent = React.ComponentType<{ className?: string }>
+
+const MODALITY_META: Record<
+  Modality,
+  { icon: IconComponent; labelKey: string }
+> = {
+  text: { icon: TypeIcon, labelKey: 'Text' },
+  image: { icon: ImageIcon, labelKey: 'Image' },
+  audio: { icon: Mic2, labelKey: 'Audio' },
+  video: { icon: Video, labelKey: 'Video' },
+  file: { icon: FileText, labelKey: 'File' },
+}
+
+const ALL_MODALITIES: Modality[] = ['text', 'image', 'audio', 'video', 'file']
+
+/** Inline modality icons (used by the quick-stats flow). */
+export function ModalityIcons(props: {
+  modalities: Modality[]
+  className?: string
+}) {
+  const { t } = useTranslation()
+  if (props.modalities.length === 0) {
+    return <span className='text-muted-foreground text-xs'>—</span>
+  }
+  return (
+    <span className='inline-flex items-center gap-1'>
+      {props.modalities.map((modality) => {
+        const meta = MODALITY_META[modality]
+        const Icon = meta.icon
+        return (
+          <Tooltip key={modality}>
+            <TooltipTrigger
+              render={
+                <span
+                  aria-label={t(meta.labelKey)}
+                  className='text-foreground/80 inline-flex'
+                />
+              }
+            >
+              <Icon className={cn('size-3.5', props.className)} />
+            </TooltipTrigger>
+            <TooltipContent side='top' className='text-xs'>
+              {t(meta.labelKey)}
+            </TooltipContent>
+          </Tooltip>
+        )
+      })}
+    </span>
+  )
+}
+
+/**
+ * 2 × N matrix showing which modalities are supported as input vs output.
+ * Cells with a checkmark indicate support; empty cells show a dash.
+ */
+export function ModalitiesMatrix(props: {
+  input: Modality[]
+  output: Modality[]
+}) {
+  const { t } = useTranslation()
+  const inputSet = new Set(props.input)
+  const outputSet = new Set(props.output)
+
+  const renderRow = (label: string, set: Set<Modality>) => (
+    <tr>
+      <th
+        scope='row'
+        className='text-muted-foreground bg-muted/30 px-3 py-2 text-left text-[11px] font-medium tracking-wider uppercase'
+      >
+        {label}
+      </th>
+      {ALL_MODALITIES.map((modality) => {
+        const enabled = set.has(modality)
+        const Icon = MODALITY_META[modality].icon
+        return (
+          <td
+            key={modality}
+            className={cn(
+              'border-l px-3 py-2 text-center',
+              enabled
+                ? 'bg-emerald-50/40 dark:bg-emerald-500/10'
+                : 'bg-background'
+            )}
+          >
+            <span
+              className={cn(
+                'inline-flex items-center justify-center',
+                enabled
+                  ? 'text-emerald-700 dark:text-emerald-300'
+                  : 'text-muted-foreground/40'
+              )}
+              aria-label={
+                enabled
+                  ? t('{{modality}} supported', {
+                      modality: t(MODALITY_META[modality].labelKey),
+                    })
+                  : t('{{modality}} not supported', {
+                      modality: t(MODALITY_META[modality].labelKey),
+                    })
+              }
+            >
+              <Icon className='size-4' />
+            </span>
+          </td>
+        )
+      })}
+    </tr>
+  )
+
+  return (
+    <div className='overflow-x-auto rounded-lg border'>
+      <table className='w-full text-sm'>
+        <thead>
+          <tr className='bg-muted/40'>
+            <th
+              scope='col'
+              className='text-muted-foreground px-3 py-2 text-left text-[11px] font-medium tracking-wider uppercase'
+            >
+              {t('Modality')}
+            </th>
+            {ALL_MODALITIES.map((modality) => (
+              <th
+                key={modality}
+                scope='col'
+                className='text-muted-foreground border-l px-3 py-2 text-center text-[11px] font-medium tracking-wider uppercase'
+              >
+                {t(MODALITY_META[modality].labelKey)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {renderRow(t('Input'), inputSet)}
+          {renderRow(t('Output'), outputSet)}
+        </tbody>
+      </table>
+    </div>
+  )
+}
diff --git a/web/default/src/features/pricing/components/model-details-performance.tsx b/web/default/src/features/pricing/components/model-details-performance.tsx
new file mode 100644
index 00000000000..3d40b2a44be
--- /dev/null
+++ b/web/default/src/features/pricing/components/model-details-performance.tsx
@@ -0,0 +1,335 @@
+import { useMemo } from 'react'
+import {
+  Activity,
+  AlertTriangle,
+  Gauge,
+  HeartPulse,
+  Timer,
+  TrendingUp,
+} from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { GroupBadge } from '@/components/group-badge'
+import {
+  aggregateUptime,
+  buildGroupPerformance,
+  buildLatencyTimeSeries,
+  buildUptimeSeries,
+  formatLatency,
+  formatThroughput,
+  formatUptimePct,
+  type UptimeDayPoint,
+} from '../lib/mock-stats'
+import type { PricingModel } from '../types'
+import {
+  LatencyTrendChart,
+  ThroughputBarChart,
+  UptimeBarChart,
+} from './model-details-charts'
+import { UptimeSparkline } from './model-details-uptime-sparkline'
+
+const COMPACT_NUMBER = new Intl.NumberFormat(undefined, {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+})
+
+function StatCard(props: {
+  icon: React.ComponentType<{ className?: string }>
+  label: string
+  value: React.ReactNode
+  hint?: string
+  intent?: 'default' | 'warning' | 'success'
+}) {
+  const Icon = props.icon
+  const intent = props.intent ?? 'default'
+  return (
+    <div className='bg-background flex flex-col gap-1 rounded-lg border p-3'>
+      <span className='text-muted-foreground inline-flex items-center gap-1.5 text-[10px] font-medium tracking-wider uppercase'>
+        <Icon className='size-3' />
+        {props.label}
+      </span>
+      <span
+        className={cn(
+          'text-foreground font-mono text-lg font-semibold tabular-nums',
+          intent === 'warning' && 'text-amber-600 dark:text-amber-400',
+          intent === 'success' && 'text-emerald-600 dark:text-emerald-400'
+        )}
+      >
+        {props.value}
+      </span>
+      {props.hint && (
+        <span className='text-muted-foreground/70 text-[11px]'>
+          {props.hint}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export function ModelDetailsPerformance(props: { model: PricingModel }) {
+  const { t } = useTranslation()
+  const performances = useMemo(
+    () => buildGroupPerformance(props.model),
+    [props.model]
+  )
+  const latencySeries = useMemo(
+    () => buildLatencyTimeSeries(props.model),
+    [props.model]
+  )
+  const uptimeSeries = useMemo(
+    () => buildUptimeSeries(props.model),
+    [props.model]
+  )
+  const aggregated = useMemo(
+    () => aggregateUptime(uptimeSeries),
+    [uptimeSeries]
+  )
+  const uptimeByGroup = useMemo<Record<string, UptimeDayPoint[]>>(() => {
+    const map: Record<string, UptimeDayPoint[]> = {}
+    for (const perf of performances) {
+      map[perf.group] = buildUptimeSeries(props.model, perf.group)
+    }
+    return map
+  }, [performances, props.model])
+
+  if (performances.length === 0) {
+    return (
+      <div className='text-muted-foreground rounded-lg border p-6 text-center text-sm'>
+        {t('Performance data is not yet available for this model.')}
+      </div>
+    )
+  }
+
+  const bestTtft = Math.min(...performances.map((p) => p.ttft_p50_ms))
+  const bestThroughput = Math.max(...performances.map((p) => p.throughput_tps))
+  const totalRequests = performances.reduce(
+    (s, p) => s + p.request_volume_24h,
+    0
+  )
+  const intent =
+    aggregated.uptime_pct >= 99.9
+      ? 'success'
+      : aggregated.uptime_pct >= 99
+        ? 'default'
+        : 'warning'
+
+  const headerCellClass =
+    'text-muted-foreground py-2 text-[10px] font-medium tracking-wider uppercase'
+
+  return (
+    <div className='flex flex-col gap-4'>
+      <div className='grid grid-cols-2 gap-2 lg:grid-cols-4'>
+        <StatCard
+          icon={Timer}
+          label={t('Best TTFT')}
+          value={formatLatency(bestTtft)}
+          hint={t('Lowest median first-token latency')}
+        />
+        <StatCard
+          icon={Gauge}
+          label={t('Peak throughput')}
+          value={formatThroughput(bestThroughput)}
+          hint={t('Across all groups')}
+        />
+        <StatCard
+          icon={HeartPulse}
+          label={t('Uptime (30d)')}
+          value={formatUptimePct(aggregated.uptime_pct)}
+          hint={
+            aggregated.incidents > 0
+              ? t('{{count}} incidents in the last 30 days', {
+                  count: aggregated.incidents,
+                })
+              : t('No incidents in the last 30 days')
+          }
+          intent={intent}
+        />
+        <StatCard
+          icon={TrendingUp}
+          label={t('Requests (24h)')}
+          value={COMPACT_NUMBER.format(totalRequests)}
+          hint={t('Aggregated across enabled groups')}
+        />
+      </div>
+
+      <section>
+        <SectionHeader
+          icon={Activity}
+          title={t('Per-group performance')}
+          description={t(
+            'TTFT percentiles, throughput, and 30-day uptime by group'
+          )}
+        />
+        <div className='overflow-x-auto rounded-lg border'>
+          <Table className='text-sm'>
+            <TableHeader>
+              <TableRow className='hover:bg-transparent'>
+                <TableHead className={headerCellClass}>{t('Group')}</TableHead>
+                <TableHead className={`${headerCellClass} text-right`}>
+                  {t('TTFT P50')}
+                </TableHead>
+                <TableHead className={`${headerCellClass} text-right`}>
+                  {t('TTFT P95')}
+                </TableHead>
+                <TableHead className={`${headerCellClass} text-right`}>
+                  {t('TTFT P99')}
+                </TableHead>
+                <TableHead className={`${headerCellClass} text-right`}>
+                  {t('Throughput')}
+                </TableHead>
+                <TableHead
+                  className={`${headerCellClass} min-w-[160px] text-left`}
+                >
+                  {t('Uptime (30d)')}
+                </TableHead>
+                <TableHead className={`${headerCellClass} text-right`}>
+                  {t('Requests / 24h')}
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {performances.map((perf) => {
+                const isBestTtft = perf.ttft_p50_ms === bestTtft
+                const isBestTput = perf.throughput_tps === bestThroughput
+                return (
+                  <TableRow key={perf.group}>
+                    <TableCell className='py-2.5'>
+                      <GroupBadge group={perf.group} size='sm' />
+                    </TableCell>
+                    <TableCell
+                      className={cn(
+                        'py-2.5 text-right font-mono',
+                        isBestTtft && 'text-emerald-600 dark:text-emerald-400'
+                      )}
+                    >
+                      {formatLatency(perf.ttft_p50_ms)}
+                    </TableCell>
+                    <TableCell className='text-muted-foreground py-2.5 text-right font-mono'>
+                      {formatLatency(perf.ttft_p95_ms)}
+                    </TableCell>
+                    <TableCell className='text-muted-foreground py-2.5 text-right font-mono'>
+                      {formatLatency(perf.ttft_p99_ms)}
+                    </TableCell>
+                    <TableCell
+                      className={cn(
+                        'py-2.5 text-right font-mono',
+                        isBestTput &&
+                          perf.throughput_tps > 0 &&
+                          'text-emerald-600 dark:text-emerald-400'
+                      )}
+                    >
+                      {formatThroughput(perf.throughput_tps)}
+                    </TableCell>
+                    <TableCell className='py-2.5'>
+                      <UptimeSparkline
+                        size='sm'
+                        series={uptimeByGroup[perf.group] ?? []}
+                      />
+                    </TableCell>
+                    <TableCell className='text-muted-foreground py-2.5 text-right font-mono'>
+                      {COMPACT_NUMBER.format(perf.request_volume_24h)}
+                    </TableCell>
+                  </TableRow>
+                )
+              })}
+            </TableBody>
+          </Table>
+        </div>
+      </section>
+
+      <section>
+        <SectionHeader
+          icon={Timer}
+          title={t('Latency trend (last 24h)')}
+          description={t(
+            'Median time-to-first-token (TTFT) sampled hourly per group'
+          )}
+        />
+        <LatencyTrendChart series={latencySeries} />
+      </section>
+
+      {bestThroughput > 0 && (
+        <section>
+          <SectionHeader
+            icon={Gauge}
+            title={t('Throughput by group')}
+            description={t('Average tokens per second sustained per group')}
+          />
+          <ThroughputBarChart rows={performances} />
+        </section>
+      )}
+
+      <section>
+        <SectionHeader
+          icon={HeartPulse}
+          title={t('Uptime (last 30 days)')}
+          description={
+            aggregated.incidents > 0
+              ? t(
+                  'Daily uptime; {{incidents}} incidents totalling {{minutes}} minutes',
+                  {
+                    incidents: aggregated.incidents,
+                    minutes: aggregated.outage_minutes,
+                  }
+                )
+              : t('Daily uptime over the last 30 days')
+          }
+          accent={
+            aggregated.incidents > 0 ? (
+              <span className='inline-flex items-center gap-1 text-amber-600 dark:text-amber-400'>
+                <AlertTriangle className='size-3.5' />
+                {t('{{count}} incidents', {
+                  count: aggregated.incidents,
+                })}
+              </span>
+            ) : null
+          }
+        />
+        <UptimeBarChart series={uptimeSeries} />
+      </section>
+
+      <p className='text-muted-foreground/60 text-[11px] leading-relaxed'>
+        {t(
+          'Performance metrics shown here are simulated for preview purposes and will be replaced with live observability data once the backend integration is complete.'
+        )}
+      </p>
+    </div>
+  )
+}
+
+function SectionHeader(props: {
+  icon: React.ComponentType<{ className?: string }>
+  title: string
+  description?: string
+  accent?: React.ReactNode
+}) {
+  const Icon = props.icon
+  return (
+    <div className='mb-2 flex flex-wrap items-center justify-between gap-2'>
+      <div className='flex min-w-0 items-center gap-2'>
+        <Icon className='text-muted-foreground/70 size-3.5 shrink-0' />
+        <div className='min-w-0'>
+          <div className='text-foreground text-sm font-semibold'>
+            {props.title}
+          </div>
+          {props.description && (
+            <p className='text-muted-foreground/80 text-xs'>
+              {props.description}
+            </p>
+          )}
+        </div>
+      </div>
+      {props.accent && (
+        <div className='shrink-0 text-xs font-medium'>{props.accent}</div>
+      )}
+    </div>
+  )
+}
diff --git a/web/default/src/features/pricing/components/model-details-quick-stats.tsx b/web/default/src/features/pricing/components/model-details-quick-stats.tsx
new file mode 100644
index 00000000000..48ba09eba4f
--- /dev/null
+++ b/web/default/src/features/pricing/components/model-details-quick-stats.tsx
@@ -0,0 +1,129 @@
+import {
+  CalendarClock,
+  FileText,
+  Layers,
+  Maximize2,
+  Sparkles,
+} from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import {
+  formatTokenCount,
+  formatYearMonth,
+  type ModelMetadata,
+} from '../lib/model-metadata'
+import type { Modality } from '../types'
+import { ModalityIcons } from './model-details-modalities'
+
+type QuickStatsProps = {
+  metadata: ModelMetadata
+}
+
+type Stat = {
+  key: string
+  icon: React.ComponentType<{ className?: string }>
+  label: string
+  value: React.ReactNode
+  hint?: string
+}
+
+function buildStats(
+  metadata: ModelMetadata,
+  t: (key: string) => string
+): Stat[] {
+  const stats: Stat[] = [
+    {
+      key: 'context',
+      icon: Layers,
+      label: t('Context'),
+      value: formatTokenCount(metadata.context_length),
+      hint: t('Maximum input window'),
+    },
+  ]
+
+  if (metadata.max_output_tokens > 0) {
+    stats.push({
+      key: 'max-output',
+      icon: Maximize2,
+      label: t('Max output'),
+      value: formatTokenCount(metadata.max_output_tokens),
+      hint: t('Maximum tokens per response'),
+    })
+  }
+
+  stats.push({
+    key: 'modalities',
+    icon: FileText,
+    label: t('Modalities'),
+    value: (
+      <ModalityFlow
+        input={metadata.input_modalities}
+        output={metadata.output_modalities}
+      />
+    ),
+  })
+
+  if (metadata.knowledge_cutoff) {
+    stats.push({
+      key: 'knowledge',
+      icon: Sparkles,
+      label: t('Knowledge cutoff'),
+      value: formatYearMonth(metadata.knowledge_cutoff),
+    })
+  }
+
+  if (metadata.release_date) {
+    stats.push({
+      key: 'release',
+      icon: CalendarClock,
+      label: t('Released'),
+      value: formatYearMonth(metadata.release_date),
+    })
+  }
+
+  return stats
+}
+
+function ModalityFlow(props: { input: Modality[]; output: Modality[] }) {
+  return (
+    <span className='inline-flex items-center gap-1 align-middle'>
+      <ModalityIcons modalities={props.input} className='size-3.5' />
+      <span className='text-muted-foreground/40'>→</span>
+      <ModalityIcons modalities={props.output} className='size-3.5' />
+    </span>
+  )
+}
+
+export function ModelDetailsQuickStats(props: QuickStatsProps) {
+  const { t } = useTranslation()
+  const stats = buildStats(props.metadata, t)
+
+  return (
+    <div className='bg-muted/20 grid grid-cols-2 gap-px overflow-hidden rounded-lg border @md/details:grid-cols-3 @2xl/details:grid-cols-5'>
+      {stats.map((stat) => {
+        const Icon = stat.icon
+        return (
+          <div
+            key={stat.key}
+            className={cn(
+              'bg-background flex min-w-0 flex-col gap-0.5 px-3 py-2.5'
+            )}
+          >
+            <span className='text-muted-foreground inline-flex min-w-0 items-center gap-1 text-[10px] font-medium tracking-wider uppercase'>
+              <Icon className='size-3 shrink-0' />
+              <span className='truncate'>{stat.label}</span>
+            </span>
+            <span className='text-foreground truncate text-sm font-semibold tabular-nums'>
+              {stat.value}
+            </span>
+            {stat.hint && (
+              <span className='text-muted-foreground/60 truncate text-[10px]'>
+                {stat.hint}
+              </span>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/web/default/src/features/pricing/components/model-details-uptime-sparkline.tsx b/web/default/src/features/pricing/components/model-details-uptime-sparkline.tsx
new file mode 100644
index 00000000000..932a52ee9eb
--- /dev/null
+++ b/web/default/src/features/pricing/components/model-details-uptime-sparkline.tsx
@@ -0,0 +1,211 @@
+import { useMemo } from 'react'
+import { Activity, AlertCircle, CheckCircle2 } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import {
+  aggregateUptime,
+  formatUptimePct,
+  type UptimeDayPoint,
+} from '../lib/mock-stats'
+
+// ---------------------------------------------------------------------------
+// Uptime sparkline
+// ---------------------------------------------------------------------------
+//
+// Compact 30-day uptime visualisation: a row of small coloured bars where:
+//   - Bar colour reflects per-day uptime (green / amber / red)
+//   - Bar height reflects severity (the worse the day, the shorter the bar)
+//   - Hovering a bar reveals the exact date and uptime
+//
+// Useful as a header strip ("at-a-glance" status) and as a per-row visual
+// inside the per-group performance table.
+
+type SparklineSize = 'sm' | 'md'
+
+type UptimeSparklineProps = {
+  series: UptimeDayPoint[]
+  size?: SparklineSize
+  showOverall?: boolean
+  emptyLabel?: string
+  className?: string
+}
+
+function colourFor(uptime: number): string {
+  if (uptime >= 99.9) return 'bg-emerald-500'
+  if (uptime >= 99.0) return 'bg-emerald-400'
+  if (uptime >= 95.0) return 'bg-amber-500'
+  if (uptime >= 90.0) return 'bg-amber-600'
+  return 'bg-rose-500'
+}
+
+function heightFor(uptime: number): string {
+  if (uptime >= 99.9) return 'h-full'
+  if (uptime >= 99.0) return 'h-[88%]'
+  if (uptime >= 95.0) return 'h-[72%]'
+  if (uptime >= 90.0) return 'h-[55%]'
+  return 'h-[40%]'
+}
+
+function overallTextColour(pct: number): string {
+  if (pct >= 99.9) return 'text-emerald-600 dark:text-emerald-400'
+  if (pct >= 99.0) return 'text-emerald-600 dark:text-emerald-400'
+  if (pct >= 95.0) return 'text-amber-600 dark:text-amber-400'
+  return 'text-rose-600 dark:text-rose-400'
+}
+
+export function UptimeSparkline(props: UptimeSparklineProps) {
+  const size = props.size ?? 'md'
+  const showOverall = props.showOverall ?? true
+
+  if (props.series.length === 0) {
+    return (
+      <span className={cn('text-muted-foreground text-xs', props.className)}>
+        {props.emptyLabel ?? '—'}
+      </span>
+    )
+  }
+
+  const overall =
+    props.series.reduce((s, p) => s + p.uptime_pct, 0) / props.series.length
+
+  const containerHeight = size === 'sm' ? 'h-3.5' : 'h-5'
+  const barWidth = size === 'sm' ? 'w-[3px]' : 'w-1'
+  const gap = size === 'sm' ? 'gap-px' : 'gap-[2px]'
+
+  return (
+    <div className={cn('flex items-center gap-2', props.className)}>
+      <div
+        className={cn('flex items-end', containerHeight, gap)}
+        role='img'
+        aria-label={`30 day uptime ${overall.toFixed(2)}%`}
+      >
+        {props.series.map((day) => (
+          <Tooltip key={day.date}>
+            <TooltipTrigger
+              render={
+                <div
+                  className={cn(
+                    'rounded-[1px] transition-opacity hover:opacity-80',
+                    barWidth,
+                    containerHeight,
+                    'flex items-end'
+                  )}
+                />
+              }
+            >
+              <div
+                className={cn(
+                  'w-full rounded-[1px]',
+                  colourFor(day.uptime_pct),
+                  heightFor(day.uptime_pct)
+                )}
+                aria-hidden
+              />
+            </TooltipTrigger>
+            <TooltipContent side='top' className='font-mono text-xs'>
+              <div className='font-medium'>{day.date}</div>
+              <div>{day.uptime_pct.toFixed(2)}%</div>
+              {day.outage_minutes > 0 && (
+                <div className='text-muted-foreground'>
+                  {day.outage_minutes} min outage
+                </div>
+              )}
+            </TooltipContent>
+          </Tooltip>
+        ))}
+      </div>
+      {showOverall && (
+        <span
+          className={cn(
+            'font-mono text-sm font-semibold tabular-nums',
+            overallTextColour(overall)
+          )}
+        >
+          {overall.toFixed(1)}%
+        </span>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Uptime status row — sparkline + summary text + status icon
+// ---------------------------------------------------------------------------
+
+export function UptimeStatusRow(props: {
+  series: UptimeDayPoint[]
+  className?: string
+}) {
+  const { t } = useTranslation()
+  const summary = useMemo(() => aggregateUptime(props.series), [props.series])
+  const status = useMemo(() => {
+    if (summary.uptime_pct >= 99.9) return 'operational'
+    if (summary.uptime_pct >= 99.0) return 'minor'
+    if (summary.uptime_pct >= 95.0) return 'degraded'
+    return 'major'
+  }, [summary.uptime_pct])
+
+  const StatusIcon =
+    status === 'operational'
+      ? CheckCircle2
+      : status === 'minor'
+        ? Activity
+        : AlertCircle
+
+  const statusColour =
+    status === 'operational'
+      ? 'text-emerald-600 dark:text-emerald-400'
+      : status === 'minor'
+        ? 'text-emerald-600 dark:text-emerald-400'
+        : status === 'degraded'
+          ? 'text-amber-600 dark:text-amber-400'
+          : 'text-rose-600 dark:text-rose-400'
+
+  const statusLabel =
+    status === 'operational'
+      ? t('All systems operational')
+      : status === 'minor'
+        ? t('Minor blips in the last 30 days')
+        : status === 'degraded'
+          ? t('Degraded performance recently')
+          : t('Significant outages detected')
+
+  return (
+    <div
+      className={cn(
+        'border-border/60 bg-muted/30 flex flex-wrap items-center gap-3 rounded-lg border px-3 py-2 sm:gap-4 sm:px-4',
+        props.className
+      )}
+    >
+      <div className='flex items-center gap-2'>
+        <StatusIcon className={cn('size-4 shrink-0', statusColour)} />
+        <span className='text-sm font-medium'>{t('Last 30 days uptime')}</span>
+      </div>
+
+      <UptimeSparkline series={props.series} className='ml-auto' />
+
+      <div className='flex items-center gap-3 text-xs'>
+        <span className={cn('font-medium', statusColour)}>{statusLabel}</span>
+        {summary.incidents > 0 && (
+          <span className='text-muted-foreground'>
+            {summary.incidents}{' '}
+            {summary.incidents === 1 ? t('incident') : t('incidents')}
+          </span>
+        )}
+        {summary.outage_minutes > 0 && (
+          <span className='text-muted-foreground'>
+            {summary.outage_minutes} {t('min downtime')}
+          </span>
+        )}
+        <span className='text-muted-foreground hidden sm:inline'>
+          {formatUptimePct(summary.uptime_pct)} {t('overall')}
+        </span>
+      </div>
+    </div>
+  )
+}
diff --git a/web/default/src/features/pricing/components/model-details.tsx b/web/default/src/features/pricing/components/model-details.tsx
index 059e3cebe7a..e01e1116152 100644
--- a/web/default/src/features/pricing/components/model-details.tsx
+++ b/web/default/src/features/pricing/components/model-details.tsx
@@ -1,9 +1,24 @@
 import { useMemo } from 'react'
-import { useParams, useNavigate, useSearch } from '@tanstack/react-router'
-import { ArrowLeft } from 'lucide-react'
+import { useNavigate, useParams, useSearch } from '@tanstack/react-router'
+import {
+  ArrowLeft,
+  Boxes,
+  Code2,
+  HeartPulse,
+  Info,
+  ReceiptText,
+  Rocket,
+} from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { getLobeIcon } from '@/lib/lobe-icon'
 import { Button } from '@/components/ui/button'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
 import { Skeleton } from '@/components/ui/skeleton'
 import {
   Table,
@@ -13,33 +28,40 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table'
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { CopyButton } from '@/components/copy-button'
 import { GroupBadge } from '@/components/group-badge'
 import { PublicLayout } from '@/components/layout'
 import { DEFAULT_TOKEN_UNIT, QUOTA_TYPE_VALUES } from '../constants'
 import { usePricingData } from '../hooks/use-pricing-data'
-import { parseTags } from '../lib/filters'
-import {
-  getAvailableGroups,
-  replaceModelInPath,
-  isTokenBasedModel,
-} from '../lib/model-helpers'
 import {
   getDynamicPriceEntries,
   getDynamicPricingSummary,
   getDynamicPricingTiers,
   isDynamicPricingModel,
 } from '../lib/dynamic-price'
-import { formatGroupPrice, formatFixedPrice } from '../lib/price'
-import type { PricingModel, TokenUnit, PriceType } from '../types'
+import { parseTags } from '../lib/filters'
+import { buildUptimeSeries } from '../lib/mock-stats'
+import {
+  getAvailableGroups,
+  isTokenBasedModel,
+  replaceModelInPath,
+} from '../lib/model-helpers'
+import { inferModelMetadata } from '../lib/model-metadata'
+import { formatFixedPrice, formatGroupPrice } from '../lib/price'
+import type { PriceType, PricingModel, TokenUnit } from '../types'
 import { DynamicPricingBreakdown } from './dynamic-pricing-breakdown'
+import { ModelDetailsApi, ModelDetailsProviderInfo } from './model-details-api'
+import { ModelDetailsApps } from './model-details-apps'
+import { ModelDetailsCapabilities } from './model-details-capabilities'
+import { ModalitiesMatrix } from './model-details-modalities'
+import { ModelDetailsPerformance } from './model-details-performance'
+import { ModelDetailsQuickStats } from './model-details-quick-stats'
+import { UptimeStatusRow } from './model-details-uptime-sparkline'
+
+// ----------------------------------------------------------------------------
+// Local UI helpers
+// ----------------------------------------------------------------------------
 
 function SectionTitle(props: { children: React.ReactNode }) {
   return (
@@ -49,6 +71,10 @@ function SectionTitle(props: { children: React.ReactNode }) {
   )
 }
 
+// ----------------------------------------------------------------------------
+// Model header (always visible above the tabs)
+// ----------------------------------------------------------------------------
+
 function ModelHeader(props: { model: PricingModel }) {
   const { t } = useTranslation()
   const model = props.model
@@ -63,7 +89,7 @@ function ModelHeader(props: { model: PricingModel }) {
     getDynamicPricingTiers(model).length === 0
 
   return (
-    <header className='pb-5'>
+    <header className='pb-4'>
       <div className='flex items-center gap-2.5'>
         {vendorIcon}
         <h1 className='font-mono text-xl font-bold tracking-tight sm:text-2xl'>
@@ -78,12 +104,12 @@ function ModelHeader(props: { model: PricingModel }) {
           aria-label={t('Copy model name')}
         />
       </div>
-      <div className='mt-1 flex items-center gap-1.5 text-xs'>
+      <div className='mt-1 flex flex-wrap items-center gap-1.5 text-xs'>
         {model.vendor_name && (
           <span className='text-muted-foreground'>{model.vendor_name}</span>
         )}
         <span className='text-muted-foreground/30'>·</span>
-        <span className='text-muted-foreground/50'>
+        <span className='text-muted-foreground/70'>
           {model.quota_type === QUOTA_TYPE_VALUES.TOKEN
             ? t('Token-based')
             : t('Per Request')}
@@ -120,6 +146,10 @@ function ModelHeader(props: { model: PricingModel }) {
   )
 }
 
+// ----------------------------------------------------------------------------
+// Base price card (used in the Overview tab)
+// ----------------------------------------------------------------------------
+
 function PriceSection(props: {
   model: PricingModel
   priceRate: number
@@ -128,22 +158,15 @@ function PriceSection(props: {
   showRechargePrice: boolean
 }) {
   const { t } = useTranslation()
-  const {
-    model,
-    priceRate,
-    usdExchangeRate,
-    tokenUnit,
-    showRechargePrice,
-  } = props
-  const isTokenBased = isTokenBasedModel(model)
-  const tokenUnitLabel = tokenUnit === 'K' ? '1K' : '1M'
+  const isTokenBased = isTokenBasedModel(props.model)
+  const tokenUnitLabel = props.tokenUnit === 'K' ? '1K' : '1M'
   const baseGroupKey = '_base'
   const baseGroupRatioMap = { [baseGroupKey]: 1 }
-  const dynamicSummary = getDynamicPricingSummary(model, {
-    tokenUnit,
-    showRechargePrice,
-    priceRate,
-    usdExchangeRate,
+  const dynamicSummary = getDynamicPricingSummary(props.model, {
+    tokenUnit: props.tokenUnit,
+    showRechargePrice: props.showRechargePrice,
+    priceRate: props.priceRate,
+    usdExchangeRate: props.usdExchangeRate,
     groupRatioMultiplier: 1,
   })
 
@@ -159,38 +182,39 @@ function PriceSection(props: {
     {
       label: t('Cached input'),
       type: 'cache',
-      available: model.cache_ratio != null,
+      available: props.model.cache_ratio != null,
     },
     {
       label: t('Cache write'),
       type: 'create_cache',
-      available: model.create_cache_ratio != null,
+      available: props.model.create_cache_ratio != null,
     },
     {
       label: t('Image input'),
       type: 'image',
-      available: model.image_ratio != null,
+      available: props.model.image_ratio != null,
     },
     {
       label: t('Audio input'),
       type: 'audio_input',
-      available: model.audio_ratio != null,
+      available: props.model.audio_ratio != null,
     },
     {
       label: t('Audio output'),
       type: 'audio_output',
       available:
-        model.audio_ratio != null && model.audio_completion_ratio != null,
+        props.model.audio_ratio != null &&
+        props.model.audio_completion_ratio != null,
     },
   ]
 
   if (dynamicSummary) {
     if (dynamicSummary.isSpecialExpression) {
       return (
-        <section className='border-b py-4'>
+        <section>
           <SectionTitle>{t('Base Price')}</SectionTitle>
           <div className='rounded-lg border border-amber-200/70 bg-amber-50/70 p-3 dark:border-amber-500/20 dark:bg-amber-500/10'>
-            <div className='text-amber-800 text-sm font-medium dark:text-amber-200'>
+            <div className='text-sm font-medium text-amber-800 dark:text-amber-200'>
               {t('Special billing expression')}
             </div>
             <p className='text-muted-foreground mt-1 text-xs'>
@@ -200,7 +224,7 @@ function PriceSection(props: {
               <div className='text-muted-foreground mb-1 text-[10px] font-medium tracking-wider uppercase'>
                 {t('Raw expression')}
               </div>
-              <code className='text-muted-foreground block max-h-28 overflow-auto rounded-md border bg-background/80 px-2 py-1.5 font-mono text-xs break-all'>
+              <code className='text-muted-foreground bg-background/80 block max-h-28 overflow-auto rounded-md border px-2 py-1.5 font-mono text-xs break-all'>
                 {dynamicSummary.rawExpression}
               </code>
             </div>
@@ -210,12 +234,15 @@ function PriceSection(props: {
     }
 
     return (
-      <section className='border-b py-4'>
+      <section>
         <SectionTitle>{t('Base Price')}</SectionTitle>
         {dynamicSummary.primaryEntries.length > 0 ? (
           <div className='grid grid-cols-2 gap-2'>
             {dynamicSummary.primaryEntries.map((entry) => (
-              <div key={entry.key} className='rounded-lg border bg-muted/20 p-3'>
+              <div
+                key={entry.key}
+                className='bg-muted/20 rounded-lg border p-3'
+              >
                 <div className='text-muted-foreground text-xs'>
                   {t(entry.shortLabel)}
                 </div>
@@ -261,7 +288,7 @@ function PriceSection(props: {
 
   if (!isTokenBased) {
     return (
-      <section className='border-b py-4'>
+      <section>
         <SectionTitle>{t('Base Price')}</SectionTitle>
         <div className='flex items-baseline justify-between'>
           <span className='text-muted-foreground text-sm'>
@@ -269,11 +296,11 @@ function PriceSection(props: {
           </span>
           <span className='text-foreground font-mono text-sm font-semibold tabular-nums'>
             {formatFixedPrice(
-              model,
+              props.model,
               baseGroupKey,
-              showRechargePrice,
-              priceRate,
-              usdExchangeRate,
+              props.showRechargePrice,
+              props.priceRate,
+              props.usdExchangeRate,
               baseGroupRatioMap
             )}
           </span>
@@ -286,13 +313,13 @@ function PriceSection(props: {
   const renderPrice = (type: PriceType) => (
     <>
       {formatGroupPrice(
-        model,
+        props.model,
         baseGroupKey,
         type,
-        tokenUnit,
-        showRechargePrice,
-        priceRate,
-        usdExchangeRate,
+        props.tokenUnit,
+        props.showRechargePrice,
+        props.priceRate,
+        props.usdExchangeRate,
         baseGroupRatioMap
       )}
       <span className='text-muted-foreground/40 ml-1 text-xs font-normal'>
@@ -302,11 +329,11 @@ function PriceSection(props: {
   )
 
   return (
-    <section className='border-b py-4'>
+    <section>
       <SectionTitle>{t('Base Price')}</SectionTitle>
       <div className='grid grid-cols-2 gap-2'>
         {primaryPriceTypes.map((item) => (
-          <div key={item.type} className='rounded-lg border bg-muted/20 p-3'>
+          <div key={item.type} className='bg-muted/20 rounded-lg border p-3'>
             <div className='text-muted-foreground text-xs'>{item.label}</div>
             <div className='text-foreground mt-1 font-mono text-base font-semibold tabular-nums'>
               {renderPrice(item.type)}
@@ -337,29 +364,31 @@ function PriceSection(props: {
   )
 }
 
+// ----------------------------------------------------------------------------
+// API endpoints list
+// ----------------------------------------------------------------------------
+
 function EndpointsSection(props: {
   model: PricingModel
   endpointMap: Record<string, { path?: string; method?: string }>
 }) {
   const { t } = useTranslation()
-  const { model, endpointMap } = props
-
   const endpoints = useMemo(() => {
-    const types = model.supported_endpoint_types || []
+    const types = props.model.supported_endpoint_types || []
     return types.map((type) => {
-      const info = endpointMap[type] || {}
+      const info = props.endpointMap[type] || {}
       let path = info.path || ''
       if (path.includes('{model}')) {
-        path = replaceModelInPath(path, model.model_name || '')
+        path = replaceModelInPath(path, props.model.model_name || '')
       }
       return { type, path, method: info.method || 'POST' }
     })
-  }, [model, endpointMap])
+  }, [props.model, props.endpointMap])
 
   if (endpoints.length === 0) return null
 
   return (
-    <section className='border-b py-4'>
+    <section>
       <SectionTitle>{t('API Endpoints')}</SectionTitle>
       <div className='space-y-1'>
         {endpoints.map(({ type, path, method }) => (
@@ -384,6 +413,10 @@ function EndpointsSection(props: {
   )
 }
 
+// ----------------------------------------------------------------------------
+// Auto group chain (used inside group pricing section)
+// ----------------------------------------------------------------------------
+
 function AutoGroupChain(props: { model: PricingModel; autoGroups: string[] }) {
   const { t } = useTranslation()
   const modelEnableGroups = Array.isArray(props.model.enable_groups)
@@ -411,6 +444,10 @@ function AutoGroupChain(props: { model: PricingModel; autoGroups: string[] }) {
   )
 }
 
+// ----------------------------------------------------------------------------
+// Group pricing table
+// ----------------------------------------------------------------------------
+
 function GroupPricingSection(props: {
   model: PricingModel
   groupRatio: Record<string, number>
@@ -422,45 +459,39 @@ function GroupPricingSection(props: {
   showRechargePrice?: boolean
 }) {
   const { t } = useTranslation()
-  const {
-    model,
-    groupRatio,
-    usableGroup,
-    autoGroups,
-    priceRate,
-    usdExchangeRate,
-    tokenUnit,
-    showRechargePrice = false,
-  } = props
+  const showRechargePrice = props.showRechargePrice ?? false
 
   const availableGroups = useMemo(
-    () => getAvailableGroups(model, usableGroup || {}),
-    [model, usableGroup]
+    () => getAvailableGroups(props.model, props.usableGroup || {}),
+    [props.model, props.usableGroup]
   )
 
-  const isTokenBased = isTokenBasedModel(model)
-  const tokenUnitLabel = tokenUnit === 'K' ? '1K' : '1M'
+  const isTokenBased = isTokenBasedModel(props.model)
+  const tokenUnitLabel = props.tokenUnit === 'K' ? '1K' : '1M'
 
   const extraPriceTypes = useMemo(() => {
     const types: { label: string; type: PriceType }[] = []
-    if (model.cache_ratio != null)
+    if (props.model.cache_ratio != null)
       types.push({ label: t('Cache'), type: 'cache' })
-    if (model.create_cache_ratio != null)
+    if (props.model.create_cache_ratio != null)
       types.push({ label: t('Cache Write'), type: 'create_cache' })
-    if (model.image_ratio != null)
+    if (props.model.image_ratio != null)
       types.push({ label: t('Image'), type: 'image' })
-    if (model.audio_ratio != null)
+    if (props.model.audio_ratio != null)
       types.push({ label: t('Audio In'), type: 'audio_input' })
-    if (model.audio_ratio != null && model.audio_completion_ratio != null)
+    if (
+      props.model.audio_ratio != null &&
+      props.model.audio_completion_ratio != null
+    )
       types.push({ label: t('Audio Out'), type: 'audio_output' })
     return types
-  }, [model, t])
+  }, [props.model, t])
 
   if (availableGroups.length === 0) {
     return (
-      <section className='py-4'>
+      <section>
         <SectionTitle>{t('Pricing by Group')}</SectionTitle>
-        <AutoGroupChain model={model} autoGroups={autoGroups} />
+        <AutoGroupChain model={props.model} autoGroups={props.autoGroups} />
         <p className='text-muted-foreground text-sm'>
           {t(
             'This model is not available in any group, or no group pricing information is configured.'
@@ -473,16 +504,16 @@ function GroupPricingSection(props: {
   const thClass =
     'text-muted-foreground py-2 text-[10px] font-medium tracking-wider uppercase'
 
-  if (isDynamicPricingModel(model)) {
-    const dynamicTiers = getDynamicPricingTiers(model)
+  if (isDynamicPricingModel(props.model)) {
+    const dynamicTiers = getDynamicPricingTiers(props.model)
 
     if (dynamicTiers.length === 0) {
       return (
-        <section className='py-4'>
+        <section>
           <SectionTitle>{t('Pricing by Group')}</SectionTitle>
-          <AutoGroupChain model={model} autoGroups={autoGroups} />
+          <AutoGroupChain model={props.model} autoGroups={props.autoGroups} />
           <div className='rounded-lg border border-amber-200/70 bg-amber-50/70 p-3 dark:border-amber-500/20 dark:bg-amber-500/10'>
-            <div className='text-amber-800 text-sm font-medium dark:text-amber-200'>
+            <div className='text-sm font-medium text-amber-800 dark:text-amber-200'>
               {t('Special billing expression')}
             </div>
             <p className='text-muted-foreground mt-1 text-xs'>
@@ -494,8 +525,8 @@ function GroupPricingSection(props: {
               <div className='text-muted-foreground mb-1 text-[10px] font-medium tracking-wider uppercase'>
                 {t('Raw expression')}
               </div>
-              <code className='text-muted-foreground block max-h-28 overflow-auto rounded-md border bg-background/80 px-2 py-1.5 font-mono text-xs break-all'>
-                {model.billing_expr}
+              <code className='text-muted-foreground bg-background/80 block max-h-28 overflow-auto rounded-md border px-2 py-1.5 font-mono text-xs break-all'>
+                {props.model.billing_expr}
               </code>
             </div>
           </div>
@@ -508,10 +539,10 @@ function GroupPricingSection(props: {
         dynamicTiers
           .flatMap((tier) =>
             getDynamicPriceEntries(tier, {
-              tokenUnit,
+              tokenUnit: props.tokenUnit,
               showRechargePrice,
-              priceRate,
-              usdExchangeRate,
+              priceRate: props.priceRate,
+              usdExchangeRate: props.usdExchangeRate,
               groupRatioMultiplier: 1,
             })
           )
@@ -520,12 +551,12 @@ function GroupPricingSection(props: {
     )
 
     return (
-      <section className='py-4'>
+      <section>
         <SectionTitle>{t('Pricing by Group')}</SectionTitle>
-        <AutoGroupChain model={model} autoGroups={autoGroups} />
+        <AutoGroupChain model={props.model} autoGroups={props.autoGroups} />
         <div className='space-y-3'>
           {availableGroups.map((group) => {
-            const ratio = groupRatio[group] || 1
+            const ratio = props.groupRatio[group] || 1
             return (
               <div key={group} className='overflow-hidden rounded-lg border'>
                 <div className='bg-muted/20 flex items-center justify-between gap-3 border-b px-3 py-2'>
@@ -552,10 +583,10 @@ function GroupPricingSection(props: {
                     <TableBody>
                       {dynamicTiers.map((tier, tierIndex) => {
                         const entries = getDynamicPriceEntries(tier, {
-                          tokenUnit,
+                          tokenUnit: props.tokenUnit,
                           showRechargePrice,
-                          priceRate,
-                          usdExchangeRate,
+                          priceRate: props.priceRate,
+                          usdExchangeRate: props.usdExchangeRate,
                           groupRatioMultiplier: ratio,
                         })
                         const entryMap = new Map(
@@ -587,7 +618,7 @@ function GroupPricingSection(props: {
               </div>
             )
           })}
-          <p className='text-muted-foreground/40 mt-1.5 px-4 text-[10px] sm:px-0'>
+          <p className='text-muted-foreground/40 mt-1.5 text-[10px]'>
             {t('Prices shown per')} {tokenUnitLabel} tokens
           </p>
         </div>
@@ -596,10 +627,10 @@ function GroupPricingSection(props: {
   }
 
   return (
-    <section className='py-4'>
+    <section>
       <SectionTitle>{t('Pricing by Group')}</SectionTitle>
-      <AutoGroupChain model={model} autoGroups={autoGroups} />
-      <div className='-mx-4 sm:mx-0'>
+      <AutoGroupChain model={props.model} autoGroups={props.autoGroups} />
+      <div className='-mx-4 overflow-x-auto sm:mx-0'>
         <Table className='text-sm'>
           <TableHeader>
             <TableRow className='hover:bg-transparent'>
@@ -631,7 +662,7 @@ function GroupPricingSection(props: {
           </TableHeader>
           <TableBody>
             {availableGroups.map((group) => {
-              const ratio = groupRatio[group] || 1
+              const ratio = props.groupRatio[group] || 1
               return (
                 <TableRow key={group}>
                   <TableCell className='py-2.5'>
@@ -644,26 +675,26 @@ function GroupPricingSection(props: {
                     <>
                       <TableCell className='py-2.5 text-right font-mono'>
                         {formatGroupPrice(
-                          model,
+                          props.model,
                           group,
                           'input',
-                          tokenUnit,
+                          props.tokenUnit,
                           showRechargePrice,
-                          priceRate,
-                          usdExchangeRate,
-                          groupRatio
+                          props.priceRate,
+                          props.usdExchangeRate,
+                          props.groupRatio
                         )}
                       </TableCell>
                       <TableCell className='py-2.5 text-right font-mono'>
                         {formatGroupPrice(
-                          model,
+                          props.model,
                           group,
                           'output',
-                          tokenUnit,
+                          props.tokenUnit,
                           showRechargePrice,
-                          priceRate,
-                          usdExchangeRate,
-                          groupRatio
+                          props.priceRate,
+                          props.usdExchangeRate,
+                          props.groupRatio
                         )}
                       </TableCell>
                       {extraPriceTypes.map((ep) => (
@@ -672,14 +703,14 @@ function GroupPricingSection(props: {
                           className='py-2.5 text-right font-mono'
                         >
                           {formatGroupPrice(
-                            model,
+                            props.model,
                             group,
                             ep.type,
-                            tokenUnit,
+                            props.tokenUnit,
                             showRechargePrice,
-                            priceRate,
-                            usdExchangeRate,
-                            groupRatio
+                            props.priceRate,
+                            props.usdExchangeRate,
+                            props.groupRatio
                           )}
                         </TableCell>
                       ))}
@@ -687,12 +718,12 @@ function GroupPricingSection(props: {
                   ) : (
                     <TableCell className='py-2.5 text-right font-mono'>
                       {formatFixedPrice(
-                        model,
+                        props.model,
                         group,
                         showRechargePrice,
-                        priceRate,
-                        usdExchangeRate,
-                        groupRatio
+                        props.priceRate,
+                        props.usdExchangeRate,
+                        props.groupRatio
                       )}
                     </TableCell>
                   )}
@@ -711,6 +742,30 @@ function GroupPricingSection(props: {
   )
 }
 
+// ----------------------------------------------------------------------------
+// Tabbed details content
+// ----------------------------------------------------------------------------
+
+const TAB_VALUES = [
+  'overview',
+  'pricing',
+  'performance',
+  'api',
+  'apps',
+] as const
+type TabValue = (typeof TAB_VALUES)[number]
+
+const TAB_META: Record<
+  TabValue,
+  { icon: React.ComponentType<{ className?: string }>; labelKey: string }
+> = {
+  overview: { icon: Info, labelKey: 'Overview' },
+  pricing: { icon: ReceiptText, labelKey: 'Pricing' },
+  performance: { icon: HeartPulse, labelKey: 'Performance' },
+  api: { icon: Code2, labelKey: 'API' },
+  apps: { icon: Rocket, labelKey: 'Apps' },
+}
+
 export interface ModelDetailsContentProps {
   model: PricingModel
   groupRatio: Record<string, number>
@@ -724,52 +779,121 @@ export interface ModelDetailsContentProps {
 }
 
 export function ModelDetailsContent(props: ModelDetailsContentProps) {
-  const {
-    model,
-    groupRatio,
-    usableGroup,
-    endpointMap,
-    autoGroups,
-    priceRate,
-    usdExchangeRate,
-    tokenUnit,
-    showRechargePrice = false,
-  } = props
+  const { t } = useTranslation()
+  const showRechargePrice = props.showRechargePrice ?? false
+  const metadata = useMemo(() => inferModelMetadata(props.model), [props.model])
+  const uptimeSeries = useMemo(
+    () => buildUptimeSeries(props.model),
+    [props.model]
+  )
+
+  const isDynamic =
+    props.model.billing_mode === 'tiered_expr' &&
+    Boolean(props.model.billing_expr)
 
   return (
-    <>
-      <ModelHeader model={model} />
+    <div className='@container/details space-y-4'>
+      <ModelHeader model={props.model} />
 
-      <PriceSection
-        model={model}
-        priceRate={priceRate}
-        usdExchangeRate={usdExchangeRate}
-        tokenUnit={tokenUnit}
-        showRechargePrice={showRechargePrice}
-      />
+      <ModelDetailsQuickStats metadata={metadata} />
 
-      <EndpointsSection model={model} endpointMap={endpointMap} />
+      <UptimeStatusRow series={uptimeSeries} />
 
-      {model.billing_mode === 'tiered_expr' && model.billing_expr && (
-        <div className='border-b'>
-          <DynamicPricingBreakdown billingExpr={model.billing_expr} />
-        </div>
-      )}
+      <Tabs defaultValue='overview' className='gap-4'>
+        <TabsList className='bg-muted/60 h-auto w-full justify-start gap-1 overflow-x-auto rounded-lg p-1'>
+          {TAB_VALUES.map((value) => {
+            const Icon = TAB_META[value].icon
+            return (
+              <TabsTrigger
+                key={value}
+                value={value}
+                className='h-8 gap-1.5 rounded-md px-3 text-xs sm:text-sm'
+              >
+                <Icon className='size-3.5' />
+                <span>{t(TAB_META[value].labelKey)}</span>
+              </TabsTrigger>
+            )
+          })}
+        </TabsList>
 
-      <GroupPricingSection
-        model={model}
-        groupRatio={groupRatio}
-        usableGroup={usableGroup}
-        autoGroups={autoGroups}
-        priceRate={priceRate}
-        usdExchangeRate={usdExchangeRate}
-        tokenUnit={tokenUnit}
-        showRechargePrice={showRechargePrice}
-      />
-    </>
+        <TabsContent value='overview' className='space-y-5 outline-none'>
+          <section>
+            <div className='mb-3 flex items-center gap-2'>
+              <Boxes className='text-muted-foreground/70 size-3.5' />
+              <h3 className='text-foreground text-sm font-semibold'>
+                {t('Capabilities')}
+              </h3>
+            </div>
+            <ModelDetailsCapabilities capabilities={metadata.capabilities} />
+          </section>
+
+          <section>
+            <div className='mb-3 flex items-center gap-2'>
+              <h3 className='text-foreground text-sm font-semibold'>
+                {t('Supported modalities')}
+              </h3>
+            </div>
+            <ModalitiesMatrix
+              input={metadata.input_modalities}
+              output={metadata.output_modalities}
+            />
+          </section>
+
+          <ModelDetailsProviderInfo model={props.model} />
+
+          <PriceSection
+            model={props.model}
+            priceRate={props.priceRate}
+            usdExchangeRate={props.usdExchangeRate}
+            tokenUnit={props.tokenUnit}
+            showRechargePrice={showRechargePrice}
+          />
+
+          <EndpointsSection
+            model={props.model}
+            endpointMap={props.endpointMap}
+          />
+        </TabsContent>
+
+        <TabsContent value='pricing' className='space-y-5 outline-none'>
+          {isDynamic && (
+            <DynamicPricingBreakdown billingExpr={props.model.billing_expr} />
+          )}
+          <GroupPricingSection
+            model={props.model}
+            groupRatio={props.groupRatio}
+            usableGroup={props.usableGroup}
+            autoGroups={props.autoGroups}
+            priceRate={props.priceRate}
+            usdExchangeRate={props.usdExchangeRate}
+            tokenUnit={props.tokenUnit}
+            showRechargePrice={showRechargePrice}
+          />
+        </TabsContent>
+
+        <TabsContent value='performance' className='outline-none'>
+          <ModelDetailsPerformance model={props.model} />
+        </TabsContent>
+
+        <TabsContent value='api' className='outline-none'>
+          <ModelDetailsApi
+            model={props.model}
+            endpointMap={props.endpointMap}
+          />
+        </TabsContent>
+
+        <TabsContent value='apps' className='outline-none'>
+          <ModelDetailsApps model={props.model} />
+        </TabsContent>
+      </Tabs>
+    </div>
   )
 }
 
+// ----------------------------------------------------------------------------
+// Drawer & page wrappers
+// ----------------------------------------------------------------------------
+
 export interface ModelDetailsDrawerProps extends ModelDetailsContentProps {
   open: boolean
   onOpenChange: (open: boolean) => void
@@ -783,7 +907,7 @@ export function ModelDetailsDrawer(props: ModelDetailsDrawerProps) {
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
         side='right'
-        className='flex h-dvh w-full overflow-hidden p-0 sm:max-w-2xl xl:max-w-3xl'
+        className='flex h-dvh w-full overflow-hidden p-0 sm:max-w-2xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl'
       >
         <SheetHeader className='sr-only'>
           <SheetTitle>{props.model.model_name}</SheetTitle>
@@ -829,19 +953,21 @@ export function ModelDetails() {
   if (isLoading) {
     return (
       <PublicLayout>
-        <div className='mx-auto max-w-2xl px-4 sm:px-6'>
+        <div className='mx-auto max-w-5xl px-4 sm:px-6'>
           <Skeleton className='mb-4 h-5 w-16' />
           <div className='space-y-2'>
             <Skeleton className='h-7 w-64' />
             <Skeleton className='h-4 w-40' />
             <Skeleton className='h-4 w-full max-w-md' />
           </div>
+          <div className='mt-6 grid grid-cols-2 gap-2 sm:grid-cols-4'>
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Skeleton key={i} className='h-16 w-full' />
+            ))}
+          </div>
           <div className='mt-6 space-y-3'>
-            {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className='flex justify-between'>
-                <Skeleton className='h-5 w-24' />
-                <Skeleton className='h-5 w-20' />
-              </div>
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Skeleton key={i} className='h-24 w-full' />
             ))}
           </div>
         </div>
@@ -869,7 +995,7 @@ export function ModelDetails() {
 
   return (
     <PublicLayout>
-      <div className='mx-auto max-w-2xl px-4 sm:px-6'>
+      <div className='mx-auto max-w-5xl px-4 sm:px-6'>
         <Button
           variant='ghost'
           size='sm'
diff --git a/web/default/src/features/pricing/components/pricing-columns.tsx b/web/default/src/features/pricing/components/pricing-columns.tsx
index 48e09475983..b0737f6b54d 100644
--- a/web/default/src/features/pricing/components/pricing-columns.tsx
+++ b/web/default/src/features/pricing/components/pricing-columns.tsx
@@ -10,12 +10,12 @@ import {
 import { DataTableColumnHeader } from '@/components/data-table/column-header'
 import { GroupBadge } from '@/components/group-badge'
 import { DEFAULT_TOKEN_UNIT, QUOTA_TYPE_VALUES } from '../constants'
-import { parseTags } from '../lib/filters'
-import { isTokenBasedModel } from '../lib/model-helpers'
 import {
   getDynamicDisplayGroupRatio,
   getDynamicPricingSummary,
 } from '../lib/dynamic-price'
+import { parseTags } from '../lib/filters'
+import { isTokenBasedModel } from '../lib/model-helpers'
 import {
   formatPrice,
   formatRequestPrice,
@@ -152,14 +152,14 @@ export function usePricingColumns(
         if (dynamicSummary) {
           if (dynamicSummary.isSpecialExpression) {
             return (
-              <div className='min-w-[200px] max-w-[320px]'>
-                <div className='text-amber-700 text-xs font-medium dark:text-amber-300'>
+              <div className='max-w-[320px] min-w-[200px]'>
+                <div className='text-xs font-medium text-amber-700 dark:text-amber-300'>
                   {t('Special billing expression')}
                 </div>
                 <div className='text-muted-foreground text-[11px]'>
                   {t('Unable to parse structured pricing')}
                 </div>
-                <code className='text-muted-foreground/70 mt-1 line-clamp-2 block break-all font-mono text-[10px] leading-relaxed'>
+                <code className='text-muted-foreground/70 mt-1 line-clamp-2 block font-mono text-[10px] leading-relaxed break-all'>
                   {dynamicSummary.rawExpression}
                 </code>
               </div>
@@ -371,8 +371,8 @@ export function usePricingColumns(
         return (
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedTags(tags, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedTags(tags, 2)}
               </TooltipTrigger>
               {tags.length > 2 && (
                 <TooltipContent side='top' className='max-w-[280px] p-2'>
@@ -401,8 +401,8 @@ export function usePricingColumns(
         return (
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedTags(endpoints, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedTags(endpoints, 2)}
               </TooltipTrigger>
               {endpoints.length > 2 && (
                 <TooltipContent side='top' className='max-w-[280px] p-2'>
@@ -431,8 +431,8 @@ export function usePricingColumns(
         return (
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <div>{renderLimitedGroupBadges(groups, 2)}</div>
+              <TooltipTrigger render={<div />}>
+                {renderLimitedGroupBadges(groups, 2)}
               </TooltipTrigger>
               {groups.length > 2 && (
                 <TooltipContent side='top' className='max-w-[280px] p-2'>
diff --git a/web/default/src/features/pricing/components/pricing-sidebar.tsx b/web/default/src/features/pricing/components/pricing-sidebar.tsx
index 35598a0bb13..38cdebf7198 100644
--- a/web/default/src/features/pricing/components/pricing-sidebar.tsx
+++ b/web/default/src/features/pricing/components/pricing-sidebar.tsx
@@ -88,7 +88,9 @@ function FilterChip(props: {
       )}
       title={props.option.label}
     >
-      {props.option.icon && <span className='shrink-0'>{props.option.icon}</span>}
+      {props.option.icon && (
+        <span className='shrink-0'>{props.option.icon}</span>
+      )}
       <span className='truncate'>{props.option.label}</span>
       {(props.option.suffix || props.option.count != null) && (
         <span
@@ -108,12 +110,15 @@ function FilterChip(props: {
 
 function FilterSection(props: FilterSectionProps) {
   return (
-    <Collapsible defaultOpen className='border-border/70 border-b pb-3 last:border-b-0'>
+    <Collapsible
+      defaultOpen
+      className='border-border/70 border-b pb-3 last:border-b-0'
+    >
       <CollapsibleTrigger className='group flex w-full items-center justify-between py-2.5 text-left'>
         <span className='text-foreground text-sm font-semibold'>
           {props.title}
         </span>
-        <ChevronDown className='text-muted-foreground size-4 transition-transform group-data-[state=open]:rotate-180' />
+        <ChevronDown className='text-muted-foreground size-4 transition-transform group-data-[panel-open]:rotate-180' />
       </CollapsibleTrigger>
       <CollapsibleContent>
         <div className='flex flex-wrap gap-1.5'>
@@ -213,19 +218,15 @@ export function PricingSidebar(props: PricingSidebarProps) {
       .map(([value, label]) => ({
         value,
         label,
-        count: countBy(props.models, (model) =>
-          model.supported_endpoint_types?.includes(value) ?? false
+        count: countBy(
+          props.models,
+          (model) => model.supported_endpoint_types?.includes(value) ?? false
         ),
       })),
   ]
 
   return (
-    <aside
-      className={cn(
-        'rounded-xl border p-3',
-        props.className
-      )}
-    >
+    <aside className={cn('rounded-xl border p-3', props.className)}>
       <div className='mb-2.5 flex items-center justify-between gap-2'>
         <div>
           <h2 className='text-foreground text-sm font-bold'>{t('Filter')}</h2>
diff --git a/web/default/src/features/pricing/components/pricing-toolbar.tsx b/web/default/src/features/pricing/components/pricing-toolbar.tsx
index 95f5ffeb084..9c7afbe0f97 100644
--- a/web/default/src/features/pricing/components/pricing-toolbar.tsx
+++ b/web/default/src/features/pricing/components/pricing-toolbar.tsx
@@ -1,11 +1,5 @@
 import { useCallback, useState } from 'react'
-import {
-  ArrowUpDown,
-  Check,
-  Filter,
-  Grid2X2,
-  Table2,
-} from 'lucide-react'
+import { ArrowUpDown, Check, Filter, Grid2X2, Table2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { cn } from '@/lib/utils'
 import { Badge } from '@/components/ui/badge'
@@ -85,7 +79,7 @@ function SegmentedControl(props: {
     <div
       role='group'
       aria-label={props.ariaLabel}
-      className='bg-muted/60 inline-flex h-8 items-center rounded-md border p-0.5'
+      className='bg-muted/60 inline-flex h-8 items-center rounded-lg border p-0.5'
     >
       {props.options.map((option) => {
         const Icon = option.icon
@@ -97,10 +91,10 @@ function SegmentedControl(props: {
             onClick={() => props.onChange(option.value)}
             aria-pressed={isActive}
             className={cn(
-              'inline-flex h-full items-center justify-center rounded-[5px] text-xs font-medium transition-all',
+              'inline-flex h-full items-center justify-center rounded-md text-xs font-medium transition-all',
               Icon && !option.label ? 'w-7' : 'gap-1.5 px-3',
               isActive
-                ? 'bg-foreground text-background shadow-sm'
+                ? 'bg-primary text-primary-foreground shadow-sm'
                 : 'text-muted-foreground hover:text-foreground'
             )}
           >
@@ -115,7 +109,7 @@ function SegmentedControl(props: {
 
         return (
           <Tooltip key={option.value}>
-            <TooltipTrigger asChild>{button}</TooltipTrigger>
+            <TooltipTrigger render={button}></TooltipTrigger>
             <TooltipContent side='bottom' className='text-xs'>
               {option.tooltip}
             </TooltipContent>
@@ -170,9 +164,7 @@ export function PricingToolbar(props: PricingToolbarProps) {
             <span className='text-foreground font-semibold tabular-nums'>
               {props.filteredCount.toLocaleString()}
             </span>
-            <span>
-              {props.filteredCount === 1 ? t('model') : t('models')}
-            </span>
+            <span>{props.filteredCount === 1 ? t('model') : t('models')}</span>
             {props.hasActiveFilters && props.totalCount && (
               <span className='text-muted-foreground/60 text-xs'>
                 / {props.totalCount.toLocaleString()}
@@ -204,18 +196,18 @@ export function PricingToolbar(props: PricingToolbarProps) {
           </div>
 
           <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                type='button'
-                variant='outline'
-                size='sm'
-                className='h-8 gap-1.5 px-3 text-xs'
-              >
-                <ArrowUpDown className='size-3.5' />
-                <span>
-                  {sortLabels[props.sortBy as SortOption] || t('Sort')}
-                </span>
-              </Button>
+            <DropdownMenuTrigger
+              render={
+                <Button
+                  type='button'
+                  variant='outline'
+                  size='sm'
+                  className='h-8 gap-1.5 px-3 text-xs'
+                />
+              }
+            >
+              <ArrowUpDown className='size-3.5' />
+              <span>{sortLabels[props.sortBy as SortOption] || t('Sort')}</span>
             </DropdownMenuTrigger>
             <DropdownMenuContent align='end' className='w-44'>
               {Object.entries(sortLabels).map(([value, label]) => (
diff --git a/web/default/src/features/pricing/hooks/use-filters.ts b/web/default/src/features/pricing/hooks/use-filters.ts
index bf7bfe75401..61d6c2e920e 100644
--- a/web/default/src/features/pricing/hooks/use-filters.ts
+++ b/web/default/src/features/pricing/hooks/use-filters.ts
@@ -59,20 +59,17 @@ export function useFilters(models: PricingModel[]) {
   const viewMode = normalizeViewMode(filterState.view)
   const showRechargePrice = filterState.rechargePrice === true
 
-  const updateFilters = useCallback(
-    (updates: Record<string, unknown>) => {
-      setFilterState((prev) => {
-        const next: Record<string, unknown> = { ...prev, ...updates }
-        for (const key of Object.keys(next)) {
-          if (next[key] === undefined || next[key] === null) {
-            delete next[key]
-          }
+  const updateFilters = useCallback((updates: Record<string, unknown>) => {
+    setFilterState((prev) => {
+      const next: Record<string, unknown> = { ...prev, ...updates }
+      for (const key of Object.keys(next)) {
+        if (next[key] === undefined || next[key] === null) {
+          delete next[key]
         }
-        return next as FilterState
-      })
-    },
-    []
-  )
+      }
+      return next as FilterState
+    })
+  }, [])
 
   const setSearchInput = useCallback(
     (v: string) => updateFilters({ search: v || undefined }),
diff --git a/web/default/src/features/pricing/index.tsx b/web/default/src/features/pricing/index.tsx
index 8bf557c58c6..ae32fdba80c 100644
--- a/web/default/src/features/pricing/index.tsx
+++ b/web/default/src/features/pricing/index.tsx
@@ -18,7 +18,9 @@ import { usePricingData } from './hooks/use-pricing-data'
 
 export function Pricing() {
   const { t } = useTranslation()
-  const [selectedModelName, setSelectedModelName] = useState<string | null>(null)
+  const [selectedModelName, setSelectedModelName] = useState<string | null>(
+    null
+  )
 
   const {
     models,
@@ -61,18 +63,16 @@ export function Pricing() {
     clearSearch,
   } = useFilters(models || [])
 
-  const handleModelClick = useCallback(
-    (modelName: string) => {
-      setSelectedModelName(modelName)
-    },
-    []
-  )
+  const handleModelClick = useCallback((modelName: string) => {
+    setSelectedModelName(modelName)
+  }, [])
 
   const selectedModel = useMemo(
     () =>
       selectedModelName
-        ? (models || []).find((model) => model.model_name === selectedModelName) ||
-          null
+        ? (models || []).find(
+            (model) => model.model_name === selectedModelName
+          ) || null
         : null,
     [models, selectedModelName]
   )
@@ -148,8 +148,10 @@ export function Pricing() {
               'radial-gradient(ellipse 50% 40% at 80% 15%, oklch(0.65 0.15 200 / 60%) 0%, transparent 70%)',
               'radial-gradient(ellipse 40% 35% at 50% 70%, oklch(0.70 0.12 280 / 40%) 0%, transparent 70%)',
             ].join(', '),
-            maskImage: 'linear-gradient(to bottom, black 40%, transparent 100%)',
-            WebkitMaskImage: 'linear-gradient(to bottom, black 40%, transparent 100%)',
+            maskImage:
+              'linear-gradient(to bottom, black 40%, transparent 100%)',
+            WebkitMaskImage:
+              'linear-gradient(to bottom, black 40%, transparent 100%)',
           }}
         />
         <PageTransition className='relative mx-auto w-full max-w-[1800px] px-3 pt-16 pb-8 sm:px-6 sm:pt-20 sm:pb-10 xl:px-8'>
@@ -174,12 +176,14 @@ export function Pricing() {
               value={searchInput}
               onChange={setSearchInput}
               onClear={clearSearch}
-              placeholder={t('Search model name, provider, endpoint, or tag...')}
+              placeholder={t(
+                'Search model name, provider, endpoint, or tag...'
+              )}
               className='mx-auto mt-4 max-w-2xl sm:mt-6'
             />
           </header>
 
-          <div className='grid gap-4 xl:grid-cols-[330px_minmax(0,1fr)] 2xl:grid-cols-[330px_minmax(0,1fr)]'>
+          <div className='grid gap-4 xl:grid-cols-[330px_minmax(0,1fr)]'>
             <PricingSidebar
               quotaTypeFilter={quotaTypeFilter}
               endpointTypeFilter={endpointTypeFilter}
@@ -198,7 +202,7 @@ export function Pricing() {
               models={models || []}
               hasActiveFilters={hasActiveFilters}
               onClearFilters={clearFilters}
-              className='sticky top-20 hidden max-h-[calc(100vh-6rem)] overflow-y-auto xl:block'
+              className='hover-scrollbar sticky top-4 hidden max-h-[calc(100dvh-2rem)] self-start overflow-y-auto xl:block'
             />
 
             <main className='min-w-0 space-y-4'>
diff --git a/web/default/src/features/pricing/lib/dynamic-price.ts b/web/default/src/features/pricing/lib/dynamic-price.ts
index 9bdc9bb0a13..52d9fd885d2 100644
--- a/web/default/src/features/pricing/lib/dynamic-price.ts
+++ b/web/default/src/features/pricing/lib/dynamic-price.ts
@@ -1,5 +1,6 @@
 import { formatBillingCurrencyFromUSD } from '@/lib/currency'
 import { TOKEN_UNIT_DIVISORS } from '../constants'
+import type { PricingModel, TokenUnit } from '../types'
 import {
   BILLING_PRICING_VARS,
   parseTiersFromExpr,
@@ -8,7 +9,6 @@ import {
   type BillingVar,
   type ParsedTier,
 } from './billing-expr'
-import type { PricingModel, TokenUnit } from '../types'
 
 type DynamicPriceOptions = {
   tokenUnit: TokenUnit
@@ -98,7 +98,9 @@ export function formatDynamicUnitPrice(
 
 export function getDynamicPricingTiers(model: PricingModel): ParsedTier[] {
   if (!isDynamicPricingModel(model)) return []
-  const { billingExpr } = splitBillingExprAndRequestRules(model.billing_expr || '')
+  const { billingExpr } = splitBillingExprAndRequestRules(
+    model.billing_expr || ''
+  )
   return parseTiersFromExpr(billingExpr)
 }
 
diff --git a/web/default/src/features/pricing/lib/index.ts b/web/default/src/features/pricing/lib/index.ts
index a1b4a60f693..49ea6cd6faf 100644
--- a/web/default/src/features/pricing/lib/index.ts
+++ b/web/default/src/features/pricing/lib/index.ts
@@ -7,3 +7,6 @@ export * from './price'
 export * from './model-helpers'
 export * from './billing-expr'
 export * from './tier-expr'
+export * from './model-metadata'
+export * from './mock-stats'
+export * from './seed'
diff --git a/web/default/src/features/pricing/lib/mock-stats.ts b/web/default/src/features/pricing/lib/mock-stats.ts
new file mode 100644
index 00000000000..c92e5d14370
--- /dev/null
+++ b/web/default/src/features/pricing/lib/mock-stats.ts
@@ -0,0 +1,844 @@
+import type { PricingModel } from '../types'
+import {
+  hashStringToSeed,
+  randomInRange,
+  randomIntInRange,
+  seededRandom,
+} from './seed'
+
+// ----------------------------------------------------------------------------
+// Mock model statistics
+// ----------------------------------------------------------------------------
+//
+// The backend has not yet implemented latency / uptime / app-ranking data.
+// These helpers generate plausible, deterministic mock values seeded from
+// the model name (and optionally the group name) so that:
+//   - Every render of the same model shows the same numbers
+//   - Different models / different groups render visibly distinct values
+//
+// When the backend ships real metrics, callers should switch to the
+// real API and these helpers can be deleted. The shape of the returned
+// data is designed to mirror what we expect the real endpoints to return.
+
+export type GroupPerformance = {
+  group: string
+  ttft_p50_ms: number
+  ttft_p95_ms: number
+  ttft_p99_ms: number
+  throughput_tps: number
+  uptime_30d_pct: number
+  /** Number of monitored requests in the last 24h (display only). */
+  request_volume_24h: number
+}
+
+export type LatencyTimePoint = {
+  timestamp: string
+  group: string
+  ttft_ms: number
+}
+
+export type UptimeDayPoint = {
+  date: string
+  uptime_pct: number
+  incidents: number
+  outage_minutes: number
+}
+
+export type AppRanking = {
+  rank: number
+  name: string
+  description: string
+  category: string
+  growth_pct: number
+  monthly_tokens: number
+  url?: string
+  initial: string
+}
+
+const APP_TEMPLATES: Array<
+  Omit<AppRanking, 'rank' | 'monthly_tokens' | 'growth_pct' | 'initial'>
+> = [
+  {
+    name: 'Cline',
+    description: 'Autonomous coding agent inside the IDE',
+    category: 'Coding',
+    url: 'https://cline.bot',
+  },
+  {
+    name: 'Roo Code',
+    description: 'AI agent for VS Code with multi-step planning',
+    category: 'Coding',
+    url: 'https://roocode.com',
+  },
+  {
+    name: 'Open WebUI',
+    description: 'Self-hosted ChatGPT-like web interface',
+    category: 'Chat',
+    url: 'https://openwebui.com',
+  },
+  {
+    name: 'LibreChat',
+    description: 'Open-source chat platform with multi-model support',
+    category: 'Chat',
+    url: 'https://librechat.ai',
+  },
+  {
+    name: 'Lobe Chat',
+    description: 'Modern open-source chat UI with plugins',
+    category: 'Chat',
+    url: 'https://lobehub.com',
+  },
+  {
+    name: 'NextChat',
+    description: 'Cross-platform private ChatGPT client',
+    category: 'Chat',
+    url: 'https://nextchat.dev',
+  },
+  {
+    name: 'Continue',
+    description: 'Open-source AI code assistant for editors',
+    category: 'Coding',
+    url: 'https://continue.dev',
+  },
+  {
+    name: 'Aider',
+    description: 'Pair-programming agent in your terminal',
+    category: 'Coding',
+    url: 'https://aider.chat',
+  },
+  {
+    name: 'Dify',
+    description: 'LLM application development platform',
+    category: 'Platform',
+    url: 'https://dify.ai',
+  },
+  {
+    name: 'FastGPT',
+    description: 'Knowledge base orchestration and chat platform',
+    category: 'Platform',
+    url: 'https://fastgpt.in',
+  },
+  {
+    name: 'Flowise',
+    description: 'Low-code LLM workflow builder',
+    category: 'Platform',
+    url: 'https://flowiseai.com',
+  },
+  {
+    name: 'OpenInterpreter',
+    description: 'Natural-language code execution agent',
+    category: 'Coding',
+    url: 'https://openinterpreter.com',
+  },
+  {
+    name: 'Devika',
+    description: 'Open-source AI software engineer',
+    category: 'Coding',
+    url: 'https://github.com/stitionai/devika',
+  },
+  {
+    name: 'Cherry Studio',
+    description: 'Multi-model desktop chat client',
+    category: 'Chat',
+    url: 'https://cherry-ai.com',
+  },
+  {
+    name: 'AnythingLLM',
+    description: 'Workspaces around your private documents',
+    category: 'Platform',
+    url: 'https://anythingllm.com',
+  },
+  {
+    name: 'OpenHands',
+    description: 'Coding agent with browser-and-code tools',
+    category: 'Coding',
+    url: 'https://docs.all-hands.dev',
+  },
+  {
+    name: 'Cursor',
+    description: 'AI-native code editor',
+    category: 'Coding',
+    url: 'https://cursor.com',
+  },
+  {
+    name: 'Zed',
+    description: 'Multiplayer code editor with AI',
+    category: 'Coding',
+    url: 'https://zed.dev',
+  },
+  {
+    name: 'Notion AI',
+    description: 'Documents and writing assistant',
+    category: 'Productivity',
+    url: 'https://notion.so',
+  },
+  {
+    name: 'Raycast AI',
+    description: 'AI on your macOS launcher',
+    category: 'Productivity',
+    url: 'https://raycast.com',
+  },
+  {
+    name: 'Obsidian Smart Connections',
+    description: 'Connect notes with semantic search',
+    category: 'Productivity',
+  },
+  {
+    name: 'Bolt.new',
+    description: 'Prompt-to-app full-stack builder',
+    category: 'Coding',
+    url: 'https://bolt.new',
+  },
+  {
+    name: 'Pieces',
+    description: 'AI workflow companion for developers',
+    category: 'Productivity',
+    url: 'https://pieces.app',
+  },
+  {
+    name: 'AmazingAI',
+    description: 'Personal AI knowledge assistant',
+    category: 'Productivity',
+  },
+  {
+    name: 'TypingMind',
+    description: 'Better UI for ChatGPT and Claude',
+    category: 'Chat',
+    url: 'https://typingmind.com',
+  },
+]
+
+const PROFILE_BY_NAME = (name: string) => {
+  const n = name.toLowerCase()
+  if (/embed|rerank/.test(n)) return 'embedding'
+  if (/image|sora|veo|kling|pika|jimeng|dalle|imagen/.test(n)) return 'image'
+  if (/whisper|tts|voice|audio/.test(n)) return 'audio'
+  if (/o1|o3|o4|reasoning|thinking|deepseek-r/.test(n)) return 'reasoning'
+  if (/flash|haiku|mini|small|nano|fast/.test(n)) return 'fast'
+  if (/gpt-5|opus|ultra|405|70b/.test(n)) return 'large'
+  return 'standard'
+}
+
+type ProfileSpec = {
+  ttftRange: [number, number]
+  throughputRange: [number, number]
+  uptimeRange: [number, number]
+}
+
+const PROFILE_SPECS: Record<string, ProfileSpec> = {
+  embedding: {
+    ttftRange: [40, 120],
+    throughputRange: [0, 0],
+    uptimeRange: [99.9, 99.99],
+  },
+  image: {
+    ttftRange: [2_500, 12_000],
+    throughputRange: [0, 0],
+    uptimeRange: [98.5, 99.8],
+  },
+  audio: {
+    ttftRange: [180, 600],
+    throughputRange: [0, 0],
+    uptimeRange: [99.5, 99.95],
+  },
+  reasoning: {
+    ttftRange: [1_800, 5_500],
+    throughputRange: [25, 70],
+    uptimeRange: [99.4, 99.95],
+  },
+  fast: {
+    ttftRange: [180, 480],
+    throughputRange: [110, 240],
+    uptimeRange: [99.7, 99.99],
+  },
+  large: {
+    ttftRange: [600, 1_400],
+    throughputRange: [55, 95],
+    uptimeRange: [99.5, 99.95],
+  },
+  standard: {
+    ttftRange: [400, 900],
+    throughputRange: [70, 140],
+    uptimeRange: [99.6, 99.97],
+  },
+}
+
+function rangeFromSeed(
+  rand: () => number,
+  [min, max]: [number, number]
+): number {
+  return randomInRange(rand, min, max)
+}
+
+function applyGroupFactor(value: number, factor: number): number {
+  return value * factor
+}
+
+function groupFactor(
+  group: string,
+  baseSeed: number
+): { ttft: number; throughput: number; uptime: number } {
+  const rand = seededRandom(baseSeed ^ hashStringToSeed(group || 'default'))
+  return {
+    ttft: 0.85 + rand() * 0.55,
+    throughput: 0.85 + rand() * 0.4,
+    uptime: 0.997 + rand() * 0.003,
+  }
+}
+
+/**
+ * Build per-group performance stats for a model. Always returns at least one
+ * row for each enabled group, sorted alphabetically.
+ */
+export function buildGroupPerformance(model: PricingModel): GroupPerformance[] {
+  const groups = (model.enable_groups ?? []).filter((g) => g && g !== 'auto')
+  const targets = groups.length > 0 ? groups : ['default']
+  const profile = PROFILE_BY_NAME(model.model_name)
+  const spec = PROFILE_SPECS[profile]
+  const baseSeed = hashStringToSeed(model.model_name)
+
+  return targets
+    .slice()
+    .sort((a, b) => a.localeCompare(b))
+    .map<GroupPerformance>((group) => {
+      const rand = seededRandom(baseSeed ^ hashStringToSeed(group))
+      const factor = groupFactor(group, baseSeed)
+      const ttftP50 = applyGroupFactor(
+        rangeFromSeed(rand, spec.ttftRange),
+        factor.ttft
+      )
+      const throughput = applyGroupFactor(
+        rangeFromSeed(rand, spec.throughputRange),
+        factor.throughput
+      )
+      const uptimePct = Math.min(
+        99.99,
+        rangeFromSeed(rand, spec.uptimeRange) * factor.uptime
+      )
+      const requestVolume = randomIntInRange(rand, 18_000, 480_000)
+      return {
+        group,
+        ttft_p50_ms: Math.round(ttftP50),
+        ttft_p95_ms: Math.round(ttftP50 * (1.6 + rand() * 0.4)),
+        ttft_p99_ms: Math.round(ttftP50 * (2.4 + rand() * 0.6)),
+        throughput_tps: throughput === 0 ? 0 : Math.round(throughput * 10) / 10,
+        uptime_30d_pct: Math.round(uptimePct * 100) / 100,
+        request_volume_24h: requestVolume,
+      }
+    })
+}
+
+/**
+ * Build a 24-hour latency series for each group. Returns one point per hour
+ * (24 buckets), oldest first.
+ */
+export function buildLatencyTimeSeries(
+  model: PricingModel
+): LatencyTimePoint[] {
+  const performances = buildGroupPerformance(model)
+  if (performances.length === 0) return []
+
+  const now = new Date()
+  now.setMinutes(0, 0, 0)
+  const baseSeed = hashStringToSeed(`${model.model_name}:lat`)
+  const points: LatencyTimePoint[] = []
+
+  for (const perf of performances) {
+    const rand = seededRandom(baseSeed ^ hashStringToSeed(perf.group))
+    for (let i = 23; i >= 0; i--) {
+      const ts = new Date(now.getTime() - i * 3_600_000)
+      const noise = 0.7 + rand() * 0.7
+      const trend = 0.85 + Math.sin(i / 3) * 0.1
+      const value = Math.max(50, Math.round(perf.ttft_p50_ms * noise * trend))
+      points.push({
+        timestamp: ts.toISOString(),
+        group: perf.group,
+        ttft_ms: value,
+      })
+    }
+  }
+  return points
+}
+
+/**
+ * Build a 30-day uptime series. Returns one point per day, oldest first.
+ *
+ * If `group` is provided the series is anchored on that group's mean uptime,
+ * otherwise it uses the per-model average. Either way the seed is derived
+ * deterministically so re-renders are stable.
+ */
+export function buildUptimeSeries(
+  model: PricingModel,
+  group?: string
+): UptimeDayPoint[] {
+  const performances = buildGroupPerformance(model)
+  if (performances.length === 0) return []
+
+  const target = group ? performances.find((p) => p.group === group) : null
+  const baseUptime = target
+    ? target.uptime_30d_pct
+    : performances.reduce((s, p) => s + p.uptime_30d_pct, 0) /
+      performances.length
+  const baseSeed = hashStringToSeed(`${model.model_name}:up:${group ?? '_all'}`)
+  const rand = seededRandom(baseSeed)
+
+  const today = new Date()
+  today.setHours(0, 0, 0, 0)
+  const points: UptimeDayPoint[] = []
+
+  for (let i = 29; i >= 0; i--) {
+    const date = new Date(today.getTime() - i * 86_400_000)
+    const isoDate = date.toISOString().slice(0, 10)
+    const incidentChance = rand()
+    const incidents = incidentChance > 0.92 ? 1 : 0
+    const outageMinutes = incidents > 0 ? Math.round(rand() * 30 + 5) : 0
+    const downtimePct = (outageMinutes / 1_440) * 100
+    const dayUptime = Math.max(85, Math.min(100, baseUptime - downtimePct))
+    points.push({
+      date: isoDate,
+      uptime_pct: Math.round(dayUptime * 100) / 100,
+      incidents,
+      outage_minutes: outageMinutes,
+    })
+  }
+
+  return points
+}
+
+/**
+ * Build a deterministic top-apps ranking for the model. The first three apps
+ * always come from the same template list; the rest is shuffled by the seed
+ * so different models surface different long tails.
+ */
+export function buildAppRankings(
+  model: PricingModel,
+  count = 12
+): AppRanking[] {
+  const baseSeed = hashStringToSeed(`${model.model_name}:apps`)
+  const rand = seededRandom(baseSeed)
+  const candidates = [...APP_TEMPLATES]
+  // Fisher–Yates shuffle.
+  for (let i = candidates.length - 1; i > 0; i--) {
+    const j = Math.floor(rand() * (i + 1))
+    ;[candidates[i], candidates[j]] = [candidates[j], candidates[i]]
+  }
+
+  const top = candidates.slice(0, count)
+  const baseTokens = randomInRange(rand, 90_000_000, 320_000_000)
+
+  return top.map((app, idx) => {
+    const decay = Math.pow(0.78, idx)
+    const monthlyTokens = Math.round(baseTokens * decay * (0.85 + rand() * 0.3))
+    const growthPctRaw = randomInRange(rand, -28, 84)
+    const growthPct = Math.round(growthPctRaw * 10) / 10
+    return {
+      rank: idx + 1,
+      name: app.name,
+      description: app.description,
+      category: app.category,
+      url: app.url,
+      growth_pct: growthPct,
+      monthly_tokens: monthlyTokens,
+      initial: app.name.charAt(0).toUpperCase(),
+    }
+  })
+}
+
+/** Aggregate uptime over the most recent 30 days. */
+export function aggregateUptime(points: UptimeDayPoint[]): {
+  uptime_pct: number
+  incidents: number
+  outage_minutes: number
+} {
+  if (points.length === 0) {
+    return { uptime_pct: 0, incidents: 0, outage_minutes: 0 }
+  }
+  const incidents = points.reduce((s, p) => s + p.incidents, 0)
+  const outageMinutes = points.reduce((s, p) => s + p.outage_minutes, 0)
+  const totalMinutes = points.length * 1_440
+  const uptimePct = ((totalMinutes - outageMinutes) / totalMinutes) * 100
+  return {
+    incidents,
+    outage_minutes: outageMinutes,
+    uptime_pct: Math.round(uptimePct * 1000) / 1000,
+  }
+}
+
+/** Format throughput for display: "0" → "—". */
+export function formatThroughput(tps: number): string {
+  if (tps <= 0) return '—'
+  if (tps >= 1_000) return `${(tps / 1_000).toFixed(1)}K t/s`
+  return `${tps.toFixed(tps < 10 ? 2 : 1)} t/s`
+}
+
+/** Format latency in ms with proper unit selection. */
+export function formatLatency(ms: number): string {
+  if (!Number.isFinite(ms) || ms <= 0) return '—'
+  if (ms >= 1_000) return `${(ms / 1_000).toFixed(2)}s`
+  return `${Math.round(ms)}ms`
+}
+
+/** Format uptime percentage with 2 decimal places. */
+export function formatUptimePct(pct: number): string {
+  if (!Number.isFinite(pct)) return '—'
+  return `${pct.toFixed(2)}%`
+}
+
+/** Compact integer formatter for token counts in apps tab. */
+export function formatTokenVolume(n: number): string {
+  if (!Number.isFinite(n) || n <= 0) return '0'
+  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B`
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`
+  return n.toString()
+}
+
+// ---------------------------------------------------------------------------
+// Mock supported-parameters & rate-limits & misc API metadata
+// ---------------------------------------------------------------------------
+
+export type SupportedParameter = {
+  name: string
+  type:
+    | 'number'
+    | 'integer'
+    | 'boolean'
+    | 'string'
+    | 'object'
+    | 'array'
+    | 'enum'
+  defaultValue?: string | number | boolean
+  range?: string
+  enumValues?: string[]
+  descriptionKey: string
+  required?: boolean
+}
+
+const COMMON_CHAT_PARAMS: SupportedParameter[] = [
+  {
+    name: 'temperature',
+    type: 'number',
+    defaultValue: 1,
+    range: '0 ~ 2',
+    descriptionKey: 'Sampling temperature; lower is more deterministic',
+  },
+  {
+    name: 'top_p',
+    type: 'number',
+    defaultValue: 1,
+    range: '0 ~ 1',
+    descriptionKey: 'Nucleus sampling probability mass',
+  },
+  {
+    name: 'max_tokens',
+    type: 'integer',
+    range: '>= 1',
+    descriptionKey: 'Maximum number of tokens in the response',
+  },
+  {
+    name: 'frequency_penalty',
+    type: 'number',
+    defaultValue: 0,
+    range: '-2 ~ 2',
+    descriptionKey: 'Penalises repetition of frequent tokens',
+  },
+  {
+    name: 'presence_penalty',
+    type: 'number',
+    defaultValue: 0,
+    range: '-2 ~ 2',
+    descriptionKey: 'Encourages introducing new topics',
+  },
+  {
+    name: 'stop',
+    type: 'array',
+    descriptionKey: 'Up to 4 strings that stop generation',
+  },
+  {
+    name: 'seed',
+    type: 'integer',
+    descriptionKey: 'Deterministic sampling seed (best-effort)',
+  },
+  {
+    name: 'n',
+    type: 'integer',
+    defaultValue: 1,
+    range: '>= 1',
+    descriptionKey: 'Number of completions to generate',
+  },
+  {
+    name: 'stream',
+    type: 'boolean',
+    defaultValue: false,
+    descriptionKey: 'Stream tokens via Server-Sent Events',
+  },
+  {
+    name: 'response_format',
+    type: 'object',
+    descriptionKey: 'Force JSON object or schema-conforming output',
+  },
+  {
+    name: 'tools',
+    type: 'array',
+    descriptionKey: 'Tool / function declarations the model may call',
+  },
+  {
+    name: 'tool_choice',
+    type: 'string',
+    enumValues: ['auto', 'none', 'required'],
+    descriptionKey: 'Tool-choice policy or specific tool name',
+  },
+  {
+    name: 'logprobs',
+    type: 'boolean',
+    defaultValue: false,
+    descriptionKey: 'Return per-token log probabilities',
+  },
+  {
+    name: 'top_logprobs',
+    type: 'integer',
+    range: '0 ~ 20',
+    descriptionKey: 'Number of top log probabilities returned per token',
+  },
+  {
+    name: 'logit_bias',
+    type: 'object',
+    descriptionKey: 'Per-token logit bias map',
+  },
+  {
+    name: 'user',
+    type: 'string',
+    descriptionKey: 'End-user identifier for abuse monitoring',
+  },
+]
+
+const REASONING_PARAMS: SupportedParameter[] = [
+  {
+    name: 'reasoning_effort',
+    type: 'enum',
+    enumValues: ['low', 'medium', 'high'],
+    defaultValue: 'medium',
+    descriptionKey: 'Controls how much the model thinks before answering',
+  },
+  {
+    name: 'max_completion_tokens',
+    type: 'integer',
+    range: '>= 1',
+    descriptionKey: 'Maximum tokens including hidden reasoning tokens',
+  },
+  {
+    name: 'stop',
+    type: 'array',
+    descriptionKey: 'Up to 4 strings that stop generation',
+  },
+  {
+    name: 'seed',
+    type: 'integer',
+    descriptionKey: 'Deterministic sampling seed (best-effort)',
+  },
+  {
+    name: 'stream',
+    type: 'boolean',
+    defaultValue: false,
+    descriptionKey: 'Stream tokens via Server-Sent Events',
+  },
+  {
+    name: 'response_format',
+    type: 'object',
+    descriptionKey: 'Force JSON object or schema-conforming output',
+  },
+  {
+    name: 'tools',
+    type: 'array',
+    descriptionKey: 'Tool / function declarations the model may call',
+  },
+  {
+    name: 'tool_choice',
+    type: 'string',
+    enumValues: ['auto', 'none', 'required'],
+    descriptionKey: 'Tool-choice policy or specific tool name',
+  },
+  {
+    name: 'user',
+    type: 'string',
+    descriptionKey: 'End-user identifier for abuse monitoring',
+  },
+]
+
+const EMBEDDING_PARAMS: SupportedParameter[] = [
+  {
+    name: 'input',
+    type: 'string',
+    required: true,
+    descriptionKey: 'Text or array of texts to embed',
+  },
+  {
+    name: 'dimensions',
+    type: 'integer',
+    range: '>= 1',
+    descriptionKey: 'Truncate embeddings to this many dimensions',
+  },
+  {
+    name: 'encoding_format',
+    type: 'enum',
+    enumValues: ['float', 'base64'],
+    defaultValue: 'float',
+    descriptionKey: 'Wire encoding for the embedding vectors',
+  },
+  {
+    name: 'user',
+    type: 'string',
+    descriptionKey: 'End-user identifier for abuse monitoring',
+  },
+]
+
+const IMAGE_PARAMS: SupportedParameter[] = [
+  {
+    name: 'prompt',
+    type: 'string',
+    required: true,
+    descriptionKey: 'Text description of the desired image',
+  },
+  {
+    name: 'size',
+    type: 'enum',
+    enumValues: ['256x256', '512x512', '1024x1024', '1024x1792', '1792x1024'],
+    defaultValue: '1024x1024',
+    descriptionKey: 'Output image size',
+  },
+  {
+    name: 'quality',
+    type: 'enum',
+    enumValues: ['standard', 'hd'],
+    defaultValue: 'standard',
+    descriptionKey: 'Generation quality preset',
+  },
+  {
+    name: 'style',
+    type: 'enum',
+    enumValues: ['vivid', 'natural'],
+    defaultValue: 'vivid',
+    descriptionKey: 'Aesthetic style',
+  },
+  {
+    name: 'n',
+    type: 'integer',
+    defaultValue: 1,
+    range: '1 ~ 10',
+    descriptionKey: 'Number of images to generate',
+  },
+  {
+    name: 'response_format',
+    type: 'enum',
+    enumValues: ['url', 'b64_json'],
+    defaultValue: 'url',
+    descriptionKey: 'How to deliver the resulting image',
+  },
+]
+
+const VIDEO_PARAMS: SupportedParameter[] = [
+  {
+    name: 'prompt',
+    type: 'string',
+    required: true,
+    descriptionKey: 'Text description of the desired video',
+  },
+  {
+    name: 'duration',
+    type: 'integer',
+    range: '1 ~ 60',
+    descriptionKey: 'Video length in seconds',
+  },
+  {
+    name: 'aspect_ratio',
+    type: 'enum',
+    enumValues: ['16:9', '9:16', '1:1'],
+    defaultValue: '16:9',
+    descriptionKey: 'Output aspect ratio',
+  },
+  {
+    name: 'fps',
+    type: 'integer',
+    range: '8 ~ 60',
+    defaultValue: 24,
+    descriptionKey: 'Frames per second',
+  },
+]
+
+type ApiCategory = 'reasoning' | 'embedding' | 'image' | 'video' | 'chat'
+
+/**
+ * Refine the broad PROFILE_BY_NAME bucket into an API-shape category. The
+ * `image` bucket from `PROFILE_BY_NAME` lumps still-image and video models
+ * together (because their performance profiles overlap); for the API tab we
+ * need to distinguish them so the request-parameter table is accurate.
+ */
+function apiCategoryOf(model: PricingModel): ApiCategory {
+  const profile = PROFILE_BY_NAME(model.model_name)
+  if (profile === 'embedding' || profile === 'reasoning') return profile
+  if (profile === 'image') {
+    return /sora|veo|kling|pika|video|wan-|hunyuanvideo/i.test(model.model_name)
+      ? 'video'
+      : 'image'
+  }
+  return 'chat'
+}
+
+/**
+ * Build the list of request parameters that the model accepts. The list is
+ * shaped per-modality so reasoning, embedding, image, video and chat models
+ * each show their relevant parameter set.
+ */
+export function buildSupportedParameters(
+  model: PricingModel
+): SupportedParameter[] {
+  const cat = apiCategoryOf(model)
+  if (cat === 'reasoning') return REASONING_PARAMS
+  if (cat === 'embedding') return EMBEDDING_PARAMS
+  if (cat === 'image') return IMAGE_PARAMS
+  if (cat === 'video') return VIDEO_PARAMS
+  return COMMON_CHAT_PARAMS
+}
+
+export type RateLimit = {
+  group: string
+  rpm: number
+  tpm: number
+  rpd: number
+}
+
+/** Build per-group RPM / TPM / RPD limits for the model. */
+export function buildRateLimits(model: PricingModel): RateLimit[] {
+  const groups = (model.enable_groups ?? []).filter((g) => g && g !== 'auto')
+  const targets = groups.length > 0 ? groups : ['default']
+  const cat = apiCategoryOf(model)
+  const baseSeed = hashStringToSeed(`${model.model_name}:rl`)
+  const isHeavy = cat === 'image' || cat === 'video'
+  const isLight = cat === 'embedding'
+  const baseRpm = isHeavy ? 60 : isLight ? 5_000 : 500
+  const baseTpm = isHeavy ? 0 : isLight ? 1_000_000 : 200_000
+  const baseRpd = isHeavy ? 1_000 : isLight ? 100_000 : 10_000
+
+  return targets
+    .slice()
+    .sort((a, b) => a.localeCompare(b))
+    .map((group) => {
+      const rand = seededRandom(baseSeed ^ hashStringToSeed(group))
+      const tier = 0.6 + rand() * 1.4
+      return {
+        group,
+        rpm: Math.round((baseRpm * tier) / 10) * 10,
+        tpm: baseTpm === 0 ? 0 : Math.round((baseTpm * tier) / 1_000) * 1_000,
+        rpd: Math.round((baseRpd * tier) / 100) * 100,
+      }
+    })
+}
+
+/** Format an integer rate-limit value compactly. */
+export function formatRateLimit(value: number): string {
+  if (value <= 0) return '—'
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
+  if (value >= 1_000)
+    return `${(value / 1_000).toFixed(value >= 10_000 ? 0 : 1)}K`
+  return value.toLocaleString()
+}
diff --git a/web/default/src/features/pricing/lib/model-metadata.ts b/web/default/src/features/pricing/lib/model-metadata.ts
new file mode 100644
index 00000000000..fb61968ece0
--- /dev/null
+++ b/web/default/src/features/pricing/lib/model-metadata.ts
@@ -0,0 +1,548 @@
+import type { Modality, ModelCapability, PricingModel } from '../types'
+import { hashStringToSeed, seededRandom } from './seed'
+
+// ----------------------------------------------------------------------------
+// Model metadata inference
+// ----------------------------------------------------------------------------
+//
+// The backend does not currently return `context_length`, `max_output_tokens`,
+// `knowledge_cutoff`, `release_date`, `parameter_count`, or modality/capability
+// flags for a model. Until it does, we infer reasonable values client-side
+// from the data we already have (endpoint types, ratios, tags, model name)
+// and fall back to a deterministic mock seeded from the model name so that
+// every render of the same model shows the same numbers.
+//
+// When the backend starts returning these fields, callers should prefer the
+// explicit values on `model.*` and only fall back to the inferred ones.
+
+const TEXT_INPUT_ENDPOINTS = new Set([
+  'openai',
+  'openai-response',
+  'anthropic',
+  'gemini',
+  'embeddings',
+  'jina-rerank',
+])
+
+const IMAGE_OUTPUT_ENDPOINTS = new Set(['image-generation'])
+const VIDEO_OUTPUT_ENDPOINTS = new Set(['openai-video'])
+const EMBEDDING_ENDPOINTS = new Set(['embeddings', 'jina-rerank'])
+
+const REASONING_NAME_PATTERNS = [
+  /^o[1-4](?:[-:_].+)?$/i,
+  /reasoning/i,
+  /thinking/i,
+  /qwq/i,
+  /deepseek-r\d/i,
+  /grok.*-(?:thinking|reasoning)/i,
+]
+
+const VISION_NAME_PATTERNS = [
+  /vision/i,
+  /vl(?:[-_]|$)/i,
+  /multimodal/i,
+  /-omni/i,
+]
+
+const AUDIO_NAME_PATTERNS = [
+  /audio/i,
+  /whisper/i,
+  /tts/i,
+  /voice/i,
+  /-realtime/i,
+]
+
+const VIDEO_NAME_PATTERNS = [/video/i, /sora/i, /veo/i, /kling/i, /pika/i]
+
+const CODE_NAME_PATTERNS = [/code/i, /-coder/i]
+
+const WEB_SEARCH_PATTERNS = [/web[-_ ]?search/i, /-online/i, /perplexity/i]
+
+const KNOWLEDGE_CUTOFFS = [
+  '2023-04',
+  '2023-10',
+  '2023-12',
+  '2024-04',
+  '2024-06',
+  '2024-08',
+  '2024-10',
+  '2024-12',
+  '2025-02',
+  '2025-04',
+  '2025-08',
+]
+
+const PARAM_BUCKETS = [
+  '1.5B',
+  '3B',
+  '7B',
+  '8B',
+  '14B',
+  '32B',
+  '70B',
+  '120B',
+  '405B',
+]
+
+const CONTEXT_BUCKETS = [
+  8_192, 16_384, 32_768, 65_536, 128_000, 200_000, 1_000_000,
+]
+const MAX_OUTPUT_BUCKETS = [2_048, 4_096, 8_192, 16_384, 32_768, 65_536]
+
+const TAG_TO_CAPABILITY: Record<string, ModelCapability> = {
+  vision: 'vision',
+  multimodal: 'vision',
+  reasoning: 'reasoning',
+  thinking: 'reasoning',
+  tools: 'tools',
+  function: 'function_calling',
+  'function-calling': 'function_calling',
+  streaming: 'streaming',
+  json: 'json_mode',
+  structured: 'structured_output',
+  search: 'web_search',
+  code: 'code_interpreter',
+  embedding: 'embeddings',
+}
+
+const TAG_TO_MODALITY: Record<string, Modality> = {
+  text: 'text',
+  image: 'image',
+  audio: 'audio',
+  video: 'video',
+  file: 'file',
+  document: 'file',
+  pdf: 'file',
+}
+
+function pickFromBuckets<T>(buckets: T[], rand: () => number): T {
+  return buckets[Math.floor(rand() * buckets.length)]
+}
+
+function parseModelTags(tagsString?: string): string[] {
+  if (!tagsString) return []
+  return tagsString
+    .split(/[,;|\s]+/)
+    .map((t) => t.trim().toLowerCase())
+    .filter(Boolean)
+}
+
+function nameMatches(name: string, patterns: RegExp[]): boolean {
+  return patterns.some((re) => re.test(name))
+}
+
+function inferInputModalities(
+  model: PricingModel,
+  tags: string[],
+  endpoints: string[],
+  name: string
+): Modality[] {
+  const set = new Set<Modality>()
+
+  if (
+    endpoints.length === 0 ||
+    endpoints.some((e) => TEXT_INPUT_ENDPOINTS.has(e))
+  ) {
+    set.add('text')
+  }
+
+  if (model.image_ratio != null || nameMatches(name, VISION_NAME_PATTERNS)) {
+    set.add('image')
+  }
+  if (model.audio_ratio != null || nameMatches(name, AUDIO_NAME_PATTERNS)) {
+    set.add('audio')
+  }
+  if (nameMatches(name, VIDEO_NAME_PATTERNS)) {
+    set.add('video')
+  }
+
+  for (const tag of tags) {
+    const m = TAG_TO_MODALITY[tag]
+    if (m) set.add(m)
+  }
+
+  if (set.size === 0) set.add('text')
+  return ordered(set)
+}
+
+function inferOutputModalities(
+  model: PricingModel,
+  endpoints: string[],
+  name: string
+): Modality[] {
+  const set = new Set<Modality>()
+
+  if (endpoints.some((e) => IMAGE_OUTPUT_ENDPOINTS.has(e))) set.add('image')
+  if (endpoints.some((e) => VIDEO_OUTPUT_ENDPOINTS.has(e))) set.add('video')
+  if (endpoints.some((e) => EMBEDDING_ENDPOINTS.has(e))) set.add('text')
+
+  if (
+    model.audio_completion_ratio != null ||
+    /tts|voice|audio-out/i.test(name)
+  ) {
+    set.add('audio')
+  }
+
+  if (set.size === 0) set.add('text')
+  return ordered(set)
+}
+
+function inferCapabilities(
+  model: PricingModel,
+  tags: string[],
+  endpoints: string[],
+  name: string,
+  outputs: Modality[],
+  inputs: Modality[]
+): ModelCapability[] {
+  const set = new Set<ModelCapability>()
+
+  if (outputs.includes('text') && !endpoints.includes('image-generation')) {
+    set.add('streaming')
+    set.add('system_prompt')
+  }
+  if (
+    !endpoints.includes('image-generation') &&
+    !endpoints.includes('embeddings') &&
+    !endpoints.includes('jina-rerank')
+  ) {
+    set.add('function_calling')
+    set.add('tools')
+    set.add('json_mode')
+    set.add('structured_output')
+  }
+  if (inputs.includes('image')) set.add('vision')
+  if (model.cache_ratio != null) set.add('caching')
+  if (endpoints.some((e) => EMBEDDING_ENDPOINTS.has(e))) set.add('embeddings')
+  if (nameMatches(name, REASONING_NAME_PATTERNS)) set.add('reasoning')
+  if (nameMatches(name, CODE_NAME_PATTERNS)) set.add('code_interpreter')
+  if (nameMatches(name, WEB_SEARCH_PATTERNS)) set.add('web_search')
+
+  for (const tag of tags) {
+    const cap = TAG_TO_CAPABILITY[tag]
+    if (cap) set.add(cap)
+  }
+
+  return Array.from(set)
+}
+
+function ordered(modalities: Set<Modality>): Modality[] {
+  const order: Modality[] = ['text', 'image', 'audio', 'video', 'file']
+  return order.filter((m) => modalities.has(m))
+}
+
+function inferContextAndOutputs(
+  name: string,
+  rand: () => number,
+  endpoints: string[]
+): { context: number; maxOutput: number } {
+  if (endpoints.includes('embeddings') || endpoints.includes('jina-rerank')) {
+    return { context: 8_192, maxOutput: 0 }
+  }
+  if (
+    endpoints.includes('image-generation') ||
+    endpoints.includes('openai-video')
+  ) {
+    return { context: 4_096, maxOutput: 0 }
+  }
+
+  const lower = name.toLowerCase()
+  if (lower.includes('1m') || lower.includes('-long')) {
+    return { context: 1_000_000, maxOutput: 65_536 }
+  }
+  if (
+    lower.includes('200k') ||
+    lower.includes('claude-3') ||
+    lower.includes('claude-4')
+  ) {
+    return { context: 200_000, maxOutput: 16_384 }
+  }
+  if (lower.includes('128k') || /gpt-4o|gpt-4\.1|gpt-5|o1|o3|o4/.test(lower)) {
+    return { context: 128_000, maxOutput: 16_384 }
+  }
+  if (/gemini.*-2|gemini.*pro|gemini.*flash/.test(lower)) {
+    return { context: 1_000_000, maxOutput: 8_192 }
+  }
+  if (/gpt-3\.5|claude-2/.test(lower)) {
+    return { context: 16_384, maxOutput: 4_096 }
+  }
+
+  const context = pickFromBuckets(CONTEXT_BUCKETS, rand)
+  const maxOutput = Math.min(context, pickFromBuckets(MAX_OUTPUT_BUCKETS, rand))
+  return { context, maxOutput }
+}
+
+function inferReleaseAndCutoff(rand: () => number): {
+  release: string
+  cutoff: string
+} {
+  const cutoff = pickFromBuckets(KNOWLEDGE_CUTOFFS, rand)
+  const [year, month] = cutoff.split('-').map(Number)
+  const offsetMonths = 4 + Math.floor(rand() * 6)
+  const releaseMonth = month + offsetMonths
+  const releaseYear = year + Math.floor((releaseMonth - 1) / 12)
+  const finalMonth = ((releaseMonth - 1) % 12) + 1
+  const release = `${releaseYear}-${String(finalMonth).padStart(2, '0')}-15`
+  return { release, cutoff }
+}
+
+export type ModelMetadata = {
+  context_length: number
+  max_output_tokens: number
+  knowledge_cutoff: string
+  release_date: string
+  parameter_count: string
+  input_modalities: Modality[]
+  output_modalities: Modality[]
+  capabilities: ModelCapability[]
+}
+
+/**
+ * Infer / mock model metadata. Prefers explicit fields on `model.*` and
+ * falls back to inference + a deterministic seed otherwise.
+ */
+export function inferModelMetadata(model: PricingModel): ModelMetadata {
+  const name = model.model_name || ''
+  const rand = seededRandom(hashStringToSeed(name))
+  const tags = parseModelTags(model.tags)
+  const endpoints = model.supported_endpoint_types || []
+
+  const inputs =
+    model.input_modalities ?? inferInputModalities(model, tags, endpoints, name)
+  const outputs =
+    model.output_modalities ?? inferOutputModalities(model, endpoints, name)
+  const capabilities =
+    model.capabilities ??
+    inferCapabilities(model, tags, endpoints, name, outputs, inputs)
+
+  const fallback = inferContextAndOutputs(name, rand, endpoints)
+  const cutoffAndRelease = inferReleaseAndCutoff(rand)
+
+  return {
+    context_length: model.context_length ?? fallback.context,
+    max_output_tokens: model.max_output_tokens ?? fallback.maxOutput,
+    knowledge_cutoff: model.knowledge_cutoff ?? cutoffAndRelease.cutoff,
+    release_date: model.release_date ?? cutoffAndRelease.release,
+    parameter_count:
+      model.parameter_count ?? pickFromBuckets(PARAM_BUCKETS, rand),
+    input_modalities: inputs,
+    output_modalities: outputs,
+    capabilities,
+  }
+}
+
+const TOKEN_FORMAT = new Intl.NumberFormat(undefined, {
+  maximumFractionDigits: 1,
+})
+
+/** Format a token count compactly: 128_000 → "128K", 1_000_000 → "1M". */
+export function formatTokenCount(tokens: number): string {
+  if (!Number.isFinite(tokens) || tokens <= 0) return '—'
+  if (tokens >= 1_000_000) {
+    const value = tokens / 1_000_000
+    return `${TOKEN_FORMAT.format(value)}M`
+  }
+  if (tokens >= 1_000) {
+    const value = tokens / 1_000
+    return `${TOKEN_FORMAT.format(value)}K`
+  }
+  return TOKEN_FORMAT.format(tokens)
+}
+
+/** Format a YYYY-MM (or YYYY-MM-DD) date as `Mon YYYY` for display. */
+export function formatYearMonth(value: string): string {
+  if (!value) return '—'
+  const [yearStr, monthStr] = value.split('-')
+  const year = Number(yearStr)
+  const month = Number(monthStr)
+  if (!Number.isFinite(year) || !Number.isFinite(month)) return value
+  const date = new Date(Date.UTC(year, month - 1, 1))
+  return date.toLocaleString(undefined, { year: 'numeric', month: 'short' })
+}
+
+// ---------------------------------------------------------------------------
+// Provider / vendor / tokenizer / license inference
+// ---------------------------------------------------------------------------
+//
+// These helpers derive vendor-style metadata from the model name. They are
+// purely heuristic and serve only the API-info display until the backend
+// returns explicit fields.
+
+export type ModelVendor =
+  | 'openai'
+  | 'anthropic'
+  | 'google'
+  | 'meta'
+  | 'mistral'
+  | 'qwen'
+  | 'deepseek'
+  | 'xai'
+  | 'cohere'
+  | 'baidu'
+  | 'zhipu'
+  | 'moonshot'
+  | 'minimax'
+  | 'tencent'
+  | 'bytedance'
+  | 'midjourney'
+  | 'stability'
+  | 'unknown'
+
+export type ApiInfo = {
+  vendor: ModelVendor
+  vendor_label: string
+  tokenizer: string
+  tokenizer_note?: string
+  license: string
+  license_kind: 'proprietary' | 'open' | 'open-weight' | 'unknown'
+  data_retention_days: number
+  training_opt_out: boolean
+  homepage?: string
+}
+
+const VENDOR_LABELS: Record<ModelVendor, string> = {
+  openai: 'OpenAI',
+  anthropic: 'Anthropic',
+  google: 'Google',
+  meta: 'Meta',
+  mistral: 'Mistral AI',
+  qwen: 'Alibaba (Qwen)',
+  deepseek: 'DeepSeek',
+  xai: 'xAI',
+  cohere: 'Cohere',
+  baidu: 'Baidu',
+  zhipu: 'Zhipu AI',
+  moonshot: 'Moonshot AI',
+  minimax: 'MiniMax',
+  tencent: 'Tencent',
+  bytedance: 'ByteDance',
+  midjourney: 'Midjourney',
+  stability: 'Stability AI',
+  unknown: 'Unknown',
+}
+
+function detectVendor(name: string): ModelVendor {
+  const n = name.toLowerCase()
+  if (/^gpt|^o[1-4]|davinci|babbage|whisper|tts|dall.?e|sora|^omni/.test(n))
+    return 'openai'
+  if (/claude/.test(n)) return 'anthropic'
+  if (/gemini|gemma|imagen|veo|palm/.test(n)) return 'google'
+  if (/llama|^codellama/.test(n)) return 'meta'
+  if (/mistral|mixtral|codestral|magistral|pixtral/.test(n)) return 'mistral'
+  if (/qwen|qwq|qvq/.test(n)) return 'qwen'
+  if (/deepseek/.test(n)) return 'deepseek'
+  if (/grok/.test(n)) return 'xai'
+  if (/command|cohere|aya/.test(n)) return 'cohere'
+  if (/ernie|wenxin/.test(n)) return 'baidu'
+  if (/glm|chatglm|cogview|cogvideo/.test(n)) return 'zhipu'
+  if (/kimi|moonshot/.test(n)) return 'moonshot'
+  if (/abab|minimax|hailuo/.test(n)) return 'minimax'
+  if (/hunyuan/.test(n)) return 'tencent'
+  if (/doubao|seed|jimeng/.test(n)) return 'bytedance'
+  if (/midjourney|niji/.test(n)) return 'midjourney'
+  if (/^sd-|stable[-_]?diffusion|sdxl/.test(n)) return 'stability'
+  return 'unknown'
+}
+
+const TOKENIZER_BY_VENDOR: Partial<Record<ModelVendor, string>> = {
+  openai: 'o200k_base',
+  anthropic: 'Anthropic Claude tokenizer',
+  google: 'SentencePiece (Gemini)',
+  meta: 'Llama 3 tokenizer',
+  mistral: 'Mistral tokenizer (BPE)',
+  qwen: 'Qwen tokenizer (tiktoken-compat)',
+  deepseek: 'DeepSeek tokenizer (BPE)',
+  xai: 'Grok tokenizer (BPE)',
+  cohere: 'Cohere tokenizer',
+  baidu: 'Ernie tokenizer',
+  zhipu: 'GLM tokenizer',
+  moonshot: 'Kimi tokenizer',
+  minimax: 'ABAB tokenizer',
+  tencent: 'Hunyuan tokenizer',
+  bytedance: 'Doubao tokenizer',
+}
+
+function inferTokenizer(
+  model: PricingModel,
+  vendor: ModelVendor
+): {
+  tokenizer: string
+  note?: string
+} {
+  const name = model.model_name.toLowerCase()
+  if (vendor === 'openai') {
+    if (/gpt-3|davinci|babbage|whisper|tts/.test(name)) {
+      return { tokenizer: 'cl100k_base', note: 'Older GPT-3.5 family' }
+    }
+    return { tokenizer: 'o200k_base' }
+  }
+  return { tokenizer: TOKENIZER_BY_VENDOR[vendor] ?? 'BPE (vendor-specific)' }
+}
+
+const LICENSE_BY_VENDOR: Record<
+  ModelVendor,
+  { license: string; kind: ApiInfo['license_kind'] }
+> = {
+  openai: { license: 'Proprietary (commercial)', kind: 'proprietary' },
+  anthropic: { license: 'Proprietary (commercial)', kind: 'proprietary' },
+  google: { license: 'Proprietary (commercial)', kind: 'proprietary' },
+  meta: { license: 'Llama Community License', kind: 'open-weight' },
+  mistral: { license: 'Apache 2.0 / Commercial', kind: 'open-weight' },
+  qwen: { license: 'Tongyi Qianwen License', kind: 'open-weight' },
+  deepseek: { license: 'DeepSeek License', kind: 'open-weight' },
+  xai: { license: 'Proprietary (commercial)', kind: 'proprietary' },
+  cohere: { license: 'Proprietary (commercial)', kind: 'proprietary' },
+  baidu: { license: 'Proprietary (commercial)', kind: 'proprietary' },
+  zhipu: { license: 'GLM-4 License', kind: 'open-weight' },
+  moonshot: { license: 'Proprietary (commercial)', kind: 'proprietary' },
+  minimax: { license: 'Proprietary (commercial)', kind: 'proprietary' },
+  tencent: { license: 'Hunyuan License', kind: 'open-weight' },
+  bytedance: { license: 'Proprietary (commercial)', kind: 'proprietary' },
+  midjourney: { license: 'Proprietary (commercial)', kind: 'proprietary' },
+  stability: { license: 'Stability AI Community License', kind: 'open-weight' },
+  unknown: { license: 'Provider-specific', kind: 'unknown' },
+}
+
+const HOMEPAGE_BY_VENDOR: Partial<Record<ModelVendor, string>> = {
+  openai: 'https://platform.openai.com/docs/models',
+  anthropic: 'https://docs.anthropic.com/claude/docs/models-overview',
+  google: 'https://ai.google.dev/models',
+  meta: 'https://llama.meta.com/',
+  mistral: 'https://docs.mistral.ai/getting-started/models/',
+  qwen: 'https://qwenlm.github.io/',
+  deepseek: 'https://api-docs.deepseek.com/',
+  xai: 'https://x.ai/api',
+  cohere: 'https://docs.cohere.com/docs/models',
+  baidu: 'https://cloud.baidu.com/product/wenxinworkshop',
+  zhipu: 'https://open.bigmodel.cn/dev/api',
+  moonshot: 'https://platform.moonshot.cn/docs',
+  minimax: 'https://platform.minimaxi.com/document/notice',
+  tencent: 'https://cloud.tencent.com/document/product/1729',
+  bytedance: 'https://www.volcengine.com/docs/82379',
+  midjourney: 'https://www.midjourney.com/',
+  stability: 'https://platform.stability.ai/',
+}
+
+/**
+ * Build vendor / tokenizer / license / privacy metadata for the model.
+ * Returns deterministic values keyed off the model name so each render is
+ * stable.
+ */
+export function inferApiInfo(model: PricingModel): ApiInfo {
+  const vendor = detectVendor(model.model_name || '')
+  const tk = inferTokenizer(model, vendor)
+  const license = LICENSE_BY_VENDOR[vendor]
+  const rand = seededRandom(hashStringToSeed(`${model.model_name}:api`))
+  const retention = vendor === 'openai' ? 30 : Math.round(rand() * 90)
+  return {
+    vendor,
+    vendor_label: VENDOR_LABELS[vendor],
+    tokenizer: tk.tokenizer,
+    tokenizer_note: tk.note,
+    license: license.license,
+    license_kind: license.kind,
+    data_retention_days: retention,
+    training_opt_out: true,
+    homepage: HOMEPAGE_BY_VENDOR[vendor],
+  }
+}
diff --git a/web/default/src/features/pricing/lib/seed.ts b/web/default/src/features/pricing/lib/seed.ts
new file mode 100644
index 00000000000..94ec18420c1
--- /dev/null
+++ b/web/default/src/features/pricing/lib/seed.ts
@@ -0,0 +1,45 @@
+// ----------------------------------------------------------------------------
+// Deterministic seeding helpers
+// ----------------------------------------------------------------------------
+//
+// These utilities are used to generate stable, repeatable mock metrics for
+// model details (latency, throughput, uptime, app rankings) until the
+// backend ships real values. Seeding the PRNG from the model name (and
+// optionally the group name) ensures the same model always renders the same
+// numbers, instead of jittering on every render.
+
+/** djb2-inspired string hash → non-negative 31-bit integer. */
+export function hashStringToSeed(input: string): number {
+  let hash = 5381
+  for (let i = 0; i < input.length; i++) {
+    hash = (hash * 33) ^ input.charCodeAt(i)
+  }
+  return Math.abs(hash | 0)
+}
+
+/** Linear-congruential generator producing pseudo-random numbers in [0, 1). */
+export function seededRandom(seed: number): () => number {
+  let state = (seed || 1) >>> 0
+  return () => {
+    state = (state * 1664525 + 1013904223) >>> 0
+    return state / 0x1_0000_0000
+  }
+}
+
+/** Pick a number in [min, max] from a seeded PRNG. */
+export function randomInRange(
+  rand: () => number,
+  min: number,
+  max: number
+): number {
+  return min + rand() * (max - min)
+}
+
+/** Pick an integer in [min, max] (inclusive) from a seeded PRNG. */
+export function randomIntInRange(
+  rand: () => number,
+  min: number,
+  max: number
+): number {
+  return Math.floor(randomInRange(rand, min, max + 1))
+}
diff --git a/web/default/src/features/pricing/types.ts b/web/default/src/features/pricing/types.ts
index ac4fd7b6a6d..79942026fdf 100644
--- a/web/default/src/features/pricing/types.ts
+++ b/web/default/src/features/pricing/types.ts
@@ -37,8 +37,40 @@ export type PricingModel = {
   billing_expr?: string
   /** Pricing version returned by backend, useful for cache busting */
   pricing_version?: string
+  /**
+   * Optional model metadata fields. These are not yet returned by the backend
+   * and are populated client-side from {@link inferModelMetadata}.
+   * When the backend ships these fields, the inference layer becomes a
+   * fallback rather than the source of truth.
+   */
+  context_length?: number
+  max_output_tokens?: number
+  knowledge_cutoff?: string
+  release_date?: string
+  parameter_count?: string
+  input_modalities?: Modality[]
+  output_modalities?: Modality[]
+  capabilities?: ModelCapability[]
 }
 
+/** Input/output modalities supported by a model. */
+export type Modality = 'text' | 'image' | 'audio' | 'video' | 'file'
+
+/** Functional capabilities a model exposes. */
+export type ModelCapability =
+  | 'function_calling'
+  | 'streaming'
+  | 'vision'
+  | 'json_mode'
+  | 'structured_output'
+  | 'reasoning'
+  | 'tools'
+  | 'system_prompt'
+  | 'web_search'
+  | 'code_interpreter'
+  | 'caching'
+  | 'embeddings'
+
 export type PricingData = {
   success: boolean
   message?: string
diff --git a/web/default/src/features/profile/api.ts b/web/default/src/features/profile/api.ts
index f477227bbb0..b4f6b3d0094 100644
--- a/web/default/src/features/profile/api.ts
+++ b/web/default/src/features/profile/api.ts
@@ -44,7 +44,9 @@ export async function updateUserSettings(
 /**
  * Update interface language preference
  */
-export async function updateUserLanguage(language: string): Promise<ApiResponse> {
+export async function updateUserLanguage(
+  language: string
+): Promise<ApiResponse> {
   const res = await api.put('/api/user/self', { language })
   return res.data
 }
diff --git a/web/default/src/features/profile/components/checkin-calendar-card.tsx b/web/default/src/features/profile/components/checkin-calendar-card.tsx
index d26ae31d3c5..aa04189ed07 100644
--- a/web/default/src/features/profile/components/checkin-calendar-card.tsx
+++ b/web/default/src/features/profile/components/checkin-calendar-card.tsx
@@ -226,7 +226,7 @@ export function CheckinCalendarCard({
   }
 
   return (
-    <TooltipProvider delayDuration={100}>
+    <TooltipProvider delay={100}>
       <Dialog
         open={turnstileModalVisible}
         onOpenChange={(open) => {
@@ -425,7 +425,7 @@ export function CheckinCalendarCard({
                     if (isCheckedIn && dayObj.isCurrentMonth) {
                       return (
                         <Tooltip key={idx}>
-                          <TooltipTrigger asChild>{dayButton}</TooltipTrigger>
+                          <TooltipTrigger render={dayButton}></TooltipTrigger>
                           <TooltipContent>
                             <div className='text-xs'>
                               <div className='font-medium'>
diff --git a/web/default/src/features/profile/components/language-preferences-card.tsx b/web/default/src/features/profile/components/language-preferences-card.tsx
index c0d307f27e4..48e7b68353f 100644
--- a/web/default/src/features/profile/components/language-preferences-card.tsx
+++ b/web/default/src/features/profile/components/language-preferences-card.tsx
@@ -54,7 +54,8 @@ export function LanguagePreferencesCard(props: LanguagePreferencesCardProps) {
     setCurrentLanguage(savedLanguage)
   }, [savedLanguage])
 
-  const handleLanguageChange = async (language: string) => {
+  const handleLanguageChange = async (language: string | null) => {
+    if (!language) return
     const nextLanguage = normalizeLanguage(language)
     if (nextLanguage === currentLanguage) return
 
@@ -100,37 +101,37 @@ export function LanguagePreferencesCard(props: LanguagePreferencesCardProps) {
       description={t('Set the language used across the interface')}
       icon={<Languages className='h-4 w-4' />}
     >
-        <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4'>
-          <div className='space-y-1'>
-            <div className='text-sm font-medium'>{t('Interface Language')}</div>
-            <p className='text-muted-foreground line-clamp-2 text-xs sm:text-sm'>
-              {t(
-                'Language preferences sync across your signed-in devices and affect API error messages.'
-              )}
-            </p>
-          </div>
-          <div className='flex items-center gap-2 sm:min-w-48'>
-            <Select
-              value={currentLanguage}
-              onValueChange={handleLanguageChange}
-              disabled={saving}
-            >
-              <SelectTrigger className='w-full sm:w-48'>
-                <SelectValue placeholder={t('Select language')} />
-              </SelectTrigger>
-              <SelectContent>
-                {LANGUAGE_OPTIONS.map((language) => (
-                  <SelectItem key={language.value} value={language.value}>
-                    {language.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            {saving && (
-              <Loader2 className='text-muted-foreground size-4 animate-spin' />
+      <div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4'>
+        <div className='space-y-1'>
+          <div className='text-sm font-medium'>{t('Interface Language')}</div>
+          <p className='text-muted-foreground line-clamp-2 text-xs sm:text-sm'>
+            {t(
+              'Language preferences sync across your signed-in devices and affect API error messages.'
             )}
-          </div>
+          </p>
         </div>
+        <div className='flex items-center gap-2 sm:min-w-48'>
+          <Select
+            value={currentLanguage}
+            onValueChange={handleLanguageChange}
+            disabled={saving}
+          >
+            <SelectTrigger className='w-full sm:w-48'>
+              <SelectValue placeholder={t('Select language')} />
+            </SelectTrigger>
+            <SelectContent>
+              {LANGUAGE_OPTIONS.map((language) => (
+                <SelectItem key={language.value} value={language.value}>
+                  {language.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {saving && (
+            <Loader2 className='text-muted-foreground size-4 animate-spin' />
+          )}
+        </div>
+      </div>
     </TitledCard>
   )
 }
diff --git a/web/default/src/features/profile/components/passkey-card.tsx b/web/default/src/features/profile/components/passkey-card.tsx
index 8d142c23730..d52434fbd3c 100644
--- a/web/default/src/features/profile/components/passkey-card.tsx
+++ b/web/default/src/features/profile/components/passkey-card.tsx
@@ -204,43 +204,43 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
           <div className='space-y-6'>
             <div className='flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between xl:flex-col 2xl:flex-row'>
               <div className='flex items-start gap-4'>
-              <div className='bg-muted rounded-md p-2'>
-                <KeyRound className='h-5 w-5' />
-              </div>
-              <div className='space-y-1'>
-                <div className='flex flex-wrap items-center gap-2'>
-                  <p className='font-medium'>{t('Passkey Authentication')}</p>
-                  <StatusBadge
-                    label={enabled ? t('Enabled') : t('Disabled')}
-                    variant={enabled ? 'success' : 'neutral'}
-                    showDot
-                    copyable={false}
-                  />
-                  {status?.backup_eligible !== undefined && (
+                <div className='bg-muted rounded-md p-2'>
+                  <KeyRound className='h-5 w-5' />
+                </div>
+                <div className='space-y-1'>
+                  <div className='flex flex-wrap items-center gap-2'>
+                    <p className='font-medium'>{t('Passkey Authentication')}</p>
                     <StatusBadge
-                      label={
-                        status.backup_eligible
-                          ? status.backup_state
-                            ? t('Backed up')
-                            : t('Not backed up')
-                          : t('No backup')
-                      }
-                      variant={
-                        status.backup_eligible
-                          ? status.backup_state
-                            ? 'success'
-                            : 'warning'
-                          : 'neutral'
-                      }
+                      label={enabled ? t('Enabled') : t('Disabled')}
+                      variant={enabled ? 'success' : 'neutral'}
                       showDot
                       copyable={false}
                     />
-                  )}
+                    {status?.backup_eligible !== undefined && (
+                      <StatusBadge
+                        label={
+                          status.backup_eligible
+                            ? status.backup_state
+                              ? t('Backed up')
+                              : t('Not backed up')
+                            : t('No backup')
+                        }
+                        variant={
+                          status.backup_eligible
+                            ? status.backup_state
+                              ? 'success'
+                              : 'warning'
+                            : 'neutral'
+                        }
+                        showDot
+                        copyable={false}
+                      />
+                    )}
+                  </div>
+                  <p className='text-muted-foreground text-sm'>
+                    {t('Last used:')} {formattedLastUsed}
+                  </p>
                 </div>
-                <p className='text-muted-foreground text-sm'>
-                  {t('Last used:')} {formattedLastUsed}
-                </p>
-              </div>
               </div>
 
               {!enabled && (
@@ -260,19 +260,21 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
             {enabled && (
               <div className='flex flex-col gap-3 border-t pt-6 sm:flex-row xl:flex-col 2xl:flex-row'>
                 <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
-                  <AlertDialogTrigger asChild>
-                    <Button
-                      variant='destructive'
-                      className='flex-1'
-                      disabled={removing}
-                    >
-                      {removing ? (
-                        <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                      ) : (
-                        <AlertTriangle className='mr-2 h-4 w-4' />
-                      )}
-                      {t('Remove Passkey')}
-                    </Button>
+                  <AlertDialogTrigger
+                    render={
+                      <Button
+                        variant='destructive'
+                        className='flex-1'
+                        disabled={removing}
+                      />
+                    }
+                  >
+                    {removing ? (
+                      <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+                    ) : (
+                      <AlertTriangle className='mr-2 h-4 w-4' />
+                    )}
+                    {t('Remove Passkey')}
                   </AlertDialogTrigger>
                   <AlertDialogContent>
                     <AlertDialogHeader>
diff --git a/web/default/src/features/profile/components/profile-security-card.tsx b/web/default/src/features/profile/components/profile-security-card.tsx
index ab5525cb450..222047d9998 100644
--- a/web/default/src/features/profile/components/profile-security-card.tsx
+++ b/web/default/src/features/profile/components/profile-security-card.tsx
@@ -1,11 +1,7 @@
 import { Shield, Key, Trash2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useDialogs } from '@/hooks/use-dialog'
-import {
-  Card,
-  CardContent,
-  CardHeader,
-} from '@/components/ui/card'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { TitledCard } from '@/components/ui/titled-card'
 import type { UserProfile } from '../types'
@@ -80,36 +76,36 @@ export function ProfileSecurityCard({
         description={t('Manage your security settings and account access')}
         icon={<Shield className='h-4 w-4' />}
       >
-          <div className='grid grid-cols-1 gap-2.5 sm:gap-3 md:grid-cols-3'>
-            {securityActions.map((item) => (
-              <button
-                key={item.title}
-                type='button'
-                onClick={item.action}
-                className={`hover:bg-muted/50 flex items-center gap-3 rounded-lg border p-3 text-left transition-colors md:flex-col md:gap-2 md:p-4 md:text-center ${
+        <div className='grid grid-cols-1 gap-2.5 sm:gap-3 md:grid-cols-3'>
+          {securityActions.map((item) => (
+            <button
+              key={item.title}
+              type='button'
+              onClick={item.action}
+              className={`hover:bg-muted/50 flex items-center gap-3 rounded-lg border p-3 text-left transition-colors md:flex-col md:gap-2 md:p-4 md:text-center ${
+                item.variant === 'destructive'
+                  ? 'border-destructive/30 hover:border-destructive/50 hover:bg-destructive/5'
+                  : ''
+              }`}
+            >
+              <div
+                className={`rounded-md p-2 ${
                   item.variant === 'destructive'
-                    ? 'border-destructive/30 hover:border-destructive/50 hover:bg-destructive/5'
-                    : ''
+                    ? 'bg-destructive/10 text-destructive'
+                    : 'bg-muted'
                 }`}
               >
-                <div
-                  className={`rounded-md p-2 ${
-                    item.variant === 'destructive'
-                      ? 'bg-destructive/10 text-destructive'
-                      : 'bg-muted'
-                  }`}
-                >
-                  <item.icon className='h-5 w-5' />
-                </div>
-                <div className='min-w-0 md:contents'>
-                  <p className='text-sm font-medium'>{item.title}</p>
-                  <p className='text-muted-foreground line-clamp-1 text-xs md:line-clamp-none'>
-                    {item.description}
-                  </p>
-                </div>
-              </button>
-            ))}
-          </div>
+                <item.icon className='h-5 w-5' />
+              </div>
+              <div className='min-w-0 md:contents'>
+                <p className='text-sm font-medium'>{item.title}</p>
+                <p className='text-muted-foreground line-clamp-1 text-xs md:line-clamp-none'>
+                  {item.description}
+                </p>
+              </div>
+            </button>
+          ))}
+        </div>
       </TitledCard>
 
       {/* Dialogs */}
diff --git a/web/default/src/features/profile/components/profile-settings-card.tsx b/web/default/src/features/profile/components/profile-settings-card.tsx
index af8f490e0a6..ed760a158d8 100644
--- a/web/default/src/features/profile/components/profile-settings-card.tsx
+++ b/web/default/src/features/profile/components/profile-settings-card.tsx
@@ -1,11 +1,7 @@
 import { useState } from 'react'
 import { Link2, Settings } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import {
-  Card,
-  CardContent,
-  CardHeader,
-} from '@/components/ui/card'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { TitledCard } from '@/components/ui/titled-card'
@@ -54,36 +50,36 @@ export function ProfileSettingsCard({
       description={t('Configure your account preferences and integrations')}
       icon={<Settings className='h-4 w-4' />}
     >
-        <Tabs value={activeTab} onValueChange={setActiveTab}>
-          <TabsList className='grid h-auto w-full grid-cols-2 gap-1 rounded-xl p-1'>
-            <TabsTrigger
-              value='bindings'
-              className='h-auto gap-2 rounded-lg px-3 py-2'
-            >
-              <Link2 className='h-4 w-4' />
-              <span className='hidden sm:inline'>{t('Account Bindings')}</span>
-              <span className='sm:hidden'>{t('Bindings')}</span>
-            </TabsTrigger>
-            <TabsTrigger
-              value='settings'
-              className='h-auto gap-2 rounded-lg px-3 py-2'
-            >
-              <Settings className='h-4 w-4' />
-              <span className='hidden sm:inline'>
-                {t('Settings & Preferences')}
-              </span>
-              <span className='sm:hidden'>{t('Settings')}</span>
-            </TabsTrigger>
-          </TabsList>
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList className='grid h-auto w-full grid-cols-2 gap-1 rounded-xl p-1'>
+          <TabsTrigger
+            value='bindings'
+            className='h-auto gap-2 rounded-lg px-3 py-2'
+          >
+            <Link2 className='h-4 w-4' />
+            <span className='hidden sm:inline'>{t('Account Bindings')}</span>
+            <span className='sm:hidden'>{t('Bindings')}</span>
+          </TabsTrigger>
+          <TabsTrigger
+            value='settings'
+            className='h-auto gap-2 rounded-lg px-3 py-2'
+          >
+            <Settings className='h-4 w-4' />
+            <span className='hidden sm:inline'>
+              {t('Settings & Preferences')}
+            </span>
+            <span className='sm:hidden'>{t('Settings')}</span>
+          </TabsTrigger>
+        </TabsList>
 
-          <TabsContent value='bindings' className='mt-4 sm:mt-6'>
-            <AccountBindingsTab profile={profile} onUpdate={onProfileUpdate} />
-          </TabsContent>
+        <TabsContent value='bindings' className='mt-4 sm:mt-6'>
+          <AccountBindingsTab profile={profile} onUpdate={onProfileUpdate} />
+        </TabsContent>
 
-          <TabsContent value='settings' className='mt-4 sm:mt-6'>
-            <NotificationTab profile={profile} onUpdate={onProfileUpdate} />
-          </TabsContent>
-        </Tabs>
+        <TabsContent value='settings' className='mt-4 sm:mt-6'>
+          <NotificationTab profile={profile} onUpdate={onProfileUpdate} />
+        </TabsContent>
+      </Tabs>
     </TitledCard>
   )
 }
diff --git a/web/default/src/features/profile/index.tsx b/web/default/src/features/profile/index.tsx
index 903a23985c4..14b6a6e1fc4 100644
--- a/web/default/src/features/profile/index.tsx
+++ b/web/default/src/features/profile/index.tsx
@@ -1,6 +1,6 @@
 import { useAuthStore } from '@/stores/auth-store'
 import { useStatus } from '@/hooks/use-status'
-import { AppHeader, Main } from '@/components/layout'
+import { Main } from '@/components/layout'
 import {
   CardStaggerContainer,
   CardStaggerItem,
@@ -28,47 +28,44 @@ export function Profile() {
   const canConfigureSidebar = permissions?.sidebar_settings !== false
 
   return (
-    <>
-      <AppHeader />
-      <Main>
-        <div className='min-h-0 flex-1 overflow-auto px-3 py-3 sm:px-4 sm:py-6'>
-          <CardStaggerContainer className='mx-auto flex w-full max-w-7xl flex-col gap-4 sm:gap-6'>
-            <CardStaggerItem>
-              <ProfileHeader profile={profile} loading={loading} />
-            </CardStaggerItem>
+    <Main>
+      <div className='min-h-0 flex-1 overflow-auto px-3 py-3 sm:px-4 sm:py-6'>
+        <CardStaggerContainer className='mx-auto flex w-full max-w-7xl flex-col gap-4 sm:gap-6'>
+          <CardStaggerItem>
+            <ProfileHeader profile={profile} loading={loading} />
+          </CardStaggerItem>
 
-            <CardStaggerItem>
-              <div className='grid gap-4 sm:gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(360px,0.46fr)] xl:items-start'>
-                <div className='space-y-4 sm:space-y-6'>
-                  <ProfileSettingsCard
-                    profile={profile}
-                    loading={loading}
-                    onProfileUpdate={refreshProfile}
-                  />
-                  <LanguagePreferencesCard
-                    profile={profile}
-                    onProfileUpdate={refreshProfile}
-                  />
-                  <ProfileSecurityCard profile={profile} loading={loading} />
-                </div>
+          <CardStaggerItem>
+            <div className='grid gap-4 sm:gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(360px,0.46fr)] xl:items-start'>
+              <div className='space-y-4 sm:space-y-6'>
+                <ProfileSettingsCard
+                  profile={profile}
+                  loading={loading}
+                  onProfileUpdate={refreshProfile}
+                />
+                <LanguagePreferencesCard
+                  profile={profile}
+                  onProfileUpdate={refreshProfile}
+                />
+                <ProfileSecurityCard profile={profile} loading={loading} />
+              </div>
 
-                <div className='space-y-4 sm:space-y-6 xl:sticky xl:top-6'>
-                  {checkinEnabled && (
-                    <CheckinCalendarCard
-                      checkinEnabled={checkinEnabled}
-                      turnstileEnabled={turnstileEnabled}
-                      turnstileSiteKey={turnstileSiteKey}
-                    />
-                  )}
-                  {canConfigureSidebar && <SidebarModulesCard />}
-                  <PasskeyCard loading={loading} />
-                  <TwoFACard loading={loading} />
-                </div>
+              <div className='space-y-4 sm:space-y-6 xl:sticky xl:top-6'>
+                {checkinEnabled && (
+                  <CheckinCalendarCard
+                    checkinEnabled={checkinEnabled}
+                    turnstileEnabled={turnstileEnabled}
+                    turnstileSiteKey={turnstileSiteKey}
+                  />
+                )}
+                {canConfigureSidebar && <SidebarModulesCard />}
+                <PasskeyCard loading={loading} />
+                <TwoFACard loading={loading} />
               </div>
-            </CardStaggerItem>
-          </CardStaggerContainer>
-        </div>
-      </Main>
-    </>
+            </div>
+          </CardStaggerItem>
+        </CardStaggerContainer>
+      </div>
+    </Main>
   )
 }
diff --git a/web/default/src/features/rankings/components/apps-section.tsx b/web/default/src/features/rankings/components/apps-section.tsx
new file mode 100644
index 00000000000..1624b67d07d
--- /dev/null
+++ b/web/default/src/features/rankings/components/apps-section.tsx
@@ -0,0 +1,97 @@
+import { ExternalLink, Rocket } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Badge } from '@/components/ui/badge'
+import { formatTokens } from '../lib/format'
+import type { AppListing } from '../types'
+import { GrowthText } from './growth-text'
+
+type AppsSectionProps = {
+  rows: AppListing[]
+}
+
+/**
+ * "Top Apps" card — clean two-column listing of the apps consuming the
+ * most tokens through new-api in the active period. Apps don't get a
+ * dedicated chart (each app has too much variance to plot meaningfully);
+ * instead we keep the focus on the leaderboard itself.
+ */
+export function AppsSection(props: AppsSectionProps) {
+  const { t } = useTranslation()
+
+  const half = Math.ceil(props.rows.length / 2)
+  const left = props.rows.slice(0, half)
+  const right = props.rows.slice(half)
+
+  return (
+    <section className='bg-card overflow-hidden rounded-lg border'>
+      <header className='px-5 py-4'>
+        <h2 className='text-foreground inline-flex items-center gap-2 text-base font-semibold'>
+          <Rocket className='text-primary size-4' />
+          {t('Top Apps')}
+        </h2>
+        <p className='text-muted-foreground mt-1 text-sm'>
+          {t('Apps using the most tokens through new-api')}
+        </p>
+      </header>
+      {props.rows.length === 0 ? (
+        <div className='text-muted-foreground/80 border-t px-5 py-8 text-center text-sm'>
+          {t('No apps match the selected filters')}
+        </div>
+      ) : (
+        <div className='grid grid-cols-1 gap-x-8 border-t px-5 pt-3 pb-4 md:grid-cols-2'>
+          <AppList rows={left} />
+          {right.length > 0 && <AppList rows={right} />}
+        </div>
+      )}
+    </section>
+  )
+}
+
+function AppList(props: { rows: AppListing[] }) {
+  return (
+    <ul>
+      {props.rows.map((row) => (
+        <li key={row.name} className='flex items-center gap-3 py-2.5'>
+          <span className='text-muted-foreground/80 w-6 shrink-0 text-right font-mono text-xs tabular-nums'>
+            {row.rank}.
+          </span>
+          <span className='bg-muted text-muted-foreground inline-flex size-9 shrink-0 items-center justify-center rounded-md text-sm font-bold uppercase'>
+            {row.initial}
+          </span>
+          <div className='min-w-0 flex-1'>
+            <div className='flex items-center gap-2 text-sm font-semibold'>
+              {row.url ? (
+                <a
+                  href={row.url}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  className='text-foreground hover:text-primary inline-flex items-center gap-1 truncate transition-colors'
+                >
+                  <span className='truncate'>{row.name}</span>
+                  <ExternalLink className='text-muted-foreground/60 size-3 shrink-0' />
+                </a>
+              ) : (
+                <span className='text-foreground truncate'>{row.name}</span>
+              )}
+              <Badge
+                variant='outline'
+                className='h-4 shrink-0 rounded-sm px-1 text-[10px] font-normal'
+              >
+                {row.category}
+              </Badge>
+            </div>
+            <p className='text-muted-foreground/80 truncate text-xs'>
+              {row.description}
+            </p>
+          </div>
+          <div className='shrink-0 text-right'>
+            <div className='text-foreground font-mono text-sm font-semibold tabular-nums'>
+              {formatTokens(row.total_tokens)}
+            </div>
+            <GrowthText value={row.growth_pct} className='text-[11px]' />
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}
diff --git a/web/default/src/features/rankings/components/category-section.tsx b/web/default/src/features/rankings/components/category-section.tsx
new file mode 100644
index 00000000000..c3f29d3ca0a
--- /dev/null
+++ b/web/default/src/features/rankings/components/category-section.tsx
@@ -0,0 +1,205 @@
+import { useMemo } from 'react'
+import { VChart } from '@visactor/react-vchart'
+import { useTranslation } from 'react-i18next'
+import { useChartTheme } from '@/lib/use-chart-theme'
+import { VCHART_OPTION } from '@/lib/vchart'
+import { formatTokens } from '../lib/format'
+import type { CategorySection as CategorySectionData } from '../types'
+import { ModelLeaderboard } from './model-leaderboard'
+
+const TOOLTIP_MAX_ROWS = 8
+const MAX_LEADERBOARD_ROWS = 8
+
+type CategorySectionProps = {
+  section: CategorySectionData
+}
+
+/**
+ * Per-category ranking unit: a compact stacked-bar chart of token usage
+ * over time paired with a 2-column leaderboard of the top models in that
+ * category. Renders as a self-contained card; the rankings page stacks
+ * one of these per category for quick browsing.
+ */
+export function CategorySection(props: CategorySectionProps) {
+  const { t } = useTranslation()
+  const { resolvedTheme, themeReady } = useChartTheme()
+
+  const orderedPoints = useMemo(() => {
+    const order = new Map(
+      props.section.models_history.models.map(
+        (m, idx) => [m.name, idx] as const
+      )
+    )
+    return [...props.section.models_history.points].sort((a, b) => {
+      const tsCmp = a.ts.localeCompare(b.ts)
+      if (tsCmp !== 0) return tsCmp
+      return (order.get(a.model) ?? 999) - (order.get(b.model) ?? 999)
+    })
+  }, [props.section.models_history])
+
+  const spec = useMemo(() => {
+    if (orderedPoints.length === 0) return null
+    return {
+      type: 'bar' as const,
+      data: [{ id: 'category-history', values: orderedPoints }],
+      xField: 'label',
+      yField: 'tokens',
+      seriesField: 'model',
+      stack: true,
+      bar: { style: { cornerRadius: 1 } },
+      legends: { visible: false },
+      axes: [
+        {
+          orient: 'bottom',
+          label: {
+            style: { fill: 'currentColor', fontSize: 9 },
+            autoHide: true,
+            autoLimit: true,
+          },
+          tick: { visible: false },
+        },
+        {
+          orient: 'left',
+          label: {
+            formatMethod: (val: number | string) => formatTokens(Number(val)),
+            style: { fill: 'currentColor', fontSize: 9 },
+          },
+          grid: { visible: true, style: { lineDash: [3, 3] } },
+        },
+      ],
+      tooltip: {
+        mark: {
+          content: [
+            {
+              key: (datum: Record<string, unknown>) =>
+                String(datum?.model ?? ''),
+              value: (datum: Record<string, unknown>) =>
+                formatTokens(Number(datum?.tokens) || 0),
+            },
+          ],
+        },
+        dimension: {
+          title: {
+            value: (datum: Record<string, unknown>) =>
+              String(datum?.label ?? ''),
+          },
+          content: [
+            {
+              key: (datum: Record<string, unknown>) =>
+                String(datum?.model ?? ''),
+              value: (datum: Record<string, unknown>) =>
+                Number(datum?.tokens) || 0,
+            },
+          ],
+          updateContent: (
+            array: Array<{ key: string; value: string | number }>
+          ) => {
+            array.sort((a, b) => Number(b.value) - Number(a.value))
+            const visible = array.slice(0, TOOLTIP_MAX_ROWS)
+            return visible.map((item) => ({
+              key: item.key,
+              value: formatTokens(Number(item.value) || 0),
+            }))
+          },
+        },
+      },
+      animationAppear: { duration: 400 },
+    }
+  }, [orderedPoints])
+
+  return (
+    <article
+      id={`category-${props.section.category}`}
+      className='bg-card scroll-mt-20 overflow-hidden rounded-lg border'
+    >
+      <header className='flex items-start justify-between gap-4 px-5 py-3.5'>
+        <div className='min-w-0 flex-1'>
+          <h3 className='text-foreground text-base font-semibold'>
+            {t(props.section.label)}
+          </h3>
+          <p className='text-muted-foreground/80 mt-0.5 truncate text-xs'>
+            {t(props.section.description)}
+          </p>
+        </div>
+        <div className='shrink-0 text-right'>
+          <div className='text-foreground font-mono text-base font-semibold tabular-nums'>
+            {formatTokens(props.section.total_tokens)}
+          </div>
+          <div className='text-muted-foreground/80 text-[10px] tracking-widest uppercase'>
+            {t('tokens')}
+          </div>
+        </div>
+      </header>
+
+      <div className='px-5 pb-4'>
+        <div className='h-44 sm:h-48'>
+          {themeReady && spec ? (
+            <VChart
+              key={`category-history-${props.section.category}-${resolvedTheme}`}
+              spec={{
+                ...spec,
+                theme: resolvedTheme === 'dark' ? 'dark' : 'light',
+                background: 'transparent',
+              }}
+              option={VCHART_OPTION}
+            />
+          ) : (
+            <div className='text-muted-foreground/80 flex h-full items-center justify-center text-xs'>
+              {t('No history data available')}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {props.section.models.length === 0 ? (
+        <div className='text-muted-foreground/80 border-t px-5 py-6 text-center text-sm'>
+          {t('No models match the selected filters')}
+        </div>
+      ) : (
+        <div className='border-t px-5 pt-2 pb-4'>
+          <ModelLeaderboard
+            rows={props.section.models}
+            limit={MAX_LEADERBOARD_ROWS}
+            variant='compact'
+          />
+        </div>
+      )}
+    </article>
+  )
+}
+
+type CategorySectionsProps = {
+  sections: CategorySectionData[]
+}
+
+/**
+ * Renders the per-category rankings strip (one card per category).
+ * Includes a strip header so users understand the page structure shifts
+ * from the global view to category drill-downs.
+ */
+export function CategorySections(props: CategorySectionsProps) {
+  const { t } = useTranslation()
+
+  if (props.sections.length === 0) return null
+
+  return (
+    <section className='space-y-5'>
+      <header className='space-y-1'>
+        <p className='text-muted-foreground text-[11px] font-medium tracking-widest uppercase'>
+          {t('By category')}
+        </p>
+        <h2 className='text-foreground text-xl font-semibold tracking-tight'>
+          {t('Browse rankings by category')}
+        </h2>
+        <p className='text-muted-foreground/80 max-w-2xl text-sm'>
+          {t('Discover the leading models in each domain')}
+        </p>
+      </header>
+      <div className='grid grid-cols-1 gap-5 lg:grid-cols-2'>
+        {props.sections.map((section) => (
+          <CategorySection key={section.category} section={section} />
+        ))}
+      </div>
+    </section>
+  )
+}
diff --git a/web/default/src/features/rankings/components/entity-links.tsx b/web/default/src/features/rankings/components/entity-links.tsx
new file mode 100644
index 00000000000..6e81c165a31
--- /dev/null
+++ b/web/default/src/features/rankings/components/entity-links.tsx
@@ -0,0 +1,63 @@
+import { Link } from '@tanstack/react-router'
+import { cn } from '@/lib/utils'
+
+type EntityLinkBaseProps = {
+  className?: string
+  children?: React.ReactNode
+}
+
+type ModelLinkProps = EntityLinkBaseProps & {
+  /** model_name as it appears in the pricing API. Used as the route param. */
+  modelName: string
+}
+
+/**
+ * Link wrapping a model name. Navigates to the existing model details
+ * page (`/pricing/{modelName}`). Renders the model name itself by
+ * default; pass `children` to wrap arbitrary content.
+ *
+ * A subtle persistent underline acts as the link affordance (so
+ * clickability is obvious in lists with dozens of entries) and brightens
+ * on hover.
+ */
+export function ModelLink(props: ModelLinkProps) {
+  return (
+    <Link
+      to='/pricing/$modelId'
+      params={{ modelId: props.modelName }}
+      className={cn(
+        'decoration-foreground/30 hover:decoration-foreground underline decoration-1 underline-offset-4 transition-colors',
+        props.className
+      )}
+    >
+      {props.children ?? props.modelName}
+    </Link>
+  )
+}
+
+type VendorLinkProps = EntityLinkBaseProps & {
+  /** Display name of the vendor (e.g. "Google", "OpenAI"). */
+  vendor: string
+}
+
+/**
+ * Link wrapping a vendor name. Navigates to the pricing page filtered by
+ * that vendor (`/pricing?vendor={vendor}`). Renders the vendor name
+ * itself by default. Uses the same subtle persistent underline as
+ * {@link ModelLink}, scaled for the smaller secondary text it usually
+ * wraps.
+ */
+export function VendorLink(props: VendorLinkProps) {
+  return (
+    <Link
+      to='/pricing'
+      search={{ vendor: props.vendor }}
+      className={cn(
+        'hover:text-foreground underline decoration-current/40 decoration-1 underline-offset-2 transition-colors hover:decoration-current',
+        props.className
+      )}
+    >
+      {props.children ?? props.vendor}
+    </Link>
+  )
+}
diff --git a/web/default/src/features/rankings/components/growth-text.tsx b/web/default/src/features/rankings/components/growth-text.tsx
new file mode 100644
index 00000000000..2ff6da63f5f
--- /dev/null
+++ b/web/default/src/features/rankings/components/growth-text.tsx
@@ -0,0 +1,42 @@
+import { cn } from '@/lib/utils'
+
+type GrowthTextProps = {
+  value: number
+  className?: string
+}
+
+/**
+ * Render a period-over-period growth percent as `↑303%`, `↓12.4%`, or
+ * `0%` (when no change). The arrow is encoded in the text so the value
+ * still aligns inside a tabular column.
+ */
+export function GrowthText(props: GrowthTextProps) {
+  const v = props.value
+  if (!Number.isFinite(v) || v === 0) {
+    return (
+      <span
+        className={cn(
+          'text-muted-foreground/80 font-mono tabular-nums',
+          props.className
+        )}
+      >
+        0%
+      </span>
+    )
+  }
+  const isUp = v > 0
+  return (
+    <span
+      className={cn(
+        'font-mono tabular-nums',
+        isUp
+          ? 'text-emerald-600 dark:text-emerald-400'
+          : 'text-rose-600 dark:text-rose-400',
+        props.className
+      )}
+    >
+      {isUp ? '↑' : '↓'}
+      {Math.abs(v).toFixed(Math.abs(v) >= 100 ? 0 : 1)}%
+    </span>
+  )
+}
diff --git a/web/default/src/features/rankings/components/index.ts b/web/default/src/features/rankings/components/index.ts
new file mode 100644
index 00000000000..17d6a263d5e
--- /dev/null
+++ b/web/default/src/features/rankings/components/index.ts
@@ -0,0 +1,9 @@
+export * from './apps-section'
+export * from './category-section'
+export * from './entity-links'
+export * from './growth-text'
+export * from './market-share-section'
+export * from './model-leaderboard'
+export * from './models-section'
+export * from './pulse-section'
+export * from './rankings-hero'
diff --git a/web/default/src/features/rankings/components/market-share-section.tsx b/web/default/src/features/rankings/components/market-share-section.tsx
new file mode 100644
index 00000000000..8a925d1364a
--- /dev/null
+++ b/web/default/src/features/rankings/components/market-share-section.tsx
@@ -0,0 +1,284 @@
+import { useMemo } from 'react'
+import { VChart } from '@visactor/react-vchart'
+import { PieChart } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { useChartTheme } from '@/lib/use-chart-theme'
+import { VCHART_OPTION } from '@/lib/vchart'
+import { formatShare, formatTokens } from '../lib/format'
+import type { RankingPeriod, VendorRanking, VendorShareSeries } from '../types'
+import { VendorLink } from './entity-links'
+
+const PERIOD_DESCRIPTIONS: Record<RankingPeriod, string> = {
+  today: 'Token share by model author across the last 24 hours',
+  week: 'Token share by model author across the past few weeks',
+  month: 'Token share by model author across the past month',
+  year: 'Token share by model author across the past year',
+  all: 'Token share by model author since launch',
+}
+
+/** Stable colour palette for vendors, used in both the area chart and the
+ * legend dots. Falls back to a neutral palette for unknown vendors so that
+ * future additions still render. */
+const VENDOR_COLOURS: Record<string, string> = {
+  OpenAI: '#10a37f',
+  Anthropic: '#d97757',
+  Google: '#4285f4',
+  DeepSeek: '#7c5cff',
+  Alibaba: '#ff9900',
+  xAI: '#1f2937',
+  Meta: '#1877f2',
+  Moonshot: '#ec4899',
+  Zhipu: '#06b6d4',
+  Mistral: '#ff7000',
+  ByteDance: '#3b82f6',
+  Tencent: '#22c55e',
+  MiniMax: '#a855f7',
+  Cohere: '#fb923c',
+  Baidu: '#ef4444',
+  Others: '#94a3b8',
+}
+
+const FALLBACK_PALETTE = [
+  '#0ea5e9',
+  '#22c55e',
+  '#a855f7',
+  '#f97316',
+  '#14b8a6',
+  '#eab308',
+  '#ec4899',
+  '#84cc16',
+  '#6366f1',
+  '#10b981',
+  '#f43f5e',
+  '#0891b2',
+  '#94a3b8',
+]
+
+function buildVendorColourMap(names: string[]): Record<string, string> {
+  const result: Record<string, string> = {}
+  let fallbackIdx = 0
+  for (const name of names) {
+    if (VENDOR_COLOURS[name]) {
+      result[name] = VENDOR_COLOURS[name]
+    } else {
+      result[name] = FALLBACK_PALETTE[fallbackIdx % FALLBACK_PALETTE.length]
+      fallbackIdx += 1
+    }
+  }
+  return result
+}
+
+const MAX_VENDORS_IN_LIST = 12
+
+type MarketShareSectionProps = {
+  history: VendorShareSeries
+  rows: VendorRanking[]
+  period: RankingPeriod
+}
+
+/**
+ * Combined "Market Share" card: a 100%-stacked area chart showing each
+ * vendor's slice of total token volume, paired below with a two-column
+ * vendor list.
+ */
+export function MarketShareSection(props: MarketShareSectionProps) {
+  const { t } = useTranslation()
+  const { resolvedTheme, themeReady } = useChartTheme()
+
+  const colourMap = useMemo(
+    () => buildVendorColourMap(props.history.vendors.map((v) => v.name)),
+    [props.history]
+  )
+
+  const orderedPoints = useMemo(() => {
+    const order = new Map(
+      props.history.vendors.map((v, idx) => [v.name, idx] as const)
+    )
+    return [...props.history.points].sort((a, b) => {
+      const tsCmp = a.ts.localeCompare(b.ts)
+      if (tsCmp !== 0) return tsCmp
+      return (order.get(a.vendor) ?? 999) - (order.get(b.vendor) ?? 999)
+    })
+  }, [props.history])
+
+  const spec = useMemo(() => {
+    if (orderedPoints.length === 0) return null
+    return {
+      type: 'area' as const,
+      data: [{ id: 'vendor-share', values: orderedPoints }],
+      xField: 'label',
+      yField: 'share',
+      seriesField: 'vendor',
+      stack: true,
+      legends: { visible: false },
+      area: {
+        style: { fillOpacity: 0.85, curveType: 'monotone' },
+      },
+      line: { style: { lineWidth: 0, curveType: 'monotone' } },
+      point: { visible: false },
+      color: { specified: colourMap },
+      axes: [
+        {
+          orient: 'bottom',
+          label: {
+            style: { fill: 'currentColor', fontSize: 10 },
+            autoHide: true,
+            autoLimit: true,
+          },
+          tick: { visible: false },
+        },
+        {
+          orient: 'left',
+          min: 0,
+          max: 1,
+          label: {
+            formatMethod: (val: number | string) =>
+              `${Math.round(Number(val) * 100)}%`,
+            style: { fill: 'currentColor', fontSize: 10 },
+          },
+          grid: { visible: true, style: { lineDash: [3, 3] } },
+        },
+      ],
+      tooltip: {
+        mark: {
+          content: [
+            {
+              key: (datum: Record<string, unknown>) =>
+                String(datum?.vendor ?? ''),
+              value: (datum: Record<string, unknown>) =>
+                `${(Number(datum?.share) * 100).toFixed(1)}% · ${formatTokens(Number(datum?.tokens) || 0)}`,
+            },
+          ],
+        },
+        dimension: {
+          title: {
+            value: (datum: Record<string, unknown>) =>
+              String(datum?.label ?? ''),
+          },
+          content: [
+            {
+              key: (datum: Record<string, unknown>) =>
+                String(datum?.vendor ?? ''),
+              value: (datum: Record<string, unknown>) =>
+                Number(datum?.share) || 0,
+            },
+          ],
+          updateContent: (
+            array: Array<{ key: string; value: string | number }>
+          ) => {
+            return array
+              .filter((item) => Number(item.value) > 0.001)
+              .sort((a, b) => Number(b.value) - Number(a.value))
+              .map((item) => ({
+                key: item.key,
+                value: `${(Number(item.value) * 100).toFixed(1)}%`,
+              }))
+          },
+        },
+      },
+      animationAppear: { duration: 500 },
+    }
+  }, [colourMap, orderedPoints])
+
+  const visible = props.rows.slice(0, MAX_VENDORS_IN_LIST)
+  const half = Math.ceil(visible.length / 2)
+  const left = visible.slice(0, half)
+  const right = visible.slice(half)
+
+  return (
+    <section className='bg-card overflow-hidden rounded-lg border'>
+      {/* Chart block ----------------------------------------------------- */}
+      <header className='px-5 py-4'>
+        <h2 className='text-foreground inline-flex items-center gap-2 text-base font-semibold'>
+          <PieChart className='text-primary size-4' />
+          {t('Market Share')}
+        </h2>
+        <p className='text-muted-foreground mt-1 text-sm'>
+          {t(PERIOD_DESCRIPTIONS[props.period])}
+        </p>
+      </header>
+
+      <div className='px-5 pb-5'>
+        <div className='h-60 sm:h-72'>
+          {themeReady && spec ? (
+            <VChart
+              key={`vendor-share-${resolvedTheme}-${props.period}`}
+              spec={{
+                ...spec,
+                theme: resolvedTheme === 'dark' ? 'dark' : 'light',
+                background: 'transparent',
+              }}
+              option={VCHART_OPTION}
+            />
+          ) : (
+            <div className='text-muted-foreground/80 flex h-full items-center justify-center text-xs'>
+              {t('No history data available')}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Vendor list block ----------------------------------------------- */}
+      <div className='border-t'>
+        <header className='px-5 pt-4 pb-2'>
+          <h3 className='text-foreground text-sm font-semibold'>
+            {t('By model author')}
+          </h3>
+          <p className='text-muted-foreground/80 mt-0.5 text-xs'>
+            {t('Vendors ranked by aggregated token volume')}
+          </p>
+        </header>
+        {visible.length === 0 ? (
+          <div className='text-muted-foreground/80 px-5 py-8 text-center text-sm'>
+            {t('No vendor data available')}
+          </div>
+        ) : (
+          <div className='grid grid-cols-1 gap-x-8 px-5 pt-1 pb-4 md:grid-cols-2'>
+            <VendorList rows={left} colourMap={colourMap} />
+            {right.length > 0 && (
+              <VendorList rows={right} colourMap={colourMap} />
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+function VendorList(props: {
+  rows: VendorRanking[]
+  colourMap: Record<string, string>
+}) {
+  return (
+    <ul>
+      {props.rows.map((vendor) => (
+        <li key={vendor.vendor} className='flex items-center gap-3 py-2.5'>
+          <span className='text-muted-foreground/80 w-6 shrink-0 text-right font-mono text-xs tabular-nums'>
+            {vendor.rank}.
+          </span>
+          <span
+            aria-hidden
+            className='size-2.5 shrink-0 rounded-full'
+            style={{
+              backgroundColor: props.colourMap[vendor.vendor] ?? '#94a3b8',
+            }}
+          />
+          <VendorLink
+            vendor={vendor.vendor}
+            className='text-foreground min-w-0 flex-1 truncate text-sm font-medium'
+          >
+            {vendor.vendor}
+          </VendorLink>
+          <div className='shrink-0 text-right'>
+            <div className='text-foreground font-mono text-sm font-semibold tabular-nums'>
+              {formatTokens(vendor.total_tokens)}
+            </div>
+            <div className='text-muted-foreground/80 font-mono text-[11px] tabular-nums'>
+              {formatShare(vendor.share)}
+            </div>
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}
diff --git a/web/default/src/features/rankings/components/model-leaderboard.tsx b/web/default/src/features/rankings/components/model-leaderboard.tsx
new file mode 100644
index 00000000000..0e8a0bc4948
--- /dev/null
+++ b/web/default/src/features/rankings/components/model-leaderboard.tsx
@@ -0,0 +1,119 @@
+import { useTranslation } from 'react-i18next'
+import { getLobeIcon } from '@/lib/lobe-icon'
+import { formatTokens } from '../lib/format'
+import type { ModelRanking } from '../types'
+import { ModelLink, VendorLink } from './entity-links'
+import { GrowthText } from './growth-text'
+
+type ModelLeaderboardProps = {
+  rows: ModelRanking[]
+  /** Density variant. `compact` is used inside per-category sections; the
+   * default fits the larger overall "Top Models" section. */
+  variant?: 'default' | 'compact'
+  /** Optional cap (rows beyond this are dropped). */
+  limit?: number
+}
+
+/**
+ * Two-column model leaderboard list: "rank · model
+ * (with vendor below) · tokens (with growth below)" rendering. Splits
+ * `rows` evenly between the two columns so the visual rhythm matches a
+ * single ranked list rather than two independent lists.
+ *
+ * Both the model name and vendor name are clickable: model jumps to
+ * `/pricing/{modelName}` and vendor jumps to `/pricing?vendor={vendor}`.
+ */
+export function ModelLeaderboard(props: ModelLeaderboardProps) {
+  const limited = props.limit ? props.rows.slice(0, props.limit) : props.rows
+  const half = Math.ceil(limited.length / 2)
+  const left = limited.slice(0, half)
+  const right = limited.slice(half)
+  const variant = props.variant ?? 'default'
+
+  if (limited.length === 0) {
+    return null
+  }
+
+  return (
+    <div className='grid grid-cols-1 gap-x-8 md:grid-cols-2'>
+      <ModelList rows={left} variant={variant} />
+      {right.length > 0 && <ModelList rows={right} variant={variant} />}
+    </div>
+  )
+}
+
+function ModelList(props: {
+  rows: ModelRanking[]
+  variant: 'default' | 'compact'
+}) {
+  const { t } = useTranslation()
+  const compact = props.variant === 'compact'
+  return (
+    <ul>
+      {props.rows.map((row) => (
+        <li
+          key={row.model_name}
+          className={
+            compact
+              ? 'flex items-center gap-3 py-2'
+              : 'flex items-center gap-3 py-2.5'
+          }
+        >
+          <span className='text-muted-foreground/80 w-6 shrink-0 text-right font-mono text-xs tabular-nums'>
+            {row.rank}.
+          </span>
+          <span className='shrink-0'>
+            {getLobeIcon(row.vendor_icon, compact ? 20 : 22)}
+          </span>
+          <div className='min-w-0 flex-1'>
+            <ModelLink
+              modelName={row.model_name}
+              className={
+                compact
+                  ? 'text-foreground block truncate font-mono text-xs font-medium'
+                  : 'text-foreground block truncate font-mono text-sm font-medium'
+              }
+            >
+              {row.model_name}
+            </ModelLink>
+            <p
+              className={
+                compact
+                  ? 'text-muted-foreground/80 truncate text-[11px] italic'
+                  : 'text-muted-foreground/80 truncate text-xs italic'
+              }
+            >
+              by{' '}
+              <VendorLink vendor={row.vendor}>
+                {row.vendor.toLowerCase()}
+              </VendorLink>
+            </p>
+          </div>
+          <div className='shrink-0 text-right'>
+            <div
+              className={
+                compact
+                  ? 'text-foreground font-mono text-xs font-semibold tabular-nums'
+                  : 'text-foreground font-mono text-sm font-semibold tabular-nums'
+              }
+            >
+              {formatTokens(row.total_tokens)}
+              {!compact && (
+                <>
+                  {' '}
+                  <span className='text-muted-foreground/80 font-normal'>
+                    {t('tokens')}
+                  </span>
+                </>
+              )}
+            </div>
+            <GrowthText
+              value={row.growth_pct}
+              className={compact ? 'text-[10px]' : 'text-[11px]'}
+            />
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}
diff --git a/web/default/src/features/rankings/components/models-section.tsx b/web/default/src/features/rankings/components/models-section.tsx
new file mode 100644
index 00000000000..fb9ce5e469b
--- /dev/null
+++ b/web/default/src/features/rankings/components/models-section.tsx
@@ -0,0 +1,203 @@
+import { useMemo } from 'react'
+import { VChart } from '@visactor/react-vchart'
+import { BarChart3, Trophy } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { useChartTheme } from '@/lib/use-chart-theme'
+import { VCHART_OPTION } from '@/lib/vchart'
+import { formatTokens } from '../lib/format'
+import type { ModelHistorySeries, ModelRanking, RankingPeriod } from '../types'
+import { ModelLeaderboard } from './model-leaderboard'
+
+const PERIOD_DESCRIPTIONS: Record<RankingPeriod, string> = {
+  today: 'Hourly token usage by model across the last 24 hours',
+  week: 'Weekly token usage by model across the past few weeks',
+  month: 'Daily token usage by model across the past month',
+  year: 'Weekly token usage by model across the past year',
+  all: 'Token usage by model since launch',
+}
+
+const TOOLTIP_MAX_ROWS = 10
+
+type ModelsSectionProps = {
+  history: ModelHistorySeries
+  rows: ModelRanking[]
+  period: RankingPeriod
+}
+
+/**
+ * Combined "Top Models" card: a stacked bar chart showing token usage by
+ * model over time, paired below with a two-column LLM Leaderboard. The
+ * chart anchors the eye while the leaderboard provides the detailed key.
+ */
+export function ModelsSection(props: ModelsSectionProps) {
+  const { t } = useTranslation()
+  const { resolvedTheme, themeReady } = useChartTheme()
+
+  // Order points so the largest model appears at the bottom of every stack.
+  const orderedPoints = useMemo(() => {
+    const order = new Map(
+      props.history.models.map((m, idx) => [m.name, idx] as const)
+    )
+    return [...props.history.points].sort((a, b) => {
+      const tsCmp = a.ts.localeCompare(b.ts)
+      if (tsCmp !== 0) return tsCmp
+      return (order.get(a.model) ?? 999) - (order.get(b.model) ?? 999)
+    })
+  }, [props.history])
+
+  const totalTokens = useMemo(
+    () => props.rows.reduce((s, r) => s + r.total_tokens, 0),
+    [props.rows]
+  )
+
+  const spec = useMemo(() => {
+    if (orderedPoints.length === 0) return null
+    return {
+      type: 'bar' as const,
+      data: [{ id: 'models-history', values: orderedPoints }],
+      xField: 'label',
+      yField: 'tokens',
+      seriesField: 'model',
+      stack: true,
+      bar: { style: { cornerRadius: 1 } },
+      legends: { visible: false },
+      axes: [
+        {
+          orient: 'bottom',
+          label: {
+            style: { fill: 'currentColor', fontSize: 10 },
+            autoHide: true,
+            autoLimit: true,
+          },
+          tick: { visible: false },
+        },
+        {
+          orient: 'left',
+          label: {
+            formatMethod: (val: number | string) => formatTokens(Number(val)),
+            style: { fill: 'currentColor', fontSize: 10 },
+          },
+          grid: { visible: true, style: { lineDash: [3, 3] } },
+        },
+      ],
+      tooltip: {
+        mark: {
+          content: [
+            {
+              key: (datum: Record<string, unknown>) =>
+                String(datum?.model ?? ''),
+              value: (datum: Record<string, unknown>) =>
+                formatTokens(Number(datum?.tokens) || 0),
+            },
+          ],
+        },
+        dimension: {
+          title: {
+            value: (datum: Record<string, unknown>) =>
+              String(datum?.label ?? ''),
+          },
+          content: [
+            {
+              key: (datum: Record<string, unknown>) =>
+                String(datum?.model ?? ''),
+              value: (datum: Record<string, unknown>) =>
+                Number(datum?.tokens) || 0,
+            },
+          ],
+          updateContent: (
+            array: Array<{ key: string; value: string | number }>
+          ) => {
+            array.sort((a, b) => Number(b.value) - Number(a.value))
+            const sum = array.reduce((s, x) => s + (Number(x.value) || 0), 0)
+            const visible = array.slice(0, TOOLTIP_MAX_ROWS)
+            const overflow = array.slice(TOOLTIP_MAX_ROWS)
+            const result = visible.map((item) => ({
+              key: item.key,
+              value: formatTokens(Number(item.value) || 0),
+            }))
+            if (overflow.length > 0) {
+              const otherSum = overflow.reduce(
+                (s, item) => s + (Number(item.value) || 0),
+                0
+              )
+              result.push({
+                key: t('+{{count}} more', { count: overflow.length }),
+                value: formatTokens(otherSum),
+              })
+            }
+            result.unshift({ key: t('Total:'), value: formatTokens(sum) })
+            return result
+          },
+        },
+      },
+      animationAppear: { duration: 500 },
+    }
+  }, [orderedPoints, t])
+
+  return (
+    <section className='bg-card overflow-hidden rounded-lg border'>
+      {/* Chart block ----------------------------------------------------- */}
+      <header className='flex items-start justify-between gap-4 px-5 py-4'>
+        <div className='min-w-0 flex-1'>
+          <h2 className='text-foreground inline-flex items-center gap-2 text-base font-semibold'>
+            <BarChart3 className='text-primary size-4' />
+            {t('Top Models')}
+          </h2>
+          <p className='text-muted-foreground mt-1 text-sm'>
+            {t(PERIOD_DESCRIPTIONS[props.period])}
+          </p>
+        </div>
+        <div className='shrink-0 text-right'>
+          <div className='text-foreground font-mono text-2xl font-semibold tabular-nums'>
+            {formatTokens(totalTokens)}
+          </div>
+          <div className='text-muted-foreground/80 text-[10px] font-medium tracking-widest uppercase'>
+            {t('tokens')}
+          </div>
+        </div>
+      </header>
+
+      <div className='px-5 pb-5'>
+        <div className='h-60 sm:h-72'>
+          {themeReady && spec ? (
+            <VChart
+              key={`models-history-${resolvedTheme}-${props.period}`}
+              spec={{
+                ...spec,
+                theme: resolvedTheme === 'dark' ? 'dark' : 'light',
+                background: 'transparent',
+              }}
+              option={VCHART_OPTION}
+            />
+          ) : (
+            <div className='text-muted-foreground/80 flex h-full items-center justify-center text-xs'>
+              {t('No history data available')}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Leaderboard block ----------------------------------------------- */}
+      <div className='border-t'>
+        <header className='px-5 pt-4 pb-2'>
+          <h3 className='text-foreground inline-flex items-center gap-2 text-sm font-semibold'>
+            <Trophy className='size-3.5 text-amber-500' />
+            {t('LLM Leaderboard')}
+          </h3>
+          <p className='text-muted-foreground/80 mt-0.5 text-xs'>
+            {t('Compare the most popular models on the platform')}
+          </p>
+        </header>
+        {props.rows.length === 0 ? (
+          <div className='text-muted-foreground/80 px-5 py-8 text-center text-sm'>
+            {t('No models match the selected filters')}
+          </div>
+        ) : (
+          <div className='px-5 pt-1 pb-4'>
+            <ModelLeaderboard rows={props.rows} />
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
diff --git a/web/default/src/features/rankings/components/pulse-section.tsx b/web/default/src/features/rankings/components/pulse-section.tsx
new file mode 100644
index 00000000000..a2937d91597
--- /dev/null
+++ b/web/default/src/features/rankings/components/pulse-section.tsx
@@ -0,0 +1,172 @@
+import {
+  ArrowDownRight,
+  ArrowUpRight,
+  Sparkles,
+  TrendingDown,
+  TrendingUp,
+} from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { getLobeIcon } from '@/lib/lobe-icon'
+import { cn } from '@/lib/utils'
+import { formatReleaseDate, formatTokens } from '../lib/format'
+import type { NewModelEntry, RankingMover } from '../types'
+import { ModelLink, VendorLink } from './entity-links'
+
+type PulseSectionProps = {
+  movers: RankingMover[]
+  droppers: RankingMover[]
+  newModels: NewModelEntry[]
+}
+
+/**
+ * Three-up "Pulse" panel: rank gainers, rank losers, and recently released
+ * models — the "what's changing" footer of the rankings page. Each card
+ * is intentionally compact so the trio fits in one row on desktop.
+ */
+export function PulseSection(props: PulseSectionProps) {
+  const { t } = useTranslation()
+
+  return (
+    <section className='grid grid-cols-1 gap-4 lg:grid-cols-3'>
+      <PulseCard
+        title={t('Trending up')}
+        description={t('Models climbing the leaderboard')}
+        icon={<TrendingUp className='size-4 text-emerald-500' />}
+      >
+        {props.movers.length === 0 ? (
+          <PulseEmpty label={t('No notable climbers right now')} />
+        ) : (
+          <ul>
+            {props.movers.map((row) => (
+              <MoverRow key={row.model_name} row={row} intent='up' />
+            ))}
+          </ul>
+        )}
+      </PulseCard>
+
+      <PulseCard
+        title={t('Trending down')}
+        description={t('Models losing positions')}
+        icon={<TrendingDown className='size-4 text-rose-500' />}
+      >
+        {props.droppers.length === 0 ? (
+          <PulseEmpty label={t('No notable drops right now')} />
+        ) : (
+          <ul>
+            {props.droppers.map((row) => (
+              <MoverRow key={row.model_name} row={row} intent='down' />
+            ))}
+          </ul>
+        )}
+      </PulseCard>
+
+      <PulseCard
+        title={t('Newly released')}
+        description={t('Recently launched models')}
+        icon={<Sparkles className='size-4 text-amber-500' />}
+      >
+        {props.newModels.length === 0 ? (
+          <PulseEmpty label={t('No new models yet')} />
+        ) : (
+          <ul>
+            {props.newModels.slice(0, 6).map((row) => (
+              <NewModelRow key={row.model_name} row={row} />
+            ))}
+          </ul>
+        )}
+      </PulseCard>
+    </section>
+  )
+}
+
+function PulseCard(props: {
+  title: string
+  description: string
+  icon: React.ReactNode
+  children: React.ReactNode
+}) {
+  return (
+    <div className='bg-card overflow-hidden rounded-lg border'>
+      <header className='border-b px-4 py-3'>
+        <h3 className='text-foreground inline-flex items-center gap-2 text-sm font-semibold'>
+          {props.icon}
+          {props.title}
+        </h3>
+        <p className='text-muted-foreground/80 mt-0.5 text-xs'>
+          {props.description}
+        </p>
+      </header>
+      <div className='py-1'>{props.children}</div>
+    </div>
+  )
+}
+
+function PulseEmpty(props: { label: string }) {
+  return (
+    <div className='text-muted-foreground/80 px-4 py-6 text-center text-xs'>
+      {props.label}
+    </div>
+  )
+}
+
+function MoverRow(props: { row: RankingMover; intent: 'up' | 'down' }) {
+  return (
+    <li className='flex items-center gap-3 px-4 py-2'>
+      <span className='shrink-0'>{getLobeIcon(props.row.vendor_icon, 20)}</span>
+      <div className='min-w-0 flex-1'>
+        <ModelLink
+          modelName={props.row.model_name}
+          className='text-foreground block truncate font-mono text-xs font-medium'
+        >
+          {props.row.model_name}
+        </ModelLink>
+        <p className='text-muted-foreground/80 truncate text-[11px]'>
+          #{props.row.current_rank} ·{' '}
+          <VendorLink vendor={props.row.vendor}>
+            {props.row.vendor.toLowerCase()}
+          </VendorLink>
+        </p>
+      </div>
+      <span
+        className={cn(
+          'inline-flex shrink-0 items-center gap-0.5 font-mono text-xs font-semibold tabular-nums',
+          props.intent === 'up'
+            ? 'text-emerald-600 dark:text-emerald-400'
+            : 'text-rose-600 dark:text-rose-400'
+        )}
+      >
+        {props.intent === 'up' ? (
+          <ArrowUpRight className='size-3' />
+        ) : (
+          <ArrowDownRight className='size-3' />
+        )}
+        {Math.abs(props.row.rank_delta)}
+      </span>
+    </li>
+  )
+}
+
+function NewModelRow(props: { row: NewModelEntry }) {
+  return (
+    <li className='flex items-center gap-3 px-4 py-2'>
+      <span className='shrink-0'>{getLobeIcon(props.row.vendor_icon, 20)}</span>
+      <div className='min-w-0 flex-1'>
+        <ModelLink
+          modelName={props.row.model_name}
+          className='text-foreground block truncate font-mono text-xs font-medium'
+        >
+          {props.row.model_name}
+        </ModelLink>
+        <p className='text-muted-foreground/80 truncate text-[11px]'>
+          {formatReleaseDate(props.row.release_date)} ·{' '}
+          <VendorLink vendor={props.row.vendor}>
+            {props.row.vendor.toLowerCase()}
+          </VendorLink>
+        </p>
+      </div>
+      <span className='text-foreground shrink-0 font-mono text-xs font-semibold tabular-nums'>
+        {formatTokens(props.row.total_tokens)}
+      </span>
+    </li>
+  )
+}
diff --git a/web/default/src/features/rankings/components/rankings-hero.tsx b/web/default/src/features/rankings/components/rankings-hero.tsx
new file mode 100644
index 00000000000..1c2ccc5a88d
--- /dev/null
+++ b/web/default/src/features/rankings/components/rankings-hero.tsx
@@ -0,0 +1,79 @@
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import type { RankingPeriod } from '../types'
+
+const PERIODS: { id: RankingPeriod; labelKey: string }[] = [
+  { id: 'today', labelKey: 'Today' },
+  { id: 'week', labelKey: 'Week' },
+  { id: 'month', labelKey: 'Month' },
+  { id: 'year', labelKey: 'Year' },
+  { id: 'all', labelKey: 'All-time' },
+]
+
+type RankingsHeroProps = {
+  period: RankingPeriod
+  onPeriodChange: (period: RankingPeriod) => void
+}
+
+/**
+ * Hero strip for the rankings page. Intentionally minimal — title +
+ * subtitle + period tabs only. Category filtering is no longer needed
+ * because every category is rendered inline as its own section further
+ * down the page.
+ */
+export function RankingsHero(props: RankingsHeroProps) {
+  const { t } = useTranslation()
+
+  return (
+    <section className='space-y-5'>
+      <div className='space-y-2'>
+        <p className='text-muted-foreground text-xs font-medium tracking-widest uppercase'>
+          {t('Leaderboards')}
+        </p>
+        <h1 className='text-[clamp(1.75rem,4vw,2.5rem)] leading-[1.15] font-bold tracking-tight'>
+          {t('Rankings')}
+        </h1>
+        <p className='text-muted-foreground/80 max-w-2xl text-sm'>
+          {t(
+            'Discover the most-used models, top apps, and rising vendors on the platform — updated continuously across every category.'
+          )}
+        </p>
+      </div>
+
+      {/* Underline tabs for period — clean and unobtrusive. */}
+      <div
+        role='tablist'
+        aria-label={t('Period')}
+        className='border-border/60 flex items-center border-b'
+      >
+        {PERIODS.map((p) => {
+          const isActive = props.period === p.id
+          return (
+            <button
+              key={p.id}
+              role='tab'
+              type='button'
+              aria-selected={isActive}
+              onClick={() => props.onPeriodChange(p.id)}
+              className={cn(
+                'focus-visible:ring-ring/40 relative -mb-px rounded-sm px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',
+                isActive
+                  ? 'text-foreground'
+                  : 'text-muted-foreground hover:text-foreground'
+              )}
+            >
+              {t(p.labelKey)}
+              <span
+                aria-hidden
+                className={cn(
+                  'bg-foreground absolute inset-x-3 -bottom-px h-[2px] rounded-full transition-opacity',
+                  isActive ? 'opacity-100' : 'opacity-0'
+                )}
+              />
+            </button>
+          )
+        })}
+      </div>
+    </section>
+  )
+}
diff --git a/web/default/src/features/rankings/hooks/use-rankings.ts b/web/default/src/features/rankings/hooks/use-rankings.ts
new file mode 100644
index 00000000000..a42de1af12d
--- /dev/null
+++ b/web/default/src/features/rankings/hooks/use-rankings.ts
@@ -0,0 +1,15 @@
+import { useMemo } from 'react'
+import { buildRankingsSnapshot } from '../lib/mock-rankings'
+import type { RankingPeriod, RankingsSnapshot } from '../types'
+
+/**
+ * Memoised rankings snapshot for a period.
+ *
+ * Currently this synchronously builds deterministic mock data. When the
+ * backend ships real analytics endpoints, swap the body to a
+ * `useQuery`-based fetch — the consuming components don't care which side
+ * produced the data as long as it conforms to {@link RankingsSnapshot}.
+ */
+export function useRankings(period: RankingPeriod): RankingsSnapshot {
+  return useMemo(() => buildRankingsSnapshot(period), [period])
+}
diff --git a/web/default/src/features/rankings/index.tsx b/web/default/src/features/rankings/index.tsx
new file mode 100644
index 00000000000..f06af33f2d7
--- /dev/null
+++ b/web/default/src/features/rankings/index.tsx
@@ -0,0 +1,92 @@
+import { useNavigate, useSearch } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { PublicLayout } from '@/components/layout'
+import { PageTransition } from '@/components/page-transition'
+import {
+  AppsSection,
+  CategorySections,
+  MarketShareSection,
+  ModelsSection,
+  PulseSection,
+  RankingsHero,
+} from './components'
+import { useRankings } from './hooks/use-rankings'
+import type { RankingPeriod } from './types'
+
+const VALID_PERIODS: RankingPeriod[] = ['today', 'week', 'month', 'year', 'all']
+
+export function Rankings() {
+  const { t } = useTranslation()
+  const search = useSearch({ from: '/rankings/' })
+  const navigate = useNavigate()
+
+  const period: RankingPeriod = VALID_PERIODS.includes(
+    search.period as RankingPeriod
+  )
+    ? (search.period as RankingPeriod)
+    : 'week'
+
+  const snapshot = useRankings(period)
+
+  const handlePeriodChange = (next: RankingPeriod) => {
+    navigate({
+      to: '/rankings',
+      search: (prev) => ({ ...prev, period: next }),
+    })
+  }
+
+  return (
+    <PublicLayout showMainContainer={false}>
+      <div className='relative'>
+        <div
+          aria-hidden
+          className='pointer-events-none absolute inset-x-0 top-0 h-[600px] opacity-20 dark:opacity-[0.10]'
+          style={{
+            background: [
+              'radial-gradient(ellipse 60% 50% at 20% 20%, oklch(0.72 0.18 250 / 80%) 0%, transparent 70%)',
+              'radial-gradient(ellipse 50% 40% at 80% 15%, oklch(0.65 0.15 200 / 60%) 0%, transparent 70%)',
+              'radial-gradient(ellipse 40% 35% at 50% 70%, oklch(0.70 0.12 280 / 40%) 0%, transparent 70%)',
+            ].join(', '),
+            maskImage:
+              'linear-gradient(to bottom, black 40%, transparent 100%)',
+            WebkitMaskImage:
+              'linear-gradient(to bottom, black 40%, transparent 100%)',
+          }}
+        />
+        <PageTransition className='relative mx-auto w-full max-w-[1280px] space-y-8 px-3 pt-16 pb-10 sm:px-6 sm:pt-20 sm:pb-12 xl:px-8'>
+          <RankingsHero period={period} onPeriodChange={handlePeriodChange} />
+
+          {/* Overall (all-categories) view ----------------------------- */}
+          <ModelsSection
+            history={snapshot.models_history}
+            rows={snapshot.models}
+            period={period}
+          />
+
+          <MarketShareSection
+            history={snapshot.vendor_share_history}
+            rows={snapshot.vendors}
+            period={period}
+          />
+
+          <AppsSection rows={snapshot.apps} />
+
+          <PulseSection
+            movers={snapshot.top_movers}
+            droppers={snapshot.top_droppers}
+            newModels={snapshot.new_models}
+          />
+
+          {/* Per-category drill-downs --------------------------------- */}
+          <CategorySections sections={snapshot.category_sections} />
+
+          <p className='text-muted-foreground/60 mx-auto max-w-3xl text-center text-[11px] leading-relaxed'>
+            {t(
+              'Ranking data is currently simulated for preview purposes and will be replaced with live analytics once the backend integration ships.'
+            )}
+          </p>
+        </PageTransition>
+      </div>
+    </PublicLayout>
+  )
+}
diff --git a/web/default/src/features/rankings/lib/format.ts b/web/default/src/features/rankings/lib/format.ts
new file mode 100644
index 00000000000..71c5478ff1a
--- /dev/null
+++ b/web/default/src/features/rankings/lib/format.ts
@@ -0,0 +1,35 @@
+// ----------------------------------------------------------------------------
+// Rankings formatting helpers
+// ----------------------------------------------------------------------------
+
+/** Format a token count as `1.2B`, `42M`, `980K`, or `512`. */
+export function formatTokens(value: number): string {
+  if (!Number.isFinite(value) || value <= 0) return '0'
+  if (value >= 1_000_000_000_000)
+    return `${(value / 1_000_000_000_000).toFixed(2)}T`
+  if (value >= 1_000_000_000)
+    return `${(value / 1_000_000_000).toFixed(value >= 10_000_000_000 ? 1 : 2)}B`
+  if (value >= 1_000_000)
+    return `${(value / 1_000_000).toFixed(value >= 10_000_000 ? 1 : 2)}M`
+  if (value >= 1_000)
+    return `${(value / 1_000).toFixed(value >= 10_000 ? 0 : 1)}K`
+  return value.toLocaleString()
+}
+
+/** Format a 0..1 share as a percentage with two decimals. */
+export function formatShare(share: number): string {
+  if (!Number.isFinite(share) || share <= 0) return '0%'
+  if (share < 0.001) return '<0.1%'
+  return `${(share * 100).toFixed(share < 0.01 ? 2 : 1)}%`
+}
+
+/** Format a release date like `Oct 12, 2025`. */
+export function formatReleaseDate(iso: string): string {
+  const ts = Date.parse(iso)
+  if (!Number.isFinite(ts)) return iso
+  return new Date(ts).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+}
diff --git a/web/default/src/features/rankings/lib/index.ts b/web/default/src/features/rankings/lib/index.ts
new file mode 100644
index 00000000000..dadc7ca85fb
--- /dev/null
+++ b/web/default/src/features/rankings/lib/index.ts
@@ -0,0 +1,2 @@
+export * from './format'
+export * from './mock-rankings'
diff --git a/web/default/src/features/rankings/lib/mock-rankings.ts b/web/default/src/features/rankings/lib/mock-rankings.ts
new file mode 100644
index 00000000000..52e3c76acf6
--- /dev/null
+++ b/web/default/src/features/rankings/lib/mock-rankings.ts
@@ -0,0 +1,1048 @@
+import {
+  hashStringToSeed,
+  randomInRange,
+  randomIntInRange,
+  seededRandom,
+} from '@/features/pricing/lib/seed'
+import type {
+  AppCategory,
+  AppListing,
+  CategorySection,
+  ModelHistoryPoint,
+  ModelHistorySeries,
+  ModelRanking,
+  NewModelEntry,
+  RankingCategory,
+  RankingCategoryId,
+  RankingMover,
+  RankingPeriod,
+  RankingsSnapshot,
+  VendorRanking,
+  VendorSharePoint,
+  VendorShareSeries,
+} from '../types'
+
+// ----------------------------------------------------------------------------
+// Catalogue: categories + canonical model & app fixtures
+// ----------------------------------------------------------------------------
+//
+// All ranking data is derived from these fixtures plus a deterministic PRNG
+// seeded by `${period}:${category}`. Every call with the same arguments
+// returns the same numbers, while different (period, category) pairs render
+// visibly distinct data. When the backend ships real analytics, these
+// fixtures stay only as fallbacks.
+
+export const RANKING_CATEGORIES: RankingCategory[] = [
+  {
+    id: 'all',
+    label: 'All categories',
+    description: 'Aggregate traffic across every category',
+  },
+  {
+    id: 'programming',
+    label: 'Programming',
+    description: 'Code generation, refactoring, autocomplete',
+  },
+  {
+    id: 'roleplay',
+    label: 'Roleplay',
+    description: 'Character chat, storytelling, persona',
+  },
+  {
+    id: 'marketing',
+    label: 'Marketing',
+    description: 'Copywriting, ad creative, SEO',
+  },
+  {
+    id: 'translation',
+    label: 'Translation',
+    description: 'Multilingual translation and localisation',
+  },
+  {
+    id: 'science',
+    label: 'Science',
+    description: 'Research, analysis, scientific reasoning',
+  },
+  {
+    id: 'finance',
+    label: 'Finance',
+    description: 'Trading insights, accounting, advisory',
+  },
+  {
+    id: 'health',
+    label: 'Health',
+    description: 'Medical Q&A, mental health support',
+  },
+  {
+    id: 'legal',
+    label: 'Legal',
+    description: 'Contract review, compliance, summarisation',
+  },
+  {
+    id: 'education',
+    label: 'Education',
+    description: 'Tutoring, learning aids, assessment',
+  },
+  {
+    id: 'productivity',
+    label: 'Productivity',
+    description: 'Email, summarisation, knowledge work',
+  },
+  {
+    id: 'multimodal',
+    label: 'Multimodal',
+    description: 'Vision, image / video, document chat',
+  },
+]
+
+type ModelFixture = {
+  name: string
+  vendor: string
+  vendor_icon: string
+  release_date: string
+  /** Categories this model commonly serves. First entry is the primary. */
+  categories: RankingCategoryId[]
+  /** Relative popularity weight (0..1). */
+  weight: number
+}
+
+const MODEL_FIXTURES: ModelFixture[] = [
+  {
+    name: 'gpt-5',
+    vendor: 'OpenAI',
+    vendor_icon: 'OpenAI.Color',
+    release_date: '2025-10-12',
+    categories: ['programming', 'productivity', 'science'],
+    weight: 1.0,
+  },
+  {
+    name: 'claude-sonnet-4-5',
+    vendor: 'Anthropic',
+    vendor_icon: 'Claude.Color',
+    release_date: '2025-09-08',
+    categories: ['programming', 'productivity', 'legal'],
+    weight: 0.96,
+  },
+  {
+    name: 'gemini-2.5-pro',
+    vendor: 'Google',
+    vendor_icon: 'Gemini.Color',
+    release_date: '2025-06-15',
+    categories: ['multimodal', 'science', 'education'],
+    weight: 0.88,
+  },
+  {
+    name: 'deepseek-v3.2',
+    vendor: 'DeepSeek',
+    vendor_icon: 'DeepSeek.Color',
+    release_date: '2025-08-22',
+    categories: ['programming', 'science'],
+    weight: 0.84,
+  },
+  {
+    name: 'gpt-5-mini',
+    vendor: 'OpenAI',
+    vendor_icon: 'OpenAI.Color',
+    release_date: '2025-10-12',
+    categories: ['productivity', 'roleplay', 'translation'],
+    weight: 0.78,
+  },
+  {
+    name: 'claude-opus-4-5',
+    vendor: 'Anthropic',
+    vendor_icon: 'Claude.Color',
+    release_date: '2025-08-04',
+    categories: ['legal', 'science', 'finance'],
+    weight: 0.7,
+  },
+  {
+    name: 'qwen3-235b-a22b',
+    vendor: 'Alibaba',
+    vendor_icon: 'Qwen.Color',
+    release_date: '2025-05-30',
+    categories: ['programming', 'translation', 'science'],
+    weight: 0.66,
+  },
+  {
+    name: 'grok-4',
+    vendor: 'xAI',
+    vendor_icon: 'XAI',
+    release_date: '2025-04-18',
+    categories: ['roleplay', 'science', 'marketing'],
+    weight: 0.62,
+  },
+  {
+    name: 'llama-4-maverick',
+    vendor: 'Meta',
+    vendor_icon: 'Meta.Color',
+    release_date: '2025-04-05',
+    categories: ['programming', 'productivity'],
+    weight: 0.58,
+  },
+  {
+    name: 'kimi-k2',
+    vendor: 'Moonshot',
+    vendor_icon: 'Moonshot',
+    release_date: '2025-07-19',
+    categories: ['productivity', 'translation'],
+    weight: 0.55,
+  },
+  {
+    name: 'glm-4.6',
+    vendor: 'Zhipu',
+    vendor_icon: 'Zhipu.Color',
+    release_date: '2025-09-26',
+    categories: ['programming', 'productivity'],
+    weight: 0.52,
+  },
+  {
+    name: 'gemini-2.5-flash',
+    vendor: 'Google',
+    vendor_icon: 'Gemini.Color',
+    release_date: '2025-06-15',
+    categories: ['productivity', 'translation', 'multimodal'],
+    weight: 0.49,
+  },
+  {
+    name: 'mistral-large-3',
+    vendor: 'Mistral',
+    vendor_icon: 'Mistral.Color',
+    release_date: '2025-03-12',
+    categories: ['programming', 'finance'],
+    weight: 0.46,
+  },
+  {
+    name: 'doubao-1.6-pro',
+    vendor: 'ByteDance',
+    vendor_icon: 'Doubao.Color',
+    release_date: '2025-07-02',
+    categories: ['marketing', 'roleplay'],
+    weight: 0.44,
+  },
+  {
+    name: 'hunyuan-turbos',
+    vendor: 'Tencent',
+    vendor_icon: 'Hunyuan.Color',
+    release_date: '2025-05-08',
+    categories: ['productivity', 'translation'],
+    weight: 0.4,
+  },
+  {
+    name: 'gpt-image-2',
+    vendor: 'OpenAI',
+    vendor_icon: 'OpenAI.Color',
+    release_date: '2025-06-04',
+    categories: ['multimodal', 'marketing'],
+    weight: 0.38,
+  },
+  {
+    name: 'sora-2',
+    vendor: 'OpenAI',
+    vendor_icon: 'OpenAI.Color',
+    release_date: '2025-09-30',
+    categories: ['multimodal', 'marketing'],
+    weight: 0.34,
+  },
+  {
+    name: 'veo-3',
+    vendor: 'Google',
+    vendor_icon: 'Gemini.Color',
+    release_date: '2025-08-15',
+    categories: ['multimodal', 'marketing'],
+    weight: 0.31,
+  },
+  {
+    name: 'qwen3-vl-plus',
+    vendor: 'Alibaba',
+    vendor_icon: 'Qwen.Color',
+    release_date: '2025-06-20',
+    categories: ['multimodal', 'education'],
+    weight: 0.3,
+  },
+  {
+    name: 'minimax-m2',
+    vendor: 'MiniMax',
+    vendor_icon: 'Minimax.Color',
+    release_date: '2025-07-25',
+    categories: ['roleplay', 'translation'],
+    weight: 0.28,
+  },
+  {
+    name: 'cohere-command-r-plus',
+    vendor: 'Cohere',
+    vendor_icon: 'Cohere.Color',
+    release_date: '2024-11-10',
+    categories: ['marketing', 'productivity'],
+    weight: 0.26,
+  },
+  {
+    name: 'ernie-x1-turbo',
+    vendor: 'Baidu',
+    vendor_icon: 'Baidu.Color',
+    release_date: '2025-04-30',
+    categories: ['translation', 'productivity'],
+    weight: 0.22,
+  },
+]
+
+type AppFixture = {
+  name: string
+  description: string
+  category: AppCategory
+  url?: string
+  weight: number
+  /** Bias toward these models (model_name). */
+  prefers: string[]
+}
+
+const APP_FIXTURES: AppFixture[] = [
+  {
+    name: 'Cline',
+    description: 'Autonomous coding agent inside the IDE',
+    category: 'Coding',
+    url: 'https://cline.bot',
+    weight: 1.0,
+    prefers: ['claude-sonnet-4-5', 'gpt-5'],
+  },
+  {
+    name: 'Roo Code',
+    description: 'AI agent for VS Code with multi-step planning',
+    category: 'Coding',
+    url: 'https://roocode.com',
+    weight: 0.9,
+    prefers: ['claude-sonnet-4-5', 'deepseek-v3.2'],
+  },
+  {
+    name: 'Cursor',
+    description: 'Editor with built-in AI for code generation',
+    category: 'Coding',
+    url: 'https://cursor.com',
+    weight: 0.85,
+    prefers: ['gpt-5', 'claude-sonnet-4-5'],
+  },
+  {
+    name: 'Continue',
+    description: 'Open-source AI code assistant for editors',
+    category: 'Coding',
+    url: 'https://continue.dev',
+    weight: 0.62,
+    prefers: ['deepseek-v3.2', 'qwen3-235b-a22b'],
+  },
+  {
+    name: 'Aider',
+    description: 'Pair-programming in your terminal',
+    category: 'Coding',
+    url: 'https://aider.chat',
+    weight: 0.46,
+    prefers: ['claude-sonnet-4-5', 'gpt-5'],
+  },
+  {
+    name: 'Open WebUI',
+    description: 'Self-hosted ChatGPT-like web interface',
+    category: 'Chat',
+    url: 'https://openwebui.com',
+    weight: 0.74,
+    prefers: ['gpt-5-mini', 'qwen3-235b-a22b'],
+  },
+  {
+    name: 'LibreChat',
+    description: 'Open-source multi-model chat platform',
+    category: 'Chat',
+    url: 'https://librechat.ai',
+    weight: 0.6,
+    prefers: ['gpt-5-mini', 'gemini-2.5-flash'],
+  },
+  {
+    name: 'Lobe Chat',
+    description: 'Modern open-source chat UI with plugins',
+    category: 'Chat',
+    url: 'https://lobehub.com',
+    weight: 0.58,
+    prefers: ['gpt-5-mini', 'claude-sonnet-4-5'],
+  },
+  {
+    name: 'NextChat',
+    description: 'Cross-platform private ChatGPT client',
+    category: 'Chat',
+    url: 'https://nextchat.dev',
+    weight: 0.4,
+    prefers: ['gpt-5-mini', 'gemini-2.5-flash'],
+  },
+  {
+    name: 'TypingMind',
+    description: 'Better UI for ChatGPT and Claude',
+    category: 'Chat',
+    url: 'https://typingmind.com',
+    weight: 0.34,
+    prefers: ['gpt-5', 'claude-sonnet-4-5'],
+  },
+  {
+    name: 'SillyTavern',
+    description: 'Roleplay frontend for chat models',
+    category: 'Roleplay',
+    url: 'https://sillytavernai.com',
+    weight: 0.7,
+    prefers: ['claude-opus-4-5', 'minimax-m2'],
+  },
+  {
+    name: 'Janitor AI',
+    description: 'Roleplay chat with custom characters',
+    category: 'Roleplay',
+    url: 'https://janitorai.com',
+    weight: 0.55,
+    prefers: ['minimax-m2', 'doubao-1.6-pro'],
+  },
+  {
+    name: 'Notion AI',
+    description: 'AI features inside Notion docs',
+    category: 'Productivity',
+    url: 'https://notion.so',
+    weight: 0.62,
+    prefers: ['gpt-5', 'claude-sonnet-4-5'],
+  },
+  {
+    name: 'Reflect',
+    description: 'Personal AI knowledge assistant',
+    category: 'Productivity',
+    url: 'https://reflect.app',
+    weight: 0.36,
+    prefers: ['gpt-5-mini', 'claude-sonnet-4-5'],
+  },
+  {
+    name: 'Mem',
+    description: 'AI-first note-taking app',
+    category: 'Productivity',
+    url: 'https://mem.ai',
+    weight: 0.32,
+    prefers: ['gpt-5-mini'],
+  },
+  {
+    name: 'Khanmigo',
+    description: 'Tutor for Khan Academy learners',
+    category: 'Education',
+    url: 'https://khanmigo.ai',
+    weight: 0.48,
+    prefers: ['gpt-5', 'claude-sonnet-4-5'],
+  },
+  {
+    name: 'Quizlet AI',
+    description: 'Personalised study & flashcards',
+    category: 'Education',
+    url: 'https://quizlet.com',
+    weight: 0.36,
+    prefers: ['gemini-2.5-flash'],
+  },
+  {
+    name: 'Perplexity',
+    description: 'Conversational answer engine',
+    category: 'Research',
+    url: 'https://perplexity.ai',
+    weight: 0.78,
+    prefers: ['gpt-5', 'claude-sonnet-4-5'],
+  },
+  {
+    name: 'Elicit',
+    description: 'AI research assistant for papers',
+    category: 'Research',
+    url: 'https://elicit.com',
+    weight: 0.42,
+    prefers: ['claude-opus-4-5', 'gemini-2.5-pro'],
+  },
+  {
+    name: 'Jasper',
+    description: 'Marketing copywriting platform',
+    category: 'Marketing',
+    url: 'https://jasper.ai',
+    weight: 0.5,
+    prefers: ['gpt-5', 'claude-sonnet-4-5'],
+  },
+  {
+    name: 'Copy.ai',
+    description: 'AI sales & marketing automation',
+    category: 'Marketing',
+    url: 'https://copy.ai',
+    weight: 0.4,
+    prefers: ['gpt-5-mini'],
+  },
+  {
+    name: 'DeepL Write',
+    description: 'AI rewriting & translation',
+    category: 'Translation',
+    url: 'https://deepl.com',
+    weight: 0.36,
+    prefers: ['gpt-5-mini', 'qwen3-235b-a22b'],
+  },
+  {
+    name: 'Wordtune',
+    description: 'AI rewriting & paraphrasing',
+    category: 'Translation',
+    url: 'https://wordtune.com',
+    weight: 0.3,
+    prefers: ['gpt-5-mini'],
+  },
+  {
+    name: 'Harvey',
+    description: 'AI assistant for law firms',
+    category: 'Other',
+    url: 'https://harvey.ai',
+    weight: 0.42,
+    prefers: ['claude-opus-4-5', 'gpt-5'],
+  },
+  {
+    name: 'Hippocratic',
+    description: 'Healthcare-focused AI agents',
+    category: 'Health',
+    url: 'https://hippocratic.ai',
+    weight: 0.32,
+    prefers: ['claude-opus-4-5'],
+  },
+  {
+    name: 'Cleo',
+    description: 'AI personal finance assistant',
+    category: 'Finance',
+    url: 'https://meetcleo.com',
+    weight: 0.28,
+    prefers: ['gpt-5-mini'],
+  },
+]
+
+// ----------------------------------------------------------------------------
+// PRNG seeding helpers
+// ----------------------------------------------------------------------------
+
+const PERIOD_FACTOR: Record<RankingPeriod, number> = {
+  today: 0.04,
+  week: 0.25,
+  month: 1.0,
+  year: 11.5,
+  all: 38.0,
+}
+
+function periodSeed(
+  period: RankingPeriod,
+  category: RankingCategoryId
+): number {
+  return hashStringToSeed(`rankings:${period}:${category}`)
+}
+
+/** Pick a previous_rank for a model that's currently at `rank`. */
+function makePreviousRank(rand: () => number, rank: number, total: number) {
+  if (rand() < 0.08) return undefined
+  const delta = randomIntInRange(rand, -3, 3)
+  const prev = Math.max(1, Math.min(total + 4, rank + delta))
+  if (prev === rank) return undefined
+  return prev
+}
+
+// ----------------------------------------------------------------------------
+// Leaderboard builders
+// ----------------------------------------------------------------------------
+
+function buildModelRankings(
+  period: RankingPeriod,
+  category: RankingCategoryId
+): ModelRanking[] {
+  const seed = periodSeed(period, category)
+  const periodFactor = PERIOD_FACTOR[period]
+
+  const filtered =
+    category === 'all'
+      ? MODEL_FIXTURES
+      : MODEL_FIXTURES.filter((m) => m.categories.includes(category))
+
+  // Slight per-call jitter on weights so the leaderboard re-orders a bit
+  // between periods/categories.
+  const ranked = filtered
+    .map((m) => ({
+      fixture: m,
+      score:
+        m.weight *
+        (0.85 + seededRandom(seed ^ hashStringToSeed(m.name))() * 0.4),
+    }))
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 20)
+
+  if (ranked.length === 0) return []
+
+  const totalScore = ranked.reduce((s, r) => s + r.score, 0)
+  const baseTokens = 240_000_000 * periodFactor
+
+  return ranked.map(({ fixture, score }, idx) => {
+    const rowSeed = seed ^ hashStringToSeed(fixture.name)
+    const rowRand = seededRandom(rowSeed)
+    const share = score / totalScore
+    const totalTokens = Math.round(baseTokens * share * (0.9 + rowRand() * 0.2))
+    const growth = randomInRange(seededRandom(rowSeed ^ 0x11), -22, 96)
+    return {
+      rank: idx + 1,
+      previous_rank: makePreviousRank(
+        seededRandom(rowSeed ^ 0x22),
+        idx + 1,
+        ranked.length
+      ),
+      model_name: fixture.name,
+      vendor: fixture.vendor,
+      vendor_icon: fixture.vendor_icon,
+      category: fixture.categories[0],
+      total_tokens: totalTokens,
+      share,
+      growth_pct: Math.round(growth * 10) / 10,
+    }
+  })
+}
+
+function buildAppListings(
+  period: RankingPeriod,
+  category: RankingCategoryId,
+  models: ModelRanking[]
+): AppListing[] {
+  const seed = periodSeed(period, category) ^ 0xa11
+  const periodFactor = PERIOD_FACTOR[period]
+
+  // Map "all" category to all apps; otherwise filter by a soft mapping. We
+  // keep the list large and let weights distribute naturally.
+  const filtered = APP_FIXTURES.filter((app) => {
+    if (category === 'all') return true
+    if (category === 'programming') return app.category === 'Coding'
+    if (category === 'roleplay') return app.category === 'Roleplay'
+    if (category === 'marketing') return app.category === 'Marketing'
+    if (category === 'translation') return app.category === 'Translation'
+    if (category === 'education') return app.category === 'Education'
+    if (category === 'productivity')
+      return app.category === 'Productivity' || app.category === 'Chat'
+    if (category === 'science') return app.category === 'Research'
+    if (category === 'health') return app.category === 'Health'
+    if (category === 'finance') return app.category === 'Finance'
+    if (category === 'multimodal')
+      return ['Creative', 'Marketing'].includes(app.category)
+    return true
+  })
+
+  const ranked = filtered
+    .map((app) => ({
+      app,
+      score:
+        app.weight *
+        (0.85 + seededRandom(seed ^ hashStringToSeed(app.name))() * 0.4),
+    }))
+    .sort((a, b) => b.score - a.score)
+
+  if (ranked.length === 0) return []
+
+  const totalScore = ranked.reduce((s, r) => s + r.score, 0)
+  const baseTokens = 84_000_000 * periodFactor
+  const modelNames = new Set(models.map((m) => m.model_name))
+
+  return ranked.slice(0, 14).map(({ app, score }, idx) => {
+    const rowSeed = seed ^ hashStringToSeed(app.name)
+    const share = score / totalScore
+    const totalTokens = Math.round(
+      baseTokens * share * (0.9 + seededRandom(rowSeed)() * 0.25)
+    )
+    const growth = randomInRange(seededRandom(rowSeed ^ 0xab), -28, 130)
+    const topModel =
+      app.prefers.find((m) => modelNames.has(m)) ??
+      app.prefers[0] ??
+      models[0]?.model_name ??
+      'gpt-5'
+    return {
+      rank: idx + 1,
+      previous_rank: makePreviousRank(
+        seededRandom(rowSeed ^ 0xcd),
+        idx + 1,
+        ranked.length
+      ),
+      name: app.name,
+      description: app.description,
+      category: app.category,
+      url: app.url,
+      total_tokens: totalTokens,
+      growth_pct: Math.round(growth * 10) / 10,
+      top_model: topModel,
+      initial: app.name.charAt(0).toUpperCase(),
+    }
+  })
+}
+
+function buildVendorRankings(models: ModelRanking[]): VendorRanking[] {
+  if (models.length === 0) return []
+  const totals = new Map<
+    string,
+    {
+      tokens: number
+      icon?: string
+      count: number
+      growthSum: number
+      topModel: { name: string; tokens: number }
+    }
+  >()
+  for (const m of models) {
+    const cur = totals.get(m.vendor)
+    if (!cur) {
+      totals.set(m.vendor, {
+        tokens: m.total_tokens,
+        icon: m.vendor_icon,
+        count: 1,
+        growthSum: m.growth_pct,
+        topModel: { name: m.model_name, tokens: m.total_tokens },
+      })
+    } else {
+      cur.tokens += m.total_tokens
+      cur.count += 1
+      cur.growthSum += m.growth_pct
+      if (m.total_tokens > cur.topModel.tokens) {
+        cur.topModel = { name: m.model_name, tokens: m.total_tokens }
+      }
+    }
+  }
+
+  const grand = [...totals.values()].reduce((s, v) => s + v.tokens, 0)
+  const sorted = [...totals.entries()]
+    .map(([vendor, v]) => ({
+      vendor,
+      total_tokens: v.tokens,
+      vendor_icon: v.icon,
+      models_count: v.count,
+      top_model: v.topModel.name,
+      share: v.tokens / Math.max(grand, 1),
+      growth_pct: Math.round((v.growthSum / v.count) * 10) / 10,
+    }))
+    .sort((a, b) => b.total_tokens - a.total_tokens)
+
+  return sorted.map((row, idx) => ({ rank: idx + 1, ...row }))
+}
+
+function buildMovers(models: ModelRanking[]): {
+  movers: RankingMover[]
+  droppers: RankingMover[]
+} {
+  const withDelta = models
+    .filter((m) => m.previous_rank !== undefined)
+    .map<RankingMover>((m) => ({
+      model_name: m.model_name,
+      vendor: m.vendor,
+      vendor_icon: m.vendor_icon,
+      current_rank: m.rank,
+      rank_delta: (m.previous_rank ?? m.rank) - m.rank,
+      growth_pct: m.growth_pct,
+    }))
+
+  const movers = [...withDelta]
+    .filter((x) => x.rank_delta > 0)
+    .sort((a, b) => b.rank_delta - a.rank_delta || b.growth_pct - a.growth_pct)
+    .slice(0, 5)
+
+  const droppers = [...withDelta]
+    .filter((x) => x.rank_delta < 0)
+    .sort((a, b) => a.rank_delta - b.rank_delta || a.growth_pct - b.growth_pct)
+    .slice(0, 5)
+
+  return { movers, droppers }
+}
+
+function buildNewModels(period: RankingPeriod): NewModelEntry[] {
+  const seed = periodSeed(period, 'all') ^ 0xfa11
+  const rand = seededRandom(seed)
+  // "New" = released within the last 90 days for shorter periods, last 12
+  // months for "year/all"
+  const cutoffDays = period === 'today' || period === 'week' ? 90 : 365
+  const cutoffMs = Date.now() - cutoffDays * 86_400_000
+  return MODEL_FIXTURES.filter((m) => Date.parse(m.release_date) >= cutoffMs)
+    .slice()
+    .sort(
+      (a, b) =>
+        Date.parse(b.release_date) - Date.parse(a.release_date) ||
+        b.weight - a.weight
+    )
+    .slice(0, 6)
+    .map((m) => ({
+      model_name: m.name,
+      vendor: m.vendor,
+      vendor_icon: m.vendor_icon,
+      category: m.categories[0],
+      release_date: m.release_date,
+      total_tokens: Math.round(
+        220_000_000 * m.weight * PERIOD_FACTOR[period] * (0.85 + rand() * 0.3)
+      ),
+      growth_pct: Math.round(randomInRange(rand, 35, 220) * 10) / 10,
+    }))
+}
+
+// ----------------------------------------------------------------------------
+// History (stacked bar / 100% stacked area) builders
+// ----------------------------------------------------------------------------
+//
+// These produce a longer time-series than the leaderboard sparklines so the
+// charts can render a recognisable growth story across 30+ buckets. Bucket
+// granularity scales with the active period.
+
+const HISTORY_BUCKETS: Record<RankingPeriod, number> = {
+  today: 24, // hourly
+  week: 21, // 3 weeks of daily
+  month: 30, // ~30 days
+  year: 52, // ~1 year of weekly
+  all: 78, // ~18 months of weekly
+}
+
+/** Cap stacked series so the chart legend / colour palette stays legible. */
+const HISTORY_TOP_MODELS = 18
+const HISTORY_TOP_VENDORS = 12
+const OTHERS_LABEL = 'Others'
+
+function bucketStepMs(period: RankingPeriod): number {
+  if (period === 'today') return 60 * 60 * 1000
+  if (period === 'week' || period === 'month') return 24 * 60 * 60 * 1000
+  return 7 * 24 * 60 * 60 * 1000
+}
+
+function formatBucketLabel(date: Date, period: RankingPeriod): string {
+  if (period === 'today') {
+    return `${String(date.getHours()).padStart(2, '0')}:00`
+  }
+  return date.toLocaleDateString(undefined, {
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+/**
+ * Smooth ramp-up profile in [0..1] for a model that launched at
+ * `releaseTs` and is observed at `bucketTs`. Models launched after the
+ * bucket return 0; long-established models return 1. The S-curve gives a
+ * natural ramp during the first ~6 weeks after launch.
+ */
+function rampWeight(bucketTs: number, releaseTs: number): number {
+  if (!Number.isFinite(releaseTs)) return 1
+  const ageMs = bucketTs - releaseTs
+  if (ageMs <= 0) return 0
+  const sixWeeks = 6 * 7 * 24 * 60 * 60 * 1000
+  if (ageMs >= sixWeeks) return 1
+  const t = ageMs / sixWeeks
+  return 1 - Math.pow(1 - t, 3)
+}
+
+function buildModelsHistory(
+  period: RankingPeriod,
+  models: ModelRanking[]
+): ModelHistorySeries {
+  const buckets = HISTORY_BUCKETS[period]
+  if (buckets === 0 || models.length === 0) {
+    return { points: [], models: [], buckets: 0 }
+  }
+
+  const stepMs = bucketStepMs(period)
+  const now = Date.now()
+  const seed = periodSeed(period, 'all') ^ 0x71_57_07_4d
+  const top = models.slice(0, Math.min(models.length, HISTORY_TOP_MODELS))
+
+  const points: ModelHistoryPoint[] = []
+  const totals = new Map<string, number>()
+
+  for (const model of top) {
+    const releaseFixture = MODEL_FIXTURES.find(
+      (m) => m.name === model.model_name
+    )
+    const releaseTs = releaseFixture
+      ? Date.parse(releaseFixture.release_date)
+      : Number.NaN
+
+    const modelSeed = seed ^ hashStringToSeed(`${model.model_name}:hist`)
+    const rand = seededRandom(modelSeed)
+
+    // Per-model average tokens per bucket so the area under the curve roughly
+    // matches `total_tokens` (the leaderboard summary).
+    const avgPerBucket = model.total_tokens / buckets
+
+    // Drift = how much the model has been growing across the visible window.
+    // Newer / faster-growing models (high growth_pct) show a steeper slope.
+    const drift = 0.4 + Math.min(2.4, model.growth_pct / 50)
+    // Shape factor — most weight near the end for growing models, more even
+    // for established ones.
+    const skew = 0.8 + rand() * 0.6
+
+    let modelTotal = 0
+    for (let i = buckets - 1; i >= 0; i--) {
+      const bucketTs = now - i * stepMs
+      const date = new Date(bucketTs)
+      const t = (buckets - 1 - i) / Math.max(1, buckets - 1)
+      const trendShape = Math.pow(t, 1.4 * skew) * drift + 0.4
+      const ramp = rampWeight(bucketTs, releaseTs)
+      const jitter = 0.78 + rand() * 0.45
+      const tokens = Math.max(
+        0,
+        Math.round(avgPerBucket * trendShape * ramp * jitter)
+      )
+      modelTotal += tokens
+      points.push({
+        ts: date.toISOString(),
+        label: formatBucketLabel(date, period),
+        model: model.model_name,
+        vendor: model.vendor,
+        tokens,
+      })
+    }
+    totals.set(model.model_name, modelTotal)
+  }
+
+  // Stable oldest → newest ordering.
+  points.sort((a, b) => a.ts.localeCompare(b.ts))
+
+  const ranked = top
+    .map((m) => ({
+      name: m.model_name,
+      vendor: m.vendor,
+      total: totals.get(m.model_name) ?? 0,
+    }))
+    .sort((a, b) => b.total - a.total)
+
+  return { points, models: ranked, buckets }
+}
+
+function buildVendorShareHistory(
+  history: ModelHistorySeries
+): VendorShareSeries {
+  if (history.points.length === 0) {
+    return { points: [], vendors: [], buckets: 0 }
+  }
+
+  const byBucket = new Map<string, Map<string, number>>()
+  const labelByTs = new Map<string, string>()
+  for (const point of history.points) {
+    if (!byBucket.has(point.ts)) byBucket.set(point.ts, new Map())
+    if (!labelByTs.has(point.ts)) labelByTs.set(point.ts, point.label)
+    const map = byBucket.get(point.ts)!
+    map.set(point.vendor, (map.get(point.vendor) ?? 0) + point.tokens)
+  }
+
+  // Use the union of vendors observed across the window so the area chart
+  // has stable series even on buckets where a vendor has 0 tokens.
+  const vendorTotals = new Map<string, number>()
+  for (const [, vendorMap] of byBucket) {
+    for (const [vendor, tokens] of vendorMap) {
+      vendorTotals.set(vendor, (vendorTotals.get(vendor) ?? 0) + tokens)
+    }
+  }
+  const grand = [...vendorTotals.values()].reduce((s, v) => s + v, 0) || 1
+
+  const sortedVendors = [...vendorTotals.entries()].sort((a, b) => b[1] - a[1])
+  const topVendors = sortedVendors
+    .slice(0, HISTORY_TOP_VENDORS)
+    .map(([name]) => name)
+  const otherVendors = new Set(
+    sortedVendors.slice(HISTORY_TOP_VENDORS).map(([name]) => name)
+  )
+  const hasOthers = otherVendors.size > 0
+
+  const points: VendorSharePoint[] = []
+  const sortedTimestamps = [...byBucket.keys()].sort()
+  for (const ts of sortedTimestamps) {
+    const vendorMap = byBucket.get(ts)!
+    const label = labelByTs.get(ts) ?? ts
+    const totalAtBucket =
+      [...vendorMap.values()].reduce((s, v) => s + v, 0) || 1
+
+    for (const vendor of topVendors) {
+      const tokens = vendorMap.get(vendor) ?? 0
+      points.push({
+        ts,
+        label,
+        vendor,
+        share: tokens / totalAtBucket,
+        tokens,
+      })
+    }
+    if (hasOthers) {
+      let othersTokens = 0
+      for (const vendor of otherVendors) {
+        othersTokens += vendorMap.get(vendor) ?? 0
+      }
+      points.push({
+        ts,
+        label,
+        vendor: OTHERS_LABEL,
+        share: othersTokens / totalAtBucket,
+        tokens: othersTokens,
+      })
+    }
+  }
+
+  const vendors = topVendors
+    .map((name) => {
+      const total = vendorTotals.get(name) ?? 0
+      return { name, total, share: total / grand }
+    })
+    .sort((a, b) => b.total - a.total)
+  if (hasOthers) {
+    let othersTotal = 0
+    for (const vendor of otherVendors) {
+      othersTotal += vendorTotals.get(vendor) ?? 0
+    }
+    vendors.push({
+      name: OTHERS_LABEL,
+      total: othersTotal,
+      share: othersTotal / grand,
+    })
+  }
+
+  return { points, vendors, buckets: history.buckets }
+}
+
+/**
+ * Build a single per-category section. Used by `buildRankingsSnapshot` to
+ * eagerly compute every category section the page renders inline (rather
+ * than gating them behind a top-level filter).
+ */
+function buildCategorySection(
+  period: RankingPeriod,
+  category: RankingCategory
+): CategorySection {
+  const models = buildModelRankings(period, category.id).slice(0, 12)
+  const models_history = buildModelsHistory(period, models)
+  const total_tokens = models.reduce((s, m) => s + m.total_tokens, 0)
+  return {
+    category: category.id,
+    label: category.label,
+    description: category.description,
+    models,
+    models_history,
+    total_tokens,
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Public entry point
+// ----------------------------------------------------------------------------
+
+/**
+ * Build a full leaderboard snapshot for the given period.
+ *
+ * The snapshot bundles the overall (all-categories) view used by the page
+ * header sections **and** an independent ranking unit for each non-`all`
+ * category — so the page can render every category inline instead of
+ * gating the data behind a category filter.
+ */
+export function buildRankingsSnapshot(period: RankingPeriod): RankingsSnapshot {
+  const models = buildModelRankings(period, 'all')
+  const apps = buildAppListings(period, 'all', models)
+  const vendors = buildVendorRankings(models)
+  const { movers, droppers } = buildMovers(models)
+  const new_models = buildNewModels(period)
+  const models_history = buildModelsHistory(period, models)
+  const vendor_share_history = buildVendorShareHistory(models_history)
+
+  const category_sections = RANKING_CATEGORIES.filter(
+    (c) => c.id !== 'all'
+  ).map((c) => buildCategorySection(period, c))
+
+  return {
+    models,
+    apps,
+    vendors,
+    top_movers: movers,
+    top_droppers: droppers,
+    new_models,
+    models_history,
+    vendor_share_history,
+    category_sections,
+  }
+}
diff --git a/web/default/src/features/rankings/types.ts b/web/default/src/features/rankings/types.ts
new file mode 100644
index 00000000000..eb851c75ac3
--- /dev/null
+++ b/web/default/src/features/rankings/types.ts
@@ -0,0 +1,199 @@
+// ----------------------------------------------------------------------------
+// Rankings types
+// ----------------------------------------------------------------------------
+//
+// Shape of the data shown on the /rankings page. The backend has not yet
+// implemented these analytics endpoints, so the helpers in
+// `lib/mock-rankings.ts` produce deterministic mock values seeded from the
+// (period, category) tuple. When the real APIs land, these types double as
+// the response shape the UI expects.
+
+export type RankingPeriod = 'today' | 'week' | 'month' | 'year' | 'all'
+
+export type RankingCategoryId =
+  | 'all'
+  | 'programming'
+  | 'roleplay'
+  | 'marketing'
+  | 'translation'
+  | 'science'
+  | 'finance'
+  | 'health'
+  | 'legal'
+  | 'education'
+  | 'productivity'
+  | 'multimodal'
+
+export type RankingCategory = {
+  id: RankingCategoryId
+  /** Default English label, fed through i18n at render time. */
+  label: string
+  description: string
+}
+
+export type ModelRanking = {
+  rank: number
+  /** Previous rank in the same period; undefined means "new". */
+  previous_rank?: number
+  model_name: string
+  vendor: string
+  vendor_icon?: string
+  category: RankingCategoryId
+  /** Total tokens routed through this model in the period. */
+  total_tokens: number
+  /** Share of all tokens served (0..1). */
+  share: number
+  /** Period-over-period change in token volume (%). */
+  growth_pct: number
+}
+
+export type AppCategory =
+  | 'Coding'
+  | 'Chat'
+  | 'Productivity'
+  | 'Education'
+  | 'Creative'
+  | 'Roleplay'
+  | 'Translation'
+  | 'Marketing'
+  | 'Health'
+  | 'Finance'
+  | 'Research'
+  | 'Other'
+
+export type AppListing = {
+  rank: number
+  previous_rank?: number
+  name: string
+  description: string
+  category: AppCategory
+  url?: string
+  /** Total tokens this app sent through new-api in the period. */
+  total_tokens: number
+  /** Period-over-period change. */
+  growth_pct: number
+  /** Top model used by this app (model_name). */
+  top_model: string
+  /** Logo letter / initial. */
+  initial: string
+}
+
+export type VendorRanking = {
+  rank: number
+  vendor: string
+  vendor_icon?: string
+  total_tokens: number
+  share: number
+  growth_pct: number
+  /** Number of distinct models from this vendor with traffic. */
+  models_count: number
+  /** Top model from this vendor in the period. */
+  top_model: string
+}
+
+export type RankingMover = {
+  model_name: string
+  vendor: string
+  vendor_icon?: string
+  /** Positive = climbed, negative = dropped. */
+  rank_delta: number
+  current_rank: number
+  /** Token-volume change percent. */
+  growth_pct: number
+}
+
+export type NewModelEntry = {
+  model_name: string
+  vendor: string
+  vendor_icon?: string
+  category: RankingCategoryId
+  release_date: string
+  total_tokens: number
+  /** % growth since the model launched. */
+  growth_pct: number
+}
+
+/**
+ * One sample of a model's token usage at a given timestamp.
+ * Flat shape ready to feed VChart's stacked-bar spec.
+ */
+export type ModelHistoryPoint = {
+  ts: string
+  /** Pre-formatted x-axis label (e.g. "May 5", "12:00"). */
+  label: string
+  /** Model display name shown in tooltip / legend. */
+  model: string
+  vendor: string
+  /** Token count routed through the model in this bucket. */
+  tokens: number
+}
+
+export type ModelHistorySeries = {
+  /** Flat points ready for VChart, ordered oldest → newest. */
+  points: ModelHistoryPoint[]
+  /** Models that appear in the series, sorted by total tokens desc. */
+  models: Array<{ name: string; vendor: string; total: number }>
+  /** Bucket count (used for sizing axis ticks). */
+  buckets: number
+}
+
+/**
+ * One sample of a vendor's market share at a given timestamp. `share` is
+ * normalised within the bucket (sums to 1.0 across all vendors at the same
+ * `ts`); `tokens` is preserved for tooltip use.
+ */
+export type VendorSharePoint = {
+  ts: string
+  label: string
+  vendor: string
+  share: number
+  tokens: number
+}
+
+export type VendorShareSeries = {
+  /** Flat points ready for VChart, ordered oldest → newest. */
+  points: VendorSharePoint[]
+  /** Vendors that appear in the series, sorted by aggregate tokens desc. */
+  vendors: Array<{ name: string; total: number; share: number }>
+  buckets: number
+}
+
+/**
+ * Self-contained ranking unit for a single category. Pairs the small
+ * stacked-bar chart with the leaderboard data it summarises so
+ * `<CategorySection>` can render both halves from one prop. Every
+ * category gets one of these rendered inline on the rankings page.
+ */
+export type CategorySection = {
+  category: RankingCategoryId
+  /** English source label, fed through i18n at render time. */
+  label: string
+  /** English source description, fed through i18n at render time. */
+  description: string
+  /** Top models in this category, ordered by total tokens desc. */
+  models: ModelRanking[]
+  /** Stacked-bar history of token usage by model in this category. */
+  models_history: ModelHistorySeries
+  /** Sum of all `models[].total_tokens` (cached for the section header). */
+  total_tokens: number
+}
+
+export type RankingsSnapshot = {
+  // Overall (all categories) ------------------------------------------------
+  models: ModelRanking[]
+  apps: AppListing[]
+  vendors: VendorRanking[]
+  /** Largest rank gainers in this period. */
+  top_movers: RankingMover[]
+  /** Largest rank losers in this period. */
+  top_droppers: RankingMover[]
+  /** Newly launched / recently added models. */
+  new_models: NewModelEntry[]
+  /** Stacked-bar history of token usage by model over the period. */
+  models_history: ModelHistorySeries
+  /** 100%-stacked area history of token share by vendor over the period. */
+  vendor_share_history: VendorShareSeries
+  // Per-category sections ---------------------------------------------------
+  /** Independent ranking sections, one per non-`all` category. */
+  category_sections: CategorySection[]
+}
diff --git a/web/default/src/features/redemption-codes/components/data-table-bulk-actions.tsx b/web/default/src/features/redemption-codes/components/data-table-bulk-actions.tsx
index 8cde9fdb55f..6ee4081131c 100644
--- a/web/default/src/features/redemption-codes/components/data-table-bulk-actions.tsx
+++ b/web/default/src/features/redemption-codes/components/data-table-bulk-actions.tsx
@@ -73,18 +73,20 @@ export function DataTableBulkActions<TData>({
         />
 
         <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant='destructive'
-              size='icon'
-              onClick={() => setShowDeleteInvalidConfirm(true)}
-              className='size-8'
-              aria-label={t('Delete invalid redemption codes')}
-              title={t('Delete invalid redemption codes')}
-            >
-              <Trash2 />
-              <span className='sr-only'>{t('Delete invalid codes')}</span>
-            </Button>
+          <TooltipTrigger
+            render={
+              <Button
+                variant='destructive'
+                size='icon'
+                onClick={() => setShowDeleteInvalidConfirm(true)}
+                className='size-8'
+                aria-label={t('Delete invalid redemption codes')}
+                title={t('Delete invalid redemption codes')}
+              />
+            }
+          >
+            <Trash2 />
+            <span className='sr-only'>{t('Delete invalid codes')}</span>
           </TooltipTrigger>
           <TooltipContent>
             <p>{t('Delete invalid codes (used/disabled/expired)')}</p>
diff --git a/web/default/src/features/redemption-codes/components/data-table-row-actions.tsx b/web/default/src/features/redemption-codes/components/data-table-row-actions.tsx
index 7f1743a35ca..79ee621da58 100644
--- a/web/default/src/features/redemption-codes/components/data-table-row-actions.tsx
+++ b/web/default/src/features/redemption-codes/components/data-table-row-actions.tsx
@@ -1,6 +1,11 @@
-import { DotsHorizontalIcon } from '@radix-ui/react-icons'
 import { type Row } from '@tanstack/react-table'
-import { Trash2, Edit, Power, PowerOff } from 'lucide-react'
+import {
+  Trash2,
+  Edit,
+  Power,
+  PowerOff,
+  MoreHorizontal as DotsHorizontalIcon,
+} from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
@@ -55,14 +60,16 @@ export function DataTableRowActions<TData>({
 
   return (
     <DropdownMenu modal={false}>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant='ghost'
-          className='data-[state=open]:bg-muted flex h-8 w-8 p-0'
-        >
-          <DotsHorizontalIcon className='h-4 w-4' />
-          <span className='sr-only'>{t('Open menu')}</span>
-        </Button>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant='ghost'
+            className='data-popup-open:bg-muted flex h-8 w-8 p-0'
+          />
+        }
+      >
+        <DotsHorizontalIcon className='h-4 w-4' />
+        <span className='sr-only'>{t('Open menu')}</span>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end' className='w-[160px]'>
         <DropdownMenuItem
diff --git a/web/default/src/features/redemption-codes/components/redemptions-columns.tsx b/web/default/src/features/redemption-codes/components/redemptions-columns.tsx
index e09062c7844..548f30a48a3 100644
--- a/web/default/src/features/redemption-codes/components/redemptions-columns.tsx
+++ b/web/default/src/features/redemption-codes/components/redemptions-columns.tsx
@@ -23,10 +23,8 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
       meta: { label: t('Select') },
       header: ({ table }) => (
         <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && 'indeterminate')
-          }
+          checked={table.getIsAllPageRowsSelected()}
+          indeterminate={table.getIsSomePageRowsSelected()}
           onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
           aria-label={t('Select all')}
           className='translate-y-[2px]'
@@ -217,14 +215,16 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
 
         return (
           <Tooltip>
-            <TooltipTrigger asChild>
-              <StatusBadge
-                label={t('User {{id}}', { id: userId })}
-                variant='neutral'
-                copyable={false}
-                className='cursor-help'
-              />
-            </TooltipTrigger>
+            <TooltipTrigger
+              render={
+                <StatusBadge
+                  label={t('User {{id}}', { id: userId })}
+                  variant='neutral'
+                  copyable={false}
+                  className='cursor-help'
+                />
+              }
+            ></TooltipTrigger>
             <TooltipContent>
               <div className='space-y-1 text-xs'>
                 <div>
diff --git a/web/default/src/features/redemption-codes/components/redemptions-mutate-drawer.tsx b/web/default/src/features/redemption-codes/components/redemptions-mutate-drawer.tsx
index 70a715c6436..eff32dbe1f6 100644
--- a/web/default/src/features/redemption-codes/components/redemptions-mutate-drawer.tsx
+++ b/web/default/src/features/redemption-codes/components/redemptions-mutate-drawer.tsx
@@ -288,8 +288,8 @@ export function RedemptionsMutateDrawer({
           </form>
         </Form>
         <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
-          <SheetClose asChild>
-            <Button variant='outline'>{t('Close')}</Button>
+          <SheetClose render={<Button variant='outline' />}>
+            {t('Close')}
           </SheetClose>
           <Button form='redemption-form' type='submit' disabled={isSubmitting}>
             {isSubmitting ? t('Saving...') : t('Save changes')}
diff --git a/web/default/src/features/redemption-codes/components/redemptions-table.tsx b/web/default/src/features/redemption-codes/components/redemptions-table.tsx
index 34ba046d524..9aaf8b8937b 100644
--- a/web/default/src/features/redemption-codes/components/redemptions-table.tsx
+++ b/web/default/src/features/redemption-codes/components/redemptions-table.tsx
@@ -4,7 +4,6 @@ import { getRouteApi } from '@tanstack/react-router'
 import {
   type SortingState,
   type VisibilityState,
-  flexRender,
   getCoreRowModel,
   getFacetedRowModel,
   getFacetedUniqueValues,
@@ -15,26 +14,12 @@ import {
 } from '@tanstack/react-table'
 import { useMediaQuery } from '@/hooks'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
 import { useTableUrlState } from '@/hooks/use-table-url-state'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
 import {
   DISABLED_ROW_DESKTOP,
   DISABLED_ROW_MOBILE,
-  DataTablePagination,
-  DataTableToolbar,
-  TableSkeleton,
-  TableEmpty,
-  MobileCardList,
+  DataTablePage,
 } from '@/components/data-table'
-import { PageFooterPortal } from '@/components/layout'
 import { getRedemptions, searchRedemptions } from '../api'
 import { REDEMPTION_STATUS, getRedemptionStatusOptions } from '../constants'
 import { isRedemptionExpired } from '../lib'
@@ -153,109 +138,34 @@ export function RedemptionsTable() {
   )
 
   return (
-    <>
-      <div className='space-y-3 sm:space-y-4'>
-        <DataTableToolbar
-          table={table}
-          searchPlaceholder={t('Filter by name or ID...')}
-          filters={[
-            {
-              columnId: 'status',
-              title: t('Status'),
-              options: redemptionStatusOptions,
-            },
-          ]}
-        />
-        {isMobile ? (
-          <MobileCardList
-            table={table}
-            isLoading={isLoading}
-            emptyTitle={t('No Redemption Codes Found')}
-            emptyDescription={t(
-              'No redemption codes available. Create your first redemption code to get started.'
-            )}
-            getRowClassName={(row) =>
-              isDisabledRedemptionRow(row.original)
-                ? DISABLED_ROW_MOBILE
-                : undefined
-            }
-          />
-        ) : (
-          <>
-            <div
-              className={cn(
-                'overflow-hidden rounded-md border transition-opacity duration-150',
-                isFetching && !isLoading && 'pointer-events-none opacity-50'
-              )}
-            >
-              <Table>
-                <TableHeader>
-                  {table.getHeaderGroups().map((headerGroup) => (
-                    <TableRow key={headerGroup.id}>
-                      {headerGroup.headers.map((header) => {
-                        return (
-                          <TableHead key={header.id} colSpan={header.colSpan}>
-                            {header.isPlaceholder
-                              ? null
-                              : flexRender(
-                                  header.column.columnDef.header,
-                                  header.getContext()
-                                )}
-                          </TableHead>
-                        )
-                      })}
-                    </TableRow>
-                  ))}
-                </TableHeader>
-                <TableBody>
-                  {isLoading ? (
-                    <TableSkeleton
-                      table={table}
-                      keyPrefix='redemptions-skeleton'
-                    />
-                  ) : table.getRowModel().rows.length === 0 ? (
-                    <TableEmpty
-                      colSpan={columns.length}
-                      title={t('No Redemption Codes Found')}
-                      description={t(
-                        'No redemption codes available. Create your first redemption code to get started.'
-                      )}
-                    />
-                  ) : (
-                    table.getRowModel().rows.map((row) => {
-                      const redemption = row.original
-
-                      return (
-                        <TableRow
-                          key={row.id}
-                          data-state={row.getIsSelected() && 'selected'}
-                          className={cn(
-                            isDisabledRedemptionRow(redemption) &&
-                              DISABLED_ROW_DESKTOP
-                          )}
-                        >
-                          {row.getVisibleCells().map((cell) => (
-                            <TableCell key={cell.id}>
-                              {flexRender(
-                                cell.column.columnDef.cell,
-                                cell.getContext()
-                              )}
-                            </TableCell>
-                          ))}
-                        </TableRow>
-                      )
-                    })
-                  )}
-                </TableBody>
-              </Table>
-            </div>
-            <DataTableBulkActions table={table} />
-          </>
-        )}
-      </div>
-      <PageFooterPortal>
-        <DataTablePagination table={table} />
-      </PageFooterPortal>
-    </>
+    <DataTablePage
+      table={table}
+      columns={columns}
+      isLoading={isLoading}
+      isFetching={isFetching}
+      emptyTitle={t('No Redemption Codes Found')}
+      emptyDescription={t(
+        'No redemption codes available. Create your first redemption code to get started.'
+      )}
+      skeletonKeyPrefix='redemptions-skeleton'
+      toolbarProps={{
+        searchPlaceholder: t('Filter by name or ID...'),
+        filters: [
+          {
+            columnId: 'status',
+            title: t('Status'),
+            options: redemptionStatusOptions,
+          },
+        ],
+      }}
+      getRowClassName={(row, { isMobile }) =>
+        isDisabledRedemptionRow(row.original)
+          ? isMobile
+            ? DISABLED_ROW_MOBILE
+            : DISABLED_ROW_DESKTOP
+          : undefined
+      }
+      bulkActions={<DataTableBulkActions table={table} />}
+    />
   )
 }
diff --git a/web/default/src/features/setup/components/usage-mode-step.tsx b/web/default/src/features/setup/components/usage-mode-step.tsx
index 86d0b58d815..275f97497db 100644
--- a/web/default/src/features/setup/components/usage-mode-step.tsx
+++ b/web/default/src/features/setup/components/usage-mode-step.tsx
@@ -68,16 +68,12 @@ export function UsageModeStep({ form }: UsageModeStepProps) {
             >
               {USAGE_MODE_OPTIONS.map(
                 ({ value, titleKey, descriptionKey, icon: Icon }) => {
-                  const isSelected = field.value === value
                   return (
                     <Label
                       key={value}
                       htmlFor={`usage-mode-${value}`}
                       className={cn(
-                        'hover:border-primary/40 focus-within:border-primary/50 group bg-card flex cursor-pointer flex-col gap-3 rounded-xl border p-4 font-normal transition-all',
-                        isSelected
-                          ? 'border-primary ring-primary/20 ring-2'
-                          : 'border-muted'
+                        'hover:border-primary/40 focus-within:border-primary/50 has-data-[checked]:border-primary has-data-[checked]:ring-primary/20 group bg-card border-muted flex cursor-pointer flex-col gap-3 rounded-xl border p-4 font-normal transition-all has-data-[checked]:ring-2'
                       )}
                     >
                       <div className='flex items-center gap-3'>
@@ -97,7 +93,7 @@ export function UsageModeStep({ form }: UsageModeStepProps) {
                             {t(descriptionKey)}
                           </p>
                         </div>
-                        <Icon className='text-muted-foreground/70 group-hover:text-primary group-focus:text-primary ml-auto size-5 shrink-0 transition' />
+                        <Icon className='text-muted-foreground/70 group-hover:text-primary group-focus-within:text-primary group-has-data-[checked]:text-primary ml-auto size-5 shrink-0 transition' />
                       </div>
                     </Label>
                   )
diff --git a/web/default/src/features/subscriptions/components/data-table-row-actions.tsx b/web/default/src/features/subscriptions/components/data-table-row-actions.tsx
index bd3b3e0380d..1f274916feb 100644
--- a/web/default/src/features/subscriptions/components/data-table-row-actions.tsx
+++ b/web/default/src/features/subscriptions/components/data-table-row-actions.tsx
@@ -21,10 +21,10 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='ghost' className='h-8 w-8 p-0'>
-          <MoreHorizontal className='h-4 w-4' />
-        </Button>
+      <DropdownMenuTrigger
+        render={<Button variant='ghost' className='h-8 w-8 p-0' />}
+      >
+        <MoreHorizontal className='h-4 w-4' />
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end'>
         <DropdownMenuItem
diff --git a/web/default/src/features/subscriptions/components/dialogs/subscription-purchase-dialog.tsx b/web/default/src/features/subscriptions/components/dialogs/subscription-purchase-dialog.tsx
index 04bec975d07..81abc7da4d3 100644
--- a/web/default/src/features/subscriptions/components/dialogs/subscription-purchase-dialog.tsx
+++ b/web/default/src/features/subscriptions/components/dialogs/subscription-purchase-dialog.tsx
@@ -17,8 +17,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { GroupBadge } from '@/components/group-badge'
 import { Separator } from '@/components/ui/separator'
+import { GroupBadge } from '@/components/group-badge'
 import {
   paySubscriptionStripe,
   paySubscriptionCreem,
@@ -266,7 +266,9 @@ export function SubscriptionPurchaseDialog(props: Props) {
                 <div className='grid grid-cols-[minmax(0,1fr)_auto] gap-2'>
                   <Select
                     value={selectedEpayMethod}
-                    onValueChange={setSelectedEpayMethod}
+                    onValueChange={(v) =>
+                      v !== null && setSelectedEpayMethod(v)
+                    }
                     disabled={limitReached}
                   >
                     <SelectTrigger className='flex-1'>
diff --git a/web/default/src/features/subscriptions/components/dialogs/user-subscriptions-dialog.tsx b/web/default/src/features/subscriptions/components/dialogs/user-subscriptions-dialog.tsx
index c726075a538..437199bc795 100644
--- a/web/default/src/features/subscriptions/components/dialogs/user-subscriptions-dialog.tsx
+++ b/web/default/src/features/subscriptions/components/dialogs/user-subscriptions-dialog.tsx
@@ -182,7 +182,10 @@ export function UserSubscriptionsDialog(props: Props) {
 
           <div className='mt-4 space-y-4'>
             <div className='flex gap-2'>
-              <Select value={selectedPlanId} onValueChange={setSelectedPlanId}>
+              <Select
+                value={selectedPlanId}
+                onValueChange={(v) => v !== null && setSelectedPlanId(v)}
+              >
                 <SelectTrigger className='flex-1'>
                   <SelectValue placeholder={t('Select subscription plan')} />
                 </SelectTrigger>
diff --git a/web/default/src/features/subscriptions/components/subscriptions-columns.tsx b/web/default/src/features/subscriptions/components/subscriptions-columns.tsx
index fff81818b33..db5dc76bb4a 100644
--- a/web/default/src/features/subscriptions/components/subscriptions-columns.tsx
+++ b/web/default/src/features/subscriptions/components/subscriptions-columns.tsx
@@ -174,7 +174,9 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
         cell: ({ row }) => {
           const group = row.original.plan.upgrade_group
           if (!group) {
-            return <span className='text-muted-foreground'>{t('No Upgrade')}</span>
+            return (
+              <span className='text-muted-foreground'>{t('No Upgrade')}</span>
+            )
           }
           return <GroupBadge group={group} />
         },
diff --git a/web/default/src/features/subscriptions/components/subscriptions-mutate-drawer.tsx b/web/default/src/features/subscriptions/components/subscriptions-mutate-drawer.tsx
index 9562261afed..5968466ad0e 100644
--- a/web/default/src/features/subscriptions/components/subscriptions-mutate-drawer.tsx
+++ b/web/default/src/features/subscriptions/components/subscriptions-mutate-drawer.tsx
@@ -509,8 +509,8 @@ export function SubscriptionsMutateDrawer({
           </form>
         </Form>
         <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
-          <SheetClose asChild>
-            <Button variant='outline'>{t('Close')}</Button>
+          <SheetClose render={<Button variant='outline' />}>
+            {t('Close')}
           </SheetClose>
           <Button
             form='subscription-form'
diff --git a/web/default/src/features/subscriptions/components/subscriptions-table.tsx b/web/default/src/features/subscriptions/components/subscriptions-table.tsx
index 04205b3317f..725c137c668 100644
--- a/web/default/src/features/subscriptions/components/subscriptions-table.tsx
+++ b/web/default/src/features/subscriptions/components/subscriptions-table.tsx
@@ -3,29 +3,13 @@ import { useQuery } from '@tanstack/react-query'
 import {
   type SortingState,
   type VisibilityState,
-  flexRender,
   getCoreRowModel,
   getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-import { useMediaQuery } from '@/hooks'
 import { useTranslation } from 'react-i18next'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
-import {
-  DataTablePagination,
-  TableSkeleton,
-  TableEmpty,
-  MobileCardList,
-} from '@/components/data-table'
-import { PageFooterPortal } from '@/components/layout'
+import { DataTablePage } from '@/components/data-table'
 import { getAdminPlans } from '../api'
 import { useSubscriptionsColumns } from './subscriptions-columns'
 import { useSubscriptions } from './subscriptions-provider'
@@ -34,7 +18,6 @@ export function SubscriptionsTable() {
   const { t } = useTranslation()
   const columns = useSubscriptionsColumns()
   const { refreshTrigger } = useSubscriptions()
-  const isMobile = useMediaQuery('(max-width: 640px)')
   const [sorting, setSorting] = useState<SortingState>([])
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
 
@@ -61,72 +44,15 @@ export function SubscriptionsTable() {
   })
 
   return (
-    <>
-      <div className='space-y-3 sm:space-y-4'>
-        {isMobile ? (
-          <MobileCardList
-            table={table}
-            isLoading={isLoading}
-            emptyTitle={t('No subscription plans yet')}
-            emptyDescription={t(
-              'Click "Create Plan" to create your first subscription plan'
-            )}
-          />
-        ) : (
-          <div className='overflow-hidden rounded-md border'>
-            <Table>
-              <TableHeader>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => (
-                      <TableHead key={header.id} colSpan={header.colSpan}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                      </TableHead>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody>
-                {isLoading ? (
-                  <TableSkeleton
-                    table={table}
-                    keyPrefix='subscriptions-skeleton'
-                  />
-                ) : table.getRowModel().rows.length === 0 ? (
-                  <TableEmpty
-                    colSpan={columns.length}
-                    title={t('No subscription plans yet')}
-                    description={t(
-                      'Click "Create Plan" to create your first subscription plan'
-                    )}
-                  />
-                ) : (
-                  table.getRowModel().rows.map((row) => (
-                    <TableRow key={row.id}>
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id}>
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext()
-                          )}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        )}
-      </div>
-      <PageFooterPortal>
-        <DataTablePagination table={table} />
-      </PageFooterPortal>
-    </>
+    <DataTablePage
+      table={table}
+      columns={columns}
+      isLoading={isLoading}
+      emptyTitle={t('No subscription plans yet')}
+      emptyDescription={t(
+        'Click "Create Plan" to create your first subscription plan'
+      )}
+      skeletonKeyPrefix='subscriptions-skeleton'
+    />
   )
 }
diff --git a/web/default/src/features/system-settings/auth/custom-oauth/components/preset-selector.tsx b/web/default/src/features/system-settings/auth/custom-oauth/components/preset-selector.tsx
index 48b82d5a836..e5ea590d296 100644
--- a/web/default/src/features/system-settings/auth/custom-oauth/components/preset-selector.tsx
+++ b/web/default/src/features/system-settings/auth/custom-oauth/components/preset-selector.tsx
@@ -88,7 +88,10 @@ export function PresetSelector(props: PresetSelectorProps) {
       <div className='grid grid-cols-1 gap-3 sm:grid-cols-2'>
         <div className='space-y-1.5'>
           <Label>{t('Preset Template')}</Label>
-          <Select value={selectedPreset} onValueChange={handlePresetChange}>
+          <Select
+            value={selectedPreset}
+            onValueChange={(v) => v !== null && handlePresetChange(v)}
+          >
             <SelectTrigger className='w-full'>
               <SelectValue placeholder={t('Select a preset...')} />
             </SelectTrigger>
diff --git a/web/default/src/features/system-settings/general/channel-affinity/index.tsx b/web/default/src/features/system-settings/general/channel-affinity/index.tsx
index 07068fb4e59..1e00e479d91 100644
--- a/web/default/src/features/system-settings/general/channel-affinity/index.tsx
+++ b/web/default/src/features/system-settings/general/channel-affinity/index.tsx
@@ -387,11 +387,11 @@ export function ChannelAffinitySection(props: Props) {
             JSON
           </Button>
           <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant='outline' size='sm'>
-                <Plus className='mr-1 h-3 w-3' />
-                {t('Add Rule')}
-              </Button>
+            <DropdownMenuTrigger
+              render={<Button variant='outline' size='sm' />}
+            >
+              <Plus className='mr-1 h-3 w-3' />
+              {t('Add Rule')}
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               <DropdownMenuItem
diff --git a/web/default/src/features/system-settings/general/channel-affinity/rule-editor-dialog.tsx b/web/default/src/features/system-settings/general/channel-affinity/rule-editor-dialog.tsx
index b5c014d99cb..e1ea5246289 100644
--- a/web/default/src/features/system-settings/general/channel-affinity/rule-editor-dialog.tsx
+++ b/web/default/src/features/system-settings/general/channel-affinity/rule-editor-dialog.tsx
@@ -277,9 +277,13 @@ export function RuleEditorDialog(props: Props) {
                 <div key={idx} className='flex items-center gap-2'>
                   <Select
                     value={src.type}
-                    onValueChange={(v: KeySource['type']) => {
+                    onValueChange={(v) => {
+                      if (v === null) return
                       const next = [...keySources]
-                      next[idx] = normalizeKeySource({ ...src, type: v })
+                      next[idx] = normalizeKeySource({
+                        ...src,
+                        type: v as KeySource['type'],
+                      })
                       setKeySources(next)
                     }}
                   >
@@ -333,14 +337,16 @@ export function RuleEditorDialog(props: Props) {
 
           {/* Advanced */}
           <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
-            <CollapsibleTrigger asChild>
-              <Button
-                type='button'
-                variant='ghost'
-                className='w-full justify-start'
-              >
-                {advancedOpen ? '▼' : '▶'} {t('Advanced Settings')}
-              </Button>
+            <CollapsibleTrigger
+              render={
+                <Button
+                  type='button'
+                  variant='ghost'
+                  className='w-full justify-start'
+                />
+              }
+            >
+              {advancedOpen ? '▼' : '▶'} {t('Advanced Settings')}
             </CollapsibleTrigger>
             <CollapsibleContent className='space-y-3 pt-2'>
               <div className='grid gap-1.5'>
diff --git a/web/default/src/features/system-settings/index.tsx b/web/default/src/features/system-settings/index.tsx
index 3f2f67bd2b4..cfe18ff5f61 100644
--- a/web/default/src/features/system-settings/index.tsx
+++ b/web/default/src/features/system-settings/index.tsx
@@ -1,17 +1,12 @@
 import { Outlet } from '@tanstack/react-router'
 import { Main } from '@/components/layout'
-import { AppHeader } from '@/components/layout/components/app-header'
 
 export function SystemSettings() {
   return (
-    <>
-      <AppHeader />
-
-      <Main>
-        <div className='min-h-0 flex-1 px-4 pt-6 pb-4'>
-          <Outlet />
-        </div>
-      </Main>
-    </>
+    <Main>
+      <div className='min-h-0 flex-1 px-4 pt-6 pb-4'>
+        <Outlet />
+      </div>
+    </Main>
   )
 }
diff --git a/web/default/src/features/system-settings/integrations/payment-methods-visual-editor.tsx b/web/default/src/features/system-settings/integrations/payment-methods-visual-editor.tsx
index cb49bd1b858..85f2dc4d881 100644
--- a/web/default/src/features/system-settings/integrations/payment-methods-visual-editor.tsx
+++ b/web/default/src/features/system-settings/integrations/payment-methods-visual-editor.tsx
@@ -213,11 +213,13 @@ export function PaymentMethodsVisualEditor({
         </div>
         <div className='flex gap-2'>
           <Popover>
-            <PopoverTrigger asChild>
-              <Button variant='outline' className='flex-1 sm:flex-none'>
-                <Lightbulb className='h-4 w-4 sm:mr-2' />
-                <span className='sm:inline'>{t('Templates')}</span>
-              </Button>
+            <PopoverTrigger
+              render={
+                <Button variant='outline' className='flex-1 sm:flex-none' />
+              }
+            >
+              <Lightbulb className='h-4 w-4 sm:mr-2' />
+              <span className='sm:inline'>{t('Templates')}</span>
             </PopoverTrigger>
             <PopoverContent className='w-60'>
               <div className='space-y-2'>
diff --git a/web/default/src/features/system-settings/maintenance/performance-section.tsx b/web/default/src/features/system-settings/maintenance/performance-section.tsx
index 69e2d7e970a..8002418171f 100644
--- a/web/default/src/features/system-settings/maintenance/performance-section.tsx
+++ b/web/default/src/features/system-settings/maintenance/performance-section.tsx
@@ -510,7 +510,7 @@ export function PerformanceSection(props: Props) {
                 <Label className='text-xs'>{t('Cleanup Mode')}</Label>
                 <Select
                   value={logCleanupMode}
-                  onValueChange={setLogCleanupMode}
+                  onValueChange={(v) => v !== null && setLogCleanupMode(v)}
                 >
                   <SelectTrigger className='w-[160px]'>
                     <SelectValue />
@@ -541,16 +541,18 @@ export function PerformanceSection(props: Props) {
                 />
               </div>
               <AlertDialog>
-                <AlertDialogTrigger asChild>
-                  <Button
-                    variant='destructive'
-                    size='sm'
-                    disabled={logCleanupLoading}
-                  >
-                    {logCleanupLoading
-                      ? t('Cleaning...')
-                      : t('Clean Up Log Files')}
-                  </Button>
+                <AlertDialogTrigger
+                  render={
+                    <Button
+                      variant='destructive'
+                      size='sm'
+                      disabled={logCleanupLoading}
+                    />
+                  }
+                >
+                  {logCleanupLoading
+                    ? t('Cleaning...')
+                    : t('Clean Up Log Files')}
                 </AlertDialogTrigger>
                 <AlertDialogContent>
                   <AlertDialogHeader>
@@ -604,10 +606,8 @@ export function PerformanceSection(props: Props) {
             {t('Refresh Stats')}
           </Button>
           <AlertDialog>
-            <AlertDialogTrigger asChild>
-              <Button variant='outline' size='sm'>
-                {t('Clean up inactive cache')}
-              </Button>
+            <AlertDialogTrigger render={<Button variant='outline' size='sm' />}>
+              {t('Clean up inactive cache')}
             </AlertDialogTrigger>
             <AlertDialogContent>
               <AlertDialogHeader>
diff --git a/web/default/src/features/system-settings/models/channel-selector-dialog.tsx b/web/default/src/features/system-settings/models/channel-selector-dialog.tsx
index 86490153acb..f58ef8c2dbe 100644
--- a/web/default/src/features/system-settings/models/channel-selector-dialog.tsx
+++ b/web/default/src/features/system-settings/models/channel-selector-dialog.tsx
@@ -119,10 +119,8 @@ export function ChannelSelectorDialog({
         id: 'select',
         header: ({ table }) => (
           <Checkbox
-            checked={
-              table.getIsAllPageRowsSelected() ||
-              (table.getIsSomePageRowsSelected() && 'indeterminate')
-            }
+            checked={table.getIsAllPageRowsSelected()}
+            indeterminate={table.getIsSomePageRowsSelected()}
             onCheckedChange={(value) =>
               table.toggleAllPageRowsSelected(!!value)
             }
@@ -225,7 +223,10 @@ export function ChannelSelectorDialog({
 
           return (
             <div className='flex items-center gap-2'>
-              <Select value={endpointType} onValueChange={handleTypeChange}>
+              <Select
+                value={endpointType}
+                onValueChange={(v) => v !== null && handleTypeChange(v)}
+              >
                 <SelectTrigger className='h-8 w-32'>
                   <SelectValue />
                 </SelectTrigger>
diff --git a/web/default/src/features/system-settings/models/group-ratio-visual-editor.tsx b/web/default/src/features/system-settings/models/group-ratio-visual-editor.tsx
index b80f7a2c63b..cf427329aa5 100644
--- a/web/default/src/features/system-settings/models/group-ratio-visual-editor.tsx
+++ b/web/default/src/features/system-settings/models/group-ratio-visual-editor.tsx
@@ -526,10 +526,10 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
                     <div className='rounded-lg border'>
                       <div className='flex items-center justify-between p-4'>
                         <div className='flex items-center gap-2'>
-                          <CollapsibleTrigger asChild>
-                            <Button variant='ghost' size='sm'>
-                              <ChevronDown className='h-4 w-4' />
-                            </Button>
+                          <CollapsibleTrigger
+                            render={<Button variant='ghost' size='sm' />}
+                          >
+                            <ChevronDown className='h-4 w-4' />
                           </CollapsibleTrigger>
                           <span className='font-semibold'>
                             {userGroupData.userGroup}
diff --git a/web/default/src/features/system-settings/models/group-special-usable-editor.tsx b/web/default/src/features/system-settings/models/group-special-usable-editor.tsx
index 3cb45dd276f..5d5ac2c2f4b 100644
--- a/web/default/src/features/system-settings/models/group-special-usable-editor.tsx
+++ b/web/default/src/features/system-settings/models/group-special-usable-editor.tsx
@@ -133,14 +133,16 @@ function GroupSection(props: GroupSectionProps) {
       <div className='rounded-lg border'>
         <div className='flex items-center justify-between p-3'>
           <div className='flex items-center gap-2'>
-            <CollapsibleTrigger asChild>
-              <Button variant='ghost' size='sm' className='h-6 w-6 p-0'>
-                {open ? (
-                  <ChevronUp className='h-4 w-4' />
-                ) : (
-                  <ChevronDown className='h-4 w-4' />
-                )}
-              </Button>
+            <CollapsibleTrigger
+              render={
+                <Button variant='ghost' size='sm' className='h-6 w-6 p-0' />
+              }
+            >
+              {open ? (
+                <ChevronUp className='h-4 w-4' />
+              ) : (
+                <ChevronDown className='h-4 w-4' />
+              )}
             </CollapsibleTrigger>
             <span className='font-semibold'>{props.groupName}</span>
             <StatusBadge variant='neutral' copyable={false}>
@@ -172,7 +174,9 @@ function GroupSection(props: GroupSectionProps) {
               <div key={rule._id} className='flex items-center gap-2'>
                 <Select
                   value={rule.op}
-                  onValueChange={(v) => props.onUpdate(rule._id, 'op', v)}
+                  onValueChange={(v) =>
+                    v !== null && props.onUpdate(rule._id, 'op', v)
+                  }
                 >
                   <SelectTrigger className='w-[130px]'>
                     <SelectValue>
diff --git a/web/default/src/features/system-settings/models/model-ratio-dialog.tsx b/web/default/src/features/system-settings/models/model-ratio-dialog.tsx
index 1982731b370..42c4c5e7a0f 100644
--- a/web/default/src/features/system-settings/models/model-ratio-dialog.tsx
+++ b/web/default/src/features/system-settings/models/model-ratio-dialog.tsx
@@ -478,19 +478,21 @@ export function ModelRatioDialog({
                 )}
 
                 <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
-                  <CollapsibleTrigger asChild>
-                    <Button
-                      type='button'
-                      variant='outline'
-                      className='flex w-full items-center justify-between'
-                    >
-                      {t('Advanced options')}
-                      <ChevronDown
-                        className={`h-4 w-4 transition-transform duration-200 ${
-                          advancedOpen ? 'rotate-180' : ''
-                        }`}
+                  <CollapsibleTrigger
+                    render={
+                      <Button
+                        type='button'
+                        variant='outline'
+                        className='flex w-full items-center justify-between'
                       />
-                    </Button>
+                    }
+                  >
+                    {t('Advanced options')}
+                    <ChevronDown
+                      className={`h-4 w-4 transition-transform duration-200 ${
+                        advancedOpen ? 'rotate-180' : ''
+                      }`}
+                    />
                   </CollapsibleTrigger>
                   <CollapsibleContent className='space-y-6 pt-6'>
                     <FormField
diff --git a/web/default/src/features/system-settings/models/tiered-pricing-editor.tsx b/web/default/src/features/system-settings/models/tiered-pricing-editor.tsx
index ca63afe229b..464c2ca611c 100644
--- a/web/default/src/features/system-settings/models/tiered-pricing-editor.tsx
+++ b/web/default/src/features/system-settings/models/tiered-pricing-editor.tsx
@@ -869,7 +869,9 @@ function RuleConditionRow({
       </Select>
       <Select
         value={timeCond.timezone}
-        onValueChange={(value) => onChange({ ...timeCond, timezone: value })}
+        onValueChange={(value) =>
+          value !== null && onChange({ ...timeCond, timezone: value })
+        }
       >
         <SelectTrigger className='w-56' size='sm'>
           <SelectValue />
@@ -882,7 +884,10 @@ function RuleConditionRow({
           ))}
         </SelectContent>
       </Select>
-      <Select value={timeCond.mode} onValueChange={handleModeChange}>
+      <Select
+        value={timeCond.mode}
+        onValueChange={(v) => v !== null && handleModeChange(v)}
+      >
         <SelectTrigger className='w-32' size='sm'>
           <SelectValue />
         </SelectTrigger>
@@ -937,7 +942,10 @@ function RuleConditionRow({
         }
         className='w-44'
       />
-      <Select value={phCond.mode} onValueChange={handleModeChange}>
+      <Select
+        value={phCond.mode}
+        onValueChange={(v) => v !== null && handleModeChange(v)}
+      >
         <SelectTrigger className='w-32' size='sm'>
           <SelectValue />
         </SelectTrigger>
@@ -964,7 +972,10 @@ function RuleConditionRow({
 
   return (
     <div className='flex flex-wrap items-center gap-2'>
-      <Select value={condition.source} onValueChange={handleSourceChange}>
+      <Select
+        value={condition.source}
+        onValueChange={(v) => v !== null && handleSourceChange(v)}
+      >
         <SelectTrigger className='w-28' size='sm'>
           <SelectValue />
         </SelectTrigger>
@@ -1388,11 +1399,13 @@ function LlmPromptHelper({ modelName }: LlmPromptHelperProps) {
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
-      <CollapsibleTrigger asChild>
-        <Button variant='ghost' size='sm' className='h-7 px-2 text-xs'>
-          <Copy className='mr-1.5 h-3 w-3' />
-          {t('LLM prompt helper')}
-        </Button>
+      <CollapsibleTrigger
+        render={
+          <Button variant='ghost' size='sm' className='h-7 px-2 text-xs' />
+        }
+      >
+        <Copy className='mr-1.5 h-3 w-3' />
+        {t('LLM prompt helper')}
       </CollapsibleTrigger>
       <CollapsibleContent className='mt-2'>
         <div className='bg-muted/30 rounded-md border p-3'>
diff --git a/web/default/src/features/system-settings/models/upstream-ratio-sync-columns.tsx b/web/default/src/features/system-settings/models/upstream-ratio-sync-columns.tsx
index 02e6f916bc9..51f009bc734 100644
--- a/web/default/src/features/system-settings/models/upstream-ratio-sync-columns.tsx
+++ b/web/default/src/features/system-settings/models/upstream-ratio-sync-columns.tsx
@@ -100,14 +100,16 @@ export function useUpstreamRatioSyncColumns(
                     ) : (
                       <TooltipProvider>
                         <Tooltip>
-                          <TooltipTrigger asChild>
-                            <StatusBadge
-                              label={String(current)}
-                              variant='info'
-                              size='sm'
-                              className='max-w-[200px] truncate'
-                            />
-                          </TooltipTrigger>
+                          <TooltipTrigger
+                            render={
+                              <StatusBadge
+                                label={String(current)}
+                                variant='info'
+                                size='sm'
+                                className='max-w-[200px] truncate'
+                              />
+                            }
+                          ></TooltipTrigger>
                           <TooltipContent>
                             <p className='max-w-xs text-xs break-all'>
                               {String(current)}
@@ -161,15 +163,12 @@ export function useUpstreamRatioSyncColumns(
             selectableCount > 0 && selectedCount === selectableCount
           const someSelected =
             selectedCount > 0 && selectedCount < selectableCount
-          let checkboxState: boolean | 'indeterminate' = false
-          if (allSelected) checkboxState = true
-          else if (someSelected) checkboxState = 'indeterminate'
-
           return (
             <div className='flex items-center gap-2'>
               {selectableCount > 0 && (
                 <Checkbox
-                  checked={checkboxState}
+                  checked={allSelected}
+                  indeterminate={someSelected}
                   disabled={isDisabled}
                   onCheckedChange={(checked) => {
                     if (checked) {
@@ -311,10 +310,12 @@ function renderUpstreamValue(args: RenderUpstreamValueArgs) {
       />
       <TooltipProvider>
         <Tooltip>
-          <TooltipTrigger asChild>
-            <span className='inline-block max-w-[240px] cursor-default truncate font-mono text-sm'>
-              {text}
-            </span>
+          <TooltipTrigger
+            render={
+              <span className='inline-block max-w-[240px] cursor-default truncate font-mono text-sm' />
+            }
+          >
+            {text}
           </TooltipTrigger>
           <TooltipContent>
             <p className='max-w-xs text-xs break-all'>{text}</p>
diff --git a/web/default/src/features/system-settings/models/upstream-ratio-sync-table.tsx b/web/default/src/features/system-settings/models/upstream-ratio-sync-table.tsx
index d47ee3b3458..fe39d600db4 100644
--- a/web/default/src/features/system-settings/models/upstream-ratio-sync-table.tsx
+++ b/web/default/src/features/system-settings/models/upstream-ratio-sync-table.tsx
@@ -213,7 +213,7 @@ export function UpstreamRatioSyncTable({
         </div>
         <Select
           value={ratioTypeFilter}
-          onValueChange={setRatioTypeFilter}
+          onValueChange={(v) => v !== null && setRatioTypeFilter(v)}
           disabled={isDisabled}
         >
           <SelectTrigger className='w-full sm:w-56'>
diff --git a/web/default/src/features/usage-logs/components/columns/column-helpers.tsx b/web/default/src/features/usage-logs/components/columns/column-helpers.tsx
index 60c1a546e31..ce180663b0a 100644
--- a/web/default/src/features/usage-logs/components/columns/column-helpers.tsx
+++ b/web/default/src/features/usage-logs/components/columns/column-helpers.tsx
@@ -32,9 +32,9 @@ export function CacheTooltip({
   return (
     <TooltipProvider>
       <Tooltip>
-        <TooltipTrigger asChild>
-          <Zap className={`size-3 flex-shrink-0 ${color}`} />
-        </TooltipTrigger>
+        <TooltipTrigger
+          render={<Zap className={`size-3 flex-shrink-0 ${color}`} />}
+        ></TooltipTrigger>
         <TooltipContent side='top'>
           <p className='text-xs'>
             {label}: {formatTokens(tokens)}
@@ -144,7 +144,8 @@ export function createDurationColumn<T>(config: {
         return <span className='text-muted-foreground/60 text-xs'>-</span>
       }
 
-      const variant = duration.durationSec > warningThresholdSec ? 'red' : 'green'
+      const variant =
+        duration.durationSec > warningThresholdSec ? 'red' : 'green'
 
       return (
         <span
@@ -269,7 +270,7 @@ export function createProgressColumn<T>(config: {
         return <span className='text-muted-foreground/60 text-xs'>-</span>
       }
       return (
-        <span className='inline-flex items-center rounded-md border border-border/60 bg-muted/30 px-1.5 py-0.5 font-mono text-xs'>
+        <span className='border-border/60 bg-muted/30 inline-flex items-center rounded-md border px-1.5 py-0.5 font-mono text-xs'>
           {progress}
         </span>
       )
diff --git a/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
index e54c9f235e4..9dd11802e99 100644
--- a/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { type ColumnDef } from '@tanstack/react-table'
 import { CircleAlert, Sparkles, KeyRound } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { getUserAvatarFallback, getUserAvatarStyle } from '@/lib/avatar'
 import { formatBillingCurrencyFromUSD } from '@/lib/currency'
 import {
   formatUseTime,
@@ -17,10 +18,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip'
 import { DataTableColumnHeader } from '@/components/data-table'
-import {
-  StatusBadge,
-  type StatusBadgeProps,
-} from '@/components/status-badge'
+import { StatusBadge, type StatusBadgeProps } from '@/components/status-badge'
 import type { UsageLog } from '../../data/schema'
 import {
   formatModelName,
@@ -31,7 +29,6 @@ import {
   parseLogOther,
   isViolationFeeLog,
 } from '../../lib/format'
-import { getLogAvatarStyle } from '../../lib/avatar-color'
 import {
   isDisplayableLogType,
   isTimingLogType,
@@ -131,11 +128,9 @@ function buildDetailSegments(
 
       const cacheEntries = tieredSummary.priceEntries
         .filter((entry) =>
-          [
-            'cacheReadPrice',
-            'cacheCreatePrice',
-            'cacheCreate1hPrice',
-          ].includes(entry.field)
+          ['cacheReadPrice', 'cacheCreatePrice', 'cacheCreate1hPrice'].includes(
+            entry.field
+          )
         )
         .map((entry) => {
           return formatPriceCompact(entry.price)
@@ -194,8 +189,7 @@ function buildDetailSegments(
           other.cache_ratio != null && other.cache_ratio !== 1
             ? formatPriceCompact(inputPriceUSD * other.cache_ratio)
             : null,
-          other.cache_creation_ratio != null &&
-          other.cache_creation_ratio !== 1
+          other.cache_creation_ratio != null && other.cache_creation_ratio !== 1
             ? formatPriceCompact(inputPriceUSD * other.cache_creation_ratio)
             : null,
           other.cache_creation_ratio_1h != null &&
@@ -285,11 +279,8 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
           <DataTableColumnHeader column={column} title={t('Channel')} />
         ),
         cell: function ChannelCell({ row }) {
-          const {
-            sensitiveVisible,
-            setAffinityTarget,
-            setAffinityDialogOpen,
-          } = useUsageLogsContext()
+          const { sensitiveVisible, setAffinityTarget, setAffinityDialogOpen } =
+            useUsageLogsContext()
           const log = row.original
 
           if (!isDisplayableLogType(log.type)) return null
@@ -310,48 +301,52 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
           return (
             <TooltipProvider>
               <Tooltip>
-                <TooltipTrigger asChild>
-                  <div className='flex max-w-[160px] flex-col gap-0.5'>
-                    <div className='relative inline-flex w-fit'>
-                      <StatusBadge
-                        label={channelIdDisplay}
-                        autoColor={String(log.channel)}
-                        copyText={String(log.channel)}
-                        size='sm'
-                        className='font-mono'
-                      />
-                      {affinity && (
-                        <button
-                          type='button'
-                          className='absolute -top-1 -right-1 leading-none text-amber-500'
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            setAffinityTarget({
-                              rule_name: affinity.rule_name || '',
-                              using_group:
-                                affinity.using_group ||
-                                affinity.selected_group ||
-                                '',
-                              key_hint: affinity.key_hint || '',
-                              key_fp: affinity.key_fp || '',
-                            })
-                            setAffinityDialogOpen(true)
-                          }}
-                        >
-                          <Sparkles className='size-3 fill-current' />
-                        </button>
-                      )}
-                    </div>
-                    {log.channel_name && (
-                      <span className='text-muted-foreground/70 truncate text-[11px]'>
-                        {channelName}
-                      </span>
+                <TooltipTrigger
+                  render={
+                    <div className='flex max-w-[160px] flex-col gap-0.5' />
+                  }
+                >
+                  <div className='relative inline-flex w-fit'>
+                    <StatusBadge
+                      label={channelIdDisplay}
+                      autoColor={String(log.channel)}
+                      copyText={String(log.channel)}
+                      size='sm'
+                      className='font-mono'
+                    />
+                    {affinity && (
+                      <button
+                        type='button'
+                        className='absolute -top-1 -right-1 leading-none text-amber-500'
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          setAffinityTarget({
+                            rule_name: affinity.rule_name || '',
+                            using_group:
+                              affinity.using_group ||
+                              affinity.selected_group ||
+                              '',
+                            key_hint: affinity.key_hint || '',
+                            key_fp: affinity.key_fp || '',
+                          })
+                          setAffinityDialogOpen(true)
+                        }}
+                      >
+                        <Sparkles className='size-3 fill-current' />
+                      </button>
                     )}
                   </div>
+                  {log.channel_name && (
+                    <span className='text-muted-foreground/70 truncate text-[11px]'>
+                      {channelName}
+                    </span>
+                  )}
                 </TooltipTrigger>
                 <TooltipContent>
                   <div className='space-y-1'>
-                    <p>{sensitiveVisible ? channelDisplay : channelIdDisplay}</p>
+                    <p>
+                      {sensitiveVisible ? channelDisplay : channelIdDisplay}
+                    </p>
                     {channelChain && (
                       <p className='text-muted-foreground text-xs'>
                         {t('Chain')}: {channelChain}
@@ -387,11 +382,8 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
           <DataTableColumnHeader column={column} title={t('User')} />
         ),
         cell: function UserCell({ row }) {
-          const {
-            sensitiveVisible,
-            setSelectedUserId,
-            setUserInfoDialogOpen,
-          } = useUsageLogsContext()
+          const { sensitiveVisible, setSelectedUserId, setUserInfoDialogOpen } =
+            useUsageLogsContext()
           const log = row.original
 
           if (!log.username) return null
@@ -406,7 +398,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                 setUserInfoDialogOpen(true)
               }}
             >
-              <Avatar className='size-6 ring-1 ring-border/60'>
+              <Avatar className='ring-border/60 size-6 ring-1'>
                 <AvatarFallback
                   className={cn(
                     'text-[11px] font-semibold',
@@ -414,13 +406,11 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                   )}
                   style={
                     sensitiveVisible
-                      ? getLogAvatarStyle(log.username)
+                      ? getUserAvatarStyle(log.username)
                       : undefined
                   }
                 >
-                  {sensitiveVisible
-                    ? log.username.charAt(0).toUpperCase()
-                    : '•'}
+                  {sensitiveVisible ? getUserAvatarFallback(log.username) : '•'}
                 </AvatarFallback>
               </Avatar>
               <span className='text-muted-foreground truncate text-sm hover:underline'>
@@ -467,7 +457,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
             copyText={sensitiveVisible ? tokenName : undefined}
             size='sm'
             showDot={false}
-            className='max-w-full overflow-hidden rounded-md border border-border/60 bg-muted/30 px-1.5 py-0.5 font-mono text-foreground'
+            className='border-border/60 bg-muted/30 text-foreground max-w-full overflow-hidden rounded-md border px-1.5 py-0.5 font-mono'
           />
           {metaParts.length > 0 && (
             <span className='text-muted-foreground/60 truncate text-[11px]'>
@@ -521,10 +511,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
           useTime > 0 && log.completion_tokens > 0
             ? log.completion_tokens / useTime
             : null
-        const timeVariant = getResponseTimeColor(
-          useTime,
-          log.completion_tokens
-        )
+        const timeVariant = getResponseTimeColor(useTime, log.completion_tokens)
         const frtVariant = frt ? getFirstResponseTimeColor(frt / 1000) : null
 
         const pillBg: Record<string, string> = {
@@ -565,21 +552,22 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                 />
                 {formatUseTime(useTime)}
               </span>
-              {log.is_stream && (frt != null && frt > 0 ? (
-                <span
-                  className={cn(
-                    'inline-flex items-center rounded-md px-1.5 py-0.5 font-mono text-xs font-medium',
-                    pillBg[frtVariant!],
-                    pillText[frtVariant!]
-                  )}
-                >
-                  {formatUseTime(frt / 1000)}
-                </span>
-              ) : (
-                <span className='inline-flex items-center rounded-md border border-border/60 px-1.5 py-0.5 text-[11px] text-muted-foreground/50'>
-                  N/A
-                </span>
-              ))}
+              {log.is_stream &&
+                (frt != null && frt > 0 ? (
+                  <span
+                    className={cn(
+                      'inline-flex items-center rounded-md px-1.5 py-0.5 font-mono text-xs font-medium',
+                      pillBg[frtVariant!],
+                      pillText[frtVariant!]
+                    )}
+                  >
+                    {formatUseTime(frt / 1000)}
+                  </span>
+                ) : (
+                  <span className='border-border/60 text-muted-foreground/50 inline-flex items-center rounded-md border px-1.5 py-0.5 text-[11px]'>
+                    N/A
+                  </span>
+                ))}
             </div>
             <div className='flex items-center gap-1 text-[11px]'>
               <span className='text-muted-foreground/60'>
@@ -599,9 +587,9 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
                 other.stream_status.status !== 'ok' && (
                   <TooltipProvider>
                     <Tooltip>
-                      <TooltipTrigger asChild>
-                        <CircleAlert className='size-3 text-red-500' />
-                      </TooltipTrigger>
+                      <TooltipTrigger
+                        render={<CircleAlert className='size-3 text-red-500' />}
+                      ></TooltipTrigger>
                       <TooltipContent>
                         <div className='space-y-0.5 text-xs'>
                           <p>
@@ -654,7 +642,8 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
         return (
           <div className='flex flex-col gap-0.5'>
             <span className='font-mono text-xs font-medium tabular-nums'>
-              {promptTokens.toLocaleString()} / {completionTokens.toLocaleString()}
+              {promptTokens.toLocaleString()} /{' '}
+              {completionTokens.toLocaleString()}
             </span>
             {(cacheReadTokens > 0 || cacheWriteTokens > 0) && (
               <div className='flex items-center gap-1 text-[11px]'>
@@ -693,11 +682,16 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
           return (
             <TooltipProvider>
               <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className='inline-flex items-center gap-1 rounded-md border border-emerald-200 bg-emerald-50 px-1.5 py-0.5 text-xs font-medium text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-300'>
-                    <span className='size-1.5 rounded-full bg-emerald-500' aria-hidden='true' />
-                    {t('Subscription')}
-                  </span>
+                <TooltipTrigger
+                  render={
+                    <span className='inline-flex items-center gap-1 rounded-md border border-emerald-200 bg-emerald-50 px-1.5 py-0.5 text-xs font-medium text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-300' />
+                  }
+                >
+                  <span
+                    className='size-1.5 rounded-full bg-emerald-500'
+                    aria-hidden='true'
+                  />
+                  {t('Subscription')}
                 </TooltipTrigger>
                 <TooltipContent>
                   <span>
@@ -713,7 +707,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
 
         return (
           <div className='flex flex-col gap-0.5'>
-            <span className='border-border/80 inline-flex w-fit items-center rounded-md border bg-muted/60 px-1.5 py-0.5 font-mono text-xs font-semibold tabular-nums'>
+            <span className='border-border/80 bg-muted/60 inline-flex w-fit items-center rounded-md border px-1.5 py-0.5 font-mono text-xs font-semibold tabular-nums'>
               {quotaStr}
             </span>
           </div>
diff --git a/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
index 3b11e6cf02d..63dacacc917 100644
--- a/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
@@ -140,7 +140,7 @@ export function useDrawingLogsColumns(
             autoColor={mjId}
             size='sm'
             showDot={false}
-            className='max-w-full truncate rounded-md border border-border/60 bg-muted/30 px-1.5 py-0.5 font-mono'
+            className='border-border/60 bg-muted/30 max-w-full truncate rounded-md border px-1.5 py-0.5 font-mono'
           />
         </div>
       )
diff --git a/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx b/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
index e1f48d6b49e..2cf241bd1d0 100644
--- a/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
+++ b/web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
@@ -3,24 +3,21 @@ import { useState, useMemo } from 'react'
 import type { ColumnDef } from '@tanstack/react-table'
 import { Music } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { getUserAvatarFallback, getUserAvatarStyle } from '@/lib/avatar'
 import { formatTimestampToDate } from '@/lib/format'
 import { cn } from '@/lib/utils'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import { DataTableColumnHeader } from '@/components/data-table'
 import { StatusBadge } from '@/components/status-badge'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import { TASK_ACTIONS, TASK_STATUS } from '../../constants'
-import {
-  taskActionMapper,
-  taskStatusMapper,
-} from '../../lib/mappers'
+import { taskActionMapper, taskStatusMapper } from '../../lib/mappers'
 import type { TaskLog } from '../../types'
-import { getLogAvatarStyle } from '../../lib/avatar-color'
-import { useUsageLogsContext } from '../usage-logs-provider'
 import {
   AudioPreviewDialog,
   type AudioClip,
 } from '../dialogs/audio-preview-dialog'
 import { FailReasonDialog } from '../dialogs/fail-reason-dialog'
+import { useUsageLogsContext } from '../usage-logs-provider'
 import {
   createDurationColumn,
   createChannelColumn,
@@ -60,7 +57,7 @@ function AudioPreviewCell({ log }: { log: TaskLog }) {
         className='group flex items-center gap-1 text-left text-xs'
         onClick={() => setOpen(true)}
       >
-        <Music className='size-3 text-muted-foreground' />
+        <Music className='text-muted-foreground size-3' />
         <span className='text-foreground leading-snug group-hover:underline'>
           {t('Click to preview audio')}
         </span>
@@ -106,56 +103,48 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
   ]
 
   if (isAdmin) {
-    columns.push(
-      createChannelColumn<TaskLog>({ headerLabel: t('Channel') }),
-      {
-        id: 'user',
-        header: ({ column }) => (
-          <DataTableColumnHeader column={column} title={t('User')} />
-        ),
-        cell: function UserCell({ row }) {
-          const {
-            sensitiveVisible,
-            setSelectedUserId,
-            setUserInfoDialogOpen,
-          } = useUsageLogsContext()
-          const log = row.original
-          const displayName = log.username || String(log.user_id || '?')
+    columns.push(createChannelColumn<TaskLog>({ headerLabel: t('Channel') }), {
+      id: 'user',
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title={t('User')} />
+      ),
+      cell: function UserCell({ row }) {
+        const { sensitiveVisible, setSelectedUserId, setUserInfoDialogOpen } =
+          useUsageLogsContext()
+        const log = row.original
+        const displayName = log.username || String(log.user_id || '?')
 
-          return (
-            <button
-              type='button'
-              className='flex items-center gap-1.5 text-left'
-              onClick={(e) => {
-                e.stopPropagation()
-                setSelectedUserId(log.user_id)
-                setUserInfoDialogOpen(true)
-              }}
-            >
-              <Avatar className='size-6 ring-1 ring-border/60'>
-                <AvatarFallback
-                  className={cn(
-                    'text-[11px] font-semibold',
-                    !sensitiveVisible && 'bg-muted text-muted-foreground'
-                  )}
-                  style={
-                    sensitiveVisible ? getLogAvatarStyle(displayName) : undefined
-                  }
-                >
-                  {sensitiveVisible
-                    ? displayName.charAt(0).toUpperCase()
-                    : '•'}
-                </AvatarFallback>
-              </Avatar>
-              <span className='text-muted-foreground truncate text-sm hover:underline'>
-                {sensitiveVisible ? displayName : '••••'}
-              </span>
-            </button>
-          )
-        },
-        meta: { label: t('User'), mobileHidden: true },
-      }
-    )
+        return (
+          <button
+            type='button'
+            className='flex items-center gap-1.5 text-left'
+            onClick={(e) => {
+              e.stopPropagation()
+              setSelectedUserId(log.user_id)
+              setUserInfoDialogOpen(true)
+            }}
+          >
+            <Avatar className='ring-border/60 size-6 ring-1'>
+              <AvatarFallback
+                className={cn(
+                  'text-[11px] font-semibold',
+                  !sensitiveVisible && 'bg-muted text-muted-foreground'
+                )}
+                style={
+                  sensitiveVisible ? getUserAvatarStyle(displayName) : undefined
+                }
+              >
+                {sensitiveVisible ? getUserAvatarFallback(displayName) : '•'}
+              </AvatarFallback>
+            </Avatar>
+            <span className='text-muted-foreground truncate text-sm hover:underline'>
+              {sensitiveVisible ? displayName : '••••'}
+            </span>
+          </button>
+        )
+      },
+      meta: { label: t('User'), mobileHidden: true },
+    })
   }
 
   columns.push(
@@ -177,7 +166,7 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
               autoColor={taskId}
               size='sm'
               showDot={false}
-              className='max-w-full truncate rounded-md border border-border/60 bg-muted/30 px-1.5 py-0.5 font-mono'
+              className='border-border/60 bg-muted/30 max-w-full truncate rounded-md border px-1.5 py-0.5 font-mono'
             />
             <span className='text-muted-foreground/60 truncate text-[11px]'>
               {t(log.platform)} · {t(taskActionMapper.getLabel(log.action))}
@@ -257,7 +246,7 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
               href={videoUrl}
               target='_blank'
               rel='noopener noreferrer'
-              className='text-xs text-foreground hover:underline'
+              className='text-foreground text-xs hover:underline'
             >
               {t('Click to preview video')}
             </a>
diff --git a/web/default/src/features/usage-logs/components/common-logs-filter-bar.tsx b/web/default/src/features/usage-logs/components/common-logs-filter-bar.tsx
index b48c180faf6..bac0ef5b934 100644
--- a/web/default/src/features/usage-logs/components/common-logs-filter-bar.tsx
+++ b/web/default/src/features/usage-logs/components/common-logs-filter-bar.tsx
@@ -1,11 +1,9 @@
-import { useState, useEffect, useCallback, type ReactNode } from 'react'
-import { useNavigate, getRouteApi } from '@tanstack/react-router'
+import { useState, useEffect, useCallback } from 'react'
 import { useQueryClient, useIsFetching } from '@tanstack/react-query'
-import { ChevronDown, Eye, EyeOff, Loader2, RotateCcw, Search } from 'lucide-react'
+import { useNavigate, getRouteApi } from '@tanstack/react-router'
+import { type Table } from '@tanstack/react-table'
 import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
 import { useIsAdmin } from '@/hooks/use-admin'
-import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import {
   Select,
@@ -14,6 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import { DataTableToolbar } from '@/components/data-table'
 import { LOG_TYPES } from '../constants'
 import { buildSearchParams } from '../lib/filter'
 import { getDefaultTimeRange } from '../lib/utils'
@@ -30,24 +29,21 @@ function isLogTypeValue(value: string): value is LogTypeValue {
   return (logTypeValues as readonly string[]).includes(value)
 }
 
-interface CommonLogsFilterBarProps {
-  stats?: ReactNode
-  viewOptions?: ReactNode
+interface CommonLogsFilterBarProps<TData> {
+  table: Table<TData>
 }
 
-export function CommonLogsFilterBar({
-  stats,
-  viewOptions,
-}: CommonLogsFilterBarProps) {
+export function CommonLogsFilterBar<TData>(
+  props: CommonLogsFilterBarProps<TData>
+) {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const queryClient = useQueryClient()
   const searchParams = route.useSearch()
   const isAdmin = useIsAdmin()
-  const { sensitiveVisible, setSensitiveVisible } = useUsageLogsContext()
+  const { sensitiveVisible } = useUsageLogsContext()
   const fetchingLogs = useIsFetching({ queryKey: ['logs'] })
 
-  const [expanded, setExpanded] = useState(false)
   const [filters, setFilters] = useState<CommonLogFilters>(() => {
     const { start, end } = getDefaultTimeRange()
     return { startTime: start, endTime: end }
@@ -140,10 +136,16 @@ export function CommonLogsFilterBar({
     !!filters.channel ||
     !!filters.requestId
 
+  const hasAdditionalFilters =
+    !!filters.model || !!filters.group || !!logType || hasExpandedFilters
+
+  const inputClass = 'w-full sm:w-[140px] lg:w-[160px]'
+  const sensitiveType = sensitiveVisible ? 'text' : 'password'
+
   return (
-    <div className='space-y-2 sm:space-y-3'>
-      {/* Primary filter row */}
-      <div className='grid grid-cols-2 gap-1.5 sm:grid-cols-4 sm:gap-2 lg:grid-cols-[minmax(280px,2fr)_minmax(140px,1fr)_minmax(120px,1fr)_minmax(120px,0.8fr)_auto]'>
+    <DataTableToolbar
+      table={props.table}
+      customSearch={
         <CompactDateTimeRangePicker
           start={filters.startTime}
           end={filters.endTime}
@@ -151,148 +153,89 @@ export function CommonLogsFilterBar({
             handleChange('startTime', start)
             handleChange('endTime', end)
           }}
-          className='col-span-2 lg:col-span-1'
-        />
-        <Input
-          placeholder={t('Model Name')}
-          value={filters.model || ''}
-          onChange={(e) => handleChange('model', e.target.value)}
-          onKeyDown={handleKeyDown}
-          className='h-9'
+          className='w-full sm:w-[340px]'
         />
-        <Input
-          placeholder={t('Group')}
-          type={sensitiveVisible ? 'text' : 'password'}
-          value={filters.group || ''}
-          onChange={(e) => handleChange('group', e.target.value)}
-          onKeyDown={handleKeyDown}
-          className='h-9'
-        />
-        <Select
-          value={logType}
-          onValueChange={(value) => {
-            setLogType(isLogTypeValue(value) ? value : '')
-          }}
-        >
-          <SelectTrigger className='h-9'>
-            <SelectValue placeholder={t('All Types')} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value='all'>{t('All Types')}</SelectItem>
-            {LOG_TYPES.map((type) => (
-              <SelectItem key={type.value} value={String(type.value)}>
-                {t(type.label)}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <button
-          type='button'
-          className={cn(
-            'text-muted-foreground hover:text-foreground flex h-9 items-center gap-1 rounded-md px-2 text-xs transition-colors',
-            hasExpandedFilters && !expanded && 'text-primary'
-          )}
-          onClick={() => setExpanded((p) => !p)}
-        >
-          <ChevronDown
-            className={cn(
-              'size-3.5 transition-transform duration-200',
-              expanded && 'rotate-180'
-            )}
+      }
+      additionalSearch={
+        <>
+          <Input
+            placeholder={t('Model Name')}
+            value={filters.model || ''}
+            onChange={(e) => handleChange('model', e.target.value)}
+            onKeyDown={handleKeyDown}
+            className={inputClass}
           />
-          {expanded ? t('Collapse') : t('Expand')}
-        </button>
-      </div>
-
-      {/* Expandable filter row */}
-      <div
-        className={cn(
-          'grid gap-2 overflow-hidden transition-all duration-200',
-          expanded
-            ? 'grid-rows-[1fr] opacity-100'
-            : 'grid-rows-[0fr] opacity-0'
-        )}
-      >
-        <div className='min-h-0 overflow-hidden'>
-          <div className='grid grid-cols-2 gap-1.5 sm:grid-cols-4 sm:gap-2'>
+          <Input
+            placeholder={t('Group')}
+            type={sensitiveType}
+            value={filters.group || ''}
+            onChange={(e) => handleChange('group', e.target.value)}
+            onKeyDown={handleKeyDown}
+            className={inputClass}
+          />
+          <Select
+            value={logType}
+            onValueChange={(value) => {
+              setLogType(value !== null && isLogTypeValue(value) ? value : '')
+            }}
+          >
+            <SelectTrigger className={inputClass}>
+              <SelectValue placeholder={t('All Types')} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value='all'>{t('All Types')}</SelectItem>
+              {LOG_TYPES.map((type) => (
+                <SelectItem key={type.value} value={String(type.value)}>
+                  {t(type.label)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </>
+      }
+      expandable={
+        <>
+          <Input
+            placeholder={t('Token Name')}
+            type={sensitiveType}
+            value={filters.token || ''}
+            onChange={(e) => handleChange('token', e.target.value)}
+            onKeyDown={handleKeyDown}
+            className={inputClass}
+          />
+          {isAdmin && (
             <Input
-              placeholder={t('Token Name')}
-              type={sensitiveVisible ? 'text' : 'password'}
-              value={filters.token || ''}
-              onChange={(e) => handleChange('token', e.target.value)}
+              placeholder={t('Username')}
+              type={sensitiveType}
+              value={filters.username || ''}
+              onChange={(e) => handleChange('username', e.target.value)}
               onKeyDown={handleKeyDown}
-              className='h-9'
+              className={inputClass}
             />
-            {isAdmin && (
-              <Input
-                placeholder={t('Username')}
-                type={sensitiveVisible ? 'text' : 'password'}
-                value={filters.username || ''}
-                onChange={(e) => handleChange('username', e.target.value)}
-                onKeyDown={handleKeyDown}
-                className='h-9'
-              />
-            )}
-            {isAdmin && (
-              <Input
-                placeholder={t('Channel ID')}
-                value={filters.channel || ''}
-                onChange={(e) => handleChange('channel', e.target.value)}
-                onKeyDown={handleKeyDown}
-                className='h-9'
-              />
-            )}
+          )}
+          {isAdmin && (
             <Input
-              placeholder={t('Request ID')}
-              value={filters.requestId || ''}
-              onChange={(e) => handleChange('requestId', e.target.value)}
+              placeholder={t('Channel ID')}
+              value={filters.channel || ''}
+              onChange={(e) => handleChange('channel', e.target.value)}
               onKeyDown={handleKeyDown}
-              className='h-9'
+              className={inputClass}
             />
-          </div>
-        </div>
-      </div>
-
-      {/* Actions row */}
-      <div className='flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
-        <div className='flex min-w-0 flex-wrap items-center gap-2 sm:gap-3'>
-          {stats && <div className='min-w-0'>{stats}</div>}
-        </div>
-
-        <div className='flex shrink-0 items-center gap-2 self-end sm:self-auto'>
-          <button
-            type='button'
-            className='text-muted-foreground hover:text-foreground inline-flex size-8 items-center justify-center rounded-md border transition-colors'
-            title={sensitiveVisible ? t('Hide') : t('Show')}
-            aria-label={sensitiveVisible ? t('Hide') : t('Show')}
-            onClick={() => setSensitiveVisible(!sensitiveVisible)}
-          >
-            {sensitiveVisible ? (
-              <Eye className='size-3.5' />
-            ) : (
-              <EyeOff className='size-3.5' />
-            )}
-          </button>
-          <Button
-            variant='outline'
-            size='sm'
-            className='h-8'
-            onClick={handleReset}
-          >
-            <RotateCcw className='size-3.5' />
-            {t('Reset')}
-          </Button>
-          <Button size='sm' className='h-8' onClick={handleApply} disabled={fetchingLogs > 0}>
-            {fetchingLogs > 0 ? (
-              <Loader2 className='size-3.5 animate-spin' />
-            ) : (
-              <Search className='size-3.5' />
-            )}
-            {t('Search')}
-          </Button>
-          {viewOptions}
-        </div>
-      </div>
-    </div>
+          )}
+          <Input
+            placeholder={t('Request ID')}
+            value={filters.requestId || ''}
+            onChange={(e) => handleChange('requestId', e.target.value)}
+            onKeyDown={handleKeyDown}
+            className={inputClass}
+          />
+        </>
+      }
+      hasExpandedActiveFilters={hasExpandedFilters}
+      hasAdditionalFilters={hasAdditionalFilters}
+      onSearch={handleApply}
+      searchLoading={fetchingLogs > 0}
+      onReset={handleReset}
+    />
   )
 }
diff --git a/web/default/src/features/usage-logs/components/common-logs-header-actions.tsx b/web/default/src/features/usage-logs/components/common-logs-header-actions.tsx
new file mode 100644
index 00000000000..4a920ecb8a1
--- /dev/null
+++ b/web/default/src/features/usage-logs/components/common-logs-header-actions.tsx
@@ -0,0 +1,46 @@
+import { Eye, EyeOff } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/components/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+import { CommonLogsStats } from './common-logs-stats'
+import { useUsageLogsContext } from './usage-logs-provider'
+
+/**
+ * Page-header actions for the Common Logs view: live usage stats plus a
+ * toggle for masking sensitive values (token names, usernames, group names,
+ * and the quota figure shown in stats). Both controls live in the page
+ * header so the toolbar below stays focused on filter inputs and form
+ * actions only.
+ */
+export function CommonLogsHeaderActions() {
+  const { t } = useTranslation()
+  const { sensitiveVisible, setSensitiveVisible } = useUsageLogsContext()
+
+  return (
+    <div className='flex flex-wrap items-center gap-2'>
+      <CommonLogsStats />
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              variant='ghost'
+              size='icon'
+              onClick={() => setSensitiveVisible(!sensitiveVisible)}
+              aria-label={sensitiveVisible ? t('Hide') : t('Show')}
+              className='text-muted-foreground hover:text-foreground size-7'
+            />
+          }
+        >
+          {sensitiveVisible ? <Eye /> : <EyeOff />}
+        </TooltipTrigger>
+        <TooltipContent>
+          {sensitiveVisible ? t('Hide') : t('Show')}
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  )
+}
diff --git a/web/default/src/features/usage-logs/components/common-logs-stats.tsx b/web/default/src/features/usage-logs/components/common-logs-stats.tsx
index 656b8ac943e..06ad562ebdf 100644
--- a/web/default/src/features/usage-logs/components/common-logs-stats.tsx
+++ b/web/default/src/features/usage-logs/components/common-logs-stats.tsx
@@ -18,10 +18,10 @@ function StatBadge(props: {
   accent: string
 }) {
   return (
-    <span className='inline-flex h-7 items-center gap-2 rounded-md border border-border/60 bg-muted/25 px-2.5 text-xs shadow-xs'>
+    <span className='border-border/60 bg-muted/25 inline-flex h-7 items-center gap-2 rounded-md border px-2.5 text-xs shadow-xs'>
       <span className={cn('h-3.5 w-0.5 rounded-full', props.accent)} />
       <span className='text-muted-foreground'>{props.label}</span>
-      <span className='font-mono font-semibold tabular-nums text-foreground/85'>
+      <span className='text-foreground/85 font-mono font-semibold tabular-nums'>
         {props.value}
       </span>
     </span>
diff --git a/web/default/src/features/usage-logs/components/compact-date-time-range-picker.tsx b/web/default/src/features/usage-logs/components/compact-date-time-range-picker.tsx
index 5168b080d53..6772235aaf7 100644
--- a/web/default/src/features/usage-logs/components/compact-date-time-range-picker.tsx
+++ b/web/default/src/features/usage-logs/components/compact-date-time-range-picker.tsx
@@ -41,8 +41,12 @@ export function CompactDateTimeRangePicker({
 
   const label = useMemo(() => {
     if (!start && !end) return t('Date Range')
-    const startText = start ? dayjs(start).format('YYYY-MM-DD HH:mm:ss') : '-'
-    const endText = end ? dayjs(end).format('YYYY-MM-DD HH:mm:ss') : '-'
+    // The popover's <input type="datetime-local"> only supports minute
+    // precision, so seconds are always 00 (manual pick) or 59 (preset
+    // end-of-day). Hide them in the trigger label to keep the button
+    // width compact while still showing the meaningful timestamp.
+    const startText = start ? dayjs(start).format('YYYY-MM-DD HH:mm') : '-'
+    const endText = end ? dayjs(end).format('YYYY-MM-DD HH:mm') : '-'
     return `${startText} ~ ${endText}`
   }, [end, start, t])
 
@@ -95,21 +99,26 @@ export function CompactDateTimeRangePicker({
 
   return (
     <Popover open={open} onOpenChange={handleOpenChange}>
-      <PopoverTrigger asChild>
-        <Button
-          type='button'
-          variant='outline'
-          className={cn(
-            'h-9 w-full justify-start gap-2 px-3 font-mono text-xs font-normal',
-            !start && !end && 'text-muted-foreground',
-            className
-          )}
-        >
-          <CalendarDays className='text-muted-foreground size-4 shrink-0' />
-          <span className='truncate'>{label}</span>
-        </Button>
+      <PopoverTrigger
+        render={
+          <Button
+            type='button'
+            variant='outline'
+            className={cn(
+              'w-full justify-start gap-2 px-2.5 font-mono text-xs font-normal',
+              !start && !end && 'text-muted-foreground',
+              className
+            )}
+          />
+        }
+      >
+        <CalendarDays className='text-muted-foreground size-4 shrink-0' />
+        <span className='truncate'>{label}</span>
       </PopoverTrigger>
-      <PopoverContent align='start' className='w-[min(520px,calc(100vw-2rem))] p-3'>
+      <PopoverContent
+        align='start'
+        className='w-[min(520px,calc(100vw-2rem))] p-3'
+      >
         <div className='space-y-3'>
           <div className='grid gap-2 sm:grid-cols-[1fr_auto_1fr] sm:items-end'>
             <div className='space-y-1.5'>
diff --git a/web/default/src/features/usage-logs/components/dialogs/details-dialog.tsx b/web/default/src/features/usage-logs/components/dialogs/details-dialog.tsx
index 474763439f9..8195bcf0f77 100644
--- a/web/default/src/features/usage-logs/components/dialogs/details-dialog.tsx
+++ b/web/default/src/features/usage-logs/components/dialogs/details-dialog.tsx
@@ -69,7 +69,7 @@ function DetailRow(props: {
       </span>
       <span
         className={cn(
-          'min-w-0 max-w-full text-xs break-all sm:break-words',
+          'max-w-full min-w-0 text-xs break-all sm:break-words',
           props.mono && 'font-mono',
           props.muted && 'text-muted-foreground'
         )}
@@ -491,7 +491,7 @@ export function DetailsDialog(props: DetailsDialogProps) {
         </DialogHeader>
 
         <ScrollArea className='max-h-[70vh] min-w-0 overflow-hidden pr-2 max-sm:max-h-[calc(100dvh-7rem)] sm:pr-4'>
-          <div className='w-full min-w-0 max-w-full space-y-2.5 overflow-hidden py-1 sm:space-y-3'>
+          <div className='w-full max-w-full min-w-0 space-y-2.5 overflow-hidden py-1 sm:space-y-3'>
             {/* Overview section - key identifiers */}
             <div className='min-w-0 space-y-1'>
               {props.log.request_id && (
diff --git a/web/default/src/features/usage-logs/components/dialogs/filter-components.tsx b/web/default/src/features/usage-logs/components/dialogs/filter-components.tsx
deleted file mode 100644
index 6a881ffd566..00000000000
--- a/web/default/src/features/usage-logs/components/dialogs/filter-components.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Reusable components for filter dialogs
- */
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-
-// ============================================================================
-// Filter Input Component
-// ============================================================================
-
-interface FilterInputProps {
-  id: string
-  label: string
-  placeholder: string
-  value: string
-  onChange: (value: string) => void
-}
-
-export function FilterInput({
-  id,
-  label,
-  placeholder,
-  value,
-  onChange,
-}: FilterInputProps) {
-  return (
-    <div className='grid gap-2'>
-      <Label htmlFor={id}>{label}</Label>
-      <Input
-        id={id}
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-      />
-    </div>
-  )
-}
-
-// ============================================================================
-// Section Divider Component
-// ============================================================================
-
-interface SectionDividerProps {
-  label: string
-}
-
-export function SectionDivider({ label }: SectionDividerProps) {
-  return (
-    <div className='relative'>
-      <div className='absolute inset-0 flex items-center'>
-        <span className='w-full border-t' />
-      </div>
-      <div className='relative flex justify-center text-xs uppercase'>
-        <span className='bg-background text-muted-foreground px-2'>
-          {label}
-        </span>
-      </div>
-    </div>
-  )
-}
diff --git a/web/default/src/features/usage-logs/components/dialogs/usage-logs-filter-dialog.tsx b/web/default/src/features/usage-logs/components/dialogs/usage-logs-filter-dialog.tsx
deleted file mode 100644
index 91f437d23c5..00000000000
--- a/web/default/src/features/usage-logs/components/dialogs/usage-logs-filter-dialog.tsx
+++ /dev/null
@@ -1,371 +0,0 @@
-import { useState, useEffect, useCallback, useMemo } from 'react'
-import { useQuery } from '@tanstack/react-query'
-import { useNavigate, getRouteApi } from '@tanstack/react-router'
-import { Search, RotateCcw, Calendar } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { getNormalizedDateRange } from '@/lib/time'
-import { cn } from '@/lib/utils'
-import { useIsAdmin } from '@/hooks/use-admin'
-import { Button } from '@/components/ui/button'
-import { ComboboxInput } from '@/components/ui/combobox-input'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { Label } from '@/components/ui/label'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { DateTimePicker } from '@/components/datetime-picker'
-import { getApiKeys } from '@/features/keys/api'
-import { TIME_RANGE_PRESETS } from '../../constants'
-import { buildSearchParams, getLogCategoryLabel } from '../../lib/filter'
-import { getDefaultTimeRange } from '../../lib/utils'
-import type {
-  LogCategory,
-  LogFilters,
-  CommonLogFilters,
-  DrawingLogFilters,
-  TaskLogFilters,
-} from '../../types'
-import { FilterInput, SectionDivider } from './filter-components'
-
-const route = getRouteApi('/_authenticated/usage-logs/$section')
-
-interface UsageLogsFilterDialogProps {
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-  onFilterChange?: (filters: LogFilters) => void
-  logCategory: LogCategory
-}
-
-export function UsageLogsFilterDialog({
-  open: controlledOpen,
-  onOpenChange: controlledOnOpenChange,
-  onFilterChange,
-  logCategory,
-}: UsageLogsFilterDialogProps) {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const searchParams = route.useSearch()
-  const isAdmin = useIsAdmin()
-  const [internalOpen, setInternalOpen] = useState(false)
-
-  const open = controlledOpen ?? internalOpen
-  const setOpen = controlledOnOpenChange ?? setInternalOpen
-
-  const [filters, setFilters] = useState<LogFilters>(() => {
-    const { start, end } = getDefaultTimeRange()
-    return { startTime: start, endTime: end }
-  })
-  const [selectedRange, setSelectedRange] = useState<number | null>(null)
-
-  const { data: tokensData } = useQuery({
-    queryKey: ['api-keys', 'filter', open, logCategory],
-    queryFn: () => getApiKeys({ p: 1, size: 200 }),
-    enabled: open && logCategory === 'common',
-  })
-
-  const tokenNameOptions = useMemo(() => {
-    const items = tokensData?.data?.items ?? []
-    const seen = new Set<string>()
-    return items
-      .filter((item) => {
-        if (seen.has(item.name)) return false
-        seen.add(item.name)
-        return true
-      })
-      .map((item) => ({ value: item.name, label: item.name }))
-  }, [tokensData?.data?.items])
-
-  // Sync filters from URL
-  useEffect(() => {
-    const urlFilters: Partial<LogFilters> = {}
-
-    if (searchParams.startTime)
-      urlFilters.startTime = new Date(searchParams.startTime)
-    if (searchParams.endTime)
-      urlFilters.endTime = new Date(searchParams.endTime)
-    if (searchParams.channel) urlFilters.channel = String(searchParams.channel)
-
-    if (logCategory === 'common') {
-      if (searchParams.model)
-        (urlFilters as CommonLogFilters).model = searchParams.model
-      if (searchParams.token)
-        (urlFilters as CommonLogFilters).token = searchParams.token
-      if (searchParams.group)
-        (urlFilters as CommonLogFilters).group = searchParams.group
-      if (searchParams.username)
-        (urlFilters as CommonLogFilters).username = searchParams.username
-      if (searchParams.requestId)
-        (urlFilters as CommonLogFilters).requestId = searchParams.requestId
-    } else if (logCategory === 'drawing') {
-      if (searchParams.filter)
-        (urlFilters as DrawingLogFilters).mjId = searchParams.filter
-    } else if (logCategory === 'task') {
-      if (searchParams.filter)
-        (urlFilters as TaskLogFilters).taskId = searchParams.filter
-    }
-
-    if (Object.keys(urlFilters).length > 0) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setFilters((prev: LogFilters) => ({ ...prev, ...urlFilters }))
-      setSelectedRange(null)
-    }
-  }, [
-    logCategory,
-    searchParams.startTime,
-    searchParams.endTime,
-    searchParams.channel,
-    searchParams.model,
-    searchParams.token,
-    searchParams.group,
-    searchParams.username,
-    searchParams.requestId,
-    searchParams.filter,
-  ])
-
-  const handleChange = useCallback(
-    (field: string, value: Date | string | undefined) => {
-      setFilters((prev: LogFilters) => ({ ...prev, [field]: value }))
-      if (field === 'startTime' || field === 'endTime') {
-        setSelectedRange(null)
-      }
-    },
-    []
-  )
-
-  const handleQuickRange = useCallback((days: number) => {
-    const { start, end } = getNormalizedDateRange(days)
-    setFilters((prev: LogFilters) => ({
-      ...prev,
-      startTime: start,
-      endTime: end,
-    }))
-    setSelectedRange(days)
-  }, [])
-
-  const navigateWithFilters = useCallback(
-    (searchUpdate: Record<string, unknown>) => {
-      navigate({
-        to: '/usage-logs/$section',
-        params: { section: logCategory },
-        search: (prev: Record<string, unknown>) => ({
-          ...prev,
-          ...searchUpdate,
-        }),
-      })
-    },
-    [navigate, logCategory]
-  )
-
-  const handleApply = useCallback(() => {
-    const filterParams = buildSearchParams(filters, logCategory)
-    navigateWithFilters(filterParams)
-    onFilterChange?.(filters)
-    setOpen(false)
-  }, [filters, logCategory, navigateWithFilters, onFilterChange, setOpen])
-
-  const handleReset = useCallback(() => {
-    const { start, end } = getDefaultTimeRange()
-    const resetFilters: LogFilters = { startTime: start, endTime: end }
-
-    setFilters(resetFilters)
-    setSelectedRange(null)
-
-    navigate({
-      to: '/usage-logs/$section',
-      params: { section: logCategory },
-      search: {
-        page: 1,
-        startTime: start.getTime(),
-        endTime: end.getTime(),
-      },
-    })
-
-    onFilterChange?.(resetFilters)
-    setOpen(false)
-  }, [navigate, logCategory, onFilterChange, setOpen])
-
-  // Render category-specific filters
-  const renderCategoryFilters = () => {
-    switch (logCategory) {
-      case 'common': {
-        const commonFilters = filters as CommonLogFilters
-        return (
-          <>
-            <FilterInput
-              id='model'
-              label={t('Model Name')}
-              placeholder={t('e.g., gpt-4, claude-3')}
-              value={commonFilters.model || ''}
-              onChange={(value) => handleChange('model', value)}
-            />
-            <div className='grid gap-2'>
-              <Label htmlFor='token'>{t('Token Name')}</Label>
-              <ComboboxInput
-                id='token'
-                options={tokenNameOptions}
-                value={commonFilters.token || ''}
-                onValueChange={(v) => handleChange('token', v)}
-                placeholder={t('Filter by token name')}
-                emptyText={t('No token found.')}
-              />
-            </div>
-            <FilterInput
-              id='group'
-              label={t('Group')}
-              placeholder={t('Filter by group')}
-              value={commonFilters.group || ''}
-              onChange={(value) => handleChange('group', value)}
-            />
-            {isAdmin && (
-              <FilterInput
-                id='username'
-                label={t('Username')}
-                placeholder={t('Filter by username')}
-                value={commonFilters.username || ''}
-                onChange={(value) => handleChange('username', value)}
-              />
-            )}
-            <FilterInput
-              id='requestId'
-              label={t('Request ID')}
-              placeholder={t('Filter by request ID')}
-              value={commonFilters.requestId || ''}
-              onChange={(value) => handleChange('requestId', value)}
-            />
-          </>
-        )
-      }
-      case 'drawing': {
-        const drawingFilters = filters as DrawingLogFilters
-        return (
-          <FilterInput
-            id='mjId'
-            label={t('Task ID')}
-            placeholder={t('Filter by task ID')}
-            value={drawingFilters.mjId || ''}
-            onChange={(value) => handleChange('mjId', value)}
-          />
-        )
-      }
-      case 'task': {
-        const taskFilters = filters as TaskLogFilters
-        return (
-          <FilterInput
-            id='taskId'
-            label={t('Task ID')}
-            placeholder={t('Filter by task ID')}
-            value={taskFilters.taskId || ''}
-            onChange={(value) => handleChange('taskId', value)}
-          />
-        )
-      }
-      default:
-        return null
-    }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent className='flex max-h-[calc(100dvh-2rem)] flex-col max-sm:h-dvh max-sm:w-screen max-sm:max-w-none max-sm:rounded-none max-sm:p-4 sm:max-w-lg'>
-        <DialogHeader>
-          <DialogTitle>
-            {t('Filter')} {t(getLogCategoryLabel(logCategory))} {t('Logs')}
-          </DialogTitle>
-          <DialogDescription>
-            {t('Set filters to narrow down your log search results.')}
-          </DialogDescription>
-        </DialogHeader>
-
-        <ScrollArea className='min-h-0 flex-1 pr-3 sm:max-h-[60vh] sm:pr-4'>
-          <div className='grid gap-3 py-3 sm:gap-4 sm:py-4'>
-            {/* Quick time range selection */}
-            <div className='grid gap-2'>
-              <Label className='flex items-center gap-2'>
-                <Calendar className='h-4 w-4' />
-                {t('Quick Range')}
-              </Label>
-              <div className='grid grid-cols-2 gap-2 sm:flex'>
-                {TIME_RANGE_PRESETS.map((range) => (
-                  <Button
-                    key={range.days}
-                    type='button'
-                    size='sm'
-                    variant={
-                      selectedRange === range.days ? 'default' : 'outline'
-                    }
-                    onClick={() => handleQuickRange(range.days)}
-                    className={cn(
-                      'flex-1',
-                      selectedRange === range.days &&
-                        'ring-ring ring-2 ring-offset-2'
-                    )}
-                  >
-                    {t(range.label)}
-                  </Button>
-                ))}
-              </div>
-            </div>
-
-            <SectionDivider label={t('Custom Time Range')} />
-
-            {/* Custom time range */}
-            <div className='grid gap-3 sm:gap-4'>
-              <div className='grid gap-2'>
-                <Label htmlFor='start_time'>{t('Start Time')}</Label>
-                <DateTimePicker
-                  value={filters.startTime}
-                  onChange={(date) =>
-                    handleChange('startTime', date || undefined)
-                  }
-                  placeholder={t('Select start time')}
-                />
-              </div>
-
-              <div className='grid gap-2'>
-                <Label htmlFor='end_time'>{t('End Time')}</Label>
-                <DateTimePicker
-                  value={filters.endTime}
-                  onChange={(date) =>
-                    handleChange('endTime', date || undefined)
-                  }
-                  placeholder={t('Select end time')}
-                />
-              </div>
-            </div>
-
-            <SectionDivider label={t('Filters')} />
-
-            {renderCategoryFilters()}
-
-            {/* Channel filter (admin only, all log types) */}
-            {isAdmin && (
-              <FilterInput
-                id='channel'
-                label={t('Channel ID')}
-                placeholder={t('Filter by channel ID')}
-                value={filters.channel || ''}
-                onChange={(value) => handleChange('channel', value)}
-              />
-            )}
-          </div>
-        </ScrollArea>
-
-        <DialogFooter className='grid grid-cols-2 gap-2 sm:flex'>
-          <Button onClick={handleReset} variant='outline' type='button'>
-            <RotateCcw className='mr-2 h-4 w-4' />
-            {t('Reset')}
-          </Button>
-          <Button onClick={handleApply} type='submit'>
-            <Search className='mr-2 h-4 w-4' />
-            {t('Apply Filters')}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/web/default/src/features/usage-logs/components/model-badge.tsx b/web/default/src/features/usage-logs/components/model-badge.tsx
index 6484e9feda9..a96677fd2cd 100644
--- a/web/default/src/features/usage-logs/components/model-badge.tsx
+++ b/web/default/src/features/usage-logs/components/model-badge.tsx
@@ -83,7 +83,7 @@ function ModelBadgeContent(props: ModelBadgeProps) {
       showDot={!provider}
       autoColor={provider ? undefined : props.modelName}
       className={cn(
-        'rounded-md border border-border/60 bg-muted/30 px-1.5 py-0.5 font-mono',
+        'border-border/60 bg-muted/30 rounded-md border px-1.5 py-0.5 font-mono',
         provider && 'text-foreground',
         props.className
       )}
@@ -113,11 +113,13 @@ export function ModelBadge(props: ModelBadgeProps) {
 
   return (
     <Popover>
-      <PopoverTrigger asChild>
-        <button type='button' className='inline-flex items-center gap-1'>
-          <ModelBadgeContent {...props} />
-          <Route className='text-muted-foreground size-3 shrink-0' />
-        </button>
+      <PopoverTrigger
+        render={
+          <button type='button' className='inline-flex items-center gap-1' />
+        }
+      >
+        <ModelBadgeContent {...props} />
+        <Route className='text-muted-foreground size-3 shrink-0' />
       </PopoverTrigger>
       <PopoverContent className='w-72'>
         <div className='space-y-2'>
diff --git a/web/default/src/features/usage-logs/components/task-logs-filter-bar.tsx b/web/default/src/features/usage-logs/components/task-logs-filter-bar.tsx
index 44297816301..9750e0131a4 100644
--- a/web/default/src/features/usage-logs/components/task-logs-filter-bar.tsx
+++ b/web/default/src/features/usage-logs/components/task-logs-filter-bar.tsx
@@ -1,11 +1,11 @@
-import { useState, useEffect, useCallback, type ReactNode } from 'react'
-import { useNavigate, getRouteApi } from '@tanstack/react-router'
+import { useState, useEffect, useCallback } from 'react'
 import { useQueryClient, useIsFetching } from '@tanstack/react-query'
-import { Loader2, RotateCcw, Search } from 'lucide-react'
+import { useNavigate, getRouteApi } from '@tanstack/react-router'
+import { type Table } from '@tanstack/react-table'
 import { useTranslation } from 'react-i18next'
 import { useIsAdmin } from '@/hooks/use-admin'
-import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { DataTableToolbar } from '@/components/data-table'
 import { buildSearchParams } from '../lib/filter'
 import { getDefaultTimeRange } from '../lib/utils'
 import type { DrawingLogFilters, LogCategory, TaskLogFilters } from '../types'
@@ -16,13 +16,9 @@ const route = getRouteApi('/_authenticated/usage-logs/$section')
 type TaskLikeLogCategory = Extract<LogCategory, 'drawing' | 'task'>
 type TaskLogsFilters = DrawingLogFilters | TaskLogFilters
 
-interface TaskLogsFilterBarProps {
+interface TaskLogsFilterBarProps<TData> {
+  table: Table<TData>
   logCategory: TaskLikeLogCategory
-  viewOptions?: ReactNode
-}
-
-function getFilterPlaceholder(_logCategory: TaskLikeLogCategory): string {
-  return 'Filter by task ID'
 }
 
 function getFilterValue(
@@ -46,7 +42,7 @@ function setFilterValue(
   return { ...filters, taskId: value }
 }
 
-export function TaskLogsFilterBar(props: TaskLogsFilterBarProps) {
+export function TaskLogsFilterBar<TData>(props: TaskLogsFilterBarProps<TData>) {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const queryClient = useQueryClient()
@@ -62,9 +58,13 @@ export function TaskLogsFilterBar(props: TaskLogsFilterBarProps) {
   useEffect(() => {
     const { start, end } = getDefaultTimeRange()
     const baseFilters = {
-      startTime: searchParams.startTime ? new Date(searchParams.startTime) : start,
+      startTime: searchParams.startTime
+        ? new Date(searchParams.startTime)
+        : start,
       endTime: searchParams.endTime ? new Date(searchParams.endTime) : end,
-      ...(searchParams.channel ? { channel: String(searchParams.channel) } : {}),
+      ...(searchParams.channel
+        ? { channel: String(searchParams.channel) }
+        : {}),
     }
     const next: TaskLogsFilters =
       props.logCategory === 'drawing'
@@ -137,9 +137,18 @@ export function TaskLogsFilterBar(props: TaskLogsFilterBarProps) {
     [props.logCategory]
   )
 
+  const filterValue = getFilterValue(filters, props.logCategory)
+  const placeholder =
+    props.logCategory === 'drawing'
+      ? t('Filter by Midjourney task ID')
+      : t('Filter by task ID')
+  const inputClass = 'w-full sm:w-[180px] lg:w-[200px]'
+  const hasAdditionalFilters = !!filterValue || !!filters.channel
+
   return (
-    <div className='space-y-2 sm:space-y-3'>
-      <div className='grid grid-cols-2 gap-1.5 sm:gap-2 lg:grid-cols-[minmax(280px,2fr)_minmax(180px,1fr)_minmax(120px,0.8fr)_auto]'>
+    <DataTableToolbar
+      table={props.table}
+      customSearch={
         <CompactDateTimeRangePicker
           start={filters.startTime}
           end={filters.endTime}
@@ -147,51 +156,34 @@ export function TaskLogsFilterBar(props: TaskLogsFilterBarProps) {
             handleChange('startTime', start)
             handleChange('endTime', end)
           }}
-          className='col-span-2 lg:col-span-1'
-        />
-        <Input
-          aria-label={t('Task ID')}
-          placeholder={t(getFilterPlaceholder(props.logCategory))}
-          value={getFilterValue(filters, props.logCategory)}
-          onChange={(e) => handleFilterChange(e.target.value)}
-          onKeyDown={handleKeyDown}
-          className='h-9'
+          className='w-full sm:w-[340px]'
         />
-        {isAdmin && (
+      }
+      additionalSearch={
+        <>
           <Input
-            placeholder={t('Channel ID')}
-            value={filters.channel || ''}
-            onChange={(e) => handleChange('channel', e.target.value)}
+            aria-label={t('Task ID')}
+            placeholder={placeholder}
+            value={filterValue}
+            onChange={(e) => handleFilterChange(e.target.value)}
             onKeyDown={handleKeyDown}
-            className='h-9'
+            className={inputClass}
           />
-        )}
-        <div className='col-span-2 flex shrink-0 items-center justify-end gap-1.5 sm:gap-2 lg:col-span-1'>
-          <Button
-            variant='outline'
-            size='sm'
-            className='h-8'
-            onClick={handleReset}
-          >
-            <RotateCcw className='size-3.5' />
-            {t('Reset')}
-          </Button>
-          <Button
-            size='sm'
-            className='h-8'
-            onClick={handleApply}
-            disabled={fetchingLogs > 0}
-          >
-            {fetchingLogs > 0 ? (
-              <Loader2 className='size-3.5 animate-spin' />
-            ) : (
-              <Search className='size-3.5' />
-            )}
-            {t('Search')}
-          </Button>
-          {props.viewOptions}
-        </div>
-      </div>
-    </div>
+          {isAdmin && (
+            <Input
+              placeholder={t('Channel ID')}
+              value={filters.channel || ''}
+              onChange={(e) => handleChange('channel', e.target.value)}
+              onKeyDown={handleKeyDown}
+              className={inputClass}
+            />
+          )}
+        </>
+      }
+      hasAdditionalFilters={hasAdditionalFilters}
+      onSearch={handleApply}
+      searchLoading={fetchingLogs > 0}
+      onReset={handleReset}
+    />
   )
 }
diff --git a/web/default/src/features/usage-logs/components/usage-logs-primary-buttons.tsx b/web/default/src/features/usage-logs/components/usage-logs-primary-buttons.tsx
deleted file mode 100644
index 0ef378fc8ba..00000000000
--- a/web/default/src/features/usage-logs/components/usage-logs-primary-buttons.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useState } from 'react'
-import { Search } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/components/ui/button'
-import type { LogCategory } from '../types'
-import { UsageLogsFilterDialog } from './dialogs/usage-logs-filter-dialog'
-
-interface UsageLogsPrimaryButtonsProps {
-  logCategory: LogCategory
-}
-
-export function UsageLogsPrimaryButtons({
-  logCategory,
-}: UsageLogsPrimaryButtonsProps) {
-  const { t } = useTranslation()
-  const [filterDialogOpen, setFilterDialogOpen] = useState(false)
-
-  return (
-    <div className='flex gap-2'>
-      <Button size='sm' onClick={() => setFilterDialogOpen(true)}>
-        <Search className='h-4 w-4' />
-        {t('Search')}
-      </Button>
-
-      <UsageLogsFilterDialog
-        open={filterDialogOpen}
-        onOpenChange={setFilterDialogOpen}
-        logCategory={logCategory}
-      />
-    </div>
-  )
-}
diff --git a/web/default/src/features/usage-logs/components/usage-logs-table.tsx b/web/default/src/features/usage-logs/components/usage-logs-table.tsx
index a5cd7b7b9ca..02daae49068 100644
--- a/web/default/src/features/usage-logs/components/usage-logs-table.tsx
+++ b/web/default/src/features/usage-logs/components/usage-logs-table.tsx
@@ -17,28 +17,13 @@ import { toast } from 'sonner'
 import { cn } from '@/lib/utils'
 import { useIsAdmin } from '@/hooks/use-admin'
 import { useTableUrlState } from '@/hooks/use-table-url-state'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
-import {
-  DataTablePagination,
-  DataTableViewOptions,
-  TableSkeleton,
-  TableEmpty,
-  MobileCardList,
-} from '@/components/data-table'
-import { PageFooterPortal } from '@/components/layout'
+import { TableCell, TableRow } from '@/components/ui/table'
+import { DataTablePage } from '@/components/data-table'
 import { DEFAULT_LOGS_DATA, LOG_TYPE_ENUM } from '../constants'
 import { useColumnsByCategory } from '../lib/columns'
 import { fetchLogsByCategory } from '../lib/utils'
 import type { LogCategory } from '../types'
 import { CommonLogsFilterBar } from './common-logs-filter-bar'
-import { CommonLogsStats } from './common-logs-stats'
 import { TaskLogsFilterBar } from './task-logs-filter-bar'
 
 const route = getRouteApi('/_authenticated/usage-logs/$section')
@@ -157,105 +142,42 @@ export function UsageLogsTable({ logCategory }: UsageLogsTableProps) {
 
   const isCommon = logCategory === 'common'
 
-  const renderRows = () => {
-    const rows = table.getRowModel().rows
-    if (rows.length === 0) return null
-
-    return rows.map((row) => {
-      const logType = (row.original as Record<string, unknown>).type as
-        | number
-        | undefined
-      const tintClass =
-        isCommon && logType != null ? (logTypeRowTint[logType] ?? '') : ''
-
-      return (
-        <TableRow
-          key={row.id}
-          className={cn('transition-colors', tintClass)}
-        >
-          {row.getVisibleCells().map((cell) => (
-            <TableCell key={cell.id} className={isCommon ? 'py-2' : 'py-3.5'}>
-              {flexRender(cell.column.columnDef.cell, cell.getContext())}
-            </TableCell>
-          ))}
-        </TableRow>
-      )
-    })
-  }
-
   return (
-    <>
-      <div className='space-y-3 sm:space-y-4'>
-        {logCategory === 'common' ? (
-          <div className='rounded-md border bg-card/50 p-2 shadow-xs sm:p-3'>
-            <CommonLogsFilterBar
-              stats={<CommonLogsStats />}
-              viewOptions={<DataTableViewOptions table={table} />}
-            />
-          </div>
-        ) : (
-          <div className='rounded-md border bg-card/50 p-2 shadow-xs sm:p-3'>
-            <TaskLogsFilterBar
-              logCategory={logCategory}
-              viewOptions={<DataTableViewOptions table={table} />}
-            />
-          </div>
-        )}
-        {isMobile ? (
-          <MobileCardList
-            table={table}
-            isLoading={isLoadingData}
-            emptyTitle={t('No Logs Found')}
-            emptyDescription={t(
-              'No usage logs available. Logs will appear here once API calls are made.'
-            )}
-          />
+    <DataTablePage
+      table={table}
+      columns={columns as ColumnDef<Record<string, unknown>>[]}
+      isLoading={isLoadingData}
+      isFetching={isFetching}
+      emptyTitle={t('No Logs Found')}
+      emptyDescription={t(
+        'No usage logs available. Logs will appear here once API calls are made.'
+      )}
+      skeletonKeyPrefix='usage-log-skeleton'
+      tableHeaderClassName='bg-muted/30 sticky top-0 z-10'
+      toolbar={
+        isCommon ? (
+          <CommonLogsFilterBar table={table} />
         ) : (
-          <div
-            className={cn(
-              'overflow-hidden rounded-md border transition-opacity duration-150',
-              isFetching && !isLoadingData && 'pointer-events-none opacity-50'
-            )}
-          >
-            <Table>
-              <TableHeader className='bg-muted/30 sticky top-0 z-10'>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => (
-                      <TableHead key={header.id} colSpan={header.colSpan}>
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
-                      </TableHead>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody>
-                {isLoadingData ? (
-                  <TableSkeleton table={table} keyPrefix='usage-log-skeleton' />
-                ) : table.getRowModel().rows.length === 0 ? (
-                  <TableEmpty
-                    colSpan={columns.length}
-                    title={t('No Logs Found')}
-                    description={t(
-                      'No usage logs available. Logs will appear here once API calls are made.'
-                    )}
-                  />
-                ) : (
-                  renderRows()
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        )}
-      </div>
-      <PageFooterPortal>
-        <DataTablePagination table={table} />
-      </PageFooterPortal>
-    </>
+          <TaskLogsFilterBar table={table} logCategory={logCategory} />
+        )
+      }
+      renderRow={(row) => {
+        const logType = (row.original as Record<string, unknown>).type as
+          | number
+          | undefined
+        const tintClass =
+          isCommon && logType != null ? (logTypeRowTint[logType] ?? '') : ''
+
+        return (
+          <TableRow key={row.id} className={cn('transition-colors', tintClass)}>
+            {row.getVisibleCells().map((cell) => (
+              <TableCell key={cell.id} className={isCommon ? 'py-2' : 'py-3.5'}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </TableCell>
+            ))}
+          </TableRow>
+        )
+      }}
+    />
   )
 }
diff --git a/web/default/src/features/usage-logs/index.tsx b/web/default/src/features/usage-logs/index.tsx
index c27c29f3354..d75820eafaa 100644
--- a/web/default/src/features/usage-logs/index.tsx
+++ b/web/default/src/features/usage-logs/index.tsx
@@ -6,6 +6,7 @@ import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { SectionPageLayout } from '@/components/layout'
 import type { NavGroup } from '@/components/layout/types'
 import { CacheStatsDialog } from '@/features/system-settings/general/channel-affinity/cache-stats-dialog'
+import { CommonLogsHeaderActions } from './components/common-logs-header-actions'
 import { UserInfoDialog } from './components/dialogs/user-info-dialog'
 import {
   UsageLogsProvider,
@@ -75,9 +76,8 @@ function UsageLogsContent() {
           if (!('url' in item) || typeof item.url !== 'string') return null
           return item.url.split('/').pop() ?? null
         })
-        .filter(
-          (section): section is UsageLogsSectionId =>
-            Boolean(section && isUsageLogsSectionId(section))
+        .filter((section): section is UsageLogsSectionId =>
+          Boolean(section && isUsageLogsSectionId(section))
         ),
     [filteredTabGroups]
   )
@@ -100,10 +100,17 @@ function UsageLogsContent() {
   return (
     <>
       <SectionPageLayout>
-        <SectionPageLayout.Title>{t(pageMeta.titleKey)}</SectionPageLayout.Title>
+        <SectionPageLayout.Title>
+          {t(pageMeta.titleKey)}
+        </SectionPageLayout.Title>
         <SectionPageLayout.Description>
           {t(pageMeta.descriptionKey)}
         </SectionPageLayout.Description>
+        {activeCategory === 'common' && (
+          <SectionPageLayout.Actions>
+            <CommonLogsHeaderActions />
+          </SectionPageLayout.Actions>
+        )}
         <SectionPageLayout.Content>
           <div className='space-y-4'>
             {showTaskSwitcher && (
diff --git a/web/default/src/features/usage-logs/lib/format.ts b/web/default/src/features/usage-logs/lib/format.ts
index 05a235a08b3..f731b790130 100644
--- a/web/default/src/features/usage-logs/lib/format.ts
+++ b/web/default/src/features/usage-logs/lib/format.ts
@@ -39,8 +39,8 @@ const PARAM_OVERRIDE_ACTION_MAP: Record<string, string> = {
  * Get localized label for a param override action
  */
 export function getParamOverrideActionLabel(
-    action: string,
-    t: (key: string) => string
+  action: string,
+  t: (key: string) => string
 ): string {
   const key = PARAM_OVERRIDE_ACTION_MAP[action.toLowerCase()]
   return key ? t(key) : action
@@ -50,7 +50,7 @@ export function getParamOverrideActionLabel(
  * Parse a param override audit line into action and content
  */
 export function parseAuditLine(
-    line: string
+  line: string
 ): { action: string; content: string } | null {
   if (typeof line !== 'string') return null
   const firstSpace = line.indexOf(' ')
@@ -67,9 +67,9 @@ export function parseAuditLine(
 export function isViolationFeeLog(other: LogOtherData | null): boolean {
   if (!other) return false
   return (
-      other.violation_fee === true ||
-      Boolean(other.violation_fee_code) ||
-      Boolean(other.violation_fee_marker)
+    other.violation_fee === true ||
+    Boolean(other.violation_fee_code) ||
+    Boolean(other.violation_fee_marker)
   )
 }
 
@@ -91,7 +91,7 @@ export function parseLogOther(other: string): LogOtherData | null {
  * Get time color based on duration (in seconds)
  */
 export function getTimeColor(
-    seconds: number
+  seconds: number
 ): 'success' | 'warning' | 'danger' {
   if (seconds < 10) return 'success'
   if (seconds < 30) return 'warning'
@@ -102,7 +102,7 @@ export function getTimeColor(
  * Get first-response-token color based on latency (in seconds)
  */
 export function getFirstResponseTimeColor(
-    seconds: number
+  seconds: number
 ): 'success' | 'warning' | 'danger' {
   if (seconds < 5) return 'success'
   if (seconds < 10) return 'warning'
@@ -113,7 +113,7 @@ export function getFirstResponseTimeColor(
  * Get throughput color based on generated tokens per second
  */
 export function getThroughputColor(
-    tokensPerSecond: number
+  tokensPerSecond: number
 ): 'success' | 'warning' | 'danger' {
   if (tokensPerSecond >= 30) return 'success'
   if (tokensPerSecond >= 15) return 'warning'
@@ -124,8 +124,8 @@ export function getThroughputColor(
  * Get response color using throughput only when enough output tokens exist.
  */
 export function getResponseTimeColor(
-    seconds: number,
-    completionTokens: number
+  seconds: number,
+  completionTokens: number
 ): 'success' | 'warning' | 'danger' {
   if (completionTokens < 100 || seconds <= 0) return getTimeColor(seconds)
   return getThroughputColor(completionTokens / seconds)
@@ -141,9 +141,9 @@ export function formatModelName(log: UsageLog): {
 } {
   const other = parseLogOther(log.other)
   const isMapped = !!(
-      other?.is_model_mapped &&
-      other?.upstream_model_name &&
-      other.upstream_model_name !== ''
+    other?.is_model_mapped &&
+    other?.upstream_model_name &&
+    other.upstream_model_name !== ''
   )
 
   return {
@@ -161,9 +161,9 @@ export function decodeBillingExprB64(exprB64: string | undefined): string {
   if (!exprB64) return ''
   try {
     const binaryString =
-        typeof window !== 'undefined'
-            ? window.atob(exprB64)
-            : Buffer.from(exprB64, 'base64').toString('binary')
+      typeof window !== 'undefined'
+        ? window.atob(exprB64)
+        : Buffer.from(exprB64, 'base64').toString('binary')
     const bytes = new Uint8Array(binaryString.length)
 
     for (let i = 0; i < binaryString.length; i++) {
@@ -175,9 +175,9 @@ export function decodeBillingExprB64(exprB64: string | undefined): string {
     }
 
     return decodeURIComponent(
-        Array.prototype.map
-            .call(bytes, (byte: number) => '%' + byte.toString(16).padStart(2, '0'))
-            .join('')
+      Array.prototype.map
+        .call(bytes, (byte: number) => '%' + byte.toString(16).padStart(2, '0'))
+        .join('')
     )
   } catch {
     return ''
@@ -190,8 +190,8 @@ export function decodeBillingExprB64(exprB64: string | undefined): string {
  * that would display guessed unit prices.
  */
 export function resolveMatchedTier(
-    tiers: ParsedTier[],
-    matchedLabel: string | undefined
+  tiers: ParsedTier[],
+  matchedLabel: string | undefined
 ): ParsedTier | null {
   if (tiers.length === 0) return null
   if (!matchedLabel) return null
@@ -220,19 +220,19 @@ export interface TieredBillingSummary {
  * not exercise the cache path (mirrors the classic frontend behaviour).
  */
 export function hasAnyCacheTokens(
-    other: LogOtherData | null | undefined
+  other: LogOtherData | null | undefined
 ): boolean {
   if (!other) return false
   return (
-      (other.cache_tokens || 0) > 0 ||
-      (other.cache_creation_tokens || 0) > 0 ||
-      (other.cache_creation_tokens_5m || 0) > 0 ||
-      (other.cache_creation_tokens_1h || 0) > 0
+    (other.cache_tokens || 0) > 0 ||
+    (other.cache_creation_tokens || 0) > 0 ||
+    (other.cache_creation_tokens_5m || 0) > 0 ||
+    (other.cache_creation_tokens_1h || 0) > 0
   )
 }
 
 export function getTieredBillingSummary(
-    other: LogOtherData | null
+  other: LogOtherData | null
 ): TieredBillingSummary | null {
   if (!other || other.billing_mode !== 'tiered_expr') return null
   const exprStr = decodeBillingExprB64(other.expr_b64)
@@ -267,16 +267,16 @@ export function getTieredBillingSummary(
  * @param unit - Unit of the timestamps ('seconds' or 'milliseconds')
  */
 export function formatDuration(
-    submitTime?: number,
-    finishTime?: number,
-    unit: 'seconds' | 'milliseconds' = 'milliseconds'
+  submitTime?: number,
+  finishTime?: number,
+  unit: 'seconds' | 'milliseconds' = 'milliseconds'
 ): { durationSec: number; variant: StatusBadgeProps['variant'] } | null {
   if (!submitTime || !finishTime) return null
 
   const durationSec =
-      unit === 'milliseconds'
-          ? (finishTime - submitTime) / 1000
-          : finishTime - submitTime
+    unit === 'milliseconds'
+      ? (finishTime - submitTime) / 1000
+      : finishTime - submitTime
 
   return { durationSec, variant: durationSec > 60 ? 'red' : 'green' }
 }
diff --git a/web/default/src/features/users/components/data-table-row-actions.tsx b/web/default/src/features/users/components/data-table-row-actions.tsx
index 078ed411225..88f1465da85 100644
--- a/web/default/src/features/users/components/data-table-row-actions.tsx
+++ b/web/default/src/features/users/components/data-table-row-actions.tsx
@@ -120,14 +120,16 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
   return (
     <>
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant='ghost'
-            className='data-[state=open]:bg-muted flex h-8 w-8 p-0'
-          >
-            <MoreHorizontal className='h-4 w-4' />
-            <span className='sr-only'>{t('Open menu')}</span>
-          </Button>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              variant='ghost'
+              className='data-popup-open:bg-muted flex h-8 w-8 p-0'
+            />
+          }
+        >
+          <MoreHorizontal className='h-4 w-4' />
+          <span className='sr-only'>{t('Open menu')}</span>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='end' className='w-[180px]'>
           <DropdownMenuItem onClick={handleEdit}>
diff --git a/web/default/src/features/users/components/dialogs/user-binding-dialog.tsx b/web/default/src/features/users/components/dialogs/user-binding-dialog.tsx
index 74eb1110250..bf96edcaaaf 100644
--- a/web/default/src/features/users/components/dialogs/user-binding-dialog.tsx
+++ b/web/default/src/features/users/components/dialogs/user-binding-dialog.tsx
@@ -326,20 +326,22 @@ export function UserBindingDialog(props: Props) {
                 )}
                 <TooltipProvider>
                   <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant='ghost'
-                        size='sm'
-                        className='h-7 gap-1.5 px-2 text-xs'
-                        onClick={() => setShowBoundOnly((v) => !v)}
-                      >
-                        {showBoundOnly ? (
-                          <Eye className='h-3.5 w-3.5' />
-                        ) : (
-                          <EyeOff className='h-3.5 w-3.5' />
-                        )}
-                        {showBoundOnly ? t('Show All') : t('Bound Only')}
-                      </Button>
+                    <TooltipTrigger
+                      render={
+                        <Button
+                          variant='ghost'
+                          size='sm'
+                          className='h-7 gap-1.5 px-2 text-xs'
+                          onClick={() => setShowBoundOnly((v) => !v)}
+                        />
+                      }
+                    >
+                      {showBoundOnly ? (
+                        <Eye className='h-3.5 w-3.5' />
+                      ) : (
+                        <EyeOff className='h-3.5 w-3.5' />
+                      )}
+                      {showBoundOnly ? t('Show All') : t('Bound Only')}
                     </TooltipTrigger>
                     <TooltipContent>
                       {showBoundOnly
diff --git a/web/default/src/features/users/components/users-columns.tsx b/web/default/src/features/users/components/users-columns.tsx
index 9d834664030..104ae6cada8 100644
--- a/web/default/src/features/users/components/users-columns.tsx
+++ b/web/default/src/features/users/components/users-columns.tsx
@@ -13,11 +13,7 @@ import { DataTableColumnHeader } from '@/components/data-table'
 import { GroupBadge } from '@/components/group-badge'
 import { LongText } from '@/components/long-text'
 import { StatusBadge, dotColorMap } from '@/components/status-badge'
-import {
-  USER_STATUSES,
-  USER_ROLES,
-  isUserDeleted,
-} from '../constants'
+import { USER_STATUSES, USER_ROLES, isUserDeleted } from '../constants'
 import { type User } from '../types'
 import { DataTableRowActions } from './data-table-row-actions'
 
@@ -34,10 +30,8 @@ export function useUsersColumns(): ColumnDef<User>[] {
       id: 'select',
       header: ({ table }) => (
         <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && 'indeterminate')
-          }
+          checked={table.getIsAllPageRowsSelected()}
+          indeterminate={table.getIsSomePageRowsSelected()}
           onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
           aria-label='Select all'
           className='translate-y-[2px]'
@@ -83,10 +77,10 @@ export function useUsersColumns(): ColumnDef<User>[] {
               </LongText>
               {remark && (
                 <Tooltip>
-                  <TooltipTrigger asChild>
-                    <StatusBadge variant='success' copyable={false}>
-                      <LongText className='max-w-[80px]'>{remark}</LongText>
-                    </StatusBadge>
+                  <TooltipTrigger
+                    render={<StatusBadge variant='success' copyable={false} />}
+                  >
+                    <LongText className='max-w-[80px]'>{remark}</LongText>
                   </TooltipTrigger>
                   <TooltipContent>
                     <p className='text-xs'>{remark}</p>
@@ -124,15 +118,13 @@ export function useUsersColumns(): ColumnDef<User>[] {
 
         return (
           <Tooltip>
-            <TooltipTrigger asChild>
-              <div className='cursor-help'>
-                <StatusBadge
-                  label={t(statusConfig.labelKey)}
-                  variant={statusConfig.variant}
-                  showDot={statusConfig.showDot}
-                  copyable={false}
-                />
-              </div>
+            <TooltipTrigger render={<div className='cursor-help' />}>
+              <StatusBadge
+                label={t(statusConfig.labelKey)}
+                variant={statusConfig.variant}
+                showDot={statusConfig.showDot}
+                copyable={false}
+              />
             </TooltipTrigger>
             <TooltipContent>
               <p className='text-xs'>
@@ -173,21 +165,21 @@ export function useUsersColumns(): ColumnDef<User>[] {
 
         return (
           <Tooltip>
-            <TooltipTrigger asChild>
-              <div className='w-[150px] cursor-help space-y-1'>
-                <div className='flex justify-between text-xs'>
-                  <span className='font-medium tabular-nums'>
-                    {formatQuota(remaining)}
-                  </span>
-                  <span className='text-muted-foreground tabular-nums'>
-                    {formatQuota(total)}
-                  </span>
-                </div>
-                <Progress
-                  value={percentage}
-                  className={cn('h-1.5', getQuotaProgressColor(percentage))}
-                />
+            <TooltipTrigger
+              render={<div className='w-[150px] cursor-help space-y-1' />}
+            >
+              <div className='flex justify-between text-xs'>
+                <span className='font-medium tabular-nums'>
+                  {formatQuota(remaining)}
+                </span>
+                <span className='text-muted-foreground tabular-nums'>
+                  {formatQuota(total)}
+                </span>
               </div>
+              <Progress
+                value={percentage}
+                className={cn('h-1.5', getQuotaProgressColor(percentage))}
+              />
             </TooltipTrigger>
             <TooltipContent>
               <div className='space-y-1 text-xs'>
@@ -275,10 +267,10 @@ export function useUsersColumns(): ColumnDef<User>[] {
               aria-hidden='true'
             />
             <Tooltip>
-              <TooltipTrigger asChild>
-                <span className='text-muted-foreground cursor-help'>
-                  {t('Invited')}: {affCount}
-                </span>
+              <TooltipTrigger
+                render={<span className='text-muted-foreground cursor-help' />}
+              >
+                {t('Invited')}: {affCount}
               </TooltipTrigger>
               <TooltipContent>
                 <p className='text-xs'>{t('Number of users invited')}</p>
@@ -286,10 +278,10 @@ export function useUsersColumns(): ColumnDef<User>[] {
             </Tooltip>
             <span className='text-muted-foreground/30'>·</span>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <span className='text-muted-foreground cursor-help'>
-                  {t('Revenue')}: {formatQuota(affHistoryQuota)}
-                </span>
+              <TooltipTrigger
+                render={<span className='text-muted-foreground cursor-help' />}
+              >
+                {t('Revenue')}: {formatQuota(affHistoryQuota)}
               </TooltipTrigger>
               <TooltipContent>
                 <p className='text-xs'>{t('Total invitation revenue')}</p>
@@ -299,10 +291,12 @@ export function useUsersColumns(): ColumnDef<User>[] {
               <>
                 <span className='text-muted-foreground/30'>·</span>
                 <Tooltip>
-                  <TooltipTrigger asChild>
-                    <span className='text-muted-foreground cursor-help'>
-                      {t('Inviter')}: {inviterId}
-                    </span>
+                  <TooltipTrigger
+                    render={
+                      <span className='text-muted-foreground cursor-help' />
+                    }
+                  >
+                    {t('Inviter')}: {inviterId}
                   </TooltipTrigger>
                   <TooltipContent>
                     <p className='text-xs'>
diff --git a/web/default/src/features/users/components/users-mutate-drawer.tsx b/web/default/src/features/users/components/users-mutate-drawer.tsx
index 2f7507ecb1a..f87f6344be6 100644
--- a/web/default/src/features/users/components/users-mutate-drawer.tsx
+++ b/web/default/src/features/users/components/users-mutate-drawer.tsx
@@ -202,7 +202,7 @@ export function UsersMutateDrawer({
                         <FormLabel>{t('Role')}</FormLabel>
                         <Select
                           onValueChange={(value) =>
-                            field.onChange(parseInt(value))
+                            value !== null && field.onChange(parseInt(value))
                           }
                           value={String(field.value)}
                         >
@@ -397,8 +397,8 @@ export function UsersMutateDrawer({
             </form>
           </Form>
           <SheetFooter className='grid grid-cols-2 gap-2 border-t px-4 py-3 sm:flex sm:px-6 sm:py-4'>
-            <SheetClose asChild>
-              <Button variant='outline'>{t('Close')}</Button>
+            <SheetClose render={<Button variant='outline' />}>
+              {t('Close')}
             </SheetClose>
             <Button form='user-form' type='submit' disabled={isSubmitting}>
               {isSubmitting ? t('Saving...') : t('Save changes')}
diff --git a/web/default/src/features/users/components/users-table.tsx b/web/default/src/features/users/components/users-table.tsx
index 615dadd256c..f51e312737d 100644
--- a/web/default/src/features/users/components/users-table.tsx
+++ b/web/default/src/features/users/components/users-table.tsx
@@ -4,7 +4,6 @@ import { getRouteApi } from '@tanstack/react-router'
 import {
   type SortingState,
   type VisibilityState,
-  flexRender,
   getCoreRowModel,
   getFacetedRowModel,
   getFacetedUniqueValues,
@@ -16,26 +15,12 @@ import {
 import { useMediaQuery } from '@/hooks'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
-import { cn } from '@/lib/utils'
 import { useTableUrlState } from '@/hooks/use-table-url-state'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
 import {
   DISABLED_ROW_DESKTOP,
   DISABLED_ROW_MOBILE,
-  DataTablePagination,
-  DataTableToolbar,
-  TableSkeleton,
-  TableEmpty,
-  MobileCardList,
+  DataTablePage,
 } from '@/components/data-table'
-import { PageFooterPortal } from '@/components/layout'
 import { getUsers, searchUsers } from '../api'
 import {
   USER_STATUS,
@@ -167,106 +152,39 @@ export function UsersTable() {
   }, [pageCount, ensurePageInRange])
 
   return (
-    <>
-      <div className='space-y-3 sm:space-y-4'>
-        <DataTableToolbar
-          table={table}
-          searchPlaceholder={t('Filter by username, name or email...')}
-          filters={[
-            {
-              columnId: 'status',
-              title: t('Status'),
-              options: getUserStatusOptions(t),
-            },
-            {
-              columnId: 'role',
-              title: t('Role'),
-              options: getUserRoleOptions(t),
-            },
-          ]}
-        />
-        {isMobile ? (
-          <MobileCardList
-            table={table}
-            isLoading={isLoading}
-            emptyTitle={t('No Users Found')}
-            emptyDescription={t(
-              'No users available. Try adjusting your search or filters.'
-            )}
-            getRowClassName={(row) =>
-              isDisabledUserRow(row.original) ? DISABLED_ROW_MOBILE : undefined
-            }
-          />
-        ) : (
-          <>
-            <div
-              className={cn(
-                'overflow-hidden rounded-md border transition-opacity duration-150',
-                isFetching && !isLoading && 'pointer-events-none opacity-50'
-              )}
-            >
-              <Table>
-                <TableHeader>
-                  {table.getHeaderGroups().map((headerGroup) => (
-                    <TableRow key={headerGroup.id}>
-                      {headerGroup.headers.map((header) => (
-                        <TableHead key={header.id} colSpan={header.colSpan}>
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext()
-                              )}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableHeader>
-                <TableBody>
-                  {isLoading ? (
-                    <TableSkeleton table={table} keyPrefix='users-skeleton' />
-                  ) : table.getRowModel().rows.length === 0 ? (
-                    <TableEmpty
-                      colSpan={columns.length}
-                      title={t('No Users Found')}
-                      description={t(
-                        'No users available. Try adjusting your search or filters.'
-                      )}
-                    />
-                  ) : (
-                    table.getRowModel().rows.map((row) => {
-                      const user = row.original
-
-                      return (
-                        <TableRow
-                          key={row.id}
-                          data-state={row.getIsSelected() && 'selected'}
-                          className={cn(
-                            isDisabledUserRow(user) && DISABLED_ROW_DESKTOP
-                          )}
-                        >
-                          {row.getVisibleCells().map((cell) => (
-                            <TableCell key={cell.id}>
-                              {flexRender(
-                                cell.column.columnDef.cell,
-                                cell.getContext()
-                              )}
-                            </TableCell>
-                          ))}
-                        </TableRow>
-                      )
-                    })
-                  )}
-                </TableBody>
-              </Table>
-            </div>
-            <DataTableBulkActions table={table} />
-          </>
-        )}
-      </div>
-      <PageFooterPortal>
-        <DataTablePagination table={table} />
-      </PageFooterPortal>
-    </>
+    <DataTablePage
+      table={table}
+      columns={columns}
+      isLoading={isLoading}
+      isFetching={isFetching}
+      emptyTitle={t('No Users Found')}
+      emptyDescription={t(
+        'No users available. Try adjusting your search or filters.'
+      )}
+      skeletonKeyPrefix='users-skeleton'
+      toolbarProps={{
+        searchPlaceholder: t('Filter by username, name or email...'),
+        filters: [
+          {
+            columnId: 'status',
+            title: t('Status'),
+            options: getUserStatusOptions(t),
+          },
+          {
+            columnId: 'role',
+            title: t('Role'),
+            options: getUserRoleOptions(t),
+          },
+        ],
+      }}
+      getRowClassName={(row, { isMobile }) =>
+        isDisabledUserRow(row.original)
+          ? isMobile
+            ? DISABLED_ROW_MOBILE
+            : DISABLED_ROW_DESKTOP
+          : undefined
+      }
+      bulkActions={<DataTableBulkActions table={table} />}
+    />
   )
 }
diff --git a/web/default/src/features/wallet/components/affiliate-rewards-card.tsx b/web/default/src/features/wallet/components/affiliate-rewards-card.tsx
index 226c9abdacf..a43d755189a 100644
--- a/web/default/src/features/wallet/components/affiliate-rewards-card.tsx
+++ b/web/default/src/features/wallet/components/affiliate-rewards-card.tsx
@@ -84,7 +84,7 @@ export function AffiliateRewardsCard({
           <CopyButton
             value={affiliateLink}
             variant='outline'
-            className='size-9 shrink-0 bg-background'
+            className='bg-background size-9 shrink-0'
             iconClassName='size-4'
             tooltip={t('Copy referral link')}
             aria-label={t('Copy referral link')}
diff --git a/web/default/src/features/wallet/components/dialogs/billing-history-dialog.tsx b/web/default/src/features/wallet/components/dialogs/billing-history-dialog.tsx
index da5dffe0992..2667c0b866f 100644
--- a/web/default/src/features/wallet/components/dialogs/billing-history-dialog.tsx
+++ b/web/default/src/features/wallet/components/dialogs/billing-history-dialog.tsx
@@ -105,7 +105,9 @@ export function BillingHistoryDialog({
               </div>
               <Select
                 value={pageSize.toString()}
-                onValueChange={(value) => handlePageSizeChange(parseInt(value))}
+                onValueChange={(value) =>
+                  value !== null && handlePageSizeChange(parseInt(value))
+                }
               >
                 <SelectTrigger className='h-9 w-[92px] sm:w-32'>
                   <SelectValue />
diff --git a/web/default/src/features/wallet/components/recharge-form-card.tsx b/web/default/src/features/wallet/components/recharge-form-card.tsx
index d3452b25d2b..dd482850870 100644
--- a/web/default/src/features/wallet/components/recharge-form-card.tsx
+++ b/web/default/src/features/wallet/components/recharge-form-card.tsx
@@ -5,11 +5,7 @@ import { formatNumber } from '@/lib/format'
 import { cn } from '@/lib/utils'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
-import {
-  Card,
-  CardContent,
-  CardHeader,
-} from '@/components/ui/card'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -178,155 +174,218 @@ export function RechargeFormCard({
       icon={<WalletCards className='h-4 w-4' />}
       action={
         onOpenBilling ? (
-            <Button
-              variant='outline'
-              size='sm'
-              onClick={onOpenBilling}
-              className='w-full gap-2 sm:w-auto'
-            >
-              <Receipt className='h-4 w-4' />
-              {t('Order History')}
-            </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={onOpenBilling}
+            className='w-full gap-2 sm:w-auto'
+          >
+            <Receipt className='h-4 w-4' />
+            {t('Order History')}
+          </Button>
         ) : null
       }
       contentClassName='space-y-4 sm:space-y-6'
     >
-        {/* Online Topup Section */}
-        {hasAnyTopup ? (
-          <div className='space-y-4 sm:space-y-6'>
-            {hasConfigurableTopup && (
-              <>
-                {presetAmounts.length > 0 && (
-                  <div className='space-y-2.5 sm:space-y-3'>
-                    <Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
-                      {t('Amount')}
-                    </Label>
-                    <div className='grid grid-cols-2 gap-1.5 sm:gap-3 md:grid-cols-4'>
-                      {presetAmounts.map((preset, index) => {
-                        const discount =
-                          preset.discount ||
-                          topupInfo?.discount?.[preset.value] ||
-                          1.0
-                        const {
-                          displayValue,
-                          actualPrice,
-                          savedAmount,
-                          hasDiscount,
-                        } = calculatePresetPricing(
-                          preset.value,
-                          priceRatio,
-                          discount,
-                          usdExchangeRate
-                        )
-                        return (
-                          <Button
-                            key={index}
-                            variant='outline'
-                            className={cn(
-                              'hover:border-foreground flex min-h-16 flex-col items-start rounded-lg px-3 py-2.5 text-left whitespace-normal sm:min-h-[72px] sm:p-4',
-                              selectedPreset === preset.value
-                                ? 'border-foreground bg-foreground/5'
-                                : 'border-muted'
-                            )}
-                            onClick={() => onSelectPreset(preset)}
-                          >
-                            <div className='flex w-full items-center justify-between'>
-                              <div className='text-base font-semibold sm:text-lg'>
-                                {formatNumber(displayValue)}
-                              </div>
-                              {hasDiscount && (
-                                <div className='text-xs font-medium text-green-600'>
-                                  {getDiscountLabel(discount)}
-                                </div>
-                              )}
-                            </div>
-                            <div className='text-muted-foreground mt-1.5 w-full text-xs sm:mt-2'>
-                              Pay {formatCurrency(actualPrice)}
-                              {hasDiscount && savedAmount > 0 && (
-                                <span className='text-green-600'>
-                                  {' '}
-                                  • Save {formatCurrency(savedAmount)}
-                                </span>
-                              )}
+      {/* Online Topup Section */}
+      {hasAnyTopup ? (
+        <div className='space-y-4 sm:space-y-6'>
+          {hasConfigurableTopup && (
+            <>
+              {presetAmounts.length > 0 && (
+                <div className='space-y-2.5 sm:space-y-3'>
+                  <Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
+                    {t('Amount')}
+                  </Label>
+                  <div className='grid grid-cols-2 gap-1.5 sm:gap-3 md:grid-cols-4'>
+                    {presetAmounts.map((preset, index) => {
+                      const discount =
+                        preset.discount ||
+                        topupInfo?.discount?.[preset.value] ||
+                        1.0
+                      const {
+                        displayValue,
+                        actualPrice,
+                        savedAmount,
+                        hasDiscount,
+                      } = calculatePresetPricing(
+                        preset.value,
+                        priceRatio,
+                        discount,
+                        usdExchangeRate
+                      )
+                      return (
+                        <Button
+                          key={index}
+                          variant='outline'
+                          className={cn(
+                            'hover:border-foreground flex min-h-16 flex-col items-start rounded-lg px-3 py-2.5 text-left whitespace-normal sm:min-h-[72px] sm:p-4',
+                            selectedPreset === preset.value
+                              ? 'border-foreground bg-foreground/5'
+                              : 'border-muted'
+                          )}
+                          onClick={() => onSelectPreset(preset)}
+                        >
+                          <div className='flex w-full items-center justify-between'>
+                            <div className='text-base font-semibold sm:text-lg'>
+                              {formatNumber(displayValue)}
                             </div>
-                          </Button>
-                        )
-                      })}
-                    </div>
+                            {hasDiscount && (
+                              <div className='text-xs font-medium text-green-600'>
+                                {getDiscountLabel(discount)}
+                              </div>
+                            )}
+                          </div>
+                          <div className='text-muted-foreground mt-1.5 w-full text-xs sm:mt-2'>
+                            Pay {formatCurrency(actualPrice)}
+                            {hasDiscount && savedAmount > 0 && (
+                              <span className='text-green-600'>
+                                {' '}
+                                • Save {formatCurrency(savedAmount)}
+                              </span>
+                            )}
+                          </div>
+                        </Button>
+                      )
+                    })}
                   </div>
-                )}
+                </div>
+              )}
 
-                <div className='space-y-2.5 sm:space-y-3'>
-                  <Label
-                    htmlFor='topup-amount'
-                    className='text-muted-foreground text-xs font-medium tracking-wider uppercase'
-                  >
-                    {t('Custom Amount')}
-                  </Label>
-                  <div className='grid grid-cols-[minmax(0,1fr)_minmax(110px,0.55fr)] gap-2 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center'>
-                    <Input
-                      id='topup-amount'
-                      type='number'
-                      value={localAmount}
-                      onChange={(e) => handleAmountChange(e.target.value)}
-                      min={minTopup}
-                      placeholder={`Minimum ${minTopup}`}
-                      className='h-9 text-base sm:h-10 sm:text-lg'
-                    />
-                    <div className='bg-muted/30 flex min-h-9 items-center justify-between gap-2 rounded-md border px-3 lg:min-w-52'>
-                      <span className='text-muted-foreground truncate text-xs'>
-                        {t('Amount to pay:')}
+              <div className='space-y-2.5 sm:space-y-3'>
+                <Label
+                  htmlFor='topup-amount'
+                  className='text-muted-foreground text-xs font-medium tracking-wider uppercase'
+                >
+                  {t('Custom Amount')}
+                </Label>
+                <div className='grid grid-cols-[minmax(0,1fr)_minmax(110px,0.55fr)] gap-2 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center'>
+                  <Input
+                    id='topup-amount'
+                    type='number'
+                    value={localAmount}
+                    onChange={(e) => handleAmountChange(e.target.value)}
+                    min={minTopup}
+                    placeholder={`Minimum ${minTopup}`}
+                    className='h-9 text-base sm:h-10 sm:text-lg'
+                  />
+                  <div className='bg-muted/30 flex min-h-9 items-center justify-between gap-2 rounded-md border px-3 lg:min-w-52'>
+                    <span className='text-muted-foreground truncate text-xs'>
+                      {t('Amount to pay:')}
+                    </span>
+                    {calculating ? (
+                      <Skeleton className='h-5 w-16' />
+                    ) : (
+                      <span className='text-sm font-semibold'>
+                        {formatCurrency(paymentAmount)}
                       </span>
-                      {calculating ? (
-                        <Skeleton className='h-5 w-16' />
-                      ) : (
-                        <span className='text-sm font-semibold'>
-                          {formatCurrency(paymentAmount)}
-                        </span>
-                      )}
-                    </div>
+                    )}
                   </div>
                 </div>
+              </div>
 
-                <div className='space-y-2.5 sm:space-y-3'>
-                  <Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
-                    {t('Payment Method')}
-                  </Label>
-                  {hasStandardPaymentMethods ? (
+              <div className='space-y-2.5 sm:space-y-3'>
+                <Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
+                  {t('Payment Method')}
+                </Label>
+                {hasStandardPaymentMethods ? (
+                  <div className='grid grid-cols-2 gap-1.5 sm:gap-3 lg:grid-cols-3'>
+                    {topupInfo?.pay_methods?.map((method) => {
+                      const minTopup = method.min_topup || 0
+                      const disabled = minTopup > topupAmount
+
+                      const button = (
+                        <Button
+                          key={method.type}
+                          variant='outline'
+                          onClick={() => onPaymentMethodSelect(method)}
+                          disabled={disabled || !!paymentLoading}
+                          className='h-9 min-w-0 justify-start gap-2 rounded-lg px-3'
+                        >
+                          {paymentLoading === method.type ? (
+                            <Loader2 className='h-4 w-4 animate-spin' />
+                          ) : (
+                            getPaymentIcon(
+                              method.type,
+                              'h-4 w-4',
+                              method.icon,
+                              method.name
+                            )
+                          )}
+                          <span className='truncate'>{method.name}</span>
+                        </Button>
+                      )
+
+                      return disabled ? (
+                        <TooltipProvider key={method.type}>
+                          <Tooltip>
+                            <TooltipTrigger render={button}></TooltipTrigger>
+                            <TooltipContent>
+                              {t('Minimum topup amount: {{amount}}', {
+                                amount: minTopup,
+                              })}
+                            </TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
+                      ) : (
+                        button
+                      )
+                    })}
+                  </div>
+                ) : hasWaffoPaymentMethods ? null : (
+                  <Alert>
+                    <AlertDescription>
+                      {t(
+                        'No payment methods available. Please contact administrator.'
+                      )}
+                    </AlertDescription>
+                  </Alert>
+                )}
+              </div>
+
+              {enableWaffoTopup &&
+                hasWaffoPaymentMethods &&
+                onWaffoMethodSelect && (
+                  <div className='space-y-2.5 sm:space-y-3'>
+                    <Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
+                      {t('Waffo Payment')}
+                    </Label>
                     <div className='grid grid-cols-2 gap-1.5 sm:gap-3 lg:grid-cols-3'>
-                      {topupInfo?.pay_methods?.map((method) => {
-                        const minTopup = method.min_topup || 0
-                        const disabled = minTopup > topupAmount
+                      {waffoPayMethods?.map((method, index) => {
+                        const loadingKey = `waffo-${index}`
+                        const waffoMin = waffoMinTopup || 0
+                        const belowMin = waffoMin > topupAmount
 
                         const button = (
                           <Button
-                            key={method.type}
+                            key={`${method.name}-${index}`}
                             variant='outline'
-                            onClick={() => onPaymentMethodSelect(method)}
-                            disabled={disabled || !!paymentLoading}
+                            onClick={() => onWaffoMethodSelect(method, index)}
+                            disabled={belowMin || !!paymentLoading}
                             className='h-9 min-w-0 justify-start gap-2 rounded-lg px-3'
                           >
-                            {paymentLoading === method.type ? (
+                            {paymentLoading === loadingKey ? (
                               <Loader2 className='h-4 w-4 animate-spin' />
+                            ) : method.icon ? (
+                              <img
+                                src={method.icon}
+                                alt={method.name}
+                                className='h-4 w-4 object-contain'
+                              />
                             ) : (
-                              getPaymentIcon(
-                                method.type,
-                                'h-4 w-4',
-                                method.icon,
-                                method.name
-                              )
+                              getPaymentIcon('waffo')
                             )}
                             <span className='truncate'>{method.name}</span>
                           </Button>
                         )
 
-                        return disabled ? (
-                          <TooltipProvider key={method.type}>
+                        return belowMin ? (
+                          <TooltipProvider key={`${method.name}-${index}`}>
                             <Tooltip>
-                              <TooltipTrigger asChild>{button}</TooltipTrigger>
+                              <TooltipTrigger render={button}></TooltipTrigger>
                               <TooltipContent>
                                 {t('Minimum topup amount: {{amount}}', {
-                                  amount: minTopup,
+                                  amount: waffoMin,
                                 })}
                               </TooltipContent>
                             </Tooltip>
@@ -336,146 +395,81 @@ export function RechargeFormCard({
                         )
                       })}
                     </div>
-                  ) : hasWaffoPaymentMethods ? null : (
-                    <Alert>
-                      <AlertDescription>
-                        {t(
-                          'No payment methods available. Please contact administrator.'
-                        )}
-                      </AlertDescription>
-                    </Alert>
-                  )}
-                </div>
-
-                {enableWaffoTopup &&
-                  hasWaffoPaymentMethods &&
-                  onWaffoMethodSelect && (
-                    <div className='space-y-2.5 sm:space-y-3'>
-                      <Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
-                        {t('Waffo Payment')}
-                      </Label>
-                      <div className='grid grid-cols-2 gap-1.5 sm:gap-3 lg:grid-cols-3'>
-                        {waffoPayMethods?.map((method, index) => {
-                          const loadingKey = `waffo-${index}`
-                          const waffoMin = waffoMinTopup || 0
-                          const belowMin = waffoMin > topupAmount
-
-                          const button = (
-                            <Button
-                              key={`${method.name}-${index}`}
-                              variant='outline'
-                              onClick={() => onWaffoMethodSelect(method, index)}
-                              disabled={belowMin || !!paymentLoading}
-                              className='h-9 min-w-0 justify-start gap-2 rounded-lg px-3'
-                            >
-                              {paymentLoading === loadingKey ? (
-                                <Loader2 className='h-4 w-4 animate-spin' />
-                              ) : method.icon ? (
-                                <img
-                                  src={method.icon}
-                                  alt={method.name}
-                                  className='h-4 w-4 object-contain'
-                                />
-                              ) : (
-                                getPaymentIcon('waffo')
-                              )}
-                              <span className='truncate'>{method.name}</span>
-                            </Button>
-                          )
-
-                          return belowMin ? (
-                            <TooltipProvider key={`${method.name}-${index}`}>
-                              <Tooltip>
-                                <TooltipTrigger asChild>
-                                  {button}
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                  {t('Minimum topup amount: {{amount}}', {
-                                    amount: waffoMin,
-                                  })}
-                                </TooltipContent>
-                              </Tooltip>
-                            </TooltipProvider>
-                          ) : (
-                            button
-                          )
-                        })}
-                      </div>
-                    </div>
-                  )}
-              </>
-            )}
-          </div>
-        ) : (
-          <Alert>
-            <AlertDescription>
-              {t(
-                'Online topup is not enabled. Please use redemption code or contact administrator.'
-              )}
-            </AlertDescription>
-          </Alert>
-        )}
-
-        {/* Creem Products Section */}
-        {enableCreemTopup &&
-          Array.isArray(creemProducts) &&
-          creemProducts.length > 0 &&
-          onCreemProductSelect && (
-            <div className='space-y-2.5 border-t pt-4 sm:space-y-3 sm:pt-6'>
-              <Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
-                {t('Creem Payment')}
-              </Label>
-              <CreemProductsSection
-                products={creemProducts}
-                onProductSelect={onCreemProductSelect}
-              />
-            </div>
+                  </div>
+                )}
+            </>
           )}
+        </div>
+      ) : (
+        <Alert>
+          <AlertDescription>
+            {t(
+              'Online topup is not enabled. Please use redemption code or contact administrator.'
+            )}
+          </AlertDescription>
+        </Alert>
+      )}
 
-        {/* Redemption Code Section */}
-        <div className='space-y-2.5 border-t pt-4 sm:space-y-3 sm:pt-6'>
-          <div className='flex items-center gap-2'>
-            <Gift className='text-muted-foreground h-4 w-4' />
-            <Label
-              htmlFor='redemption-code'
-              className='text-muted-foreground text-xs font-medium tracking-wider uppercase'
-            >
-              {t('Have a Code?')}
+      {/* Creem Products Section */}
+      {enableCreemTopup &&
+        Array.isArray(creemProducts) &&
+        creemProducts.length > 0 &&
+        onCreemProductSelect && (
+          <div className='space-y-2.5 border-t pt-4 sm:space-y-3 sm:pt-6'>
+            <Label className='text-muted-foreground text-xs font-medium tracking-wider uppercase'>
+              {t('Creem Payment')}
             </Label>
-          </div>
-          <div className='grid grid-cols-[minmax(0,1fr)_auto] gap-2'>
-            <Input
-              id='redemption-code'
-              value={redemptionCode}
-              onChange={(e) => onRedemptionCodeChange(e.target.value)}
-              placeholder={t('Enter your redemption code')}
-              className='h-9 min-w-0'
+            <CreemProductsSection
+              products={creemProducts}
+              onProductSelect={onCreemProductSelect}
             />
-            <Button
-              onClick={onRedeem}
-              disabled={redeeming}
-              variant='outline'
-              className='h-9 px-4'
-            >
-              {redeeming && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
-              {t('Redeem')}
-            </Button>
           </div>
-          {topupLink && (
-            <p className='text-muted-foreground text-xs'>
-              {t('Need a code?')}{' '}
-              <a
-                href={topupLink}
-                target='_blank'
-                rel='noopener noreferrer'
-                className='inline-flex items-center gap-1 underline-offset-4 hover:underline'
-              >
-                {t('Purchase here')}
-                <ExternalLink className='h-3 w-3' />
-              </a>
-            </p>
-          )}
+        )}
+
+      {/* Redemption Code Section */}
+      <div className='space-y-2.5 border-t pt-4 sm:space-y-3 sm:pt-6'>
+        <div className='flex items-center gap-2'>
+          <Gift className='text-muted-foreground h-4 w-4' />
+          <Label
+            htmlFor='redemption-code'
+            className='text-muted-foreground text-xs font-medium tracking-wider uppercase'
+          >
+            {t('Have a Code?')}
+          </Label>
+        </div>
+        <div className='grid grid-cols-[minmax(0,1fr)_auto] gap-2'>
+          <Input
+            id='redemption-code'
+            value={redemptionCode}
+            onChange={(e) => onRedemptionCodeChange(e.target.value)}
+            placeholder={t('Enter your redemption code')}
+            className='h-9 min-w-0'
+          />
+          <Button
+            onClick={onRedeem}
+            disabled={redeeming}
+            variant='outline'
+            className='h-9 px-4'
+          >
+            {redeeming && <Loader2 className='mr-2 h-4 w-4 animate-spin' />}
+            {t('Redeem')}
+          </Button>
         </div>
+        {topupLink && (
+          <p className='text-muted-foreground text-xs'>
+            {t('Need a code?')}{' '}
+            <a
+              href={topupLink}
+              target='_blank'
+              rel='noopener noreferrer'
+              className='inline-flex items-center gap-1 underline-offset-4 hover:underline'
+            >
+              {t('Purchase here')}
+              <ExternalLink className='h-3 w-3' />
+            </a>
+          </p>
+        )}
+      </div>
     </TitledCard>
   )
 }
diff --git a/web/default/src/features/wallet/components/subscription-plans-card.tsx b/web/default/src/features/wallet/components/subscription-plans-card.tsx
index d2b38722583..76040eea27b 100644
--- a/web/default/src/features/wallet/components/subscription-plans-card.tsx
+++ b/web/default/src/features/wallet/components/subscription-plans-card.tsx
@@ -6,11 +6,7 @@ import { formatQuota } from '@/lib/format'
 import { cn } from '@/lib/utils'
 import { useStatus } from '@/hooks/use-status'
 import { Button } from '@/components/ui/button'
-import {
-  Card,
-  CardContent,
-  CardHeader,
-} from '@/components/ui/card'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import { Progress } from '@/components/ui/progress'
 import {
   Select,
@@ -227,344 +223,326 @@ export function SubscriptionPlansCard({
         icon={<Crown className='h-4 w-4' />}
         contentClassName='space-y-4 sm:space-y-5'
       >
-          {/* My subscriptions & billing preference */}
-          <div className='rounded-xl border p-3 sm:p-4'>
-            <div className='flex flex-wrap items-center justify-between gap-2.5 sm:gap-3'>
-              <div className='flex min-w-0 flex-wrap items-center gap-2'>
-                <span className='text-sm font-medium'>
-                  {t('My Subscriptions')}
-                </span>
-                <span className='flex items-center gap-1.5 text-xs font-medium'>
-                  <span
-                    className={cn(
-                      'size-1.5 shrink-0 rounded-full',
-                      hasActive ? dotColorMap.success : dotColorMap.neutral
-                    )}
-                    aria-hidden='true'
-                  />
-                  {hasActive ? (
-                    <span className={cn(textColorMap.success)}>
-                      {activeSubscriptions.length} {t('active')}
-                    </span>
-                  ) : (
+        {/* My subscriptions & billing preference */}
+        <div className='rounded-xl border p-3 sm:p-4'>
+          <div className='flex flex-wrap items-center justify-between gap-2.5 sm:gap-3'>
+            <div className='flex min-w-0 flex-wrap items-center gap-2'>
+              <span className='text-sm font-medium'>
+                {t('My Subscriptions')}
+              </span>
+              <span className='flex items-center gap-1.5 text-xs font-medium'>
+                <span
+                  className={cn(
+                    'size-1.5 shrink-0 rounded-full',
+                    hasActive ? dotColorMap.success : dotColorMap.neutral
+                  )}
+                  aria-hidden='true'
+                />
+                {hasActive ? (
+                  <span className={cn(textColorMap.success)}>
+                    {activeSubscriptions.length} {t('active')}
+                  </span>
+                ) : (
+                  <span className='text-muted-foreground'>
+                    {t('No Active')}
+                  </span>
+                )}
+                {allSubscriptions.length > activeSubscriptions.length && (
+                  <>
+                    <span className='text-muted-foreground/30'>·</span>
                     <span className='text-muted-foreground'>
-                      {t('No Active')}
+                      {allSubscriptions.length - activeSubscriptions.length}{' '}
+                      {t('expired')}
                     </span>
-                  )}
-                  {allSubscriptions.length > activeSubscriptions.length && (
-                    <>
-                      <span className='text-muted-foreground/30'>·</span>
-                      <span className='text-muted-foreground'>
-                        {allSubscriptions.length - activeSubscriptions.length}{' '}
-                        {t('expired')}
-                      </span>
-                    </>
-                  )}
-                </span>
-              </div>
-              <div className='flex w-full items-center gap-2 sm:w-auto'>
-                <Select
-                  value={displayPref}
-                  onValueChange={handlePreferenceChange}
-                >
-                  <SelectTrigger className='h-8 flex-1 text-xs sm:w-[140px] sm:flex-none'>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem
-                      value='subscription_first'
-                      disabled={disablePref}
-                    >
-                      {t('Subscription First')}
-                      {disablePref ? ` (${t('No Active')})` : ''}
-                    </SelectItem>
-                    <SelectItem value='wallet_first'>
-                      {t('Wallet First')}
-                    </SelectItem>
-                    <SelectItem
-                      value='subscription_only'
-                      disabled={disablePref}
-                    >
-                      {t('Subscription Only')}
-                      {disablePref ? ` (${t('No Active')})` : ''}
-                    </SelectItem>
-                    <SelectItem value='wallet_only'>
-                      {t('Wallet Only')}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-                <Button
-                  variant='ghost'
-                  size='icon'
-                  className='h-8 w-8'
-                  onClick={handleRefresh}
-                  disabled={refreshing}
-                >
-                  <RefreshCw
-                    className={`h-3.5 w-3.5 ${refreshing ? 'animate-spin' : ''}`}
-                  />
-                </Button>
-              </div>
+                  </>
+                )}
+              </span>
+            </div>
+            <div className='flex w-full items-center gap-2 sm:w-auto'>
+              <Select
+                value={displayPref}
+                onValueChange={(v) => v !== null && handlePreferenceChange(v)}
+              >
+                <SelectTrigger className='h-8 flex-1 text-xs sm:w-[140px] sm:flex-none'>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='subscription_first' disabled={disablePref}>
+                    {t('Subscription First')}
+                    {disablePref ? ` (${t('No Active')})` : ''}
+                  </SelectItem>
+                  <SelectItem value='wallet_first'>
+                    {t('Wallet First')}
+                  </SelectItem>
+                  <SelectItem value='subscription_only' disabled={disablePref}>
+                    {t('Subscription Only')}
+                    {disablePref ? ` (${t('No Active')})` : ''}
+                  </SelectItem>
+                  <SelectItem value='wallet_only'>
+                    {t('Wallet Only')}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <Button
+                variant='ghost'
+                size='icon'
+                className='h-8 w-8'
+                onClick={handleRefresh}
+                disabled={refreshing}
+              >
+                <RefreshCw
+                  className={`h-3.5 w-3.5 ${refreshing ? 'animate-spin' : ''}`}
+                />
+              </Button>
             </div>
+          </div>
 
-            {disablePref && isSubPref && (
-              <p className='text-muted-foreground mt-2 text-xs'>
-                {t(
-                  'Preference saved as {{pref}}, but no active subscription. Wallet will be used automatically.',
-                  {
-                    pref:
-                      billingPreference === 'subscription_only'
-                        ? t('Subscription Only')
-                        : t('Subscription First'),
-                  }
-                )}
-              </p>
-            )}
-
-            {hasAny && (
-              <>
-                <Separator className='my-3' />
-                <div className='max-h-64 space-y-3 overflow-y-auto pr-1'>
-                  {allSubscriptions.map((sub) => {
-                    const subscription = sub.subscription
-                    const totalAmount = Number(subscription?.amount_total || 0)
-                    const usedAmount = Number(subscription?.amount_used || 0)
-                    const remainAmount =
-                      totalAmount > 0
-                        ? Math.max(0, totalAmount - usedAmount)
-                        : 0
-                    const planTitle =
-                      planTitleMap.get(subscription?.plan_id) || ''
-                    const remainDays = getRemainingDays(sub)
-                    const usagePercent = getUsagePercent(sub)
-                    const now = Date.now() / 1000
-                    const isExpired = (subscription?.end_time || 0) < now
-                    const isCancelled = subscription?.status === 'cancelled'
-                    const isActive =
-                      subscription?.status === 'active' && !isExpired
-
-                    return (
-                      <div
-                        key={subscription?.id}
-                        className='bg-background rounded-md border p-3 text-xs'
-                      >
-                        <div className='flex items-center justify-between'>
-                          <div className='flex items-center gap-2'>
-                            <span className='font-medium'>
-                              {planTitle
-                                ? `${planTitle} · ${t('Subscription')} #${subscription?.id}`
-                                : `${t('Subscription')} #${subscription?.id}`}
-                            </span>
-                            {isActive ? (
-                              <StatusBadge
-                                label={t('Active')}
-                                variant='success'
-                                copyable={false}
-                              />
-                            ) : isCancelled ? (
-                              <StatusBadge
-                                label={t('Cancelled')}
-                                variant='neutral'
-                                copyable={false}
-                              />
-                            ) : (
-                              <StatusBadge
-                                label={t('Expired')}
-                                variant='neutral'
-                                copyable={false}
-                              />
-                            )}
-                          </div>
-                          {isActive && (
-                            <span className='text-muted-foreground'>
-                              {t('{{count}} days remaining', {
-                                count: remainDays,
-                              })}
-                            </span>
-                          )}
-                        </div>
-                        <div className='text-muted-foreground mt-1.5'>
-                          {isActive
-                            ? t('Until')
-                            : isCancelled
-                              ? t('Cancelled at')
-                              : t('Expired at')}{' '}
-                          {new Date(
-                            (subscription?.end_time || 0) * 1000
-                          ).toLocaleString()}
-                        </div>
-                        {isActive &&
-                          (subscription?.next_reset_time ?? 0) > 0 && (
-                            <div className='text-muted-foreground mt-1'>
-                              {t('Next reset')}:{' '}
-                              {new Date(
-                                subscription!.next_reset_time! * 1000
-                              ).toLocaleString()}
-                            </div>
-                          )}
-                        <div className='text-muted-foreground mt-1'>
-                          {t('Total Quota')}:{' '}
-                          {totalAmount > 0 ? (
-                            <Tooltip>
-                              <TooltipTrigger asChild>
-                                <span className='cursor-help'>
-                                  {formatQuota(usedAmount)}/
-                                  {formatQuota(totalAmount)} · {t('Remaining')}{' '}
-                                  {formatQuota(remainAmount)}
-                                </span>
-                              </TooltipTrigger>
-                              <TooltipContent>
-                                {t('Raw Quota')}: {usedAmount}/{totalAmount} ·{' '}
-                                {t('Remaining')} {remainAmount}
-                              </TooltipContent>
-                            </Tooltip>
+          {disablePref && isSubPref && (
+            <p className='text-muted-foreground mt-2 text-xs'>
+              {t(
+                'Preference saved as {{pref}}, but no active subscription. Wallet will be used automatically.',
+                {
+                  pref:
+                    billingPreference === 'subscription_only'
+                      ? t('Subscription Only')
+                      : t('Subscription First'),
+                }
+              )}
+            </p>
+          )}
+
+          {hasAny && (
+            <>
+              <Separator className='my-3' />
+              <div className='max-h-64 space-y-3 overflow-y-auto pr-1'>
+                {allSubscriptions.map((sub) => {
+                  const subscription = sub.subscription
+                  const totalAmount = Number(subscription?.amount_total || 0)
+                  const usedAmount = Number(subscription?.amount_used || 0)
+                  const remainAmount =
+                    totalAmount > 0 ? Math.max(0, totalAmount - usedAmount) : 0
+                  const planTitle =
+                    planTitleMap.get(subscription?.plan_id) || ''
+                  const remainDays = getRemainingDays(sub)
+                  const usagePercent = getUsagePercent(sub)
+                  const now = Date.now() / 1000
+                  const isExpired = (subscription?.end_time || 0) < now
+                  const isCancelled = subscription?.status === 'cancelled'
+                  const isActive =
+                    subscription?.status === 'active' && !isExpired
+
+                  return (
+                    <div
+                      key={subscription?.id}
+                      className='bg-background rounded-md border p-3 text-xs'
+                    >
+                      <div className='flex items-center justify-between'>
+                        <div className='flex items-center gap-2'>
+                          <span className='font-medium'>
+                            {planTitle
+                              ? `${planTitle} · ${t('Subscription')} #${subscription?.id}`
+                              : `${t('Subscription')} #${subscription?.id}`}
+                          </span>
+                          {isActive ? (
+                            <StatusBadge
+                              label={t('Active')}
+                              variant='success'
+                              copyable={false}
+                            />
+                          ) : isCancelled ? (
+                            <StatusBadge
+                              label={t('Cancelled')}
+                              variant='neutral'
+                              copyable={false}
+                            />
                           ) : (
-                            t('Unlimited')
-                          )}
-                          {totalAmount > 0 && (
-                            <span className='ml-2'>
-                              {t('Used')} {usagePercent}%
-                            </span>
+                            <StatusBadge
+                              label={t('Expired')}
+                              variant='neutral'
+                              copyable={false}
+                            />
                           )}
                         </div>
-                        {totalAmount > 0 && isActive && (
-                          <Progress
-                            value={usagePercent}
-                            className='mt-2 h-1.5'
-                          />
+                        {isActive && (
+                          <span className='text-muted-foreground'>
+                            {t('{{count}} days remaining', {
+                              count: remainDays,
+                            })}
+                          </span>
                         )}
                       </div>
-                    )
-                  })}
-                </div>
-              </>
-            )}
-
-            {!hasAny && (
-              <p className='text-muted-foreground mt-2 text-xs'>
-                {t('Purchase a plan to enjoy model benefits')}
-              </p>
-            )}
-          </div>
-
-          {/* Available plans grid */}
-          {plans.length > 0 ? (
-            <div className='grid grid-cols-1 gap-3 2xl:grid-cols-2 2xl:gap-4'>
-              {plans.map((p, index) => {
-                const plan = p?.plan
-                if (!plan) return null
-                const totalAmount = Number(plan.total_amount || 0)
-                const price = Number(plan.price_amount || 0).toFixed(2)
-                const isPopular = index === 0 && plans.length > 1
-                const limit = Number(plan.max_purchase_per_user || 0)
-                const count = planPurchaseCountMap.get(plan.id) || 0
-                const reached = limit > 0 && count >= limit
-
-                const benefits = [
-                  `${t('Validity Period')}: ${formatDuration(plan, t)}`,
-                  formatResetPeriod(plan, t) !== t('No Reset')
-                    ? `${t('Quota Reset')}: ${formatResetPeriod(plan, t)}`
-                    : null,
-                  totalAmount > 0
-                    ? `${t('Total Quota')}: ${formatQuota(totalAmount)}`
-                    : `${t('Total Quota')}: ${t('Unlimited')}`,
-                  limit > 0 ? `${t('Purchase Limit')}: ${limit}` : null,
-                  plan.upgrade_group
-                    ? `${t('Upgrade Group')}: ${plan.upgrade_group}`
-                    : null,
-                ].filter(Boolean) as string[]
-
-                return (
-                  <Card
-                    key={plan.id}
-                    className={cn(
-                      'transition-shadow hover:shadow-md',
-                      isPopular && 'border-primary/70 shadow-sm'
-                    )}
-                  >
-                    <CardContent className='flex h-full flex-col p-3.5 sm:p-4'>
-                      <div className='mb-2 flex items-start justify-between gap-3'>
-                        <div className='min-w-0'>
-                          <h4 className='truncate font-semibold'>
-                            {plan.title || t('Subscription Plans')}
-                          </h4>
-                          {plan.subtitle && (
-                            <p className='text-muted-foreground truncate text-xs'>
-                              {plan.subtitle}
-                            </p>
-                          )}
+                      <div className='text-muted-foreground mt-1.5'>
+                        {isActive
+                          ? t('Until')
+                          : isCancelled
+                            ? t('Cancelled at')
+                            : t('Expired at')}{' '}
+                        {new Date(
+                          (subscription?.end_time || 0) * 1000
+                        ).toLocaleString()}
+                      </div>
+                      {isActive && (subscription?.next_reset_time ?? 0) > 0 && (
+                        <div className='text-muted-foreground mt-1'>
+                          {t('Next reset')}:{' '}
+                          {new Date(
+                            subscription!.next_reset_time! * 1000
+                          ).toLocaleString()}
                         </div>
-                        {isPopular && (
-                          <StatusBadge
-                            variant='info'
-                            copyable={false}
-                            className='shrink-0'
-                          >
-                            <Sparkles className='h-3 w-3' />
-                            {t('Recommended')}
-                          </StatusBadge>
+                      )}
+                      <div className='text-muted-foreground mt-1'>
+                        {t('Total Quota')}:{' '}
+                        {totalAmount > 0 ? (
+                          <Tooltip>
+                            <TooltipTrigger
+                              render={<span className='cursor-help' />}
+                            >
+                              {formatQuota(usedAmount)}/
+                              {formatQuota(totalAmount)} · {t('Remaining')}{' '}
+                              {formatQuota(remainAmount)}
+                            </TooltipTrigger>
+                            <TooltipContent>
+                              {t('Raw Quota')}: {usedAmount}/{totalAmount} ·{' '}
+                              {t('Remaining')} {remainAmount}
+                            </TooltipContent>
+                          </Tooltip>
+                        ) : (
+                          t('Unlimited')
+                        )}
+                        {totalAmount > 0 && (
+                          <span className='ml-2'>
+                            {t('Used')} {usagePercent}%
+                          </span>
                         )}
                       </div>
+                      {totalAmount > 0 && isActive && (
+                        <Progress value={usagePercent} className='mt-2 h-1.5' />
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            </>
+          )}
 
-                      <div className='py-2'>
-                        <span className='text-primary text-2xl font-bold'>
-                          ${price}
-                        </span>
+          {!hasAny && (
+            <p className='text-muted-foreground mt-2 text-xs'>
+              {t('Purchase a plan to enjoy model benefits')}
+            </p>
+          )}
+        </div>
+
+        {/* Available plans grid */}
+        {plans.length > 0 ? (
+          <div className='grid grid-cols-1 gap-3 2xl:grid-cols-2 2xl:gap-4'>
+            {plans.map((p, index) => {
+              const plan = p?.plan
+              if (!plan) return null
+              const totalAmount = Number(plan.total_amount || 0)
+              const price = Number(plan.price_amount || 0).toFixed(2)
+              const isPopular = index === 0 && plans.length > 1
+              const limit = Number(plan.max_purchase_per_user || 0)
+              const count = planPurchaseCountMap.get(plan.id) || 0
+              const reached = limit > 0 && count >= limit
+
+              const benefits = [
+                `${t('Validity Period')}: ${formatDuration(plan, t)}`,
+                formatResetPeriod(plan, t) !== t('No Reset')
+                  ? `${t('Quota Reset')}: ${formatResetPeriod(plan, t)}`
+                  : null,
+                totalAmount > 0
+                  ? `${t('Total Quota')}: ${formatQuota(totalAmount)}`
+                  : `${t('Total Quota')}: ${t('Unlimited')}`,
+                limit > 0 ? `${t('Purchase Limit')}: ${limit}` : null,
+                plan.upgrade_group
+                  ? `${t('Upgrade Group')}: ${plan.upgrade_group}`
+                  : null,
+              ].filter(Boolean) as string[]
+
+              return (
+                <Card
+                  key={plan.id}
+                  className={cn(
+                    'transition-shadow hover:shadow-md',
+                    isPopular && 'border-primary/70 shadow-sm'
+                  )}
+                >
+                  <CardContent className='flex h-full flex-col p-3.5 sm:p-4'>
+                    <div className='mb-2 flex items-start justify-between gap-3'>
+                      <div className='min-w-0'>
+                        <h4 className='truncate font-semibold'>
+                          {plan.title || t('Subscription Plans')}
+                        </h4>
+                        {plan.subtitle && (
+                          <p className='text-muted-foreground truncate text-xs'>
+                            {plan.subtitle}
+                          </p>
+                        )}
                       </div>
+                      {isPopular && (
+                        <StatusBadge
+                          variant='info'
+                          copyable={false}
+                          className='shrink-0'
+                        >
+                          <Sparkles className='h-3 w-3' />
+                          {t('Recommended')}
+                        </StatusBadge>
+                      )}
+                    </div>
 
-                      <div className='flex-1 space-y-1.5 pb-3'>
-                        {benefits.map((label) => (
-                          <div
-                            key={label}
-                            className='text-muted-foreground flex items-center gap-2 text-xs'
-                          >
-                            <Check className='text-primary h-3 w-3 shrink-0' />
-                            <span>{label}</span>
-                          </div>
-                        ))}
-                      </div>
+                    <div className='py-2'>
+                      <span className='text-primary text-2xl font-bold'>
+                        ${price}
+                      </span>
+                    </div>
 
-                      <Separator className='mb-3' />
-
-                      {reached ? (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <div>
-                              <Button
-                                variant='outline'
-                                className='w-full'
-                                disabled
-                              >
-                                {t('Limit Reached')}
-                              </Button>
-                            </div>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            {t('Purchase limit reached')} ({count}/{limit})
-                          </TooltipContent>
-                        </Tooltip>
-                      ) : (
-                        <Button
-                          variant='outline'
-                          className='w-full'
-                          onClick={() => {
-                            setSelectedPlan(p)
-                            setPurchaseOpen(true)
-                          }}
+                    <div className='flex-1 space-y-1.5 pb-3'>
+                      {benefits.map((label) => (
+                        <div
+                          key={label}
+                          className='text-muted-foreground flex items-center gap-2 text-xs'
                         >
-                          {t('Subscribe Now')}
-                        </Button>
-                      )}
-                    </CardContent>
-                  </Card>
-                )
-              })}
-            </div>
-          ) : (
-            <p className='text-muted-foreground py-4 text-center text-sm'>
-              {t('No plans available')}
-            </p>
-          )}
+                          <Check className='text-primary h-3 w-3 shrink-0' />
+                          <span>{label}</span>
+                        </div>
+                      ))}
+                    </div>
+
+                    <Separator className='mb-3' />
+
+                    {reached ? (
+                      <Tooltip>
+                        <TooltipTrigger render={<div />}>
+                          <Button variant='outline' className='w-full' disabled>
+                            {t('Limit Reached')}
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          {t('Purchase limit reached')} ({count}/{limit})
+                        </TooltipContent>
+                      </Tooltip>
+                    ) : (
+                      <Button
+                        variant='outline'
+                        className='w-full'
+                        onClick={() => {
+                          setSelectedPlan(p)
+                          setPurchaseOpen(true)
+                        }}
+                      >
+                        {t('Subscribe Now')}
+                      </Button>
+                    )}
+                  </CardContent>
+                </Card>
+              )
+            })}
+          </div>
+        ) : (
+          <p className='text-muted-foreground py-4 text-center text-sm'>
+            {t('No plans available')}
+          </p>
+        )}
       </TitledCard>
 
       <SubscriptionPurchaseDialog
diff --git a/web/default/src/hooks/use-mobile.ts b/web/default/src/hooks/use-mobile.ts
new file mode 100644
index 00000000000..4331d5c5620
--- /dev/null
+++ b/web/default/src/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/web/default/src/hooks/use-top-nav-links.ts b/web/default/src/hooks/use-top-nav-links.ts
index 75380fbbded..004e594494e 100644
--- a/web/default/src/hooks/use-top-nav-links.ts
+++ b/web/default/src/hooks/use-top-nav-links.ts
@@ -15,6 +15,7 @@ const DEFAULT_HEADER_NAV_MODULES = {
   home: true,
   console: true,
   pricing: { enabled: true, requireAuth: false },
+  rankings: { enabled: true, requireAuth: false },
   docs: true,
   about: true,
 }
@@ -74,6 +75,13 @@ export function useTopNavLinks(): TopNavLink[] {
     links.push({ title: t('Model Square'), href: '/pricing', disabled })
   }
 
+  // Rankings
+  const rankings = modules?.rankings
+  if (rankings && typeof rankings === 'object' && rankings.enabled) {
+    const disabled = rankings.requireAuth && !isAuthed
+    links.push({ title: t('Rankings'), href: '/rankings', disabled })
+  }
+
   // Docs (supports external links)
   if (modules?.docs !== false) {
     if (docsLink) {
diff --git a/web/default/src/i18n/locales/_reports/_sync-report.json b/web/default/src/i18n/locales/_reports/_sync-report.json
index 9596d7c4c61..6568018d189 100644
--- a/web/default/src/i18n/locales/_reports/_sync-report.json
+++ b/web/default/src/i18n/locales/_reports/_sync-report.json
@@ -17,13 +17,13 @@
       "file": "ja.json",
       "missingCount": 0,
       "extrasCount": 0,
-      "untranslatedCount": 85
+      "untranslatedCount": 88
     },
     "ru": {
       "file": "ru.json",
       "missingCount": 0,
       "extrasCount": 0,
-      "untranslatedCount": 89
+      "untranslatedCount": 92
     },
     "vi": {
       "file": "vi.json",
@@ -35,7 +35,7 @@
       "file": "zh.json",
       "missingCount": 0,
       "extrasCount": 0,
-      "untranslatedCount": 96
+      "untranslatedCount": 99
     }
   }
 }
diff --git a/web/default/src/i18n/locales/_reports/fr.untranslated.json b/web/default/src/i18n/locales/_reports/fr.untranslated.json
index 0bae8f23c71..d3d5111b575 100644
--- a/web/default/src/i18n/locales/_reports/fr.untranslated.json
+++ b/web/default/src/i18n/locales/_reports/fr.untranslated.json
@@ -1,5 +1,4 @@
 {
-  "Go to Settings": "Go to Settings",
-  "Failed to adjust quota": "Failed to adjust quota",
-  "Select an operation mode and enter the amount": "Select an operation mode and enter the amount"
+  "apps using the most tokens through new-api": "Apps using the most tokens through new-api",
+  "apps using the most tokens through new-api.": "Apps using the most tokens through new-api."
 }
diff --git a/web/default/src/i18n/locales/_reports/ja.untranslated.json b/web/default/src/i18n/locales/_reports/ja.untranslated.json
index cf803a766e9..7127c97626e 100644
--- a/web/default/src/i18n/locales/_reports/ja.untranslated.json
+++ b/web/default/src/i18n/locales/_reports/ja.untranslated.json
@@ -77,6 +77,9 @@
   "Submodel": "Submodel",
   "SunoAPI": "SunoAPI",
   "Telegram": "Telegram",
+  "TTFT P50": "TTFT P50",
+  "TTFT P95": "TTFT P95",
+  "TTFT P99": "TTFT P99",
   "Vertex AI": "Vertex AI",
   "VolcEngine": "VolcEngine",
   "Webhook URL": "Webhook URL",
diff --git a/web/default/src/i18n/locales/_reports/ru.untranslated.json b/web/default/src/i18n/locales/_reports/ru.untranslated.json
index 20c9dc77ad8..ebb8aee4e6b 100644
--- a/web/default/src/i18n/locales/_reports/ru.untranslated.json
+++ b/web/default/src/i18n/locales/_reports/ru.untranslated.json
@@ -81,6 +81,9 @@
   "SunoAPI": "SunoAPI",
   "Telegram": "Telegram",
   "Tencent": "Tencent",
+  "TTFT P50": "TTFT P50",
+  "TTFT P95": "TTFT P95",
+  "TTFT P99": "TTFT P99",
   "Vertex AI": "Vertex AI",
   "VolcEngine": "VolcEngine",
   "WeChat": "WeChat",
diff --git a/web/default/src/i18n/locales/_reports/vi.untranslated.json b/web/default/src/i18n/locales/_reports/vi.untranslated.json
index 0bae8f23c71..d3d5111b575 100644
--- a/web/default/src/i18n/locales/_reports/vi.untranslated.json
+++ b/web/default/src/i18n/locales/_reports/vi.untranslated.json
@@ -1,5 +1,4 @@
 {
-  "Go to Settings": "Go to Settings",
-  "Failed to adjust quota": "Failed to adjust quota",
-  "Select an operation mode and enter the amount": "Select an operation mode and enter the amount"
+  "apps using the most tokens through new-api": "Apps using the most tokens through new-api",
+  "apps using the most tokens through new-api.": "Apps using the most tokens through new-api."
 }
diff --git a/web/default/src/i18n/locales/_reports/zh.untranslated.json b/web/default/src/i18n/locales/_reports/zh.untranslated.json
index 78ee1e36a82..d7475254074 100644
--- a/web/default/src/i18n/locales/_reports/zh.untranslated.json
+++ b/web/default/src/i18n/locales/_reports/zh.untranslated.json
@@ -87,6 +87,9 @@
   "Submodel": "Submodel",
   "SunoAPI": "SunoAPI",
   "Telegram": "Telegram",
+  "TTFT P50": "TTFT P50",
+  "TTFT P95": "TTFT P95",
+  "TTFT P99": "TTFT P99",
   "Uptime Kuma": "Uptime Kuma",
   "Uptime Kuma URL": "Uptime Kuma URL",
   "Vertex AI": "Vertex AI",
diff --git a/web/default/src/i18n/locales/en.json b/web/default/src/i18n/locales/en.json
index eaf3e23121f..4f8b1b5a145 100644
--- a/web/default/src/i18n/locales/en.json
+++ b/web/default/src/i18n/locales/en.json
@@ -28,16 +28,22 @@
     "{{count}} days remaining": "{{count}} days remaining",
     "{{count}} disabled channel(s) deleted": "{{count}} disabled channel(s) deleted",
     "{{count}} hours ago": "{{count}} hours ago",
+    "{{count}} incidents": "{{count}} incidents",
+    "{{count}} incidents in the last 30 days": "{{count}} incidents in the last 30 days",
     "{{count}} IP(s)": "{{count}} IP(s)",
     "{{count}} log entries removed.": "{{count}} log entries removed.",
     "{{count}} minutes ago": "{{count}} minutes ago",
     "{{count}} model(s)": "{{count}} model(s)",
+    "{{count}} models": "{{count}} models",
     "{{count}} months ago": "{{count}} months ago",
     "{{count}} override": "{{count}} override",
     "{{count}} tiers": "{{count}} tiers",
+    "{{count}} vendors": "{{count}} vendors",
     "{{count}} weeks ago": "{{count}} weeks ago",
     "{{field}} updated to {{value}}": "{{field}} updated to {{value}}",
     "{{field}} updated to {{value}} for tag: {{tag}}": "{{field}} updated to {{value}} for tag: {{tag}}",
+    "{{modality}} not supported": "{{modality}} not supported",
+    "{{modality}} supported": "{{modality}} supported",
     "{{n}} model(s) selected": "{{n}} model(s) selected",
     "{{value}}ms": "{{value}}ms",
     "{{value}}s": "{{value}}s",
@@ -45,9 +51,13 @@
     "@lobehub/icons key name": "@lobehub/icons key name",
     "/status/": "/status/",
     "/your/endpoint": "/your/endpoint",
+    "#1 App": "#1 App",
+    "#1 by usage": "#1 by usage",
+    "#1 Model": "#1 Model",
     "% off": "% off",
     "`, and `-nothinking` suffixes while routing to the correct Gemini variant.": "`, and `-nothinking` suffixes while routing to the correct Gemini variant.",
     "© 2025 Your Company. All rights reserved.": "© 2025 Your Company. All rights reserved.",
+    "+{{count}} more": "+{{count}} more",
     "| Based on": "| Based on",
     "0 means unlimited": "0 means unlimited",
     "1 Day": "1 Day",
@@ -75,6 +85,7 @@
     "3. Enter your Gotify server URL and token above": "3. Enter your Gotify server URL and token above",
     "30 Days": "30 Days",
     "30 days ago": "30 days ago",
+    "30d change": "30d change",
     "5-Hour Window": "5-Hour Window",
     "50 / page": "50 / page",
     "7 Days": "7 Days",
@@ -97,12 +108,15 @@
     "Account ID *": "Account ID *",
     "Account Info": "Account Info",
     "Account used when authenticating with the SMTP server": "Account used when authenticating with the SMTP server",
+    "Across all groups": "Across all groups",
     "Action confirmation": "Action Confirmation",
     "Actions": "Actions",
     "active": "active",
     "Active": "Active",
+    "Active apps": "Active apps",
     "Active Cache Count": "Active Cache Count",
     "Active Files": "Active Files",
+    "Active models": "Active models",
     "active users": "active users",
     "Actual Amount": "Actual Amount",
     "Actual Model": "Actual Model",
@@ -190,12 +204,18 @@
     "Advanced platform configuration.": "Advanced platform configuration.",
     "Advanced Settings": "Advanced Settings",
     "Advanced text editing": "Advanced text editing",
+    "Aesthetic style": "Aesthetic style",
     "After clicking the button, you'll be asked to authorize the bot": "After clicking the button, you'll be asked to authorize the bot",
     "After disabling, it will no longer be shown to users, but historical orders are not affected. Continue?": "After disabling, it will no longer be shown to users, but historical orders are not affected. Continue?",
     "After enabling, the plan will be shown to users. Continue?": "After enabling, the plan will be shown to users. Continue?",
     "After invalidating, this subscription will be immediately deactivated. Historical records are not affected. Continue?": "After invalidating, this subscription will be immediately deactivated. Historical records are not affected. Continue?",
     "After scanning, the binding will complete automatically": "After scanning, the binding will complete automatically",
     "Agent ID *": "Agent ID *",
+    "Aggregate tokens delivered across the platform": "Aggregate tokens delivered across the platform",
+    "Aggregate traffic across every category": "Aggregate traffic across every category",
+    "Aggregated across enabled groups": "Aggregated across enabled groups",
+    "Aggregated across the apps below": "Aggregated across the apps below",
+    "Aggregated traffic by upstream model provider": "Aggregated traffic by upstream model provider",
     "Aggregated usage metrics and trend charts.": "Aggregated usage metrics and trend charts.",
     "aggregates 50+ AI providers behind one unified API. Manage access, track costs, and scale effortlessly.": "aggregates 50+ AI providers behind one unified API. Manage access, track costs, and scale effortlessly.",
     "AGPL v3.0 License": "AGPL v3.0 License",
@@ -209,19 +229,23 @@
     "AK/SK mode: use AccessKey|SecretAccessKey|Region": "AK/SK mode: use AccessKey|SecretAccessKey|Region",
     "Ali": "Ali",
     "All": "All",
+    "All categories": "All categories",
     "All edits are overwrite operations. Leave fields empty to keep current values unchanged.": "All edits are overwrite operations. Leave fields empty to keep current values unchanged.",
     "All files exceed the maximum size.": "All files exceed the maximum size.",
     "All Groups": "All Groups",
     "All Models": "All Models",
     "All models in use are properly configured.": "All models in use are properly configured.",
     "All Must Match (AND)": "All Must Match (AND)",
+    "All requests must include": "All requests must include",
     "All Status": "All Status",
     "All Sync Status": "All Sync Status",
+    "All systems operational": "All systems operational",
     "All Tags": "All Tags",
     "All Types": "All Types",
     "All upstream data is trusted": "All upstream data is trusted",
     "All Vendors": "All Vendors",
     "All Your AI Models": "All Your AI Models",
+    "All-time": "All-time",
     "Allocated Memory": "Allocated Memory",
     "Allow accountFilter parameter": "Allow accountFilter parameter",
     "Allow Claude beta query passthrough": "Allow Claude beta query passthrough",
@@ -279,6 +303,7 @@
     "Answer": "Answer",
     "Anthropic": "Anthropic",
     "Any Match (OR)": "Any Match (OR)",
+    "API": "API",
     "API Access": "API Access",
     "API Addresses": "API Addresses",
     "API Base URL (Important: Not Chat API) *": "API Base URL (Important: Not Chat API) *",
@@ -312,6 +337,8 @@
     "API URL": "API URL",
     "API usage records": "API usage records",
     "API2GPT": "API2GPT",
+    "App": "App",
+    "App rankings shown here are simulated for preview purposes and will be replaced with live usage data once the backend integration is complete.": "App rankings shown here are simulated for preview purposes and will be replaced with live usage data once the backend integration is complete.",
     "Append": "Append",
     "Append mode: New keys will be added to the end of the existing key list": "Append mode: New keys will be added to the end of the existing key list",
     "Append Template": "Append Template",
@@ -329,6 +356,10 @@
     "Apply Sync": "Apply Sync",
     "Applying...": "Applying...",
     "Approx.": "Approx.",
+    "apps": "apps",
+    "Apps": "Apps",
+    "apps tracked": "apps tracked",
+    "Apps using the most tokens through new-api": "Apps using the most tokens through new-api",
     "are also listed here. Remove them from Models to keep the `/v1/models` response user-friendly and hide vendor-specific names.": "are also listed here. Remove them from Models to keep the `/v1/models` response user-friendly and hide vendor-specific names.",
     "Are you sure you want to delete": "Are you sure you want to delete",
     "Are you sure you want to delete all auto-disabled keys? This action cannot be undone.": "Are you sure you want to delete all auto-disabled keys? This action cannot be undone.",
@@ -397,6 +428,7 @@
     "Available Models": "Available Models",
     "Available Rewards": "Available Rewards",
     "Average RPM": "Average RPM",
+    "Average tokens per second sustained per group": "Average tokens per second sustained per group",
     "Average TPM": "Average TPM",
     "AWS": "AWS",
     "AWS Bedrock Claude Compat": "AWS Bedrock Claude Compat",
@@ -428,6 +460,7 @@
     "Base amount. Actual deduction = base amount × system group rate.": "Base amount. Actual deduction = base amount × system group rate.",
     "Base Limits": "Base Limits",
     "Base multipliers applied when users select specific groups.": "Base multipliers applied when users select specific groups.",
+    "Base Price": "Base Price",
     "Base rate limit windows for this account.": "Base rate limit windows for this account.",
     "Base URL": "Base URL",
     "Base URL of your Uptime Kuma instance": "Base URL of your Uptime Kuma instance",
@@ -448,6 +481,7 @@
     "Batch processing failed": "Batch processing failed",
     "Batch upstream model updates applied: {{channels}} channels, {{added}} added, {{removed}} removed, {{fails}} failed": "Batch upstream model updates applied: {{channels}} channels, {{added}} added, {{removed}} removed, {{fails}} failed",
     "Best for single-tenant deployments. Pricing and billing options stay hidden.": "Best for single-tenant deployments. Pricing and billing options stay hidden.",
+    "Best TTFT": "Best TTFT",
     "Billing": "Billing",
     "Billing currency": "Billing currency",
     "Billing Details": "Billing Details",
@@ -474,6 +508,7 @@
     "Blocked keywords": "Blocked keywords",
     "Blocks messages when sensitive keywords are detected.": "Blocks messages when sensitive keywords are detected.",
     "Body param": "Body param",
+    "Border radius": "Border radius",
     "Bot Name": "Bot Name",
     "Bot Protection": "Bot Protection",
     "Bot Token": "Bot Token",
@@ -485,7 +520,7 @@
     "Broadcast a global banner to users. Markdown is supported.": "Broadcast a global banner to users. Markdown is supported.",
     "Broadcast short system notices on the dashboard": "Broadcast short system notices on the dashboard",
     "Browse and compare": "Browse and compare",
-    "Discover curated AI models, compare pricing and capabilities, and choose the right model for every scenario.": "Discover curated AI models, compare pricing and capabilities, and choose the right model for every scenario.",
+    "Browse rankings by category": "Browse rankings by category",
     "Budget tokens = max tokens × ratio. Accepts a decimal between 0.002 and 1. Recommended to keep aligned with upstream billing.": "Budget tokens = max tokens × ratio. Accepts a decimal between 0.002 and 1. Recommended to keep aligned with upstream billing.",
     "Budget tokens = max tokens × ratio. Accepts a decimal between 0.1 and 1.": "Budget tokens = max tokens × ratio. Accepts a decimal between 0.1 and 1.",
     "Budget Tokens Ratio": "Budget Tokens Ratio",
@@ -495,6 +530,8 @@
     "Built-in Device": "Built-in Device",
     "Built-in: phone fingerprint/face, or Windows Hello; External: USB security key": "Built-in: phone fingerprint/face, or Windows Hello; External: USB security key",
     "by": "by",
+    "By category": "By category",
+    "By model author": "By model author",
     "Cache": "Cache",
     "Cache Creation": "Cache Creation",
     "Cache Creation (1h)": "Cache Creation (1h)",
@@ -506,6 +543,7 @@
     "Cache mode": "Cache mode",
     "Cache ratio": "Cache ratio",
     "Cache Read": "Cache Read",
+    "Cache repeated prompt prefixes for cheaper, faster reuse": "Cache repeated prompt prefixes for cheaper, faster reuse",
     "Cache write": "Cache write",
     "Cache Write": "Cache Write",
     "Cache Write (1h)": "Cache Write (1h)",
@@ -527,13 +565,16 @@
     "Cancel": "Cancel",
     "Cancelled": "Cancelled",
     "Cancelled at": "Cancelled at",
+    "Capabilities": "Capabilities",
     "Capture a reusable bundle of models, tags, or endpoints.": "Capture a reusable bundle of models, tags, or endpoints.",
     "Card view": "Card view",
+    "Category": "Category",
     "Category Name": "Category Name",
     "Category name is required": "Category name is required",
     "Category name must be less than 50 characters": "Category name must be less than 50 characters",
     "Caution": "Caution",
     "CC Switch": "CC Switch",
+    "Centered": "Centered",
     "Chain": "Chain",
     "Change": "Change",
     "Change language": "Change language",
@@ -563,6 +604,7 @@
     "channel(s)? This action cannot be undone.": "channel(s)? This action cannot be undone.",
     "Channels": "Channels",
     "Channels deleted successfully": "Channels deleted successfully",
+    "Character chat, storytelling, persona": "Character chat, storytelling, persona",
     "Chart Preferences": "Chart Preferences",
     "Chart Settings": "Chart Settings",
     "Chat": "Chat",
@@ -632,6 +674,7 @@
     "Cleared all models": "Cleared all models",
     "Click \"Create Plan\" to create your first subscription plan": "Click \"Create Plan\" to create your first subscription plan",
     "Click \"Generate\" to create a token": "Click \"Generate\" to create a token",
+    "Click any category to drill into its models, apps, and trends": "Click any category to drill into its models, apps, and trends",
     "Click for details": "Click for details",
     "Click save when you're done.": "Click save when you're done.",
     "Click save when you&apos;re done.": "Click save when you&apos;re done.",
@@ -655,6 +698,9 @@
     "CNY": "CNY",
     "CNY per USD": "CNY per USD",
     "Code": "Code",
+    "Code generation, refactoring, autocomplete": "Code generation, refactoring, autocomplete",
+    "Code interpreter": "Code interpreter",
+    "Code samples": "Code samples",
     "Codes copied!": "Codes copied!",
     "Codex": "Codex",
     "Codex Account & Usage": "Codex Account & Usage",
@@ -666,7 +712,9 @@
     "Collapse All": "Collapse All",
     "Color": "Color",
     "Color is required": "Color is required",
+    "Color preset": "Color preset",
     "Color:": "Color:",
+    "Comfortable": "Comfortable",
     "Coming Soon!": "Coming Soon!",
     "Comma-separated exact model names. Prefix with regex: to ignore by regular expression.": "Comma-separated exact model names. Prefix with regex: to ignore by regular expression.",
     "Comma-separated list of allowed ports (empty = all ports)": "Comma-separated list of allowed ports (empty = all ports)",
@@ -679,6 +727,13 @@
     "Common ports include 25, 465, and 587": "Common ports include 25, 465, and 587",
     "Common User": "Common User",
     "Community driven, self-hosted, and extensible": "Community driven, self-hosted, and extensible",
+    "Compact": "Compact",
+    "Compare each vendor's token share across the past few weeks": "Compare each vendor's token share across the past few weeks",
+    "Compare each vendor's token share across the past year": "Compare each vendor's token share across the past year",
+    "Compare each vendor's token share over the past 24 hours": "Compare each vendor's token share over the past 24 hours",
+    "Compare each vendor's token share over the past month": "Compare each vendor's token share over the past month",
+    "Compare each vendor's token share since launch": "Compare each vendor's token share since launch",
+    "Compare the most popular models on the platform": "Compare the most popular models on the platform",
     "compatible API routes": "compatible API routes",
     "Compatible API routes for common AI application workflows": "Compatible API routes for common AI application workflows",
     "Complete API documentation with multi-language SDK support": "Complete API documentation with multi-language SDK support",
@@ -792,6 +847,8 @@
     "Content displayed on the home page (supports Markdown)": "Content displayed on the home page (supports Markdown)",
     "Content not found.": "Content not found.",
     "Content not modified!": "Content not modified!",
+    "Content width": "Content width",
+    "Context": "Context",
     "Continue": "Continue",
     "Continue with {{name}}": "Continue with {{name}}",
     "Continue with Discord": "Continue with Discord",
@@ -800,11 +857,13 @@
     "Continue with OIDC": "Continue with OIDC",
     "Continue with Telegram": "Continue with Telegram",
     "Continue with WeChat": "Continue with WeChat",
+    "Contract review, compliance, summarisation": "Contract review, compliance, summarisation",
     "Control log retention and clean historical data.": "Control log retention and clean historical data.",
     "Control passthrough behavior and connection keep-alive settings": "Control passthrough behavior and connection keep-alive settings",
     "Control request frequency to prevent abuse and manage system load.": "Control request frequency to prevent abuse and manage system load.",
     "Control which models are exposed and which groups may use them.": "Control which models are exposed and which groups may use them.",
     "Control which sidebar areas and modules are available to all users.": "Control which sidebar areas and modules are available to all users.",
+    "Controls how much the model thinks before answering": "Controls how much the model thinks before answering",
     "Controls whether user verification (biometrics/PIN) is required during Passkey flows.": "Controls whether user verification (biometrics/PIN) is required during Passkey flows.",
     "Conversion rate from USD to your custom currency": "Conversion rate from USD to your custom currency",
     "Convert reasoning_content to <think> tag in content": "Convert reasoning_content to <think> tag in content",
@@ -845,6 +904,7 @@
     "Copy to clipboard": "Copy to clipboard",
     "Copy token": "Copy token",
     "Copy URL": "Copy URL",
+    "Copywriting, ad creative, SEO": "Copywriting, ad creative, SEO",
     "Core Configuration": "Core Configuration",
     "Core Features": "Core Features",
     "Cost": "Cost",
@@ -936,6 +996,11 @@
     "Customize sidebar display content": "Customize sidebar display content",
     "Daily": "Daily",
     "Daily Check-in": "Daily Check-in",
+    "Daily token usage by model across the past few weeks": "Daily token usage by model across the past few weeks",
+    "Daily token usage by model across the past month": "Daily token usage by model across the past month",
+    "Daily token usage by model over the past month": "Daily token usage by model over the past month",
+    "Daily uptime over the last 30 days": "Daily uptime over the last 30 days",
+    "Daily uptime; {{incidents}} incidents totalling {{minutes}} minutes": "Daily uptime; {{incidents}} incidents totalling {{minutes}} minutes",
     "Dark": "Dark",
     "Dashboard": "Dashboard",
     "Dashboard Preferences": "Dashboard Preferences",
@@ -944,6 +1009,7 @@
     "Data directory:": "Data directory:",
     "Data is stored locally on this device. Use system backups to keep a safe copy.": "Data is stored locally on this device. Use system backups to keep a safe copy.",
     "Data management and log viewing": "Data management and log viewing",
+    "Data retention": "Data retention",
     "Database": "Database",
     "Database check": "Database check",
     "Date and time when this announcement should be displayed": "Date and time when this announcement should be displayed",
@@ -956,6 +1022,7 @@
     "default": "default",
     "Default": "Default",
     "Default (New Frontend)": "Default (New Frontend)",
+    "Default / range": "Default / range",
     "Default API Version *": "Default API Version *",
     "Default API version for this channel": "Default API version for this channel",
     "Default Collapse Sidebar": "Default Collapse Sidebar",
@@ -972,6 +1039,7 @@
     "Define API endpoints for this model (JSON format)": "Define API endpoints for this model (JSON format)",
     "Define endpoint mappings for each provider.": "Define endpoint mappings for each provider.",
     "Define per-group rules to add, remove, or append selectable groups for specific user groups.": "Define per-group rules to add, remove, or append selectable groups for specific user groups.",
+    "Degraded performance recently": "Degraded performance recently",
     "Delete": "Delete",
     "Delete (": "Delete (",
     "Delete {{count}} API key(s)?": "Delete {{count}} API key(s)?",
@@ -1009,6 +1077,7 @@
     "Demo site mode": "Demo site mode",
     "Demo Site Mode": "Demo Site Mode",
     "Demote": "Demote",
+    "Density": "Density",
     "Deploy your own gateway and start routing requests through your configured upstream services.": "Deploy your own gateway and start routing requests through your configured upstream services.",
     "Deployment created successfully": "Deployment created successfully",
     "Deployment details": "Deployment details",
@@ -1035,6 +1104,7 @@
     "Detection complete: {{add}} to add, {{remove}} to remove": "Detection complete: {{add}} to add, {{remove}} to remove",
     "Detection failed": "Detection failed",
     "Determines how this group is applied elsewhere.": "Determines how this group is applied elsewhere.",
+    "Deterministic sampling seed (best-effort)": "Deterministic sampling seed (best-effort)",
     "Developer Friendly": "Developer Friendly",
     "Device Type Preference": "Device Type Preference",
     "Dify": "Dify",
@@ -1069,6 +1139,9 @@
     "Discount Rate:": "Discount Rate:",
     "Discount ratio for cache hits.": "Discount ratio for cache hits.",
     "Discouraged": "Discouraged",
+    "Discover curated AI models, compare pricing and capabilities, and choose the right model for every scenario.": "Discover curated AI models, compare pricing and capabilities, and choose the right model for every scenario.",
+    "Discover the leading models in each domain": "Discover the leading models in each domain",
+    "Discover the most-used models, top apps, and rising vendors on the platform — updated continuously across every category.": "Discover the most-used models, top apps, and rising vendors on the platform — updated continuously across every category.",
     "Discovering...": "Discovering...",
     "Disk cache cleared": "Disk cache cleared",
     "Disk Cache Settings": "Disk Cache Settings",
@@ -1191,6 +1264,7 @@
     "Edit Vendor": "Edit Vendor",
     "edit_this": "edit_this",
     "Editor mode": "Editor mode",
+    "Education": "Education",
     "Email": "Email",
     "Email (required for verification)": "Email (required for verification)",
     "Email Address": "Email Address",
@@ -1200,6 +1274,7 @@
     "Email Domain Whitelist": "Email Domain Whitelist",
     "Email Field": "Email Field",
     "Email Verification": "Email Verification",
+    "Email, summarisation, knowledge work": "Email, summarisation, knowledge work",
     "Embeddings": "Embeddings",
     "Empty value will be saved as {}.": "Empty value will be saved as {}.",
     "Enable": "Enable",
@@ -1247,10 +1322,12 @@
     "Enabled all channels with tag: {{tag}}": "Enabled all channels with tag: {{tag}}",
     "Enabled Status": "Enabled Status",
     "Enabling...": "Enabling...",
+    "Encourages introducing new topics": "Encourages introducing new topics",
     "End": "End",
     "End Error": "End Error",
     "End Reason": "End Reason",
     "End Time": "End Time",
+    "End-user identifier for abuse monitoring": "End-user identifier for abuse monitoring",
     "Endpoint": "Endpoint",
     "Endpoint config": "Endpoint config",
     "Endpoint Configuration": "Endpoint Configuration",
@@ -1358,10 +1435,12 @@
     "Excellent": "Excellent",
     "Exchange rate is required": "Exchange rate is required",
     "Exchange rate must be greater than 0": "Exchange rate must be greater than 0",
+    "Execute code in a sandbox during the response": "Execute code in a sandbox during the response",
     "Exhausted": "Exhausted",
     "Existing account will be reused": "Existing account will be reused",
     "Existing Models ({{count}})": "Existing Models ({{count}})",
     "Exists": "Exists",
+    "Expand": "Expand",
     "Expand All": "Expand All",
     "Expected a JSON array.": "Expected a JSON array.",
     "Experiment with prompts and models in real time.": "Experiment with prompts and models in real time.",
@@ -1530,6 +1609,7 @@
     "Field Mapping": "Field Mapping",
     "Field passthrough controls": "Field passthrough controls",
     "Field Path": "Field Path",
+    "File": "File",
     "File Search": "File Search",
     "Files to Retain": "Files to Retain",
     "Fill All Models": "Fill All Models",
@@ -1569,6 +1649,7 @@
     "Final Consumed": "Final Consumed",
     "Final cost = base × multiplier when conditions match": "Final cost = base × multiplier when conditions match",
     "Final price multiplier (0.95 = 5% discount": "Final price multiplier (0.95 = 5% discount",
+    "Finance": "Finance",
     "Fine-tune Midjourney integration and guardrails.": "Fine-tune Midjourney integration and guardrails.",
     "Finish Time": "Finish Time",
     "First/Last Frame to Video": "First/Last Frame to Video",
@@ -1576,6 +1657,7 @@
     "Fixed abilities: {{success}} succeeded, {{fails}} failed": "Fixed abilities: {{success}} succeeded, {{fails}} failed",
     "Fixed price": "Fixed price",
     "Fixed price (USD)": "Fixed price (USD)",
+    "Floating": "Floating",
     "FluentRead extension not detected. Please ensure it is installed and active.": "FluentRead extension not detected. Please ensure it is installed and active.",
     "Follow the guided steps to prepare your workspace before the first login.": "Follow the guided steps to prepare your workspace before the first login.",
     "Footer": "Footer",
@@ -1596,10 +1678,13 @@
     "footer.new\u0061pi.projectAttributionSuffix": "All rights reserved. Designed and developed by the project contributors.",
     "For channels added after May 10, 2025, no need to remove \".\" from model names during deployment": "For channels added after May 10, 2025, no need to remove \".\" from model names during deployment",
     "For private deployments, format: https://fastgpt.run/api/openapi": "For private deployments, format: https://fastgpt.run/api/openapi",
+    "Force a syntactically valid JSON response": "Force a syntactically valid JSON response",
     "Force AUTH LOGIN": "Force AUTH LOGIN",
     "Force Format": "Force Format",
     "Force format response to OpenAI standard (OpenAI channel only)": "Force format response to OpenAI standard (OpenAI channel only)",
+    "Force JSON object or schema-conforming output": "Force JSON object or schema-conforming output",
     "Force SMTP authentication using AUTH LOGIN method": "Force SMTP authentication using AUTH LOGIN method",
+    "Forest Whisper": "Forest Whisper",
     "Forgot password": "Forgot password",
     "Forgot password?": "Forgot password?",
     "Form reset to saved values": "Form reset to saved values",
@@ -1614,6 +1699,7 @@
     "Format: APPID|APISecret|APIKey": "Format: APPID|APISecret|APIKey",
     "Format: AppId|SecretId|SecretKey": "Format: AppId|SecretId|SecretKey",
     "Forward requests directly to upstream providers without any post-processing.": "Forward requests directly to upstream providers without any post-processing.",
+    "Frames per second": "Frames per second",
     "Free: {{free}} / Total: {{total}}": "Free: {{free}} / Total: {{total}}",
     "Friendly name to identify this channel": "Friendly name to identify this channel",
     "From Address": "From Address",
@@ -1623,6 +1709,9 @@
     "Full API Key": "Full API Key",
     "Full Base URL (supports": "Full Base URL (supports",
     "Full Code": "Full Code",
+    "Full layout": "Full layout",
+    "Full width": "Full width",
+    "Function calling": "Function calling",
     "Functions": "Functions",
     "GC Count": "GC Count",
     "GC executed": "GC executed",
@@ -1639,9 +1728,11 @@
     "Generate Music": "Generate Music",
     "Generate new backup codes for account recovery": "Generate new backup codes for account recovery",
     "Generate New Codes": "Generate New Codes",
+    "Generate tokens from the Tokens page; you can scope them to specific models, groups, IPs, and rate-limits.": "Generate tokens from the Tokens page; you can scope them to specific models, groups, IPs, and rate-limits.",
     "Generated image": "Generated image",
     "Generating new codes will invalidate all existing backup codes.": "Generating new codes will invalidate all existing backup codes.",
     "Generating...": "Generating...",
+    "Generation quality preset": "Generation quality preset",
     "Generic cache": "Generic cache",
     "Get notified when balance falls below this value": "Get notified when balance falls below this value",
     "Get Started": "Get Started",
@@ -1651,6 +1742,7 @@
     "Global configuration and administrative tools.": "Global configuration and administrative tools.",
     "Global Coverage": "Global Coverage",
     "Global Model Configuration": "Global Model Configuration",
+    "Global throughput": "Global throughput",
     "Go Back": "Go Back",
     "Go back and edit": "Go back and edit",
     "Go to Dashboard": "Go to Dashboard",
@@ -1697,6 +1789,7 @@
     "Groups": "Groups",
     "Groups *": "Groups *",
     "Groups that users can select when creating API keys.": "Groups that users can select when creating API keys.",
+    "Growth": "Growth",
     "Guardrails": "Guardrails",
     "Guest": "Guest",
     "h": "h",
@@ -1710,11 +1803,14 @@
     "Has been invalidated": "Invalidated successfully",
     "Have a Code?": "Have a Code?",
     "Header": "Header",
+    "header instead.": "header instead.",
     "Header Name": "Header Name",
     "Header navigation": "Header navigation",
     "Header Override": "Header Override",
     "Header Passthrough (X-Request-Id)": "Header Passthrough (X-Request-Id)",
     "Header Value (supports string or JSON mapping)": "Header Value (supports string or JSON mapping)",
+    "header. Anthropic-formatted endpoints accept the": "header. Anthropic-formatted endpoints accept the",
+    "Health": "Health",
     "Hidden — verify to reveal": "Hidden — verify to reveal",
     "Hide": "Hide",
     "Hide API key": "Hide API key",
@@ -1738,6 +1834,8 @@
     "Home Page Content": "Home Page Content",
     "Hostname or IP of your SMTP provider": "Hostname or IP of your SMTP provider",
     "Hour": "Hour",
+    "Hourly token usage by model across the last 24 hours": "Hourly token usage by model across the last 24 hours",
+    "Hourly token usage by model over the past 24 hours": "Hourly token usage by model over the past 24 hours",
     "hours": "hours",
     "How client credentials are sent to the token endpoint": "How client credentials are sent to the token endpoint",
     "How frequently the system tests all channels": "How frequently the system tests all channels",
@@ -1745,6 +1843,7 @@
     "How model mapping works": "How model mapping works",
     "How much to charge for each US dollar of balance (Epay)": "How much to charge for each US dollar of balance (Epay)",
     "How this model name should match requests": "How this model name should match requests",
+    "How to deliver the resulting image": "How to deliver the resulting image",
     "How to get an io.net API Key": "How to get an io.net API Key",
     "How to reset my quota?": "How to reset my quota?",
     "How to select keys: random or sequential polling": "How to select keys: random or sequential polling",
@@ -1794,6 +1893,9 @@
     "Import to CC Switch": "Import to CC Switch",
     "In Progress": "In Progress",
     "In:": "In:",
+    "incident": "incident",
+    "incidents": "incidents",
+    "Incidents": "Incidents",
     "Include Group": "Include Group",
     "Include Model": "Include Model",
     "Include Rule Name": "Include Rule Name",
@@ -1810,14 +1912,15 @@
     "Input price": "Input price",
     "Input tokens": "Input tokens",
     "Input Tokens": "Input Tokens",
+    "Inset": "Inset",
     "Inspect user prompts": "Inspect user prompts",
     "Instance": "Instance",
     "Integrations": "Integrations",
     "Inter-group overrides": "Inter-group overrides",
     "Inter-group ratio overrides": "Inter-group ratio overrides",
+    "Interface Language": "Interface Language",
     "Internal Notes": "Internal Notes",
     "Internal notes (not shown to users)": "Internal notes (not shown to users)",
-    "Interface Language": "Interface Language",
     "Internal Server Error!": "Internal Server Error!",
     "Invalid chat link. Please contact the administrator.": "Invalid chat link. Please contact the administrator.",
     "Invalid chat link. Please contact your administrator.": "Invalid chat link. Please contact your administrator.",
@@ -1848,6 +1951,7 @@
     "Inviter": "Inviter",
     "Inviter Reward": "Inviter Reward",
     "Invites": "Invites",
+    "Invoke developer-defined functions with structured arguments": "Invoke developer-defined functions with structured arguments",
     "io.net API Key": "io.net API Key",
     "io.net Deployments": "io.net Deployments",
     "IP": "IP",
@@ -1872,6 +1976,7 @@
     "JSON map of group → ratio applied when the user selects the group explicitly.": "JSON map of group → ratio applied when the user selects the group explicitly.",
     "JSON map of model → multiplier applied to quota billing.": "JSON map of model → multiplier applied to quota billing.",
     "JSON map of model → USD cost per request. Takes precedence over ratio based billing.": "JSON map of model → USD cost per request. Takes precedence over ratio based billing.",
+    "JSON mode": "JSON mode",
     "JSON Mode": "JSON Mode",
     "JSON must be an object": "JSON must be an object",
     "JSON object:": "JSON object:",
@@ -1893,10 +1998,13 @@
     "Keys, OAuth credentials, and multi-key update behavior.": "Keys, OAuth credentials, and multi-key update behavior.",
     "Kling": "Kling",
     "Knowledge Base ID *": "Knowledge Base ID *",
+    "Knowledge cutoff": "Knowledge cutoff",
+    "Lake View": "Lake View",
     "Landing page with system overview.": "Landing page with system overview.",
-    "Language Preferences": "Language Preferences",
     "Language preference saved": "Language preference saved",
+    "Language Preferences": "Language Preferences",
     "Language preferences sync across your signed-in devices and affect API error messages.": "Language preferences sync across your signed-in devices and affect API error messages.",
+    "Last 30 days uptime": "Last 30 days uptime",
     "Last check time": "Last check time",
     "Last detected addable models": "Last detected addable models",
     "Last Login": "Last Login",
@@ -1905,7 +2013,11 @@
     "Last updated:": "Last updated:",
     "Last Used": "Last Used",
     "Last used:": "Last used:",
+    "Latency trend (last 24h)": "Latency trend (last 24h)",
+    "Lavender Dream": "Lavender Dream",
     "Layout": "Layout",
+    "lead": "lead",
+    "Leaderboards": "Leaderboards",
     "Learn more": "Learn more",
     "Learn more:": "Learn more:",
     "Leave": "Leave",
@@ -1922,12 +2034,15 @@
     "Leave empty to use default": "Leave empty to use default",
     "Leave empty to use system temp directory": "Leave empty to use system temp directory",
     "Leave empty to use username": "Leave empty to use username",
+    "Left to Right": "Left to Right",
     "Legacy Format (JSON Object)": "Legacy Format (JSON Object)",
     "Legacy format must be a JSON object": "Legacy format must be a JSON object",
     "Legacy Format Template": "Legacy Format Template",
+    "Legal": "Legal",
     "Less": "Less",
     "Less Than": "Less Than",
     "Less Than or Equal": "Less Than or Equal",
+    "License": "License",
     "Light": "Light",
     "Lightning Fast": "Lightning Fast",
     "Limit period": "Limit period",
@@ -1942,6 +2057,7 @@
     "List of models supported by this channel. Use comma to separate multiple models.": "List of models supported by this channel. Use comma to separate multiple models.",
     "List of origins (one per line) allowed for Passkey registration and authentication.": "List of origins (one per line) allowed for Passkey registration and authentication.",
     "List view": "List view",
+    "LLM Leaderboard": "LLM Leaderboard",
     "LLM prompt helper": "LLM prompt helper",
     "Load Balancing": "Load Balancing",
     "Load template...": "Load template...",
@@ -1972,6 +2088,7 @@
     "Logo": "Logo",
     "Logo URL": "Logo URL",
     "Logs": "Logs",
+    "Lowest median first-token latency": "Lowest median first-token latency",
     "m": "m",
     "Maintain a list of common questions for the dashboard help panel": "Maintain a list of common questions for the dashboard help panel",
     "Maintenance": "Maintenance",
@@ -2005,6 +2122,8 @@
     "Map request model names to actual provider model names (JSON format)": "Map request model names to actual provider model names (JSON format)",
     "Map response status codes (JSON format)": "Map response status codes (JSON format)",
     "Map upstream status codes to different codes": "Map upstream status codes to different codes",
+    "Market Share": "Market Share",
+    "Marketing": "Marketing",
     "Match All (AND)": "Match All (AND)",
     "Match Any (OR)": "Match Any (OR)",
     "Match Mode": "Match Mode",
@@ -2021,6 +2140,7 @@
     "Matching Rules": "Matching Rules",
     "Max Disk Cache Size (MB)": "Max Disk Cache Size (MB)",
     "Max Entries": "Max Entries",
+    "Max output": "Max output",
     "Max Requests (incl. failures)": "Max Requests (incl. failures)",
     "Max Requests (including failures)": "Max Requests (including failures)",
     "Max requests per period": "Max requests per period",
@@ -2031,8 +2151,15 @@
     "Maximum 200 characters": "Maximum 200 characters",
     "Maximum 500 characters. Supports Markdown and HTML.": "Maximum 500 characters. Supports Markdown and HTML.",
     "Maximum check-in quota": "Maximum check-in quota",
+    "Maximum input window": "Maximum input window",
+    "Maximum number of tokens in the response": "Maximum number of tokens in the response",
     "Maximum quota amount awarded for check-in": "Maximum quota amount awarded for check-in",
+    "Maximum tokens including hidden reasoning tokens": "Maximum tokens including hidden reasoning tokens",
+    "Maximum tokens per response": "Maximum tokens per response",
     "maxRequests ≥ 0, maxSuccess ≥ 1, both ≤ 2,147,483,647": "maxRequests ≥ 0, maxSuccess ≥ 1, both ≤ 2,147,483,647",
+    "May be used for training by upstream provider": "May be used for training by upstream provider",
+    "Median time-to-first-token (TTFT) sampled hourly per group": "Median time-to-first-token (TTFT) sampled hourly per group",
+    "Medical Q&A, mental health support": "Medical Q&A, mental health support",
     "Memory Hits": "Memory Hits",
     "Memory Threshold (%)": "Memory Threshold (%)",
     "Merchant ID": "Merchant ID",
@@ -2041,6 +2168,7 @@
     "Metadata": "Metadata",
     "Midjourney": "Midjourney",
     "MidjourneyPlus": "MidjourneyPlus",
+    "min downtime": "min downtime",
     "Min Top-up": "Min Top-up",
     "Min Top-up:": "Min Top-up:",
     "MiniMax": "MiniMax",
@@ -2056,12 +2184,15 @@
     "Minimum topup amount: {{amount}}": "Minimum topup amount: {{amount}}",
     "Minimum Trust Level": "Minimum Trust Level",
     "Minimum:": "Minimum:",
+    "Minor blips in the last 30 days": "Minor blips in the last 30 days",
     "Minute": "Minute",
     "minutes": "minutes",
     "Missing code": "Missing code",
     "Missing Models": "Missing Models",
     "Missing user data from Passkey login response": "Missing user data from Passkey login response",
     "Mistral": "Mistral",
+    "Modalities": "Modalities",
+    "Modality": "Modality",
     "Mode": "Mode",
     "model": "model",
     "Model": "Model",
@@ -2074,6 +2205,7 @@
     "Model deleted successfully": "Model deleted successfully",
     "Model deployment service is disabled": "Model deployment service is disabled",
     "Model Description": "Model Description",
+    "Model details": "Model details",
     "Model disabled successfully": "Model disabled successfully",
     "Model enabled successfully": "Model enabled successfully",
     "Model fixed pricing": "Model fixed pricing",
@@ -2111,11 +2243,15 @@
     "Models & Groups": "Models & Groups",
     "Models appended successfully": "Models appended successfully",
     "Models are required": "Models are required",
+    "Models climbing the leaderboard": "Models climbing the leaderboard",
+    "Models climbing the leaderboard fastest": "Models climbing the leaderboard fastest",
     "Models directory": "Models directory",
     "Models Directory": "Models Directory",
     "Models fetched successfully": "Models fetched successfully",
     "Models filled to form": "Models filled to form",
     "Models listed here will not automatically append or remove -thinking / -nothinking suffixes.": "Models listed here will not automatically append or remove -thinking / -nothinking suffixes.",
+    "Models losing positions": "Models losing positions",
+    "Models losing the most positions": "Models losing the most positions",
     "Models not in list, may fail to invoke": "Models not in list, may fail to invoke",
     "Models that are being used but not configured in the system": "Models that are being used but not configured in the system",
     "Models updated successfully": "Models updated successfully",
@@ -2126,12 +2262,14 @@
     "Monitoring & Alerts": "Monitoring & Alerts",
     "Month": "Month",
     "Monthly": "Monthly",
+    "Monthly tokens": "Monthly tokens",
     "months": "months",
     "Moonshot": "Moonshot",
     "More": "More",
     "more mapping": "more mapping",
     "More templates...": "More templates...",
     "More...": "More...",
+    "Most-used models in the selected period and category": "Most-used models in the selected period and category",
     "Move": "Move",
     "Move a request header": "Move a request header",
     "Move affiliate rewards to your main balance": "Move affiliate rewards to your main balance",
@@ -2148,7 +2286,10 @@
     "Multi-key: Random rotation": "Multi-key: Random rotation",
     "Multi-protocol Compatible": "Multi-protocol Compatible",
     "Multi-region deployment for stable global access": "Multi-region deployment for stable global access",
+    "Multi-step thinking before final answer": "Multi-step thinking before final answer",
     "Multi-user management with flexible permission allocation": "Multi-user management with flexible permission allocation",
+    "Multilingual translation and localisation": "Multilingual translation and localisation",
+    "Multimodal": "Multimodal",
     "Multiplier": "Multiplier",
     "Multiplier applied when": "Multiplier applied when",
     "Multiplier applied when {{userGroup}} uses {{targetGroup}}": "Multiplier applied when {{userGroup}} uses {{targetGroup}}",
@@ -2184,6 +2325,7 @@
     "Network proxy for this channel (supports socks5 protocol)": "Network proxy for this channel (supports socks5 protocol)",
     "Never": "Never",
     "Never expires": "Never expires",
+    "NEW": "NEW",
     "New API": "New API",
     "New API &lt;noreply@example.com&gt;": "New API &lt;noreply@example.com&gt;",
     "New API Project Repository:": "New API Project Repository:",
@@ -2197,6 +2339,7 @@
     "New User Quota": "New User Quota",
     "New version available: {{version}}": "New version available: {{version}}",
     "NewAPI": "NewAPI",
+    "Newly released": "Newly released",
     "Next": "Next",
     "Next branch": "Next branch",
     "Next page": "Next page",
@@ -2211,10 +2354,13 @@
     "No API keys available. Create your first API key to get started.": "No API keys available. Create your first API key to get started.",
     "No API Keys Found": "No API Keys Found",
     "No API routes configured": "No API routes configured",
+    "No app usage data available for this model.": "No app usage data available for this model.",
+    "No apps match the selected filters": "No apps match the selected filters",
     "No available models": "No available models",
     "No available Web chat links": "No available Web chat links",
     "No backup": "No backup",
     "No billing records found": "No billing records found",
+    "No capabilities reported for this model.": "No capabilities reported for this model.",
     "No Change": "No Change",
     "No changes": "No changes",
     "No changes made": "No changes made",
@@ -2249,8 +2395,11 @@
     "No group-based rate limits configured. Click \"Add group\" to get started.": "No group-based rate limits configured. Click \"Add group\" to get started.",
     "No groups match your search": "No groups match your search",
     "No header overrides configured.": "No header overrides configured.",
+    "No history data available": "No history data available",
+    "No incidents in the last 30 days": "No incidents in the last 30 days",
     "No Inviter": "No Inviter",
     "No keys found": "No keys found",
+    "No latency data available": "No latency data available",
     "No log entries matched the selected time.": "No log entries matched the selected time.",
     "No logs": "No logs",
     "No Logs Found": "No Logs Found",
@@ -2270,6 +2419,7 @@
     "No models found": "No models found",
     "No Models Found": "No Models Found",
     "No models found.": "No models found.",
+    "No models match the selected filters": "No models match the selected filters",
     "No models match your current filters.": "No models match your current filters.",
     "No models match your search": "No models match your search",
     "No models selected": "No models selected",
@@ -2277,6 +2427,9 @@
     "No models to copy": "No models to copy",
     "No models to remove": "No models to remove",
     "No new models to add": "No new models to add",
+    "No new models yet": "No new models yet",
+    "No notable climbers right now": "No notable climbers right now",
+    "No notable drops right now": "No notable drops right now",
     "No parameter overrides configured.": "No parameter overrides configured.",
     "No payment methods available. Please contact administrator.": "No payment methods available. Please contact administrator.",
     "No payment methods configured": "No payment methods configured",
@@ -2315,6 +2468,7 @@
     "No Upgrade": "No Upgrade",
     "No upstream price differences found": "No upstream price differences found",
     "No upstream ratio differences found": "No upstream ratio differences found",
+    "No uptime data available": "No uptime data available",
     "No Uptime Kuma groups yet. Click \"Add Group\" to create one.": "No Uptime Kuma groups yet. Click \"Add Group\" to create one.",
     "No uptime monitoring configured": "No uptime monitoring configured",
     "No usage logs available. Logs will appear here once API calls are made.": "No usage logs available. Logs will appear here once API calls are made.",
@@ -2322,6 +2476,7 @@
     "No user selected": "No user selected",
     "No users available. Try adjusting your search or filters.": "No users available. Try adjusting your search or filters.",
     "No Users Found": "No Users Found",
+    "No vendor data available": "No vendor data available",
     "Node Name": "Node Name",
     "Non-stream": "Non-stream",
     "None": "None",
@@ -2336,15 +2491,20 @@
     "Not Started": "Not Started",
     "Not Submitted": "Not Submitted",
     "Not tested": "Not tested",
+    "Not used for upstream training by default": "Not used for upstream training by default",
     "Not used yet": "Not used yet",
     "Notice": "Notice",
     "Notification Email": "Notification Email",
     "Notification Method": "Notification Method",
     "Notifications": "Notifications",
+    "Nucleus sampling probability mass": "Nucleus sampling probability mass",
     "Number of codes to create": "Number of codes to create",
+    "Number of completions to generate": "Number of completions to generate",
+    "Number of images to generate": "Number of images to generate",
     "Number of keys to create": "Number of keys to create",
     "Number of times to retry failed requests (0-10)": "Number of times to retry failed requests (0-10)",
     "Number of tokens per unit quota": "Number of tokens per unit quota",
+    "Number of top log probabilities returned per token": "Number of top log probabilities returned per token",
     "Number of users invited": "Number of users invited",
     "OAuth Client ID": "OAuth Client ID",
     "OAuth Client Secret": "OAuth Client Secret",
@@ -2355,6 +2515,7 @@
     "Observability": "Observability",
     "Obtain the API key, merchant ID, and RSA key pair from the Waffo dashboard, and configure the callback URL.": "Obtain the API key, merchant ID, and RSA key pair from the Waffo dashboard, and configure the callback URL.",
     "Obtain the merchant, store, product and signing keys from your Waffo dashboard. Webhook URL: <ServerAddress>/api/waffo-pancake/webhook": "Obtain the merchant, store, product and signing keys from your Waffo dashboard. Webhook URL: <ServerAddress>/api/waffo-pancake/webhook",
+    "Ocean Breeze": "Ocean Breeze",
     "of": "of",
     "of 3:": "of 3:",
     "off": "off",
@@ -2397,9 +2558,11 @@
     "Open in New Tab": "Open in New Tab",
     "Open menu": "Open menu",
     "Open release": "Open release",
+    "Open source": "Open source",
     "Open Source": "Open Source",
     "Open the io.net console API Keys page": "Open the io.net console API Keys page",
     "Open theme settings": "Open theme settings",
+    "Open weights": "Open weights",
     "OpenAI": "OpenAI",
     "OpenAI Compatible": "OpenAI Compatible",
     "OpenAI Organization": "OpenAI Organization",
@@ -2437,10 +2600,14 @@
     "org-...": "org-...",
     "Original Model": "Original Model",
     "Other": "Other",
+    "Outage": "Outage",
     "Output": "Output",
+    "Output aspect ratio": "Output aspect ratio",
+    "Output image size": "Output image size",
     "Output price": "Output price",
     "Output tokens": "Output tokens",
     "Output Tokens": "Output Tokens",
+    "overall": "overall",
     "override": "override",
     "Override": "Override",
     "Override Anthropic headers, defaults, and thinking adapter behavior": "Override Anthropic headers, defaults, and thinking adapter behavior",
@@ -2460,6 +2627,7 @@
     "PaLM": "PaLM",
     "Pan": "Pan",
     "Param Override": "Param Override",
+    "Parameter": "Parameter",
     "Parameter configuration error": "Parameter configuration error",
     "Parameter Override": "Parameter Override",
     "Parameter override must be a valid JSON object": "Parameter override must be a valid JSON object",
@@ -2533,6 +2701,9 @@
     "Payment page opened": "Payment page opened",
     "Payment request failed": "Payment request failed",
     "Payment return URL": "Payment return URL",
+    "Peak": "Peak",
+    "Peak throughput": "Peak throughput",
+    "Penalises repetition of frequent tokens": "Penalises repetition of frequent tokens",
     "Pending": "Pending",
     "per": "per",
     "Per 1K tokens": "Per 1K tokens",
@@ -2542,13 +2713,18 @@
     "Per Request": "Per Request",
     "Per-call": "Per-call",
     "Per-feature metered windows split by model or capability.": "Per-feature metered windows split by model or capability.",
+    "Per-group performance": "Per-group performance",
     "Per-request (fixed price)": "Per-request (fixed price)",
     "Per-token": "Per-token",
     "Per-token (ratio based)": "Per-token (ratio based)",
+    "Per-token logit bias map": "Per-token logit bias map",
     "Percentage:": "Percentage:",
     "Performance": "Performance",
+    "Performance data is not yet available for this model.": "Performance data is not yet available for this model.",
+    "Performance metrics shown here are simulated for preview purposes and will be replaced with live observability data once the backend integration is complete.": "Performance metrics shown here are simulated for preview purposes and will be replaced with live observability data once the backend integration is complete.",
     "Performance Monitor": "Performance Monitor",
     "Performance Settings": "Performance Settings",
+    "Period": "Period",
     "Periodically check for upstream model changes": "Periodically check for upstream model changes",
     "Periodically send ping frames to keep streaming connections active.": "Periodically send ping frames to keep streaming connections active.",
     "Permanently delete your account and all data": "Permanently delete your account and all data",
@@ -2652,6 +2828,14 @@
     "Preset recharge amounts displayed to users": "Preset recharge amounts displayed to users",
     "Preset Template": "Preset Template",
     "Preset templates": "Preset templates",
+    "preset.default": "Default",
+    "preset.forest-whisper": "Forest Whisper",
+    "preset.lake-view": "Lake View",
+    "preset.lavender-dream": "Lavender Dream",
+    "preset.ocean-breeze": "Ocean Breeze",
+    "preset.rose-garden": "Rose Garden",
+    "preset.sunset-glow": "Sunset Glow",
+    "preset.underground": "Underground",
     "Press Enter or comma to add tags": "Press Enter or comma to add tags",
     "Press Enter to use \"{{value}}\"": "Press Enter to use \"{{value}}\"",
     "Prevent server-side request forgery attacks": "Prevent server-side request forgery attacks",
@@ -2660,7 +2844,6 @@
     "Previous": "Previous",
     "Previous branch": "Previous branch",
     "Previous page": "Previous page",
-    "Base Price": "Base Price",
     "Price": "Price",
     "Price ($/1K calls)": "Price ($/1K calls)",
     "Price (local currency / USD)": "Price (local currency / USD)",
@@ -2698,10 +2881,12 @@
     "Product ID": "Product ID",
     "Product ID is required": "Product ID is required",
     "Product Name": "Product Name",
+    "Productivity": "Productivity",
     "Products": "Products",
     "Professional team providing 24/7 technical support": "Professional team providing 24/7 technical support",
     "Profile": "Profile",
     "Profile updated successfully": "Profile updated successfully",
+    "Programming": "Programming",
     "Progress": "Progress",
     "Project": "Project",
     "Promote": "Promote",
@@ -2709,9 +2894,11 @@
     "Prompt": "Prompt",
     "Prompt (EN)": "Prompt (EN)",
     "Prompt cache ratio": "Prompt cache ratio",
+    "Prompt caching": "Prompt caching",
     "Prompt Caching": "Prompt Caching",
     "Prompt Details": "Prompt Details",
     "Prompt price ($/1M tokens)": "Prompt price ($/1M tokens)",
+    "Proprietary": "Proprietary",
     "Protect login and registration with Cloudflare Turnstile": "Protect login and registration with Cloudflare Turnstile",
     "Provide a JSON object where each key maps to an endpoint definition.": "Provide a JSON object where each key maps to an endpoint definition.",
     "Provide a valid URL starting with http:// or https://": "Provide a valid URL starting with http:// or https://",
@@ -2720,6 +2907,7 @@
     "Provide per-category safety overrides as JSON. Use `default` for fallback values.": "Provide per-category safety overrides as JSON. Use `default` for fallback values.",
     "Provide per-model header overrides as JSON. Useful for enabling beta features such as expanded context windows.": "Provide per-model header overrides as JSON. Useful for enabling beta features such as expanded context windows.",
     "Provider": "Provider",
+    "Provider & data privacy": "Provider & data privacy",
     "Provider created successfully": "Provider created successfully",
     "Provider deleted successfully": "Provider deleted successfully",
     "Provider Name": "Provider Name",
@@ -2768,11 +2956,15 @@
     "Quota Types": "Quota Types",
     "Quota Warning Threshold": "Quota Warning Threshold",
     "Quota:": "Quota:",
+    "Radius": "Radius",
     "Random": "Random",
     "Randomly select a key from the pool for each request": "Randomly select a key from the pool for each request",
+    "Ranking data is currently simulated for preview purposes and will be replaced with live analytics once the backend integration ships.": "Ranking data is currently simulated for preview purposes and will be replaced with live analytics once the backend integration ships.",
+    "Rankings": "Rankings",
     "Rate Limit Windows": "Rate Limit Windows",
     "Rate Limited": "Rate Limited",
     "Rate Limiting": "Rate Limiting",
+    "Rate limits": "Rate limits",
     "Ratio": "Ratio",
     "Ratio applied to audio completions for streaming models.": "Ratio applied to audio completions for streaming models.",
     "Ratio applied to audio inputs where supported by the upstream model.": "Ratio applied to audio inputs where supported by the upstream model.",
@@ -2795,6 +2987,8 @@
     "Reasoning Effort": "Reasoning Effort",
     "Receive Upstream Model Update Notifications": "Receive Upstream Model Update Notifications",
     "Received": "Received",
+    "Recently launched models": "Recently launched models",
+    "Recently launched models gaining traction": "Recently launched models gaining traction",
     "Recharge": "Recharge",
     "Recharge Amount": "Recharge Amount",
     "Recharge Amount (USD)": "Recharge Amount (USD)",
@@ -2848,6 +3042,7 @@
     "Registry username": "Registry username",
     "Reject Reason": "Reject Reason",
     "Release details": "Release details",
+    "Released": "Released",
     "Relying Party Display Name": "Relying Party Display Name",
     "Relying Party ID": "Relying Party ID",
     "Remaining": "Remaining",
@@ -2913,6 +3108,8 @@
     "Request rule pricing": "Request rule pricing",
     "Request timed out, please refresh and restart GitHub login": "Request timed out, please refresh and restart GitHub login",
     "Request-based": "Request-based",
+    "Requests (24h)": "Requests (24h)",
+    "Requests / 24h": "Requests / 24h",
     "Requests per minute": "Requests per minute",
     "requests served": "requests served",
     "Requests will be forwarded to this worker. Trailing slashes are removed automatically.": "Requests will be forwarded to this worker. Trailing slashes are removed automatically.",
@@ -2920,12 +3117,14 @@
     "Require email verification for new accounts": "Require email verification for new accounts",
     "Require job success before follow-up actions": "Require job success before follow-up actions",
     "Require login to view models": "Require login to view models",
+    "required": "required",
     "Required": "Required",
     "Required events:": "Required events:",
     "Required provider, authentication, model, and group settings": "Required provider, authentication, model, and group settings",
     "Required to expose Midjourney-style image generation to end users.": "Required to expose Midjourney-style image generation to end users.",
     "Rerank": "Rerank",
     "Reroll": "Reroll",
+    "Research, analysis, scientific reasoning": "Research, analysis, scientific reasoning",
     "Resend ({{seconds}}s)": "Resend ({{seconds}}s)",
     "Reset": "Reset",
     "Reset 2FA": "Reset 2FA",
@@ -2961,8 +3160,11 @@
     "Retry Times": "Retry Times",
     "Return a custom error immediately": "Return a custom error immediately",
     "Return Custom Error": "Return Custom Error",
+    "Return data conforming to a JSON schema": "Return data conforming to a JSON schema",
     "Return Error": "Return Error",
+    "Return per-token log probabilities": "Return per-token log probabilities",
     "Return to dashboard": "Return to dashboard",
+    "Return vector embeddings for inputs": "Return vector embeddings for inputs",
     "Reveal API key": "Reveal API key",
     "Reveal key": "Reveal key",
     "Revenue": "Revenue",
@@ -2972,8 +3174,11 @@
     "Review your purchase details before proceeding.": "Review your purchase details before proceeding.",
     "Rewards will be added directly to your balance": "Rewards will be added directly to your balance",
     "Rewrite callback URLs to the local server": "Rewrite callback URLs to the local server",
+    "Right to Left": "Right to Left",
     "Role": "Role",
+    "Roleplay": "Roleplay",
     "Root": "Root",
+    "Rose Garden": "Rose Garden",
     "Route": "Route",
     "Route Description": "Route Description",
     "Route is required": "Route is required",
@@ -2981,6 +3186,7 @@
     "Routing Strategy": "Routing Strategy",
     "Rows per page": "Rows per page",
     "RPM": "RPM",
+    "RPM = requests per minute, TPM = tokens per minute, RPD = requests per day. Limits apply per token group.": "RPM = requests per minute, TPM = tokens per minute, RPD = requests per day. Limits apply per token group.",
     "RSA Private Key (Production)": "RSA Private Key (Production)",
     "RSA Private Key (Sandbox)": "RSA Private Key (Sandbox)",
     "Rule": "Rule",
@@ -3004,6 +3210,7 @@
     "s": "s",
     "Safety Settings": "Safety Settings",
     "Same as Local": "Same as Local",
+    "Sampling temperature; lower is more deterministic": "Sampling temperature; lower is more deterministic",
     "Sandbox mode": "Sandbox mode",
     "Save": "Save",
     "Save all settings": "Save all settings",
@@ -3048,6 +3255,7 @@
     "Scenario Templates": "Scenario Templates",
     "Scheduled channel tests": "Scheduled channel tests",
     "scheduling controls": "scheduling controls",
+    "Science": "Science",
     "Scope": "Scope",
     "Scopes": "Scopes",
     "Search": "Search",
@@ -3072,6 +3280,7 @@
     "Search products...": "Search products...",
     "Search rules...": "Search rules...",
     "Search tags...": "Search tags...",
+    "Search the public web at inference time": "Search the public web at inference time",
     "Search vendors...": "Search vendors...",
     "Search...": "Search...",
     "seconds": "seconds",
@@ -3099,7 +3308,11 @@
     "Select an operation mode and enter the amount": "Select an operation mode and enter the amount",
     "Select announcement type": "Select announcement type",
     "Select at least one field to overwrite.": "Select at least one field to overwrite.",
+    "Select border radius": "Select border radius",
     "Select channel type": "Select channel type",
+    "Select color preset": "Select color preset",
+    "Select content width": "Select content width",
+    "Select corner radius": "Select corner radius",
     "Select currency": "Select currency",
     "Select date": "Select date",
     "Select default chart": "Select default chart",
@@ -3109,10 +3322,11 @@
     "Select from presets or type custom identifier.": "Select from presets or type custom identifier.",
     "Select granularity": "Select granularity",
     "Select groups (leave empty to keep current)": "Select groups (leave empty to keep current)",
+    "Select interface density": "Select interface density",
     "Select items...": "Select items...",
     "Select key format": "Select key format",
-    "Select Language": "Select Language",
     "Select language": "Select language",
+    "Select Language": "Select Language",
     "Select layout style": "Select layout style",
     "Select locations": "Select locations",
     "Select Model": "Select Model",
@@ -3140,6 +3354,7 @@
     "Select the API endpoint region": "Select the API endpoint region",
     "Select the fields you want to overwrite with upstream data. Unselected fields keep their local values.": "Select the fields you want to overwrite with upstream data. Unselected fields keep their local values.",
     "Select theme preference": "Select theme preference",
+    "Select theme preset": "Select theme preset",
     "Select time granularity": "Select time granularity",
     "Select vendor": "Select vendor",
     "Selectable groups": "Selectable groups",
@@ -3176,9 +3391,9 @@
     "Set quota amount and limits": "Set quota amount and limits",
     "Set Request Header": "Set Request Header",
     "Set runtime request header: override entire value, or manipulate comma-separated tokens": "Set runtime request header: override entire value, or manipulate comma-separated tokens",
-    "Set the language used across the interface": "Set the language used across the interface",
     "Set Tag": "Set Tag",
     "Set tag for selected channels": "Set tag for selected channels",
+    "Set the language used across the interface": "Set the language used across the interface",
     "Set the user's role (cannot be Root)": "Set the user's role (cannot be Root)",
     "Setting saved": "Setting saved",
     "Setting up 2FA...": "Setting up 2FA...",
@@ -3188,6 +3403,7 @@
     "Settings updated successfully": "Settings updated successfully",
     "Setup Instructions": "Setup Instructions",
     "Setup Two-Factor Authentication": "Setup Two-Factor Authentication",
+    "Share": "Share",
     "Share your link and earn rewards": "Share your link and earn rewards",
     "Shared configuration for all payment gateways": "Shared configuration for all payment gateways",
     "Shorten": "Shorten",
@@ -3214,6 +3430,7 @@
     "Signed in via WeChat": "Signed in via WeChat",
     "Signed in with Passkey": "Signed in with Passkey",
     "Signed out": "Signed out",
+    "Significant outages detected": "Significant outages detected",
     "Signing you in with {{provider}}": "Signing you in with {{provider}}",
     "SiliconFlow": "SiliconFlow",
     "Simple": "Simple",
@@ -3271,6 +3488,7 @@
     "Status:": "Status:",
     "Stay": "Stay",
     "Stay tuned though!": "Stay tuned though!",
+    "Steer behaviour with a system instruction": "Steer behaviour with a system instruction",
     "Step": "Step",
     "Stop": "Stop",
     "Stop Retry": "Stop Retry",
@@ -3281,6 +3499,9 @@
     "Stream": "Stream",
     "Stream Mode": "Stream Mode",
     "Stream Status": "Stream Status",
+    "Stream tokens incrementally as they are generated": "Stream tokens incrementally as they are generated",
+    "Stream tokens via Server-Sent Events": "Stream tokens via Server-Sent Events",
+    "Streaming": "Streaming",
     "String Replace": "String Replace",
     "Stripe": "Stripe",
     "Stripe API key (leave blank unless updating)": "Stripe API key (leave blank unless updating)",
@@ -3288,6 +3509,7 @@
     "Stripe Gateway": "Stripe Gateway",
     "Stripe product price ID": "Stripe product price ID",
     "Stripe/Creem requires creating products on the third-party platform and entering the ID": "Stripe/Creem requires creating products on the third-party platform and entering the ID",
+    "Structured output": "Structured output",
     "Submit": "Submit",
     "Submit directly": "Submit directly",
     "Submit Result": "Submit Result",
@@ -3315,13 +3537,17 @@
     "Suffix": "Suffix",
     "Suffix Match": "Suffix Match",
     "SunoAPI": "SunoAPI",
+    "Sunset Glow": "Sunset Glow",
     "Super Admin": "Super Admin",
     "Support for high concurrency with automatic load balancing": "Support for high concurrency with automatic load balancing",
     "Supported Imagine Models": "Supported Imagine Models",
+    "Supported modalities": "Supported modalities",
+    "Supported parameters": "Supported parameters",
     "Supported variables": "Supported variables",
     "Supports `-thinking`, `-thinking-": "Supports `-thinking`, `-thinking-",
     "Supports HTML markup or iframe embedding. Enter HTML code directly, or provide a complete URL to automatically embed it as an iframe.": "Supports HTML markup or iframe embedding. Enter HTML code directly, or provide a complete URL to automatically embed it as an iframe.",
     "Supports PNG, JPG, SVG, or WebP. Recommended size: 128×128 or smaller.": "Supports PNG, JPG, SVG, or WebP. Recommended size: 128×128 or smaller.",
+    "Sustained tokens per second": "Sustained tokens per second",
     "Swap Face": "Swap Face",
     "Switch affinity on success": "Switch affinity on success",
     "Switch between the new frontend and the classic frontend. Changes take effect after page reload.": "Switch between the new frontend and the classic frontend. Changes take effect after page reload.",
@@ -3341,6 +3567,7 @@
     "System Announcements": "System Announcements",
     "System Behavior": "System Behavior",
     "System data statistics": "System data statistics",
+    "System default": "System default",
     "System Information": "System Information",
     "System initialized successfully! Redirecting…": "System initialized successfully! Redirecting…",
     "System logo": "System logo",
@@ -3351,6 +3578,7 @@
     "System name is required": "System name is required",
     "System Notice": "System Notice",
     "System Performance Monitoring": "System Performance Monitoring",
+    "System prompt": "System prompt",
     "System Prompt": "System Prompt",
     "System Prompt Concatenation": "System Prompt Concatenation",
     "System Prompt Override": "System Prompt Override",
@@ -3402,7 +3630,11 @@
     "Test Model": "Test Model",
     "Testing all enabled channels started. Please refresh to see results.": "Testing all enabled channels started. Please refresh to see results.",
     "Testing...": "Testing...",
+    "Text": "Text",
+    "Text description of the desired image": "Text description of the desired image",
+    "Text description of the desired video": "Text description of the desired video",
     "Text Input": "Text Input",
+    "Text or array of texts to embed": "Text or array of texts to embed",
     "Text Output": "Text Output",
     "Text to Video": "Text to Video",
     "The administrator account is already initialized. You can keep your existing credentials and continue to the next step.": "The administrator account is already initialized. You can keep your existing credentials and continue to the next step.",
@@ -3429,6 +3661,7 @@
     "The unique name for this vendor": "The unique name for this vendor",
     "The URL for this chat client.": "The URL for this chat client.",
     "Theme": "Theme",
+    "Theme preset": "Theme preset",
     "Theme Settings": "Theme Settings",
     "There are both add and remove models pending, but you only selected one type. Confirm submitting only the selected items?": "There are both add and remove models pending, but you only selected one type. Confirm submitting only the selected items?",
     "These models are still in your selection but were not returned by the upstream listing. Entries that are only model_mapping source aliases are omitted. Toggle to adjust before saving.": "These models are still in your selection but were not returned by the upstream listing. Entries that are only model_mapping source aliases are omitted. Toggle to adjust before saving.",
@@ -3472,7 +3705,11 @@
     "This will permanently delete user": "This will permanently delete user",
     "This will permanently remove all log entries created before {{date}}.": "This will permanently remove all log entries created before {{date}}.",
     "This will permanently remove log entries before the selected timestamp.": "This will permanently remove log entries before the selected timestamp.",
+    "This year": "This year",
     "Three steps to get started": "Three steps to get started",
+    "Throughput": "Throughput",
+    "Throughput by group": "Throughput by group",
+    "Throughput trend": "Throughput trend",
     "Tier": "Tier",
     "Tier name": "Tier name",
     "Tiered": "Tiered",
@@ -3514,21 +3751,41 @@
     "Token Name": "Token Name",
     "Token obtained from your Gotify application": "Token obtained from your Gotify application",
     "Token regenerated and copied to clipboard": "Token regenerated and copied to clipboard",
+    "Token share by model author across the last 24 hours": "Token share by model author across the last 24 hours",
+    "Token share by model author across the past few weeks": "Token share by model author across the past few weeks",
+    "Token share by model author across the past month": "Token share by model author across the past month",
+    "Token share by model author across the past year": "Token share by model author across the past year",
+    "Token share by model author since launch": "Token share by model author since launch",
     "Token unit": "Token unit",
+    "Token usage by model since launch": "Token usage by model since launch",
     "Token-based": "Token-based",
+    "Tokenizer": "Tokenizer",
     "tokens": "tokens",
     "Tokens": "Tokens",
+    "tokens / mo": "tokens / mo",
+    "Tokens by category": "Tokens by category",
     "Tokens Only": "Tokens Only",
     "Tokens per minute": "Tokens per minute",
+    "Tokens since launch": "Tokens since launch",
     "Tokens-only mode will show raw quota values regardless of this toggle.": "Tokens-only mode will show raw quota values regardless of this toggle.",
     "Too many files. Some were not added.": "Too many files. Some were not added.",
+    "Tool / function declarations the model may call": "Tool / function declarations the model may call",
     "Tool identifier": "Tool identifier",
     "Tool price settings": "Tool price settings",
     "Tool prices": "Tool prices",
+    "Tool-choice policy or specific tool name": "Tool-choice policy or specific tool name",
+    "Tools": "Tools",
     "Top {{count}}": "Top {{count}}",
+    "Top app": "Top app",
+    "Top apps": "Top apps",
+    "Top Apps": "Top Apps",
+    "Top integrations using this model": "Top integrations using this model",
+    "Top model": "Top model",
+    "Top models": "Top models",
     "Top Models": "Top Models",
     "Top up balance and view billing history.": "Top up balance and view billing history.",
     "Top Users": "Top Users",
+    "Top vendors": "Top vendors",
     "Top-up": "Top-up",
     "Top-up amount options": "Top-up amount options",
     "Top-up Audit Info": "Top-up Audit Info",
@@ -3552,13 +3809,16 @@
     "Total Quota": "Total Quota",
     "Total requests allowed per period. 0 = unlimited.": "Total requests allowed per period. 0 = unlimited.",
     "Total requests made": "Total requests made",
+    "Total tokens": "Total tokens",
     "Total Tokens": "Total Tokens",
     "Total Usage": "Total Usage",
     "Total:": "Total:",
     "TPM": "TPM",
     "Track per-request consumption to power usage analytics. Keeping this on increases database writes.": "Track per-request consumption to power usage analytics. Keeping this on increases database writes.",
     "Track usage, costs and performance with real-time analytics": "Track usage, costs and performance with real-time analytics",
+    "Tracked apps": "Tracked apps",
     "Tracks current account base limits and additional metered usage on Codex upstream.": "Tracks current account base limits and additional metered usage on Codex upstream.",
+    "Trading insights, accounting, advisory": "Trading insights, accounting, advisory",
     "Transfer": "Transfer",
     "Transfer Amount": "Transfer Amount",
     "Transfer failed": "Transfer failed",
@@ -3566,18 +3826,28 @@
     "Transfer successful": "Transfer successful",
     "Transfer to Balance": "Transfer to Balance",
     "Translate `-thinking` suffixes into Anthropic native thinking models while keeping pricing predictable.": "Translate `-thinking` suffixes into Anthropic native thinking models while keeping pricing predictable.",
+    "Translation": "Translation",
     "Transparent Billing": "Transparent Billing",
+    "Trend": "Trend",
+    "Trending down": "Trending down",
+    "Trending up": "Trending up",
     "Trim leading/trailing whitespace": "Trim leading/trailing whitespace",
     "Trim Prefix": "Trim Prefix",
     "Trim Space": "Trim Space",
     "Trim Suffix": "Trim Suffix",
+    "Truncate embeddings to this many dimensions": "Truncate embeddings to this many dimensions",
     "Trusted": "Trusted",
     "Try adjusting your search to locate a missing model.": "Try adjusting your search to locate a missing model.",
+    "TTFT P50": "TTFT P50",
+    "TTFT P95": "TTFT P95",
+    "TTFT P99": "TTFT P99",
+    "TTFT percentiles, throughput, and 30-day uptime by group": "TTFT percentiles, throughput, and 30-day uptime by group",
     "TTL": "TTL",
     "TTL (seconds, 0 = default)": "TTL (seconds, 0 = default)",
     "TTL (seconds)": "TTL (seconds)",
     "Tune selection priority, testing, status handling, and request overrides.": "Tune selection priority, testing, status handling, and request overrides.",
     "Turnstile is enabled but site key is empty.": "Turnstile is enabled but site key is empty.",
+    "Tutoring, learning aids, assessment": "Tutoring, learning aids, assessment",
     "Two-factor Authentication": "Two-factor Authentication",
     "Two-Factor Authentication": "Two-Factor Authentication",
     "Two-factor authentication disabled": "Two-factor authentication disabled",
@@ -3602,6 +3872,8 @@
     "Unbind": "Unbind",
     "Unbind failed": "Unbind failed",
     "Unbound {{provider}}": "Unbound {{provider}}",
+    "Underground": "Underground",
+    "Understand image inputs alongside text": "Understand image inputs alongside text",
     "Unexpected release payload": "Unexpected release payload",
     "Unified API Gateway for": "Unified API Gateway for",
     "Unique identifier for this group.": "Unique identifier for this group.",
@@ -3618,6 +3890,7 @@
     "Untitled": "Untitled",
     "Untrusted upstream data:": "Untrusted upstream data:",
     "Unused": "Unused",
+    "Up to 4 strings that stop generation": "Up to 4 strings that stop generation",
     "Update": "Update",
     "Update All Balances": "Update All Balances",
     "Update API Key": "Update API Key",
@@ -3642,6 +3915,7 @@
     "Update your password for account:": "Update your password for account:",
     "Update your password to keep your account secure": "Update your password to keep your account secure",
     "Updated": "Updated",
+    "Updated daily": "Updated daily",
     "Updated successfully": "Updated successfully",
     "Updating all channel balances. This may take a while. Please refresh to see results.": "Updating all channel balances. This may take a while. Please refresh to see results.",
     "Upgrade Group": "Upgrade Group",
@@ -3666,6 +3940,8 @@
     "Upstream Updates": "Upstream Updates",
     "uptime": "uptime",
     "Uptime": "Uptime",
+    "Uptime (30d)": "Uptime (30d)",
+    "Uptime (last 30 days)": "Uptime (last 30 days)",
     "Uptime Kuma": "Uptime Kuma",
     "Uptime Kuma groups saved successfully": "Uptime Kuma groups saved successfully",
     "Uptime Kuma URL": "Uptime Kuma URL",
@@ -3684,6 +3960,7 @@
     "Use authenticator code": "Use authenticator code",
     "Use backup code": "Use backup code",
     "Use disk cache when request body exceeds this size": "Use disk cache when request body exceeds this size",
+    "Use external tools to extend capabilities": "Use external tools to extend capabilities",
     "Use our unified OpenAI-compatible endpoint in your applications": "Use our unified OpenAI-compatible endpoint in your applications",
     "Use Passkey to sign in without entering your password.": "Use Passkey to sign in without entering your password.",
     "Use secure connection when sending emails": "Use secure connection when sending emails",
@@ -3749,6 +4026,7 @@
     "Vendor deleted successfully": "Vendor deleted successfully",
     "Vendor Name *": "Vendor Name *",
     "Vendor:": "Vendor:",
+    "Vendors ranked by aggregated token volume": "Vendors ranked by aggregated token volume",
     "Verification code": "Verification code",
     "Verification Code": "Verification Code",
     "Verification code must be 6 digits": "Verification code must be 6 digits",
@@ -3767,6 +4045,7 @@
     "Vertex AI does not support functionResponse.id. Enable this to remove the field automatically.": "Vertex AI does not support functionResponse.id. Enable this to remove the field automatically.",
     "Vertex AI Key Format": "Vertex AI Key Format",
     "Video": "Video",
+    "Video length in seconds": "Video length in seconds",
     "Video Remix": "Video Remix",
     "Vidu": "Vidu",
     "View": "View",
@@ -3796,6 +4075,8 @@
     "Violation Marker": "Violation Marker",
     "vip": "vip",
     "VIP users with premium access": "VIP users with premium access",
+    "Vision": "Vision",
+    "Vision, image / video, document chat": "Vision, image / video, document chat",
     "Visit Settings → General and adjust quota options...": "Visit Settings → General and adjust quota options...",
     "Visitors must authenticate before accessing the pricing directory.": "Visitors must authenticate before accessing the pricing directory.",
     "Visual": "Visual",
@@ -3806,6 +4087,7 @@
     "Visual Mode": "Visual Mode",
     "Visual Parameter Override": "Visual Parameter Override",
     "VolcEngine": "VolcEngine",
+    "vs. previous": "vs. previous",
     "Waffo Pancake Payment Gateway": "Waffo Pancake payment gateway",
     "Waffo Payment": "Waffo Payment",
     "Waffo Payment Gateway": "Waffo Payment Gateway",
@@ -3826,6 +4108,7 @@
     "We could not load the setup status.": "We could not load the setup status.",
     "We will prompt your device to confirm using biometrics or your hardware key.": "We will prompt your device to confirm using biometrics or your hardware key.",
     "We'll be back online shortly.": "We'll be back online shortly.",
+    "Web search": "Web search",
     "Web Search": "Web Search",
     "Webhook Configuration:": "Webhook Configuration:",
     "Webhook public key (production)": "Webhook public key (production)",
@@ -3845,6 +4128,9 @@
     "Week": "Week",
     "Weekday": "Weekday",
     "Weekly": "Weekly",
+    "Weekly token usage by model across the past few weeks": "Weekly token usage by model across the past few weeks",
+    "Weekly token usage by model across the past year": "Weekly token usage by model across the past year",
+    "Weekly token usage by model since launch": "Weekly token usage by model since launch",
     "Weekly Window": "Weekly Window",
     "Weight": "Weight",
     "Welcome back!": "Welcome back!",
@@ -3869,7 +4155,9 @@
     "Whitelist (Only allow listed IPs)": "Whitelist (Only allow listed IPs)",
     "whsec_xxx": "whsec_xxx",
     "Window:": "Window:",
+    "Wire encoding for the embedding vectors": "Wire encoding for the embedding vectors",
     "with conflicts": "with conflicts",
+    "with the API key from your token settings.": "with the API key from your token settings.",
     "Without additional conditions, only the type above is used for pruning.": "Without additional conditions, only the type above is used for pruning.",
     "Worker Access Key": "Worker Access Key",
     "Worker Proxy": "Worker Proxy",
@@ -3880,6 +4168,7 @@
     "xAI": "xAI",
     "Xinference": "Xinference",
     "Xunfei": "Xunfei",
+    "Year": "Year",
     "years": "years",
     "You are about to delete {{count}} API key(s).": "You are about to delete {{count}} API key(s).",
     "You are running the latest version ({{version}}).": "You are running the latest version ({{version}}).",
@@ -3907,6 +4196,7 @@
     "Your Telegram Bot Token": "Your Telegram Bot Token",
     "Your Turnstile secret key": "Your Turnstile secret key",
     "Your Turnstile site key": "Your Turnstile site key",
+    "Zero retention": "Zero retention",
     "Zhipu": "Zhipu",
     "Zhipu V4": "Zhipu V4",
     "Zoom": "Zoom"
diff --git a/web/default/src/i18n/locales/fr.json b/web/default/src/i18n/locales/fr.json
index f6b6657db93..365e9edc152 100644
--- a/web/default/src/i18n/locales/fr.json
+++ b/web/default/src/i18n/locales/fr.json
@@ -28,16 +28,22 @@
     "{{count}} days remaining": "{{count}} days remaining",
     "{{count}} disabled channel(s) deleted": "{{count}} canal(canaux) désactivé(s) supprimé(s)",
     "{{count}} hours ago": "il y a {{count}} heures",
+    "{{count}} incidents": "{{count}} incidents",
+    "{{count}} incidents in the last 30 days": "{{count}} incidents au cours des 30 derniers jours",
     "{{count}} IP(s)": "{{count}} IP",
     "{{count}} log entries removed.": "{{count}} entrées de journal supprimées.",
     "{{count}} minutes ago": "il y a {{count}} minutes",
     "{{count}} model(s)": "{{count}} modèle(s)",
+    "{{count}} models": "{{count}} modèles",
     "{{count}} months ago": "il y a {{count}} mois",
     "{{count}} override": "{{count}} remplacement",
     "{{count}} tiers": "{{count}} paliers",
+    "{{count}} vendors": "{{count}} fournisseurs",
     "{{count}} weeks ago": "il y a {{count}} semaines",
     "{{field}} updated to {{value}}": "{{field}} mis à jour en {{value}}",
     "{{field}} updated to {{value}} for tag: {{tag}}": "{{field}} mis à jour en {{value}} pour le tag : {{tag}}",
+    "{{modality}} not supported": "{{modality}} non pris en charge",
+    "{{modality}} supported": "{{modality}} pris en charge",
     "{{n}} model(s) selected": "{{n}} modèle(s) sélectionné(s)",
     "{{value}}ms": "{{value}} ms",
     "{{value}}s": "{{value}} s",
@@ -45,9 +51,13 @@
     "@lobehub/icons key name": "@lobehub/icons nom de la clé",
     "/status/": "/status/",
     "/your/endpoint": "/votre/endpoint",
+    "#1 App": "#1 App",
+    "#1 by usage": "N° 1 d'utilisation",
+    "#1 Model": "#1 Modèle",
     "% off": "% de réduction",
     "`, and `-nothinking` suffixes while routing to the correct Gemini variant.": "`, et les suffixes `-nothinking` lors du routage vers la variante Gemini correcte.",
     "© 2025 Your Company. All rights reserved.": "© 2025 Votre entreprise. Tous droits réservés.",
+    "+{{count}} more": "+{{count}} de plus",
     "| Based on": "| Basé sur",
     "0 means unlimited": "0 signifie illimité",
     "1 Day": "1 jour",
@@ -75,6 +85,7 @@
     "3. Enter your Gotify server URL and token above": "3. Saisissez l'URL de votre serveur Gotify et le jeton ci-dessus",
     "30 Days": "30 jours",
     "30 days ago": "Il y a 30 jours",
+    "30d change": "Variation 30 j",
     "5-Hour Window": "Fenêtre de 5 heures",
     "50 / page": "50 / page",
     "7 Days": "7 jours",
@@ -97,12 +108,15 @@
     "Account ID *": "ID de compte *",
     "Account Info": "Informations du compte",
     "Account used when authenticating with the SMTP server": "Compte utilisé lors de l'authentification auprès du serveur SMTP",
+    "Across all groups": "Tous groupes confondus",
     "Action confirmation": "Confirmation de l'action",
     "Actions": "Actions",
     "active": "actif",
     "Active": "Actif",
+    "Active apps": "Applications actives",
     "Active Cache Count": "Nombre de caches actifs",
     "Active Files": "Fichiers actifs",
+    "Active models": "Modèles actifs",
     "active users": "utilisateurs actifs",
     "Actual Amount": "Montant réel",
     "Actual Model": "Modèle réel",
@@ -190,12 +204,18 @@
     "Advanced platform configuration.": "Configuration avancée de la plateforme.",
     "Advanced Settings": "Paramètres avancés",
     "Advanced text editing": "Édition de texte avancée",
+    "Aesthetic style": "Style esthétique",
     "After clicking the button, you'll be asked to authorize the bot": "Après avoir cliqué sur le bouton, il vous sera demandé d'autoriser le bot",
     "After disabling, it will no longer be shown to users, but historical orders are not affected. Continue?": "Après désactivation, il ne sera plus affiché aux utilisateurs, mais les commandes historiques ne sont pas affectées. Continuer ?",
     "After enabling, the plan will be shown to users. Continue?": "Après activation, le plan sera affiché aux utilisateurs. Continuer ?",
     "After invalidating, this subscription will be immediately deactivated. Historical records are not affected. Continue?": "Après l'invalidation, cet abonnement sera immédiatement désactivé. Les enregistrements historiques ne sont pas affectés. Continuer ?",
     "After scanning, the binding will complete automatically": "Après la numérisation, la liaison se terminera automatiquement",
     "Agent ID *": "ID d'agent *",
+    "Aggregate tokens delivered across the platform": "Jetons cumulés livrés sur la plateforme",
+    "Aggregate traffic across every category": "Trafic cumulé sur toutes les catégories",
+    "Aggregated across enabled groups": "Agrégé sur les groupes activés",
+    "Aggregated across the apps below": "Agrégé sur les applications ci-dessous",
+    "Aggregated traffic by upstream model provider": "Trafic agrégé par fournisseur de modèle amont",
     "Aggregated usage metrics and trend charts.": "Métriques d'utilisation agrégées et graphiques de tendances.",
     "aggregates 50+ AI providers behind one unified API. Manage access, track costs, and scale effortlessly.": "agrège plus de 50 fournisseurs IA derrière une API unifiée. Gérez l'accès, suivez les coûts et évoluez sans effort.",
     "AGPL v3.0 License": "Licence AGPL v3.0",
@@ -209,19 +229,23 @@
     "AK/SK mode: use AccessKey|SecretAccessKey|Region": "Mode AK/SK : utiliser AccessKey|SecretAccessKey|Region",
     "Ali": "Ali",
     "All": "Tout",
+    "All categories": "Toutes catégories",
     "All edits are overwrite operations. Leave fields empty to keep current values unchanged.": "Toutes les modifications sont des opérations d'écrasement. Laissez les champs vides pour conserver les valeurs actuelles inchangées.",
     "All files exceed the maximum size.": "Tous les fichiers dépassent la taille maximale.",
     "All Groups": "Tous les groupes",
     "All Models": "Tous les modèles",
     "All models in use are properly configured.": "Tous les modèles utilisés sont correctement configurés.",
     "All Must Match (AND)": "Toutes doivent correspondre (AND)",
+    "All requests must include": "Toutes les requêtes doivent inclure",
     "All Status": "Tous les statuts",
     "All Sync Status": "Tous les statuts de synchronisation",
+    "All systems operational": "Tous les systèmes opérationnels",
     "All Tags": "Tous les tags",
     "All Types": "Tous les types",
     "All upstream data is trusted": "Toutes les données en amont sont fiables",
     "All Vendors": "Tous les fournisseurs",
     "All Your AI Models": "Tous vos modèles IA",
+    "All-time": "Tous temps",
     "Allocated Memory": "Mémoire allouée",
     "Allow accountFilter parameter": "Autoriser le paramètre accountFilter",
     "Allow Claude beta query passthrough": "Autoriser le passage des requêtes bêta Claude",
@@ -279,6 +303,7 @@
     "Answer": "Réponse",
     "Anthropic": "Anthropic",
     "Any Match (OR)": "N'importe laquelle (OR)",
+    "API": "API",
     "API Access": "Accès API",
     "API Addresses": "Adresses API",
     "API Base URL (Important: Not Chat API) *": "URL de base de l'API (Important : Pas l'API de Chat) *",
@@ -312,6 +337,8 @@
     "API URL": "URL de l'API",
     "API usage records": "Historique d'utilisation de l'API",
     "API2GPT": "API2GPT",
+    "App": "Application",
+    "App rankings shown here are simulated for preview purposes and will be replaced with live usage data once the backend integration is complete.": "Les classements d'applications présentés ici sont simulés à des fins de prévisualisation et seront remplacés par des données réelles une fois l'intégration du backend terminée.",
     "Append": "Ajouter à la fin",
     "Append mode: New keys will be added to the end of the existing key list": "Mode d'ajout : Les nouvelles clés seront ajoutées à la fin de la liste de clés existante",
     "Append Template": "Ajouter le modèle",
@@ -329,6 +356,10 @@
     "Apply Sync": "Appliquer la synchronisation",
     "Applying...": "Application en cours...",
     "Approx.": "Environ.",
+    "apps": "applications",
+    "Apps": "Applications",
+    "apps tracked": "applications suivies",
+    "Apps using the most tokens through new-api": "Applications consommant le plus de jetons via new-api",
     "are also listed here. Remove them from Models to keep the `/v1/models` response user-friendly and hide vendor-specific names.": "sont également listés ici. Supprimez-les des Modèles pour que la réponse `/v1/models` reste conviviale et pour masquer les noms spécifiques aux fournisseurs.",
     "Are you sure you want to delete": "Êtes-vous sûr de vouloir supprimer",
     "Are you sure you want to delete all auto-disabled keys? This action cannot be undone.": "Êtes-vous sûr de vouloir supprimer toutes les clés automatiquement désactivées ? Cette action ne peut pas être annulée.",
@@ -397,6 +428,7 @@
     "Available Models": "Modèles disponibles",
     "Available Rewards": "Récompenses disponibles",
     "Average RPM": "RPM moyen",
+    "Average tokens per second sustained per group": "Tokens par seconde soutenus en moyenne par groupe",
     "Average TPM": "TPM moyen",
     "AWS": "AWS",
     "AWS Bedrock Claude Compat": "AWS Bedrock Claude Compat",
@@ -428,6 +460,7 @@
     "Base amount. Actual deduction = base amount × system group rate.": "Montant de base. Déduction réelle = montant de base × taux du groupe système.",
     "Base Limits": "Limites de base",
     "Base multipliers applied when users select specific groups.": "Multiplicateurs de base appliqués lorsque les utilisateurs sélectionnent des groupes spécifiques.",
+    "Base Price": "Prix de base",
     "Base rate limit windows for this account.": "Fenêtres de limitation de débit de base pour ce compte.",
     "Base URL": "URL de base",
     "Base URL of your Uptime Kuma instance": "URL de base de votre instance Uptime Kuma",
@@ -448,6 +481,7 @@
     "Batch processing failed": "Échec du traitement par lot",
     "Batch upstream model updates applied: {{channels}} channels, {{added}} added, {{removed}} removed, {{fails}} failed": "Mises à jour par lot des modèles en amont appliquées : {{channels}} canaux, {{added}} ajoutés, {{removed}} supprimés, {{fails}} échoués",
     "Best for single-tenant deployments. Pricing and billing options stay hidden.": "Idéal pour les déploiements mono-utilisateur. Les options de tarification et de facturation restent masquées.",
+    "Best TTFT": "Meilleur TTFT",
     "Billing": "Facturation",
     "Billing currency": "Devise de facturation",
     "Billing Details": "Détails de facturation",
@@ -474,6 +508,7 @@
     "Blocked keywords": "Mots-clés bloqués",
     "Blocks messages when sensitive keywords are detected.": "Bloque les messages lorsque des mots-clés sensibles sont détectés.",
     "Body param": "Paramètre de corps",
+    "Border radius": "Rayon de bordure",
     "Bot Name": "Nom du bot",
     "Bot Protection": "Protection des bots",
     "Bot Token": "Jeton du bot",
@@ -485,7 +520,7 @@
     "Broadcast a global banner to users. Markdown is supported.": "Diffuser une bannière globale aux utilisateurs. Le Markdown est pris en charge.",
     "Broadcast short system notices on the dashboard": "Diffuser de courtes notifications système sur le tableau de bord",
     "Browse and compare": "Parcourir et comparer",
-    "Discover curated AI models, compare pricing and capabilities, and choose the right model for every scenario.": "Découvrez une sélection de modèles IA, comparez les tarifs et les capacités, et choisissez le modèle adapté à chaque scénario.",
+    "Browse rankings by category": "Parcourir les classements par catégorie",
     "Budget tokens = max tokens × ratio. Accepts a decimal between 0.002 and 1. Recommended to keep aligned with upstream billing.": "Jetons budgétaires = jetons max × ratio. Accepte un nombre décimal entre 0,002 et 1. Il est recommandé de rester aligné avec la facturation en amont.",
     "Budget tokens = max tokens × ratio. Accepts a decimal between 0.1 and 1.": "Jetons budgétaires = jetons max × ratio. Accepte un nombre décimal entre 0,1 et 1.",
     "Budget Tokens Ratio": "Ratio de jetons budgétaires",
@@ -495,6 +530,8 @@
     "Built-in Device": "Appareil intégré",
     "Built-in: phone fingerprint/face, or Windows Hello; External: USB security key": "Intégré : empreinte digitale/visage du téléphone, ou Windows Hello ; Externe : clé de sécurité USB",
     "by": "par",
+    "By category": "Par catégorie",
+    "By model author": "Par auteur du modèle",
     "Cache": "Cache",
     "Cache Creation": "Création cache",
     "Cache Creation (1h)": "Création cache (1h)",
@@ -506,6 +543,7 @@
     "Cache mode": "Mode de cache",
     "Cache ratio": "Ratio de cache",
     "Cache Read": "Lecture du cache",
+    "Cache repeated prompt prefixes for cheaper, faster reuse": "Mettre en cache les préfixes répétés pour une réutilisation plus rapide et moins coûteuse",
     "Cache write": "Écriture du cache",
     "Cache Write": "Écriture du cache",
     "Cache Write (1h)": "Écriture cache (1h)",
@@ -527,13 +565,16 @@
     "Cancel": "Annuler",
     "Cancelled": "Annulé",
     "Cancelled at": "Annulé le",
+    "Capabilities": "Capacités",
     "Capture a reusable bundle of models, tags, or endpoints.": "Capturez un ensemble réutilisable de modèles, d'étiquettes ou de points de terminaison.",
     "Card view": "Vue cartes",
+    "Category": "Catégorie",
     "Category Name": "Nom de la catégorie",
     "Category name is required": "Le nom de la catégorie est requis",
     "Category name must be less than 50 characters": "Le nom de la catégorie doit contenir moins de 50 caractères",
     "Caution": "Attention",
     "CC Switch": "Changement CC",
+    "Centered": "Centré",
     "Chain": "Chaîne",
     "Change": "Modifier",
     "Change language": "Changer de langue",
@@ -563,6 +604,7 @@
     "channel(s)? This action cannot be undone.": "canal(aux) ? Cette action ne peut pas être annulée.",
     "Channels": "Canaux",
     "Channels deleted successfully": "Canaux supprimés avec succès",
+    "Character chat, storytelling, persona": "Discussion de personnages, narration, persona",
     "Chart Preferences": "Préférences des graphiques",
     "Chart Settings": "Paramètres du graphique",
     "Chat": "Discuter",
@@ -632,6 +674,7 @@
     "Cleared all models": "Tous les modèles effacés",
     "Click \"Create Plan\" to create your first subscription plan": "Cliquez sur « Créer un plan » pour créer votre premier abonnement",
     "Click \"Generate\" to create a token": "Cliquez sur \"Générer\" pour créer un jeton",
+    "Click any category to drill into its models, apps, and trends": "Cliquez sur une catégorie pour explorer ses modèles, applications et tendances",
     "Click for details": "Cliquez pour les détails",
     "Click save when you're done.": "Cliquez sur Enregistrer lorsque vous avez terminé.",
     "Click save when you&apos;re done.": "Cliquez sur Enregistrer lorsque vous avez terminé.",
@@ -655,6 +698,9 @@
     "CNY": "CNY",
     "CNY per USD": "CNY par USD",
     "Code": "Code",
+    "Code generation, refactoring, autocomplete": "Génération de code, refactorisation, autocomplétion",
+    "Code interpreter": "Interpréteur de code",
+    "Code samples": "Exemples de code",
     "Codes copied!": "Codes copiés !",
     "Codex": "Codex",
     "Codex Account & Usage": "Compte et utilisation Codex",
@@ -666,7 +712,9 @@
     "Collapse All": "Tout réduire",
     "Color": "Couleur",
     "Color is required": "La couleur est requise",
+    "Color preset": "Préréglage de couleur",
     "Color:": "Couleur :",
+    "Comfortable": "Confortable",
     "Coming Soon!": "Bientôt disponible !",
     "Comma-separated exact model names. Prefix with regex: to ignore by regular expression.": "Noms exacts de modèles séparés par des virgules. Préfixez avec regex: pour ignorer par expression régulière.",
     "Comma-separated list of allowed ports (empty = all ports)": "Liste des ports autorisés séparés par des virgules (vide = tous les ports)",
@@ -679,6 +727,13 @@
     "Common ports include 25, 465, and 587": "Les ports courants incluent 25, 465 et 587",
     "Common User": "Utilisateur commun",
     "Community driven, self-hosted, and extensible": "Piloté par la communauté, auto-hébergé et extensible",
+    "Compact": "Compact",
+    "Compare each vendor's token share across the past few weeks": "Comparer la part de tokens de chaque fournisseur sur les dernières semaines",
+    "Compare each vendor's token share across the past year": "Comparer la part de tokens de chaque fournisseur sur l’année écoulée",
+    "Compare each vendor's token share over the past 24 hours": "Comparer la part de tokens de chaque fournisseur sur les dernières 24 heures",
+    "Compare each vendor's token share over the past month": "Comparer la part de tokens de chaque fournisseur sur le dernier mois",
+    "Compare each vendor's token share since launch": "Comparer la part de tokens de chaque fournisseur depuis le lancement",
+    "Compare the most popular models on the platform": "Comparez les modèles les plus populaires de la plateforme",
     "compatible API routes": "routes API compatibles",
     "Compatible API routes for common AI application workflows": "Routes API compatibles pour les workflows courants des applications d'IA",
     "Complete API documentation with multi-language SDK support": "Documentation API complète avec support SDK multilingue",
@@ -792,6 +847,8 @@
     "Content displayed on the home page (supports Markdown)": "Contenu affiché sur la page d'accueil (prend en charge Markdown)",
     "Content not found.": "Contenu non trouvé.",
     "Content not modified!": "Contenu non modifié !",
+    "Content width": "Largeur du contenu",
+    "Context": "Contexte",
     "Continue": "Continuer",
     "Continue with {{name}}": "Continuer avec {{name}}",
     "Continue with Discord": "Continuer avec Discord",
@@ -800,11 +857,13 @@
     "Continue with OIDC": "Continuer avec OIDC",
     "Continue with Telegram": "Continuer avec Telegram",
     "Continue with WeChat": "Continuer avec WeChat",
+    "Contract review, compliance, summarisation": "Revue de contrats, conformité, résumé",
     "Control log retention and clean historical data.": "Contrôler la rétention des journaux et nettoyer les données historiques.",
     "Control passthrough behavior and connection keep-alive settings": "Contrôler le comportement de passthrough et les paramètres de maintien de connexion",
     "Control request frequency to prevent abuse and manage system load.": "Contrôler la fréquence des requêtes pour prévenir les abus et gérer la charge système.",
     "Control which models are exposed and which groups may use them.": "Contrôlez les modèles exposés et les groupes autorisés à les utiliser.",
     "Control which sidebar areas and modules are available to all users.": "Contrôler les zones et modules de la barre latérale disponibles pour tous les utilisateurs.",
+    "Controls how much the model thinks before answering": "Contrôle la quantité de raisonnement avant la réponse",
     "Controls whether user verification (biometrics/PIN) is required during Passkey flows.": "Contrôle si la vérification de l'utilisateur (biométrie/PIN) est requise lors des flux de Passkey.",
     "Conversion rate from USD to your custom currency": "Taux de conversion de l'USD vers votre devise personnalisée",
     "Convert reasoning_content to <think> tag in content": "Convertir reasoning_content en balise <think> dans content",
@@ -845,6 +904,7 @@
     "Copy to clipboard": "Copier dans le presse-papiers",
     "Copy token": "Copier le Jeton",
     "Copy URL": "Copier l'URL",
+    "Copywriting, ad creative, SEO": "Rédaction publicitaire, créatif, SEO",
     "Core Configuration": "Configuration principale",
     "Core Features": "Fonctionnalités principales",
     "Cost": "Coût",
@@ -936,6 +996,11 @@
     "Customize sidebar display content": "Personnaliser le contenu affiché dans la barre latérale",
     "Daily": "Quotidien",
     "Daily Check-in": "Connexion quotidienne",
+    "Daily token usage by model across the past few weeks": "Utilisation quotidienne de tokens par modèle sur les dernières semaines",
+    "Daily token usage by model across the past month": "Utilisation quotidienne des tokens par modèle au cours du dernier mois",
+    "Daily token usage by model over the past month": "Utilisation quotidienne de tokens par modèle sur le dernier mois",
+    "Daily uptime over the last 30 days": "Disponibilité quotidienne sur les 30 derniers jours",
+    "Daily uptime; {{incidents}} incidents totalling {{minutes}} minutes": "Disponibilité quotidienne ; {{incidents}} incidents totalisant {{minutes}} minutes",
     "Dark": "Sombre",
     "Dashboard": "Tableau de bord",
     "Dashboard Preferences": "Préférences du tableau de bord",
@@ -944,6 +1009,7 @@
     "Data directory:": "Répertoire des données :",
     "Data is stored locally on this device. Use system backups to keep a safe copy.": "Les données sont stockées localement sur cet appareil. Utilisez les sauvegardes système pour conserver une copie sécurisée.",
     "Data management and log viewing": "Gestion des données et consultation des journaux",
+    "Data retention": "Rétention des données",
     "Database": "Base de données",
     "Database check": "Vérification de la base de données",
     "Date and time when this announcement should be displayed": "Date et heure auxquelles cette annonce doit être affichée",
@@ -956,6 +1022,7 @@
     "default": "par défaut",
     "Default": "Par défaut",
     "Default (New Frontend)": "Par défaut (Nouveau frontend)",
+    "Default / range": "Défaut / plage",
     "Default API Version *": "Version API par défaut *",
     "Default API version for this channel": "Version API par défaut pour ce canal",
     "Default Collapse Sidebar": "Réduire la barre latérale par défaut",
@@ -972,6 +1039,7 @@
     "Define API endpoints for this model (JSON format)": "Définir les points de terminaison API pour ce modèle (format JSON)",
     "Define endpoint mappings for each provider.": "Définissez les mappages d'endpoints pour chaque fournisseur.",
     "Define per-group rules to add, remove, or append selectable groups for specific user groups.": "Définir des règles par groupe pour ajouter, supprimer ou ajouter des groupes sélectionnables pour des groupes d'utilisateurs spécifiques.",
+    "Degraded performance recently": "Performances dégradées récemment",
     "Delete": "Supprimer",
     "Delete (": "Supprimer (",
     "Delete {{count}} API key(s)?": "Supprimer {{count}} clé(s) API ?",
@@ -1009,6 +1077,7 @@
     "Demo site mode": "Mode site de démonstration",
     "Demo Site Mode": "Mode Site de démonstration",
     "Demote": "Rétrograder",
+    "Density": "Densité",
     "Deploy your own gateway and start routing requests through your configured upstream services.": "Déployez votre propre passerelle et commencez à router les requêtes via vos services en amont configurés.",
     "Deployment created successfully": "Déploiement créé avec succès",
     "Deployment details": "Détails du déploiement",
@@ -1035,6 +1104,7 @@
     "Detection complete: {{add}} to add, {{remove}} to remove": "Détection terminée : {{add}} à ajouter, {{remove}} à supprimer",
     "Detection failed": "Échec de la détection",
     "Determines how this group is applied elsewhere.": "Détermine comment ce groupe est appliqué ailleurs.",
+    "Deterministic sampling seed (best-effort)": "Graine d'échantillonnage déterministe (meilleur effort)",
     "Developer Friendly": "Convivial pour les développeurs",
     "Device Type Preference": "Préférence de type d'appareil",
     "Dify": "Dify",
@@ -1069,6 +1139,9 @@
     "Discount Rate:": "Taux de réduction :",
     "Discount ratio for cache hits.": "Ratio de réduction pour les accès au cache.",
     "Discouraged": "Déconseillé",
+    "Discover curated AI models, compare pricing and capabilities, and choose the right model for every scenario.": "Découvrez une sélection de modèles IA, comparez les tarifs et les capacités, et choisissez le modèle adapté à chaque scénario.",
+    "Discover the leading models in each domain": "Découvrez les modèles leaders dans chaque domaine",
+    "Discover the most-used models, top apps, and rising vendors on the platform — updated continuously across every category.": "Découvrez les modèles les plus utilisés, les meilleures applications et les fournisseurs en plein essor — mis à jour en continu pour chaque catégorie.",
     "Discovering...": "Découverte en cours...",
     "Disk cache cleared": "Cache disque vidé",
     "Disk Cache Settings": "Paramètres du cache disque",
@@ -1191,6 +1264,7 @@
     "Edit Vendor": "Modifier le fournisseur",
     "edit_this": "modifier_ceci",
     "Editor mode": "Mode éditeur",
+    "Education": "Éducation",
     "Email": "E-mail",
     "Email (required for verification)": "E-mail (requis pour la vérification)",
     "Email Address": "Adresse e-mail",
@@ -1200,6 +1274,7 @@
     "Email Domain Whitelist": "Liste blanche de domaines d'e-mail",
     "Email Field": "Champ d'e-mail",
     "Email Verification": "Vérification d'e-mail",
+    "Email, summarisation, knowledge work": "Email, résumé, travail intellectuel",
     "Embeddings": "Embeddings",
     "Empty value will be saved as {}.": "Une valeur vide sera enregistrée comme {}.",
     "Enable": "Activer",
@@ -1247,10 +1322,12 @@
     "Enabled all channels with tag: {{tag}}": "Tous les canaux avec le tag {{tag}} ont été activés",
     "Enabled Status": "Statut activé",
     "Enabling...": "Activation en cours...",
+    "Encourages introducing new topics": "Encourage l'introduction de nouveaux sujets",
     "End": "End",
     "End Error": "Erreur finale",
     "End Reason": "Raison de fin",
     "End Time": "Heure de fin",
+    "End-user identifier for abuse monitoring": "Identifiant d'utilisateur final pour la surveillance des abus",
     "Endpoint": "Point d'accès",
     "Endpoint config": "Configuration de l'endpoint",
     "Endpoint Configuration": "Configuration du point de terminaison",
@@ -1358,10 +1435,12 @@
     "Excellent": "Excellent",
     "Exchange rate is required": "Le taux de change est requis",
     "Exchange rate must be greater than 0": "Le taux de change doit être supérieur à 0",
+    "Execute code in a sandbox during the response": "Exécuter du code dans un bac à sable pendant la réponse",
     "Exhausted": "Épuisé",
     "Existing account will be reused": "Le compte existant sera réutilisé",
     "Existing Models ({{count}})": "Modèles existants ({{count}})",
     "Exists": "Existe",
+    "Expand": "Développer",
     "Expand All": "Tout développer",
     "Expected a JSON array.": "Un tableau JSON est attendu.",
     "Experiment with prompts and models in real time.": "Expérimentez avec des prompts et des modèles en temps réel.",
@@ -1530,6 +1609,7 @@
     "Field Mapping": "Mappage de champs",
     "Field passthrough controls": "Contrôles de transmission des champs",
     "Field Path": "Chemin du champ",
+    "File": "Fichier",
     "File Search": "Recherche de fichiers",
     "Files to Retain": "Fichiers à conserver",
     "Fill All Models": "Remplir tous les modèles",
@@ -1569,6 +1649,7 @@
     "Final Consumed": "Consommation finale",
     "Final cost = base × multiplier when conditions match": "Coût final = base × multiplicateur lorsque les conditions correspondent",
     "Final price multiplier (0.95 = 5% discount": "Multiplicateur de prix final (0.95 = 5% de réduction",
+    "Finance": "Finance",
     "Fine-tune Midjourney integration and guardrails.": "Affiner l'intégration et les garde-fous de Midjourney.",
     "Finish Time": "Heure de fin",
     "First/Last Frame to Video": "Première/Dernière image vers vidéo",
@@ -1576,6 +1657,7 @@
     "Fixed abilities: {{success}} succeeded, {{fails}} failed": "Correction des capacités : {{success}} réussie(s), {{fails}} échouée(s)",
     "Fixed price": "Prix fixe",
     "Fixed price (USD)": "Prix fixe (USD)",
+    "Floating": "Flottant",
     "FluentRead extension not detected. Please ensure it is installed and active.": "Extension FluentRead non détectée. Veuillez vous assurer qu'elle est installée et activée.",
     "Follow the guided steps to prepare your workspace before the first login.": "Suivez les étapes guidées pour préparer votre espace de travail avant la première connexion.",
     "Footer": "Pied de page",
@@ -1596,10 +1678,13 @@
     "footer.new\u0061pi.projectAttributionSuffix": "Tous droits réservés. Conçu et développé par les contributeurs du projet.",
     "For channels added after May 10, 2025, no need to remove \".\" from model names during deployment": "Pour les canaux ajoutés après le 10 mai 2025, pas besoin de supprimer \".\" des noms de modèles lors du déploiement",
     "For private deployments, format: https://fastgpt.run/api/openapi": "Pour les déploiements privés, format : https://fastgpt.run/api/openapi",
+    "Force a syntactically valid JSON response": "Imposer une réponse JSON syntaxiquement valide",
     "Force AUTH LOGIN": "Forcer AUTH LOGIN",
     "Force Format": "Forcer le format",
     "Force format response to OpenAI standard (OpenAI channel only)": "Forcer la réponse au format standard OpenAI (canal OpenAI uniquement)",
+    "Force JSON object or schema-conforming output": "Forcer une sortie JSON ou conforme à un schéma",
     "Force SMTP authentication using AUTH LOGIN method": "Forcer l'authentification SMTP en utilisant la méthode AUTH LOGIN",
+    "Forest Whisper": "Murmure forestier",
     "Forgot password": "Mot de passe oublié",
     "Forgot password?": "Mot de passe oublié ?",
     "Form reset to saved values": "Formulaire réinitialisé aux valeurs enregistrées",
@@ -1614,6 +1699,7 @@
     "Format: APPID|APISecret|APIKey": "Format : APPID|APISecret|APIKey",
     "Format: AppId|SecretId|SecretKey": "Format : AppId|SecretId|SecretKey",
     "Forward requests directly to upstream providers without any post-processing.": "Transférer les requêtes directement aux fournisseurs amont sans aucun post-traitement.",
+    "Frames per second": "Images par seconde",
     "Free: {{free}} / Total: {{total}}": "Disponible : {{free}} / Total : {{total}}",
     "Friendly name to identify this channel": "Nom convivial pour identifier ce canal",
     "From Address": "De l'adresse",
@@ -1623,6 +1709,9 @@
     "Full API Key": "Clé API complète",
     "Full Base URL (supports": "URL de base complète (prend en charge",
     "Full Code": "Code complet",
+    "Full layout": "Disposition complète",
+    "Full width": "Pleine largeur",
+    "Function calling": "Appel de fonction",
     "Functions": "Fonctions",
     "GC Count": "Nombre de GC",
     "GC executed": "GC exécuté",
@@ -1639,9 +1728,11 @@
     "Generate Music": "Générer de la musique",
     "Generate new backup codes for account recovery": "Générer de nouveaux codes de secours pour la récupération du compte",
     "Generate New Codes": "Générer de nouveaux codes",
+    "Generate tokens from the Tokens page; you can scope them to specific models, groups, IPs, and rate-limits.": "Générez des jetons depuis la page Jetons ; vous pouvez les restreindre par modèle, groupe, IP et limites de débit.",
     "Generated image": "Image générée",
     "Generating new codes will invalidate all existing backup codes.": "La génération de nouveaux codes invalidera tous les codes de sauvegarde existants.",
     "Generating...": "Génération...",
+    "Generation quality preset": "Préréglage de qualité de génération",
     "Generic cache": "Cache générique",
     "Get notified when balance falls below this value": "Recevoir une notification lorsque le solde tombe en dessous de cette valeur",
     "Get Started": "Commencer",
@@ -1651,6 +1742,7 @@
     "Global configuration and administrative tools.": "Configuration globale et outils d'administration.",
     "Global Coverage": "Couverture mondiale",
     "Global Model Configuration": "Configuration globale du modèle",
+    "Global throughput": "Débit global",
     "Go Back": "Retour",
     "Go back and edit": "Retour et modifier",
     "Go to Dashboard": "Aller au tableau de bord",
@@ -1697,6 +1789,7 @@
     "Groups": "Groupes",
     "Groups *": "Groupes *",
     "Groups that users can select when creating API keys.": "Groupes que les utilisateurs peuvent sélectionner lors de la création de clés API.",
+    "Growth": "Croissance",
     "Guardrails": "Garde-fous",
     "Guest": "Invité",
     "h": "h",
@@ -1710,11 +1803,14 @@
     "Has been invalidated": "Invalidé avec succès",
     "Have a Code?": "Vous avez un code ?",
     "Header": "En-tête",
+    "header instead.": ".",
     "Header Name": "Nom de l’en-tête",
     "Header navigation": "Navigation d'en-tête",
     "Header Override": "Remplacement d'en-tête",
     "Header Passthrough (X-Request-Id)": "Passthrough en-tête (X-Request-Id)",
     "Header Value (supports string or JSON mapping)": "Valeur de l'en-tête (chaîne ou mappage JSON)",
+    "header. Anthropic-formatted endpoints accept the": ". Les points de terminaison au format Anthropic acceptent à la place",
+    "Health": "Santé",
     "Hidden — verify to reveal": "Masqué — vérifiez pour révéler",
     "Hide": "Masquer",
     "Hide API key": "Masquer la clé API",
@@ -1738,6 +1834,8 @@
     "Home Page Content": "Contenu de la page d'accueil",
     "Hostname or IP of your SMTP provider": "Nom d'hôte ou IP de votre fournisseur SMTP",
     "Hour": "Heure",
+    "Hourly token usage by model across the last 24 hours": "Utilisation horaire des tokens par modèle sur les dernières 24 heures",
+    "Hourly token usage by model over the past 24 hours": "Utilisation horaire de tokens par modèle sur les dernières 24 heures",
     "hours": "heures",
     "How client credentials are sent to the token endpoint": "Comment les informations d'identification client sont envoyées au point de terminaison de jeton",
     "How frequently the system tests all channels": "Fréquence à laquelle le système teste tous les canaux",
@@ -1745,6 +1843,7 @@
     "How model mapping works": "Comment fonctionne le mappage de modèle",
     "How much to charge for each US dollar of balance (Epay)": "Montant à facturer pour chaque dollar US de solde (Epay)",
     "How this model name should match requests": "Comment ce nom de modèle doit correspondre aux requêtes",
+    "How to deliver the resulting image": "Comment délivrer l'image résultante",
     "How to get an io.net API Key": "Comment obtenir une clé API io.net",
     "How to reset my quota?": "Comment réinitialiser mon quota ?",
     "How to select keys: random or sequential polling": "Comment sélectionner les clés : sondage aléatoire ou séquentiel",
@@ -1794,6 +1893,9 @@
     "Import to CC Switch": "Importer vers CC Switch",
     "In Progress": "En cours",
     "In:": "Entrée :",
+    "incident": "incident",
+    "incidents": "incidents",
+    "Incidents": "Incidents",
     "Include Group": "Inclure le groupe",
     "Include Model": "Inclure le modèle",
     "Include Rule Name": "Inclure le nom de la règle",
@@ -1810,14 +1912,15 @@
     "Input price": "Prix d’entrée",
     "Input tokens": "Jetons d’entrée",
     "Input Tokens": "Tokens d'entrée",
+    "Inset": "Encastré",
     "Inspect user prompts": "Inspecter les invites utilisateur",
     "Instance": "Instance",
     "Integrations": "Intégrations",
     "Inter-group overrides": "Dérogations inter-groupes",
     "Inter-group ratio overrides": "Dérogations de ratio inter-groupes",
+    "Interface Language": "Langue de l'interface",
     "Internal Notes": "Notes internes",
     "Internal notes (not shown to users)": "Notes internes (non visibles par les utilisateurs)",
-    "Interface Language": "Langue de l'interface",
     "Internal Server Error!": "Erreur interne du serveur !",
     "Invalid chat link. Please contact the administrator.": "Lien de chat invalide. Veuillez contacter l'administrateur.",
     "Invalid chat link. Please contact your administrator.": "Lien de chat invalide. Veuillez contacter votre administrateur.",
@@ -1848,6 +1951,7 @@
     "Inviter": "Inviteur",
     "Inviter Reward": "Récompense de l'inviteur",
     "Invites": "Invitations",
+    "Invoke developer-defined functions with structured arguments": "Appeler des fonctions définies par le développeur avec des arguments structurés",
     "io.net API Key": "Clé API io.net",
     "io.net Deployments": "Déploiements io.net",
     "IP": "IP",
@@ -1872,6 +1976,7 @@
     "JSON map of group → ratio applied when the user selects the group explicitly.": "Carte JSON de groupe → ratio appliqué lorsque l'utilisateur sélectionne explicitement le groupe.",
     "JSON map of model → multiplier applied to quota billing.": "Carte JSON de modèle → multiplicateur appliqué à la facturation par quota.",
     "JSON map of model → USD cost per request. Takes precedence over ratio based billing.": "Carte JSON de modèle → coût en USD par requête. Prend le pas sur la facturation basée sur le ratio.",
+    "JSON mode": "Mode JSON",
     "JSON Mode": "Mode JSON",
     "JSON must be an object": "Le JSON doit être un objet",
     "JSON object:": "Objet JSON :",
@@ -1893,10 +1998,13 @@
     "Keys, OAuth credentials, and multi-key update behavior.": "Clés, identifiants OAuth et comportement de mise à jour multi-clés.",
     "Kling": "Kling",
     "Knowledge Base ID *": "ID de la base de connaissances *",
+    "Knowledge cutoff": "Date de coupure des connaissances",
+    "Lake View": "Vue du lac",
     "Landing page with system overview.": "Page d'accueil avec aperçu du système.",
-    "Language Preferences": "Préférences de langue",
     "Language preference saved": "Préférence de langue enregistrée",
+    "Language Preferences": "Préférences de langue",
     "Language preferences sync across your signed-in devices and affect API error messages.": "Les préférences de langue se synchronisent sur vos appareils connectés et affectent les messages d'erreur de l'API.",
+    "Last 30 days uptime": "Disponibilité 30 derniers jours",
     "Last check time": "Dernière vérification",
     "Last detected addable models": "Derniers modèles ajoutables détectés",
     "Last Login": "Dernière connexion",
@@ -1905,7 +2013,11 @@
     "Last updated:": "Dernière mise à jour :",
     "Last Used": "Dernière utilisation",
     "Last used:": "Dernière utilisation :",
+    "Latency trend (last 24h)": "Tendance de latence (24 dernières heures)",
+    "Lavender Dream": "Rêve de lavande",
     "Layout": "Disposition",
+    "lead": "tête",
+    "Leaderboards": "Classements",
     "Learn more": "En savoir plus",
     "Learn more:": "En savoir plus :",
     "Leave": "Quitter",
@@ -1922,12 +2034,15 @@
     "Leave empty to use default": "Laisser vide pour utiliser la valeur par défaut",
     "Leave empty to use system temp directory": "Laisser vide pour utiliser le répertoire temporaire",
     "Leave empty to use username": "Laissez vide pour utiliser le nom d'utilisateur",
+    "Left to Right": "De gauche à droite",
     "Legacy Format (JSON Object)": "Ancien format (objet JSON)",
     "Legacy format must be a JSON object": "L'ancien format doit être un objet JSON",
     "Legacy Format Template": "Modèle ancien format",
+    "Legal": "Juridique",
     "Less": "Moins",
     "Less Than": "Inférieur à",
     "Less Than or Equal": "Inférieur ou égal",
+    "License": "Licence",
     "Light": "Clair",
     "Lightning Fast": "Extrêmement rapide",
     "Limit period": "Période de limite",
@@ -1942,6 +2057,7 @@
     "List of models supported by this channel. Use comma to separate multiple models.": "Liste des modèles pris en charge par ce canal. Utilisez une virgule pour séparer plusieurs modèles.",
     "List of origins (one per line) allowed for Passkey registration and authentication.": "Liste des origines (une par ligne) autorisées pour l'enregistrement et l'authentification des clés d'accès (Passkey).",
     "List view": "Vue en liste",
+    "LLM Leaderboard": "Classement des LLM",
     "LLM prompt helper": "Assistant prompt LLM",
     "Load Balancing": "Équilibrage de charge",
     "Load template...": "Charger le modèle...",
@@ -1972,6 +2088,7 @@
     "Logo": "Logo",
     "Logo URL": "URL du logo",
     "Logs": "Journaux",
+    "Lowest median first-token latency": "Latence médiane de premier jeton la plus faible",
     "m": "m",
     "Maintain a list of common questions for the dashboard help panel": "Maintenir une liste de questions courantes pour le panneau d'aide du tableau de bord",
     "Maintenance": "Maintenance",
@@ -2005,6 +2122,8 @@
     "Map request model names to actual provider model names (JSON format)": "Mapper les noms de modèles de requête aux noms réels de modèles du fournisseur (format JSON)",
     "Map response status codes (JSON format)": "Mapper les codes de statut de réponse (format JSON)",
     "Map upstream status codes to different codes": "Mapper les codes de statut amont à différents codes",
+    "Market Share": "Part de marché",
+    "Marketing": "Marketing",
     "Match All (AND)": "Toutes (AND)",
     "Match Any (OR)": "N'importe laquelle (OR)",
     "Match Mode": "Mode de correspondance",
@@ -2021,6 +2140,7 @@
     "Matching Rules": "Règles de correspondance",
     "Max Disk Cache Size (MB)": "Taille max du cache disque (Mo)",
     "Max Entries": "Entrées max",
+    "Max output": "Sortie max",
     "Max Requests (incl. failures)": "Max Requêtes (incl. échecs)",
     "Max Requests (including failures)": "Max Requêtes (incluant les échecs)",
     "Max requests per period": "Nombre max de requêtes par période",
@@ -2031,8 +2151,15 @@
     "Maximum 200 characters": "Maximum 200 caractères",
     "Maximum 500 characters. Supports Markdown and HTML.": "Maximum 500 caractères. Prend en charge Markdown et HTML.",
     "Maximum check-in quota": "Quota maximum de connexion",
+    "Maximum input window": "Fenêtre d'entrée maximale",
+    "Maximum number of tokens in the response": "Nombre maximum de jetons dans la réponse",
     "Maximum quota amount awarded for check-in": "Montant maximum de quota attribué pour la connexion",
+    "Maximum tokens including hidden reasoning tokens": "Jetons maximum, y compris les jetons de raisonnement masqués",
+    "Maximum tokens per response": "Nombre maximal de jetons par réponse",
     "maxRequests ≥ 0, maxSuccess ≥ 1, both ≤ 2,147,483,647": "maxRequests ≥ 0, maxSuccess ≥ 1, les deux ≤ 2 147 483 647",
+    "May be used for training by upstream provider": "Peut être utilisé pour l'entraînement par le fournisseur amont",
+    "Median time-to-first-token (TTFT) sampled hourly per group": "Latence médiane jusqu'au premier jeton (TTFT) échantillonnée par heure et par groupe",
+    "Medical Q&A, mental health support": "Q&R médicales, soutien en santé mentale",
     "Memory Hits": "Hits mémoire",
     "Memory Threshold (%)": "Seuil mémoire (%)",
     "Merchant ID": "ID du commerçant",
@@ -2041,6 +2168,7 @@
     "Metadata": "Métadonnées",
     "Midjourney": "Midjourney",
     "MidjourneyPlus": "MidjourneyPlus",
+    "min downtime": "min d'interruption",
     "Min Top-up": "Recharge min.",
     "Min Top-up:": "Recharge min. :",
     "MiniMax": "MiniMax",
@@ -2056,12 +2184,15 @@
     "Minimum topup amount: {{amount}}": "Montant minimum de recharge : {{amount}}",
     "Minimum Trust Level": "Niveau de confiance minimum",
     "Minimum:": "Minimum :",
+    "Minor blips in the last 30 days": "Légères perturbations sur les 30 derniers jours",
     "Minute": "Minute",
     "minutes": "minutes",
     "Missing code": "Code manquant",
     "Missing Models": "Modèles manquants",
     "Missing user data from Passkey login response": "Données utilisateur manquantes de la réponse de connexion Passkey",
     "Mistral": "Mistral",
+    "Modalities": "Modalités",
+    "Modality": "Modalité",
     "Mode": "Mode",
     "model": "modèle",
     "Model": "Modèle",
@@ -2074,6 +2205,7 @@
     "Model deleted successfully": "Modèle supprimé avec succès",
     "Model deployment service is disabled": "Le service de déploiement de modèles est désactivé",
     "Model Description": "Description du modèle",
+    "Model details": "Détails du modèle",
     "Model disabled successfully": "Modèle désactivé avec succès",
     "Model enabled successfully": "Modèle activé avec succès",
     "Model fixed pricing": "Tarification fixe du modèle",
@@ -2111,11 +2243,15 @@
     "Models & Groups": "Modèles & Groupes",
     "Models appended successfully": "Modèles ajoutés avec succès",
     "Models are required": "Les modèles sont requis",
+    "Models climbing the leaderboard": "Modèles qui montent au classement",
+    "Models climbing the leaderboard fastest": "Modèles qui grimpent le plus vite au classement",
     "Models directory": "Répertoire des modèles",
     "Models Directory": "Répertoire des modèles",
     "Models fetched successfully": "Modèles récupérés avec succès",
     "Models filled to form": "Modèles remplis pour le formulaire",
     "Models listed here will not automatically append or remove -thinking / -nothinking suffixes.": "Les modèles listés ici n'ajouteront ni ne supprimeront automatiquement les suffixes -thinking / -nothinking.",
+    "Models losing positions": "Modèles perdant des positions",
+    "Models losing the most positions": "Modèles qui perdent le plus de places",
     "Models not in list, may fail to invoke": "Modèles non listés, peut échouer lors de l'invocation",
     "Models that are being used but not configured in the system": "Modèles utilisés mais non configurés dans le système",
     "Models updated successfully": "Modèles mis à jour avec succès",
@@ -2126,12 +2262,14 @@
     "Monitoring & Alerts": "Surveillance & Alertes",
     "Month": "Mois",
     "Monthly": "Mensuel",
+    "Monthly tokens": "Tokens par mois",
     "months": "mois",
     "Moonshot": "Moonshot",
     "More": "Plus",
     "more mapping": "plus de mappage",
     "More templates...": "Autres modèles…",
     "More...": "Plus...",
+    "Most-used models in the selected period and category": "Modèles les plus utilisés dans la période et catégorie choisies",
     "Move": "Déplacer",
     "Move a request header": "Déplacer un en-tête de requête",
     "Move affiliate rewards to your main balance": "Transférer les récompenses d'affiliation vers votre solde principal",
@@ -2148,7 +2286,10 @@
     "Multi-key: Random rotation": "Multi-clé : Rotation aléatoire",
     "Multi-protocol Compatible": "Compatible multi-protocole",
     "Multi-region deployment for stable global access": "Déploiement multirégional pour un accès mondial stable",
+    "Multi-step thinking before final answer": "Raisonnement en plusieurs étapes avant la réponse finale",
     "Multi-user management with flexible permission allocation": "Gestion multi-utilisateurs avec attribution de permissions flexible",
+    "Multilingual translation and localisation": "Traduction multilingue et localisation",
+    "Multimodal": "Multimodal",
     "Multiplier": "Multiplicateur",
     "Multiplier applied when": "Multiplicateur appliqué lorsque",
     "Multiplier applied when {{userGroup}} uses {{targetGroup}}": "Multiplicateur appliqué lorsque {{userGroup}} utilise {{targetGroup}}",
@@ -2184,6 +2325,7 @@
     "Network proxy for this channel (supports socks5 protocol)": "Proxy réseau pour ce canal (supporte le protocole socks5)",
     "Never": "Jamais",
     "Never expires": "N'expire jamais",
+    "NEW": "NOUVEAU",
     "New API": "New API",
     "New API &lt;noreply@example.com&gt;": "New API &lt;noreply@example.com&gt;",
     "New API Project Repository:": "Dépôt du projet New API :",
@@ -2197,6 +2339,7 @@
     "New User Quota": "Quota nouvel utilisateur",
     "New version available: {{version}}": "Nouvelle version disponible : {{version}}",
     "NewAPI": "NewAPI",
+    "Newly released": "Récemment publiés",
     "Next": "Suivant",
     "Next branch": "Branche suivante",
     "Next page": "Page suivante",
@@ -2211,10 +2354,13 @@
     "No API keys available. Create your first API key to get started.": "Aucune clé API disponible. Créez votre première clé API pour commencer.",
     "No API Keys Found": "Aucune clé API trouvée",
     "No API routes configured": "Aucune route API configurée",
+    "No app usage data available for this model.": "Aucune donnée d'utilisation d'application n'est disponible pour ce modèle.",
+    "No apps match the selected filters": "Aucune application ne correspond aux filtres",
     "No available models": "Aucun modèle disponible",
     "No available Web chat links": "Aucun lien de chat Web disponible",
     "No backup": "Pas de sauvegarde",
     "No billing records found": "Aucun enregistrement de facturation trouvé",
+    "No capabilities reported for this model.": "Aucune capacité n'a été signalée pour ce modèle.",
     "No Change": "Aucun changement",
     "No changes": "Aucune modification",
     "No changes made": "Aucune modification effectuée",
@@ -2249,8 +2395,11 @@
     "No group-based rate limits configured. Click \"Add group\" to get started.": "Aucune limite de taux basée sur les groupes configurée. Cliquez sur \"Ajouter un groupe\" pour commencer.",
     "No groups match your search": "Aucun groupe ne correspond à votre recherche",
     "No header overrides configured.": "Aucune surcharge d'en-têtes configurée.",
+    "No history data available": "Aucune donnée historique disponible",
+    "No incidents in the last 30 days": "Aucun incident sur les 30 derniers jours",
     "No Inviter": "Pas d'inviteur",
     "No keys found": "Aucune clé trouvée",
+    "No latency data available": "Aucune donnée de latence disponible",
     "No log entries matched the selected time.": "Aucune entrée de journal ne correspond à l'heure sélectionnée.",
     "No logs": "Aucun journal",
     "No Logs Found": "Aucun journal trouvé",
@@ -2270,6 +2419,7 @@
     "No models found": "Aucun modèle trouvé",
     "No Models Found": "Aucun modèle trouvé",
     "No models found.": "Aucun modèle trouvé.",
+    "No models match the selected filters": "Aucun modèle ne correspond aux filtres",
     "No models match your current filters.": "Aucun modèle ne correspond à vos filtres actuels.",
     "No models match your search": "Aucun modèle ne correspond à votre recherche",
     "No models selected": "Aucun modèle sélectionné",
@@ -2277,6 +2427,9 @@
     "No models to copy": "Aucun modèle à copier",
     "No models to remove": "Aucun modèle à supprimer",
     "No new models to add": "Aucun nouveau modèle à ajouter",
+    "No new models yet": "Pas encore de nouveaux modèles",
+    "No notable climbers right now": "Aucune progression notable pour le moment",
+    "No notable drops right now": "Aucune chute notable pour le moment",
     "No parameter overrides configured.": "Aucune surcharge de paramètres configurée.",
     "No payment methods available. Please contact administrator.": "Aucun moyen de paiement disponible. Veuillez contacter l'administrateur.",
     "No payment methods configured": "Aucun mode de paiement configuré",
@@ -2315,6 +2468,7 @@
     "No Upgrade": "Pas de mise à niveau",
     "No upstream price differences found": "Aucune différence de prix amont trouvée",
     "No upstream ratio differences found": "Aucune différence de ratio amont trouvée",
+    "No uptime data available": "Aucune donnée de disponibilité disponible",
     "No Uptime Kuma groups yet. Click \"Add Group\" to create one.": "Aucun groupe Uptime Kuma pour l'instant. Cliquez sur « Ajouter un groupe » pour en créer un.",
     "No uptime monitoring configured": "Aucune surveillance de disponibilité configurée",
     "No usage logs available. Logs will appear here once API calls are made.": "Aucun journal d'utilisation. Les journaux apparaîtront ici une fois les appels API effectués.",
@@ -2322,6 +2476,7 @@
     "No user selected": "Aucun utilisateur sélectionné",
     "No users available. Try adjusting your search or filters.": "Aucun utilisateur disponible. Essayez d'ajuster votre recherche ou vos filtres.",
     "No Users Found": "Aucun utilisateur trouvé",
+    "No vendor data available": "Aucune donnée de fournisseur disponible",
     "Node Name": "Nom du nœud",
     "Non-stream": "Non-streaming",
     "None": "Aucun",
@@ -2336,15 +2491,20 @@
     "Not Started": "Non démarré",
     "Not Submitted": "Non soumis",
     "Not tested": "Non testé",
+    "Not used for upstream training by default": "Non utilisé pour l'entraînement amont par défaut",
     "Not used yet": "Pas encore utilisé",
     "Notice": "Avis",
     "Notification Email": "E-mail de notification",
     "Notification Method": "Méthode de notification",
     "Notifications": "Notifications",
+    "Nucleus sampling probability mass": "Masse probabiliste de l'échantillonnage nucleus",
     "Number of codes to create": "Nombre de codes à créer",
+    "Number of completions to generate": "Nombre de complétions à générer",
+    "Number of images to generate": "Nombre d'images à générer",
     "Number of keys to create": "Nombre de clés à créer",
     "Number of times to retry failed requests (0-10)": "Nombre de tentatives de réessai des requêtes échouées (0-10)",
     "Number of tokens per unit quota": "Nombre de jetons par unité de quota",
+    "Number of top log probabilities returned per token": "Nombre de log-probabilités retournées par jeton",
     "Number of users invited": "Nombre d'utilisateurs invités",
     "OAuth Client ID": "ID client OAuth",
     "OAuth Client Secret": "Secret client OAuth",
@@ -2355,6 +2515,7 @@
     "Observability": "Observabilité",
     "Obtain the API key, merchant ID, and RSA key pair from the Waffo dashboard, and configure the callback URL.": "Obtenez la clé API, l'ID du commerçant et la paire de clés RSA depuis le tableau de bord Waffo, et configurez l'URL de rappel.",
     "Obtain the merchant, store, product and signing keys from your Waffo dashboard. Webhook URL: <ServerAddress>/api/waffo-pancake/webhook": "Obtenez l'ID marchand, le magasin, le produit et les clés de signature dans le tableau de bord Waffo. URL du Webhook : <ServerAddress>/api/waffo-pancake/webhook",
+    "Ocean Breeze": "Brise océane",
     "of": "sur",
     "of 3:": "sur 3 :",
     "off": "désactivé",
@@ -2397,9 +2558,11 @@
     "Open in New Tab": "Ouvrir dans un nouvel onglet",
     "Open menu": "Ouvrir le menu",
     "Open release": "Ouvrir la version",
+    "Open source": "Open source",
     "Open Source": "Open source",
     "Open the io.net console API Keys page": "Ouvrir la page Clés API de la console io.net",
     "Open theme settings": "Ouvrir les paramètres du thème",
+    "Open weights": "Poids ouverts",
     "OpenAI": "OpenAI",
     "OpenAI Compatible": "Compatible OpenAI",
     "OpenAI Organization": "Organisation OpenAI",
@@ -2437,10 +2600,14 @@
     "org-...": "org-...",
     "Original Model": "Modèle Original",
     "Other": "Autre",
+    "Outage": "Interruption",
     "Output": "Sortie",
+    "Output aspect ratio": "Format d'image de sortie",
+    "Output image size": "Taille de l'image de sortie",
     "Output price": "Prix de sortie",
     "Output tokens": "Jetons de sortie",
     "Output Tokens": "Tokens de sortie",
+    "overall": "global",
     "override": "remplacer",
     "Override": "Remplacer",
     "Override Anthropic headers, defaults, and thinking adapter behavior": "Remplacer les en-têtes, les valeurs par défaut et le comportement de l'adaptateur de réflexion d'Anthropic",
@@ -2460,6 +2627,7 @@
     "PaLM": "PaLM",
     "Pan": "Panoramique",
     "Param Override": "Remplacement de paramètre",
+    "Parameter": "Paramètre",
     "Parameter configuration error": "Erreur de configuration des paramètres",
     "Parameter Override": "Remplacement de paramètre",
     "Parameter override must be a valid JSON object": "La substitution de paramètres doit être un objet JSON valide",
@@ -2533,6 +2701,9 @@
     "Payment page opened": "Page de paiement ouverte",
     "Payment request failed": "Requête de paiement échouée",
     "Payment return URL": "URL de retour de paiement",
+    "Peak": "Pic",
+    "Peak throughput": "Débit de pointe",
+    "Penalises repetition of frequent tokens": "Pénalise la répétition des jetons fréquents",
     "Pending": "En attente",
     "per": "par",
     "Per 1K tokens": "Par 1K tokens",
@@ -2542,13 +2713,18 @@
     "Per Request": "Par demande",
     "Per-call": "Par appel",
     "Per-feature metered windows split by model or capability.": "Fenêtres mesurées par fonction, réparties par modèle ou capacité.",
+    "Per-group performance": "Performance par groupe",
     "Per-request (fixed price)": "Par requête (prix fixe)",
     "Per-token": "Par jeton",
     "Per-token (ratio based)": "Par jeton (basé sur un ratio)",
+    "Per-token logit bias map": "Carte de biais des logits par jeton",
     "Percentage:": "Pourcentage :",
     "Performance": "Performances",
+    "Performance data is not yet available for this model.": "Aucune donnée de performance n'est encore disponible pour ce modèle.",
+    "Performance metrics shown here are simulated for preview purposes and will be replaced with live observability data once the backend integration is complete.": "Les indicateurs de performance présentés ici sont simulés à des fins de prévisualisation et seront remplacés par des données d'observabilité réelles une fois l'intégration du backend terminée.",
     "Performance Monitor": "Moniteur de performances",
     "Performance Settings": "Paramètres de performances",
+    "Period": "Période",
     "Periodically check for upstream model changes": "Vérifier périodiquement les changements de modèles en amont",
     "Periodically send ping frames to keep streaming connections active.": "Envoyer périodiquement des trames ping pour maintenir les connexions de streaming actives.",
     "Permanently delete your account and all data": "Supprimer définitivement votre compte et toutes les données",
@@ -2652,6 +2828,14 @@
     "Preset recharge amounts displayed to users": "Montants de recharge prédéfinis affichés aux utilisateurs",
     "Preset Template": "Modèle prédéfini",
     "Preset templates": "Modèles prédéfinis",
+    "preset.default": "Par défaut",
+    "preset.forest-whisper": "Murmure de la forêt",
+    "preset.lake-view": "Vue sur le lac",
+    "preset.lavender-dream": "Rêve de lavande",
+    "preset.ocean-breeze": "Brise océane",
+    "preset.rose-garden": "Roseraie",
+    "preset.sunset-glow": "Lueur du couchant",
+    "preset.underground": "Souterrain",
     "Press Enter or comma to add tags": "Appuyez sur Entrée ou sur la virgule pour ajouter des tags",
     "Press Enter to use \"{{value}}\"": "Appuyez sur Entrée pour utiliser « {{value}} »",
     "Prevent server-side request forgery attacks": "Prévenir les attaques de falsification de requêtes côté serveur",
@@ -2660,7 +2844,6 @@
     "Previous": "Précédent",
     "Previous branch": "Branche précédente",
     "Previous page": "Page précédente",
-    "Base Price": "Prix de base",
     "Price": "Prix",
     "Price ($/1K calls)": "Prix ($/1K appels)",
     "Price (local currency / USD)": "Prix (devise locale / USD)",
@@ -2698,10 +2881,12 @@
     "Product ID": "ID du produit",
     "Product ID is required": "L'ID de produit est requis",
     "Product Name": "Nom du produit",
+    "Productivity": "Productivité",
     "Products": "Produits",
     "Professional team providing 24/7 technical support": "Équipe professionnelle offrant un support technique 24h/24 et 7j/7",
     "Profile": "Profil",
     "Profile updated successfully": "Profil mis à jour avec succès",
+    "Programming": "Programmation",
     "Progress": "Progression",
     "Project": "Élément",
     "Promote": "Promouvoir",
@@ -2709,9 +2894,11 @@
     "Prompt": "Invite",
     "Prompt (EN)": "Invite (EN)",
     "Prompt cache ratio": "Ratio de cache d'invite",
+    "Prompt caching": "Cache d'invites",
     "Prompt Caching": "Mise en cache des invites",
     "Prompt Details": "Détails de l'invite",
     "Prompt price ($/1M tokens)": "Prix du prompt ($/1M de jetons)",
+    "Proprietary": "Propriétaire",
     "Protect login and registration with Cloudflare Turnstile": "Protéger la connexion et l'inscription avec Cloudflare Turnstile",
     "Provide a JSON object where each key maps to an endpoint definition.": "Fournissez un objet JSON où chaque clé correspond à une définition de point de terminaison.",
     "Provide a valid URL starting with http:// or https://": "Fournissez une URL valide commençant par http:// ou https://",
@@ -2720,6 +2907,7 @@
     "Provide per-category safety overrides as JSON. Use `default` for fallback values.": "Fournir des remplacements de sécurité par catégorie au format JSON. Utilisez `default` pour les valeurs de secours.",
     "Provide per-model header overrides as JSON. Useful for enabling beta features such as expanded context windows.": "Fournir des remplacements d'en-tête par modèle au format JSON. Utile pour activer des fonctionnalités bêta telles que les fenêtres de contexte étendues.",
     "Provider": "Fournisseur",
+    "Provider & data privacy": "Fournisseur & confidentialité",
     "Provider created successfully": "Fournisseur créé avec succès",
     "Provider deleted successfully": "Fournisseur supprimé avec succès",
     "Provider Name": "Nom du fournisseur",
@@ -2768,11 +2956,15 @@
     "Quota Types": "Types de quotas",
     "Quota Warning Threshold": "Seuil d'avertissement de quota",
     "Quota:": "Quota :",
+    "Radius": "Rayon",
     "Random": "Aléatoire",
     "Randomly select a key from the pool for each request": "Sélectionner aléatoirement une clé du pool pour chaque requête",
+    "Ranking data is currently simulated for preview purposes and will be replaced with live analytics once the backend integration ships.": "Les données de classement sont actuellement simulées à des fins d'aperçu et seront remplacées par des analyses en direct une fois l'intégration backend livrée.",
+    "Rankings": "Classements",
     "Rate Limit Windows": "Fenêtres de limitation",
     "Rate Limited": "Limitation de débit",
     "Rate Limiting": "Limitation du débit",
+    "Rate limits": "Limites de débit",
     "Ratio": "Ratio",
     "Ratio applied to audio completions for streaming models.": "Ratio appliqué aux complétions audio pour les modèles de streaming.",
     "Ratio applied to audio inputs where supported by the upstream model.": "Ratio appliqué aux entrées audio lorsque pris en charge par le modèle amont.",
@@ -2795,6 +2987,8 @@
     "Reasoning Effort": "Effort de raisonnement",
     "Receive Upstream Model Update Notifications": "Recevoir les notifications de mise à jour des modèles en amont",
     "Received": "Reçu",
+    "Recently launched models": "Modèles récemment lancés",
+    "Recently launched models gaining traction": "Modèles récemment publiés et en forte progression",
     "Recharge": "Recharger",
     "Recharge Amount": "Montant de la recharge",
     "Recharge Amount (USD)": "Montant de la recharge (USD)",
@@ -2848,6 +3042,7 @@
     "Registry username": "Nom d'utilisateur du registre",
     "Reject Reason": "Raison du rejet",
     "Release details": "Détails de la version",
+    "Released": "Sorti",
     "Relying Party Display Name": "Nom d'affichage de la partie de confiance",
     "Relying Party ID": "ID de la partie de confiance",
     "Remaining": "Restant",
@@ -2913,6 +3108,8 @@
     "Request rule pricing": "Règles de tarification de requête",
     "Request timed out, please refresh and restart GitHub login": "Délai dépassé, veuillez actualiser la page puis relancer la connexion GitHub",
     "Request-based": "Selon la requête",
+    "Requests (24h)": "Requêtes (24 h)",
+    "Requests / 24h": "Requêtes / 24 h",
     "Requests per minute": "Requêtes par minute",
     "requests served": "requêtes traitées",
     "Requests will be forwarded to this worker. Trailing slashes are removed automatically.": "Les requêtes seront transmises à ce worker. Les barres obliques finales sont automatiquement supprimées.",
@@ -2920,12 +3117,14 @@
     "Require email verification for new accounts": "Exiger la vérification de l'e-mail pour les nouveaux comptes",
     "Require job success before follow-up actions": "Exiger le succès de la tâche avant les actions de suivi",
     "Require login to view models": "Exiger la connexion pour voir les modèles",
+    "required": "requis",
     "Required": "Requis",
     "Required events:": "Événements requis :",
     "Required provider, authentication, model, and group settings": "Paramètres requis de fournisseur, authentification, modèles et groupes",
     "Required to expose Midjourney-style image generation to end users.": "Requis pour exposer la génération d'images style Midjourney aux utilisateurs finaux.",
     "Rerank": "Reclasser",
     "Reroll": "Relancer",
+    "Research, analysis, scientific reasoning": "Recherche, analyse, raisonnement scientifique",
     "Resend ({{seconds}}s)": "Renvoyer ({{seconds}}s)",
     "Reset": "Réinitialiser",
     "Reset 2FA": "Réinitialiser la 2FA",
@@ -2961,8 +3160,11 @@
     "Retry Times": "Nombre de tentatives",
     "Return a custom error immediately": "Retourner immédiatement une erreur personnalisée",
     "Return Custom Error": "Retourner une erreur personnalisée",
+    "Return data conforming to a JSON schema": "Renvoyer des données conformes à un schéma JSON",
     "Return Error": "Retourner l'erreur",
+    "Return per-token log probabilities": "Retourner les log-probabilités par jeton",
     "Return to dashboard": "Retour au tableau de bord",
+    "Return vector embeddings for inputs": "Renvoyer des embeddings vectoriels pour les entrées",
     "Reveal API key": "Afficher la clé API",
     "Reveal key": "Révéler la clé",
     "Revenue": "Revenu",
@@ -2972,8 +3174,11 @@
     "Review your purchase details before proceeding.": "Vérifiez les détails de votre achat avant de continuer.",
     "Rewards will be added directly to your balance": "Les récompenses seront ajoutées directement à votre solde",
     "Rewrite callback URLs to the local server": "Réécrire les URLs de callback vers le serveur local",
+    "Right to Left": "De droite à gauche",
     "Role": "Rôle",
+    "Roleplay": "Roleplay",
     "Root": "Racine",
+    "Rose Garden": "Jardin de roses",
     "Route": "Route",
     "Route Description": "Description de la route",
     "Route is required": "La route est requise",
@@ -2981,6 +3186,7 @@
     "Routing Strategy": "Stratégie de routage",
     "Rows per page": "Lignes par page",
     "RPM": "RPM",
+    "RPM = requests per minute, TPM = tokens per minute, RPD = requests per day. Limits apply per token group.": "RPM = requêtes/minute, TPM = jetons/minute, RPD = requêtes/jour. Les limites s'appliquent par groupe de jetons.",
     "RSA Private Key (Production)": "Clé privée RSA (Production)",
     "RSA Private Key (Sandbox)": "Clé privée RSA (Sandbox)",
     "Rule": "Règle",
@@ -3004,6 +3210,7 @@
     "s": "s",
     "Safety Settings": "Paramètres de sécurité",
     "Same as Local": "Identique au local",
+    "Sampling temperature; lower is more deterministic": "Température d'échantillonnage ; plus c'est bas, plus c'est déterministe",
     "Sandbox mode": "Mode sandbox",
     "Save": "Enregistrer",
     "Save all settings": "Enregistrer tous les paramètres",
@@ -3048,6 +3255,7 @@
     "Scenario Templates": "Modèles de scénario",
     "Scheduled channel tests": "Tests de canaux planifiés",
     "scheduling controls": "contrôles d'ordonnancement",
+    "Science": "Science",
     "Scope": "Portée",
     "Scopes": "Portées",
     "Search": "Rechercher",
@@ -3072,6 +3280,7 @@
     "Search products...": "Rechercher des produits...",
     "Search rules...": "Rechercher des règles…",
     "Search tags...": "Rechercher des tags...",
+    "Search the public web at inference time": "Rechercher sur le web public lors de l'inférence",
     "Search vendors...": "Rechercher des fournisseurs...",
     "Search...": "Rechercher...",
     "seconds": "secondes",
@@ -3099,7 +3308,11 @@
     "Select an operation mode and enter the amount": "Sélectionnez un mode d'opération et entrez le montant",
     "Select announcement type": "Sélectionner le type d'annonce",
     "Select at least one field to overwrite.": "Sélectionnez au moins un champ à écraser.",
+    "Select border radius": "Sélectionner le rayon de bordure",
     "Select channel type": "Sélectionner le type de canal",
+    "Select color preset": "Sélectionner un préréglage de couleur",
+    "Select content width": "Sélectionner la largeur du contenu",
+    "Select corner radius": "Sélectionner le rayon des coins",
     "Select currency": "Sélectionner la devise",
     "Select date": "Sélectionner la date",
     "Select default chart": "Sélectionner le graphique par défaut",
@@ -3109,10 +3322,11 @@
     "Select from presets or type custom identifier.": "Sélectionner parmi les préréglages ou saisir un identifiant personnalisé.",
     "Select granularity": "Sélectionner la granularité",
     "Select groups (leave empty to keep current)": "Sélectionner les groupes (laisser vide pour conserver les groupes actuels)",
+    "Select interface density": "Sélectionner la densité de l'interface",
     "Select items...": "Sélectionner des éléments...",
     "Select key format": "Sélectionner le format de clé",
-    "Select Language": "Sélectionner la langue",
     "Select language": "Sélectionner une langue",
+    "Select Language": "Sélectionner la langue",
     "Select layout style": "Sélectionner le style de mise en page",
     "Select locations": "Sélectionner des emplacements",
     "Select Model": "Sélectionner le modèle",
@@ -3140,6 +3354,7 @@
     "Select the API endpoint region": "Sélectionner la région du point de terminaison API",
     "Select the fields you want to overwrite with upstream data. Unselected fields keep their local values.": "Sélectionnez les champs que vous souhaitez écraser avec les données en amont. Les champs non sélectionnés conservent leurs valeurs locales.",
     "Select theme preference": "Sélectionner la préférence de thème",
+    "Select theme preset": "Sélectionner un préréglage de thème",
     "Select time granularity": "Sélectionner la granularité temporelle",
     "Select vendor": "Sélectionner le fournisseur",
     "Selectable groups": "Groupes sélectionnables",
@@ -3176,9 +3391,9 @@
     "Set quota amount and limits": "Définir le quota et les limites",
     "Set Request Header": "Définir un en-tête de requête",
     "Set runtime request header: override entire value, or manipulate comma-separated tokens": "Définir l'en-tête de requête : remplacer la valeur ou manipuler les tokens séparés par des virgules",
-    "Set the language used across the interface": "Définir la langue utilisée dans l'interface",
     "Set Tag": "Définir un tag",
     "Set tag for selected channels": "Définir un tag pour les canaux sélectionnés",
+    "Set the language used across the interface": "Définir la langue utilisée dans l'interface",
     "Set the user's role (cannot be Root)": "Définir le rôle de l'utilisateur (ne peut pas être Root)",
     "Setting saved": "Paramètre sauvegardé",
     "Setting up 2FA...": "Configuration de la 2FA...",
@@ -3188,6 +3403,7 @@
     "Settings updated successfully": "Paramètres mis à jour avec succès",
     "Setup Instructions": "Instructions de configuration",
     "Setup Two-Factor Authentication": "Configurer l'authentification à deux facteurs",
+    "Share": "Part",
     "Share your link and earn rewards": "Partagez votre lien et gagnez des récompenses",
     "Shared configuration for all payment gateways": "Configuration partagée pour toutes les passerelles de paiement",
     "Shorten": "Raccourcir",
@@ -3214,6 +3430,7 @@
     "Signed in via WeChat": "Connecté via WeChat",
     "Signed in with Passkey": "Connecté avec Passkey",
     "Signed out": "Déconnecté",
+    "Significant outages detected": "Pannes significatives détectées",
     "Signing you in with {{provider}}": "Connexion avec {{provider}}",
     "SiliconFlow": "SiliconFlow",
     "Simple": "Simple",
@@ -3271,6 +3488,7 @@
     "Status:": "Statut :",
     "Stay": "Rester",
     "Stay tuned though!": "Restez à l'écoute cependant !",
+    "Steer behaviour with a system instruction": "Orienter le comportement via une instruction système",
     "Step": "Étape",
     "Stop": "Arrêter",
     "Stop Retry": "Arrêter la relance",
@@ -3281,6 +3499,9 @@
     "Stream": "Flux",
     "Stream Mode": "Mode streaming",
     "Stream Status": "Statut du flux",
+    "Stream tokens incrementally as they are generated": "Diffuser les jetons au fur et à mesure de leur génération",
+    "Stream tokens via Server-Sent Events": "Diffuser les jetons via Server-Sent Events",
+    "Streaming": "Streaming",
     "String Replace": "Remplacement de texte",
     "Stripe": "Stripe",
     "Stripe API key (leave blank unless updating)": "Clé API Stripe (laisser vide sauf en cas de mise à jour)",
@@ -3288,6 +3509,7 @@
     "Stripe Gateway": "Passerelle Stripe",
     "Stripe product price ID": "ID de prix du produit Stripe",
     "Stripe/Creem requires creating products on the third-party platform and entering the ID": "Stripe/Creem nécessite de créer des produits sur la plateforme tierce et d'entrer l'ID",
+    "Structured output": "Sortie structurée",
     "Submit": "Soumettre",
     "Submit directly": "Soumettre directement",
     "Submit Result": "Soumettre le résultat",
@@ -3315,13 +3537,17 @@
     "Suffix": "Suffixe",
     "Suffix Match": "Correspondance de suffixe",
     "SunoAPI": "SunoAPI",
+    "Sunset Glow": "Lueur du couchant",
     "Super Admin": "Super Administrateur",
     "Support for high concurrency with automatic load balancing": "Prise en charge de la haute concurrence avec équilibrage de charge automatique",
     "Supported Imagine Models": "Modèles Imagine pris en charge",
+    "Supported modalities": "Modalités prises en charge",
+    "Supported parameters": "Paramètres pris en charge",
     "Supported variables": "Variables supportées",
     "Supports `-thinking`, `-thinking-": "Prend en charge `-thinking`, `-thinking-",
     "Supports HTML markup or iframe embedding. Enter HTML code directly, or provide a complete URL to automatically embed it as an iframe.": "Prend en charge le balisage HTML ou l'intégration d'iframe. Entrez le code HTML directement, ou fournissez une URL complète pour l'intégrer automatiquement en tant qu'iframe.",
     "Supports PNG, JPG, SVG, or WebP. Recommended size: 128×128 or smaller.": "Prend en charge PNG, JPG, SVG ou WebP. Taille recommandée : 128×128 ou moins.",
+    "Sustained tokens per second": "Jetons par seconde soutenus",
     "Swap Face": "Échanger le visage",
     "Switch affinity on success": "Changer l'affinité en cas de succès",
     "Switch between the new frontend and the classic frontend. Changes take effect after page reload.": "Basculer entre le nouveau frontend et le frontend classique. Les modifications prennent effet après le rechargement de la page.",
@@ -3341,6 +3567,7 @@
     "System Announcements": "Annonces système",
     "System Behavior": "Comportement du système",
     "System data statistics": "Statistiques des données système",
+    "System default": "Système par défaut",
     "System Information": "Informations système",
     "System initialized successfully! Redirecting…": "Système initialisé avec succès ! Redirection…",
     "System logo": "Logo du système",
@@ -3351,6 +3578,7 @@
     "System name is required": "Le nom du système est requis",
     "System Notice": "Avis système",
     "System Performance Monitoring": "Surveillance des performances système",
+    "System prompt": "Invite système",
     "System Prompt": "Invite système",
     "System Prompt Concatenation": "Concaténation des invites système",
     "System Prompt Override": "Remplacement du prompt système",
@@ -3402,7 +3630,11 @@
     "Test Model": "Tester le modèle",
     "Testing all enabled channels started. Please refresh to see results.": "Test de tous les canaux activés démarré. Veuillez actualiser pour voir les résultats.",
     "Testing...": "Test en cours...",
+    "Text": "Texte",
+    "Text description of the desired image": "Description textuelle de l'image souhaitée",
+    "Text description of the desired video": "Description textuelle de la vidéo souhaitée",
     "Text Input": "Entrée texte",
+    "Text or array of texts to embed": "Texte ou tableau de textes à vectoriser",
     "Text Output": "Sortie texte",
     "Text to Video": "Texte vers vidéo",
     "The administrator account is already initialized. You can keep your existing credentials and continue to the next step.": "Le compte administrateur est déjà initialisé. Vous pouvez conserver vos identifiants existants et passer à l'étape suivante.",
@@ -3429,6 +3661,7 @@
     "The unique name for this vendor": "Le nom unique de ce fournisseur",
     "The URL for this chat client.": "L'URL de ce client de discussion.",
     "Theme": "Thème",
+    "Theme preset": "Préréglage du thème",
     "Theme Settings": "Paramètres du thème",
     "There are both add and remove models pending, but you only selected one type. Confirm submitting only the selected items?": "Il y a à la fois des modèles à ajouter et à supprimer, mais vous n'avez sélectionné qu'un seul type. Confirmer l'envoi uniquement des éléments sélectionnés ?",
     "These models are still in your selection but were not returned by the upstream listing. Entries that are only model_mapping source aliases are omitted. Toggle to adjust before saving.": "Ces modèles restent encore sélectionnés mais ne figurent pas dans la liste renvoyée par l'amont ; les noms qui sont uniquement des clés sources de model_mapping sont exclus. Modifiez la sélection avant d'enregistrer.",
@@ -3472,7 +3705,11 @@
     "This will permanently delete user": "Cela supprimera définitivement l'utilisateur",
     "This will permanently remove all log entries created before {{date}}.": "Cela supprimera définitivement toutes les entrées de journal créées avant le {{date}}.",
     "This will permanently remove log entries before the selected timestamp.": "Cela supprimera définitivement les entrées de journal antérieures à l'horodatage sélectionné.",
+    "This year": "Cette année",
     "Three steps to get started": "Trois étapes pour commencer",
+    "Throughput": "Débit",
+    "Throughput by group": "Débit par groupe",
+    "Throughput trend": "Tendance du débit",
     "Tier": "Palier",
     "Tier name": "Nom du palier",
     "Tiered": "Par paliers",
@@ -3514,21 +3751,41 @@
     "Token Name": "Nom du jeton",
     "Token obtained from your Gotify application": "Jeton obtenu depuis votre application Gotify",
     "Token regenerated and copied to clipboard": "Jeton régénéré et copié dans le presse-papiers",
+    "Token share by model author across the last 24 hours": "Part des tokens par auteur de modèle sur les dernières 24 heures",
+    "Token share by model author across the past few weeks": "Part des tokens par auteur de modèle au cours des dernières semaines",
+    "Token share by model author across the past month": "Part des tokens par auteur de modèle au cours du dernier mois",
+    "Token share by model author across the past year": "Part des tokens par auteur de modèle au cours de la dernière année",
+    "Token share by model author since launch": "Part des tokens par auteur de modèle depuis le lancement",
     "Token unit": "Unité de tokens",
+    "Token usage by model since launch": "Utilisation des tokens par modèle depuis le lancement",
     "Token-based": "Basé sur les jetons",
+    "Tokenizer": "Tokeniseur",
     "tokens": "jetons",
     "Tokens": "Jeton",
+    "tokens / mo": "jetons / mois",
+    "Tokens by category": "Jetons par catégorie",
     "Tokens Only": "Jetons uniquement",
     "Tokens per minute": "Jetons par minute",
+    "Tokens since launch": "Jetons depuis le lancement",
     "Tokens-only mode will show raw quota values regardless of this toggle.": "Le mode Tokens uniquement affichera les valeurs de quota brutes indépendamment de ce basculement.",
     "Too many files. Some were not added.": "Trop de fichiers. Certains n'ont pas été ajoutés.",
+    "Tool / function declarations the model may call": "Déclarations d'outils / fonctions que le modèle peut appeler",
     "Tool identifier": "Identifiant d’outil",
     "Tool price settings": "Paramètres de prix des outils",
     "Tool prices": "Prix des outils",
+    "Tool-choice policy or specific tool name": "Stratégie de choix d'outil ou nom d'outil spécifique",
+    "Tools": "Outils",
     "Top {{count}}": "Top {{count}}",
+    "Top app": "Application principale",
+    "Top apps": "Top applications",
+    "Top Apps": "Meilleures applications",
+    "Top integrations using this model": "Principales intégrations utilisant ce modèle",
+    "Top model": "Modèle principal",
+    "Top models": "Top modèles",
     "Top Models": "Top Modèles",
     "Top up balance and view billing history.": "Recharger le solde et consulter l'historique de facturation.",
     "Top Users": "Top utilisateurs",
+    "Top vendors": "Top fournisseurs",
     "Top-up": "Recharge",
     "Top-up amount options": "Options de montant de recharge",
     "Top-up Audit Info": "Audits de rechargement",
@@ -3552,13 +3809,16 @@
     "Total Quota": "Quota total",
     "Total requests allowed per period. 0 = unlimited.": "Total des requêtes autorisées par période. 0 = illimité.",
     "Total requests made": "Requêtes totales effectuées",
+    "Total tokens": "Jetons totaux",
     "Total Tokens": "Jetons totaux",
     "Total Usage": "Utilisation totale",
     "Total:": "Total :",
     "TPM": "TPM",
     "Track per-request consumption to power usage analytics. Keeping this on increases database writes.": "Suivre la consommation par requête pour l'analyse de l'utilisation. Garder ceci activé augmente les écritures en base de données.",
     "Track usage, costs and performance with real-time analytics": "Suivez l'utilisation, les coûts et les performances avec des analyses en temps réel",
+    "Tracked apps": "Applications suivies",
     "Tracks current account base limits and additional metered usage on Codex upstream.": "Affiche les limites de base et l’utilisation supplémentaire (metered) du compte auprès de Codex en amont.",
+    "Trading insights, accounting, advisory": "Analyses de marché, comptabilité, conseil",
     "Transfer": "Transférer",
     "Transfer Amount": "Montant du transfert",
     "Transfer failed": "Transfert échoué",
@@ -3566,18 +3826,28 @@
     "Transfer successful": "Transfert réussi",
     "Transfer to Balance": "Transférer vers le solde",
     "Translate `-thinking` suffixes into Anthropic native thinking models while keeping pricing predictable.": "Traduire les suffixes `-thinking` en modèles de réflexion natifs Anthropic tout en gardant une tarification prévisible.",
+    "Translation": "Traduction",
     "Transparent Billing": "Facturation transparente",
+    "Trend": "Tendance",
+    "Trending down": "En baisse",
+    "Trending up": "En hausse",
     "Trim leading/trailing whitespace": "Supprimer les espaces en début/fin",
     "Trim Prefix": "Supprimer le préfixe",
     "Trim Space": "Supprimer les espaces",
     "Trim Suffix": "Supprimer le suffixe",
+    "Truncate embeddings to this many dimensions": "Tronquer les vecteurs à autant de dimensions",
     "Trusted": "Fiable",
     "Try adjusting your search to locate a missing model.": "Essayez d'ajuster votre recherche pour localiser un modèle manquant.",
+    "TTFT P50": "TTFT P50",
+    "TTFT P95": "TTFT P95",
+    "TTFT P99": "TTFT P99",
+    "TTFT percentiles, throughput, and 30-day uptime by group": "Percentiles TTFT, débit et disponibilité sur 30 jours par groupe",
     "TTL": "TTL",
     "TTL (seconds, 0 = default)": "TTL (secondes, 0 = par défaut)",
     "TTL (seconds)": "TTL (secondes)",
     "Tune selection priority, testing, status handling, and request overrides.": "Ajustez la priorité de sélection, les tests, la gestion des statuts et les surcharges de requête.",
     "Turnstile is enabled but site key is empty.": "Turnstile est activé mais la clé du site est vide.",
+    "Tutoring, learning aids, assessment": "Tutorat, aides à l'apprentissage, évaluation",
     "Two-factor Authentication": "Authentification à deux facteurs",
     "Two-Factor Authentication": "Authentification à deux facteurs",
     "Two-factor authentication disabled": "Authentification à deux facteurs désactivée",
@@ -3602,6 +3872,8 @@
     "Unbind": "Dissocier",
     "Unbind failed": "Échec de la dissociation",
     "Unbound {{provider}}": "{{provider}} dissocié",
+    "Underground": "Underground",
+    "Understand image inputs alongside text": "Comprendre des entrées image en complément du texte",
     "Unexpected release payload": "Format de version inattendu",
     "Unified API Gateway for": "Passerelle API unifiée pour",
     "Unique identifier for this group.": "Identifiant unique pour ce groupe.",
@@ -3618,6 +3890,7 @@
     "Untitled": "Sans titre",
     "Untrusted upstream data:": "Données amont non fiables :",
     "Unused": "Inutilisé",
+    "Up to 4 strings that stop generation": "Jusqu'à 4 chaînes qui arrêtent la génération",
     "Update": "Mettre à jour",
     "Update All Balances": "Mettre à jour tous les soldes",
     "Update API Key": "Mettre à jour la clé API",
@@ -3642,6 +3915,7 @@
     "Update your password for account:": "Mettez à jour votre mot de passe pour le compte :",
     "Update your password to keep your account secure": "Mettez à jour votre mot de passe pour sécuriser votre compte",
     "Updated": "Mis à jour",
+    "Updated daily": "Mis à jour quotidiennement",
     "Updated successfully": "Mise à jour réussie",
     "Updating all channel balances. This may take a while. Please refresh to see results.": "Mise à jour de tous les soldes des canaux. Cela peut prendre un certain temps. Veuillez actualiser pour voir les résultats.",
     "Upgrade Group": "Groupe de mise à niveau",
@@ -3666,6 +3940,8 @@
     "Upstream Updates": "Mises à jour en amont",
     "uptime": "disponibilité",
     "Uptime": "Temps de fonctionnement",
+    "Uptime (30d)": "Disponibilité (30 j)",
+    "Uptime (last 30 days)": "Disponibilité (30 derniers jours)",
     "Uptime Kuma": "Uptime Kuma",
     "Uptime Kuma groups saved successfully": "Groupes Uptime Kuma sauvegardés avec succès",
     "Uptime Kuma URL": "URL Uptime Kuma",
@@ -3684,6 +3960,7 @@
     "Use authenticator code": "Utiliser le code de l'authentificateur",
     "Use backup code": "Utiliser un code de secours",
     "Use disk cache when request body exceeds this size": "Utiliser le cache disque quand le corps de requête dépasse cette taille",
+    "Use external tools to extend capabilities": "Utiliser des outils externes pour étendre les capacités",
     "Use our unified OpenAI-compatible endpoint in your applications": "Utilisez notre point de terminaison unifié compatible OpenAI dans vos applications",
     "Use Passkey to sign in without entering your password.": "Utilisez une clé d'accès (Passkey) pour vous connecter sans saisir votre mot de passe.",
     "Use secure connection when sending emails": "Utiliser une connexion sécurisée lors de l'envoi d'e-mails",
@@ -3749,6 +4026,7 @@
     "Vendor deleted successfully": "Fournisseur supprimé avec succès",
     "Vendor Name *": "Nom du fournisseur *",
     "Vendor:": "Fournisseur :",
+    "Vendors ranked by aggregated token volume": "Fournisseurs classés par volume de tokens agrégé",
     "Verification code": "Code de vérification",
     "Verification Code": "Code de vérification",
     "Verification code must be 6 digits": "Le code de vérification doit comporter 6 chiffres",
@@ -3767,6 +4045,7 @@
     "Vertex AI does not support functionResponse.id. Enable this to remove the field automatically.": "Vertex AI ne prend pas en charge functionResponse.id. Activez ceci pour supprimer automatiquement ce champ.",
     "Vertex AI Key Format": "Format de clé Vertex AI",
     "Video": "Vidéo",
+    "Video length in seconds": "Durée de la vidéo en secondes",
     "Video Remix": "Remix vidéo",
     "Vidu": "Vidu",
     "View": "Afficher",
@@ -3796,6 +4075,8 @@
     "Violation Marker": "Marqueur de violation",
     "vip": "vip",
     "VIP users with premium access": "Utilisateurs VIP avec accès premium",
+    "Vision": "Vision",
+    "Vision, image / video, document chat": "Vision, image / vidéo, conversation sur document",
     "Visit Settings → General and adjust quota options...": "Visitez Paramètres → Général et ajustez les options de quota...",
     "Visitors must authenticate before accessing the pricing directory.": "Les visiteurs doivent s'authentifier avant d'accéder au répertoire des prix.",
     "Visual": "Visuel",
@@ -3806,6 +4087,7 @@
     "Visual Mode": "Mode Visuel",
     "Visual Parameter Override": "Remplacement visuel des paramètres",
     "VolcEngine": "VolcEngine",
+    "vs. previous": "vs. précédent",
     "Waffo Pancake Payment Gateway": "Passerelle de paiement Waffo Pancake",
     "Waffo Payment": "Paiement Waffo",
     "Waffo Payment Gateway": "Passerelle de paiement Waffo",
@@ -3826,6 +4108,7 @@
     "We could not load the setup status.": "Nous n'avons pas pu charger l'état de la configuration.",
     "We will prompt your device to confirm using biometrics or your hardware key.": "Nous allons demander à votre appareil de confirmer en utilisant la biométrie ou votre clé matérielle.",
     "We'll be back online shortly.": "Nous serons de retour en ligne sous peu.",
+    "Web search": "Recherche web",
     "Web Search": "Recherche web",
     "Webhook Configuration:": "Configuration du Webhook :",
     "Webhook public key (production)": "Clé publique Webhook (production)",
@@ -3845,6 +4128,9 @@
     "Week": "Semaine",
     "Weekday": "Jour de la semaine",
     "Weekly": "Hebdomadaire",
+    "Weekly token usage by model across the past few weeks": "Utilisation hebdomadaire des tokens par modèle au cours des dernières semaines",
+    "Weekly token usage by model across the past year": "Utilisation hebdomadaire de tokens par modèle sur l’année écoulée",
+    "Weekly token usage by model since launch": "Utilisation hebdomadaire de tokens par modèle depuis le lancement",
     "Weekly Window": "Fenêtre hebdomadaire",
     "Weight": "Poids",
     "Welcome back!": "Bienvenue de retour !",
@@ -3869,7 +4155,9 @@
     "Whitelist (Only allow listed IPs)": "Liste blanche (Autoriser uniquement les adresses IP listées)",
     "whsec_xxx": "whsec_xxx",
     "Window:": "Fenêtre :",
+    "Wire encoding for the embedding vectors": "Encodage filaire pour les vecteurs",
     "with conflicts": "avec des conflits",
+    "with the API key from your token settings.": "par la clé API de votre page de jetons.",
     "Without additional conditions, only the type above is used for pruning.": "Sans conditions supplémentaires, seul le type ci-dessus est utilisé pour le nettoyage.",
     "Worker Access Key": "Clé d'accès du Worker",
     "Worker Proxy": "Proxy Worker",
@@ -3880,6 +4168,7 @@
     "xAI": "xAI",
     "Xinference": "Xinference",
     "Xunfei": "Xunfei",
+    "Year": "Année",
     "years": "ans",
     "You are about to delete {{count}} API key(s).": "Vous êtes sur le point de supprimer {{count}} clé(s) API.",
     "You are running the latest version ({{version}}).": "Vous utilisez la dernière version ({{version}}).",
@@ -3907,6 +4196,7 @@
     "Your Telegram Bot Token": "Votre Jeton de Bot Telegram",
     "Your Turnstile secret key": "Votre clé secrète Turnstile",
     "Your Turnstile site key": "Votre clé de site Turnstile",
+    "Zero retention": "Aucune rétention",
     "Zhipu": "Zhipu",
     "Zhipu V4": "Zhipu V4",
     "Zoom": "Zoom"
diff --git a/web/default/src/i18n/locales/ja.json b/web/default/src/i18n/locales/ja.json
index b62d4dabe71..46f309e172b 100644
--- a/web/default/src/i18n/locales/ja.json
+++ b/web/default/src/i18n/locales/ja.json
@@ -28,16 +28,22 @@
     "{{count}} days remaining": "残り {{count}} 日",
     "{{count}} disabled channel(s) deleted": "{{count}} 個の無効チャネルを削除しました",
     "{{count}} hours ago": "{{count}} 時間前",
+    "{{count}} incidents": "{{count}} 件のインシデント",
+    "{{count}} incidents in the last 30 days": "過去 30 日間で {{count}} 件のインシデント",
     "{{count}} IP(s)": "{{count}} IP",
     "{{count}} log entries removed.": "{{count}} 件のログエントリを削除しました。",
     "{{count}} minutes ago": "{{count}} 分前",
     "{{count}} model(s)": "{{count}} モデル",
+    "{{count}} models": "{{count}} モデル",
     "{{count}} months ago": "{{count}} ヶ月前",
     "{{count}} override": "{{count}} 個のオーバーライド",
     "{{count}} tiers": "{{count}} 段階",
+    "{{count}} vendors": "{{count}} ベンダー",
     "{{count}} weeks ago": "{{count}} 週間前",
     "{{field}} updated to {{value}}": "{{field}} を {{value}} に更新しました",
     "{{field}} updated to {{value}} for tag: {{tag}}": "タグ「{{tag}}」の {{field}} を {{value}} に更新しました",
+    "{{modality}} not supported": "{{modality}} はサポートされていません",
+    "{{modality}} supported": "{{modality}} をサポート",
     "{{n}} model(s) selected": "{{n}} 件のモデルを選択済み",
     "{{value}}ms": "{{value}}ミリ秒",
     "{{value}}s": "{{value}}秒",
@@ -45,9 +51,13 @@
     "@lobehub/icons key name": "@lobehub/icons キー名",
     "/status/": "/status/",
     "/your/endpoint": "/your/endpoint",
+    "#1 App": "#1 アプリ",
+    "#1 by usage": "利用量1位",
+    "#1 Model": "#1 モデル",
     "% off": "% OFF",
     "`, and `-nothinking` suffixes while routing to the correct Gemini variant.": "`, および `-nothinking` サフィックスを、正しい Gemini バリアントにルーティングする際に使用します。",
     "© 2025 Your Company. All rights reserved.": "© 2025 Your Company. 全著作権所有。",
+    "+{{count}} more": "他 {{count}} 件",
     "| Based on": "| に基づく",
     "0 means unlimited": "0は無制限を意味します",
     "1 Day": "1日",
@@ -75,6 +85,7 @@
     "3. Enter your Gotify server URL and token above": "3. 上記にGotifyサーバーのURLとトークンを入力します",
     "30 Days": "30日",
     "30 days ago": "30日前",
+    "30d change": "30日変化",
     "5-Hour Window": "5時間ウィンドウ",
     "50 / page": "50 / ページ",
     "7 Days": "7日",
@@ -97,12 +108,15 @@
     "Account ID *": "アカウントID *",
     "Account Info": "アカウント情報",
     "Account used when authenticating with the SMTP server": "SMTPサーバーで認証する際に使用されるアカウント",
+    "Across all groups": "全グループを通じて",
     "Action confirmation": "操作確認",
     "Actions": "操作",
     "active": "有効",
     "Active": "有効",
+    "Active apps": "アクティブなアプリ",
     "Active Cache Count": "アクティブキャッシュ数",
     "Active Files": "アクティブファイル",
+    "Active models": "アクティブなモデル",
     "active users": "アクティブユーザー",
     "Actual Amount": "実際の金額",
     "Actual Model": "実際のモデル",
@@ -190,12 +204,18 @@
     "Advanced platform configuration.": "高度なプラットフォーム設定。",
     "Advanced Settings": "詳細設定",
     "Advanced text editing": "高度なテキスト編集",
+    "Aesthetic style": "スタイル",
     "After clicking the button, you'll be asked to authorize the bot": "ボタンをクリックすると、ボットの認証を求められます",
     "After disabling, it will no longer be shown to users, but historical orders are not affected. Continue?": "無効化するとユーザーに表示されなくなりますが、過去の注文には影響しません。続行しますか？",
     "After enabling, the plan will be shown to users. Continue?": "有効化するとユーザーに表示されます。続行しますか？",
     "After invalidating, this subscription will be immediately deactivated. Historical records are not affected. Continue?": "無効化するとこのサブスクリプションは即座に停止されます。履歴記録には影響しません。続行しますか？",
     "After scanning, the binding will complete automatically": "スキャン後、バインドは自動的に完了します",
     "Agent ID *": "エージェントID *",
+    "Aggregate tokens delivered across the platform": "プラットフォーム全体で提供された累計トークン",
+    "Aggregate traffic across every category": "全カテゴリの合計トラフィック",
+    "Aggregated across enabled groups": "有効なグループで集計",
+    "Aggregated across the apps below": "下記アプリで集計",
+    "Aggregated traffic by upstream model provider": "上流モデルプロバイダー別の集計トラフィック",
     "Aggregated usage metrics and trend charts.": "集計された使用量メトリクスとトレンドチャート。",
     "aggregates 50+ AI providers behind one unified API. Manage access, track costs, and scale effortlessly.": "50以上のAIプロバイダーを統一APIで集約。アクセス管理、コスト追跡、スケーリングを簡単に。",
     "AGPL v3.0 License": "AGPL v3.0ライセンス",
@@ -209,19 +229,23 @@
     "AK/SK mode: use AccessKey|SecretAccessKey|Region": "AK/SKモード: AccessKey | SecretAccessKey | Regionを使用",
     "Ali": "Ali",
     "All": "すべて",
+    "All categories": "すべてのカテゴリ",
     "All edits are overwrite operations. Leave fields empty to keep current values unchanged.": "すべての編集は上書き操作です。現在の値を変更しないままにするには、フィールドを空のままにしてください。",
     "All files exceed the maximum size.": "すべてのファイルが最大サイズを超えています。",
     "All Groups": "すべてのグループ",
     "All Models": "すべてのモデル",
     "All models in use are properly configured.": "使用中のすべてのモデルが適切に構成されています。",
     "All Must Match (AND)": "すべて一致（AND）",
+    "All requests must include": "すべてのリクエストには",
     "All Status": "すべてのステータス",
     "All Sync Status": "すべての同期状態",
+    "All systems operational": "すべて正常稼働中",
     "All Tags": "すべてのタグ",
     "All Types": "すべてのタイプ",
     "All upstream data is trusted": "すべてのアップストリームデータは信頼されています",
     "All Vendors": "すべてのベンダー",
     "All Your AI Models": "すべてのAIモデル",
+    "All-time": "全期間",
     "Allocated Memory": "割り当て済みメモリ",
     "Allow accountFilter parameter": "accountFilter パラメータを許可",
     "Allow Claude beta query passthrough": "Claude ベータクエリのパススルーを許可",
@@ -279,6 +303,7 @@
     "Answer": "回答",
     "Anthropic": "Anthropic",
     "Any Match (OR)": "いずれか一致（OR）",
+    "API": "API",
     "API Access": "API アクセス",
     "API Addresses": "APIアドレス",
     "API Base URL (Important: Not Chat API) *": "APIベースURL (重要: チャットAPIではありません) *",
@@ -312,6 +337,8 @@
     "API URL": "API URL",
     "API usage records": "API使用記録",
     "API2GPT": "API2GPT",
+    "App": "アプリ",
+    "App rankings shown here are simulated for preview purposes and will be replaced with live usage data once the backend integration is complete.": "ここに表示されているアプリランキングはプレビュー用のシミュレーションデータです。バックエンド連携の完了後、実データに置き換えられます。",
     "Append": "末尾に追加",
     "Append mode: New keys will be added to the end of the existing key list": "追記モード: 新しいキーは既存のキー一覧の末尾に追加されます",
     "Append Template": "テンプレートを追加",
@@ -329,6 +356,10 @@
     "Apply Sync": "同期を適用",
     "Applying...": "適用中...",
     "Approx.": "約",
+    "apps": "アプリ",
+    "Apps": "アプリ",
+    "apps tracked": "個のアプリを追跡",
+    "Apps using the most tokens through new-api": "new-api 経由で最も多くのトークンを利用しているアプリ",
     "are also listed here. Remove them from Models to keep the `/v1/models` response user-friendly and hide vendor-specific names.": "もここにリストされています。`/v1/models` レスポンスをユーザーフレンドリーに保ち、ベンダー固有の名前を隠すために、Models からこれらを削除します。",
     "Are you sure you want to delete": "削除してもよろしいですか",
     "Are you sure you want to delete all auto-disabled keys? This action cannot be undone.": "すべての自動無効化されたキーを削除してもよろしいですか？この操作は元に戻せません。",
@@ -397,6 +428,7 @@
     "Available Models": "利用可能なモデル",
     "Available Rewards": "利用可能な報酬",
     "Average RPM": "平均RPM",
+    "Average tokens per second sustained per group": "グループごとに持続する平均スループット (tokens/秒)",
     "Average TPM": "平均TPM",
     "AWS": "AWS",
     "AWS Bedrock Claude Compat": "AWS Bedrock Claude 互換テンプレート",
@@ -428,6 +460,7 @@
     "Base amount. Actual deduction = base amount × system group rate.": "基本金額。実際の控除 = 基本金額 × システムグループ倍率。",
     "Base Limits": "基本枠",
     "Base multipliers applied when users select specific groups.": "ユーザーが特定のグループを選択したときに適用される基本乗数。",
+    "Base Price": "基本価格",
     "Base rate limit windows for this account.": "このアカウント向けの基本レート制限ウィンドウ。",
     "Base URL": "ベースURL",
     "Base URL of your Uptime Kuma instance": "Uptime KumaインスタンスのベースURL",
@@ -448,6 +481,7 @@
     "Batch processing failed": "一括処理に失敗しました",
     "Batch upstream model updates applied: {{channels}} channels, {{added}} added, {{removed}} removed, {{fails}} failed": "一括上流モデル更新を処理しました：{{channels}} チャネル、{{added}} 個追加、{{removed}} 個削除、{{fails}} 個失敗",
     "Best for single-tenant deployments. Pricing and billing options stay hidden.": "シングルテナント環境に最適です。料金設定や請求オプションは非表示になります。",
+    "Best TTFT": "最良 TTFT",
     "Billing": "請求",
     "Billing currency": "請求通貨",
     "Billing Details": "課金詳細",
@@ -474,6 +508,7 @@
     "Blocked keywords": "ブロックされたキーワード",
     "Blocks messages when sensitive keywords are detected.": "機密性の高いキーワードが検出された場合にメッセージをブロックします。",
     "Body param": "ボディパラメータ",
+    "Border radius": "角丸",
     "Bot Name": "ボット名",
     "Bot Protection": "ボット保護",
     "Bot Token": "ボットトークン",
@@ -485,7 +520,7 @@
     "Broadcast a global banner to users. Markdown is supported.": "ユーザーにグローバルバナーをブロードキャストします。Markdownがサポートされています。",
     "Broadcast short system notices on the dashboard": "ダッシュボードに短いシステム通知をブロードキャストします",
     "Browse and compare": "参照と比較",
-    "Discover curated AI models, compare pricing and capabilities, and choose the right model for every scenario.": "厳選された AI モデルを見つけ、価格と機能を比較し、あらゆるシナリオに適したモデルを選択できます。",
+    "Browse rankings by category": "カテゴリ別にランキングを表示",
     "Budget tokens = max tokens × ratio. Accepts a decimal between 0.002 and 1. Recommended to keep aligned with upstream billing.": "予算トークン = 最大トークン × 比率。0.002から1までの小数を指定できます。アップストリームの請求と一致させることを推奨します。",
     "Budget tokens = max tokens × ratio. Accepts a decimal between 0.1 and 1.": "予算トークン = 最大トークン × 比率。0.1から1までの小数を指定できます。",
     "Budget Tokens Ratio": "予算トークン比率",
@@ -495,6 +530,8 @@
     "Built-in Device": "内蔵デバイス",
     "Built-in: phone fingerprint/face, or Windows Hello; External: USB security key": "内蔵: 電話の指紋/顔認証、またはWindows Hello。外部: USBセキュリティキー",
     "by": "によって",
+    "By category": "カテゴリ別",
+    "By model author": "モデル提供者別",
     "Cache": "キャッシュ",
     "Cache Creation": "キャッシュ作成",
     "Cache Creation (1h)": "キャッシュ作成 (1h)",
@@ -506,6 +543,7 @@
     "Cache mode": "キャッシュモード",
     "Cache ratio": "キャッシュ倍率",
     "Cache Read": "キャッシュ読み取り",
+    "Cache repeated prompt prefixes for cheaper, faster reuse": "繰り返しのプロンプト先頭部分をキャッシュし、低コスト・高速に再利用",
     "Cache write": "キャッシュ書き込み",
     "Cache Write": "キャッシュ書き込み",
     "Cache Write (1h)": "キャッシュ書込 (1h)",
@@ -527,13 +565,16 @@
     "Cancel": "キャンセル",
     "Cancelled": "キャンセル",
     "Cancelled at": "キャンセル日時",
+    "Capabilities": "機能",
     "Capture a reusable bundle of models, tags, or endpoints.": "モデル、タグ、またはエンドポイントの再利用可能なバンドルを保存。",
     "Card view": "カード表示",
+    "Category": "カテゴリ",
     "Category Name": "分類名称",
     "Category name is required": "カテゴリ名は必須です",
     "Category name must be less than 50 characters": "カテゴリ名は50文字以内にしてください",
     "Caution": "注意",
     "CC Switch": "CC 切替",
+    "Centered": "中央揃え",
     "Chain": "チェーン",
     "Change": "変更",
     "Change language": "言語を変更",
@@ -563,6 +604,7 @@
     "channel(s)? This action cannot be undone.": "チャネルを削除しますか？この操作は元に戻せません。",
     "Channels": "チャネル",
     "Channels deleted successfully": "チャンネルが正常に削除されました",
+    "Character chat, storytelling, persona": "キャラクター会話・ストーリーテリング・ペルソナ",
     "Chart Preferences": "チャートの環境設定",
     "Chart Settings": "チャート設定",
     "Chat": "チャット",
@@ -632,6 +674,7 @@
     "Cleared all models": "すべてのモデルをクリアしました",
     "Click \"Create Plan\" to create your first subscription plan": "「プラン作成」をクリックして最初のプランを作成してください",
     "Click \"Generate\" to create a token": "「生成」をクリックしてトークンを作成",
+    "Click any category to drill into its models, apps, and trends": "カテゴリをクリックすると、そのモデル・アプリ・トレンドを掘り下げて確認できます",
     "Click for details": "クリックして詳細を表示",
     "Click save when you're done.": "完了したら「保存」をクリックしてください。",
     "Click save when you&apos;re done.": "完了したら保存をクリックしてください。",
@@ -655,6 +698,9 @@
     "CNY": "CNY",
     "CNY per USD": "1 USD あたりの CNY",
     "Code": "コード",
+    "Code generation, refactoring, autocomplete": "コード生成・リファクタリング・補完",
+    "Code interpreter": "コードインタプリタ",
+    "Code samples": "コードサンプル",
     "Codes copied!": "コードをコピーしました！",
     "Codex": "Codex",
     "Codex Account & Usage": "Codex アカウントと使用量",
@@ -666,7 +712,9 @@
     "Collapse All": "すべて折りたたむ",
     "Color": "カラー",
     "Color is required": "色は必須です",
+    "Color preset": "カラープリセット",
     "Color:": "色:",
+    "Comfortable": "快適",
     "Coming Soon!": "近日公開！",
     "Comma-separated exact model names. Prefix with regex: to ignore by regular expression.": "完全一致のモデル名をカンマ区切りで入力します。regex: で始めると正規表現で除外できます。",
     "Comma-separated list of allowed ports (empty = all ports)": "許可されたポートのカンマ区切りリスト (空欄 = すべてのポート)",
@@ -679,6 +727,13 @@
     "Common ports include 25, 465, and 587": "一般的なポートには 25, 465, 587 が含まれます",
     "Common User": "一般ユーザー",
     "Community driven, self-hosted, and extensible": "コミュニティ主導、セルフホスト可能、拡張可能",
+    "Compact": "コンパクト",
+    "Compare each vendor's token share across the past few weeks": "過去数週間における各ベンダーのトークンシェアを比較",
+    "Compare each vendor's token share across the past year": "過去1年における各ベンダーのトークンシェアを比較",
+    "Compare each vendor's token share over the past 24 hours": "過去24時間における各ベンダーのトークンシェアを比較",
+    "Compare each vendor's token share over the past month": "過去1か月における各ベンダーのトークンシェアを比較",
+    "Compare each vendor's token share since launch": "ローンチ以降の各ベンダーのトークンシェアを比較",
+    "Compare the most popular models on the platform": "プラットフォームで最も人気のあるモデルを比較",
     "compatible API routes": "互換APIルート",
     "Compatible API routes for common AI application workflows": "一般的なAIアプリケーションワークフロー向けの互換APIルート",
     "Complete API documentation with multi-language SDK support": "多言語SDKをサポートする完全なAPIドキュメント",
@@ -792,6 +847,8 @@
     "Content displayed on the home page (supports Markdown)": "ホームページに表示されるコンテンツ（Markdownをサポート）",
     "Content not found.": "コンテンツが見つかりません。",
     "Content not modified!": "コンテンツが変更されていません！",
+    "Content width": "コンテンツ幅",
+    "Context": "コンテキスト",
     "Continue": "続行",
     "Continue with {{name}}": "{{name}} で続行",
     "Continue with Discord": "Discord で続行",
@@ -800,11 +857,13 @@
     "Continue with OIDC": "OIDC で続行",
     "Continue with Telegram": "Telegram で続行",
     "Continue with WeChat": "WeChat で続行",
+    "Contract review, compliance, summarisation": "契約レビュー・コンプライアンス・要約",
     "Control log retention and clean historical data.": "ログの保持を制御し、履歴データをクリーンアップします。",
     "Control passthrough behavior and connection keep-alive settings": "パススルーの動作と接続のキープアライブ設定を制御します。",
     "Control request frequency to prevent abuse and manage system load.": "乱用を防ぎ、システム負荷を管理するためにリクエスト頻度を制御します。",
     "Control which models are exposed and which groups may use them.": "公開するモデルと、それらを利用できるグループを制御します。",
     "Control which sidebar areas and modules are available to all users.": "すべてのユーザーが利用できるサイドバー領域とモジュールを制御します。",
+    "Controls how much the model thinks before answering": "モデルが回答前に考える深さを制御します",
     "Controls whether user verification (biometrics/PIN) is required during Passkey flows.": "Passkeyフロー中にユーザー認証（生体認証/PIN）が必要かどうかを制御します。",
     "Conversion rate from USD to your custom currency": "USDからカスタム通貨への換算レート",
     "Convert reasoning_content to <think> tag in content": "content内のreasoning_contentを<think>タグに変換",
@@ -845,6 +904,7 @@
     "Copy to clipboard": "クリップボードにコピー",
     "Copy token": "トークンをコピー",
     "Copy URL": "URLをコピー",
+    "Copywriting, ad creative, SEO": "コピーライティング・広告クリエイティブ・SEO",
     "Core Configuration": "コア設定",
     "Core Features": "主要機能",
     "Cost": "コスト",
@@ -936,6 +996,11 @@
     "Customize sidebar display content": "サイドバーの表示内容をカスタマイズ",
     "Daily": "毎日",
     "Daily Check-in": "毎日のチェックイン",
+    "Daily token usage by model across the past few weeks": "過去数週間のモデル別日次トークン使用量",
+    "Daily token usage by model across the past month": "過去 1 か月にわたるモデル別の日次トークン使用量",
+    "Daily token usage by model over the past month": "過去1か月のモデル別日次トークン使用量",
+    "Daily uptime over the last 30 days": "過去 30 日間の日次稼働率",
+    "Daily uptime; {{incidents}} incidents totalling {{minutes}} minutes": "日次稼働率。{{incidents}} 件のインシデント、合計 {{minutes}} 分",
     "Dark": "ダーク",
     "Dashboard": "ダッシュボード",
     "Dashboard Preferences": "ダッシュボードの環境設定",
@@ -944,6 +1009,7 @@
     "Data directory:": "データディレクトリ:",
     "Data is stored locally on this device. Use system backups to keep a safe copy.": "データはこのデバイスにローカルに保存されます。安全なコピーを保持するためにシステムバックアップを使用してください。",
     "Data management and log viewing": "データ管理とログ閲覧",
+    "Data retention": "データ保持",
     "Database": "データベース",
     "Database check": "データベース確認",
     "Date and time when this announcement should be displayed": "このアナウンスが表示されるべき日時",
@@ -956,6 +1022,7 @@
     "default": "デフォルト",
     "Default": "デフォルト",
     "Default (New Frontend)": "デフォルト（新フロントエンド）",
+    "Default / range": "デフォルト / 範囲",
     "Default API Version *": "デフォルトのAPIバージョン *",
     "Default API version for this channel": "このチャンネルのデフォルトのAPIバージョン",
     "Default Collapse Sidebar": "デフォルトのサイドバー折りたたみ",
@@ -972,6 +1039,7 @@
     "Define API endpoints for this model (JSON format)": "このモデルのAPIエンドポイントを定義します (JSON形式)",
     "Define endpoint mappings for each provider.": "各プロバイダーごとにエンドポイントのマッピングを定義してください。",
     "Define per-group rules to add, remove, or append selectable groups for specific user groups.": "特定のユーザーグループに対して選択可能なグループを追加、削除、または追加するグループごとのルールを定義します。",
+    "Degraded performance recently": "最近パフォーマンスが低下しています",
     "Delete": "削除",
     "Delete (": "削除 (",
     "Delete {{count}} API key(s)?": "{{count}}個のAPIキーを削除しますか？",
@@ -1009,6 +1077,7 @@
     "Demo site mode": "デモサイトモード",
     "Demo Site Mode": "デモサイトモード",
     "Demote": "降格",
+    "Density": "密度",
     "Deploy your own gateway and start routing requests through your configured upstream services.": "独自のゲートウェイをデプロイし、設定済みのアップストリームサービスへリクエストをルーティングできます。",
     "Deployment created successfully": "デプロイを作成しました",
     "Deployment details": "デプロイメントの詳細",
@@ -1035,6 +1104,7 @@
     "Detection complete: {{add}} to add, {{remove}} to remove": "検出完了：{{add}} 個追加、{{remove}} 個削除",
     "Detection failed": "検出に失敗しました",
     "Determines how this group is applied elsewhere.": "このグループが他の場所でどのように適用されるかを決定します。",
+    "Deterministic sampling seed (best-effort)": "可能な限り再現性のあるサンプリングシード",
     "Developer Friendly": "開発者向け",
     "Device Type Preference": "優先デバイスタイプ",
     "Dify": "Dify",
@@ -1069,6 +1139,9 @@
     "Discount Rate:": "割引率:",
     "Discount ratio for cache hits.": "キャッシュヒットに対する割引率。",
     "Discouraged": "非推奨",
+    "Discover curated AI models, compare pricing and capabilities, and choose the right model for every scenario.": "厳選された AI モデルを見つけ、価格と機能を比較し、あらゆるシナリオに適したモデルを選択できます。",
+    "Discover the leading models in each domain": "各分野をリードするモデルを発見",
+    "Discover the most-used models, top apps, and rising vendors on the platform — updated continuously across every category.": "プラットフォーム上で最も使われているモデル・人気アプリ・台頭するベンダーを発見しましょう。すべてのカテゴリで継続的に更新されます。",
     "Discovering...": "検出中...",
     "Disk cache cleared": "ディスクキャッシュをクリアしました",
     "Disk Cache Settings": "ディスクキャッシュ設定",
@@ -1191,6 +1264,7 @@
     "Edit Vendor": "ベンダーを編集",
     "edit_this": "edit_this",
     "Editor mode": "エディターモード",
+    "Education": "教育",
     "Email": "メールアドレス",
     "Email (required for verification)": "メールアドレス（認証に必須）",
     "Email Address": "メールアドレス",
@@ -1200,6 +1274,7 @@
     "Email Domain Whitelist": "メールドメインのホワイトリスト",
     "Email Field": "メールフィールド",
     "Email Verification": "メール認証",
+    "Email, summarisation, knowledge work": "メール・要約・ナレッジワーク",
     "Embeddings": "埋め込み",
     "Empty value will be saved as {}.": "空の値は {} として保存されます。",
     "Enable": "有効にする",
@@ -1247,10 +1322,12 @@
     "Enabled all channels with tag: {{tag}}": "タグ「{{tag}}」の全チャネルを有効にしました",
     "Enabled Status": "有効ステータス",
     "Enabling...": "有効化中...",
+    "Encourages introducing new topics": "新しい話題への展開を促進します",
     "End": "終了",
     "End Error": "終了エラー",
     "End Reason": "終了理由",
     "End Time": "終了時間",
+    "End-user identifier for abuse monitoring": "悪用検知用のエンドユーザー識別子",
     "Endpoint": "エンドポイント",
     "Endpoint config": "エンドポイント設定",
     "Endpoint Configuration": "エンドポイント設定",
@@ -1358,10 +1435,12 @@
     "Excellent": "優秀",
     "Exchange rate is required": "為替レートは必須です",
     "Exchange rate must be greater than 0": "為替レートは 0 より大きくする必要があります",
+    "Execute code in a sandbox during the response": "応答中にサンドボックスでコードを実行",
     "Exhausted": "使い切り",
     "Existing account will be reused": "既存のアカウントが再利用されます",
     "Existing Models ({{count}})": "既存のモデル ({{count}})",
     "Exists": "存在",
+    "Expand": "展開",
     "Expand All": "すべて展開",
     "Expected a JSON array.": "JSON 配列が必要です。",
     "Experiment with prompts and models in real time.": "プロンプトとモデルをリアルタイムで実験する。",
@@ -1530,6 +1609,7 @@
     "Field Mapping": "フィールドマッピング",
     "Field passthrough controls": "フィールドパススルーコントロール",
     "Field Path": "フィールドパス",
+    "File": "ファイル",
     "File Search": "ファイル検索",
     "Files to Retain": "保持ファイル数",
     "Fill All Models": "すべてのモデルを埋める",
@@ -1569,6 +1649,7 @@
     "Final Consumed": "最終消費",
     "Final cost = base × multiplier when conditions match": "条件に一致する場合 最終費用 ＝ 基準 × 倍率",
     "Final price multiplier (0.95 = 5% discount": "最終価格乗数 (0.95 = 5%割引",
+    "Finance": "金融",
     "Fine-tune Midjourney integration and guardrails.": "Midjourneyの統合とガードレールを微調整します。",
     "Finish Time": "完了時刻",
     "First/Last Frame to Video": "先頭/末尾フレームから動画",
@@ -1576,6 +1657,7 @@
     "Fixed abilities: {{success}} succeeded, {{fails}} failed": "能力修正：{{success}} 件成功、{{fails}} 件失敗",
     "Fixed price": "固定価格",
     "Fixed price (USD)": "固定価格 (USD)",
+    "Floating": "フローティング",
     "FluentRead extension not detected. Please ensure it is installed and active.": "FluentRead 拡張機能が検出されませんでした。インストールされていて有効になっていることを確認してください。",
     "Follow the guided steps to prepare your workspace before the first login.": "初回ログイン前に、ガイド付きの手順に従ってワークスペースを準備してください。",
     "Footer": "フッター",
@@ -1596,10 +1678,13 @@
     "footer.new\u0061pi.projectAttributionSuffix": "すべての権利を留保します。プロジェクトコントリビューターにより設計・開発されています。",
     "For channels added after May 10, 2025, no need to remove \".\" from model names during deployment": "2025 年 5 月 10 日以降に追加されたチャネルの場合、デプロイ時にモデル名から「.」を削除する必要はありません",
     "For private deployments, format: https://fastgpt.run/api/openapi": "プライベートデプロイメントの場合、形式: https://fastgpt.run/api/openapi",
+    "Force a syntactically valid JSON response": "構文的に有効な JSON 応答を強制",
     "Force AUTH LOGIN": "AUTH LOGINを強制",
     "Force Format": "強制フォーマット",
     "Force format response to OpenAI standard (OpenAI channel only)": "応答をOpenAI標準に強制フォーマット (OpenAIチャンネルのみ)",
+    "Force JSON object or schema-conforming output": "JSON オブジェクトまたはスキーマ準拠の出力を強制します",
     "Force SMTP authentication using AUTH LOGIN method": "AUTH LOGIN方式を使用してSMTP認証を強制する",
+    "Forest Whisper": "フォレストウィスパー",
     "Forgot password": "パスワードを忘れた場合",
     "Forgot password?": "パスワードをお忘れですか？",
     "Form reset to saved values": "フォームが保存された値にリセットされました",
@@ -1614,6 +1699,7 @@
     "Format: APPID|APISecret|APIKey": "形式: APPID|APISecret|APIKey",
     "Format: AppId|SecretId|SecretKey": "形式: AppId|SecretId|SecretKey",
     "Forward requests directly to upstream providers without any post-processing.": "ポストプロセスなしで、リクエストをアップストリームプロバイダーに直接転送します。",
+    "Frames per second": "フレームレート",
     "Free: {{free}} / Total: {{total}}": "空き容量: {{free}} / 合計: {{total}}",
     "Friendly name to identify this channel": "このチャネルを識別するための表示名",
     "From Address": "差出人アドレス",
@@ -1623,6 +1709,9 @@
     "Full API Key": "完全なAPIキー",
     "Full Base URL (supports": "完全なベースURL (サポート",
     "Full Code": "完全なコード",
+    "Full layout": "フルレイアウト",
+    "Full width": "全幅",
+    "Function calling": "関数呼び出し",
     "Functions": "関数",
     "GC Count": "GC 回数",
     "GC executed": "GC 実行完了",
@@ -1639,9 +1728,11 @@
     "Generate Music": "音楽を生成",
     "Generate new backup codes for account recovery": "アカウント復旧用の新しいバックアップコードを生成",
     "Generate New Codes": "新しいコードを生成",
+    "Generate tokens from the Tokens page; you can scope them to specific models, groups, IPs, and rate-limits.": "トークンページから API キーを発行できます。モデル、グループ、IP、レート制限ごとに細かく権限を設定可能です。",
     "Generated image": "生成された画像",
     "Generating new codes will invalidate all existing backup codes.": "新しいコードを生成すると、既存のすべてのバックアップコードが無効になります。",
     "Generating...": "生成中...",
+    "Generation quality preset": "生成品質プリセット",
     "Generic cache": "汎用キャッシュ",
     "Get notified when balance falls below this value": "残高がこの値を下回ったときに通知を受け取る",
     "Get Started": "開始する",
@@ -1651,6 +1742,7 @@
     "Global configuration and administrative tools.": "グローバル設定と管理ツール。",
     "Global Coverage": "グローバルカバレッジ",
     "Global Model Configuration": "グローバルモデル設定",
+    "Global throughput": "全体スループット",
     "Go Back": "戻る",
     "Go back and edit": "戻って編集",
     "Go to Dashboard": "ダッシュボードへ移動",
@@ -1697,6 +1789,7 @@
     "Groups": "グループ",
     "Groups *": "グループ *",
     "Groups that users can select when creating API keys.": "ユーザーが API キー作成時に選択できるグループ。",
+    "Growth": "成長",
     "Guardrails": "ガードレール",
     "Guest": "ゲスト",
     "h": "h",
@@ -1710,11 +1803,14 @@
     "Has been invalidated": "無効化されました",
     "Have a Code?": "コードをお持ちですか？",
     "Header": "ヘッダー",
+    "header instead.": " ヘッダーも利用できます。",
     "Header Name": "ヘッダー名",
     "Header navigation": "ヘッダーナビゲーション",
     "Header Override": "ヘッダー上書き",
     "Header Passthrough (X-Request-Id)": "ヘッダーパススルー（X-Request-Id）",
     "Header Value (supports string or JSON mapping)": "ヘッダー値（文字列またはJSONマッピング対応）",
+    "header. Anthropic-formatted endpoints accept the": " ヘッダーが必要です。Anthropic 形式のエンドポイントでは",
+    "Health": "ヘルスケア",
     "Hidden — verify to reveal": "非表示 — 確認して表示",
     "Hide": "非表示にする",
     "Hide API key": "APIキーを非表示",
@@ -1738,6 +1834,8 @@
     "Home Page Content": "ホームコンテンツ",
     "Hostname or IP of your SMTP provider": "SMTP プロバイダーのホスト名または IP",
     "Hour": "時間",
+    "Hourly token usage by model across the last 24 hours": "過去 24 時間にわたるモデル別の時間ごとのトークン使用量",
+    "Hourly token usage by model over the past 24 hours": "過去24時間のモデル別時間単位のトークン使用量",
     "hours": "時間",
     "How client credentials are sent to the token endpoint": "クライアント認証情報がトークンエンドポイントに送信される方法",
     "How frequently the system tests all channels": "システムがすべてのチャネルをテストする頻度",
@@ -1745,6 +1843,7 @@
     "How model mapping works": "モデルマッピングの仕組み",
     "How much to charge for each US dollar of balance (Epay)": "残高の 1 米ドルあたりに請求する金額 (Epay)",
     "How this model name should match requests": "このモデル名がリクエストとどのように一致すべきか",
+    "How to deliver the resulting image": "画像結果の返却方法",
     "How to get an io.net API Key": "io.net API キーの取得方法",
     "How to reset my quota?": "クォータをリセットするには？",
     "How to select keys: random or sequential polling": "キーの選択方法: ランダムまたは順次ポーリング",
@@ -1794,6 +1893,9 @@
     "Import to CC Switch": "CC Switch にインポート",
     "In Progress": "処理中",
     "In:": "入力：",
+    "incident": "件",
+    "incidents": "件",
+    "Incidents": "インシデント",
     "Include Group": "グループを含む",
     "Include Model": "モデルを含む",
     "Include Rule Name": "ルール名を含む",
@@ -1810,14 +1912,15 @@
     "Input price": "入力価格",
     "Input tokens": "入力トークン",
     "Input Tokens": "入力トークン",
+    "Inset": "インセット",
     "Inspect user prompts": "ユーザープロンプトの検査",
     "Instance": "インスタンス",
     "Integrations": "統合",
     "Inter-group overrides": "グループ間上書き",
     "Inter-group ratio overrides": "グループ間比率上書き",
+    "Interface Language": "インターフェース言語",
     "Internal Notes": "内部メモ",
     "Internal notes (not shown to users)": ":内部メモ（ユーザーには表示されません）",
-    "Interface Language": "インターフェース言語",
     "Internal Server Error!": "内部サーバーエラー！",
     "Invalid chat link. Please contact the administrator.": "無効なチャットリンクです。管理者に連絡してください。",
     "Invalid chat link. Please contact your administrator.": "無効なチャットリンクです。管理者に連絡してください。",
@@ -1848,6 +1951,7 @@
     "Inviter": "招待者",
     "Inviter Reward": "招待した側の報酬",
     "Invites": "招待",
+    "Invoke developer-defined functions with structured arguments": "構造化された引数で開発者定義の関数を呼び出す",
     "io.net API Key": "io.net API キー",
     "io.net Deployments": "io.net デプロイ",
     "IP": "IP",
@@ -1872,6 +1976,7 @@
     "JSON map of group → ratio applied when the user selects the group explicitly.": "ユーザーがグループを明示的に選択したときに適用される、グループ → 比率のJSONマップ。",
     "JSON map of model → multiplier applied to quota billing.": "モデル → クォータ請求に適用される乗数のJSONマップ。",
     "JSON map of model → USD cost per request. Takes precedence over ratio based billing.": "モデル → リクエストあたりのUSDコストのJSONマップ。比率ベースの請求よりも優先されます。",
+    "JSON mode": "JSON モード",
     "JSON Mode": "JSONモード",
     "JSON must be an object": "JSON はオブジェクトである必要があります",
     "JSON object:": "JSONオブジェクト:",
@@ -1893,10 +1998,13 @@
     "Keys, OAuth credentials, and multi-key update behavior.": "キー、OAuth 認証情報、マルチキー更新動作を管理します。",
     "Kling": "Kling",
     "Knowledge Base ID *": "ナレッジベースID *",
+    "Knowledge cutoff": "知識のカットオフ",
+    "Lake View": "レイクビュー",
     "Landing page with system overview.": "システム概要付きランディングページ。",
-    "Language Preferences": "言語設定",
     "Language preference saved": "言語設定を保存しました",
+    "Language Preferences": "言語設定",
     "Language preferences sync across your signed-in devices and affect API error messages.": "言語設定はログイン中のすべてのデバイスで同期され、API のエラーメッセージ言語にも反映されます。",
+    "Last 30 days uptime": "直近 30 日の稼働率",
     "Last check time": "最終チェック時刻",
     "Last detected addable models": "最後に検出された追加可能モデル",
     "Last Login": "最終ログイン",
@@ -1905,7 +2013,11 @@
     "Last updated:": "最終更新日:",
     "Last Used": "最終使用",
     "Last used:": "最終使用日:",
+    "Latency trend (last 24h)": "レイテンシ推移（直近 24 時間）",
+    "Lavender Dream": "ラベンダードリーム",
     "Layout": "レイアウト",
+    "lead": "リード",
+    "Leaderboards": "ランキング",
     "Learn more": "詳細はこちら",
     "Learn more:": "詳細はこちら:",
     "Leave": "退出",
@@ -1922,12 +2034,15 @@
     "Leave empty to use default": "デフォルトを使用する場合は空欄にしてください",
     "Leave empty to use system temp directory": "空欄でシステムの一時ディレクトリを使用",
     "Leave empty to use username": "ユーザー名を使用するには空のままにしてください",
+    "Left to Right": "左から右",
     "Legacy Format (JSON Object)": "旧形式（JSONオブジェクト）",
     "Legacy format must be a JSON object": "旧形式はJSONオブジェクトである必要があります",
     "Legacy Format Template": "旧フォーマットテンプレート",
+    "Legal": "法務",
     "Less": "少ない",
     "Less Than": "より小さい",
     "Less Than or Equal": "以下",
+    "License": "ライセンス",
     "Light": "ライト",
     "Lightning Fast": "超高速",
     "Limit period": "制限期間",
@@ -1942,6 +2057,7 @@
     "List of models supported by this channel. Use comma to separate multiple models.": "このチャネルがサポートするモデルのリストです。複数のモデルはカンマで区切ってください。",
     "List of origins (one per line) allowed for Passkey registration and authentication.": "Passkeyの登録と認証が許可されているオリジン（1行に1つ）のリスト。",
     "List view": "リスト表示",
+    "LLM Leaderboard": "LLM リーダーボード",
     "LLM prompt helper": "LLMプロンプトヘルパー",
     "Load Balancing": "ロードバランシング",
     "Load template...": "テンプレートをロード...",
@@ -1972,6 +2088,7 @@
     "Logo": "ロゴ",
     "Logo URL": "ロゴURL",
     "Logs": "ログ",
+    "Lowest median first-token latency": "最初のトークンまでの中央値レイテンシの最小値",
     "m": "m",
     "Maintain a list of common questions for the dashboard help panel": "ダッシュボードのヘルプパネル用のよくある質問のリストを維持する",
     "Maintenance": "メンテナンス",
@@ -2005,6 +2122,8 @@
     "Map request model names to actual provider model names (JSON format)": "リクエストのモデル名を実際のプロバイダーのモデル名にマッピング (JSON 形式)",
     "Map response status codes (JSON format)": "応答ステータスコードをマッピング（JSON形式）",
     "Map upstream status codes to different codes": "アップストリームのステータスコードを別のコードにマッピングする",
+    "Market Share": "マーケットシェア",
+    "Marketing": "マーケティング",
     "Match All (AND)": "すべて一致（AND）",
     "Match Any (OR)": "いずれか一致（OR）",
     "Match Mode": "マッチモード",
@@ -2021,6 +2140,7 @@
     "Matching Rules": "マッチングルール",
     "Max Disk Cache Size (MB)": "ディスクキャッシュ最大容量 (MB)",
     "Max Entries": "最大エントリ数",
+    "Max output": "最大出力",
     "Max Requests (incl. failures)": "最大リクエスト数（失敗を含む）",
     "Max Requests (including failures)": "最大リクエスト数（失敗を含む）",
     "Max requests per period": "期間あたりの最大リクエスト数",
@@ -2031,8 +2151,15 @@
     "Maximum 200 characters": "最大200文字",
     "Maximum 500 characters. Supports Markdown and HTML.": "最大500文字。MarkdownとHTMLをサポートしています。",
     "Maximum check-in quota": "最大チェックインクォータ",
+    "Maximum input window": "最大入力ウィンドウ",
+    "Maximum number of tokens in the response": "レスポンスの最大トークン数",
     "Maximum quota amount awarded for check-in": "チェックインで付与される最大クォータ量",
+    "Maximum tokens including hidden reasoning tokens": "隠れ推論トークンを含む最大トークン数",
+    "Maximum tokens per response": "1 回の応答あたりの最大トークン数",
     "maxRequests ≥ 0, maxSuccess ≥ 1, both ≤ 2,147,483,647": "maxRequests ≥ 0、maxSuccess ≥ 1、両方とも ≤ 2,147,483,647",
+    "May be used for training by upstream provider": "上流プロバイダーが学習に利用する可能性があります",
+    "Median time-to-first-token (TTFT) sampled hourly per group": "グループ別に毎時サンプリングした最初のトークンまでの中央値レイテンシ (TTFT)",
+    "Medical Q&A, mental health support": "医療Q&A・メンタルヘルスサポート",
     "Memory Hits": "メモリヒット",
     "Memory Threshold (%)": "メモリ閾値 (%)",
     "Merchant ID": "マーチャントID",
@@ -2041,6 +2168,7 @@
     "Metadata": "メタデータ",
     "Midjourney": "Midjourney",
     "MidjourneyPlus": "MidjourneyPlus",
+    "min downtime": "分のダウンタイム",
     "Min Top-up": "最低チャージ額",
     "Min Top-up:": "最小チャージ額:",
     "MiniMax": "MiniMax",
@@ -2056,12 +2184,15 @@
     "Minimum topup amount: {{amount}}": "最低チャージ金額：{{amount}}",
     "Minimum Trust Level": "最小トラストレベル",
     "Minimum:": "最小:",
+    "Minor blips in the last 30 days": "直近 30 日で軽微な障害あり",
     "Minute": "分",
     "minutes": "分",
     "Missing code": "コードが不足しています",
     "Missing Models": "不足しているモデル",
     "Missing user data from Passkey login response": "パスキーログイン応答からユーザーデータが欠落しています",
     "Mistral": "Mistral",
+    "Modalities": "モダリティ",
+    "Modality": "モダリティ",
     "Mode": "モード",
     "model": "モデル",
     "Model": "モデル",
@@ -2074,6 +2205,7 @@
     "Model deleted successfully": "モデルが正常に削除されました",
     "Model deployment service is disabled": "モデルデプロイサービスが無効です",
     "Model Description": "モデルの説明",
+    "Model details": "モデル詳細",
     "Model disabled successfully": "モデルが正常に無効化されました",
     "Model enabled successfully": "モデルが正常に有効化されました",
     "Model fixed pricing": "モデルの固定価格設定",
@@ -2111,11 +2243,15 @@
     "Models & Groups": "モデルとグループ",
     "Models appended successfully": "モデルが正常に追加されました",
     "Models are required": "モデルが必要です",
+    "Models climbing the leaderboard": "ランキング上昇中のモデル",
+    "Models climbing the leaderboard fastest": "ランキングで最も急上昇しているモデル",
     "Models directory": "モデルディレクトリ",
     "Models Directory": "モデルディレクトリ",
     "Models fetched successfully": "モデルが正常に取得されました",
     "Models filled to form": "フォームにモデルが記入されました",
     "Models listed here will not automatically append or remove -thinking / -nothinking suffixes.": "ここに記載されたモデルは、-thinking / -nothinking サフィックスの自動付与・削除を行いません。",
+    "Models losing positions": "順位を下げているモデル",
+    "Models losing the most positions": "順位を最も落としているモデル",
     "Models not in list, may fail to invoke": "リストにないモデル、呼び出しに失敗する可能性があります",
     "Models that are being used but not configured in the system": "使用されているがシステムに設定されていないモデル",
     "Models updated successfully": "モデルが正常に更新されました",
@@ -2126,12 +2262,14 @@
     "Monitoring & Alerts": "監視とアラート",
     "Month": "月",
     "Monthly": "毎月",
+    "Monthly tokens": "月間トークン",
     "months": "ヶ月",
     "Moonshot": "Moonshot",
     "More": "もっと見る",
     "more mapping": "さらにマッピング",
     "More templates...": "ほかのテンプレート…",
     "More...": "その他...",
+    "Most-used models in the selected period and category": "選択した期間とカテゴリで最も使われているモデル",
     "Move": "移動",
     "Move a request header": "リクエストヘッダーを移動",
     "Move affiliate rewards to your main balance": "アフィリエイト報酬をメイン残高に移動する",
@@ -2148,7 +2286,10 @@
     "Multi-key: Random rotation": "マルチキー：ランダムローテーション",
     "Multi-protocol Compatible": "マルチプロトコル互換",
     "Multi-region deployment for stable global access": "安定したグローバルアクセスを実現するマルチリージョンデプロイメント",
+    "Multi-step thinking before final answer": "最終回答の前に複数ステップで思考",
     "Multi-user management with flexible permission allocation": "柔軟な権限割り当てが可能なマルチユーザー管理",
+    "Multilingual translation and localisation": "多言語翻訳とローカライズ",
+    "Multimodal": "マルチモーダル",
     "Multiplier": "乗数",
     "Multiplier applied when": "乗数が適用されるとき",
     "Multiplier applied when {{userGroup}} uses {{targetGroup}}": "{{userGroup}}が{{targetGroup}}を使用する際に適用される倍率",
@@ -2184,6 +2325,7 @@
     "Network proxy for this channel (supports socks5 protocol)": "このチャネルのネットワークプロキシ (socks5プロトコルをサポート)",
     "Never": "しない",
     "Never expires": "無期限",
+    "NEW": "NEW",
     "New API": "新しいAPI",
     "New API &lt;noreply@example.com&gt;": "新しいAPI __ PH_0 __",
     "New API Project Repository:": "New APIプロジェクトリポジトリ:",
@@ -2197,6 +2339,7 @@
     "New User Quota": "新しいユーザー割り当て",
     "New version available: {{version}}": "新しいバージョンが利用可能です：{{version}}",
     "NewAPI": "NewAPI",
+    "Newly released": "最新リリース",
     "Next": "次へ",
     "Next branch": "次のブランチ",
     "Next page": "次のページ",
@@ -2211,10 +2354,13 @@
     "No API keys available. Create your first API key to get started.": "利用可能なAPIキーがありません。最初のAPIキーを作成して開始してください。",
     "No API Keys Found": "APIキーが見つかりません",
     "No API routes configured": "APIルートが設定されていません",
+    "No app usage data available for this model.": "このモデルのアプリ利用データはまだありません。",
+    "No apps match the selected filters": "条件に一致するアプリはありません",
     "No available models": "利用可能なモデルがありません",
     "No available Web chat links": "利用可能なWebチャットリンクがありません",
     "No backup": "バックアップなし",
     "No billing records found": "請求記録が見つかりません",
+    "No capabilities reported for this model.": "このモデルには報告されている機能がありません。",
     "No Change": "変更なし",
     "No changes": "変更なし",
     "No changes made": "変更はありません",
@@ -2249,8 +2395,11 @@
     "No group-based rate limits configured. Click \"Add group\" to get started.": "グループベースのレート制限が設定されていません。\"グループを追加\" をクリックして開始してください。",
     "No groups match your search": "検索に一致するグループがありません",
     "No header overrides configured.": "ヘッダーのオーバーライドが設定されていません。",
+    "No history data available": "履歴データがありません",
+    "No incidents in the last 30 days": "過去 30 日間でインシデントはありません",
     "No Inviter": "招待者なし",
     "No keys found": "キーが見つかりません",
+    "No latency data available": "レイテンシデータがありません",
     "No log entries matched the selected time.": "選択した時間に一致するログエントリはありません。",
     "No logs": "ログがありません",
     "No Logs Found": "ログが見つかりません",
@@ -2270,6 +2419,7 @@
     "No models found": "モデルが見つかりません",
     "No Models Found": "モデルが見つかりません",
     "No models found.": "モデルが見つかりません。",
+    "No models match the selected filters": "条件に一致するモデルはありません",
     "No models match your current filters.": "現在のフィルターに一致するモデルはありません。",
     "No models match your search": "検索に一致するモデルがありません",
     "No models selected": "モデルが選択されていません",
@@ -2277,6 +2427,9 @@
     "No models to copy": "コピーするモデルがありません",
     "No models to remove": "削除するモデルがありません",
     "No new models to add": "追加する新しいモデルはありません",
+    "No new models yet": "新しいモデルはまだありません",
+    "No notable climbers right now": "現在、目立った上昇はありません",
+    "No notable drops right now": "現在、目立った下降はありません",
     "No parameter overrides configured.": "パラメータのオーバーライドが設定されていません。",
     "No payment methods available. Please contact administrator.": "利用可能な支払い方法がありません。管理者に連絡してください。",
     "No payment methods configured": "決済方法が設定されていません",
@@ -2315,6 +2468,7 @@
     "No Upgrade": "アップグレードなし",
     "No upstream price differences found": "上流価格の差異は見つかりませんでした",
     "No upstream ratio differences found": "アップストリームの比率の差は見つかりません",
+    "No uptime data available": "稼働率データがありません",
     "No Uptime Kuma groups yet. Click \"Add Group\" to create one.": "Uptime Kumaグループはまだありません。「グループを追加」をクリックして作成してください。",
     "No uptime monitoring configured": "アップタイム監視が設定されていません",
     "No usage logs available. Logs will appear here once API calls are made.": "使用ログはありません。API呼び出し後にログがここに表示されます。",
@@ -2322,6 +2476,7 @@
     "No user selected": "ユーザーが選択されていません",
     "No users available. Try adjusting your search or filters.": "利用可能なユーザーがいません。検索またはフィルターを調整してみてください。",
     "No Users Found": "ユーザーが見つかりません",
+    "No vendor data available": "ベンダーデータがありません",
     "Node Name": "ノード名",
     "Non-stream": "非ストリーミング",
     "None": "なし",
@@ -2336,15 +2491,20 @@
     "Not Started": "未開始",
     "Not Submitted": "未送信",
     "Not tested": "未テスト",
+    "Not used for upstream training by default": "デフォルトで上流の学習には使用されません",
     "Not used yet": "未使用",
     "Notice": "通知",
     "Notification Email": "通知メール",
     "Notification Method": "通知方法",
     "Notifications": "通知",
+    "Nucleus sampling probability mass": "核サンプリングの累積確率",
     "Number of codes to create": "作成するコードの数",
+    "Number of completions to generate": "生成する候補数",
+    "Number of images to generate": "生成する画像枚数",
     "Number of keys to create": "作成するキーの数",
     "Number of times to retry failed requests (0-10)": "失敗したリクエストを再試行する回数 (0-10)",
     "Number of tokens per unit quota": "単位クォータあたりのトークン数",
+    "Number of top log probabilities returned per token": "トークンごとに返される上位対数確率の数",
     "Number of users invited": "招待されたユーザー数",
     "OAuth Client ID": "OAuthクライアントID",
     "OAuth Client Secret": "OAuthクライアントシークレット",
@@ -2355,6 +2515,7 @@
     "Observability": "可観測性",
     "Obtain the API key, merchant ID, and RSA key pair from the Waffo dashboard, and configure the callback URL.": "Waffoダッシュボードから APIキー、マーチャントID、RSAキーペアを取得し、コールバックURLを設定してください。",
     "Obtain the merchant, store, product and signing keys from your Waffo dashboard. Webhook URL: <ServerAddress>/api/waffo-pancake/webhook": "Waffo ダッシュボードでマーチャント、ストア、プロダクト、署名用キーを取得してください。Webhook URL: <ServerAddress>/api/waffo-pancake/webhook",
+    "Ocean Breeze": "オーシャンブリーズ",
     "of": "件、合計",
     "of 3:": "3のうち:",
     "off": "オフ",
@@ -2397,9 +2558,11 @@
     "Open in New Tab": "新しいタブで開く",
     "Open menu": "メニューを開く",
     "Open release": "リリースを開く",
+    "Open source": "オープンソース",
     "Open Source": "オープンソース",
     "Open the io.net console API Keys page": "io.netコンソールAPIキーページを開く",
     "Open theme settings": "テーマ設定を開く",
+    "Open weights": "公開ウェイト",
     "OpenAI": "OpenAI",
     "OpenAI Compatible": "OpenAI互換",
     "OpenAI Organization": "OpenAI組織",
@@ -2437,10 +2600,14 @@
     "org-...": "org-...",
     "Original Model": "オリジナルモデル",
     "Other": "その他",
+    "Outage": "ダウンタイム",
     "Output": "出力",
+    "Output aspect ratio": "出力アスペクト比",
+    "Output image size": "出力画像サイズ",
     "Output price": "出力価格",
     "Output tokens": "出力トークン",
     "Output Tokens": "出力トークン",
+    "overall": "全体",
     "override": "上書き",
     "Override": "上書き",
     "Override Anthropic headers, defaults, and thinking adapter behavior": "Anthropicのヘッダー、デフォルト、および思考アダプターの動作を上書きする",
@@ -2460,6 +2627,7 @@
     "PaLM": "PaLM",
     "Pan": "パン",
     "Param Override": "パラメータ上書き",
+    "Parameter": "パラメータ",
     "Parameter configuration error": "パラメータ設定エラー",
     "Parameter Override": "パラメータのオーバーライド",
     "Parameter override must be a valid JSON object": "パラメータオーバーライドは有効なJSONオブジェクトである必要があります",
@@ -2533,6 +2701,9 @@
     "Payment page opened": "決済ページが開きました",
     "Payment request failed": "支払いリクエストが失敗しました",
     "Payment return URL": "決済完了後のリダイレクトURL",
+    "Peak": "ピーク",
+    "Peak throughput": "ピークスループット",
+    "Penalises repetition of frequent tokens": "頻出トークンの繰り返しを抑制します",
     "Pending": "保留中",
     "per": "あたり",
     "Per 1K tokens": "1Kトークンあたり",
@@ -2542,13 +2713,18 @@
     "Per Request": "リクエストごと",
     "Per-call": "呼び出しごと",
     "Per-feature metered windows split by model or capability.": "機能ごとの従量制ウィンドウ。モデルまたは能力別に分かれます。",
+    "Per-group performance": "グループ別パフォーマンス",
     "Per-request (fixed price)": "リクエストごと (固定価格)",
     "Per-token": "トークン単位",
     "Per-token (ratio based)": "トークンごと (比率ベース)",
+    "Per-token logit bias map": "トークンごとの logit バイアス",
     "Percentage:": "パーセンテージ:",
     "Performance": "パフォーマンス",
+    "Performance data is not yet available for this model.": "このモデルのパフォーマンスデータはまだ利用できません。",
+    "Performance metrics shown here are simulated for preview purposes and will be replaced with live observability data once the backend integration is complete.": "ここに表示されているパフォーマンス指標はプレビュー用のシミュレーションデータです。バックエンド連携の完了後、実データに置き換えられます。",
     "Performance Monitor": "パフォーマンス監視",
     "Performance Settings": "パフォーマンス設定",
+    "Period": "期間",
     "Periodically check for upstream model changes": "アップストリームモデルの変更を定期的にチェック",
     "Periodically send ping frames to keep streaming connections active.": "ストリーミング接続をアクティブに保つために、定期的にpingフレームを送信します。",
     "Permanently delete your account and all data": "アカウントとすべてのデータを永久に削除",
@@ -2652,6 +2828,14 @@
     "Preset recharge amounts displayed to users": "ユーザーに表示されるプリセットチャージ金額",
     "Preset Template": "プリセットテンプレート",
     "Preset templates": "プリセットのテンプレート",
+    "preset.default": "デフォルト",
+    "preset.forest-whisper": "フォレストウィスパー",
+    "preset.lake-view": "レイクビュー",
+    "preset.lavender-dream": "ラベンダードリーム",
+    "preset.ocean-breeze": "オーシャンブリーズ",
+    "preset.rose-garden": "ローズガーデン",
+    "preset.sunset-glow": "サンセットグロウ",
+    "preset.underground": "アンダーグラウンド",
     "Press Enter or comma to add tags": "Enterキーまたはコンマを押してタグを追加",
     "Press Enter to use \"{{value}}\"": "Enter キーを押して「{{value}}」を使用",
     "Prevent server-side request forgery attacks": "サーバーサイドリクエストフォージェリ攻撃を防ぐ",
@@ -2660,7 +2844,6 @@
     "Previous": "前へ",
     "Previous branch": "前のブランチ",
     "Previous page": "前のページ",
-    "Base Price": "基本価格",
     "Price": "価格",
     "Price ($/1K calls)": "価格（$/1K 回）",
     "Price (local currency / USD)": "価格 (現地通貨 / USD)",
@@ -2698,10 +2881,12 @@
     "Product ID": "商品 ID",
     "Product ID is required": "プロダクト ID は必須です",
     "Product Name": "商品名",
+    "Productivity": "生産性",
     "Products": "商品",
     "Professional team providing 24/7 technical support": "24時間年中無休のテクニカルサポートを提供するプロフェッショナルチーム",
     "Profile": "プロフィール",
     "Profile updated successfully": "プロフィールが正常に更新されました",
+    "Programming": "プログラミング",
     "Progress": "進捗",
     "Project": "プロジェクト",
     "Promote": "昇格",
@@ -2709,9 +2894,11 @@
     "Prompt": "プロンプト",
     "Prompt (EN)": "プロンプト（英語）",
     "Prompt cache ratio": "プロンプトキャッシュ倍率",
+    "Prompt caching": "プロンプトキャッシュ",
     "Prompt Caching": "プロンプトキャッシング",
     "Prompt Details": "プロンプトの詳細",
     "Prompt price ($/1M tokens)": "プロンプト価格 (100万トークンあたり$)",
+    "Proprietary": "プロプライエタリ",
     "Protect login and registration with Cloudflare Turnstile": "Cloudflare Turnstileでログインと登録を保護する",
     "Provide a JSON object where each key maps to an endpoint definition.": "各キーがエンドポイント定義にマップされる JSON オブジェクトを提供してください。",
     "Provide a valid URL starting with http:// or https://": "http:// または https:// で始まる有効な URL を入力してください",
@@ -2720,6 +2907,7 @@
     "Provide per-category safety overrides as JSON. Use `default` for fallback values.": "カテゴリごとの安全オーバーライドをJSONとして提供します。フォールバック値には`default`を使用してください。",
     "Provide per-model header overrides as JSON. Useful for enabling beta features such as expanded context windows.": "モデルごとのヘッダーオーバーライドをJSONとして提供します。拡張コンテキストウィンドウなどのベータ機能を有効にするのに役立ちます。",
     "Provider": "プロバイダ",
+    "Provider & data privacy": "プロバイダーとデータ保護",
     "Provider created successfully": "プロバイダーの作成に成功しました",
     "Provider deleted successfully": "プロバイダーの削除に成功しました",
     "Provider Name": "プロバイダー名",
@@ -2768,11 +2956,15 @@
     "Quota Types": "クォータタイプ",
     "Quota Warning Threshold": "クォータ警告しきい値",
     "Quota:": "クォータ：",
+    "Radius": "角丸",
     "Random": "ランダム",
     "Randomly select a key from the pool for each request": "各リクエストごとにプールからランダムにキーを選択",
+    "Ranking data is currently simulated for preview purposes and will be replaced with live analytics once the backend integration ships.": "現在のランキングデータはプレビュー用のシミュレーションです。バックエンド連携が完了次第、リアルタイム分析データに置き換わります。",
+    "Rankings": "ランキング",
     "Rate Limit Windows": "レート制限ウィンドウ",
     "Rate Limited": "レート制限",
     "Rate Limiting": "レート制限",
+    "Rate limits": "レート制限",
     "Ratio": "倍率",
     "Ratio applied to audio completions for streaming models.": "ストリーミングモデルの音声補完に適用される比率。",
     "Ratio applied to audio inputs where supported by the upstream model.": "アップストリームモデルでサポートされている場合の音声入力に適用される比率。",
@@ -2795,6 +2987,8 @@
     "Reasoning Effort": "推論強度",
     "Receive Upstream Model Update Notifications": "アップストリームモデル更新通知を受け取る",
     "Received": "受信済み",
+    "Recently launched models": "最近リリースされたモデル",
+    "Recently launched models gaining traction": "最近リリースされ勢いのあるモデル",
     "Recharge": "チャージ",
     "Recharge Amount": "チャージ額",
     "Recharge Amount (USD)": "チャージ額 (USD)",
@@ -2848,6 +3042,7 @@
     "Registry username": "レジストリ ユーザー名",
     "Reject Reason": "拒否理由",
     "Release details": "リリース詳細",
+    "Released": "公開日",
     "Relying Party Display Name": "依拠当事者表示名",
     "Relying Party ID": "依拠当事者ID",
     "Remaining": "残り",
@@ -2913,6 +3108,8 @@
     "Request rule pricing": "リクエストルールの課金",
     "Request timed out, please refresh and restart GitHub login": "タイムアウトしました。ページをリロードして GitHub ログインをやり直してください",
     "Request-based": "リクエスト条件あり",
+    "Requests (24h)": "リクエスト (24h)",
+    "Requests / 24h": "リクエスト / 24h",
     "Requests per minute": "1分あたりのリクエスト数",
     "requests served": "処理されたリクエスト",
     "Requests will be forwarded to this worker. Trailing slashes are removed automatically.": "リクエストはこのワーカーに転送されます。末尾のスラッシュは自動的に削除されます。",
@@ -2920,12 +3117,14 @@
     "Require email verification for new accounts": "新しいアカウントにメール認証を要求する",
     "Require job success before follow-up actions": "フォローアップ アクション前にジョブの成功を要求",
     "Require login to view models": "モデルを表示するにはログインを要求する",
+    "required": "必須",
     "Required": "必須",
     "Required events:": "必須イベント:",
     "Required provider, authentication, model, and group settings": "必須のプロバイダー、認証、モデル、グループ設定",
     "Required to expose Midjourney-style image generation to end users.": "エンドユーザーに Midjourney スタイルの画像生成を公開するために必要です。",
     "Rerank": "再ランク付け",
     "Reroll": "やり直し",
+    "Research, analysis, scientific reasoning": "リサーチ・分析・科学的推論",
     "Resend ({{seconds}}s)": "再送信 ({{seconds}}秒)",
     "Reset": "リセット",
     "Reset 2FA": "2FAをリセット",
@@ -2961,8 +3160,11 @@
     "Retry Times": "再試行回数",
     "Return a custom error immediately": "即座にカスタムエラーを返す",
     "Return Custom Error": "カスタムエラーを返す",
+    "Return data conforming to a JSON schema": "JSON スキーマに準拠したデータを返却",
     "Return Error": "エラーを返す",
+    "Return per-token log probabilities": "トークンごとの対数確率を返します",
     "Return to dashboard": "ダッシュボードに戻る",
+    "Return vector embeddings for inputs": "入力に対してベクトル埋め込みを返却",
     "Reveal API key": "APIキーを表示",
     "Reveal key": "キーを表示",
     "Revenue": "収益",
@@ -2972,8 +3174,11 @@
     "Review your purchase details before proceeding.": "続行前に購入詳細を確認してください。",
     "Rewards will be added directly to your balance": "報酬は直接残高に追加されます",
     "Rewrite callback URLs to the local server": "コールバック URL をローカルサーバーに書き換え",
+    "Right to Left": "右から左",
     "Role": "ロール",
+    "Roleplay": "ロールプレイ",
     "Root": "ルート",
+    "Rose Garden": "ローズガーデン",
     "Route": "ルート",
     "Route Description": "ルートの説明",
     "Route is required": "ルートは必須です",
@@ -2981,6 +3186,7 @@
     "Routing Strategy": "ルーティング戦略",
     "Rows per page": "ページあたりの行数",
     "RPM": "RPM",
+    "RPM = requests per minute, TPM = tokens per minute, RPD = requests per day. Limits apply per token group.": "RPM = 1 分あたりリクエスト数、TPM = 1 分あたりトークン数、RPD = 1 日あたりリクエスト数。制限はトークングループ単位で適用されます。",
     "RSA Private Key (Production)": "RSA秘密鍵（本番）",
     "RSA Private Key (Sandbox)": "RSA秘密鍵（サンドボックス）",
     "Rule": "ルール",
@@ -3004,6 +3210,7 @@
     "s": "s",
     "Safety Settings": "安全設定",
     "Same as Local": "ローカルと同じ",
+    "Sampling temperature; lower is more deterministic": "サンプリング温度。低いほど決定論的になります",
     "Sandbox mode": "サンドボックスモード",
     "Save": "保存",
     "Save all settings": "すべての設定を保存",
@@ -3048,6 +3255,7 @@
     "Scenario Templates": "シナリオテンプレート",
     "Scheduled channel tests": "スケジュールされたチャネルテスト",
     "scheduling controls": "スケジューリング制御",
+    "Science": "科学",
     "Scope": "スコープ",
     "Scopes": "スコープ",
     "Search": "検索",
@@ -3072,6 +3280,7 @@
     "Search products...": "商品を検索...",
     "Search rules...": "ルールを検索…",
     "Search tags...": "タグを検索...",
+    "Search the public web at inference time": "推論時に公開ウェブを検索",
     "Search vendors...": "ベンダーを検索...",
     "Search...": "検索...",
     "seconds": "秒",
@@ -3099,7 +3308,11 @@
     "Select an operation mode and enter the amount": "操作モードを選択し、金額を入力してください",
     "Select announcement type": "アナウンスメントタイプを選択",
     "Select at least one field to overwrite.": "上書きするフィールドを少なくとも 1 つ選択してください。",
+    "Select border radius": "角丸を選択",
     "Select channel type": "チャネルタイプを選択",
+    "Select color preset": "カラープリセットを選択",
+    "Select content width": "コンテンツ幅を選択",
+    "Select corner radius": "角の丸みを選択",
     "Select currency": "通貨を選択",
     "Select date": "日付を選択",
     "Select default chart": "デフォルトチャートを選択",
@@ -3109,10 +3322,11 @@
     "Select from presets or type custom identifier.": "プリセットから選択するか、カスタム識別子を入力してください。",
     "Select granularity": "粒度を選択",
     "Select groups (leave empty to keep current)": "グループを選択 (現在の設定を維持するには空のままにしてください)",
+    "Select interface density": "インターフェイスの密度を選択",
     "Select items...": "項目を選択...",
     "Select key format": "キーフォーマットを選択",
-    "Select Language": "言語を選択",
     "Select language": "言語を選択",
+    "Select Language": "言語を選択",
     "Select layout style": "レイアウトスタイルを選択",
     "Select locations": "ロケーションを選択",
     "Select Model": "モデルを選択",
@@ -3140,6 +3354,7 @@
     "Select the API endpoint region": "APIエンドポイントのリージョンを選択",
     "Select the fields you want to overwrite with upstream data. Unselected fields keep their local values.": "アップストリームデータで上書きしたいフィールドを選択してください。選択されていないフィールドはローカル値を保持します。",
     "Select theme preference": "テーマの好みを選択",
+    "Select theme preset": "テーマプリセットを選択",
     "Select time granularity": "時間の粒度を選択",
     "Select vendor": "ベンダーを選択",
     "Selectable groups": "選択可能なグループ",
@@ -3176,9 +3391,9 @@
     "Set quota amount and limits": "クォータ量と制限を設定",
     "Set Request Header": "リクエストヘッダーを設定",
     "Set runtime request header: override entire value, or manipulate comma-separated tokens": "ランタイムリクエストヘッダーを設定：値全体を上書き、またはカンマ区切りトークンを操作",
-    "Set the language used across the interface": "インターフェースで使用する言語を設定します",
     "Set Tag": "タグを設定",
     "Set tag for selected channels": "選択したチャネルにタグを設定",
+    "Set the language used across the interface": "インターフェースで使用する言語を設定します",
     "Set the user's role (cannot be Root)": "ユーザーのロールを設定します（Rootにはできません）",
     "Setting saved": "設定が保存されました",
     "Setting up 2FA...": "2FAを設定中...",
@@ -3188,6 +3403,7 @@
     "Settings updated successfully": "設定が正常に更新されました",
     "Setup Instructions": "セットアップ手順",
     "Setup Two-Factor Authentication": "2要素認証を設定",
+    "Share": "シェア",
     "Share your link and earn rewards": "リンクを共有して報酬を獲得",
     "Shared configuration for all payment gateways": "すべての決済ゲートウェイの共有設定",
     "Shorten": "短縮",
@@ -3214,6 +3430,7 @@
     "Signed in via WeChat": "WeChat経由でサインインしました",
     "Signed in with Passkey": "パスキーでサインインしました",
     "Signed out": "サインアウトしました",
+    "Significant outages detected": "大規模な障害を検出",
     "Signing you in with {{provider}}": "{{provider}} でサインイン中",
     "SiliconFlow": "SiliconFlow",
     "Simple": "シンプル",
@@ -3271,6 +3488,7 @@
     "Status:": "ステータス：",
     "Stay": "残る",
     "Stay tuned though!": "引き続きご期待ください！",
+    "Steer behaviour with a system instruction": "システム指示でモデルの挙動を制御",
     "Step": "ステップ",
     "Stop": "停止",
     "Stop Retry": "リトライ停止",
@@ -3281,6 +3499,9 @@
     "Stream": "ストリーム",
     "Stream Mode": "ストリーミングモード",
     "Stream Status": "ストリーム状態",
+    "Stream tokens incrementally as they are generated": "トークンを生成と同時にストリーミング",
+    "Stream tokens via Server-Sent Events": "Server-Sent Events でトークンをストリーミング",
+    "Streaming": "ストリーミング",
     "String Replace": "文字列置換",
     "Stripe": "Stripe",
     "Stripe API key (leave blank unless updating)": "Stripe APIキー（更新する場合を除き空白のままにしてください）",
@@ -3288,6 +3509,7 @@
     "Stripe Gateway": "Stripeゲートウェイ",
     "Stripe product price ID": "Stripe製品価格ID",
     "Stripe/Creem requires creating products on the third-party platform and entering the ID": "Stripe/Creem はサードパーティプラットフォームで商品を作成し、IDを入力する必要があります",
+    "Structured output": "構造化出力",
     "Submit": "送信",
     "Submit directly": "直接送信",
     "Submit Result": "結果を送信",
@@ -3315,13 +3537,17 @@
     "Suffix": "サフィックス",
     "Suffix Match": "サフィックス一致",
     "SunoAPI": "SunoAPI",
+    "Sunset Glow": "サンセットグロウ",
     "Super Admin": "スーパー管理者",
     "Support for high concurrency with automatic load balancing": "自動ロードバランシングによる高並行性のサポート",
     "Supported Imagine Models": "対応Imagineモデル",
+    "Supported modalities": "サポートされるモダリティ",
+    "Supported parameters": "対応パラメータ",
     "Supported variables": "サポートされる変数",
     "Supports `-thinking`, `-thinking-": "「-thinking」、「-thinking-」をサポートします",
     "Supports HTML markup or iframe embedding. Enter HTML code directly, or provide a complete URL to automatically embed it as an iframe.": "HTMLマークアップまたはiframe埋め込みをサポートします。HTMLコードを直接入力するか、完全なURLを提供してiframeとして自動的に埋め込みます。",
     "Supports PNG, JPG, SVG, or WebP. Recommended size: 128×128 or smaller.": "PNG、JPG、SVG、WebPに対応。推奨サイズ: 128×128以下。",
+    "Sustained tokens per second": "持続的な毎秒トークン数",
     "Swap Face": "顔入れ替え",
     "Switch affinity on success": "成功時にアフィニティを切替",
     "Switch between the new frontend and the classic frontend. Changes take effect after page reload.": "新フロントエンドとクラシックフロントエンドを切り替えます。保存後、ページを再読み込みすると反映されます。",
@@ -3341,6 +3567,7 @@
     "System Announcements": "システムのお知らせ",
     "System Behavior": "システムの動作",
     "System data statistics": "システムデータ統計",
+    "System default": "システムデフォルト",
     "System Information": "システム情報",
     "System initialized successfully! Redirecting…": "システムが正常に初期化されました！リダイレクト中…",
     "System logo": "システムロゴ",
@@ -3351,6 +3578,7 @@
     "System name is required": "システム名は必須です",
     "System Notice": "システムからのお知らせ",
     "System Performance Monitoring": "システムパフォーマンス監視",
+    "System prompt": "システムプロンプト",
     "System Prompt": "システムプロンプト",
     "System Prompt Concatenation": "システムプロンプトの連結",
     "System Prompt Override": "システムプロンプト上書き",
@@ -3402,7 +3630,11 @@
     "Test Model": "モデルをテスト",
     "Testing all enabled channels started. Please refresh to see results.": "有効な全チャネルのテストを開始しました。結果を確認するにはページを更新してください。",
     "Testing...": "テスト中...",
+    "Text": "テキスト",
+    "Text description of the desired image": "生成したい画像のテキスト説明",
+    "Text description of the desired video": "生成したい動画のテキスト説明",
     "Text Input": "テキスト入力",
+    "Text or array of texts to embed": "ベクトル化するテキストまたは配列",
     "Text Output": "テキスト出力",
     "Text to Video": "テキストから動画",
     "The administrator account is already initialized. You can keep your existing credentials and continue to the next step.": "管理者アカウントはすでに初期化されています。既存の認証情報を保持して、次のステップに進むことができます。",
@@ -3429,6 +3661,7 @@
     "The unique name for this vendor": "このベンダーの一意の名前",
     "The URL for this chat client.": "このチャットクライアントのURL。",
     "Theme": "テーマ",
+    "Theme preset": "テーマプリセット",
     "Theme Settings": "テーマ設定",
     "There are both add and remove models pending, but you only selected one type. Confirm submitting only the selected items?": "追加と削除の両方のモデルが保留中ですが、一方のタイプのみ選択されています。選択した項目のみ送信してよろしいですか？",
     "These models are still in your selection but were not returned by the upstream listing. Entries that are only model_mapping source aliases are omitted. Toggle to adjust before saving.": "これらはまだ選択中ですが上流のリストにありません。model_mapping にのみソース別名として載る名前は除外されています。保存前に選択を調整してください。",
@@ -3472,7 +3705,11 @@
     "This will permanently delete user": "これによりユーザーが完全に削除されます",
     "This will permanently remove all log entries created before {{date}}.": "{{date}} より前に作成されたすべてのログエントリが完全に削除されます。",
     "This will permanently remove log entries before the selected timestamp.": "選択したタイムスタンプより前のログエントリが完全に削除されます。",
+    "This year": "今年",
     "Three steps to get started": "3ステップで始める",
+    "Throughput": "スループット",
+    "Throughput by group": "グループ別スループット",
+    "Throughput trend": "スループット推移",
     "Tier": "ティア",
     "Tier name": "ティア名",
     "Tiered": "段階的",
@@ -3514,21 +3751,41 @@
     "Token Name": "トークン名",
     "Token obtained from your Gotify application": "Gotifyアプリケーションから取得したトークン",
     "Token regenerated and copied to clipboard": "トークンが再生成され、クリップボードにコピーされました",
+    "Token share by model author across the last 24 hours": "過去 24 時間におけるモデル提供者別のトークンシェア",
+    "Token share by model author across the past few weeks": "過去数週間におけるモデル提供者別のトークンシェア",
+    "Token share by model author across the past month": "過去 1 か月におけるモデル提供者別のトークンシェア",
+    "Token share by model author across the past year": "過去 1 年間におけるモデル提供者別のトークンシェア",
+    "Token share by model author since launch": "リリース以降のモデル提供者別のトークンシェア",
     "Token unit": "トークン単位",
+    "Token usage by model since launch": "リリース以降のモデル別トークン使用量",
     "Token-based": "トークンベース",
+    "Tokenizer": "トークナイザー",
     "tokens": "トークン",
     "Tokens": "トークン",
+    "tokens / mo": "トークン / 月",
+    "Tokens by category": "カテゴリ別トークン",
     "Tokens Only": "トークンのみ",
     "Tokens per minute": "1分あたりのトークン",
+    "Tokens since launch": "リリース以降のトークン",
     "Tokens-only mode will show raw quota values regardless of this toggle.": "トークンのみモードでは、このトグルに関係なく生のクォータ値が表示されます。",
     "Too many files. Some were not added.": "ファイルが多すぎます。一部は追加されませんでした。",
+    "Tool / function declarations the model may call": "モデルが呼び出せるツール / 関数の宣言",
     "Tool identifier": "ツールID",
     "Tool price settings": "ツール価格設定",
     "Tool prices": "ツール価格",
+    "Tool-choice policy or specific tool name": "ツール選択ポリシーまたは具体的なツール名",
+    "Tools": "ツール",
     "Top {{count}}": "上位 {{count}}",
+    "Top app": "トップアプリ",
+    "Top apps": "人気アプリ",
+    "Top Apps": "人気アプリ",
+    "Top integrations using this model": "このモデルを利用する主要な連携",
+    "Top model": "トップモデル",
+    "Top models": "人気モデル",
     "Top Models": "トップモデル",
     "Top up balance and view billing history.": "残高をチャージし、請求履歴を確認。",
     "Top Users": "上位ユーザー",
+    "Top vendors": "人気ベンダー",
     "Top-up": "チャージ",
     "Top-up amount options": "トップアップ金額オプション",
     "Top-up Audit Info": "入金の監査情報",
@@ -3552,13 +3809,16 @@
     "Total Quota": "合計クォータ",
     "Total requests allowed per period. 0 = unlimited.": "期間ごとに許可されるリクエストの総数。0 = 無制限。",
     "Total requests made": "合計リクエスト数",
+    "Total tokens": "合計トークン",
     "Total Tokens": "合計トークン",
     "Total Usage": "総使用量",
     "Total:": "合計:",
     "TPM": "TPM",
     "Track per-request consumption to power usage analytics. Keeping this on increases database writes.": "リクエストごとの消費を追跡し、使用状況分析に利用します。これをオンにすると、データベースへの書き込みが増加します。",
     "Track usage, costs and performance with real-time analytics": "リアルタイム分析で使用量、コスト、パフォーマンスを追跡",
+    "Tracked apps": "追跡中のアプリ",
     "Tracks current account base limits and additional metered usage on Codex upstream.": "Codex 上でのアカウント基礎枠と追加従量の利用量を表示します。",
+    "Trading insights, accounting, advisory": "トレーディング分析・会計・アドバイザリー",
     "Transfer": "振替",
     "Transfer Amount": "振替金額",
     "Transfer failed": "転送に失敗しました",
@@ -3566,18 +3826,28 @@
     "Transfer successful": "転送が成功しました",
     "Transfer to Balance": "残高への振替",
     "Translate `-thinking` suffixes into Anthropic native thinking models while keeping pricing predictable.": "`-thinking` サフィックスをAnthropicネイティブの思考モデルに変換し、価格設定を予測可能に保ちます。",
+    "Translation": "翻訳",
     "Transparent Billing": "透明性のある請求",
+    "Trend": "トレンド",
+    "Trending down": "下降中",
+    "Trending up": "上昇中",
     "Trim leading/trailing whitespace": "先頭/末尾の空白を除去",
     "Trim Prefix": "プレフィックス削除",
     "Trim Space": "空白削除",
     "Trim Suffix": "サフィックス削除",
+    "Truncate embeddings to this many dimensions": "指定した次元数にベクトルを切り詰めます",
     "Trusted": "信頼済み",
     "Try adjusting your search to locate a missing model.": "見つからないモデルを見つけるには、検索を調整してみてください。",
+    "TTFT P50": "TTFT P50",
+    "TTFT P95": "TTFT P95",
+    "TTFT P99": "TTFT P99",
+    "TTFT percentiles, throughput, and 30-day uptime by group": "グループ別の TTFT 分位数、スループット、30 日間の稼働率",
     "TTL": "TTL",
     "TTL (seconds, 0 = default)": "TTL（秒、0 = デフォルト）",
     "TTL (seconds)": "TTL（秒）",
     "Tune selection priority, testing, status handling, and request overrides.": "選択優先度、テスト、ステータス処理、リクエスト上書きを調整します。",
     "Turnstile is enabled but site key is empty.": "Turnstile が有効ですが、サイトキーが空です。",
+    "Tutoring, learning aids, assessment": "個別指導・学習補助・評価",
     "Two-factor Authentication": "2要素認証",
     "Two-Factor Authentication": "2要素認証",
     "Two-factor authentication disabled": "二要素認証が無効になりました",
@@ -3602,6 +3872,8 @@
     "Unbind": "連携解除",
     "Unbind failed": "連携解除に失敗しました",
     "Unbound {{provider}}": "{{provider}}の連携を解除しました",
+    "Underground": "アンダーグラウンド",
+    "Understand image inputs alongside text": "テキストとともに画像入力を理解",
     "Unexpected release payload": "予期しないリリースデータ",
     "Unified API Gateway for": "統合APIゲートウェイ -",
     "Unique identifier for this group.": "このグループの一意の識別子。",
@@ -3618,6 +3890,7 @@
     "Untitled": "無題",
     "Untrusted upstream data:": "信頼されていないアップストリームデータ:",
     "Unused": "未使用",
+    "Up to 4 strings that stop generation": "生成を停止する文字列を最大 4 個まで",
     "Update": "更新",
     "Update All Balances": "すべての残高を更新",
     "Update API Key": "API キーを更新",
@@ -3642,6 +3915,7 @@
     "Update your password for account:": "アカウントのパスワードを更新:",
     "Update your password to keep your account secure": "アカウントを安全に保つためにパスワードを更新してください",
     "Updated": "更新されました",
+    "Updated daily": "毎日更新",
     "Updated successfully": "正常に更新されました",
     "Updating all channel balances. This may take a while. Please refresh to see results.": "すべてのチャネル残高を更新中です。これには少し時間がかかる場合があります。結果を確認するには更新してください。",
     "Upgrade Group": "グループをアップグレード",
@@ -3666,6 +3940,8 @@
     "Upstream Updates": "アップストリーム更新",
     "uptime": "稼働時間",
     "Uptime": "稼働時間",
+    "Uptime (30d)": "稼働率 (30 日)",
+    "Uptime (last 30 days)": "稼働率（過去 30 日間）",
     "Uptime Kuma": "稼働時間Kuma",
     "Uptime Kuma groups saved successfully": "Uptime Kuma グループが正常に保存されました",
     "Uptime Kuma URL": "稼働時間KUMA URL",
@@ -3684,6 +3960,7 @@
     "Use authenticator code": "認証コードを使用",
     "Use backup code": "バックアップコードを使用",
     "Use disk cache when request body exceeds this size": "リクエストボディがこのサイズを超えた場合にディスクキャッシュを使用",
+    "Use external tools to extend capabilities": "外部ツールを利用して機能を拡張",
     "Use our unified OpenAI-compatible endpoint in your applications": "アプリケーションでOpenAI互換の統一エンドポイントを使用",
     "Use Passkey to sign in without entering your password.": "パスワードを入力せずにサインインするには、パスキーを使用してください。",
     "Use secure connection when sending emails": "メール送信時に安全な接続を使用する",
@@ -3749,6 +4026,7 @@
     "Vendor deleted successfully": "ベンダーが正常に削除されました",
     "Vendor Name *": "ベンダー名 *",
     "Vendor:": "ベンダー:",
+    "Vendors ranked by aggregated token volume": "トークン総使用量で順位付けされたベンダー",
     "Verification code": "確認コード",
     "Verification Code": "認証コード",
     "Verification code must be 6 digits": "認証コードは6桁である必要があります",
@@ -3767,6 +4045,7 @@
     "Vertex AI does not support functionResponse.id. Enable this to remove the field automatically.": "Vertex AI は functionResponse.id フィールドをサポートしません。有効にすると自動的に削除します。",
     "Vertex AI Key Format": "Vertex AIキー形式",
     "Video": "動画",
+    "Video length in seconds": "動画の長さ（秒）",
     "Video Remix": "動画 Remix",
     "Vidu": "Vidu",
     "View": "表示",
@@ -3796,6 +4075,8 @@
     "Violation Marker": "違反マーカー",
     "vip": "vip",
     "VIP users with premium access": "プレミアムアクセス権を持つVIPユーザー",
+    "Vision": "ビジョン",
+    "Vision, image / video, document chat": "ビジョン・画像/動画・ドキュメントチャット",
     "Visit Settings → General and adjust quota options...": "「設定」→「一般」にアクセスして、クォータオプションを調整してください...",
     "Visitors must authenticate before accessing the pricing directory.": "訪問者は料金ディレクトリにアクセスする前に認証を行う必要があります。",
     "Visual": "ビジュアル",
@@ -3806,6 +4087,7 @@
     "Visual Mode": "ビジュアルモード",
     "Visual Parameter Override": "パラメータ上書きのビジュアル編集",
     "VolcEngine": "VolcEngine",
+    "vs. previous": "前期比",
     "Waffo Pancake Payment Gateway": "Waffo Pancake 決済ゲートウェイ",
     "Waffo Payment": "Waffo決済",
     "Waffo Payment Gateway": "Waffo決済ゲートウェイ",
@@ -3826,6 +4108,7 @@
     "We could not load the setup status.": "セットアップステータスを読み込めませんでした。",
     "We will prompt your device to confirm using biometrics or your hardware key.": "生体認証またはハードウェアキーを使用して確認するよう、デバイスにプロンプトが表示されます。",
     "We'll be back online shortly.": "まもなくオンラインに戻ります。",
+    "Web search": "ウェブ検索",
     "Web Search": "Web 検索",
     "Webhook Configuration:": "Webhook設定:",
     "Webhook public key (production)": "Webhook 公開鍵（本番）",
@@ -3845,6 +4128,9 @@
     "Week": "週",
     "Weekday": "曜日",
     "Weekly": "毎週",
+    "Weekly token usage by model across the past few weeks": "過去数週間にわたるモデル別の週次トークン使用量",
+    "Weekly token usage by model across the past year": "過去1年のモデル別週次トークン使用量",
+    "Weekly token usage by model since launch": "ローンチ以降のモデル別週次トークン使用量",
     "Weekly Window": "週間ウィンドウ",
     "Weight": "ウェイト",
     "Welcome back!": "おかえりなさい！",
@@ -3869,7 +4155,9 @@
     "Whitelist (Only allow listed IPs)": "ホワイトリスト (リストされたIPのみを許可)",
     "whsec_xxx": "whsec_xxx",
     "Window:": "ウィンドウ：",
+    "Wire encoding for the embedding vectors": "ベクトルの転送エンコーディング",
     "with conflicts": "競合あり",
+    "with the API key from your token settings.": "をトークン設定の API キーに置き換えてください。",
     "Without additional conditions, only the type above is used for pruning.": "追加条件がない場合、上記のtypeのみが削除に使用されます。",
     "Worker Access Key": "Workerアクセスキー",
     "Worker Proxy": "Workerプロキシ",
@@ -3880,6 +4168,7 @@
     "xAI": "xAI",
     "Xinference": "Xinference",
     "Xunfei": "Xunfei",
+    "Year": "年",
     "years": "年",
     "You are about to delete {{count}} API key(s).": "{{count}}個のAPIキーを削除しようとしています。",
     "You are running the latest version ({{version}}).": "最新バージョン ({{version}}) を使用中です。",
@@ -3907,6 +4196,7 @@
     "Your Telegram Bot Token": "あなたのTelegramボットトークン",
     "Your Turnstile secret key": "あなたのTurnstileシークレットキー",
     "Your Turnstile site key": "あなたのTurnstileサイトキー",
+    "Zero retention": "データ保持なし",
     "Zhipu": "Zhipu",
     "Zhipu V4": "Zhipu V 4",
     "Zoom": "ズーム"
diff --git a/web/default/src/i18n/locales/ru.json b/web/default/src/i18n/locales/ru.json
index 9aa4991a097..d6fa68831fb 100644
--- a/web/default/src/i18n/locales/ru.json
+++ b/web/default/src/i18n/locales/ru.json
@@ -28,16 +28,22 @@
     "{{count}} days remaining": "Осталось {{count}} дней",
     "{{count}} disabled channel(s) deleted": "Удалено {{count}} отключённых каналов",
     "{{count}} hours ago": "{{count}} часов назад",
+    "{{count}} incidents": "{{count}} инцидентов",
+    "{{count}} incidents in the last 30 days": "{{count}} инцидентов за последние 30 дней",
     "{{count}} IP(s)": "{{count}} IP",
     "{{count}} log entries removed.": "Удалено {{count}} записей журнала.",
     "{{count}} minutes ago": "{{count}} минут назад",
     "{{count}} model(s)": "{{count}} модел(ей)",
+    "{{count}} models": "моделей: {{count}}",
     "{{count}} months ago": "{{count}} месяцев назад",
     "{{count}} override": "{{count}} переопределений",
     "{{count}} tiers": "{{count}} уровней",
+    "{{count}} vendors": "поставщиков: {{count}}",
     "{{count}} weeks ago": "{{count}} недель назад",
     "{{field}} updated to {{value}}": "{{field}} обновлено на {{value}}",
     "{{field}} updated to {{value}} for tag: {{tag}}": "{{field}} обновлено на {{value}} для тега: {{tag}}",
+    "{{modality}} not supported": "{{modality}} не поддерживается",
+    "{{modality}} supported": "{{modality}} поддерживается",
     "{{n}} model(s) selected": "Выбрано моделей: {{n}}",
     "{{value}}ms": "{{value}} мс",
     "{{value}}s": "{{value}} с",
@@ -45,9 +51,13 @@
     "@lobehub/icons key name": "Имя ключа @lobehub/icons",
     "/status/": "/status/",
     "/your/endpoint": "/your/endpoint",
+    "#1 App": "#1 Приложение",
+    "#1 by usage": "№1 по использованию",
+    "#1 Model": "#1 Модель",
     "% off": "скидка",
     "`, and `-nothinking` suffixes while routing to the correct Gemini variant.": "суффиксы `, и `-nothinking` при маршрутизации к правильному варианту Gemini.",
     "© 2025 Your Company. All rights reserved.": "© 2025 Ваша Компания. Все права защищены.",
+    "+{{count}} more": "ещё {{count}}",
     "| Based on": "| На основе",
     "0 means unlimited": "0 означает без ограничений",
     "1 Day": "1 день",
@@ -75,6 +85,7 @@
     "3. Enter your Gotify server URL and token above": "3. Введите URL вашего сервера Gotify и токен выше",
     "30 Days": "30 дней",
     "30 days ago": "30 дней назад",
+    "30d change": "Изменение за 30 дней",
     "5-Hour Window": "5-часовое окно",
     "50 / page": "50 / страница",
     "7 Days": "7 дней",
@@ -97,12 +108,15 @@
     "Account ID *": "ID аккаунта *",
     "Account Info": "Информация об аккаунте",
     "Account used when authenticating with the SMTP server": "Учетная запись, используемая при аутентификации с SMTP-сервером",
+    "Across all groups": "По всем группам",
     "Action confirmation": "Подтверждение действия",
     "Actions": "Операции",
     "active": "активный",
     "Active": "Активна",
+    "Active apps": "Активные приложения",
     "Active Cache Count": "Активных кэшей",
     "Active Files": "Активных файлов",
+    "Active models": "Активные модели",
     "active users": "активных пользователей",
     "Actual Amount": "Фактическая сумма",
     "Actual Model": "Фактическая модель",
@@ -190,12 +204,18 @@
     "Advanced platform configuration.": "Расширенная настройка платформы.",
     "Advanced Settings": "Расширенные настройки",
     "Advanced text editing": "Расширенное редактирование текста",
+    "Aesthetic style": "Стиль",
     "After clicking the button, you'll be asked to authorize the bot": "После нажатия кнопки вам будет предложено авторизовать бота",
     "After disabling, it will no longer be shown to users, but historical orders are not affected. Continue?": "После отключения план не будет отображаться пользователям, но исторические заказы не затронуты. Продолжить?",
     "After enabling, the plan will be shown to users. Continue?": "После включения план будет отображаться пользователям. Продолжить?",
     "After invalidating, this subscription will be immediately deactivated. Historical records are not affected. Continue?": "После аннулирования подписка будет немедленно деактивирована. Исторические записи не затронуты. Продолжить?",
     "After scanning, the binding will complete automatically": "После сканирования привязка завершится автоматически",
     "Agent ID *": "Идентификатор агента *",
+    "Aggregate tokens delivered across the platform": "Совокупное количество токенов, доставленных платформой",
+    "Aggregate traffic across every category": "Совокупный трафик по всем категориям",
+    "Aggregated across enabled groups": "Агрегировано по включённым группам",
+    "Aggregated across the apps below": "Агрегировано по приложениям ниже",
+    "Aggregated traffic by upstream model provider": "Агрегированный трафик по поставщикам моделей",
     "Aggregated usage metrics and trend charts.": "Агрегированные метрики использования и графики трендов.",
     "aggregates 50+ AI providers behind one unified API. Manage access, track costs, and scale effortlessly.": "объединяет 50+ ИИ-провайдеров за единым API. Управляйте доступом, отслеживайте затраты и масштабируйтесь без усилий.",
     "AGPL v3.0 License": "Лицензия AGPL v3.0",
@@ -209,19 +229,23 @@
     "AK/SK mode: use AccessKey|SecretAccessKey|Region": "Режим AK/SK: используйте AccessKey|SecretAccessKey|Region",
     "Ali": "Ali",
     "All": "Все",
+    "All categories": "Все категории",
     "All edits are overwrite operations. Leave fields empty to keep current values unchanged.": "Все изменения являются операциями перезаписи. Оставьте поля пустыми, чтобы сохранить текущие значения без изменений.",
     "All files exceed the maximum size.": "Все файлы превышают максимальный размер.",
     "All Groups": "Все группы",
     "All Models": "Все модели",
     "All models in use are properly configured.": "Все используемые модели настроены правильно.",
     "All Must Match (AND)": "Все должны совпасть (AND)",
+    "All requests must include": "Все запросы должны содержать",
     "All Status": "Все статусы",
     "All Sync Status": "Все статусы синхронизации",
+    "All systems operational": "Все системы работают штатно",
     "All Tags": "Все теги",
     "All Types": "Все типы",
     "All upstream data is trusted": "Все вышестоящие данные являются доверенными",
     "All Vendors": "Все поставщики",
     "All Your AI Models": "Все ваши ИИ-модели",
+    "All-time": "За всё время",
     "Allocated Memory": "Выделенная память",
     "Allow accountFilter parameter": "Разрешить параметр accountFilter",
     "Allow Claude beta query passthrough": "Разрешить проброс бета-запросов Claude",
@@ -279,6 +303,7 @@
     "Answer": "Ответ",
     "Anthropic": "Anthropic",
     "Any Match (OR)": "Любое совпадение (OR)",
+    "API": "API",
     "API Access": "Доступ к API",
     "API Addresses": "Адреса API",
     "API Base URL (Important: Not Chat API) *": "Базовый URL API (Важно: Не Chat API) *",
@@ -312,6 +337,8 @@
     "API URL": "URL API",
     "API usage records": "Записи использования API",
     "API2GPT": "API2GPT",
+    "App": "Приложение",
+    "App rankings shown here are simulated for preview purposes and will be replaced with live usage data once the backend integration is complete.": "Показанный рейтинг приложений сгенерирован для предпросмотра и будет заменён реальными данными после интеграции бэкенда.",
     "Append": "Добавить в конец",
     "Append mode: New keys will be added to the end of the existing key list": "Режим добавления: Новые ключи будут добавлены в конец существующего списка ключей",
     "Append Template": "Добавить шаблон",
@@ -329,6 +356,10 @@
     "Apply Sync": "Применить синхронизацию",
     "Applying...": "Применение...",
     "Approx.": "Примерно.",
+    "apps": "приложений",
+    "Apps": "Приложения",
+    "apps tracked": "приложений отслеживается",
+    "Apps using the most tokens through new-api": "Приложения, использующие больше всего токенов через new-api",
     "are also listed here. Remove them from Models to keep the `/v1/models` response user-friendly and hide vendor-specific names.": "также перечислены здесь. Удалите их из Моделей, чтобы ответ `/v1/models` был удобным для пользователя и скрывал имена, специфичные для поставщиков.",
     "Are you sure you want to delete": "Вы уверены, что хотите удалить",
     "Are you sure you want to delete all auto-disabled keys? This action cannot be undone.": "Вы уверены, что хотите удалить все автоматически отключённые ключи? Это действие нельзя отменить.",
@@ -397,6 +428,7 @@
     "Available Models": "Доступные модели",
     "Available Rewards": "Доступные награды",
     "Average RPM": "Среднее число оборотов в минуту",
+    "Average tokens per second sustained per group": "Средняя устойчивая пропускная способность (токенов/с) по группам",
     "Average TPM": "Среднее число транзакций в минуту",
     "AWS": "AWS",
     "AWS Bedrock Claude Compat": "AWS Bedrock Claude совместимость",
@@ -428,6 +460,7 @@
     "Base amount. Actual deduction = base amount × system group rate.": "Базовая сумма. Фактический вычет = базовая сумма × коэффициент группы.",
     "Base Limits": "Базовые лимиты",
     "Base multipliers applied when users select specific groups.": "Базовые множители, применяемые, когда пользователи выбирают определенные группы.",
+    "Base Price": "Базовая цена",
     "Base rate limit windows for this account.": "Окна базовых лимитов для этого аккаунта.",
     "Base URL": "Адрес API",
     "Base URL of your Uptime Kuma instance": "Базовый URL вашего экземпляра Uptime Kuma",
@@ -448,6 +481,7 @@
     "Batch processing failed": "Пакетная обработка не удалась",
     "Batch upstream model updates applied: {{channels}} channels, {{added}} added, {{removed}} removed, {{fails}} failed": "Пакетное обновление моделей: {{channels}} каналов, {{added}} добавлено, {{removed}} удалено, {{fails}} ошибок",
     "Best for single-tenant deployments. Pricing and billing options stay hidden.": "Лучший вариант для однопользовательских развёртываний. Опции ценообразования и биллинга будут скрыты.",
+    "Best TTFT": "Лучший TTFT",
     "Billing": "Биллинг",
     "Billing currency": "Валюта оплаты",
     "Billing Details": "Детали биллинга",
@@ -474,6 +508,7 @@
     "Blocked keywords": "Заблокированные ключевые слова",
     "Blocks messages when sensitive keywords are detected.": "Блокирует сообщения при обнаружении конфиденциальных ключевых слов.",
     "Body param": "Параметр тела запроса",
+    "Border radius": "Радиус скругления",
     "Bot Name": "Имя бота",
     "Bot Protection": "Защита от ботов",
     "Bot Token": "Токен бота",
@@ -485,7 +520,7 @@
     "Broadcast a global banner to users. Markdown is supported.": "Транслировать глобальный баннер пользователям. Поддерживается Markdown.",
     "Broadcast short system notices on the dashboard": "Транслировать короткие системные уведомления на панели управления",
     "Browse and compare": "Просмотр и сравнение",
-    "Discover curated AI models, compare pricing and capabilities, and choose the right model for every scenario.": "Откройте для себя подобранные AI-модели, сравнивайте цены и возможности и выбирайте подходящую модель для каждого сценария.",
+    "Browse rankings by category": "Просмотр рейтингов по категориям",
     "Budget tokens = max tokens × ratio. Accepts a decimal between 0.002 and 1. Recommended to keep aligned with upstream billing.": "Бюджетные токены = макс. токены × соотношение. Принимает десятичное число от 0.002 до 1. Рекомендуется поддерживать в соответствии с биллингом вышестоящего провайдера.",
     "Budget tokens = max tokens × ratio. Accepts a decimal between 0.1 and 1.": "Бюджетные токены = макс. токены × соотношение. Принимает десятичное число от 0.1 до 1.",
     "Budget Tokens Ratio": "Соотношение бюджетных токенов",
@@ -495,6 +530,8 @@
     "Built-in Device": "Встроенное устройство",
     "Built-in: phone fingerprint/face, or Windows Hello; External: USB security key": "Встроенное: отпечаток пальца/лицо телефона или Windows Hello; Внешнее: USB-ключ безопасности",
     "by": "от",
+    "By category": "По категориям",
+    "By model author": "По автору модели",
     "Cache": "Кэш",
     "Cache Creation": "Создание кэша",
     "Cache Creation (1h)": "Создание кэша (1h)",
@@ -506,6 +543,7 @@
     "Cache mode": "Режим кэша",
     "Cache ratio": "Коэффициент кэша",
     "Cache Read": "Чтение кэша",
+    "Cache repeated prompt prefixes for cheaper, faster reuse": "Кэшировать повторяющиеся префиксы промптов для дешёвого и быстрого повторного использования",
     "Cache write": "Запись кэша",
     "Cache Write": "Запись в кэш",
     "Cache Write (1h)": "Запись кэша (1h)",
@@ -527,13 +565,16 @@
     "Cancel": "Отмена",
     "Cancelled": "Отменено",
     "Cancelled at": "Отменено",
+    "Capabilities": "Возможности",
     "Capture a reusable bundle of models, tags, or endpoints.": "Создайте повторно используемый набор моделей, тегов или конечных точек.",
     "Card view": "Карточки",
+    "Category": "Категория",
     "Category Name": "Название категории",
     "Category name is required": "Название категории обязательно",
     "Category name must be less than 50 characters": "Название категории должно содержать менее 50 символов",
     "Caution": "Внимание",
     "CC Switch": "CC переключение",
+    "Centered": "По центру",
     "Chain": "Цепочка",
     "Change": "Изменить",
     "Change language": "Изменить язык",
@@ -563,6 +604,7 @@
     "channel(s)? This action cannot be undone.": "канал(ы)? Это действие нельзя отменить.",
     "Channels": "Каналы",
     "Channels deleted successfully": "Каналы успешно удалены",
+    "Character chat, storytelling, persona": "Диалог с персонажем, сторителлинг, персона",
     "Chart Preferences": "Настройки графиков",
     "Chart Settings": "Настройки диаграммы",
     "Chat": "Чат",
@@ -632,6 +674,7 @@
     "Cleared all models": "Все модели очищены",
     "Click \"Create Plan\" to create your first subscription plan": "Нажмите «Создать план», чтобы создать первый план подписки",
     "Click \"Generate\" to create a token": "Нажмите \"Сгенерировать\", чтобы создать токен",
+    "Click any category to drill into its models, apps, and trends": "Нажмите на категорию, чтобы изучить её модели, приложения и тренды",
     "Click for details": "Нажмите для подробностей",
     "Click save when you're done.": "Нажмите «Сохранить», когда закончите.",
     "Click save when you&apos;re done.": "Нажмите сохранить, когда закончите.",
@@ -655,6 +698,9 @@
     "CNY": "Юань",
     "CNY per USD": "CNY за USD",
     "Code": "Код",
+    "Code generation, refactoring, autocomplete": "Генерация кода, рефакторинг, автодополнение",
+    "Code interpreter": "Интерпретатор кода",
+    "Code samples": "Примеры кода",
     "Codes copied!": "Коды скопированы!",
     "Codex": "Codex",
     "Codex Account & Usage": "Аккаунт и использование Codex",
@@ -666,7 +712,9 @@
     "Collapse All": "Свернуть все",
     "Color": "Цвет",
     "Color is required": "Цвет обязателен",
+    "Color preset": "Цветовая предустановка",
     "Color:": "Цвет:",
+    "Comfortable": "Просторная",
     "Coming Soon!": "Скоро!",
     "Comma-separated exact model names. Prefix with regex: to ignore by regular expression.": "Точные имена моделей через запятую. Добавьте префикс regex:, чтобы игнорировать по регулярному выражению.",
     "Comma-separated list of allowed ports (empty = all ports)": "Список разрешенных портов, разделенных запятыми (пусто = все порты)",
@@ -679,6 +727,13 @@
     "Common ports include 25, 465, and 587": "Распространенные порты включают 25, 465 и 587",
     "Common User": "Обычный пользователь",
     "Community driven, self-hosted, and extensible": "Развивается сообществом, поддерживает самостоятельное размещение и расширение",
+    "Compact": "Компактная",
+    "Compare each vendor's token share across the past few weeks": "Сравните долю токенов каждого поставщика за последние несколько недель",
+    "Compare each vendor's token share across the past year": "Сравните долю токенов каждого поставщика за последний год",
+    "Compare each vendor's token share over the past 24 hours": "Сравните долю токенов каждого поставщика за последние 24 часа",
+    "Compare each vendor's token share over the past month": "Сравните долю токенов каждого поставщика за последний месяц",
+    "Compare each vendor's token share since launch": "Сравните долю токенов каждого поставщика с момента запуска",
+    "Compare the most popular models on the platform": "Сравните самые популярные модели на платформе",
     "compatible API routes": "совместимых API-маршрутов",
     "Compatible API routes for common AI application workflows": "Совместимые API-маршруты для типовых сценариев ИИ-приложений",
     "Complete API documentation with multi-language SDK support": "Полная документация API с поддержкой SDK на нескольких языках",
@@ -792,6 +847,8 @@
     "Content displayed on the home page (supports Markdown)": "Содержимое, отображаемое на главной странице (поддерживает Markdown)",
     "Content not found.": "Контент не найден.",
     "Content not modified!": "Контент не изменён!",
+    "Content width": "Ширина контента",
+    "Context": "Контекст",
     "Continue": "Продолжить",
     "Continue with {{name}}": "Продолжить с {{name}}",
     "Continue with Discord": "Продолжить с Discord",
@@ -800,11 +857,13 @@
     "Continue with OIDC": "Продолжить с OIDC",
     "Continue with Telegram": "Продолжить с Telegram",
     "Continue with WeChat": "Продолжить с WeChat",
+    "Contract review, compliance, summarisation": "Анализ контрактов, комплаенс, резюме",
     "Control log retention and clean historical data.": "Контролировать хранение логов и очистку исторических данных.",
     "Control passthrough behavior and connection keep-alive settings": "Контролировать сквозное поведение и настройки поддержания соединения",
     "Control request frequency to prevent abuse and manage system load.": "Контролировать частоту запросов для предотвращения злоупотреблений и управления нагрузкой на систему.",
     "Control which models are exposed and which groups may use them.": "Управляйте тем, какие модели доступны и какие группы могут их использовать.",
     "Control which sidebar areas and modules are available to all users.": "Контролировать, какие области боковой панели и модули доступны всем пользователям.",
+    "Controls how much the model thinks before answering": "Регулирует глубину размышлений модели перед ответом",
     "Controls whether user verification (biometrics/PIN) is required during Passkey flows.": "Определяет, требуется ли проверка пользователя (биометрия/PIN) во время процессов Passkey.",
     "Conversion rate from USD to your custom currency": "Курс конвертации из USD в вашу пользовательскую валюту",
     "Convert reasoning_content to <think> tag in content": "Преобразовать reasoning_content в тег <think> в content",
@@ -845,6 +904,7 @@
     "Copy to clipboard": "Копировать в буфер обмена",
     "Copy token": "Копировать токен",
     "Copy URL": "Скопировать URL",
+    "Copywriting, ad creative, SEO": "Копирайтинг, рекламные креативы, SEO",
     "Core Configuration": "Основная конфигурация",
     "Core Features": "Основные функции",
     "Cost": "Стоимость",
@@ -936,6 +996,11 @@
     "Customize sidebar display content": "Настроить содержимое боковой панели",
     "Daily": "Ежедневно",
     "Daily Check-in": "Ежедневный вход",
+    "Daily token usage by model across the past few weeks": "Ежедневное использование токенов по моделям за последние несколько недель",
+    "Daily token usage by model across the past month": "Ежедневное использование токенов по моделям за последний месяц",
+    "Daily token usage by model over the past month": "Ежедневное использование токенов по моделям за последний месяц",
+    "Daily uptime over the last 30 days": "Ежедневная доступность за последние 30 дней",
+    "Daily uptime; {{incidents}} incidents totalling {{minutes}} minutes": "Ежедневная доступность; {{incidents}} инцидентов общей длительностью {{minutes}} мин.",
     "Dark": "Тёмная",
     "Dashboard": "Панель управления",
     "Dashboard Preferences": "Настройки панели управления",
@@ -944,6 +1009,7 @@
     "Data directory:": "Каталог данных:",
     "Data is stored locally on this device. Use system backups to keep a safe copy.": "Данные хранятся локально на этом устройстве. Используйте системные резервные копии для сохранения безопасной копии.",
     "Data management and log viewing": "Управление данными и просмотр логов",
+    "Data retention": "Хранение данных",
     "Database": "База данных",
     "Database check": "Проверка базы данных",
     "Date and time when this announcement should be displayed": "Дата и время отображения этого объявления",
@@ -956,6 +1022,7 @@
     "default": "по умолчанию",
     "Default": "По умолчанию",
     "Default (New Frontend)": "По умолчанию (Новый интерфейс)",
+    "Default / range": "По умолчанию / диапазон",
     "Default API Version *": "Версия API по умолчанию *",
     "Default API version for this channel": "Версия API по умолчанию для этого канала",
     "Default Collapse Sidebar": "Сворачивать боковую панель по умолчанию",
@@ -972,6 +1039,7 @@
     "Define API endpoints for this model (JSON format)": "Определить конечные точки API для этой модели (формат JSON)",
     "Define endpoint mappings for each provider.": "Определите сопоставления конечных точек для каждого провайдера.",
     "Define per-group rules to add, remove, or append selectable groups for specific user groups.": "Определите правила для групп, чтобы добавлять, удалять или дополнять доступные группы для конкретных групп пользователей.",
+    "Degraded performance recently": "Недавно наблюдалось снижение производительности",
     "Delete": "Удалить",
     "Delete (": "Удалить (",
     "Delete {{count}} API key(s)?": "Удалить {{count}} API-ключ(а/ей)?",
@@ -1009,6 +1077,7 @@
     "Demo site mode": "Режим демо-сайта",
     "Demo Site Mode": "Режим демонстрационного сайта",
     "Demote": "Понизить версию",
+    "Density": "Плотность",
     "Deploy your own gateway and start routing requests through your configured upstream services.": "Разверните собственный шлюз и начните маршрутизировать запросы через настроенные вышестоящие сервисы.",
     "Deployment created successfully": "Развертывание создано успешно",
     "Deployment details": "Детали развертывания",
@@ -1035,6 +1104,7 @@
     "Detection complete: {{add}} to add, {{remove}} to remove": "Обнаружение завершено: {{add}} для добавления, {{remove}} для удаления",
     "Detection failed": "Обнаружение не удалось",
     "Determines how this group is applied elsewhere.": "Определяет, как эта группа применяется в других местах.",
+    "Deterministic sampling seed (best-effort)": "Сид детерминированного сэмплирования (по возможности)",
     "Developer Friendly": "Удобно для разработчиков",
     "Device Type Preference": "Предпочтения типа устройства",
     "Dify": "Dify",
@@ -1069,6 +1139,9 @@
     "Discount Rate:": "Ставка скидки:",
     "Discount ratio for cache hits.": "Коэффициент скидки для попаданий в кэш.",
     "Discouraged": "Не рекомендуется",
+    "Discover curated AI models, compare pricing and capabilities, and choose the right model for every scenario.": "Откройте для себя подобранные AI-модели, сравнивайте цены и возможности и выбирайте подходящую модель для каждого сценария.",
+    "Discover the leading models in each domain": "Откройте для себя ведущие модели в каждой области",
+    "Discover the most-used models, top apps, and rising vendors on the platform — updated continuously across every category.": "Узнайте, какие модели, приложения и поставщики лидируют на платформе — данные обновляются по каждой категории.",
     "Discovering...": "Обнаружение...",
     "Disk cache cleared": "Дисковый кэш очищен",
     "Disk Cache Settings": "Настройки дискового кэша",
@@ -1191,6 +1264,7 @@
     "Edit Vendor": "Редактировать поставщика",
     "edit_this": "изменить_это",
     "Editor mode": "Режим редактора",
+    "Education": "Образование",
     "Email": "Электронная почта",
     "Email (required for verification)": "Email (требуется для верификации)",
     "Email Address": "Адрес электронной почты",
@@ -1200,6 +1274,7 @@
     "Email Domain Whitelist": "Белый список доменов Email",
     "Email Field": "Поле email",
     "Email Verification": "Верификация Email",
+    "Email, summarisation, knowledge work": "Электронная почта, резюме, knowledge work",
     "Embeddings": "Встраивания",
     "Empty value will be saved as {}.": "Пустое значение будет сохранено как {}.",
     "Enable": "Включить",
@@ -1247,10 +1322,12 @@
     "Enabled all channels with tag: {{tag}}": "Все каналы с тегом {{tag}} включены",
     "Enabled Status": "Статус включения",
     "Enabling...": "Включается...",
+    "Encourages introducing new topics": "Поощряет введение новых тем",
     "End": "End",
     "End Error": "Ошибка завершения",
     "End Reason": "Причина завершения",
     "End Time": "Время окончания",
+    "End-user identifier for abuse monitoring": "Идентификатор конечного пользователя для мониторинга злоупотреблений",
     "Endpoint": "Точка доступа",
     "Endpoint config": "Конфигурация конечной точки",
     "Endpoint Configuration": "Конфигурация конечной точки",
@@ -1358,10 +1435,12 @@
     "Excellent": "Отлично",
     "Exchange rate is required": "Требуется курс обмена",
     "Exchange rate must be greater than 0": "Курс обмена должен быть больше 0",
+    "Execute code in a sandbox during the response": "Выполнять код в песочнице во время ответа",
     "Exhausted": "Исчерпано",
     "Existing account will be reused": "Существующая учётная запись будет использована повторно",
     "Existing Models ({{count}})": "Существующие модели ({{count}})",
     "Exists": "Существует",
+    "Expand": "Развернуть",
     "Expand All": "Развернуть все",
     "Expected a JSON array.": "Ожидается JSON-массив.",
     "Experiment with prompts and models in real time.": "Экспериментируйте с промптами и моделями в реальном времени.",
@@ -1530,6 +1609,7 @@
     "Field Mapping": "Сопоставление полей",
     "Field passthrough controls": "Полевые сквозные элементы управления",
     "Field Path": "Путь к полю",
+    "File": "Файл",
     "File Search": "Поиск файлов",
     "Files to Retain": "Файлов для хранения",
     "Fill All Models": "Заполнить все модели",
@@ -1569,6 +1649,7 @@
     "Final Consumed": "Итоговое потребление",
     "Final cost = base × multiplier when conditions match": "Итоговая стоимость = база × множитель, если условия совпадают",
     "Final price multiplier (0.95 = 5% discount": "Конечный множитель цены (0.95 = скидка 5%",
+    "Finance": "Финансы",
     "Fine-tune Midjourney integration and guardrails.": "Тонкая настройка интеграции Midjourney и защитных механизмов.",
     "Finish Time": "Время завершения",
     "First/Last Frame to Video": "Первый/последний кадр в видео",
@@ -1576,6 +1657,7 @@
     "Fixed abilities: {{success}} succeeded, {{fails}} failed": "Исправление способностей: {{success}} успешно, {{fails}} неудачно",
     "Fixed price": "Фиксированная цена",
     "Fixed price (USD)": "Фиксированная цена (USD)",
+    "Floating": "Плавающая",
     "FluentRead extension not detected. Please ensure it is installed and active.": "Расширение FluentRead не обнаружено. Убедитесь, что оно установлено и активно.",
     "Follow the guided steps to prepare your workspace before the first login.": "Следуйте пошаговым инструкциям, чтобы подготовить рабочее пространство перед первым входом.",
     "Footer": "Подвал",
@@ -1596,10 +1678,13 @@
     "footer.new\u0061pi.projectAttributionSuffix": "Все права защищены. Разработано участниками проекта.",
     "For channels added after May 10, 2025, no need to remove \".\" from model names during deployment": "Для каналов, добавленных после 10 мая 2025 г., не нужно удалять \".\" из имён моделей при развёртывании",
     "For private deployments, format: https://fastgpt.run/api/openapi": "Для частных развертываний, формат: https://fastgpt.run/api/openapi",
+    "Force a syntactically valid JSON response": "Принудительно возвращать синтаксически корректный JSON",
     "Force AUTH LOGIN": "Принудительный AUTH LOGIN",
     "Force Format": "Принудительный формат",
     "Force format response to OpenAI standard (OpenAI channel only)": "Принудительно форматировать ответ в соответствии со стандартом OpenAI (только для канала OpenAI)",
+    "Force JSON object or schema-conforming output": "Принудительно вернуть JSON или соответствующий схеме вывод",
     "Force SMTP authentication using AUTH LOGIN method": "Принудительная аутентификация SMTP с использованием метода AUTH LOGIN",
+    "Forest Whisper": "Лесной шёпот",
     "Forgot password": "Забыли пароль",
     "Forgot password?": "Забыли пароль?",
     "Form reset to saved values": "Форма сброшена к сохранённым значениям",
@@ -1614,6 +1699,7 @@
     "Format: APPID|APISecret|APIKey": "Формат: APPID|APISecret|APIKey",
     "Format: AppId|SecretId|SecretKey": "Формат: AppId|SecretId|SecretKey",
     "Forward requests directly to upstream providers without any post-processing.": "Перенаправлять запросы напрямую upstream-провайдерам без какой-либо постобработки.",
+    "Frames per second": "Кадров в секунду",
     "Free: {{free}} / Total: {{total}}": "Свободно: {{free}} / Всего: {{total}}",
     "Friendly name to identify this channel": "Дружественное имя для идентификации этого канала",
     "From Address": "Отправитель",
@@ -1623,6 +1709,9 @@
     "Full API Key": "Полный ключ API",
     "Full Base URL (supports": "Полный базовый URL (поддерживает",
     "Full Code": "Полный код",
+    "Full layout": "Полная разметка",
+    "Full width": "Полная ширина",
+    "Function calling": "Вызов функций",
     "Functions": "Функции",
     "GC Count": "Кол-во GC",
     "GC executed": "GC выполнен",
@@ -1639,9 +1728,11 @@
     "Generate Music": "Создать музыку",
     "Generate new backup codes for account recovery": "Сгенерировать новые резервные коды для восстановления аккаунта",
     "Generate New Codes": "Сгенерировать новые коды",
+    "Generate tokens from the Tokens page; you can scope them to specific models, groups, IPs, and rate-limits.": "Создавайте токены на странице «Токены». Их можно ограничить моделями, группами, IP и лимитами частоты.",
     "Generated image": "Сгенерированное изображение",
     "Generating new codes will invalidate all existing backup codes.": "Генерация новых кодов аннулирует все существующие резервные коды.",
     "Generating...": "Создание...",
+    "Generation quality preset": "Пресет качества генерации",
     "Generic cache": "Общий кэш",
     "Get notified when balance falls below this value": "Получать уведомления, когда баланс опускается ниже этого значения",
     "Get Started": "Начать",
@@ -1651,6 +1742,7 @@
     "Global configuration and administrative tools.": "Глобальная конфигурация и административные инструменты.",
     "Global Coverage": "Глобальное покрытие",
     "Global Model Configuration": "Глобальная конфигурация модели",
+    "Global throughput": "Общая пропускная способность",
     "Go Back": "Назад",
     "Go back and edit": "Вернуться и изменить",
     "Go to Dashboard": "Перейти в панель управления",
@@ -1697,6 +1789,7 @@
     "Groups": "Группы",
     "Groups *": "Группы *",
     "Groups that users can select when creating API keys.": "Группы, которые пользователи могут выбрать при создании ключей API.",
+    "Growth": "Рост",
     "Guardrails": "Ограничители",
     "Guest": "Гость",
     "h": "h",
@@ -1710,11 +1803,14 @@
     "Has been invalidated": "Аннулировано",
     "Have a Code?": "Есть код?",
     "Header": "Заголовок",
+    "header instead.": ".",
     "Header Name": "Имя заголовка",
     "Header navigation": "Навигация по заголовку",
     "Header Override": "Переопределение заголовка",
     "Header Passthrough (X-Request-Id)": "Проброс заголовка (X-Request-Id)",
     "Header Value (supports string or JSON mapping)": "Значение заголовка (строка или JSON-маппинг)",
+    "header. Anthropic-formatted endpoints accept the": ". Эндпоинты формата Anthropic вместо этого принимают",
+    "Health": "Здоровье",
     "Hidden — verify to reveal": "Скрыто — подтвердите, чтобы показать",
     "Hide": "Скрыть",
     "Hide API key": "Скрыть API ключ",
@@ -1738,6 +1834,8 @@
     "Home Page Content": "Содержимое главной страницы",
     "Hostname or IP of your SMTP provider": "Имя хоста или IP-адрес вашего SMTP-провайдера",
     "Hour": "Час",
+    "Hourly token usage by model across the last 24 hours": "Почасовое использование токенов по моделям за последние 24 часа",
+    "Hourly token usage by model over the past 24 hours": "Почасовое использование токенов по моделям за последние 24 часа",
     "hours": "часов",
     "How client credentials are sent to the token endpoint": "Как учетные данные клиента отправляются на конечную точку токена",
     "How frequently the system tests all channels": "Как часто система тестирует все каналы",
@@ -1745,6 +1843,7 @@
     "How model mapping works": "Как работает сопоставление моделей",
     "How much to charge for each US dollar of balance (Epay)": "Сколько взимать за каждый доллар США баланса (Epay)",
     "How this model name should match requests": "Как это имя модели должно соответствовать запросам",
+    "How to deliver the resulting image": "Способ доставки изображения",
     "How to get an io.net API Key": "Как получить ключ API io.net",
     "How to reset my quota?": "Как сбросить мою квоту?",
     "How to select keys: random or sequential polling": "Как выбирать ключи: случайно или последовательный опрос",
@@ -1794,6 +1893,9 @@
     "Import to CC Switch": "Импорт в CC Switch",
     "In Progress": "Выполняется",
     "In:": "Вх:",
+    "incident": "инцидент",
+    "incidents": "инцидентов",
+    "Incidents": "Инциденты",
     "Include Group": "Включить группу",
     "Include Model": "Включить модель",
     "Include Rule Name": "Включить имя правила",
@@ -1810,14 +1912,15 @@
     "Input price": "Цена входа",
     "Input tokens": "Входные токены",
     "Input Tokens": "Входные токены",
+    "Inset": "Встроенная",
     "Inspect user prompts": "Просмотр запросов пользователя",
     "Instance": "Экземпляр",
     "Integrations": "Интеграции",
     "Inter-group overrides": "Переопределения между группами",
     "Inter-group ratio overrides": "Переопределения соотношений между группами",
+    "Interface Language": "Язык интерфейса",
     "Internal Notes": "Внутренние заметки",
     "Internal notes (not shown to users)": "Внутренние заметки (не показываются пользователям)",
-    "Interface Language": "Язык интерфейса",
     "Internal Server Error!": "Внутренняя ошибка сервера!",
     "Invalid chat link. Please contact the administrator.": "Неверная ссылка на чат. Пожалуйста, обратитесь к администратору.",
     "Invalid chat link. Please contact your administrator.": "Недействительная ссылка чата. Обратитесь к администратору.",
@@ -1848,6 +1951,7 @@
     "Inviter": "Пригласивший",
     "Inviter Reward": "Награда приглашающему",
     "Invites": "Приглашения",
+    "Invoke developer-defined functions with structured arguments": "Вызывать заданные разработчиком функции со структурированными аргументами",
     "io.net API Key": "Ключ API io.net",
     "io.net Deployments": "Развертывания io.net",
     "IP": "IP",
@@ -1872,6 +1976,7 @@
     "JSON map of group → ratio applied when the user selects the group explicitly.": "JSON-карта группы → соотношение, применяемое, когда пользователь явно выбирает группу.",
     "JSON map of model → multiplier applied to quota billing.": "JSON-карта модели → множитель, применяемый к тарификации по квоте.",
     "JSON map of model → USD cost per request. Takes precedence over ratio based billing.": "JSON-карта модели → стоимость в долларах США за запрос. Имеет приоритет над тарификацией на основе соотношения.",
+    "JSON mode": "Режим JSON",
     "JSON Mode": "Режим JSON",
     "JSON must be an object": "JSON должен быть объектом",
     "JSON object:": "Объект JSON:",
@@ -1893,10 +1998,13 @@
     "Keys, OAuth credentials, and multi-key update behavior.": "Ключи, учетные данные OAuth и поведение обновления нескольких ключей.",
     "Kling": "Kling",
     "Knowledge Base ID *": "ID базы знаний *",
+    "Knowledge cutoff": "Дата актуальности данных",
+    "Lake View": "Вид на озеро",
     "Landing page with system overview.": "Главная страница с обзором системы.",
-    "Language Preferences": "Языковые настройки",
     "Language preference saved": "Языковая настройка сохранена",
+    "Language Preferences": "Языковые настройки",
     "Language preferences sync across your signed-in devices and affect API error messages.": "Языковые настройки синхронизируются на всех ваших устройствах после входа и влияют на язык сообщений об ошибках API.",
+    "Last 30 days uptime": "Доступность за 30 дней",
     "Last check time": "Время последней проверки",
     "Last detected addable models": "Последние обнаруженные модели для добавления",
     "Last Login": "Последний вход",
@@ -1905,7 +2013,11 @@
     "Last updated:": "Последнее обновление:",
     "Last Used": "Последнее использование",
     "Last used:": "Последнее использование:",
+    "Latency trend (last 24h)": "Тренд задержки (за 24 часа)",
+    "Lavender Dream": "Лавандовая мечта",
     "Layout": "Макет",
+    "lead": "лидер",
+    "Leaderboards": "Рейтинги",
     "Learn more": "Узнать больше",
     "Learn more:": "Узнать больше:",
     "Leave": "Выйти",
@@ -1922,12 +2034,15 @@
     "Leave empty to use default": "Оставьте пустым для использования по умолчанию",
     "Leave empty to use system temp directory": "Оставьте пустым для системного временного каталога",
     "Leave empty to use username": "Оставьте пустым, чтобы использовать имя пользователя",
+    "Left to Right": "Слева направо",
     "Legacy Format (JSON Object)": "Старый формат (JSON-объект)",
     "Legacy format must be a JSON object": "Старый формат должен быть JSON-объектом",
     "Legacy Format Template": "Шаблон старого формата",
+    "Legal": "Юриспруденция",
     "Less": "Меньше",
     "Less Than": "Меньше",
     "Less Than or Equal": "Меньше или равно",
+    "License": "Лицензия",
     "Light": "Светлая",
     "Lightning Fast": "Молниеносно быстро",
     "Limit period": "Период ограничения",
@@ -1942,6 +2057,7 @@
     "List of models supported by this channel. Use comma to separate multiple models.": "Список моделей, поддерживаемых этим каналом. Используйте запятую для разделения нескольких моделей.",
     "List of origins (one per line) allowed for Passkey registration and authentication.": "Список источников (один на строку), разрешенных для регистрации и аутентификации Passkey.",
     "List view": "Вид списка",
+    "LLM Leaderboard": "Рейтинг LLM",
     "LLM prompt helper": "Помощник с промптом для LLM",
     "Load Balancing": "Балансировка нагрузки",
     "Load template...": "Загрузить шаблон...",
@@ -1972,6 +2088,7 @@
     "Logo": "Логотип",
     "Logo URL": "URL логотипа",
     "Logs": "Журналы",
+    "Lowest median first-token latency": "Минимальная медианная задержка первого токена",
     "m": "m",
     "Maintain a list of common questions for the dashboard help panel": "Вести список часто задаваемых вопросов для панели помощи дашборда",
     "Maintenance": "Обслуживание",
@@ -2005,6 +2122,8 @@
     "Map request model names to actual provider model names (JSON format)": "Сопоставление имён моделей запроса реальным именам моделей провайдера (формат JSON)",
     "Map response status codes (JSON format)": "Сопоставить коды статусов ответа (JSON-формат)",
     "Map upstream status codes to different codes": "Сопоставить коды статуса вышестоящего сервера с различными кодами",
+    "Market Share": "Доля рынка",
+    "Marketing": "Маркетинг",
     "Match All (AND)": "Все совпадения (AND)",
     "Match Any (OR)": "Любое совпадение (OR)",
     "Match Mode": "Режим сопоставления",
@@ -2021,6 +2140,7 @@
     "Matching Rules": "Правила сопоставления",
     "Max Disk Cache Size (MB)": "Макс. размер дискового кэша (МБ)",
     "Max Entries": "Макс. записей",
+    "Max output": "Макс. вывод",
     "Max Requests (incl. failures)": "Макс. запросов (вкл. сбои)",
     "Max Requests (including failures)": "Макс. запросов (включая сбои)",
     "Max requests per period": "Макс. запросов за период",
@@ -2031,8 +2151,15 @@
     "Maximum 200 characters": "Максимум 200 символов",
     "Maximum 500 characters. Supports Markdown and HTML.": "Максимум 500 символов. Поддерживает Markdown и HTML.",
     "Maximum check-in quota": "Максимальная квота регистрации",
+    "Maximum input window": "Максимальное окно ввода",
+    "Maximum number of tokens in the response": "Максимальное число токенов в ответе",
     "Maximum quota amount awarded for check-in": "Максимальная сумма квоты, присуждаемая за регистрацию",
+    "Maximum tokens including hidden reasoning tokens": "Максимум токенов с учётом скрытых reasoning-токенов",
+    "Maximum tokens per response": "Максимум токенов на ответ",
     "maxRequests ≥ 0, maxSuccess ≥ 1, both ≤ 2,147,483,647": "maxRequests ≥ 0, maxSuccess ≥ 1, оба ≤ 2,147,483,647",
+    "May be used for training by upstream provider": "Может использоваться поставщиком для обучения",
+    "Median time-to-first-token (TTFT) sampled hourly per group": "Медианная задержка первого токена (TTFT), измеряемая ежечасно по группам",
+    "Medical Q&A, mental health support": "Медицинские Q&A, поддержка ментального здоровья",
     "Memory Hits": "Попаданий памяти",
     "Memory Threshold (%)": "Порог памяти (%)",
     "Merchant ID": "ID мерчанта",
@@ -2041,6 +2168,7 @@
     "Metadata": "Метаданные",
     "Midjourney": "Midjourney",
     "MidjourneyPlus": "MidjourneyPlus",
+    "min downtime": "мин простоя",
     "Min Top-up": "Мин. пополнение",
     "Min Top-up:": "Мин. пополнение:",
     "MiniMax": "MiniMax",
@@ -2056,12 +2184,15 @@
     "Minimum topup amount: {{amount}}": "Минимальная сумма пополнения: {{amount}}",
     "Minimum Trust Level": "Минимальный уровень доверия",
     "Minimum:": "Минимум:",
+    "Minor blips in the last 30 days": "Небольшие сбои за последние 30 дней",
     "Minute": "Минута",
     "minutes": "минут",
     "Missing code": "Код отсутствует",
     "Missing Models": "Отсутствующие модели",
     "Missing user data from Passkey login response": "В ответе Passkey для входа отсутствуют данные пользователя",
     "Mistral": "Mistral",
+    "Modalities": "Модальности",
+    "Modality": "Модальность",
     "Mode": "Режим",
     "model": "модель",
     "Model": "Модель",
@@ -2074,6 +2205,7 @@
     "Model deleted successfully": "Модель успешно удалена",
     "Model deployment service is disabled": "Сервис развертывания моделей отключен",
     "Model Description": "Описание модели",
+    "Model details": "Сведения о модели",
     "Model disabled successfully": "Модель успешно отключена",
     "Model enabled successfully": "Модель успешно включена",
     "Model fixed pricing": "Фиксированная цена модели",
@@ -2111,11 +2243,15 @@
     "Models & Groups": "Модели и группы",
     "Models appended successfully": "Модели успешно добавлены",
     "Models are required": "Требуются модели",
+    "Models climbing the leaderboard": "Модели, поднимающиеся в рейтинге",
+    "Models climbing the leaderboard fastest": "Модели, быстрее всех растущие в рейтинге",
     "Models directory": "Каталог моделей",
     "Models Directory": "Каталог моделей",
     "Models fetched successfully": "Модели успешно получены",
     "Models filled to form": "Модели заполнены в форму",
     "Models listed here will not automatically append or remove -thinking / -nothinking suffixes.": "Модели из этого списка не будут автоматически добавлять или удалять суффиксы -thinking / -nothinking.",
+    "Models losing positions": "Модели, теряющие позиции",
+    "Models losing the most positions": "Модели, потерявшие больше всего позиций",
     "Models not in list, may fail to invoke": "Модели не в списке, вызов может не сработать",
     "Models that are being used but not configured in the system": "Модели, которые используются, но не настроены в системе",
     "Models updated successfully": "Модели успешно обновлены",
@@ -2126,12 +2262,14 @@
     "Monitoring & Alerts": "Мониторинг и оповещения",
     "Month": "Месяц",
     "Monthly": "Ежемесячно",
+    "Monthly tokens": "Токенов в месяц",
     "months": "месяцев",
     "Moonshot": "Moonshot",
     "More": "Ещё",
     "more mapping": "больше сопоставлений",
     "More templates...": "Другие шаблоны…",
     "More...": "Подробнее...",
+    "Most-used models in the selected period and category": "Самые используемые модели в выбранном периоде и категории",
     "Move": "Переместить",
     "Move a request header": "Переместить заголовок запроса",
     "Move affiliate rewards to your main balance": "Перевести партнерские вознаграждения на основной баланс",
@@ -2148,7 +2286,10 @@
     "Multi-key: Random rotation": "Мульти-ключ: Случайная ротация",
     "Multi-protocol Compatible": "Совместимо с несколькими протоколами",
     "Multi-region deployment for stable global access": "Мультирегиональное развертывание для стабильного глобального доступа",
+    "Multi-step thinking before final answer": "Многошаговые рассуждения перед итоговым ответом",
     "Multi-user management with flexible permission allocation": "Многопользовательское управление с гибким распределением разрешений",
+    "Multilingual translation and localisation": "Многоязычный перевод и локализация",
+    "Multimodal": "Мультимодальное",
     "Multiplier": "Множитель",
     "Multiplier applied when": "Множитель применяется, когда",
     "Multiplier applied when {{userGroup}} uses {{targetGroup}}": "Множитель при использовании {{targetGroup}} группой {{userGroup}}",
@@ -2184,6 +2325,7 @@
     "Network proxy for this channel (supports socks5 protocol)": "Сетевой прокси для этого канала (поддерживает протокол socks5)",
     "Never": "Никогда",
     "Never expires": "Никогда не истекает",
+    "NEW": "НОВОЕ",
     "New API": "Новый API",
     "New API &lt;noreply@example.com&gt;": "Новый API &lt;noreply@example.com&gt;",
     "New API Project Repository:": "Репозиторий проекта New API:",
@@ -2197,6 +2339,7 @@
     "New User Quota": "Новая квота пользователя",
     "New version available: {{version}}": "Доступна новая версия: {{version}}",
     "NewAPI": "NewAPI",
+    "Newly released": "Новые релизы",
     "Next": "Следующий шаг",
     "Next branch": "Следующая ветка",
     "Next page": "Следующая страница",
@@ -2211,10 +2354,13 @@
     "No API keys available. Create your first API key to get started.": "Нет доступных ключей API. Создайте свой первый ключ API, чтобы начать.",
     "No API Keys Found": "Ключи API не найдены",
     "No API routes configured": "Нет настроенных маршрутов API",
+    "No app usage data available for this model.": "Данные об использовании приложений для этой модели пока недоступны.",
+    "No apps match the selected filters": "Нет приложений, соответствующих фильтрам",
     "No available models": "Нет доступных моделей",
     "No available Web chat links": "Нет доступных веб-ссылок для чата",
     "No backup": "Нет резервной копии",
     "No billing records found": "Записи о выставлении счетов не найдены",
+    "No capabilities reported for this model.": "Для этой модели не указаны возможности.",
     "No Change": "Без изменений",
     "No changes": "Нет изменений",
     "No changes made": "Изменения не внесены",
@@ -2249,8 +2395,11 @@
     "No group-based rate limits configured. Click \"Add group\" to get started.": "Групповые лимиты скорости не настроены. Нажмите \"Добавить группу\", чтобы начать.",
     "No groups match your search": "Нет групп, соответствующих вашему поиску",
     "No header overrides configured.": "Нет настроенных переопределений заголовков.",
+    "No history data available": "Исторические данные недоступны",
+    "No incidents in the last 30 days": "За последние 30 дней инцидентов не было",
     "No Inviter": "Нет пригласившего",
     "No keys found": "Ключи не найдены",
+    "No latency data available": "Данные о задержке недоступны",
     "No log entries matched the selected time.": "Нет записей журнала, соответствующих выбранному времени.",
     "No logs": "Нет логов",
     "No Logs Found": "Логи не найдены",
@@ -2270,6 +2419,7 @@
     "No models found": "Модели не найдены",
     "No Models Found": "Модели не найдены",
     "No models found.": "Модели автомобиля не найдены.",
+    "No models match the selected filters": "Нет моделей, соответствующих фильтрам",
     "No models match your current filters.": "Модели, соответствующие вашим текущим фильтрам, не найдены.",
     "No models match your search": "Модели не найдены",
     "No models selected": "Модели не выбраны",
@@ -2277,6 +2427,9 @@
     "No models to copy": "Нет моделей для копирования",
     "No models to remove": "Нет моделей для удаления",
     "No new models to add": "Нет новых моделей для добавления",
+    "No new models yet": "Новых моделей пока нет",
+    "No notable climbers right now": "Сейчас нет значимых поднявшихся моделей",
+    "No notable drops right now": "Сейчас нет значимых упавших моделей",
     "No parameter overrides configured.": "Нет настроенных переопределений параметров.",
     "No payment methods available. Please contact administrator.": "Нет доступных способов оплаты. Пожалуйста, свяжитесь с администратором.",
     "No payment methods configured": "Способы оплаты не настроены",
@@ -2315,6 +2468,7 @@
     "No Upgrade": "Без повышения",
     "No upstream price differences found": "Различий в ценах провайдера не найдено",
     "No upstream ratio differences found": "Различия в коэффициентах вышестоящего потока не найдены",
+    "No uptime data available": "Данные о доступности недоступны",
     "No Uptime Kuma groups yet. Click \"Add Group\" to create one.": "Пока нет групп Uptime Kuma. Нажмите \"Добавить группу\", чтобы создать одну.",
     "No uptime monitoring configured": "Мониторинг доступности не настроен",
     "No usage logs available. Logs will appear here once API calls are made.": "Нет логов использования. Они появятся после вызовов API.",
@@ -2322,6 +2476,7 @@
     "No user selected": "Пользователь не выбран",
     "No users available. Try adjusting your search or filters.": "Нет доступных пользователей. Попробуйте изменить параметры поиска или фильтры.",
     "No Users Found": "Пользователи не найдены",
+    "No vendor data available": "Данных по поставщикам нет",
     "Node Name": "Имя узла",
     "Non-stream": "Не потоковый",
     "None": "Нет",
@@ -2336,15 +2491,20 @@
     "Not Started": "Не начато",
     "Not Submitted": "Не отправлено",
     "Not tested": "Не протестировано",
+    "Not used for upstream training by default": "По умолчанию не используется для обучения у поставщика",
     "Not used yet": "Ещё не использовано",
     "Notice": "Уведомления",
     "Notification Email": "Электронная почта для уведомлений",
     "Notification Method": "Метод уведомления",
     "Notifications": "Уведомления",
+    "Nucleus sampling probability mass": "Накопленная вероятность для nucleus-сэмплинга",
     "Number of codes to create": "Количество кодов для создания",
+    "Number of completions to generate": "Число генерируемых вариантов",
+    "Number of images to generate": "Количество изображений",
     "Number of keys to create": "Количество ключей для создания",
     "Number of times to retry failed requests (0-10)": "Количество повторных попыток для неудачных запросов (0-10)",
     "Number of tokens per unit quota": "Количество токенов на единицу квоты",
+    "Number of top log probabilities returned per token": "Количество top-вероятностей на токен",
     "Number of users invited": "Количество приглашенных пользователей",
     "OAuth Client ID": "Идентификатор клиента OAuth",
     "OAuth Client Secret": "OAuth Client Secret",
@@ -2355,6 +2515,7 @@
     "Observability": "Наблюдаемость",
     "Obtain the API key, merchant ID, and RSA key pair from the Waffo dashboard, and configure the callback URL.": "Получите API-ключ, ID мерчанта и пару RSA-ключей в панели управления Waffo и настройте URL обратного вызова.",
     "Obtain the merchant, store, product and signing keys from your Waffo dashboard. Webhook URL: <ServerAddress>/api/waffo-pancake/webhook": "Получите в панели Waffo ID мерчанта, магазина, товара и ключи подписи. Webhook: <ServerAddress>/api/waffo-pancake/webhook",
+    "Ocean Breeze": "Океанский бриз",
     "of": "записей, всего",
     "of 3:": "из 3:",
     "off": "выкл.",
@@ -2397,9 +2558,11 @@
     "Open in New Tab": "Открыть в новой вкладке",
     "Open menu": "Открыть меню",
     "Open release": "Открыть выпуск",
+    "Open source": "Открытый исходный код",
     "Open Source": "Открытый исходный код",
     "Open the io.net console API Keys page": "Открыть страницу ключей API консоли io.net",
     "Open theme settings": "Открыть настройки темы",
+    "Open weights": "Открытые веса",
     "OpenAI": "OpenAI",
     "OpenAI Compatible": "Совместимо с OpenAI",
     "OpenAI Organization": "Организация OpenAI",
@@ -2437,10 +2600,14 @@
     "org-...": "орг-...",
     "Original Model": "Оригинальная модель",
     "Other": "Другое",
+    "Outage": "Простой",
     "Output": "Вывод",
+    "Output aspect ratio": "Соотношение сторон",
+    "Output image size": "Размер выходного изображения",
     "Output price": "Цена выхода",
     "Output tokens": "Выходные токены",
     "Output Tokens": "Выходные токены",
+    "overall": "всего",
     "override": "переопределить",
     "Override": "Перезаписать",
     "Override Anthropic headers, defaults, and thinking adapter behavior": "Переопределить заголовки Anthropic, значения по умолчанию и поведение адаптера мышления",
@@ -2460,6 +2627,7 @@
     "PaLM": "PaLM",
     "Pan": "Панорама",
     "Param Override": "Переопределение параметров",
+    "Parameter": "Параметр",
     "Parameter configuration error": "Ошибка конфигурации параметров",
     "Parameter Override": "Переопределение параметра",
     "Parameter override must be a valid JSON object": "Переопределение параметров должно быть валидным JSON-объектом",
@@ -2533,6 +2701,9 @@
     "Payment page opened": "Страница оплаты открыта",
     "Payment request failed": "Запрос на оплату не удался",
     "Payment return URL": "URL возврата после оплаты",
+    "Peak": "Пик",
+    "Peak throughput": "Пиковая пропускная способность",
+    "Penalises repetition of frequent tokens": "Штрафует повторение частых токенов",
     "Pending": "Ожидает",
     "per": "за",
     "Per 1K tokens": "За 1K токенов",
@@ -2542,13 +2713,18 @@
     "Per Request": "За запрос",
     "Per-call": "По вызову",
     "Per-feature metered windows split by model or capability.": "Окна с поминутной тарификацией по фиче, в разбивке по модели или возможностям.",
+    "Per-group performance": "Производительность по группам",
     "Per-request (fixed price)": "За запрос (фиксированная цена)",
     "Per-token": "За токен",
     "Per-token (ratio based)": "За токен (на основе соотношения)",
+    "Per-token logit bias map": "Карта смещений логитов по токенам",
     "Percentage:": "Процент:",
     "Performance": "Производительность",
+    "Performance data is not yet available for this model.": "Данные о производительности этой модели пока недоступны.",
+    "Performance metrics shown here are simulated for preview purposes and will be replaced with live observability data once the backend integration is complete.": "Показанные метрики производительности сгенерированы для предпросмотра и будут заменены реальными данными наблюдаемости после интеграции бэкенда.",
     "Performance Monitor": "Монитор производительности",
     "Performance Settings": "Настройки производительности",
+    "Period": "Период",
     "Periodically check for upstream model changes": "Периодически проверять изменения моделей провайдера",
     "Periodically send ping frames to keep streaming connections active.": "Периодически отправлять пинг-кадры для поддержания активности потоковых соединений.",
     "Permanently delete your account and all data": "Безвозвратно удалить ваш аккаунт и все данные",
@@ -2652,6 +2828,14 @@
     "Preset recharge amounts displayed to users": "Предустановленные суммы пополнения, отображаемые пользователям",
     "Preset Template": "Предустановленный шаблон",
     "Preset templates": "Предустановленные шаблоны",
+    "preset.default": "По умолчанию",
+    "preset.forest-whisper": "Лесной шёпот",
+    "preset.lake-view": "Озёрный вид",
+    "preset.lavender-dream": "Лавандовый сон",
+    "preset.ocean-breeze": "Морской бриз",
+    "preset.rose-garden": "Розовый сад",
+    "preset.sunset-glow": "Закатное сияние",
+    "preset.underground": "Подполье",
     "Press Enter or comma to add tags": "Нажмите Enter или запятую, чтобы добавить теги",
     "Press Enter to use \"{{value}}\"": "Нажмите Enter, чтобы использовать «{{value}}»",
     "Prevent server-side request forgery attacks": "Предотвращение атак подделки запросов на стороне сервера",
@@ -2660,7 +2844,6 @@
     "Previous": "Предыдущий шаг",
     "Previous branch": "Предыдущая ветка",
     "Previous page": "Предыдущая страница",
-    "Base Price": "Базовая цена",
     "Price": "Цена",
     "Price ($/1K calls)": "Цена ($/1K вызовов)",
     "Price (local currency / USD)": "Цена (местная валюта / USD)",
@@ -2698,10 +2881,12 @@
     "Product ID": "ID продукта",
     "Product ID is required": "Требуется ID товара",
     "Product Name": "Название продукта",
+    "Productivity": "Продуктивность",
     "Products": "Продукты",
     "Professional team providing 24/7 technical support": "Профессиональная команда, обеспечивающая круглосуточную техническую поддержку",
     "Profile": "Профиль",
     "Profile updated successfully": "Профиль успешно обновлён",
+    "Programming": "Программирование",
     "Progress": "Прогресс",
     "Project": "Проект",
     "Promote": "Повысить",
@@ -2709,9 +2894,11 @@
     "Prompt": "Промпт",
     "Prompt (EN)": "Промпт (EN)",
     "Prompt cache ratio": "Коэффициент кэша промптов",
+    "Prompt caching": "Кэширование промптов",
     "Prompt Caching": "Кэширование промптов",
     "Prompt Details": "Детали промпта",
     "Prompt price ($/1M tokens)": "Цена промпта ($/1 млн токенов)",
+    "Proprietary": "Проприетарная",
     "Protect login and registration with Cloudflare Turnstile": "Защитите вход и регистрацию с помощью Cloudflare Turnstile",
     "Provide a JSON object where each key maps to an endpoint definition.": "Предоставьте JSON-объект, в котором каждый ключ соответствует определению конечной точки.",
     "Provide a valid URL starting with http:// or https://": "Укажите действительный URL, начинающийся с http:// или https://",
@@ -2720,6 +2907,7 @@
     "Provide per-category safety overrides as JSON. Use `default` for fallback values.": "Предоставьте переопределения безопасности по категориям в формате JSON. Используйте `default` для резервных значений.",
     "Provide per-model header overrides as JSON. Useful for enabling beta features such as expanded context windows.": "Предоставьте переопределения заголовков для каждой модели в формате JSON. Полезно для включения бета-функций, таких как расширенные окна контекста.",
     "Provider": "Провайдер",
+    "Provider & data privacy": "Поставщик и конфиденциальность",
     "Provider created successfully": "Поставщик успешно создан",
     "Provider deleted successfully": "Поставщик успешно удален",
     "Provider Name": "Имя поставщика",
@@ -2768,11 +2956,15 @@
     "Quota Types": "Типы квот",
     "Quota Warning Threshold": "Порог предупреждения о квоте",
     "Quota:": "Квота:",
+    "Radius": "Радиус",
     "Random": "Случайный",
     "Randomly select a key from the pool for each request": "Случайно выбирать ключ из пула для каждого запроса",
+    "Ranking data is currently simulated for preview purposes and will be replaced with live analytics once the backend integration ships.": "Сейчас данные рейтинга смоделированы для превью; после внедрения бэкенда они будут заменены реальной аналитикой.",
+    "Rankings": "Рейтинги",
     "Rate Limit Windows": "Окна ограничения скорости",
     "Rate Limited": "Ограничение частоты",
     "Rate Limiting": "Ограничение скорости",
+    "Rate limits": "Ограничения частоты",
     "Ratio": "Коэффициент",
     "Ratio applied to audio completions for streaming models.": "Коэффициент, применяемый к аудио-завершениям для потоковых моделей.",
     "Ratio applied to audio inputs where supported by the upstream model.": "Коэффициент, применяемый к аудио-входам, где это поддерживается вышестоящей моделью.",
@@ -2795,6 +2987,8 @@
     "Reasoning Effort": "Интенсивность рассуждения",
     "Receive Upstream Model Update Notifications": "Получать уведомления об обновлениях вышестоящих моделей",
     "Received": "Получено",
+    "Recently launched models": "Недавно запущенные модели",
+    "Recently launched models gaining traction": "Недавно вышедшие модели, набирающие популярность",
     "Recharge": "Пополнение",
     "Recharge Amount": "Сумма пополнения",
     "Recharge Amount (USD)": "Сумма пополнения (USD)",
@@ -2848,6 +3042,7 @@
     "Registry username": "Имя пользователя реестра",
     "Reject Reason": "Причина отклонения",
     "Release details": "Детали релиза",
+    "Released": "Выпущено",
     "Relying Party Display Name": "Отображаемое имя проверяющей стороны",
     "Relying Party ID": "Идентификатор проверяющей стороны",
     "Remaining": "Остаток",
@@ -2913,6 +3108,8 @@
     "Request rule pricing": "Правила ценообразования по запросу",
     "Request timed out, please refresh and restart GitHub login": "Время ожидания истекло, обновите страницу и снова запустите вход через GitHub",
     "Request-based": "Зависит от запроса",
+    "Requests (24h)": "Запросы (24 ч)",
+    "Requests / 24h": "Запросы / 24 ч",
     "Requests per minute": "Запросов в минуту",
     "requests served": "обслуженных запросов",
     "Requests will be forwarded to this worker. Trailing slashes are removed automatically.": "Запросы будут перенаправлены этому воркеру. Конечные слеши удаляются автоматически.",
@@ -2920,12 +3117,14 @@
     "Require email verification for new accounts": "Требовать подтверждение электронной почты для новых учетных записей",
     "Require job success before follow-up actions": "Требовать успеха задания перед последующими действиями",
     "Require login to view models": "Требовать вход для просмотра моделей",
+    "required": "обязателен",
     "Required": "Обязательно",
     "Required events:": "Обязательные события:",
     "Required provider, authentication, model, and group settings": "Обязательные настройки провайдера, аутентификации, моделей и групп",
     "Required to expose Midjourney-style image generation to end users.": "Необходимо для предоставления генерации изображений в стиле Midjourney конечным пользователям.",
     "Rerank": "Переранжировать",
     "Reroll": "Повторить",
+    "Research, analysis, scientific reasoning": "Исследования, анализ, научные рассуждения",
     "Resend ({{seconds}}s)": "Отправить повторно ({{seconds}}с)",
     "Reset": "Сброс",
     "Reset 2FA": "Сбросить 2FA",
@@ -2961,8 +3160,11 @@
     "Retry Times": "Количество повторных попыток",
     "Return a custom error immediately": "Немедленно вернуть пользовательскую ошибку",
     "Return Custom Error": "Вернуть пользовательскую ошибку",
+    "Return data conforming to a JSON schema": "Возвращать данные, соответствующие JSON-схеме",
     "Return Error": "Вернуть ошибку",
+    "Return per-token log probabilities": "Возвращать логарифмические вероятности по токенам",
     "Return to dashboard": "Вернуться на панель управления",
+    "Return vector embeddings for inputs": "Возвращать векторные эмбеддинги для входных данных",
     "Reveal API key": "Показать API ключ",
     "Reveal key": "Показать ключ",
     "Revenue": "Доход",
@@ -2972,8 +3174,11 @@
     "Review your purchase details before proceeding.": "Просмотрите детали покупки перед продолжением.",
     "Rewards will be added directly to your balance": "Награды будут добавлены напрямую в ваш баланс",
     "Rewrite callback URLs to the local server": "Перезаписывать URL обратных вызовов на локальный сервер",
+    "Right to Left": "Справа налево",
     "Role": "Роль",
+    "Roleplay": "Ролевые игры",
     "Root": "Корень",
+    "Rose Garden": "Розовый сад",
     "Route": "Маршрут",
     "Route Description": "Описание маршрута",
     "Route is required": "Маршрут обязателен",
@@ -2981,6 +3186,7 @@
     "Routing Strategy": "Стратегия маршрутизации",
     "Rows per page": "Строк на страницу",
     "RPM": "RPM",
+    "RPM = requests per minute, TPM = tokens per minute, RPD = requests per day. Limits apply per token group.": "RPM = запросов в минуту, TPM = токенов в минуту, RPD = запросов в день. Ограничения применяются к каждой группе токенов.",
     "RSA Private Key (Production)": "RSA-приватный ключ (Продакшн)",
     "RSA Private Key (Sandbox)": "RSA-приватный ключ (Песочница)",
     "Rule": "Правило",
@@ -3004,6 +3210,7 @@
     "s": "s",
     "Safety Settings": "Настройки безопасности",
     "Same as Local": "То же, что и локальный",
+    "Sampling temperature; lower is more deterministic": "Температура сэмплирования; чем ниже, тем детерминированнее",
     "Sandbox mode": "Режим песочницы",
     "Save": "Сохранить",
     "Save all settings": "Сохранить все настройки",
@@ -3048,6 +3255,7 @@
     "Scenario Templates": "Шаблоны сценариев",
     "Scheduled channel tests": "Запланированные тесты канала",
     "scheduling controls": "механизмов управления маршрутизацией",
+    "Science": "Наука",
     "Scope": "Область",
     "Scopes": "Области доступа",
     "Search": "Поиск",
@@ -3072,6 +3280,7 @@
     "Search products...": "Поиск продуктов...",
     "Search rules...": "Поиск правил…",
     "Search tags...": "Поиск тегов...",
+    "Search the public web at inference time": "Искать в общедоступной сети во время инференса",
     "Search vendors...": "Поиск поставщиков...",
     "Search...": "Поиск...",
     "seconds": "секунды",
@@ -3099,7 +3308,11 @@
     "Select an operation mode and enter the amount": "Выберите режим операции и введите сумму",
     "Select announcement type": "Выбрать тип объявления",
     "Select at least one field to overwrite.": "Выберите хотя бы одно поле для перезаписи.",
+    "Select border radius": "Выберите радиус скругления",
     "Select channel type": "Выбрать тип канала",
+    "Select color preset": "Выберите цветовую предустановку",
+    "Select content width": "Выберите ширину контента",
+    "Select corner radius": "Выберите радиус скругления",
     "Select currency": "Выберите валюту",
     "Select date": "Выберите дату",
     "Select default chart": "Выберите график по умолчанию",
@@ -3109,10 +3322,11 @@
     "Select from presets or type custom identifier.": "Выберите из предустановок или введите пользовательский идентификатор.",
     "Select granularity": "Выбрать детализацию",
     "Select groups (leave empty to keep current)": "Выбрать группы (оставьте пустым, чтобы сохранить текущие)",
+    "Select interface density": "Выберите плотность интерфейса",
     "Select items...": "Выберите элементы...",
     "Select key format": "Выберите формат ключа",
-    "Select Language": "Выбрать язык",
     "Select language": "Выберите язык",
+    "Select Language": "Выбрать язык",
     "Select layout style": "Выбрать стиль макета",
     "Select locations": "Выбрать локации",
     "Select Model": "Выбрать модель",
@@ -3140,6 +3354,7 @@
     "Select the API endpoint region": "Выбрать регион конечной точки API",
     "Select the fields you want to overwrite with upstream data. Unselected fields keep their local values.": "Выберите поля, которые вы хотите перезаписать данными из вышестоящего источника. Невыбранные поля сохранят свои локальные значения.",
     "Select theme preference": "Выбрать предпочтение темы",
+    "Select theme preset": "Выберите пресет темы",
     "Select time granularity": "Выбрать детализацию времени",
     "Select vendor": "Выбрать поставщика",
     "Selectable groups": "Выбираемые группы",
@@ -3176,9 +3391,9 @@
     "Set quota amount and limits": "Настройте квоту и лимиты",
     "Set Request Header": "Установить заголовок запроса",
     "Set runtime request header: override entire value, or manipulate comma-separated tokens": "Установить заголовок запроса: переопределить значение или управлять токенами через запятую",
-    "Set the language used across the interface": "Настроить язык интерфейса",
     "Set Tag": "Установить тег",
     "Set tag for selected channels": "Установить тег для выбранных каналов",
+    "Set the language used across the interface": "Настроить язык интерфейса",
     "Set the user's role (cannot be Root)": "Установить роль пользователя (не может быть Root)",
     "Setting saved": "Настройка сохранена",
     "Setting up 2FA...": "Настройка 2FA...",
@@ -3188,6 +3403,7 @@
     "Settings updated successfully": "Настройки успешно обновлены",
     "Setup Instructions": "Инструкции по настройке",
     "Setup Two-Factor Authentication": "Настроить двухфакторную аутентификацию",
+    "Share": "Доля",
     "Share your link and earn rewards": "Поделитесь своей ссылкой и получайте вознаграждения",
     "Shared configuration for all payment gateways": "Общая конфигурация для всех платежных шлюзов",
     "Shorten": "Сократить",
@@ -3214,6 +3430,7 @@
     "Signed in via WeChat": "Вошли через WeChat",
     "Signed in with Passkey": "Вошли с помощью Passkey",
     "Signed out": "Выход выполнен",
+    "Significant outages detected": "Обнаружены серьёзные сбои",
     "Signing you in with {{provider}}": "Входим через {{provider}}",
     "SiliconFlow": "SiliconFlow",
     "Simple": "Простой",
@@ -3271,6 +3488,7 @@
     "Status:": "Статус:",
     "Stay": "Остаться",
     "Stay tuned though!": "Оставайтесь на связи!",
+    "Steer behaviour with a system instruction": "Управлять поведением с помощью системной инструкции",
     "Step": "Шаг",
     "Stop": "Остановить",
     "Stop Retry": "Остановить повтор",
@@ -3281,6 +3499,9 @@
     "Stream": "Поток",
     "Stream Mode": "Потоковый режим",
     "Stream Status": "Статус потока",
+    "Stream tokens incrementally as they are generated": "Передавать токены по мере их генерации",
+    "Stream tokens via Server-Sent Events": "Стримить токены через Server-Sent Events",
+    "Streaming": "Стриминг",
     "String Replace": "Замена строки",
     "Stripe": "Stripe",
     "Stripe API key (leave blank unless updating)": "Ключ API Stripe (оставьте пустым, если не обновляете)",
@@ -3288,6 +3509,7 @@
     "Stripe Gateway": "Шлюз Stripe",
     "Stripe product price ID": "ID цены продукта Stripe",
     "Stripe/Creem requires creating products on the third-party platform and entering the ID": "Stripe/Creem требует создания продуктов на сторонней платформе и ввода ID",
+    "Structured output": "Структурированный вывод",
     "Submit": "Отправить",
     "Submit directly": "Отправить напрямую",
     "Submit Result": "Отправить результат",
@@ -3315,13 +3537,17 @@
     "Suffix": "Суффикс",
     "Suffix Match": "Совпадение по суффиксу",
     "SunoAPI": "SunoAPI",
+    "Sunset Glow": "Закатное сияние",
     "Super Admin": "Суперадмин",
     "Support for high concurrency with automatic load balancing": "Поддержка высокой конкурентности с автоматической балансировкой нагрузки",
     "Supported Imagine Models": "Поддерживаемые модели Imagine",
+    "Supported modalities": "Поддерживаемые модальности",
+    "Supported parameters": "Поддерживаемые параметры",
     "Supported variables": "Поддерживаемые переменные",
     "Supports `-thinking`, `-thinking-": "Поддерживает `-thinking`, `-thinking-",
     "Supports HTML markup or iframe embedding. Enter HTML code directly, or provide a complete URL to automatically embed it as an iframe.": "Поддерживает HTML-разметку или встраивание iframe. Введите HTML-код напрямую или укажите полный URL для автоматического встраивания в виде iframe.",
     "Supports PNG, JPG, SVG, or WebP. Recommended size: 128×128 or smaller.": "Поддерживаются PNG, JPG, SVG или WebP. Рекомендуемый размер: 128×128 или меньше.",
+    "Sustained tokens per second": "Устойчивая скорость токенов в секунду",
     "Swap Face": "Замена лица",
     "Switch affinity on success": "Переключить привязку при успехе",
     "Switch between the new frontend and the classic frontend. Changes take effect after page reload.": "Переключение между новым и классическим интерфейсом. Изменения вступают в силу после перезагрузки страницы.",
@@ -3341,6 +3567,7 @@
     "System Announcements": "Системные объявления",
     "System Behavior": "Поведение системы",
     "System data statistics": "Статистика системных данных",
+    "System default": "По умолчанию",
     "System Information": "Системная информация",
     "System initialized successfully! Redirecting…": "Система успешно инициализирована! Перенаправление…",
     "System logo": "Логотип системы",
@@ -3351,6 +3578,7 @@
     "System name is required": "Название системы обязательно",
     "System Notice": "Системные объявления",
     "System Performance Monitoring": "Мониторинг производительности системы",
+    "System prompt": "Системный промпт",
     "System Prompt": "Системное приглашение",
     "System Prompt Concatenation": "Конкатенация системных промптов",
     "System Prompt Override": "Переопределение системного промпта",
@@ -3402,7 +3630,11 @@
     "Test Model": "Проверить модель",
     "Testing all enabled channels started. Please refresh to see results.": "Тестирование всех включенных каналов начато. Пожалуйста, обновите страницу, чтобы увидеть результаты.",
     "Testing...": "Тестирование...",
+    "Text": "Текст",
+    "Text description of the desired image": "Текстовое описание желаемого изображения",
+    "Text description of the desired video": "Текстовое описание желаемого видео",
     "Text Input": "Текстовый вход",
+    "Text or array of texts to embed": "Текст или массив текстов для векторизации",
     "Text Output": "Текстовый выход",
     "Text to Video": "Текст в видео",
     "The administrator account is already initialized. You can keep your existing credentials and continue to the next step.": "Учетная запись администратора уже инициализирована. Вы можете сохранить существующие учетные данные и перейти к следующему шагу.",
@@ -3429,6 +3661,7 @@
     "The unique name for this vendor": "Уникальное имя для этого поставщика",
     "The URL for this chat client.": "URL для этого чат-клиента.",
     "Theme": "Тема",
+    "Theme preset": "Пресет темы",
     "Theme Settings": "Настройки темы",
     "There are both add and remove models pending, but you only selected one type. Confirm submitting only the selected items?": "Есть модели для добавления и удаления, но вы выбрали только один тип. Подтвердить отправку только выбранных элементов?",
     "These models are still in your selection but were not returned by the upstream listing. Entries that are only model_mapping source aliases are omitted. Toggle to adjust before saving.": "Эти имена всё ещё отмечены в выборе, но не возвращены в списке upstream; ключи только как источники model_mapping исключены. Скорректируйте выбор перед сохранением.",
@@ -3472,7 +3705,11 @@
     "This will permanently delete user": "Это безвозвратно удалит пользователя",
     "This will permanently remove all log entries created before {{date}}.": "Это безвозвратно удалит все записи журнала, созданные до {{date}}.",
     "This will permanently remove log entries before the selected timestamp.": "Это безвозвратно удалит записи журнала до выбранной временной метки.",
+    "This year": "Этот год",
     "Three steps to get started": "Три шага для начала работы",
+    "Throughput": "Пропускная способность",
+    "Throughput by group": "Пропускная способность по группам",
+    "Throughput trend": "Тренд пропускной способности",
     "Tier": "Уровень",
     "Tier name": "Название уровня",
     "Tiered": "Ступенчато",
@@ -3514,21 +3751,41 @@
     "Token Name": "Имя токена",
     "Token obtained from your Gotify application": "Токен, полученный из вашего приложения Gotify",
     "Token regenerated and copied to clipboard": "Токен перегенерирован и скопирован в буфер обмена",
+    "Token share by model author across the last 24 hours": "Доля токенов по автору модели за последние 24 часа",
+    "Token share by model author across the past few weeks": "Доля токенов по автору модели за последние недели",
+    "Token share by model author across the past month": "Доля токенов по автору модели за последний месяц",
+    "Token share by model author across the past year": "Доля токенов по автору модели за последний год",
+    "Token share by model author since launch": "Доля токенов по автору модели с момента запуска",
     "Token unit": "Единица токенов",
+    "Token usage by model since launch": "Использование токенов по моделям с момента запуска",
     "Token-based": "На основе токенов",
+    "Tokenizer": "Токенизатор",
     "tokens": "токены",
     "Tokens": "Токены",
+    "tokens / mo": "токенов / мес.",
+    "Tokens by category": "Токены по категориям",
     "Tokens Only": "Только токены",
     "Tokens per minute": "Токенов в минуту",
+    "Tokens since launch": "Токенов с запуска",
     "Tokens-only mode will show raw quota values regardless of this toggle.": "Режим «только токены» будет показывать необработанные значения квот независимо от этого переключателя.",
     "Too many files. Some were not added.": "Слишком много файлов. Некоторые не были добавлены.",
+    "Tool / function declarations the model may call": "Объявления инструментов и функций, которые модель может вызывать",
     "Tool identifier": "Идентификатор инструмента",
     "Tool price settings": "Настройки цен на инструменты",
     "Tool prices": "Цены инструментов",
+    "Tool-choice policy or specific tool name": "Политика выбора инструмента или конкретное имя",
+    "Tools": "Инструменты",
     "Top {{count}}": "Топ {{count}}",
+    "Top app": "Лидирующее приложение",
+    "Top apps": "Топ приложений",
+    "Top Apps": "Топ приложений",
+    "Top integrations using this model": "Основные интеграции, использующие эту модель",
+    "Top model": "Лидирующая модель",
+    "Top models": "Топ моделей",
     "Top Models": "Лучшие модели",
     "Top up balance and view billing history.": "Пополнить баланс и просмотреть историю платежей.",
     "Top Users": "Лучшие пользователи",
+    "Top vendors": "Топ поставщиков",
     "Top-up": "Пополнение",
     "Top-up amount options": "Варианты суммы пополнения",
     "Top-up Audit Info": "Аудит пополнений",
@@ -3552,13 +3809,16 @@
     "Total Quota": "Общая квота",
     "Total requests allowed per period. 0 = unlimited.": "Общее количество запросов, разрешенных за период. 0 = без ограничений.",
     "Total requests made": "Всего сделанных запросов",
+    "Total tokens": "Всего токенов",
     "Total Tokens": "Всего токенов",
     "Total Usage": "Общее использование",
     "Total:": "Всего:",
     "TPM": "TPM",
     "Track per-request consumption to power usage analytics. Keeping this on increases database writes.": "Отслеживать потребление для каждого запроса для аналитики использования. Сохранение этой опции увеличивает количество записей в базу данных.",
     "Track usage, costs and performance with real-time analytics": "Отслеживайте использование, затраты и производительность с помощью аналитики в реальном времени",
+    "Tracked apps": "Отслеживаемые приложения",
     "Tracks current account base limits and additional metered usage on Codex upstream.": "Отслеживает базовые лимиты и дополнительное потребление (metered) аккаунта на стороне Codex.",
+    "Trading insights, accounting, advisory": "Торговые инсайты, учёт, консалтинг",
     "Transfer": "Перевод",
     "Transfer Amount": "Сумма перевода",
     "Transfer failed": "Перевод не удался",
@@ -3566,18 +3826,28 @@
     "Transfer successful": "Перевод успешен",
     "Transfer to Balance": "Перевести на баланс",
     "Translate `-thinking` suffixes into Anthropic native thinking models while keeping pricing predictable.": "Преобразовывать суффиксы `-thinking` в собственные модели мышления Anthropic, сохраняя при этом предсказуемость ценообразования.",
+    "Translation": "Перевод",
     "Transparent Billing": "Прозрачная тарификация",
+    "Trend": "Тренд",
+    "Trending down": "Падают",
+    "Trending up": "Растут",
     "Trim leading/trailing whitespace": "Удалить пробелы в начале/конце",
     "Trim Prefix": "Обрезать префикс",
     "Trim Space": "Обрезать пробелы",
     "Trim Suffix": "Обрезать суффикс",
+    "Truncate embeddings to this many dimensions": "Усечь эмбеддинги до указанного числа измерений",
     "Trusted": "Доверенный",
     "Try adjusting your search to locate a missing model.": "Попробуйте изменить параметры поиска, чтобы найти отсутствующую модель.",
+    "TTFT P50": "TTFT P50",
+    "TTFT P95": "TTFT P95",
+    "TTFT P99": "TTFT P99",
+    "TTFT percentiles, throughput, and 30-day uptime by group": "Перцентили TTFT, пропускная способность и доступность за 30 дней по группам",
     "TTL": "TTL",
     "TTL (seconds, 0 = default)": "TTL (секунды, 0 = по умолчанию)",
     "TTL (seconds)": "TTL (секунды)",
     "Tune selection priority, testing, status handling, and request overrides.": "Настройте приоритет выбора, тестирование, обработку статусов и переопределения запросов.",
     "Turnstile is enabled but site key is empty.": "Turnstile включён, но ключ сайта пуст.",
+    "Tutoring, learning aids, assessment": "Репетиторство, учебные материалы, оценка",
     "Two-factor Authentication": "Двухфакторная аутентификация",
     "Two-Factor Authentication": "Двухфакторная аутентификация",
     "Two-factor authentication disabled": "Двухфакторная аутентификация отключена",
@@ -3602,6 +3872,8 @@
     "Unbind": "Отвязать",
     "Unbind failed": "Не удалось отвязать",
     "Unbound {{provider}}": "{{provider}} отвязан",
+    "Underground": "Подземелье",
+    "Understand image inputs alongside text": "Понимать изображения наряду с текстом",
     "Unexpected release payload": "Неожиданный формат данных релиза",
     "Unified API Gateway for": "Единый API-шлюз для",
     "Unique identifier for this group.": "Уникальный идентификатор для этой группы.",
@@ -3618,6 +3890,7 @@
     "Untitled": "Без названия",
     "Untrusted upstream data:": "Недоверенные вышестоящие данные:",
     "Unused": "Неиспользованные",
+    "Up to 4 strings that stop generation": "До 4 строк, останавливающих генерацию",
     "Update": "Обновить",
     "Update All Balances": "Обновить все балансы",
     "Update API Key": "Обновить API-ключ",
@@ -3642,6 +3915,7 @@
     "Update your password for account:": "Обновите свой пароль для учетной записи:",
     "Update your password to keep your account secure": "Обновите пароль, чтобы обеспечить безопасность вашей учётной записи",
     "Updated": "Обновлено",
+    "Updated daily": "Обновляется ежедневно",
     "Updated successfully": "Обновлено успешно",
     "Updating all channel balances. This may take a while. Please refresh to see results.": "Обновление балансов всех каналов. Это может занять некоторое время. Пожалуйста, обновите страницу, чтобы увидеть результаты.",
     "Upgrade Group": "Повысить группу",
@@ -3666,6 +3940,8 @@
     "Upstream Updates": "Обновления вышестоящих моделей",
     "uptime": "время бесперебойной работы",
     "Uptime": "Время работы",
+    "Uptime (30d)": "Доступность (30 дн.)",
+    "Uptime (last 30 days)": "Доступность (за 30 дней)",
     "Uptime Kuma": "Время безотказной работы Kuma",
     "Uptime Kuma groups saved successfully": "Группы Uptime Kuma успешно сохранены",
     "Uptime Kuma URL": "URL Uptime Kuma",
@@ -3684,6 +3960,7 @@
     "Use authenticator code": "Использовать код аутентификатора",
     "Use backup code": "Использовать резервный код",
     "Use disk cache when request body exceeds this size": "Использовать дисковый кэш, когда тело запроса превышает этот размер",
+    "Use external tools to extend capabilities": "Использовать внешние инструменты для расширения возможностей",
     "Use our unified OpenAI-compatible endpoint in your applications": "Используйте наш единый OpenAI-совместимый эндпоинт в ваших приложениях",
     "Use Passkey to sign in without entering your password.": "Используйте ключ доступа для входа без ввода пароля.",
     "Use secure connection when sending emails": "Использовать безопасное соединение при отправке электронных писем",
@@ -3749,6 +4026,7 @@
     "Vendor deleted successfully": "Поставщик успешно удалён",
     "Vendor Name *": "Название поставщика *",
     "Vendor:": "Поставщик:",
+    "Vendors ranked by aggregated token volume": "Поставщики, ранжированные по совокупному объёму токенов",
     "Verification code": "Код подтверждения",
     "Verification Code": "Код подтверждения",
     "Verification code must be 6 digits": "Код подтверждения должен содержать 6 цифр",
@@ -3767,6 +4045,7 @@
     "Vertex AI does not support functionResponse.id. Enable this to remove the field automatically.": "Vertex AI не поддерживает functionResponse.id. Включите, чтобы автоматически удалить это поле.",
     "Vertex AI Key Format": "Формат ключа Vertex AI",
     "Video": "Видео",
+    "Video length in seconds": "Длительность видео в секундах",
     "Video Remix": "Ремикс видео",
     "Vidu": "Vidu",
     "View": "Просмотр",
@@ -3796,6 +4075,8 @@
     "Violation Marker": "Маркер нарушения",
     "vip": "vip",
     "VIP users with premium access": "VIP-пользователи с премиум-доступом",
+    "Vision": "Зрение",
+    "Vision, image / video, document chat": "Зрение, изображения / видео, чат по документам",
     "Visit Settings → General and adjust quota options...": "Перейдите в Настройки → Общие и настройте параметры квоты...",
     "Visitors must authenticate before accessing the pricing directory.": "Посетители должны пройти аутентификацию перед доступом к каталогу цен.",
     "Visual": "Визуальный",
@@ -3806,6 +4087,7 @@
     "Visual Mode": "Визуальный режим",
     "Visual Parameter Override": "Визуальное переопределение параметров",
     "VolcEngine": "VolcEngine",
+    "vs. previous": "к предыдущему",
     "Waffo Pancake Payment Gateway": "Платёжный шлюз Waffo Pancake",
     "Waffo Payment": "Оплата Waffo",
     "Waffo Payment Gateway": "Платёжный шлюз Waffo",
@@ -3826,6 +4108,7 @@
     "We could not load the setup status.": "Не удалось загрузить статус настройки.",
     "We will prompt your device to confirm using biometrics or your hardware key.": "Мы предложим вашему устройству подтвердить действие с помощью биометрии или аппаратного ключа.",
     "We'll be back online shortly.": "Мы скоро вернемся в сеть.",
+    "Web search": "Веб-поиск",
     "Web Search": "Веб-поиск",
     "Webhook Configuration:": "Конфигурация веб-хука:",
     "Webhook public key (production)": "Публичный ключ webhook (production)",
@@ -3845,6 +4128,9 @@
     "Week": "Неделя",
     "Weekday": "День недели",
     "Weekly": "Еженедельно",
+    "Weekly token usage by model across the past few weeks": "Еженедельное использование токенов по моделям за последние недели",
+    "Weekly token usage by model across the past year": "Еженедельное использование токенов по моделям за последний год",
+    "Weekly token usage by model since launch": "Еженедельное использование токенов по моделям с момента запуска",
     "Weekly Window": "Недельное окно",
     "Weight": "Вес",
     "Welcome back!": "Добро пожаловать обратно!",
@@ -3869,7 +4155,9 @@
     "Whitelist (Only allow listed IPs)": "Белый список (Разрешить только указанные IP-адреса)",
     "whsec_xxx": "whsec_xxx",
     "Window:": "Окно:",
+    "Wire encoding for the embedding vectors": "Кодирование векторов в передаче",
     "with conflicts": "с конфликтами",
+    "with the API key from your token settings.": "на API-ключ из настроек токенов.",
     "Without additional conditions, only the type above is used for pruning.": "Без дополнительных условий для очистки используется только тип выше.",
     "Worker Access Key": "Ключ доступа воркера",
     "Worker Proxy": "Прокси воркера",
@@ -3880,6 +4168,7 @@
     "xAI": "xAI",
     "Xinference": "Xinference",
     "Xunfei": "Xunfei",
+    "Year": "Год",
     "years": "лет",
     "You are about to delete {{count}} API key(s).": "Вы собираетесь удалить {{count}} API-ключ(а/ей).",
     "You are running the latest version ({{version}}).": "Вы используете последнюю версию ({{version}}).",
@@ -3907,6 +4196,7 @@
     "Your Telegram Bot Token": "Ваш токен Telegram-бота",
     "Your Turnstile secret key": "Секретный ключ Turnstile",
     "Your Turnstile site key": "Ключ сайта Turnstile",
+    "Zero retention": "Без хранения данных",
     "Zhipu": "Zhipu",
     "Zhipu V4": "Zhipu V4",
     "Zoom": "Zoom"
diff --git a/web/default/src/i18n/locales/vi.json b/web/default/src/i18n/locales/vi.json
index 194864dcab3..f5403dec6b9 100644
--- a/web/default/src/i18n/locales/vi.json
+++ b/web/default/src/i18n/locales/vi.json
@@ -28,16 +28,22 @@
     "{{count}} days remaining": "{{count}} days remaining",
     "{{count}} disabled channel(s) deleted": "Đã xóa {{count}} kênh đã tắt",
     "{{count}} hours ago": "{{count}} giờ trước",
+    "{{count}} incidents": "{{count}} sự cố",
+    "{{count}} incidents in the last 30 days": "{{count}} sự cố trong 30 ngày qua",
     "{{count}} IP(s)": "{{count}} IP",
     "{{count}} log entries removed.": "Đã xóa {{count}} mục nhật ký.",
     "{{count}} minutes ago": "{{count}} phút trước",
     "{{count}} model(s)": "{{count}} mô hình",
+    "{{count}} models": "{{count}} mô hình",
     "{{count}} months ago": "{{count}} tháng trước",
     "{{count}} override": "{{count}} ghi đè",
     "{{count}} tiers": "{{count}} bậc",
+    "{{count}} vendors": "{{count}} nhà cung cấp",
     "{{count}} weeks ago": "{{count}} tuần trước",
     "{{field}} updated to {{value}}": "{{field}} đã cập nhật thành {{value}}",
     "{{field}} updated to {{value}} for tag: {{tag}}": "{{field}} đã cập nhật thành {{value}} cho nhãn: {{tag}}",
+    "{{modality}} not supported": "Không hỗ trợ {{modality}}",
+    "{{modality}} supported": "Hỗ trợ {{modality}}",
     "{{n}} model(s) selected": "Đã chọn {{n}} model",
     "{{value}}ms": "{{value}} ms",
     "{{value}}s": "{{value}} s",
@@ -45,9 +51,13 @@
     "@lobehub/icons key name": "@lobehub/icons tên khóa",
     "/status/": "/status/",
     "/your/endpoint": "/điểm cuối của bạn",
+    "#1 App": "#1 Ứng dụng",
+    "#1 by usage": "Hạng 1 theo mức sử dụng",
+    "#1 Model": "#1 Mô hình",
     "% off": "% giảm giá",
     "`, and `-nothinking` suffixes while routing to the correct Gemini variant.": ", và",
     "© 2025 Your Company. All rights reserved.": "© 2025 Công ty của bạn. Mọi quyền được bảo lưu.",
+    "+{{count}} more": "thêm {{count}} mục",
     "| Based on": "| Dựa trên",
     "0 means unlimited": "0 có nghĩa là không giới hạn",
     "1 Day": "1 ngày",
@@ -75,6 +85,7 @@
     "3. Enter your Gotify server URL and token above": "3. Nhập URL máy chủ Gotify và mã thông báo của bạn ở trên",
     "30 Days": "30 ngày",
     "30 days ago": "30 ngày trước",
+    "30d change": "Thay đổi 30 ngày",
     "5-Hour Window": "Cửa sổ 5 giờ",
     "50 / page": "50 / trang",
     "7 Days": "7 ngày",
@@ -97,12 +108,15 @@
     "Account ID *": "ID tài khoản *",
     "Account Info": "Thông tin tài khoản",
     "Account used when authenticating with the SMTP server": "Tài khoản được sử dụng khi xác thực với máy chủ SMTP",
+    "Across all groups": "Trên mọi nhóm",
     "Action confirmation": "Xác nhận hành động",
     "Actions": "Hành động",
     "active": "hoạt động",
     "Active": "Hoạt động",
+    "Active apps": "Ứng dụng đang hoạt động",
     "Active Cache Count": "Số bộ nhớ đệm hoạt động",
     "Active Files": "Tệp đang hoạt động",
+    "Active models": "Mô hình đang hoạt động",
     "active users": "Người dùng tích cực",
     "Actual Amount": "Số tiền thực tế",
     "Actual Model": "Mô hình thực tế",
@@ -190,12 +204,18 @@
     "Advanced platform configuration.": "Cấu hình nền tảng nâng cao.",
     "Advanced Settings": "Cài đặt nâng cao",
     "Advanced text editing": "Chỉnh sửa văn bản nâng cao",
+    "Aesthetic style": "Phong cách",
     "After clicking the button, you'll be asked to authorize the bot": "Sau khi nhấp vào nút, bạn sẽ được yêu cầu ủy quyền cho bot",
     "After disabling, it will no longer be shown to users, but historical orders are not affected. Continue?": "Sau khi vô hiệu hóa, sẽ không hiển thị cho người dùng nữa, nhưng đơn hàng lịch sử không bị ảnh hưởng. Tiếp tục?",
     "After enabling, the plan will be shown to users. Continue?": "Sau khi kích hoạt, gói sẽ được hiển thị cho người dùng. Tiếp tục?",
     "After invalidating, this subscription will be immediately deactivated. Historical records are not affected. Continue?": "Sau khi vô hiệu hóa, đăng ký này sẽ bị hủy kích hoạt ngay lập tức. Hồ sơ lịch sử không bị ảnh hưởng. Tiếp tục?",
     "After scanning, the binding will complete automatically": "Sau khi quét, việc liên kết sẽ hoàn tất tự động.",
     "Agent ID *": "Mã đại lý *",
+    "Aggregate tokens delivered across the platform": "Tổng số token được phục vụ trên toàn hệ thống",
+    "Aggregate traffic across every category": "Tổng hợp lưu lượng tất cả danh mục",
+    "Aggregated across enabled groups": "Tổng hợp các nhóm đang bật",
+    "Aggregated across the apps below": "Tổng hợp các ứng dụng bên dưới",
+    "Aggregated traffic by upstream model provider": "Lưu lượng tổng hợp theo nhà cung cấp mô hình",
     "Aggregated usage metrics and trend charts.": "Chỉ số sử dụng tổng hợp và biểu đồ xu hướng.",
     "aggregates 50+ AI providers behind one unified API. Manage access, track costs, and scale effortlessly.": "tổng hợp hơn 50 nhà cung cấp AI sau một API thống nhất. Quản lý truy cập, theo dõi chi phí và mở rộng dễ dàng.",
     "AGPL v3.0 License": "Giấy phép AGPL v3.0",
@@ -209,19 +229,23 @@
     "AK/SK mode: use AccessKey|SecretAccessKey|Region": "Chế độ AK/SK: sử dụng AccessKey|SecretAccessKey|Region",
     "Ali": "Ali",
     "All": "All",
+    "All categories": "Tất cả danh mục",
     "All edits are overwrite operations. Leave fields empty to keep current values unchanged.": "Tất cả các chỉnh sửa đều là thao tác ghi đè. Để trống các trường để giữ nguyên giá trị hiện tại.",
     "All files exceed the maximum size.": "Tất cả các tệp vượt quá kích thước tối đa.",
     "All Groups": "Tất cả các nhóm",
     "All Models": "Tất cả các mẫu",
     "All models in use are properly configured.": "Tất cả các mô hình đang được sử dụng đều được cấu hình đúng cách.",
     "All Must Match (AND)": "Tất cả phải khớp (AND)",
+    "All requests must include": "Mọi yêu cầu phải có header",
     "All Status": "Tất cả trạng thái",
     "All Sync Status": "Tất cả Trạng thái Đồng bộ",
+    "All systems operational": "Tất cả hệ thống hoạt động bình thường",
     "All Tags": "Tất cả Thẻ",
     "All Types": "All types",
     "All upstream data is trusted": "Tất cả dữ liệu thượng nguồn đều được tin cậy",
     "All Vendors": "Tất cả Nhà cung cấp",
     "All Your AI Models": "Tất cả mô hình AI của bạn",
+    "All-time": "Mọi thời điểm",
     "Allocated Memory": "Bộ nhớ đã cấp phát",
     "Allow accountFilter parameter": "Cho phép tham số accountFilter",
     "Allow Claude beta query passthrough": "Cho phép chuyển tiếp truy vấn beta Claude",
@@ -279,6 +303,7 @@
     "Answer": "Trả lời",
     "Anthropic": "Anthropic",
     "Any Match (OR)": "Bất kỳ khớp (OR)",
+    "API": "API",
     "API Access": "Truy cập API",
     "API Addresses": "Địa chỉ API",
     "API Base URL (Important: Not Chat API) *": "URL cơ sở API (Quan trọng: Không phải API Chat) *",
@@ -312,6 +337,8 @@
     "API URL": "API URL",
     "API usage records": "Lịch sử sử dụng API",
     "API2GPT": "API2GPT",
+    "App": "Ứng dụng",
+    "App rankings shown here are simulated for preview purposes and will be replaced with live usage data once the backend integration is complete.": "Bảng xếp hạng ứng dụng hiển thị tại đây là dữ liệu mô phỏng để xem trước và sẽ được thay thế bằng dữ liệu thực sau khi tích hợp backend.",
     "Append": "Thêm vào cuối",
     "Append mode: New keys will be added to the end of the existing key list": "Chế độ nối: Các khóa mới sẽ được thêm vào cuối danh sách khóa hiện có",
     "Append Template": "Thêm mẫu",
@@ -329,6 +356,10 @@
     "Apply Sync": "Áp dụng đồng bộ",
     "Applying...": "Đang áp dụng...",
     "Approx.": "Xấp xỉ.",
+    "apps": "ứng dụng",
+    "Apps": "Ứng dụng",
+    "apps tracked": "ứng dụng được theo dõi",
+    "Apps using the most tokens through new-api": "Ứng dụng dùng nhiều token nhất qua new-api",
     "are also listed here. Remove them from Models to keep the `/v1/models` response user-friendly and hide vendor-specific names.": "cũng được liệt kê ở đây. Xóa chúng khỏi Models để giữ cho phản hồi `/v1/models` thân thiện với người dùng và ẩn các tên dành riêng cho nhà cung cấp.",
     "Are you sure you want to delete": "Bạn có chắc chắn muốn xóa ",
     "Are you sure you want to delete all auto-disabled keys? This action cannot be undone.": "Bạn có chắc chắn muốn xóa tất cả các khóa bị tắt tự động? Hành động này không thể hoàn tác.",
@@ -397,6 +428,7 @@
     "Available Models": "Mô hình khả dụng",
     "Available Rewards": "Phần thưởng hiện có",
     "Average RPM": "RPM trung bình",
+    "Average tokens per second sustained per group": "Số token mỗi giây trung bình duy trì cho từng nhóm",
     "Average TPM": "TPM trung bình",
     "AWS": "AWS",
     "AWS Bedrock Claude Compat": "AWS Bedrock Claude tương thích",
@@ -428,6 +460,7 @@
     "Base amount. Actual deduction = base amount × system group rate.": "Số tiền cơ sở. Số tiền trừ thực tế = số tiền cơ sở × tỷ lệ nhóm hệ thống.",
     "Base Limits": "Giới hạn cơ bản",
     "Base multipliers applied when users select specific groups.": "Hệ số nhân cơ bản được áp dụng khi người dùng chọn các nhóm cụ thể.",
+    "Base Price": "Giá cơ bản",
     "Base rate limit windows for this account.": "Cửa sổ giới hạn tốc độ cơ bản cho tài khoản này.",
     "Base URL": "URL cơ sở",
     "Base URL of your Uptime Kuma instance": "URL cơ sở của phiên bản Uptime Kuma của bạn",
@@ -448,6 +481,7 @@
     "Batch processing failed": "Xử lý hàng loạt thất bại",
     "Batch upstream model updates applied: {{channels}} channels, {{added}} added, {{removed}} removed, {{fails}} failed": "Đã áp dụng cập nhật hàng loạt mô hình upstream: {{channels}} kênh, {{added}} đã thêm, {{removed}} đã xóa, {{fails}} thất bại",
     "Best for single-tenant deployments. Pricing and billing options stay hidden.": "Phù hợp nhất cho triển khai đơn người dùng. Các tùy chọn giá và thanh toán sẽ được ẩn.",
+    "Best TTFT": "TTFT tốt nhất",
     "Billing": "Thanh toán",
     "Billing currency": "Loại tiền thanh toán",
     "Billing Details": "Chi tiết thanh toán",
@@ -474,6 +508,7 @@
     "Blocked keywords": "Blocked keyword",
     "Blocks messages when sensitive keywords are detected.": "Chặn tin nhắn khi phát hiện từ khóa nhạy cảm.",
     "Body param": "Tham số body",
+    "Border radius": "Độ bo góc",
     "Bot Name": "Tên Bot",
     "Bot Protection": "Bảo vệ Bot",
     "Bot Token": "Mã thông báo Bot",
@@ -485,7 +520,7 @@
     "Broadcast a global banner to users. Markdown is supported.": "Phát một biểu ngữ toàn cầu đến người dùng. Hỗ trợ Markdown.",
     "Broadcast short system notices on the dashboard": "Phát các thông báo hệ thống ngắn trên bảng điều khiển",
     "Browse and compare": "Duyệt và so sánh",
-    "Discover curated AI models, compare pricing and capabilities, and choose the right model for every scenario.": "Khám phá các mô hình AI được tuyển chọn, so sánh giá và khả năng, rồi chọn mô hình phù hợp cho từng kịch bản.",
+    "Browse rankings by category": "Duyệt bảng xếp hạng theo danh mục",
     "Budget tokens = max tokens × ratio. Accepts a decimal between 0.002 and 1. Recommended to keep aligned with upstream billing.": "Số token ngân sách = số token tối đa × tỷ lệ. Chấp nhận một số thập phân từ 0.002 đến 1. Khuyến nghị nên giữ cho phù hợp với cách tính phí của nhà cung cấp.",
     "Budget tokens = max tokens × ratio. Accepts a decimal between 0.1 and 1.": "Số token ngân sách = số token tối đa × tỷ lệ. Chấp nhận một số thập phân từ 0.1 đến 1.",
     "Budget Tokens Ratio": "Tỷ lệ Mã thông báo Ngân sách",
@@ -495,6 +530,8 @@
     "Built-in Device": "Thiết bị tích hợp",
     "Built-in: phone fingerprint/face, or Windows Hello; External: USB security key": "Tích hợp sẵn: vân tay/khuôn mặt điện thoại, hoặc Windows Hello; Bên ngoài: khóa bảo mật USB",
     "by": "by",
+    "By category": "Theo danh mục",
+    "By model author": "Theo nhà phát triển mô hình",
     "Cache": "Bộ nhớ đệm",
     "Cache Creation": "Tạo cache",
     "Cache Creation (1h)": "Tạo cache (1h)",
@@ -506,6 +543,7 @@
     "Cache mode": "Chế độ bộ đệm",
     "Cache ratio": "Tỷ lệ bộ nhớ đệm",
     "Cache Read": "Đọc bộ nhớ đệm",
+    "Cache repeated prompt prefixes for cheaper, faster reuse": "Lưu cache phần đầu lời nhắc lặp lại để tái sử dụng nhanh và rẻ hơn",
     "Cache write": "Ghi cache",
     "Cache Write": "Ghi bộ nhớ đệm",
     "Cache Write (1h)": "Ghi cache (1h)",
@@ -527,13 +565,16 @@
     "Cancel": "Hủy bỏ",
     "Cancelled": "Đã hủy",
     "Cancelled at": "Đã hủy lúc",
+    "Capabilities": "Khả năng",
     "Capture a reusable bundle of models, tags, or endpoints.": "Đóng gói một bộ có thể tái sử dụng gồm các mô hình, thẻ hoặc điểm cuối.",
     "Card view": "Dạng thẻ",
+    "Category": "Danh mục",
     "Category Name": "Tên danh mục",
     "Category name is required": "Tên danh mục là bắt buộc",
     "Category name must be less than 50 characters": "Tên danh mục phải ít hơn 50 ký tự",
     "Caution": "Thận trọng",
     "CC Switch": "Chuyển đổi CC",
+    "Centered": "Căn giữa",
     "Chain": "Chuỗi",
     "Change": "Thay đổi",
     "Change language": "Đổi ngôn ngữ",
@@ -563,6 +604,7 @@
     "channel(s)? This action cannot be undone.": "kênh(s)? Hành động này không thể hoàn tác.",
     "Channels": "Kênh",
     "Channels deleted successfully": "Xóa kênh thành công",
+    "Character chat, storytelling, persona": "Trò chuyện nhân vật, kể chuyện, nhân cách hoá",
     "Chart Preferences": "Tùy chọn biểu đồ",
     "Chart Settings": "Cài đặt Biểu đồ",
     "Chat": "Trò chuyện",
@@ -632,6 +674,7 @@
     "Cleared all models": "Đã xóa tất cả các mô hình",
     "Click \"Create Plan\" to create your first subscription plan": "Nhấp \"Tạo gói\" để tạo gói đăng ký đầu tiên",
     "Click \"Generate\" to create a token": "Nhấp \"Tạo\" để tạo một token",
+    "Click any category to drill into its models, apps, and trends": "Bấm vào danh mục để xem chi tiết mô hình, ứng dụng và xu hướng",
     "Click for details": "Nhấp để xem chi tiết",
     "Click save when you're done.": "Nhấn lưu khi bạn hoàn tất.",
     "Click save when you&apos;re done.": "Nhấn lưu khi bạn hoàn tất.",
@@ -655,6 +698,9 @@
     "CNY": "CNY",
     "CNY per USD": "CNY trên USD",
     "Code": "Mã",
+    "Code generation, refactoring, autocomplete": "Sinh code, refactor, gợi ý hoàn thành",
+    "Code interpreter": "Trình thông dịch mã",
+    "Code samples": "Mẫu mã",
     "Codes copied!": "Đã sao chép mã!",
     "Codex": "Codex",
     "Codex Account & Usage": "Tài khoản và sử dụng Codex",
@@ -666,7 +712,9 @@
     "Collapse All": "Thu gọn tất cả",
     "Color": "Màu",
     "Color is required": "Màu sắc là bắt buộc",
+    "Color preset": "Cài đặt màu sẵn",
     "Color:": "Màu sắc:",
+    "Comfortable": "Thoải mái",
     "Coming Soon!": "Sắp ra mắt!",
     "Comma-separated exact model names. Prefix with regex: to ignore by regular expression.": "Tên mô hình chính xác, phân tách bằng dấu phẩy. Thêm tiền tố regex: để bỏ qua bằng biểu thức chính quy.",
     "Comma-separated list of allowed ports (empty = all ports)": "Danh sách các cổng được phép, phân cách bằng dấu phẩy (để trống = tất cả các cổng)",
@@ -679,6 +727,13 @@
     "Common ports include 25, 465, and 587": "Các cổng phổ biến bao gồm 25, 465 và 587",
     "Common User": "Người dùng thông thường",
     "Community driven, self-hosted, and extensible": "Do cộng đồng phát triển, tự lưu trữ và có thể mở rộng",
+    "Compact": "Gọn",
+    "Compare each vendor's token share across the past few weeks": "So sánh thị phần token của từng nhà cung cấp trong vài tuần qua",
+    "Compare each vendor's token share across the past year": "So sánh thị phần token của từng nhà cung cấp trong năm qua",
+    "Compare each vendor's token share over the past 24 hours": "So sánh thị phần token của từng nhà cung cấp trong 24 giờ qua",
+    "Compare each vendor's token share over the past month": "So sánh thị phần token của từng nhà cung cấp trong tháng qua",
+    "Compare each vendor's token share since launch": "So sánh thị phần token của từng nhà cung cấp kể từ khi ra mắt",
+    "Compare the most popular models on the platform": "So sánh các mô hình phổ biến nhất trên nền tảng",
     "compatible API routes": "tuyến API tương thích",
     "Compatible API routes for common AI application workflows": "Các tuyến API tương thích cho quy trình ứng dụng AI phổ biến",
     "Complete API documentation with multi-language SDK support": "Tài liệu API đầy đủ với hỗ trợ SDK đa ngôn ngữ",
@@ -792,6 +847,8 @@
     "Content displayed on the home page (supports Markdown)": "Nội dung hiển thị trên trang chủ (hỗ trợ Markdown)",
     "Content not found.": "Không tìm thấy nội dung.",
     "Content not modified!": "Nội dung không được thay đổi!",
+    "Content width": "Chiều rộng nội dung",
+    "Context": "Ngữ cảnh",
     "Continue": "Tiếp tục",
     "Continue with {{name}}": "Tiếp tục với {{name}}",
     "Continue with Discord": "Tiếp tục với Discord",
@@ -800,11 +857,13 @@
     "Continue with OIDC": "Tiếp tục với OIDC",
     "Continue with Telegram": "Tiếp tục với Telegram",
     "Continue with WeChat": "Tiếp tục với WeChat",
+    "Contract review, compliance, summarisation": "Rà soát hợp đồng, tuân thủ, tóm tắt",
     "Control log retention and clean historical data.": "Kiểm soát việc lưu giữ nhật ký và làm sạch dữ liệu lịch sử.",
     "Control passthrough behavior and connection keep-alive settings": "Kiểm soát hành vi truyền qua và cài đặt duy trì kết nối",
     "Control request frequency to prevent abuse and manage system load.": "Kiểm soát tần suất yêu cầu để ngăn chặn lạm dụng và quản lý tải hệ thống.",
     "Control which models are exposed and which groups may use them.": "Kiểm soát mô hình được hiển thị và nhóm nào có thể sử dụng chúng.",
     "Control which sidebar areas and modules are available to all users.": "Kiểm soát những khu vực thanh bên và mô-đun nào khả dụng cho tất cả người dùng.",
+    "Controls how much the model thinks before answering": "Điều chỉnh mức suy luận trước khi trả lời",
     "Controls whether user verification (biometrics/PIN) is required during Passkey flows.": "Kiểm soát xem liệu có yêu cầu xác minh người dùng (sinh trắc học/mã PIN) trong các luồng Passkey hay không.",
     "Conversion rate from USD to your custom currency": "Tỷ giá chuyển đổi từ USD sang đơn vị tiền tệ tùy chỉnh của bạn",
     "Convert reasoning_content to <think> tag in content": "Chuyển đổi reasoning_content thành thẻ <think> trong nội dung",
@@ -845,6 +904,7 @@
     "Copy to clipboard": "Sao chép vào bảng tạm",
     "Copy token": "Sao chép mã thông báo",
     "Copy URL": "Sao chép URL",
+    "Copywriting, ad creative, SEO": "Viết copy, sáng tạo quảng cáo, SEO",
     "Core Configuration": "Cấu hình chính",
     "Core Features": "Tính năng cốt lõi",
     "Cost": "Chi phí",
@@ -936,6 +996,11 @@
     "Customize sidebar display content": "Tùy chỉnh nội dung hiển thị thanh bên",
     "Daily": "Hàng ngày",
     "Daily Check-in": "Điểm danh hàng ngày",
+    "Daily token usage by model across the past few weeks": "Sử dụng token theo mô hình hàng ngày trong vài tuần qua",
+    "Daily token usage by model across the past month": "Sử dụng token hàng ngày của từng mô hình trong tháng qua",
+    "Daily token usage by model over the past month": "Sử dụng token theo mô hình hàng ngày trong tháng qua",
+    "Daily uptime over the last 30 days": "Thời gian hoạt động hàng ngày trong 30 ngày qua",
+    "Daily uptime; {{incidents}} incidents totalling {{minutes}} minutes": "Thời gian hoạt động hàng ngày; {{incidents}} sự cố tổng cộng {{minutes}} phút",
     "Dark": "Tối",
     "Dashboard": "Bảng điều khiển",
     "Dashboard Preferences": "Tùy chọn bảng điều khiển",
@@ -944,6 +1009,7 @@
     "Data directory:": "Thư mục dữ liệu:",
     "Data is stored locally on this device. Use system backups to keep a safe copy.": "Dữ liệu được lưu trữ cục bộ trên thiết bị này. Sử dụng tính năng sao lưu hệ thống để giữ một bản",
     "Data management and log viewing": "Quản lý dữ liệu và xem nhật ký",
+    "Data retention": "Lưu giữ dữ liệu",
     "Database": "Cơ sở dữ liệu",
     "Database check": "Kiểm tra cơ sở dữ liệu",
     "Date and time when this announcement should be displayed": "The date and time this notification should be displayed",
@@ -956,6 +1022,7 @@
     "default": "mặc định",
     "Default": "Mặc định",
     "Default (New Frontend)": "Mặc định (Frontend mới)",
+    "Default / range": "Mặc định / khoảng",
     "Default API Version *": "Phiên bản API mặc định *",
     "Default API version for this channel": "Phiên bản API mặc định cho kênh này",
     "Default Collapse Sidebar": "Mặc định Thu gọn Thanh bên",
@@ -972,6 +1039,7 @@
     "Define API endpoints for this model (JSON format)": "Định nghĩa các điểm cuối API cho mô hình này (định dạng JSON)",
     "Define endpoint mappings for each provider.": "Định nghĩa ánh xạ điểm cuối cho mỗi nhà cung cấp.",
     "Define per-group rules to add, remove, or append selectable groups for specific user groups.": "Định nghĩa quy tắc theo nhóm để thêm, xóa hoặc nối các nhóm có thể chọn cho các nhóm người dùng cụ thể.",
+    "Degraded performance recently": "Hiệu năng gần đây bị giảm",
     "Delete": "Xóa",
     "Delete (": "Xóa (",
     "Delete {{count}} API key(s)?": "Xóa {{count}} khóa API?",
@@ -1009,6 +1077,7 @@
     "Demo site mode": "Chế độ trang demo",
     "Demo Site Mode": "Chế độ trang Demo",
     "Demote": "Giáng chức",
+    "Density": "Mật độ",
     "Deploy your own gateway and start routing requests through your configured upstream services.": "Triển khai cổng riêng của bạn và bắt đầu định tuyến yêu cầu qua các dịch vụ thượng nguồn đã cấu hình.",
     "Deployment created successfully": "Tạo triển khai thành công",
     "Deployment details": "Chi tiết triển khai",
@@ -1035,6 +1104,7 @@
     "Detection complete: {{add}} to add, {{remove}} to remove": "Phát hiện hoàn tất: {{add}} để thêm, {{remove}} để xóa",
     "Detection failed": "Phát hiện thất bại",
     "Determines how this group is applied elsewhere.": "Xác định cách nhóm này được áp dụng ở nơi khác.",
+    "Deterministic sampling seed (best-effort)": "Hạt giống lấy mẫu xác định (cố gắng tốt nhất)",
     "Developer Friendly": "Thân thiện với nhà phát triển",
     "Device Type Preference": "Ưu tiên loại thiết bị",
     "Dify": "Dify",
@@ -1069,6 +1139,9 @@
     "Discount Rate:": "Tỷ lệ chiết khấu:",
     "Discount ratio for cache hits.": "Tỷ lệ chiết khấu cho lượt truy cập bộ nhớ đệm thành công.",
     "Discouraged": "Tuyệt vọng",
+    "Discover curated AI models, compare pricing and capabilities, and choose the right model for every scenario.": "Khám phá các mô hình AI được tuyển chọn, so sánh giá và khả năng, rồi chọn mô hình phù hợp cho từng kịch bản.",
+    "Discover the leading models in each domain": "Khám phá các mô hình hàng đầu trong từng lĩnh vực",
+    "Discover the most-used models, top apps, and rising vendors on the platform — updated continuously across every category.": "Khám phá các mô hình, ứng dụng và nhà cung cấp nổi bật trên hệ thống — cập nhật liên tục cho từng danh mục.",
     "Discovering...": "Đang khám phá...",
     "Disk cache cleared": "Đã xóa bộ nhớ đệm đĩa",
     "Disk Cache Settings": "Cài đặt bộ nhớ đệm đĩa",
@@ -1191,6 +1264,7 @@
     "Edit Vendor": "Chỉnh sửa Nhà cung cấp",
     "edit_this": "edit_this",
     "Editor mode": "Chế độ trình sửa",
+    "Education": "Giáo dục",
     "Email": "Email",
     "Email (required for verification)": "Email (bắt buộc để xác minh)",
     "Email Address": "Địa chỉ email",
@@ -1200,6 +1274,7 @@
     "Email Domain Whitelist": "Danh sách trắng tên miền email",
     "Email Field": "Trường Email",
     "Email Verification": "Xác minh Email",
+    "Email, summarisation, knowledge work": "Email, tóm tắt, làm việc tri thức",
     "Embeddings": "Embeddings",
     "Empty value will be saved as {}.": "Giá trị trống sẽ được lưu thành {}.",
     "Enable": "Bật",
@@ -1247,10 +1322,12 @@
     "Enabled all channels with tag: {{tag}}": "Đã bật tất cả kênh với nhãn: {{tag}}",
     "Enabled Status": "Trạng thái kích hoạt",
     "Enabling...": "Đang bật...",
+    "Encourages introducing new topics": "Khuyến khích chủ đề mới",
     "End": "End",
     "End Error": "Lỗi kết thúc",
     "End Reason": "Lý do kết thúc",
     "End Time": "Thời gian kết thúc",
+    "End-user identifier for abuse monitoring": "Định danh người dùng cuối để giám sát lạm dụng",
     "Endpoint": "Endpoint",
     "Endpoint config": "Cấu hình điểm cuối",
     "Endpoint Configuration": "Cấu hình điểm cuối",
@@ -1358,10 +1435,12 @@
     "Excellent": "Tuyệt vời",
     "Exchange rate is required": "Cần có tỷ giá",
     "Exchange rate must be greater than 0": "Tỷ giá phải lớn hơn 0",
+    "Execute code in a sandbox during the response": "Thực thi mã trong sandbox trong quá trình phản hồi",
     "Exhausted": "Đã cạn kiệt",
     "Existing account will be reused": "Tài khoản hiện có sẽ được sử dụng lại",
     "Existing Models ({{count}})": "Các mô hình hiện có ({{count}})",
     "Exists": "Tồn tại",
+    "Expand": "Mở rộng",
     "Expand All": "Mở rộng tất cả",
     "Expected a JSON array.": "Cần là một mảng JSON.",
     "Experiment with prompts and models in real time.": "Thử nghiệm với prompt và mô hình theo thời gian thực.",
@@ -1530,6 +1609,7 @@
     "Field Mapping": "Ánh Xạ Trường",
     "Field passthrough controls": "Điều khiển chuyển tiếp trường",
     "Field Path": "Đường dẫn trường",
+    "File": "Tệp",
     "File Search": "Tìm kiếm tệp",
     "Files to Retain": "Số tệp giữ lại",
     "Fill All Models": "Điền Tất Cả Mô Hình",
@@ -1569,6 +1649,7 @@
     "Final Consumed": "Tiêu thụ cuối cùng",
     "Final cost = base × multiplier when conditions match": "Chi phí cuối = cơ sở × hệ số khi thỏa điều kiện",
     "Final price multiplier (0.95 = 5% discount": "Hệ số nhân giá cuối cùng (0.95 = giảm giá 5%)",
+    "Finance": "Tài chính",
     "Fine-tune Midjourney integration and guardrails.": "Tinh chỉnh tích hợp Midjourney và các cơ chế bảo vệ.",
     "Finish Time": "Thời gian hoàn thành",
     "First/Last Frame to Video": "Khung đầu/cuối sang video",
@@ -1576,6 +1657,7 @@
     "Fixed abilities: {{success}} succeeded, {{fails}} failed": "Sửa khả năng: {{success}} thành công, {{fails}} thất bại",
     "Fixed price": "Giá cố định",
     "Fixed price (USD)": "Giá cố định (USD)",
+    "Floating": "Nổi",
     "FluentRead extension not detected. Please ensure it is installed and active.": "Không phát hiện tiện ích mở rộng FluentRead. Vui lòng đảm bảo nó đã được cài đặt và kích hoạt.",
     "Follow the guided steps to prepare your workspace before the first login.": "Thực hiện theo các bước hướng dẫn để chuẩn bị không gian làm việc của bạn trước lần đăng nhập đầu tiên.",
     "Footer": "Chân trang",
@@ -1596,10 +1678,13 @@
     "footer.new\u0061pi.projectAttributionSuffix": "Bản quyền được bảo lưu. Được thiết kế và phát triển bởi các cộng tác viên dự án.",
     "For channels added after May 10, 2025, no need to remove \".\" from model names during deployment": "Đối với các kênh được thêm sau ngày 10 tháng 5 năm 2025, không cần loại bỏ \".\" khỏi tên mô hình trong quá trình triển khai",
     "For private deployments, format: https://fastgpt.run/api/openapi": "Đối với các triển khai riêng tư, định dạng: https://fastgpt.run/api/openapi",
+    "Force a syntactically valid JSON response": "Buộc phản hồi JSON hợp lệ về cú pháp",
     "Force AUTH LOGIN": "Bắt buộc AUTH LOGIN",
     "Force Format": "Buộc định dạng",
     "Force format response to OpenAI standard (OpenAI channel only)": "Buộc định dạng phản hồi theo tiêu chuẩn OpenAI (chỉ kênh OpenAI)",
+    "Force JSON object or schema-conforming output": "Bắt buộc xuất JSON hoặc theo schema",
     "Force SMTP authentication using AUTH LOGIN method": "Bắt buộc xác thực SMTP sử dụng phương thức AUTH LOGIN",
+    "Forest Whisper": "Tiếng thì thầm rừng cây",
     "Forgot password": "Quên mật khẩu",
     "Forgot password?": "Quên mật khẩu?",
     "Form reset to saved values": "Đã đặt lại biểu mẫu về các giá trị đã lưu",
@@ -1614,6 +1699,7 @@
     "Format: APPID|APISecret|APIKey": "Định dạng: APPID|APISecret|APIKey",
     "Format: AppId|SecretId|SecretKey": "Định dạng: AppId|SecretId|SecretKey",
     "Forward requests directly to upstream providers without any post-processing.": "Chuyển tiếp các yêu cầu trực tiếp đến các nhà cung cấp ngược dòng mà không cần xử lý hậu kỳ nào.",
+    "Frames per second": "Khung hình / giây",
     "Free: {{free}} / Total: {{total}}": "Còn trống: {{free}} / Tổng: {{total}}",
     "Friendly name to identify this channel": "Tên thân thiện để nhận dạng kênh này",
     "From Address": "Địa chỉ Người gửi",
@@ -1623,6 +1709,9 @@
     "Full API Key": "Khóa API đầy đủ",
     "Full Base URL (supports": "URL cơ sở đầy đủ (hỗ trợ",
     "Full Code": "Mã đầy đủ",
+    "Full layout": "Bố cục đầy đủ",
+    "Full width": "Toàn chiều rộng",
+    "Function calling": "Gọi hàm",
     "Functions": "Hàm",
     "GC Count": "Số lần GC",
     "GC executed": "GC đã thực thi",
@@ -1639,9 +1728,11 @@
     "Generate Music": "Tạo nhạc",
     "Generate new backup codes for account recovery": "Tạo mã dự phòng mới để khôi phục tài khoản",
     "Generate New Codes": "Tạo mã mới",
+    "Generate tokens from the Tokens page; you can scope them to specific models, groups, IPs, and rate-limits.": "Tạo token tại trang Tokens; bạn có thể giới hạn theo model, nhóm, IP và rate-limit.",
     "Generated image": "Ảnh được tạo",
     "Generating new codes will invalidate all existing backup codes.": "Tạo mã mới sẽ vô hiệu hóa tất cả các mã dự phòng hiện có.",
     "Generating...": "Đang tạo...",
+    "Generation quality preset": "Mức chất lượng sinh",
     "Generic cache": "Bộ đệm chung",
     "Get notified when balance falls below this value": "Nhận thông báo khi số dư giảm xuống dưới giá trị này",
     "Get Started": "Bắt đầu",
@@ -1651,6 +1742,7 @@
     "Global configuration and administrative tools.": "Cấu hình toàn cục và công cụ quản trị.",
     "Global Coverage": "Phạm vi toàn cầu",
     "Global Model Configuration": "Cấu hình Mô hình Toàn cầu",
+    "Global throughput": "Thông lượng toàn hệ thống",
     "Go Back": "Quay lại",
     "Go back and edit": "Quay lại và chỉnh sửa",
     "Go to Dashboard": "Truy cập Dashboard",
@@ -1697,6 +1789,7 @@
     "Groups": "Nhóm",
     "Groups *": "Nhóm *",
     "Groups that users can select when creating API keys.": "Các nhóm mà người dùng có thể chọn khi tạo khóa API.",
+    "Growth": "Tăng trưởng",
     "Guardrails": "Hàng rào bảo vệ",
     "Guest": "Khách",
     "h": "h",
@@ -1710,11 +1803,14 @@
     "Has been invalidated": "Đã vô hiệu hóa thành công",
     "Have a Code?": "Có mã không?",
     "Header": "Header",
+    "header instead.": ".",
     "Header Name": "Tên header",
     "Header navigation": "Điều hướng đầu trang",
     "Header Override": "Ghi đè tiêu đề",
     "Header Passthrough (X-Request-Id)": "Chuyển tiếp header (X-Request-Id)",
     "Header Value (supports string or JSON mapping)": "Giá trị header (hỗ trợ chuỗi hoặc ánh xạ JSON)",
+    "header. Anthropic-formatted endpoints accept the": ". Các endpoint định dạng Anthropic chấp nhận header",
+    "Health": "Sức khỏe",
     "Hidden — verify to reveal": "Ẩn — xác minh để hiển thị",
     "Hide": "Ẩn",
     "Hide API key": "Ẩn khóa API",
@@ -1738,6 +1834,8 @@
     "Home Page Content": "Nội dung Trang chủ",
     "Hostname or IP of your SMTP provider": "Tên máy chủ hoặc IP của nhà cung cấp SMTP của bạn",
     "Hour": "Giờ",
+    "Hourly token usage by model across the last 24 hours": "Sử dụng token theo giờ của từng mô hình trong 24 giờ qua",
+    "Hourly token usage by model over the past 24 hours": "Sử dụng token theo mô hình theo giờ trong 24 giờ qua",
     "hours": "giờ",
     "How client credentials are sent to the token endpoint": "Cách thông tin xác thực client được gửi đến endpoint token",
     "How frequently the system tests all channels": "Tần suất hệ thống kiểm tra tất cả các kênh là bao nhiêu?",
@@ -1745,6 +1843,7 @@
     "How model mapping works": "Cách ánh xạ mô hình hoạt động",
     "How much to charge for each US dollar of balance (Epay)": "Tính phí bao nhiêu cho mỗi đô la Mỹ số dư (Epay)",
     "How this model name should match requests": "Tên mô hình này nên khớp với các yêu cầu như thế nào",
+    "How to deliver the resulting image": "Cách trả về ảnh kết quả",
     "How to get an io.net API Key": "Cách lấy Khóa API io.net",
     "How to reset my quota?": "Cách đặt lại hạn mức của tôi?",
     "How to select keys: random or sequential polling": "Cách chọn khóa: thăm dò ngẫu nhiên hay tuần tự",
@@ -1794,6 +1893,9 @@
     "Import to CC Switch": "Nhập vào CC Switch",
     "In Progress": "Đang xử lý",
     "In:": "Vào:",
+    "incident": "sự cố",
+    "incidents": "sự cố",
+    "Incidents": "Sự cố",
     "Include Group": "Bao gồm nhóm",
     "Include Model": "Bao gồm mô hình",
     "Include Rule Name": "Bao gồm tên quy tắc",
@@ -1810,14 +1912,15 @@
     "Input price": "Giá đầu vào",
     "Input tokens": "Token đầu vào",
     "Input Tokens": "Token đầu vào",
+    "Inset": "Khung trong",
     "Inspect user prompts": "Kiểm tra lời nhắc của người dùng",
     "Instance": "Phiên bản",
     "Integrations": "Tích hợp",
     "Inter-group overrides": "Ghi đè liên nhóm",
     "Inter-group ratio overrides": "Tỷ lệ liên nhóm ghi đè",
+    "Interface Language": "Ngôn ngữ giao diện",
     "Internal Notes": "Ghi chú nội bộ",
     "Internal notes (not shown to users)": "Ghi chú nội bộ (không hiển thị cho người dùng)",
-    "Interface Language": "Ngôn ngữ giao diện",
     "Internal Server Error!": "Lỗi máy chủ nội bộ!",
     "Invalid chat link. Please contact the administrator.": "Liên kết trò chuyện không hợp lệ. Vui lòng liên hệ quản trị viên.",
     "Invalid chat link. Please contact your administrator.": "Liên kết trò chuyện không hợp lệ. Vui lòng liên hệ với quản trị viên của bạn.",
@@ -1848,6 +1951,7 @@
     "Inviter": "Người mời",
     "Inviter Reward": "Phần thưởng người mời",
     "Invites": "Mời",
+    "Invoke developer-defined functions with structured arguments": "Gọi các hàm do nhà phát triển định nghĩa với đối số có cấu trúc",
     "io.net API Key": "Khóa API io.net",
     "io.net Deployments": "Triển khai io.net",
     "IP": "IP",
@@ -1872,6 +1976,7 @@
     "JSON map of group → ratio applied when the user selects the group explicitly.": "Bản đồ JSON của nhóm → tỷ lệ được áp dụng khi người dùng chọn nhóm đó một cách rõ ràng.",
     "JSON map of model → multiplier applied to quota billing.": "Bản đồ JSON của mô hình → hệ số nhân áp dụng cho thanh toán hạn mức.",
     "JSON map of model → USD cost per request. Takes precedence over ratio based billing.": "Ánh xạ JSON của mô hình → chi phí USD mỗi yêu cầu. Ưu tiên hơn thanh toán dựa trên tỷ lệ.",
+    "JSON mode": "Chế độ JSON",
     "JSON Mode": "Chế độ JSON",
     "JSON must be an object": "JSON phải là object",
     "JSON object:": "Đối tượng JSON:",
@@ -1893,10 +1998,13 @@
     "Keys, OAuth credentials, and multi-key update behavior.": "Khóa, thông tin xác thực OAuth và hành vi cập nhật nhiều khóa.",
     "Kling": "Kling",
     "Knowledge Base ID *": "Mã số Cơ sở kiến thức *",
+    "Knowledge cutoff": "Mốc dữ liệu",
+    "Lake View": "Hồ nước",
     "Landing page with system overview.": "Trang chủ với tổng quan hệ thống.",
-    "Language Preferences": "Tùy chọn ngôn ngữ",
     "Language preference saved": "Đã lưu tùy chọn ngôn ngữ",
+    "Language Preferences": "Tùy chọn ngôn ngữ",
     "Language preferences sync across your signed-in devices and affect API error messages.": "Tùy chọn ngôn ngữ sẽ đồng bộ trên các thiết bị đã đăng nhập và ảnh hưởng đến ngôn ngữ thông báo lỗi API.",
+    "Last 30 days uptime": "Uptime 30 ngày qua",
     "Last check time": "Thời gian kiểm tra gần nhất",
     "Last detected addable models": "Mô hình có thể thêm được phát hiện gần nhất",
     "Last Login": "Lần đăng nhập cuối",
@@ -1905,7 +2013,11 @@
     "Last updated:": "Cập nhật lần cuối:",
     "Last Used": "Dùng lần cuối",
     "Last used:": "Lần cuối sử dụng:",
+    "Latency trend (last 24h)": "Xu hướng độ trễ (24 giờ qua)",
+    "Lavender Dream": "Mộng hoa oải hương",
     "Layout": "Bố cục",
+    "lead": "dẫn đầu",
+    "Leaderboards": "Bảng xếp hạng",
     "Learn more": "Tìm hiểu thêm",
     "Learn more:": "Tìm hiểu thêm:",
     "Leave": "Rời khỏi",
@@ -1922,12 +2034,15 @@
     "Leave empty to use default": "Để trống để sử dụng mặc định",
     "Leave empty to use system temp directory": "Để trống để sử dụng thư mục tạm của hệ thống",
     "Leave empty to use username": "Để trống để sử dụng tên người dùng",
+    "Left to Right": "Trái sang phải",
     "Legacy Format (JSON Object)": "Định dạng cũ (đối tượng JSON)",
     "Legacy format must be a JSON object": "Định dạng cũ phải là đối tượng JSON",
     "Legacy Format Template": "Mẫu định dạng cũ",
+    "Legal": "Pháp lý",
     "Less": "Ít hơn",
     "Less Than": "Nhỏ hơn",
     "Less Than or Equal": "Nhỏ hơn hoặc bằng",
+    "License": "Giấy phép",
     "Light": "Ánh sáng",
     "Lightning Fast": "Nhanh như chớp",
     "Limit period": "Thời hiệu",
@@ -1942,6 +2057,7 @@
     "List of models supported by this channel. Use comma to separate multiple models.": "Danh sách các mô hình được hỗ trợ bởi kênh này. Sử dụng dấu phẩy để phân tách nhiều mô hình.",
     "List of origins (one per line) allowed for Passkey registration and authentication.": "Danh sách các nguồn gốc (mỗi dòng một mục) được phép đăng ký và xác thực Passkey.",
     "List view": "Xem dạng danh sách",
+    "LLM Leaderboard": "Bảng xếp hạng LLM",
     "LLM prompt helper": "Trợ lý prompt LLM",
     "Load Balancing": "Tải cân bằng",
     "Load template...": "Tải mẫu...",
@@ -1972,6 +2088,7 @@
     "Logo": "Logo",
     "Logo URL": "URL Logo",
     "Logs": "Nhật ký",
+    "Lowest median first-token latency": "Độ trễ trung vị token đầu tiên thấp nhất",
     "m": "m",
     "Maintain a list of common questions for the dashboard help panel": "Duy trì danh sách các câu hỏi thường gặp cho bảng trợ giúp của bảng điều khiển",
     "Maintenance": "Bảo trì",
@@ -2005,6 +2122,8 @@
     "Map request model names to actual provider model names (JSON format)": "Ánh xạ tên mô hình yêu cầu đến tên mô hình thực tế của nhà cung cấp (định dạng JSON)",
     "Map response status codes (JSON format)": "Ánh xạ mã trạng thái phản hồi (định dạng JSON)",
     "Map upstream status codes to different codes": "Ánh xạ mã trạng thái upstream sang các mã khác",
+    "Market Share": "Thị phần",
+    "Marketing": "Tiếp thị",
     "Match All (AND)": "Tất cả khớp (AND)",
     "Match Any (OR)": "Bất kỳ khớp (OR)",
     "Match Mode": "Chế độ khớp",
@@ -2021,6 +2140,7 @@
     "Matching Rules": "Quy tắc khớp",
     "Max Disk Cache Size (MB)": "Dung lượng tối đa bộ nhớ đệm đĩa (MB)",
     "Max Entries": "Số mục tối đa",
+    "Max output": "Đầu ra tối đa",
     "Max Requests (incl. failures)": "Maximum number of requests (including errors)",
     "Max Requests (including failures)": "Số yêu cầu tối đa (bao gồm cả các lỗi)",
     "Max requests per period": "Yêu cầu tối đa mỗi khoảng thời gian",
@@ -2031,8 +2151,15 @@
     "Maximum 200 characters": "Tối đa 200 ký tự",
     "Maximum 500 characters. Supports Markdown and HTML.": "Tối đa 500 ký tự. Hỗ trợ Markdown và HTML.",
     "Maximum check-in quota": "Hạn ngạch điểm danh tối đa",
+    "Maximum input window": "Cửa sổ nhập tối đa",
+    "Maximum number of tokens in the response": "Số token tối đa trong phản hồi",
     "Maximum quota amount awarded for check-in": "Số lượng hạn ngạch tối đa được trao cho điểm danh",
+    "Maximum tokens including hidden reasoning tokens": "Số token tối đa bao gồm token suy luận ẩn",
+    "Maximum tokens per response": "Số token tối đa mỗi phản hồi",
     "maxRequests ≥ 0, maxSuccess ≥ 1, both ≤ 2,147,483,647": "maxRequests ≥ 0, maxSuccess ≥ 1, cả hai đều ≤ 2,147,483,647",
+    "May be used for training by upstream provider": "Có thể được nhà cung cấp dùng để huấn luyện",
+    "Median time-to-first-token (TTFT) sampled hourly per group": "Độ trễ token đầu tiên trung vị (TTFT) lấy mẫu mỗi giờ theo nhóm",
+    "Medical Q&A, mental health support": "Hỏi đáp y tế, hỗ trợ sức khỏe tinh thần",
     "Memory Hits": "Lượt truy cập bộ nhớ",
     "Memory Threshold (%)": "Ngưỡng bộ nhớ (%)",
     "Merchant ID": "Mã thương gia",
@@ -2041,6 +2168,7 @@
     "Metadata": "Siêu dữ liệu",
     "Midjourney": "Midjourney",
     "MidjourneyPlus": "MidjourneyPlus",
+    "min downtime": "phút gián đoạn",
     "Min Top-up": "Nạp tối thiểu",
     "Min Top-up:": "Nạp tối thiểu:",
     "MiniMax": "MiniMax",
@@ -2056,12 +2184,15 @@
     "Minimum topup amount: {{amount}}": "Số tiền nạp tối thiểu: {{amount}}",
     "Minimum Trust Level": "Mức độ tin cậy tối thiểu",
     "Minimum:": "Tối thiểu:",
+    "Minor blips in the last 30 days": "Vài gián đoạn nhỏ trong 30 ngày qua",
     "Minute": "Phút",
     "minutes": "phút",
     "Missing code": "Thiếu mã",
     "Missing Models": "Thiếu Mô hình",
     "Missing user data from Passkey login response": "Thiếu dữ liệu người dùng từ phản hồi đăng nhập Passkey",
     "Mistral": "Mistral",
+    "Modalities": "Phương thức",
+    "Modality": "Phương thức",
     "Mode": "Chế độ",
     "model": "mô hình",
     "Model": "Mô hình",
@@ -2074,6 +2205,7 @@
     "Model deleted successfully": "Model đã được xóa thành công",
     "Model deployment service is disabled": "Dịch vụ triển khai mô hình đang bị tắt",
     "Model Description": "Mô tả Mô hình",
+    "Model details": "Chi tiết mô hình",
     "Model disabled successfully": "Model đã được vô hiệu hóa thành công",
     "Model enabled successfully": "Model đã được kích hoạt thành công",
     "Model fixed pricing": "Fixed-price model",
@@ -2111,11 +2243,15 @@
     "Models & Groups": "Mô hình & Nhóm",
     "Models appended successfully": "Đã thêm mô hình thành công",
     "Models are required": "Các mô hình được yêu cầu",
+    "Models climbing the leaderboard": "Các mô hình đang leo bảng xếp hạng",
+    "Models climbing the leaderboard fastest": "Mô hình tăng hạng nhanh nhất",
     "Models directory": "Thư mục mô hình",
     "Models Directory": "Danh mục mô hình",
     "Models fetched successfully": "Các mô hình đã được tải thành công",
     "Models filled to form": "Mô hình đã được điền vào biểu mẫu",
     "Models listed here will not automatically append or remove -thinking / -nothinking suffixes.": "Các mô hình được liệt kê ở đây sẽ không tự động thêm hoặc xóa hậu tố -thinking / -nothinking.",
+    "Models losing positions": "Các mô hình đang mất vị trí",
+    "Models losing the most positions": "Mô hình tụt hạng nhiều nhất",
     "Models not in list, may fail to invoke": "Các mô hình không có trong danh sách, có thể gọi thất bại",
     "Models that are being used but not configured in the system": "Mô hình đang được sử dụng nhưng chưa được cấu hình trong hệ thống",
     "Models updated successfully": "Mô hình đã được cập nhật thành công",
@@ -2126,12 +2262,14 @@
     "Monitoring & Alerts": "Giám sát & Cảnh báo",
     "Month": "Tháng",
     "Monthly": "Hàng tháng",
+    "Monthly tokens": "Token mỗi tháng",
     "months": "tháng",
     "Moonshot": "Dự án táo bạo",
     "More": "Thêm",
     "more mapping": "thêm lập bản đồ",
     "More templates...": "Thêm mẫu...",
     "More...": "Thêm...",
+    "Most-used models in the selected period and category": "Mô hình được dùng nhiều nhất trong khoảng thời gian và danh mục đã chọn",
     "Move": "Di chuyển",
     "Move a request header": "Di chuyển header yêu cầu",
     "Move affiliate rewards to your main balance": "Chuyển phần thưởng liên kết vào số dư chính của bạn",
@@ -2148,7 +2286,10 @@
     "Multi-key: Random rotation": "Đa khóa: Xoay vòng ngẫu nhiên",
     "Multi-protocol Compatible": "Tương thích đa giao thức",
     "Multi-region deployment for stable global access": "Triển khai đa khu vực để truy cập toàn cầu ổn định",
+    "Multi-step thinking before final answer": "Suy luận nhiều bước trước khi đưa ra câu trả lời cuối",
     "Multi-user management with flexible permission allocation": "Quản lý nhiều người dùng với phân bổ quyền linh hoạt",
+    "Multilingual translation and localisation": "Dịch và bản địa hoá đa ngôn ngữ",
+    "Multimodal": "Đa phương thức",
     "Multiplier": "Hệ số nhân",
     "Multiplier applied when": "Hệ số nhân áp dụng khi",
     "Multiplier applied when {{userGroup}} uses {{targetGroup}}": "Hệ số áp dụng khi {{userGroup}} sử dụng {{targetGroup}}",
@@ -2184,6 +2325,7 @@
     "Network proxy for this channel (supports socks5 protocol)": "Proxy mạng cho kênh này (hỗ trợ giao thức socks5)",
     "Never": "Không bao giờ",
     "Never expires": "Không hết hạn",
+    "NEW": "MỚI",
     "New API": "API mới",
     "New API &lt;noreply@example.com&gt;": "API mới &lt;noreply@example.com&gt;",
     "New API Project Repository:": "Kho lưu trữ Dự án API Mới:",
@@ -2197,6 +2339,7 @@
     "New User Quota": "Hạn mức người dùng mới",
     "New version available: {{version}}": "Có phiên bản mới: {{version}}",
     "NewAPI": "NewAPI",
+    "Newly released": "Vừa phát hành",
     "Next": "Tiếp",
     "Next branch": "Nhánh tiếp theo",
     "Next page": "Trang tiếp theo",
@@ -2211,10 +2354,13 @@
     "No API keys available. Create your first API key to get started.": "Không có khóa API nào khả dụng. Tạo khóa API đầu tiên của bạn để bắt đầu.",
     "No API Keys Found": "Không tìm thấy khóa API",
     "No API routes configured": "Chưa có tuyến API nào được cấu hình",
+    "No app usage data available for this model.": "Chưa có dữ liệu sử dụng ứng dụng cho mô hình này.",
+    "No apps match the selected filters": "Không có ứng dụng phù hợp bộ lọc",
     "No available models": "Không có mô hình khả dụng",
     "No available Web chat links": "Không có liên kết Web chat khả dụng",
     "No backup": "Chưa sao lưu",
     "No billing records found": "Không tìm thấy hồ sơ thanh toán",
+    "No capabilities reported for this model.": "Chưa có khả năng nào được báo cáo cho mô hình này.",
     "No Change": "Không thay đổi",
     "No changes": "Không có thay đổi",
     "No changes made": "Không có thay đổi nào được thực hiện",
@@ -2249,8 +2395,11 @@
     "No group-based rate limits configured. Click \"Add group\" to get started.": "Chưa cấu hình giới hạn tốc độ dựa trên nhóm. Nhấp \"Add group\" để bắt đầu.",
     "No groups match your search": "Không có nhóm nào khớp với tìm kiếm của bạn",
     "No header overrides configured.": "Không có ghi đè tiêu đề nào được cấu hình.",
+    "No history data available": "Không có dữ liệu lịch sử",
+    "No incidents in the last 30 days": "Không có sự cố trong 30 ngày qua",
     "No Inviter": "Không có người mời",
     "No keys found": "Không tìm thấy khóa",
+    "No latency data available": "Không có dữ liệu độ trễ",
     "No log entries matched the selected time.": "Không có mục nhật ký nào khớp với thời gian đã chọn.",
     "No logs": "Không có nhật ký",
     "No Logs Found": "Không tìm thấy nhật ký",
@@ -2270,6 +2419,7 @@
     "No models found": "Không tìm thấy mô hình nào",
     "No Models Found": "No models found",
     "No models found.": "Không tìm thấy mô hình.",
+    "No models match the selected filters": "Không có mô hình phù hợp bộ lọc",
     "No models match your current filters.": "Không có mô hình nào khớp với bộ lọc hiện tại của bạn.",
     "No models match your search": "Không có mô hình phù hợp với tìm kiếm",
     "No models selected": "Chưa chọn mô hình nào",
@@ -2277,6 +2427,9 @@
     "No models to copy": "Không có mô hình nào để sao chép",
     "No models to remove": "Không có mô hình để xóa",
     "No new models to add": "Không có mô hình mới để thêm",
+    "No new models yet": "Chưa có mô hình mới",
+    "No notable climbers right now": "Hiện chưa có mô hình nào tăng đáng kể",
+    "No notable drops right now": "Hiện chưa có mô hình nào giảm đáng kể",
     "No parameter overrides configured.": "Không có ghi đè tham số nào được cấu hình.",
     "No payment methods available. Please contact administrator.": "Không có phương thức thanh toán nào khả dụng. Vui lòng liên hệ quản trị viên.",
     "No payment methods configured": "Chưa cấu hình phương thức thanh toán",
@@ -2315,6 +2468,7 @@
     "No Upgrade": "Không nâng cấp",
     "No upstream price differences found": "Không tìm thấy sự khác biệt về giá upstream",
     "No upstream ratio differences found": "Không tìm thấy chênh lệch tỷ lệ thượng nguồn",
+    "No uptime data available": "Không có dữ liệu thời gian hoạt động",
     "No Uptime Kuma groups yet. Click \"Add Group\" to create one.": "Chưa có nhóm Uptime Kuma nào. Nhấp vào \"Thêm nhóm\" để tạo một nhóm.",
     "No uptime monitoring configured": "Chưa cấu hình giám sát thời gian hoạt động",
     "No usage logs available. Logs will appear here once API calls are made.": "Chưa có nhật ký sử dụng. Nhật ký sẽ hiển thị sau khi có gọi API.",
@@ -2322,6 +2476,7 @@
     "No user selected": "Chưa chọn người dùng",
     "No users available. Try adjusting your search or filters.": "Không có người dùng nào. Hãy thử điều chỉnh tìm kiếm hoặc bộ lọc của bạn.",
     "No Users Found": "Không tìm thấy người dùng nào",
+    "No vendor data available": "Không có dữ liệu nhà cung cấp",
     "Node Name": "Tên nút",
     "Non-stream": "Không phát trực tuyến",
     "None": "Không có",
@@ -2336,15 +2491,20 @@
     "Not Started": "Chưa bắt đầu",
     "Not Submitted": "Chưa gửi",
     "Not tested": "Chưa kiểm tra",
+    "Not used for upstream training by default": "Mặc định không dùng để huấn luyện ở phía nhà cung cấp",
     "Not used yet": "Chưa sử dụng",
     "Notice": "Thông báo",
     "Notification Email": "Email thông báo",
     "Notification Method": "Phương thức thông báo",
     "Notifications": "Thông báo",
+    "Nucleus sampling probability mass": "Tổng xác suất cho nucleus sampling",
     "Number of codes to create": "Số mã cần tạo",
+    "Number of completions to generate": "Số lượng phản hồi cần sinh",
+    "Number of images to generate": "Số ảnh cần sinh",
     "Number of keys to create": "Số lượng khóa cần tạo",
     "Number of times to retry failed requests (0-10)": "Số lần thử lại các yêu cầu không thành công (0-10)",
     "Number of tokens per unit quota": "Số token trên đơn vị hạn mức",
+    "Number of top log probabilities returned per token": "Số log probabilities hàng đầu trên mỗi token",
     "Number of users invited": "Số người dùng được mời",
     "OAuth Client ID": "ID Client OAuth",
     "OAuth Client Secret": "Bí mật OAuth Client",
@@ -2355,6 +2515,7 @@
     "Observability": "Khả năng quan sát",
     "Obtain the API key, merchant ID, and RSA key pair from the Waffo dashboard, and configure the callback URL.": "Lấy API key, mã thương gia và cặp khóa RSA từ bảng điều khiển Waffo, đồng thời cấu hình URL callback.",
     "Obtain the merchant, store, product and signing keys from your Waffo dashboard. Webhook URL: <ServerAddress>/api/waffo-pancake/webhook": "Lấy merchant, store, product và khóa ký từ bảng điều khiển Waffo. Webhook: <ServerAddress>/api/waffo-pancake/webhook",
+    "Ocean Breeze": "Gió biển",
     "of": "of",
     "of 3:": "of 3:",
     "off": "off",
@@ -2397,9 +2558,11 @@
     "Open in New Tab": "Mở trong tab mới",
     "Open menu": "Mở menu",
     "Open release": "Phát hành mở",
+    "Open source": "Mã nguồn mở",
     "Open Source": "Mã nguồn mở",
     "Open the io.net console API Keys page": "Mở trang Khóa API của console io.net",
     "Open theme settings": "Mở cài đặt giao diện",
+    "Open weights": "Trọng số mở",
     "OpenAI": "OpenAI",
     "OpenAI Compatible": "Tương thích OpenAI",
     "OpenAI Organization": "Tổ chức OpenAI",
@@ -2437,10 +2600,14 @@
     "org-...": "org-...",
     "Original Model": "Nguyên mẫu",
     "Other": "Khác",
+    "Outage": "Gián đoạn",
     "Output": "Đầu ra",
+    "Output aspect ratio": "Tỉ lệ khung hình",
+    "Output image size": "Kích thước ảnh đầu ra",
     "Output price": "Giá đầu ra",
     "Output tokens": "Token đầu ra",
     "Output Tokens": "Token đầu ra",
+    "overall": "tổng",
     "override": "ghi đè",
     "Override": "Ghi đè",
     "Override Anthropic headers, defaults, and thinking adapter behavior": "Ghi đè tiêu đề, cài đặt mặc định và hành vi bộ điều hợp tư duy của Anthropic",
@@ -2460,6 +2627,7 @@
     "PaLM": "PaLM",
     "Pan": "Pan",
     "Param Override": "Ghi đè tham số",
+    "Parameter": "Tham số",
     "Parameter configuration error": "Lỗi cấu hình tham số",
     "Parameter Override": "Ghi đè Tham số",
     "Parameter override must be a valid JSON object": "Ghi đè tham số phải là đối tượng JSON hợp lệ",
@@ -2533,6 +2701,9 @@
     "Payment page opened": "Đã mở trang thanh toán",
     "Payment request failed": "Yêu cầu thanh toán thất bại",
     "Payment return URL": "URL trả về thanh toán",
+    "Peak": "Đỉnh",
+    "Peak throughput": "Thông lượng đỉnh",
+    "Penalises repetition of frequent tokens": "Phạt việc lặp các token phổ biến",
     "Pending": "Đang chờ",
     "per": "per",
     "Per 1K tokens": "Mỗi 1K tokens",
@@ -2542,13 +2713,18 @@
     "Per Request": "Theo yêu cầu",
     "Per-call": "Mỗi lần gọi",
     "Per-feature metered windows split by model or capability.": "Cửa sổ tính phí theo từng tính năng, tách theo mô hình hoặc năng lực.",
+    "Per-group performance": "Hiệu năng theo nhóm",
     "Per-request (fixed price)": "Theo yêu cầu (giá cố định)",
     "Per-token": "Theo token",
     "Per-token (ratio based)": "Mỗi token (dựa trên tỷ lệ)",
+    "Per-token logit bias map": "Bảng logit bias theo token",
     "Percentage:": "Phần trăm:",
     "Performance": "Hiệu suất",
+    "Performance data is not yet available for this model.": "Chưa có dữ liệu hiệu năng cho mô hình này.",
+    "Performance metrics shown here are simulated for preview purposes and will be replaced with live observability data once the backend integration is complete.": "Các chỉ số hiệu năng hiển thị tại đây là dữ liệu mô phỏng để xem trước và sẽ được thay thế bằng dữ liệu thực sau khi tích hợp backend.",
     "Performance Monitor": "Giám sát hiệu suất",
     "Performance Settings": "Cài đặt hiệu suất",
+    "Period": "Khoảng thời gian",
     "Periodically check for upstream model changes": "Kiểm tra định kỳ các thay đổi mô hình nguồn",
     "Periodically send ping frames to keep streaming connections active.": "Định kỳ gửi các khung ping để duy trì các kết nối truyền phát hoạt động.",
     "Permanently delete your account and all data": "Xóa vĩnh viễn tài khoản của bạn và tất cả dữ liệu",
@@ -2652,6 +2828,14 @@
     "Preset recharge amounts displayed to users": "Các mức nạp tiền đặt trước hiển thị cho người dùng",
     "Preset Template": "Mẫu cài sẵn",
     "Preset templates": "Mẫu sẵn",
+    "preset.default": "Mặc định",
+    "preset.forest-whisper": "Thì thầm rừng",
+    "preset.lake-view": "Hồ nước",
+    "preset.lavender-dream": "Giấc mơ oải hương",
+    "preset.ocean-breeze": "Gió biển",
+    "preset.rose-garden": "Vườn hồng",
+    "preset.sunset-glow": "Hoàng hôn",
+    "preset.underground": "Bóng đêm",
     "Press Enter or comma to add tags": "Nhấn Enter hoặc dấu phẩy để thêm thẻ",
     "Press Enter to use \"{{value}}\"": "Nhấn Enter để dùng \"{{value}}\"",
     "Prevent server-side request forgery attacks": "Ngăn chặn các cuộc tấn công giả mạo yêu cầu phía máy chủ",
@@ -2660,7 +2844,6 @@
     "Previous": "Trước",
     "Previous branch": "Nhánh trước",
     "Previous page": "Trang trước",
-    "Base Price": "Giá cơ bản",
     "Price": "Giá",
     "Price ($/1K calls)": "Giá ($/1K lượt gọi)",
     "Price (local currency / USD)": "Giá (tiền tệ địa phương / USD)",
@@ -2698,10 +2881,12 @@
     "Product ID": "ID sản phẩm",
     "Product ID is required": "Bắt buộc nhập Product ID",
     "Product Name": "Tên sản phẩm",
+    "Productivity": "Năng suất",
     "Products": "Sản phẩm",
     "Professional team providing 24/7 technical support": "Đội ngũ chuyên nghiệp cung cấp hỗ trợ kỹ thuật 24/7",
     "Profile": "Hồ sơ",
     "Profile updated successfully": "Hồ sơ đã được cập nhật thành công",
+    "Programming": "Lập trình",
     "Progress": "Tiến độ",
     "Project": "Dự án",
     "Promote": "Thúc đẩy",
@@ -2709,9 +2894,11 @@
     "Prompt": "Lời nhắc",
     "Prompt (EN)": "Lời nhắc (EN)",
     "Prompt cache ratio": "Tỷ lệ bộ nhớ đệm lời nhắc",
+    "Prompt caching": "Bộ nhớ đệm lời nhắc",
     "Prompt Caching": "Bộ đệm lời nhắc",
     "Prompt Details": "Chi tiết lời nhắc",
     "Prompt price ($/1M tokens)": "Giá prompt ($/1 triệu token)",
+    "Proprietary": "Độc quyền",
     "Protect login and registration with Cloudflare Turnstile": "Bảo vệ đăng nhập và đăng ký bằng Cloudflare Turnstile",
     "Provide a JSON object where each key maps to an endpoint definition.": "Cung cấp một đối tượng JSON nơi mỗi khóa ánh xạ đến một định nghĩa điểm cuối.",
     "Provide a valid URL starting with http:// or https://": "Cung cấp URL hợp lệ bắt đầu bằng http:// hoặc https://",
@@ -2720,6 +2907,7 @@
     "Provide per-category safety overrides as JSON. Use `default` for fallback values.": "Cung cấp các ghi đè an toàn theo từng danh mục dưới dạng JSON. Sử dụng `default` cho các giá trị dự phòng.",
     "Provide per-model header overrides as JSON. Useful for enabling beta features such as expanded context windows.": "Cung cấp các ghi đè tiêu đề theo từng mô hình dưới dạng JSON. Hữu ích để bật các tính năng beta như cửa sổ ngữ cảnh mở rộng.",
     "Provider": "Nhà cung cấp",
+    "Provider & data privacy": "Nhà cung cấp & quyền riêng tư",
     "Provider created successfully": "Đã tạo nhà cung cấp thành công",
     "Provider deleted successfully": "Đã xóa nhà cung cấp thành công",
     "Provider Name": "Tên Nhà cung cấp",
@@ -2768,11 +2956,15 @@
     "Quota Types": "Các loại hạn ngạch",
     "Quota Warning Threshold": "Ngưỡng cảnh báo hạn mức",
     "Quota:": "Hạn ngạch:",
+    "Radius": "Bo góc",
     "Random": "Ngẫu nhiên",
     "Randomly select a key from the pool for each request": "Chọn ngẫu nhiên một khóa từ kho cho mỗi yêu cầu",
+    "Ranking data is currently simulated for preview purposes and will be replaced with live analytics once the backend integration ships.": "Dữ liệu xếp hạng hiện đang được mô phỏng để xem trước và sẽ được thay bằng dữ liệu thực sau khi tích hợp backend.",
+    "Rankings": "Bảng xếp hạng",
     "Rate Limit Windows": "Cửa sổ giới hạn tốc độ",
     "Rate Limited": "Giới hạn tốc độ",
     "Rate Limiting": "Rate limit",
+    "Rate limits": "Giới hạn tốc độ",
     "Ratio": "Tỷ lệ",
     "Ratio applied to audio completions for streaming models.": "Tỷ lệ áp dụng cho các phần hoàn tất âm thanh của các mô hình phát trực tuyến.",
     "Ratio applied to audio inputs where supported by the upstream model.": "Tỷ lệ áp dụng cho đầu vào âm thanh nếu được mô hình thượng nguồn hỗ trợ.",
@@ -2795,6 +2987,8 @@
     "Reasoning Effort": "Cường độ suy luận",
     "Receive Upstream Model Update Notifications": "Nhận thông báo cập nhật mô hình nguồn",
     "Received": "Đã nhận",
+    "Recently launched models": "Các mô hình ra mắt gần đây",
+    "Recently launched models gaining traction": "Mô hình mới phát hành đang được ưa chuộng",
     "Recharge": "Nạp lại",
     "Recharge Amount": "Số tiền nạp",
     "Recharge Amount (USD)": "Số tiền nạp (USD)",
@@ -2848,6 +3042,7 @@
     "Registry username": "Tên người dùng Registry",
     "Reject Reason": "Lý do từ chối",
     "Release details": "Chi tiết phiên bản",
+    "Released": "Phát hành",
     "Relying Party Display Name": "Tên Hiển Thị của Bên Tin Cậy",
     "Relying Party ID": "Định danh Bên phụ thuộc",
     "Remaining": "Còn lại",
@@ -2913,6 +3108,8 @@
     "Request rule pricing": "Quy tắc tính giá theo request",
     "Request timed out, please refresh and restart GitHub login": "Yêu cầu đã hết thời gian chờ, vui lòng làm mới và đăng nhập lại GitHub",
     "Request-based": "Theo yêu cầu",
+    "Requests (24h)": "Yêu cầu (24h)",
+    "Requests / 24h": "Yêu cầu / 24h",
     "Requests per minute": "Yêu cầu mỗi phút",
     "requests served": "yêu cầu đã phục vụ",
     "Requests will be forwarded to this worker. Trailing slashes are removed automatically.": "Các yêu cầu sẽ được chuyển tiếp đến worker này. Dấu gạch chéo ở cuối được tự động loại bỏ.",
@@ -2920,12 +3117,14 @@
     "Require email verification for new accounts": "Yêu cầu xác minh email cho tài khoản mới",
     "Require job success before follow-up actions": "Yêu cầu công việc thành công trước các hành động tiếp theo",
     "Require login to view models": "Yêu cầu đăng nhập để xem các mô hình",
+    "required": "bắt buộc",
     "Required": "Bắt buộc",
     "Required events:": "Sự kiện bắt buộc:",
     "Required provider, authentication, model, and group settings": "Thiết lập bắt buộc về nhà cung cấp, xác thực, mô hình và nhóm",
     "Required to expose Midjourney-style image generation to end users.": "Cần thiết để cung cấp tính năng tạo hình ảnh kiểu Midjourney cho người dùng cuối.",
     "Rerank": "Re-rank",
     "Reroll": "Quay lại",
+    "Research, analysis, scientific reasoning": "Nghiên cứu, phân tích, suy luận khoa học",
     "Resend ({{seconds}}s)": "Gửi lại ({{seconds}}s)",
     "Reset": "Đặt lại",
     "Reset 2FA": "Đặt lại 2FA",
@@ -2961,8 +3160,11 @@
     "Retry Times": "Số lần thử lại",
     "Return a custom error immediately": "Trả về lỗi tùy chỉnh ngay lập tức",
     "Return Custom Error": "Trả lỗi tùy chỉnh",
+    "Return data conforming to a JSON schema": "Trả về dữ liệu tuân theo JSON Schema",
     "Return Error": "Trả về lỗi",
+    "Return per-token log probabilities": "Trả về log probabilities cho từng token",
     "Return to dashboard": "Quay lại bảng điều khiển",
+    "Return vector embeddings for inputs": "Trả về vector embedding cho đầu vào",
     "Reveal API key": "Hiển thị khóa API",
     "Reveal key": "Display key",
     "Revenue": "Doanh thu",
@@ -2972,8 +3174,11 @@
     "Review your purchase details before proceeding.": "Xem lại chi tiết mua hàng trước khi tiếp tục.",
     "Rewards will be added directly to your balance": "Phần thưởng sẽ được thêm trực tiếp vào số dư của bạn",
     "Rewrite callback URLs to the local server": "Viết lại URL callback đến máy chủ cục bộ",
+    "Right to Left": "Phải sang trái",
     "Role": "Vai trò",
+    "Roleplay": "Nhập vai",
     "Root": "Gốc",
+    "Rose Garden": "Vườn hoa hồng",
     "Route": "Tuyến đường",
     "Route Description": "Mô tả lộ trình",
     "Route is required": "Đường dẫn là bắt buộc",
@@ -2981,6 +3186,7 @@
     "Routing Strategy": "Chiến lược định tuyến",
     "Rows per page": "Số hàng trên trang",
     "RPM": "RPM",
+    "RPM = requests per minute, TPM = tokens per minute, RPD = requests per day. Limits apply per token group.": "RPM = yêu cầu mỗi phút, TPM = token mỗi phút, RPD = yêu cầu mỗi ngày. Giới hạn áp dụng cho từng nhóm token.",
     "RSA Private Key (Production)": "RSA Private Key (Sản xuất)",
     "RSA Private Key (Sandbox)": "Khóa riêng RSA (Sandbox)",
     "Rule": "Quy tắc",
@@ -3004,6 +3210,7 @@
     "s": "s",
     "Safety Settings": "Cài đặt an toàn",
     "Same as Local": "Giống như địa phương",
+    "Sampling temperature; lower is more deterministic": "Nhiệt độ lấy mẫu; càng thấp càng ổn định",
     "Sandbox mode": "Chế độ sandbox",
     "Save": "Lưu",
     "Save all settings": "Lưu tất cả cài đặt",
@@ -3048,6 +3255,7 @@
     "Scenario Templates": "Mẫu kịch bản",
     "Scheduled channel tests": "Kiểm tra kênh theo lịch trình",
     "scheduling controls": "điều khiển điều phối",
+    "Science": "Khoa học",
     "Scope": "Phạm vi",
     "Scopes": "Phạm vi",
     "Search": "Tìm kiếm",
@@ -3072,6 +3280,7 @@
     "Search products...": "Tìm kiếm sản phẩm...",
     "Search rules...": "Tìm kiếm quy tắc…",
     "Search tags...": "Tìm thẻ...",
+    "Search the public web at inference time": "Tìm kiếm web công khai trong khi suy luận",
     "Search vendors...": "Tìm nhà cung cấp...",
     "Search...": "Tìm kiếm...",
     "seconds": "giây",
@@ -3099,7 +3308,11 @@
     "Select an operation mode and enter the amount": "Chọn chế độ thao tác và nhập số tiền",
     "Select announcement type": "Select notification type",
     "Select at least one field to overwrite.": "Chọn ít nhất một trường để ghi đè.",
+    "Select border radius": "Chọn độ bo góc",
     "Select channel type": "Chọn loại kênh",
+    "Select color preset": "Chọn cài đặt màu sẵn",
+    "Select content width": "Chọn chiều rộng nội dung",
+    "Select corner radius": "Chọn độ bo góc",
     "Select currency": "Chọn tiền tệ",
     "Select date": "Chọn ngày",
     "Select default chart": "Chọn biểu đồ mặc định",
@@ -3109,10 +3322,11 @@
     "Select from presets or type custom identifier.": "Chọn từ các cài đặt sẵn hoặc nhập mã định danh tùy chỉnh.",
     "Select granularity": "Select detail level",
     "Select groups (leave empty to keep current)": "Chọn nhóm (để trống để giữ nguyên hiện tại)",
+    "Select interface density": "Chọn mật độ giao diện",
     "Select items...": "Chọn các mục...",
     "Select key format": "Chọn định dạng khóa",
-    "Select Language": "Chọn Ngôn ngữ",
     "Select language": "Chọn ngôn ngữ",
+    "Select Language": "Chọn Ngôn ngữ",
     "Select layout style": "Chọn kiểu bố cục",
     "Select locations": "Chọn vị trí",
     "Select Model": "Chọn mẫu",
@@ -3140,6 +3354,7 @@
     "Select the API endpoint region": "Chọn khu vực điểm cuối API",
     "Select the fields you want to overwrite with upstream data. Unselected fields keep their local values.": "Chọn các trường bạn muốn ghi đè bằng dữ liệu thượng nguồn. Các trường không được chọn sẽ giữ nguyên giá trị cục bộ của chúng.",
     "Select theme preference": "Chọn chủ đề ưu tiên",
+    "Select theme preset": "Chọn tùy chỉnh chủ đề",
     "Select time granularity": "Chọn độ chi tiết thời gian",
     "Select vendor": "Chọn nhà cung cấp",
     "Selectable groups": "Nhóm có thể chọn",
@@ -3176,9 +3391,9 @@
     "Set quota amount and limits": "Thiết lập hạn mức và giới hạn",
     "Set Request Header": "Đặt header yêu cầu",
     "Set runtime request header: override entire value, or manipulate comma-separated tokens": "Đặt header yêu cầu runtime: ghi đè toàn bộ giá trị hoặc thao tác token phân cách bằng dấu phẩy",
-    "Set the language used across the interface": "Đặt ngôn ngữ sử dụng trong giao diện",
     "Set Tag": "Gán Thẻ",
     "Set tag for selected channels": "Đặt thẻ cho các kênh đã chọn",
+    "Set the language used across the interface": "Đặt ngôn ngữ sử dụng trong giao diện",
     "Set the user's role (cannot be Root)": "Đặt vai trò của người dùng (không được là Root)",
     "Setting saved": "Cài đặt đã được lưu",
     "Setting up 2FA...": "Đang thiết lập 2FA...",
@@ -3188,6 +3403,7 @@
     "Settings updated successfully": "Cài đặt đã được cập nhật thành công",
     "Setup Instructions": "Hướng dẫn Thiết lập",
     "Setup Two-Factor Authentication": "Thiết lập Xác thực hai yếu tố",
+    "Share": "Tỉ lệ",
     "Share your link and earn rewards": "Chia sẻ liên kết của bạn và kiếm phần thưởng",
     "Shared configuration for all payment gateways": "Cấu hình chung cho tất cả các cổng thanh toán",
     "Shorten": "Rút gọn",
@@ -3214,6 +3430,7 @@
     "Signed in via WeChat": "Đã đăng nhập qua WeChat",
     "Signed in with Passkey": "Đã đăng nhập bằng Passkey",
     "Signed out": "Đã đăng xuất",
+    "Significant outages detected": "Phát hiện gián đoạn nghiêm trọng",
     "Signing you in with {{provider}}": "Đang đăng nhập bằng {{provider}}",
     "SiliconFlow": "SiliconFlow",
     "Simple": "Đơn giản",
@@ -3271,6 +3488,7 @@
     "Status:": "Trạng thái:",
     "Stay": "Ở lại",
     "Stay tuned though!": "Nhưng",
+    "Steer behaviour with a system instruction": "Điều hướng hành vi bằng lệnh hệ thống",
     "Step": "Bước",
     "Stop": "Dừng lại",
     "Stop Retry": "Dừng thử lại",
@@ -3281,6 +3499,9 @@
     "Stream": "Luồng",
     "Stream Mode": "Chế độ streaming",
     "Stream Status": "Trạng thái luồng",
+    "Stream tokens incrementally as they are generated": "Truyền dần token khi được tạo",
+    "Stream tokens via Server-Sent Events": "Truyền token qua Server-Sent Events",
+    "Streaming": "Truyền liên tục",
     "String Replace": "Thay thế chuỗi",
     "Stripe": "Stripe",
     "Stripe API key (leave blank unless updating)": "Khóa API Stripe (để trống trừ khi cập nhật)",
@@ -3288,6 +3509,7 @@
     "Stripe Gateway": "Cổng thanh toán Stripe",
     "Stripe product price ID": "ID giá sản phẩm Stripe",
     "Stripe/Creem requires creating products on the third-party platform and entering the ID": "Stripe/Creem yêu cầu tạo sản phẩm trên nền tảng bên thứ ba và nhập ID",
+    "Structured output": "Đầu ra có cấu trúc",
     "Submit": "Gửi",
     "Submit directly": "Gửi trực tiếp",
     "Submit Result": "Gửi Kết quả",
@@ -3315,13 +3537,17 @@
     "Suffix": "Hậu tố",
     "Suffix Match": "Khớp hậu tố",
     "SunoAPI": "SunoAPI",
+    "Sunset Glow": "Hoàng hôn",
     "Super Admin": "Siêu Quản trị viên",
     "Support for high concurrency with automatic load balancing": "Hỗ trợ đồng thời cao với cân bằng tải tự động",
     "Supported Imagine Models": "Mô hình Imagine được hỗ trợ",
+    "Supported modalities": "Phương thức hỗ trợ",
+    "Supported parameters": "Tham số hỗ trợ",
     "Supported variables": "Biến được hỗ trợ",
     "Supports `-thinking`, `-thinking-": "Hỗ trợ `-thinking`, `-thinking-",
     "Supports HTML markup or iframe embedding. Enter HTML code directly, or provide a complete URL to automatically embed it as an iframe.": "Hỗ trợ đánh dấu HTML hoặc nhúng iframe. Nhập mã HTML trực tiếp, hoặc cung cấp một URL đầy đủ để tự động nhúng nó dưới dạng một iframe.",
     "Supports PNG, JPG, SVG, or WebP. Recommended size: 128×128 or smaller.": "Hỗ trợ PNG, JPG, SVG hoặc WebP. Kích thước khuyến nghị: 128×128 hoặc nhỏ hơn.",
+    "Sustained tokens per second": "Token mỗi giây duy trì",
     "Swap Face": "Đổi mặt",
     "Switch affinity on success": "Chuyển ưu tiên khi thành công",
     "Switch between the new frontend and the classic frontend. Changes take effect after page reload.": "Chuyển đổi giữa frontend mới và frontend cổ điển. Thay đổi có hiệu lực sau khi tải lại trang.",
@@ -3341,6 +3567,7 @@
     "System Announcements": "Thông báo hệ thống",
     "System Behavior": "Hành vi hệ thống",
     "System data statistics": "Thống kê dữ liệu hệ thống",
+    "System default": "Mặc định hệ thống",
     "System Information": "Thông tin hệ thống",
     "System initialized successfully! Redirecting…": "Hệ thống đã được khởi tạo thành công! Đang chuyển hướng…",
     "System logo": "Logo hệ thống",
@@ -3351,6 +3578,7 @@
     "System name is required": "Tên hệ thống là bắt buộc",
     "System Notice": "Thông báo hệ thống",
     "System Performance Monitoring": "Giám sát hiệu suất hệ thống",
+    "System prompt": "Lời nhắc hệ thống",
     "System Prompt": "Lời nhắc hệ thống",
     "System Prompt Concatenation": "Ghép nối Lời nhắc Hệ thống",
     "System Prompt Override": "Ghi đè prompt hệ thống",
@@ -3402,7 +3630,11 @@
     "Test Model": "Kiểm tra Mô hình",
     "Testing all enabled channels started. Please refresh to see results.": "Bắt đầu kiểm tra tất cả các kênh đã kích hoạt. Vui lòng làm mới để xem kết quả.",
     "Testing...": "Đang kiểm tra...",
+    "Text": "Văn bản",
+    "Text description of the desired image": "Mô tả văn bản cho ảnh mong muốn",
+    "Text description of the desired video": "Mô tả văn bản cho video mong muốn",
     "Text Input": "Đầu vào văn bản",
+    "Text or array of texts to embed": "Văn bản hoặc mảng văn bản cần vector hoá",
     "Text Output": "Đầu ra văn bản",
     "Text to Video": "Văn bản sang video",
     "The administrator account is already initialized. You can keep your existing credentials and continue to the next step.": "Tài khoản quản trị viên đã được khởi tạo. Bạn có thể giữ nguyên thông tin đăng nhập hiện có của mình và tiếp tục sang bước tiếp theo.",
@@ -3429,6 +3661,7 @@
     "The unique name for this vendor": "Tên duy nhất cho nhà cung cấp này",
     "The URL for this chat client.": "URL của ứng dụng chat này.",
     "Theme": "Chủ đề",
+    "Theme preset": "Tùy chỉnh chủ đề",
     "Theme Settings": "Cài đặt chủ đề",
     "There are both add and remove models pending, but you only selected one type. Confirm submitting only the selected items?": "Có cả mô hình cần thêm và xóa đang chờ, nhưng bạn chỉ chọn một loại. Xác nhận chỉ gửi các mục đã chọn?",
     "These models are still in your selection but were not returned by the upstream listing. Entries that are only model_mapping source aliases are omitted. Toggle to adjust before saving.": "Các model này vẫn được chọn nhưng không còn xuất hiện trong danh sách upstream; tên chỉ là khóa nguồn trong model_mapping đã được loại. Điều chỉnh trước khi lưu.",
@@ -3472,7 +3705,11 @@
     "This will permanently delete user": "Thao tác này sẽ xóa vĩnh viễn người dùng",
     "This will permanently remove all log entries created before {{date}}.": "Thao tác này sẽ xóa vĩnh viễn tất cả các mục nhật ký được tạo trước {{date}}.",
     "This will permanently remove log entries before the selected timestamp.": "Thao tác này sẽ xóa vĩnh viễn các mục nhật ký trước mốc thời gian đã chọn.",
+    "This year": "Năm nay",
     "Three steps to get started": "Ba bước để bắt đầu",
+    "Throughput": "Thông lượng",
+    "Throughput by group": "Thông lượng theo nhóm",
+    "Throughput trend": "Xu hướng thông lượng",
     "Tier": "Bậc",
     "Tier name": "Tên bậc",
     "Tiered": "Nhiều bậc",
@@ -3514,21 +3751,41 @@
     "Token Name": "Tên mã thông báo",
     "Token obtained from your Gotify application": "Mã thông báo thu được từ ứng dụng Gotify của bạn",
     "Token regenerated and copied to clipboard": "Token đã được tạo lại và sao chép vào bộ nhớ tạm",
+    "Token share by model author across the last 24 hours": "Tỷ lệ token theo nhà phát triển trong 24 giờ qua",
+    "Token share by model author across the past few weeks": "Tỷ lệ token theo nhà phát triển trong vài tuần qua",
+    "Token share by model author across the past month": "Tỷ lệ token theo nhà phát triển trong tháng qua",
+    "Token share by model author across the past year": "Tỷ lệ token theo nhà phát triển trong năm qua",
+    "Token share by model author since launch": "Tỷ lệ token theo nhà phát triển kể từ khi ra mắt",
     "Token unit": "Đơn vị token",
+    "Token usage by model since launch": "Sử dụng token của từng mô hình kể từ khi ra mắt",
     "Token-based": "Dựa trên token",
+    "Tokenizer": "Bộ token",
     "tokens": "mã thông báo",
     "Tokens": "Mã thông báo",
+    "tokens / mo": "token / tháng",
+    "Tokens by category": "Token theo danh mục",
     "Tokens Only": "Chỉ mã thông báo",
     "Tokens per minute": "Số token mỗi phút",
+    "Tokens since launch": "Token kể từ khi ra mắt",
     "Tokens-only mode will show raw quota values regardless of this toggle.": "Chế độ Tokens-only sẽ hiển thị giá trị quota thô bất kể tùy chọn này.",
     "Too many files. Some were not added.": "Quá nhiều tệp. Một số không được thêm.",
+    "Tool / function declarations the model may call": "Khai báo công cụ / hàm mà model có thể gọi",
     "Tool identifier": "Định danh công cụ",
     "Tool price settings": "Cài đặt giá công cụ",
     "Tool prices": "Giá công cụ",
+    "Tool-choice policy or specific tool name": "Chính sách chọn công cụ hoặc tên cụ thể",
+    "Tools": "Công cụ",
     "Top {{count}}": "Top {{count}}",
+    "Top app": "Ứng dụng dẫn đầu",
+    "Top apps": "Ứng dụng hàng đầu",
+    "Top Apps": "Ứng dụng hàng đầu",
+    "Top integrations using this model": "Tích hợp hàng đầu sử dụng mô hình này",
+    "Top model": "Mô hình dẫn đầu",
+    "Top models": "Mô hình hàng đầu",
     "Top Models": "Người mẫu hàng đầu",
     "Top up balance and view billing history.": "Nạp tiền vào tài khoản và xem lịch sử thanh toán.",
     "Top Users": "Người dùng hàng đầu",
+    "Top vendors": "Nhà cung cấp hàng đầu",
     "Top-up": "Nạp tiền",
     "Top-up amount options": "Tùy chọn số tiền nạp",
     "Top-up Audit Info": "Thông tin audit nạp tiền",
@@ -3552,13 +3809,16 @@
     "Total Quota": "Tổng hạn mức",
     "Total requests allowed per period. 0 = unlimited.": "Tổng số yêu cầu được phép mỗi kỳ. 0 = không giới hạn.",
     "Total requests made": "Tổng lượt yêu cầu",
+    "Total tokens": "Tổng số token",
     "Total Tokens": "Tổng số token",
     "Total Usage": "Tổng Mức Sử dụng",
     "Total:": "Tổng cộng:",
     "TPM": "TPM",
     "Track per-request consumption to power usage analytics. Keeping this on increases database writes.": "Theo dõi mức tiêu thụ theo từng yêu cầu để phục vụ phân tích mức độ sử dụng. Việc bật tính năng này làm tăng số lượt ghi vào cơ sở dữ liệu.",
     "Track usage, costs and performance with real-time analytics": "Theo dõi sử dụng, chi phí và hiệu suất với phân tích thời gian thực",
+    "Tracked apps": "Ứng dụng được theo dõi",
     "Tracks current account base limits and additional metered usage on Codex upstream.": "Theo dõi hạn cơ bản và mức dùng tính phí bổ sung của tài khoản ở phía upstream Codex.",
+    "Trading insights, accounting, advisory": "Phân tích giao dịch, kế toán, tư vấn",
     "Transfer": "Chuyển",
     "Transfer Amount": "Số tiền chuyển khoản",
     "Transfer failed": "Chuyển thất bại",
@@ -3566,18 +3826,28 @@
     "Transfer successful": "Chuyển thành công",
     "Transfer to Balance": "Chuyển vào số dư",
     "Translate `-thinking` suffixes into Anthropic native thinking models while keeping pricing predictable.": "Dịch các hậu tố `-thinking` sang các mô hình tư duy gốc của Anthropic đồng thời giữ giá cả có thể dự đoán được.",
+    "Translation": "Dịch thuật",
     "Transparent Billing": "Thanh toán minh bạch",
+    "Trend": "Xu hướng",
+    "Trending down": "Đang giảm",
+    "Trending up": "Đang tăng",
     "Trim leading/trailing whitespace": "Xóa khoảng trắng đầu/cuối",
     "Trim Prefix": "Cắt tiền tố",
     "Trim Space": "Cắt khoảng trắng",
     "Trim Suffix": "Cắt hậu tố",
+    "Truncate embeddings to this many dimensions": "Cắt embedding xuống số chiều này",
     "Trusted": "Đáng tin cậy",
     "Try adjusting your search to locate a missing model.": "Hãy thử điều chỉnh tìm kiếm của bạn để định vị một mô hình bị thiếu.",
+    "TTFT P50": "TTFT P50",
+    "TTFT P95": "TTFT P95",
+    "TTFT P99": "TTFT P99",
+    "TTFT percentiles, throughput, and 30-day uptime by group": "Phân vị TTFT, thông lượng và thời gian hoạt động 30 ngày theo nhóm",
     "TTL": "TTL",
     "TTL (seconds, 0 = default)": "TTL (giây, 0 = mặc định)",
     "TTL (seconds)": "TTL (giây)",
     "Tune selection priority, testing, status handling, and request overrides.": "Tinh chỉnh ưu tiên chọn, kiểm thử, xử lý trạng thái và ghi đè yêu cầu.",
     "Turnstile is enabled but site key is empty.": "Turnstile đã được bật nhưng khóa trang web trống.",
+    "Tutoring, learning aids, assessment": "Gia sư, hỗ trợ học tập, đánh giá",
     "Two-factor Authentication": "Xác thực hai yếu tố",
     "Two-Factor Authentication": "Xác thực hai yếu tố",
     "Two-factor authentication disabled": "Xác thực hai yếu tố đã bị vô hiệu hóa",
@@ -3602,6 +3872,8 @@
     "Unbind": "Hủy liên kết",
     "Unbind failed": "Hủy liên kết thất bại",
     "Unbound {{provider}}": "Đã hủy liên kết {{provider}}",
+    "Underground": "Underground",
+    "Understand image inputs alongside text": "Hiểu hình ảnh cùng với văn bản",
     "Unexpected release payload": "Dữ liệu phiên bản không mong đợi",
     "Unified API Gateway for": "Cổng API thống nhất cho",
     "Unique identifier for this group.": "Mã định danh duy nhất cho nhóm này.",
@@ -3618,6 +3890,7 @@
     "Untitled": "Không có tiêu đề",
     "Untrusted upstream data:": "Dữ liệu nguồn không đáng tin cậy:",
     "Unused": "Chưa sử dụng",
+    "Up to 4 strings that stop generation": "Tối đa 4 chuỗi để dừng sinh",
     "Update": "Cập nhật",
     "Update All Balances": "Cập nhật tất cả số dư",
     "Update API Key": "Cập nhật Khóa API",
@@ -3642,6 +3915,7 @@
     "Update your password for account:": "Cập nhật mật khẩu của bạn cho tài khoản:",
     "Update your password to keep your account secure": "Cập nhật mật khẩu của bạn để bảo mật tài khoản.",
     "Updated": "Đã cập nhật",
+    "Updated daily": "Cập nhật hàng ngày",
     "Updated successfully": "Cập nhật thành công",
     "Updating all channel balances. This may take a while. Please refresh to see results.": "Đang cập nhật tất cả số dư kênh. Quá trình này có thể mất một chút thời gian. Vui lòng làm mới để xem kết quả.",
     "Upgrade Group": "Nhóm nâng cấp",
@@ -3666,6 +3940,8 @@
     "Upstream Updates": "Cập nhật nguồn",
     "uptime": "thời gian hoạt động",
     "Uptime": "Thời gian hoạt động",
+    "Uptime (30d)": "Thời gian hoạt động (30 ngày)",
+    "Uptime (last 30 days)": "Thời gian hoạt động (30 ngày qua)",
     "Uptime Kuma": "Uptime Kuma",
     "Uptime Kuma groups saved successfully": "Đã lưu nhóm Uptime Kuma thành công",
     "Uptime Kuma URL": "URL Uptime Kuma",
@@ -3684,6 +3960,7 @@
     "Use authenticator code": "Sử dụng mã xác thực",
     "Use backup code": "Sử dụng mã dự phòng",
     "Use disk cache when request body exceeds this size": "Sử dụng bộ nhớ đệm đĩa khi nội dung yêu cầu vượt quá kích thước này",
+    "Use external tools to extend capabilities": "Sử dụng công cụ ngoài để mở rộng khả năng",
     "Use our unified OpenAI-compatible endpoint in your applications": "Sử dụng endpoint thống nhất tương thích OpenAI trong ứng dụng của bạn",
     "Use Passkey to sign in without entering your password.": "Sử dụng Khóa truy cập để đăng nhập mà không cần nhập mật khẩu của bạn.",
     "Use secure connection when sending emails": "Sử dụng kết nối an toàn khi gửi email",
@@ -3749,6 +4026,7 @@
     "Vendor deleted successfully": "Đã xóa nhà cung cấp thành công",
     "Vendor Name *": "Tên nhà cung cấp *",
     "Vendor:": "Nhà cung cấp:",
+    "Vendors ranked by aggregated token volume": "Nhà cung cấp xếp hạng theo tổng lượng token",
     "Verification code": "Mã xác minh",
     "Verification Code": "Mã xác minh",
     "Verification code must be 6 digits": "Mã xác thực phải có 6 chữ số",
@@ -3767,6 +4045,7 @@
     "Vertex AI does not support functionResponse.id. Enable this to remove the field automatically.": "Vertex AI không hỗ trợ functionResponse.id. Bật để tự động loại bỏ trường này.",
     "Vertex AI Key Format": "Định dạng khóa Vertex AI",
     "Video": "Video",
+    "Video length in seconds": "Độ dài video (giây)",
     "Video Remix": "Remix video",
     "Vidu": "Vidu",
     "View": "Xem",
@@ -3796,6 +4075,8 @@
     "Violation Marker": "Đánh dấu vi phạm",
     "vip": "vip",
     "VIP users with premium access": "Người dùng VIP với quyền truy cập cao cấp",
+    "Vision": "Thị giác",
+    "Vision, image / video, document chat": "Thị giác, ảnh / video, hỏi đáp tài liệu",
     "Visit Settings → General and adjust quota options...": "Truy cập Cài đặt → Chung và điều chỉnh tùy chọn hạn mức...",
     "Visitors must authenticate before accessing the pricing directory.": "Khách truy cập phải xác thực trước khi truy cập thư mục giá.",
     "Visual": "Trực quan",
@@ -3806,6 +4087,7 @@
     "Visual Mode": "Chế độ Trực quan",
     "Visual Parameter Override": "Ghi đè tham số trực quan",
     "VolcEngine": "VolcEngine",
+    "vs. previous": "so với kỳ trước",
     "Waffo Pancake Payment Gateway": "Cổng thanh toán Waffo Pancake",
     "Waffo Payment": "Thanh toán Waffo",
     "Waffo Payment Gateway": "Cổng thanh toán Waffo",
@@ -3826,6 +4108,7 @@
     "We could not load the setup status.": "Chúng tôi không thể tải trạng thái thiết lập.",
     "We will prompt your device to confirm using biometrics or your hardware key.": "Chúng tôi sẽ yêu cầu thiết bị của bạn xác nhận bằng cách sử dụng sinh trắc học hoặc khóa bảo mật phần cứng của bạn.",
     "We'll be back online shortly.": "Chúng tôi sẽ sớm trực tuyến trở lại.",
+    "Web search": "Tìm kiếm web",
     "Web Search": "Tìm kiếm web",
     "Webhook Configuration:": "Cấu hình Webhook:",
     "Webhook public key (production)": "Khóa công khai Webhook (production)",
@@ -3845,6 +4128,9 @@
     "Week": "Tuần",
     "Weekday": "Thứ trong tuần",
     "Weekly": "Hàng tuần",
+    "Weekly token usage by model across the past few weeks": "Sử dụng token hàng tuần của từng mô hình trong vài tuần qua",
+    "Weekly token usage by model across the past year": "Sử dụng token theo mô hình hàng tuần trong năm qua",
+    "Weekly token usage by model since launch": "Sử dụng token theo mô hình hàng tuần kể từ khi ra mắt",
     "Weekly Window": "Cửa sổ hàng tuần",
     "Weight": "Trọng lượng",
     "Welcome back!": "Chào mừng trở lại!",
@@ -3869,7 +4155,9 @@
     "Whitelist (Only allow listed IPs)": "Danh sách trắng (Chỉ cho phép các IP đã liệt kê)",
     "whsec_xxx": "whsec_xxx",
     "Window:": "Cửa sổ:",
+    "Wire encoding for the embedding vectors": "Định dạng truyền cho vector embedding",
     "with conflicts": "với các xung đột",
+    "with the API key from your token settings.": "bằng API key từ trang Tokens của bạn.",
     "Without additional conditions, only the type above is used for pruning.": "Không có điều kiện bổ sung, chỉ type ở trên được sử dụng để dọn dẹp.",
     "Worker Access Key": "Khóa truy cập nhân viên",
     "Worker Proxy": "Proxy Nhân viên",
@@ -3880,6 +4168,7 @@
     "xAI": "xAI",
     "Xinference": "Xinference",
     "Xunfei": "Xunfei",
+    "Year": "Năm",
     "years": "năm",
     "You are about to delete {{count}} API key(s).": "Bạn sắp xóa {{count}} khóa API.",
     "You are running the latest version ({{version}}).": "Bạn đang sử dụng phiên bản mới nhất ({{version}}).",
@@ -3907,6 +4196,7 @@
     "Your Telegram Bot Token": "Mã thông báo bot Telegram của bạn",
     "Your Turnstile secret key": "Khóa bí mật Turnstile của bạn",
     "Your Turnstile site key": "Khóa site Turnstile của bạn",
+    "Zero retention": "Không lưu dữ liệu",
     "Zhipu": "Zhipu",
     "Zhipu V4": "Zhipu V4",
     "Zoom": "Zoom"
diff --git a/web/default/src/i18n/locales/zh.json b/web/default/src/i18n/locales/zh.json
index 5755a489681..bc0b16e38cf 100644
--- a/web/default/src/i18n/locales/zh.json
+++ b/web/default/src/i18n/locales/zh.json
@@ -28,16 +28,22 @@
     "{{count}} days remaining": "剩余 {{count}} 天",
     "{{count}} disabled channel(s) deleted": "已删除 {{count}} 个已禁用的渠道",
     "{{count}} hours ago": "{{count}} 小时前",
+    "{{count}} incidents": "{{count}} 起事件",
+    "{{count}} incidents in the last 30 days": "最近 30 天 {{count}} 起事件",
     "{{count}} IP(s)": "{{count}} 个 IP",
     "{{count}} log entries removed.": "已删除 {{count}} 条日志。",
     "{{count}} minutes ago": "{{count}} 分钟前",
     "{{count}} model(s)": "{{count}} 个模型",
+    "{{count}} models": "{{count}} 个模型",
     "{{count}} months ago": "{{count}} 个月前",
     "{{count}} override": "{{count}} 个覆盖",
     "{{count}} tiers": "{{count}} 档",
+    "{{count}} vendors": "{{count}} 家厂商",
     "{{count}} weeks ago": "{{count}} 周前",
     "{{field}} updated to {{value}}": "{{field}} 已更新为 {{value}}",
     "{{field}} updated to {{value}} for tag: {{tag}}": "标签「{{tag}}」的 {{field}} 已更新为 {{value}}",
+    "{{modality}} not supported": "不支持 {{modality}}",
+    "{{modality}} supported": "支持 {{modality}}",
     "{{n}} model(s) selected": "已选 {{n}} 个模型",
     "{{value}}ms": "{{value}} 毫秒",
     "{{value}}s": "{{value}} 秒",
@@ -45,9 +51,13 @@
     "@lobehub/icons key name": "@lobehub/icons 键名",
     "/status/": "/status/",
     "/your/endpoint": "/your/endpoint",
+    "#1 App": "#1 应用",
+    "#1 by usage": "使用量第一",
+    "#1 Model": "#1 模型",
     "% off": "折",
     "`, and `-nothinking` suffixes while routing to the correct Gemini variant.": "`, 和 `-nothinking` 后缀，同时路由到正确的 Gemini 变体。",
     "© 2025 Your Company. All rights reserved.": "© 2025 您的公司。保留所有权利。",
+    "+{{count}} more": "还有 {{count}} 项",
     "| Based on": "| 基于",
     "0 means unlimited": "0 表示不限",
     "1 Day": "1 天",
@@ -75,6 +85,7 @@
     "3. Enter your Gotify server URL and token above": "3. 在上方输入您的 Gotify 服务器 URL 和令牌",
     "30 Days": "30 天",
     "30 days ago": "30 天前",
+    "30d change": "30 天变化",
     "5-Hour Window": "5小时窗口",
     "50 / page": "50 条/页",
     "7 Days": "7 天",
@@ -97,12 +108,15 @@
     "Account ID *": "账户 ID *",
     "Account Info": "账户信息",
     "Account used when authenticating with the SMTP server": "用于与 SMTP 服务器进行身份验证的账户",
+    "Across all groups": "跨所有分组",
     "Action confirmation": "操作确认",
     "Actions": "操作",
     "active": "活跃",
     "Active": "生效",
+    "Active apps": "活跃应用",
     "Active Cache Count": "活跃缓存数",
     "Active Files": "活跃文件",
+    "Active models": "活跃模型",
     "active users": "活跃用户",
     "Actual Amount": "实付金额",
     "Actual Model": "实际模型",
@@ -190,12 +204,18 @@
     "Advanced platform configuration.": "高级平台配置。",
     "Advanced Settings": "高级设置",
     "Advanced text editing": "高级文本编辑",
+    "Aesthetic style": "画风",
     "After clicking the button, you'll be asked to authorize the bot": "点击按钮后，您将被要求授权机器人",
     "After disabling, it will no longer be shown to users, but historical orders are not affected. Continue?": "禁用后用户端不再展示，但历史订单不受影响。是否继续？",
     "After enabling, the plan will be shown to users. Continue?": "启用后套餐将在用户端展示。是否继续？",
     "After invalidating, this subscription will be immediately deactivated. Historical records are not affected. Continue?": "作废后该订阅将立即失效，历史记录不受影响。是否继续？",
     "After scanning, the binding will complete automatically": "扫描后，绑定将自动完成",
     "Agent ID *": "代理 ID *",
+    "Aggregate tokens delivered across the platform": "平台累计输出的 Token 量",
+    "Aggregate traffic across every category": "聚合所有分类的整体流量",
+    "Aggregated across enabled groups": "已聚合各启用分组",
+    "Aggregated across the apps below": "已聚合下方应用",
+    "Aggregated traffic by upstream model provider": "按上游模型提供商聚合的流量",
     "Aggregated usage metrics and trend charts.": "聚合使用指标和趋势图表。",
     "aggregates 50+ AI providers behind one unified API. Manage access, track costs, and scale effortlessly.": "聚合 50+ AI 提供商于统一 API 之后。轻松管理访问、追踪成本、弹性扩展。",
     "AGPL v3.0 License": "AGPL v3.0 协议",
@@ -209,19 +229,23 @@
     "AK/SK mode: use AccessKey|SecretAccessKey|Region": "AK/SK 模式：使用 AccessKey|SecretAccessKey|Region",
     "Ali": "阿里",
     "All": "全部",
+    "All categories": "全部分类",
     "All edits are overwrite operations. Leave fields empty to keep current values unchanged.": "所有编辑都是覆盖操作。留空字段将保持当前值不变。",
     "All files exceed the maximum size.": "所有文件都超过最大尺寸。",
     "All Groups": "所有分组",
     "All Models": "所有模型",
     "All models in use are properly configured.": "所有正在使用的模型都已正确配置。",
     "All Must Match (AND)": "全部满足（AND）",
+    "All requests must include": "所有请求必须携带",
     "All Status": "所有状态",
     "All Sync Status": "所有同步状态",
+    "All systems operational": "所有系统正常运行",
     "All Tags": "所有标签",
     "All Types": "所有类型",
     "All upstream data is trusted": "所有上游数据均受信任",
     "All Vendors": "所有供应商",
     "All Your AI Models": "所有 AI 模型",
+    "All-time": "全部时间",
     "Allocated Memory": "已分配内存",
     "Allow accountFilter parameter": "允许 accountFilter 参数",
     "Allow Claude beta query passthrough": "允许 Claude beta 查询透传",
@@ -279,6 +303,7 @@
     "Answer": "答案",
     "Anthropic": "Anthropic",
     "Any Match (OR)": "任一满足（OR）",
+    "API": "API",
     "API Access": "API 访问",
     "API Addresses": "API 地址",
     "API Base URL (Important: Not Chat API) *": "API 基础 URL (重要：非聊天 API) *",
@@ -312,6 +337,8 @@
     "API URL": "API URL",
     "API usage records": "API使用记录",
     "API2GPT": "API2GPT",
+    "App": "应用",
+    "App rankings shown here are simulated for preview purposes and will be replaced with live usage data once the backend integration is complete.": "此处展示的应用排行为预览模拟数据，待后端对接完成后将替换为真实数据。",
     "Append": "追加",
     "Append mode: New keys will be added to the end of the existing key list": "追加模式：新键将添加到现有键列表的末尾",
     "Append Template": "追加模板",
@@ -329,6 +356,10 @@
     "Apply Sync": "应用同步",
     "Applying...": "正在应用...",
     "Approx.": "约",
+    "apps": "个应用",
+    "Apps": "应用",
+    "apps tracked": "个应用追踪中",
+    "Apps using the most tokens through new-api": "通过 new-api 消耗 Token 最多的应用",
     "are also listed here. Remove them from Models to keep the `/v1/models` response user-friendly and hide vendor-specific names.": "也在此处列出。将它们从模型中移除，以保持 `/v1/models` 响应对用户友好并隐藏供应商特定的名称。",
     "Are you sure you want to delete": "您确定要删除吗",
     "Are you sure you want to delete all auto-disabled keys? This action cannot be undone.": "您确定要删除所有自动禁用的密钥吗？此操作无法撤销。",
@@ -397,6 +428,7 @@
     "Available Models": "可用模型",
     "Available Rewards": "可用奖励",
     "Average RPM": "平均 RPM",
+    "Average tokens per second sustained per group": "各分组持续输出的平均每秒 token 数",
     "Average TPM": "平均 TPM",
     "AWS": "AWS",
     "AWS Bedrock Claude Compat": "AWS Bedrock Claude 兼容模板",
@@ -428,6 +460,7 @@
     "Base amount. Actual deduction = base amount × system group rate.": "基础金额，实际扣费 = 基础金额 × 系统分组倍率。",
     "Base Limits": "基础额度",
     "Base multipliers applied when users select specific groups.": "当用户选择特定分组时应用的基础乘数。",
+    "Base Price": "基础价格",
     "Base rate limit windows for this account.": "当前账号的基础额度窗口。",
     "Base URL": "API 地址",
     "Base URL of your Uptime Kuma instance": "您的 Uptime Kuma 实例的基础 URL",
@@ -448,6 +481,7 @@
     "Batch processing failed": "批量处理失败",
     "Batch upstream model updates applied: {{channels}} channels, {{added}} added, {{removed}} removed, {{fails}} failed": "已批量处理上游模型更新：渠道 {{channels}} 个，加入 {{added}} 个，删除 {{removed}} 个，失败 {{fails}} 个",
     "Best for single-tenant deployments. Pricing and billing options stay hidden.": "适合单用户部署。定价和计费选项将被隐藏。",
+    "Best TTFT": "最优 TTFT",
     "Billing": "计费",
     "Billing currency": "计费货币",
     "Billing Details": "计费详情",
@@ -474,6 +508,7 @@
     "Blocked keywords": "已阻止的关键词",
     "Blocks messages when sensitive keywords are detected.": "检测到敏感关键词时阻止消息。",
     "Body param": "请求体参数",
+    "Border radius": "圆角",
     "Bot Name": "机器人名称",
     "Bot Protection": "机器人保护",
     "Bot Token": "机器人令牌",
@@ -485,7 +520,7 @@
     "Broadcast a global banner to users. Markdown is supported.": "向用户广播全局横幅。支持 Markdown。",
     "Broadcast short system notices on the dashboard": "在仪表板上广播简短的系统通知",
     "Browse and compare": "浏览和比较",
-    "Discover curated AI models, compare pricing and capabilities, and choose the right model for every scenario.": "探索精选 AI 模型，清晰比较价格与能力，为不同场景选择合适的模型。",
+    "Browse rankings by category": "按行业浏览排行",
     "Budget tokens = max tokens × ratio. Accepts a decimal between 0.002 and 1. Recommended to keep aligned with upstream billing.": "预算令牌 = 最大令牌数 × 比例。接受 0.002 到 1 之间的十进制数。建议与上游计费保持一致。",
     "Budget tokens = max tokens × ratio. Accepts a decimal between 0.1 and 1.": "预算令牌 = 最大令牌数 × 比例。接受 0.1 到 1 之间的十进制数。",
     "Budget Tokens Ratio": "预算令牌比例",
@@ -495,6 +530,8 @@
     "Built-in Device": "内置设备",
     "Built-in: phone fingerprint/face, or Windows Hello; External: USB security key": "内置：手机指纹/面部，或 Windows Hello；外部：USB 安全密钥",
     "by": "由",
+    "By category": "按行业",
+    "By model author": "按模型厂商",
     "Cache": "缓存",
     "Cache Creation": "缓存创建",
     "Cache Creation (1h)": "缓存创建 (1h)",
@@ -506,6 +543,7 @@
     "Cache mode": "缓存模式",
     "Cache ratio": "缓存倍率",
     "Cache Read": "缓存读取",
+    "Cache repeated prompt prefixes for cheaper, faster reuse": "缓存重复的提示词前缀，复用更快、更省钱",
     "Cache write": "缓存写入",
     "Cache Write": "缓存写入",
     "Cache Write (1h)": "缓存写入 (1h)",
@@ -527,13 +565,16 @@
     "Cancel": "取消",
     "Cancelled": "已取消",
     "Cancelled at": "作废于",
+    "Capabilities": "能力",
     "Capture a reusable bundle of models, tags, or endpoints.": "捕获可重用的模型、标签或端点捆绑包。",
     "Card view": "卡片视图",
+    "Category": "分类",
     "Category Name": "分类名称",
     "Category name is required": "分类名称不能为空",
     "Category name must be less than 50 characters": "分类名称不能超过 50 个字符",
     "Caution": "注意",
     "CC Switch": "CC 切换",
+    "Centered": "居中",
     "Chain": "链路",
     "Change": "更改",
     "Change language": "更改语言",
@@ -563,6 +604,7 @@
     "channel(s)? This action cannot be undone.": "渠道？此操作无法撤销。",
     "Channels": "渠道",
     "Channels deleted successfully": "渠道删除成功",
+    "Character chat, storytelling, persona": "角色对话、剧情创作、人设扮演",
     "Chart Preferences": "图表偏好设置",
     "Chart Settings": "图表设置",
     "Chat": "聊天",
@@ -632,6 +674,7 @@
     "Cleared all models": "已清除所有模型",
     "Click \"Create Plan\" to create your first subscription plan": "点击「新建套餐」创建您的第一个订阅套餐",
     "Click \"Generate\" to create a token": "点击“生成”以创建令牌",
+    "Click any category to drill into its models, apps, and trends": "点击任意分类可下钻查看其模型、应用与趋势",
     "Click for details": "点击查看详情",
     "Click save when you're done.": "完成後點擊保存。",
     "Click save when you&apos;re done.": "完成后点击保存。",
@@ -655,6 +698,9 @@
     "CNY": "元",
     "CNY per USD": "人民币兑美元汇率",
     "Code": "代码",
+    "Code generation, refactoring, autocomplete": "代码生成、重构、自动补全",
+    "Code interpreter": "代码解释器",
+    "Code samples": "调用示例",
     "Codes copied!": "代码已复制！",
     "Codex": "Codex",
     "Codex Account & Usage": "Codex 账户和用量",
@@ -666,7 +712,9 @@
     "Collapse All": "全部收起",
     "Color": "颜色",
     "Color is required": "颜色为必填项",
+    "Color preset": "颜色预设",
     "Color:": "颜色：",
+    "Comfortable": "宽松",
     "Coming Soon!": "即将推出！",
     "Comma-separated exact model names. Prefix with regex: to ignore by regular expression.": "使用英文逗号分隔精确模型名。以 regex: 开头可使用正则表达式忽略。",
     "Comma-separated list of allowed ports (empty = all ports)": "允许的端口的逗号分隔列表（留空 = 所有端口）",
@@ -679,6 +727,13 @@
     "Common ports include 25, 465, and 587": "常用端口包括 25、465 和 587",
     "Common User": "普通用户",
     "Community driven, self-hosted, and extensible": "社区驱动、可自托管、易于扩展",
+    "Compact": "紧凑",
+    "Compare each vendor's token share across the past few weeks": "对比过去几周各厂商的 Token 份额",
+    "Compare each vendor's token share across the past year": "对比过去一年各厂商的 Token 份额",
+    "Compare each vendor's token share over the past 24 hours": "对比过去 24 小时各厂商的 Token 份额",
+    "Compare each vendor's token share over the past month": "对比过去一个月各厂商的 Token 份额",
+    "Compare each vendor's token share since launch": "对比自上线以来各厂商的 Token 份额",
+    "Compare the most popular models on the platform": "对比平台上最受欢迎的模型",
     "compatible API routes": "兼容 API 路由",
     "Compatible API routes for common AI application workflows": "兼容常见 AI 应用工作流的 API 路由",
     "Complete API documentation with multi-language SDK support": "完整的 API 文档，支持多语言 SDK",
@@ -792,6 +847,8 @@
     "Content displayed on the home page (supports Markdown)": "主页上显示的内容（支持 Markdown）",
     "Content not found.": "内容未找到。",
     "Content not modified!": "内容未修改！",
+    "Content width": "内容宽度",
+    "Context": "上下文",
     "Continue": "继续",
     "Continue with {{name}}": "使用 {{name}} 继续",
     "Continue with Discord": "使用 Discord 继续",
@@ -800,11 +857,13 @@
     "Continue with OIDC": "使用 OIDC 继续",
     "Continue with Telegram": "使用 Telegram 继续",
     "Continue with WeChat": "使用 微信 继续",
+    "Contract review, compliance, summarisation": "合同审阅、合规与摘要",
     "Control log retention and clean historical data.": "控制日志保留期限并清理历史数据。",
     "Control passthrough behavior and connection keep-alive settings": "控制透传行为和连接保持活动设置",
     "Control request frequency to prevent abuse and manage system load.": "控制请求频率以防止滥用和管理系统负载。",
     "Control which models are exposed and which groups may use them.": "控制对外暴露的模型，以及哪些分组可以使用它们。",
     "Control which sidebar areas and modules are available to all users.": "控制哪些侧边栏区域和模块对所有用户可用。",
+    "Controls how much the model thinks before answering": "控制模型回答前的推理深度",
     "Controls whether user verification (biometrics/PIN) is required during Passkey flows.": "控制在通行密钥流程中是否需要用户验证（生物识别/PIN）。",
     "Conversion rate from USD to your custom currency": "从美元到您的自定义货币的转换率",
     "Convert reasoning_content to <think> tag in content": "将 reasoning_content 转换为 content 中的 <think> 标签",
@@ -845,6 +904,7 @@
     "Copy to clipboard": "复制到剪贴板",
     "Copy token": "复制令牌",
     "Copy URL": "复制 URL",
+    "Copywriting, ad creative, SEO": "文案、广告创意、SEO",
     "Core Configuration": "核心配置",
     "Core Features": "核心功能",
     "Cost": "费用",
@@ -936,6 +996,11 @@
     "Customize sidebar display content": "个性化设置左侧边栏的显示内容",
     "Daily": "每天",
     "Daily Check-in": "每日签到",
+    "Daily token usage by model across the past few weeks": "过去几周内按模型分布的每日 Token 使用量",
+    "Daily token usage by model across the past month": "过去一个月内各模型的每日 Token 用量",
+    "Daily token usage by model over the past month": "过去一个月内按模型分布的每日 Token 使用量",
+    "Daily uptime over the last 30 days": "最近 30 天每日可用率",
+    "Daily uptime; {{incidents}} incidents totalling {{minutes}} minutes": "每日可用率；{{incidents}} 起事件，总计 {{minutes}} 分钟",
     "Dark": "深色",
     "Dashboard": "数据看板",
     "Dashboard Preferences": "看板偏好设置",
@@ -944,6 +1009,7 @@
     "Data directory:": "数据目录：",
     "Data is stored locally on this device. Use system backups to keep a safe copy.": "数据存储在此设备本地。请使用系统备份来保留安全副本。",
     "Data management and log viewing": "数据管理和日志查看",
+    "Data retention": "数据保留",
     "Database": "数据库",
     "Database check": "数据库检查",
     "Date and time when this announcement should be displayed": "此公告应显示的日期和时间",
@@ -956,6 +1022,7 @@
     "default": "默认",
     "Default": "默认",
     "Default (New Frontend)": "新版前端（默认）",
+    "Default / range": "默认值 / 范围",
     "Default API Version *": "默认 API 版本 *",
     "Default API version for this channel": "此渠道的默认 API 版本",
     "Default Collapse Sidebar": "默认折叠侧边栏",
@@ -972,6 +1039,7 @@
     "Define API endpoints for this model (JSON format)": "为此模型定义 API 端点（JSON 格式）",
     "Define endpoint mappings for each provider.": "为每个提供商定义端点映射。",
     "Define per-group rules to add, remove, or append selectable groups for specific user groups.": "为特定用户组定义按分组规则，以添加、移除或追加可选分组。",
+    "Degraded performance recently": "近期性能有所下降",
     "Delete": "删除",
     "Delete (": "删除 (",
     "Delete {{count}} API key(s)?": "删除 {{count}} 个 API 密钥？",
@@ -1009,6 +1077,7 @@
     "Demo site mode": "演示站点模式",
     "Demo Site Mode": "演示站点模式",
     "Demote": "降级",
+    "Density": "密度",
     "Deploy your own gateway and start routing requests through your configured upstream services.": "部署你自己的网关，并通过已配置的上游服务开始转发请求。",
     "Deployment created successfully": "创建部署成功",
     "Deployment details": "部署详情",
@@ -1035,6 +1104,7 @@
     "Detection complete: {{add}} to add, {{remove}} to remove": "检测完成：新增 {{add}} 个，删除 {{remove}} 个",
     "Detection failed": "检测失败",
     "Determines how this group is applied elsewhere.": "确定此分组在其他地方的应用方式。",
+    "Deterministic sampling seed (best-effort)": "尽量保证可复现的采样种子",
     "Developer Friendly": "开发者友好",
     "Device Type Preference": "设备类型偏好",
     "Dify": "Dify",
@@ -1069,6 +1139,9 @@
     "Discount Rate:": "折扣率：",
     "Discount ratio for cache hits.": "缓存命中时的折扣比例。",
     "Discouraged": "不推荐",
+    "Discover curated AI models, compare pricing and capabilities, and choose the right model for every scenario.": "探索精选 AI 模型，清晰比较价格与能力，为不同场景选择合适的模型。",
+    "Discover the leading models in each domain": "发掘各个领域的领先模型",
+    "Discover the most-used models, top apps, and rising vendors on the platform — updated continuously across every category.": "发掘平台上最受欢迎的模型、热门应用与崛起的厂商——每个分类的数据持续更新。",
     "Discovering...": "发现中...",
     "Disk cache cleared": "磁盘缓存已清理",
     "Disk Cache Settings": "磁盘缓存设置",
@@ -1191,6 +1264,7 @@
     "Edit Vendor": "编辑供应商",
     "edit_this": "edit_this",
     "Editor mode": "编辑器模式",
+    "Education": "教育",
     "Email": "邮箱",
     "Email (required for verification)": "电子邮件（验证必需）",
     "Email Address": "电子邮件地址",
@@ -1200,6 +1274,7 @@
     "Email Domain Whitelist": "电子邮件域白名单",
     "Email Field": "邮箱字段",
     "Email Verification": "电子邮件验证",
+    "Email, summarisation, knowledge work": "邮件、摘要与知识工作",
     "Embeddings": "嵌入",
     "Empty value will be saved as {}.": "空值将保存为 {}。",
     "Enable": "启用",
@@ -1247,10 +1322,12 @@
     "Enabled all channels with tag: {{tag}}": "已启用标签「{{tag}}」下的所有渠道",
     "Enabled Status": "启用状态",
     "Enabling...": "正在启用...",
+    "Encourages introducing new topics": "鼓励引入新话题",
     "End": "结束",
     "End Error": "结束错误",
     "End Reason": "结束原因",
     "End Time": "结束时间",
+    "End-user identifier for abuse monitoring": "用于风险审计的终端用户标识",
     "Endpoint": "端点",
     "Endpoint config": "端点配置",
     "Endpoint Configuration": "端点配置",
@@ -1358,10 +1435,12 @@
     "Excellent": "优秀",
     "Exchange rate is required": "汇率为必填项",
     "Exchange rate must be greater than 0": "汇率必须大于 0",
+    "Execute code in a sandbox during the response": "在响应过程中沙箱执行代码",
     "Exhausted": "已耗尽",
     "Existing account will be reused": "将使用现有账户",
     "Existing Models ({{count}})": "现有模型 ({{count}})",
     "Exists": "存在",
+    "Expand": "展开",
     "Expand All": "全部展开",
     "Expected a JSON array.": "应为 JSON 数组。",
     "Experiment with prompts and models in real time.": "实时实验提示词和模型。",
@@ -1530,6 +1609,7 @@
     "Field Mapping": "字段映射",
     "Field passthrough controls": "字段透传控制",
     "Field Path": "字段路径",
+    "File": "文件",
     "File Search": "文件搜索",
     "Files to Retain": "保留文件数",
     "Fill All Models": "填充所有模型",
@@ -1569,6 +1649,7 @@
     "Final Consumed": "最终消耗",
     "Final cost = base × multiplier when conditions match": "匹配条件时，最终费用 = 基础费用 × 倍率",
     "Final price multiplier (0.95 = 5% discount": "最终价格乘数 (0.95 = 5% 折扣",
+    "Finance": "金融",
     "Fine-tune Midjourney integration and guardrails.": "微调 Midjourney 集成和防护栏。",
     "Finish Time": "完成时间",
     "First/Last Frame to Video": "首尾生视频",
@@ -1576,6 +1657,7 @@
     "Fixed abilities: {{success}} succeeded, {{fails}} failed": "修复能力：{{success}} 个成功，{{fails}} 个失败",
     "Fixed price": "固定价格",
     "Fixed price (USD)": "固定价格 (USD)",
+    "Floating": "浮动",
     "FluentRead extension not detected. Please ensure it is installed and active.": "未检测到 FluentRead 扩展。请确保已安装并激活。",
     "Follow the guided steps to prepare your workspace before the first login.": "请按照引导步骤在首次登录前准备您的工作区。",
     "Footer": "页脚",
@@ -1596,10 +1678,13 @@
     "footer.new\u0061pi.projectAttributionSuffix": "版权所有，由项目贡献者设计与开发。",
     "For channels added after May 10, 2025, no need to remove \".\" from model names during deployment": "对于 2025 年 5 月 10 日之后添加的渠道，在部署时无需从模型名称中移除 \".\"",
     "For private deployments, format: https://fastgpt.run/api/openapi": "对于私有部署，格式为：https://fastgpt.run/api/openapi",
+    "Force a syntactically valid JSON response": "强制返回语法合法的 JSON",
     "Force AUTH LOGIN": "强制 AUTH LOGIN",
     "Force Format": "强制格式化",
     "Force format response to OpenAI standard (OpenAI channel only)": "强制将响应格式化为 OpenAI 标准（仅限 OpenAI 渠道）",
+    "Force JSON object or schema-conforming output": "强制输出 JSON 对象或符合 Schema 的结果",
     "Force SMTP authentication using AUTH LOGIN method": "强制使用 AUTH LOGIN 方法进行 SMTP 认证",
+    "Forest Whisper": "森林低语",
     "Forgot password": "忘记密码",
     "Forgot password?": "忘记密码？",
     "Form reset to saved values": "表单已重置为保存的值",
@@ -1614,6 +1699,7 @@
     "Format: APPID|APISecret|APIKey": "格式：APPID|APISecret|APIKey",
     "Format: AppId|SecretId|SecretKey": "格式：AppId|SecretId|SecretKey",
     "Forward requests directly to upstream providers without any post-processing.": "将请求直接转发给上游提供商，不进行任何后处理。",
+    "Frames per second": "帧率",
     "Free: {{free}} / Total: {{total}}": "可用空间: {{free}} / 总空间: {{total}}",
     "Friendly name to identify this channel": "用于识别此渠道的友好名称",
     "From Address": "发件地址",
@@ -1623,6 +1709,9 @@
     "Full API Key": "完整 API 密钥",
     "Full Base URL (supports": "完整基础 URL (支持",
     "Full Code": "完整代码",
+    "Full layout": "全屏布局",
+    "Full width": "全宽",
+    "Function calling": "函数调用",
     "Functions": "函数",
     "GC Count": "GC 次数",
     "GC executed": "GC 已执行",
@@ -1639,9 +1728,11 @@
     "Generate Music": "生成音乐",
     "Generate new backup codes for account recovery": "生成新的备份代码用于账户恢复",
     "Generate New Codes": "生成新代码",
+    "Generate tokens from the Tokens page; you can scope them to specific models, groups, IPs, and rate-limits.": "在「令牌」页面生成 API Key，可以按模型、分组、IP、速率等维度精细化授权。",
     "Generated image": "生成的图像",
     "Generating new codes will invalidate all existing backup codes.": "生成新代码将使所有现有备份代码失效。",
     "Generating...": "生成中...",
+    "Generation quality preset": "生成质量预设",
     "Generic cache": "通用缓存",
     "Get notified when balance falls below this value": "当余额低于此值时接收通知",
     "Get Started": "开始使用",
@@ -1651,6 +1742,7 @@
     "Global configuration and administrative tools.": "全局配置和管理工具。",
     "Global Coverage": "全球覆盖",
     "Global Model Configuration": "全局模型配置",
+    "Global throughput": "全局吞吐量",
     "Go Back": "返回",
     "Go back and edit": "返回修改",
     "Go to Dashboard": "前往仪表板",
@@ -1697,6 +1789,7 @@
     "Groups": "分组",
     "Groups *": "分组 *",
     "Groups that users can select when creating API keys.": "用户在创建 API 密钥时可以选择的分组。",
+    "Growth": "增长",
     "Guardrails": "安全护栏",
     "Guest": "访客",
     "h": "小时",
@@ -1710,11 +1803,14 @@
     "Has been invalidated": "已作废",
     "Have a Code?": "有兑换码吗？",
     "Header": "请求头",
+    "header instead.": " 请求头。",
     "Header Name": "请求头名称",
     "Header navigation": "顶部导航",
     "Header Override": "标头覆盖",
     "Header Passthrough (X-Request-Id)": "请求头透传（X-Request-Id）",
     "Header Value (supports string or JSON mapping)": "请求头值（支持字符串或 JSON 映射）",
+    "header. Anthropic-formatted endpoints accept the": " 请求头。Anthropic 格式的端点也接受",
+    "Health": "健康",
     "Hidden — verify to reveal": "隐藏 — 验证以显示",
     "Hide": "隐藏",
     "Hide API key": "隐藏 API 密钥",
@@ -1738,6 +1834,8 @@
     "Home Page Content": "首页内容",
     "Hostname or IP of your SMTP provider": "您的 SMTP 提供商的主机名或 IP",
     "Hour": "小时",
+    "Hourly token usage by model across the last 24 hours": "过去 24 小时内各模型的逐小时 Token 用量",
+    "Hourly token usage by model over the past 24 hours": "过去 24 小时内按模型分布的小时级 Token 使用量",
     "hours": "小时",
     "How client credentials are sent to the token endpoint": "客户端凭据如何发送至令牌端点",
     "How frequently the system tests all channels": "系统测试所有渠道的频率",
@@ -1745,6 +1843,7 @@
     "How model mapping works": "模型映射的工作原理",
     "How much to charge for each US dollar of balance (Epay)": "每美元余额（Epay）的收费金额",
     "How this model name should match requests": "此模型名称应如何匹配请求",
+    "How to deliver the resulting image": "图像结果的返回方式",
     "How to get an io.net API Key": "如何获取 io.net API 密钥",
     "How to reset my quota?": "如何重置我的配额？",
     "How to select keys: random or sequential polling": "密钥选择方式：随机或顺序轮询",
@@ -1794,6 +1893,9 @@
     "Import to CC Switch": "填入 CC Switch",
     "In Progress": "进行中",
     "In:": "入：",
+    "incident": "次故障",
+    "incidents": "次故障",
+    "Incidents": "事件",
     "Include Group": "包含分组",
     "Include Model": "包含模型",
     "Include Rule Name": "包含规则名",
@@ -1810,14 +1912,15 @@
     "Input price": "输入价格",
     "Input tokens": "输入 token",
     "Input Tokens": "输入 Token",
+    "Inset": "内嵌",
     "Inspect user prompts": "检查用户提示",
     "Instance": "实例",
     "Integrations": "集成",
     "Inter-group overrides": "分组间覆盖",
     "Inter-group ratio overrides": "分组间比例覆盖",
+    "Interface Language": "界面语言",
     "Internal Notes": "内部备注",
     "Internal notes (not shown to users)": "内部备注（不显示给用户）",
-    "Interface Language": "界面语言",
     "Internal Server Error!": "内部服务器错误！",
     "Invalid chat link. Please contact the administrator.": "无效的聊天链接。请联系管理员。",
     "Invalid chat link. Please contact your administrator.": "无效的聊天链接。请联系您的管理员。",
@@ -1848,6 +1951,7 @@
     "Inviter": "邀请人",
     "Inviter Reward": "邀请者奖励",
     "Invites": "邀请",
+    "Invoke developer-defined functions with structured arguments": "使用结构化参数调用开发者定义的函数",
     "io.net API Key": "io.net API 密钥",
     "io.net Deployments": "io.net 部署",
     "IP": "IP",
@@ -1872,6 +1976,7 @@
     "JSON map of group → ratio applied when the user selects the group explicitly.": "分组 → 比率的 JSON 映射，当用户明确选择该分组时应用此比率。",
     "JSON map of model → multiplier applied to quota billing.": "模型 → 应用于配额计费的乘数的 JSON 映射。",
     "JSON map of model → USD cost per request. Takes precedence over ratio based billing.": "模型 → 每请求美元成本的 JSON 映射。优先于基于比率的计费。",
+    "JSON mode": "JSON 模式",
     "JSON Mode": "JSON 模式",
     "JSON must be an object": "JSON 必须是对象",
     "JSON object:": "JSON 对象：",
@@ -1893,10 +1998,13 @@
     "Keys, OAuth credentials, and multi-key update behavior.": "管理密钥、OAuth 凭据和多密钥更新行为。",
     "Kling": "Kling",
     "Knowledge Base ID *": "知识库 ID *",
+    "Knowledge cutoff": "知识截止",
+    "Lake View": "湖光",
     "Landing page with system overview.": "带有系统概览的登陆页面。",
-    "Language Preferences": "语言偏好",
     "Language preference saved": "语言偏好已保存",
+    "Language Preferences": "语言偏好",
     "Language preferences sync across your signed-in devices and affect API error messages.": "语言偏好会同步到您登录的所有设备，并影响 API 错误消息语言。",
+    "Last 30 days uptime": "近 30 天可用率",
     "Last check time": "上次检测时间",
     "Last detected addable models": "上次检测到可加入模型",
     "Last Login": "最后登录",
@@ -1905,7 +2013,11 @@
     "Last updated:": "上次更新时间：",
     "Last Used": "最后使用时间",
     "Last used:": "上次使用时间：",
+    "Latency trend (last 24h)": "延迟趋势（最近 24 小时）",
+    "Lavender Dream": "薰衣草梦",
     "Layout": "布局",
+    "lead": "领头",
+    "Leaderboards": "排行榜",
     "Learn more": "了解更多",
     "Learn more:": "了解更多：",
     "Leave": "离开",
@@ -1922,12 +2034,15 @@
     "Leave empty to use default": "留空使用默认",
     "Leave empty to use system temp directory": "留空使用系统临时目录",
     "Leave empty to use username": "留空以使用用户名",
+    "Left to Right": "从左到右",
     "Legacy Format (JSON Object)": "旧格式（JSON 对象）",
     "Legacy format must be a JSON object": "旧格式必须是 JSON 对象",
     "Legacy Format Template": "旧格式模板",
+    "Legal": "法律",
     "Less": "更少",
     "Less Than": "小于",
     "Less Than or Equal": "小于等于",
+    "License": "许可证",
     "Light": "浅色",
     "Lightning Fast": "极速",
     "Limit period": "限制周期",
@@ -1942,6 +2057,7 @@
     "List of models supported by this channel. Use comma to separate multiple models.": "此渠道支持的模型列表。使用逗号分隔多个模型。",
     "List of origins (one per line) allowed for Passkey registration and authentication.": "允许用于 Passkey 注册和身份验证的来源列表（每行一个）。",
     "List view": "列表视图",
+    "LLM Leaderboard": "LLM 排行榜",
     "LLM prompt helper": "LLM 辅助设计提示词",
     "Load Balancing": "负载均衡",
     "Load template...": "加载模板...",
@@ -1972,6 +2088,7 @@
     "Logo": "徽标",
     "Logo URL": "徽标 URL",
     "Logs": "日志",
+    "Lowest median first-token latency": "最低首 token 延迟中位数",
     "m": "分钟",
     "Maintain a list of common questions for the dashboard help panel": "维护仪表板帮助面板的常见问题列表",
     "Maintenance": "维护",
@@ -2005,6 +2122,8 @@
     "Map request model names to actual provider model names (JSON format)": "将请求模型名称映射到实际提供商模型名称 (JSON 格式)",
     "Map response status codes (JSON format)": "映射响应状态码（JSON 格式）",
     "Map upstream status codes to different codes": "将上游状态码映射到不同的代码",
+    "Market Share": "市场份额",
+    "Marketing": "市场营销",
     "Match All (AND)": "必须全部满足（AND）",
     "Match Any (OR)": "满足任一条件（OR）",
     "Match Mode": "匹配方式",
@@ -2021,6 +2140,7 @@
     "Matching Rules": "匹配规则",
     "Max Disk Cache Size (MB)": "磁盘缓存最大总量 (MB)",
     "Max Entries": "最大条目数",
+    "Max output": "最大输出",
     "Max Requests (incl. failures)": "最大请求数（包括失败）",
     "Max Requests (including failures)": "最大请求数（包括失败）",
     "Max requests per period": "每周期最大请求数",
@@ -2031,8 +2151,15 @@
     "Maximum 200 characters": "最多 200 个字符",
     "Maximum 500 characters. Supports Markdown and HTML.": "最多 500 个字符。支持 Markdown 和 HTML。",
     "Maximum check-in quota": "签到最大额度",
+    "Maximum input window": "最大输入窗口",
+    "Maximum number of tokens in the response": "响应中最大 token 数",
     "Maximum quota amount awarded for check-in": "签到奖励的最大额度",
+    "Maximum tokens including hidden reasoning tokens": "最大 token 数（含隐藏的推理 token）",
+    "Maximum tokens per response": "单次响应最大 token 数",
     "maxRequests ≥ 0, maxSuccess ≥ 1, both ≤ 2,147,483,647": "maxRequests ≥ 0, maxSuccess ≥ 1，两者均 ≤ 2,147,483,647",
+    "May be used for training by upstream provider": "可能被上游提供商用于训练",
+    "Median time-to-first-token (TTFT) sampled hourly per group": "按小时采样的各分组首 token 延迟（TTFT）中位数",
+    "Medical Q&A, mental health support": "医疗问答与心理健康支持",
     "Memory Hits": "内存命中",
     "Memory Threshold (%)": "内存阈值 (%)",
     "Merchant ID": "商户 ID",
@@ -2041,6 +2168,7 @@
     "Metadata": "元信息",
     "Midjourney": "Midjourney",
     "MidjourneyPlus": "MidjourneyPlus",
+    "min downtime": "分钟停机",
     "Min Top-up": "最低充值",
     "Min Top-up:": "最低充值：",
     "MiniMax": "MiniMax",
@@ -2056,12 +2184,15 @@
     "Minimum topup amount: {{amount}}": "最低充值金额：{{amount}}",
     "Minimum Trust Level": "最低信任级别",
     "Minimum:": "最低：",
+    "Minor blips in the last 30 days": "近 30 天内有轻微抖动",
     "Minute": "分钟",
     "minutes": "分钟",
     "Missing code": "缺少代码",
     "Missing Models": "缺失的模型",
     "Missing user data from Passkey login response": "Passkey 登录响应中缺少用户数据",
     "Mistral": "Mistral",
+    "Modalities": "模态",
+    "Modality": "模态",
     "Mode": "模式",
     "model": "模型",
     "Model": "模型",
@@ -2074,6 +2205,7 @@
     "Model deleted successfully": "模型删除成功",
     "Model deployment service is disabled": "模型部署服务未启用",
     "Model Description": "模型描述",
+    "Model details": "模型详情",
     "Model disabled successfully": "模型禁用成功",
     "Model enabled successfully": "模型启用成功",
     "Model fixed pricing": "模型固定定价",
@@ -2111,11 +2243,15 @@
     "Models & Groups": "模型与分组",
     "Models appended successfully": "模型已追加成功",
     "Models are required": "需要模型",
+    "Models climbing the leaderboard": "正在攀升的模型",
+    "Models climbing the leaderboard fastest": "排行榜上升最快的模型",
     "Models directory": "模型目录",
     "Models Directory": "模型目录",
     "Models fetched successfully": "模型获取成功",
     "Models filled to form": "模型已填充到表单",
     "Models listed here will not automatically append or remove -thinking / -nothinking suffixes.": "此处列出的模型不会自动添加或移除 -thinking / -nothinking 后缀。",
+    "Models losing positions": "排名下滑的模型",
+    "Models losing the most positions": "名次下滑最多的模型",
     "Models not in list, may fail to invoke": "模型未加入列表，可能无法调用",
     "Models that are being used but not configured in the system": "正在使用但未在系统中配置的模型",
     "Models updated successfully": "模型更新成功",
@@ -2124,14 +2260,16 @@
     "MokaAI": "MokaAI",
     "Monitor": "监控",
     "Monitoring & Alerts": "监控与警报",
-    "Month": "月份",
+    "Month": "本月",
     "Monthly": "每月",
+    "Monthly tokens": "每月 token",
     "months": "个月",
     "Moonshot": "Moonshot",
     "More": "更多",
     "more mapping": "更多映射",
     "More templates...": "更多模板...",
     "More...": "更多...",
+    "Most-used models in the selected period and category": "所选时间范围与分类下使用率最高的模型",
     "Move": "移动",
     "Move a request header": "移动请求头",
     "Move affiliate rewards to your main balance": "将推广奖励转移到您的主余额",
@@ -2148,7 +2286,10 @@
     "Multi-key: Random rotation": "多密钥：随机",
     "Multi-protocol Compatible": "兼容多协议",
     "Multi-region deployment for stable global access": "多区域部署，实现稳定的全球访问",
+    "Multi-step thinking before final answer": "在给出最终答案前进行多步推理",
     "Multi-user management with flexible permission allocation": "多用户管理，灵活分配权限",
+    "Multilingual translation and localisation": "多语种翻译与本地化",
+    "Multimodal": "多模态",
     "Multiplier": "倍率",
     "Multiplier applied when": "倍率应用于当",
     "Multiplier applied when {{userGroup}} uses {{targetGroup}}": "当{{userGroup}}使用{{targetGroup}}时应用的倍率",
@@ -2184,6 +2325,7 @@
     "Network proxy for this channel (supports socks5 protocol)": "此渠道的网络代理（支持 socks5 协议）",
     "Never": "永不",
     "Never expires": "永不过期",
+    "NEW": "新",
     "New API": "New API",
     "New API &lt;noreply@example.com&gt;": "New API &lt;noreply@example.com&gt;",
     "New API Project Repository:": "New API 项目仓库：",
@@ -2197,6 +2339,7 @@
     "New User Quota": "新用户配额",
     "New version available: {{version}}": "有新版本可用：{{version}}",
     "NewAPI": "NewAPI",
+    "Newly released": "最新发布",
     "Next": "下一步",
     "Next branch": "下一个分支",
     "Next page": "下一页",
@@ -2211,10 +2354,13 @@
     "No API keys available. Create your first API key to get started.": "没有可用的 API 密钥。创建您的第一个 API 密钥即可开始使用。",
     "No API Keys Found": "未找到 API 密钥",
     "No API routes configured": "未配置 API 路由",
+    "No app usage data available for this model.": "该模型暂无应用使用数据。",
+    "No apps match the selected filters": "没有匹配筛选条件的应用",
     "No available models": "没有可用模型",
     "No available Web chat links": "没有可用的 Web 聊天链接",
     "No backup": "无备份",
     "No billing records found": "未找到账单记录",
+    "No capabilities reported for this model.": "该模型暂未报告任何能力。",
     "No Change": "无变化",
     "No changes": "没有变更",
     "No changes made": "未进行任何更改",
@@ -2249,8 +2395,11 @@
     "No group-based rate limits configured. Click \"Add group\" to get started.": "未配置基于组的速率限制。点击“添加组”开始使用。",
     "No groups match your search": "没有组匹配您的搜索",
     "No header overrides configured.": "未配置标头覆盖。",
+    "No history data available": "暂无历史数据",
+    "No incidents in the last 30 days": "最近 30 天无事件",
     "No Inviter": "无邀请人",
     "No keys found": "未找到密钥",
+    "No latency data available": "暂无延迟数据",
     "No log entries matched the selected time.": "没有日志条目匹配所选时间。",
     "No logs": "暂无日志",
     "No Logs Found": "未找到日志",
@@ -2270,6 +2419,7 @@
     "No models found": "未找到模型",
     "No Models Found": "未找到模型",
     "No models found.": "未找到模型。",
+    "No models match the selected filters": "没有匹配筛选条件的模型",
     "No models match your current filters.": "没有模型匹配您当前的筛选条件。",
     "No models match your search": "没有匹配的模型",
     "No models selected": "未选择模型",
@@ -2277,6 +2427,9 @@
     "No models to copy": "没有模型可复制",
     "No models to remove": "无待删除模型",
     "No new models to add": "没有新模型可添加",
+    "No new models yet": "暂无新模型",
+    "No notable climbers right now": "当前没有显著上升的模型",
+    "No notable drops right now": "当前没有显著下降的模型",
     "No parameter overrides configured.": "未配置参数覆盖。",
     "No payment methods available. Please contact administrator.": "没有可用的支付方式。请联系管理员。",
     "No payment methods configured": "暂无支付方式",
@@ -2315,6 +2468,7 @@
     "No Upgrade": "不升级",
     "No upstream price differences found": "未发现上游价格差异",
     "No upstream ratio differences found": "未找到上游比例差异",
+    "No uptime data available": "暂无可用率数据",
     "No Uptime Kuma groups yet. Click \"Add Group\" to create one.": "暂无 Uptime Kuma 分组。点击“添加分组”来创建一个。",
     "No uptime monitoring configured": "未配置正常运行时间监控",
     "No usage logs available. Logs will appear here once API calls are made.": "暂无使用日志。发起 API 调用后日志将显示在此处。",
@@ -2322,6 +2476,7 @@
     "No user selected": "未选择用户",
     "No users available. Try adjusting your search or filters.": "没有可用的用户。请尝试调整您的搜索或筛选条件。",
     "No Users Found": "未找到用户",
+    "No vendor data available": "暂无厂商数据",
     "Node Name": "节点名称",
     "Non-stream": "非流式",
     "None": "无",
@@ -2336,15 +2491,20 @@
     "Not Started": "未开始",
     "Not Submitted": "未提交",
     "Not tested": "未测试",
+    "Not used for upstream training by default": "默认不会用于上游训练",
     "Not used yet": "暂未使用",
     "Notice": "通知",
     "Notification Email": "通知邮箱",
     "Notification Method": "通知方式",
     "Notifications": "通知",
+    "Nucleus sampling probability mass": "核采样累计概率",
     "Number of codes to create": "要创建的代码数量",
+    "Number of completions to generate": "生成的候选条数",
+    "Number of images to generate": "生成的图像数量",
     "Number of keys to create": "要创建的密钥数量",
     "Number of times to retry failed requests (0-10)": "失败请求的重试次数 (0-10)",
     "Number of tokens per unit quota": "每单位配额的令牌数",
+    "Number of top log probabilities returned per token": "每个 token 返回的 top 概率数量",
     "Number of users invited": "已邀请的用户数量",
     "OAuth Client ID": "OAuth 客户端 ID",
     "OAuth Client Secret": "OAuth 客户端密钥",
@@ -2355,6 +2515,7 @@
     "Observability": "可观测性",
     "Obtain the API key, merchant ID, and RSA key pair from the Waffo dashboard, and configure the callback URL.": "请在 Waffo 后台获取 API 密钥、商户 ID 以及 RSA 密钥对，并配置回调地址。",
     "Obtain the merchant, store, product and signing keys from your Waffo dashboard. Webhook URL: <ServerAddress>/api/waffo-pancake/webhook": "请在 Waffo 后台获取商户、店铺、商品与签名密钥。Webhook 地址：<ServerAddress>/api/waffo-pancake/webhook",
+    "Ocean Breeze": "海风",
     "of": "条，共",
     "of 3:": "共 3 个：",
     "off": "关闭",
@@ -2397,9 +2558,11 @@
     "Open in New Tab": "在新标签页中打开",
     "Open menu": "打开菜单",
     "Open release": "打开版本",
+    "Open source": "开源",
     "Open Source": "开源项目",
     "Open the io.net console API Keys page": "打开 io.net 控制台 API 密钥页面",
     "Open theme settings": "打开主题设置",
+    "Open weights": "开放权重",
     "OpenAI": "OpenAI",
     "OpenAI Compatible": "兼容 OpenAI",
     "OpenAI Organization": "OpenAI 组织",
@@ -2437,10 +2600,14 @@
     "org-...": "org-...",
     "Original Model": "原始模型",
     "Other": "其他",
+    "Outage": "中断",
     "Output": "输出",
+    "Output aspect ratio": "输出宽高比",
+    "Output image size": "输出图像尺寸",
     "Output price": "输出价格",
     "Output tokens": "输出 token",
     "Output Tokens": "输出 Token",
+    "overall": "总体",
     "override": "覆盖",
     "Override": "覆盖",
     "Override Anthropic headers, defaults, and thinking adapter behavior": "覆盖 Anthropic 标头、默认值和思维适配器行为",
@@ -2460,6 +2627,7 @@
     "PaLM": "PaLM",
     "Pan": "平移",
     "Param Override": "参数覆盖",
+    "Parameter": "参数",
     "Parameter configuration error": "参数配置有误",
     "Parameter Override": "参数覆盖",
     "Parameter override must be a valid JSON object": "参数覆盖必须是合法的 JSON 对象",
@@ -2533,6 +2701,9 @@
     "Payment page opened": "已打开支付页面",
     "Payment request failed": "支付请求失败",
     "Payment return URL": "支付返回地址",
+    "Peak": "峰值",
+    "Peak throughput": "峰值吞吐",
+    "Penalises repetition of frequent tokens": "惩罚高频 token 的重复出现",
     "Pending": "待确认",
     "per": "每",
     "Per 1K tokens": "每 1K tokens",
@@ -2542,13 +2713,18 @@
     "Per Request": "按请求",
     "Per-call": "每次调用",
     "Per-feature metered windows split by model or capability.": "按模型或能力拆分的附加计费能力窗口。",
+    "Per-group performance": "各分组性能",
     "Per-request (fixed price)": "按请求计费（固定价格）",
     "Per-token": "按 Token",
     "Per-token (ratio based)": "按令牌计费（基于比例）",
+    "Per-token logit bias map": "按 token 的 logit 偏置映射",
     "Percentage:": "百分比：",
     "Performance": "性能",
+    "Performance data is not yet available for this model.": "该模型暂无性能数据。",
+    "Performance metrics shown here are simulated for preview purposes and will be replaced with live observability data once the backend integration is complete.": "此处展示的性能指标为预览模拟数据，待后端对接完成后将替换为真实可观测数据。",
     "Performance Monitor": "性能监控",
     "Performance Settings": "性能设置",
+    "Period": "时间范围",
     "Periodically check for upstream model changes": "定期检查上游模型是否有变更",
     "Periodically send ping frames to keep streaming connections active.": "定期发送 ping 帧以保持流连接处于活动状态。",
     "Permanently delete your account and all data": "永久删除您的帐户和所有数据",
@@ -2652,6 +2828,14 @@
     "Preset recharge amounts displayed to users": "向用户显示的预设充值金额",
     "Preset Template": "预设模板",
     "Preset templates": "预设模板",
+    "preset.default": "默认",
+    "preset.forest-whisper": "森林低语",
+    "preset.lake-view": "湖光",
+    "preset.lavender-dream": "薰衣草梦",
+    "preset.ocean-breeze": "海风",
+    "preset.rose-garden": "玫瑰花园",
+    "preset.sunset-glow": "日落霞光",
+    "preset.underground": "暗夜",
     "Press Enter or comma to add tags": "按 Enter 或逗号添加标签",
     "Press Enter to use \"{{value}}\"": "按 Enter 使用「{{value}}」",
     "Prevent server-side request forgery attacks": "防止服务器端请求伪造攻击",
@@ -2660,7 +2844,6 @@
     "Previous": "上一步",
     "Previous branch": "上一分支",
     "Previous page": "上一页",
-    "Base Price": "基础价格",
     "Price": "价格",
     "Price ($/1K calls)": "价格（$/1K 次）",
     "Price (local currency / USD)": "价格（本地货币/美元）",
@@ -2698,10 +2881,12 @@
     "Product ID": "产品 ID",
     "Product ID is required": "产品 ID 为必填项",
     "Product Name": "产品名称",
+    "Productivity": "效率工具",
     "Products": "产品",
     "Professional team providing 24/7 technical support": "专业团队提供 24/7 技术支持",
     "Profile": "个人资料",
     "Profile updated successfully": "个人资料更新成功",
+    "Programming": "编程",
     "Progress": "进度",
     "Project": "项目",
     "Promote": "提升",
@@ -2709,9 +2894,11 @@
     "Prompt": "提示",
     "Prompt (EN)": "提示词 (英文)",
     "Prompt cache ratio": "提示缓存倍率",
+    "Prompt caching": "提示词缓存",
     "Prompt Caching": "提示词缓存",
     "Prompt Details": "提示词详情",
     "Prompt price ($/1M tokens)": "提示词价格（美元/100 万 token）",
+    "Proprietary": "商业闭源",
     "Protect login and registration with Cloudflare Turnstile": "使用 Cloudflare Turnstile 保护登录和注册",
     "Provide a JSON object where each key maps to an endpoint definition.": "提供一个 JSON 对象，其中每个键映射到一个端点定义。",
     "Provide a valid URL starting with http:// or https://": "请提供以 http:// 或 https:// 开头的有效 URL",
@@ -2720,6 +2907,7 @@
     "Provide per-category safety overrides as JSON. Use `default` for fallback values.": "以 JSON 格式提供按类别划分的安全覆盖。使用 `default` 作为回退值。",
     "Provide per-model header overrides as JSON. Useful for enabling beta features such as expanded context windows.": "以 JSON 格式提供按模型划分的标头覆盖。可用于启用测试功能，例如扩展上下文窗口。",
     "Provider": "提供商",
+    "Provider & data privacy": "厂商与数据隐私",
     "Provider created successfully": "提供商创建成功",
     "Provider deleted successfully": "提供商删除成功",
     "Provider Name": "提供商名称",
@@ -2768,11 +2956,15 @@
     "Quota Types": "配额类型",
     "Quota Warning Threshold": "配额警告阈值",
     "Quota:": "Quota:",
+    "Radius": "圆角",
     "Random": "随机",
     "Randomly select a key from the pool for each request": "每次请求从池中随机选择一个密钥",
+    "Ranking data is currently simulated for preview purposes and will be replaced with live analytics once the backend integration ships.": "当前排行榜数据为预览用模拟数据，后端集成完成后将替换为真实分析数据。",
+    "Rankings": "排行榜",
     "Rate Limit Windows": "速率限制窗口",
     "Rate Limited": "限流",
     "Rate Limiting": "速率限制",
+    "Rate limits": "速率限制",
     "Ratio": "倍率",
     "Ratio applied to audio completions for streaming models.": "应用于流式模型音频完成的比例。",
     "Ratio applied to audio inputs where supported by the upstream model.": "应用于上游模型支持的音频输入的比例。",
@@ -2795,6 +2987,8 @@
     "Reasoning Effort": "推理强度",
     "Receive Upstream Model Update Notifications": "接收上游模型更新通知",
     "Received": "获得",
+    "Recently launched models": "近期发布的模型",
+    "Recently launched models gaining traction": "近期发布并快速增长的模型",
     "Recharge": "充值",
     "Recharge Amount": "充值金额",
     "Recharge Amount (USD)": "充值金额 (USD)",
@@ -2848,6 +3042,7 @@
     "Registry username": "注册表用户名",
     "Reject Reason": "拒绝原因",
     "Release details": "版本详情",
+    "Released": "发布于",
     "Relying Party Display Name": "依赖方显示名称",
     "Relying Party ID": "依赖方 ID",
     "Remaining": "剩余",
@@ -2913,6 +3108,8 @@
     "Request rule pricing": "请求规则计费",
     "Request timed out, please refresh and restart GitHub login": "请求超时，请刷新页面后重新发起 GitHub 登录",
     "Request-based": "含请求条件",
+    "Requests (24h)": "请求数（24 小时）",
+    "Requests / 24h": "请求 / 24 小时",
     "Requests per minute": "每分钟请求数",
     "requests served": "服务请求数",
     "Requests will be forwarded to this worker. Trailing slashes are removed automatically.": "请求将被转发到此 Worker。末尾的斜杠会自动移除。",
@@ -2920,12 +3117,14 @@
     "Require email verification for new accounts": "要求新账户验证邮箱",
     "Require job success before follow-up actions": "在后续操作前要求任务成功",
     "Require login to view models": "要求登录才能查看模型",
+    "required": "必填",
     "Required": "必需",
     "Required events:": "必需事件：",
     "Required provider, authentication, model, and group settings": "必填的供应商、鉴权、模型和分组设置",
     "Required to expose Midjourney-style image generation to end users.": "需要向终端用户开放 Midjourney 风格的图像生成。",
     "Rerank": "重新排序",
     "Reroll": "重绘",
+    "Research, analysis, scientific reasoning": "研究、分析与科学推理",
     "Resend ({{seconds}}s)": "重新发送 ({{seconds}}s)",
     "Reset": "重置",
     "Reset 2FA": "重置 2FA",
@@ -2961,8 +3160,11 @@
     "Retry Times": "重试次数",
     "Return a custom error immediately": "立即返回自定义错误",
     "Return Custom Error": "返回自定义错误",
+    "Return data conforming to a JSON schema": "返回符合 JSON Schema 的数据",
     "Return Error": "返回错误",
+    "Return per-token log probabilities": "返回每个 token 的对数概率",
     "Return to dashboard": "返回仪表盘",
+    "Return vector embeddings for inputs": "为输入返回向量嵌入",
     "Reveal API key": "显示 API 密钥",
     "Reveal key": "显示密钥",
     "Revenue": "收入",
@@ -2972,8 +3174,11 @@
     "Review your purchase details before proceeding.": "在继续之前，请审阅您的购买详情。",
     "Rewards will be added directly to your balance": "奖励将直接添加到您的余额",
     "Rewrite callback URLs to the local server": "将回调 URL 重写到本地服务器",
+    "Right to Left": "从右到左",
     "Role": "角色",
+    "Roleplay": "角色扮演",
     "Root": "根",
+    "Rose Garden": "玫瑰花园",
     "Route": "路由",
     "Route Description": "路由描述",
     "Route is required": "路由为必填项",
@@ -2981,6 +3186,7 @@
     "Routing Strategy": "路由策略",
     "Rows per page": "每页行数",
     "RPM": "RPM",
+    "RPM = requests per minute, TPM = tokens per minute, RPD = requests per day. Limits apply per token group.": "RPM = 每分钟请求数，TPM = 每分钟 token 数，RPD = 每日请求数。限制按令牌分组生效。",
     "RSA Private Key (Production)": "RSA 私钥（生产）",
     "RSA Private Key (Sandbox)": "RSA 私钥（沙盒）",
     "Rule": "规则",
@@ -3004,6 +3210,7 @@
     "s": "秒",
     "Safety Settings": "安全设置",
     "Same as Local": "与本地相同",
+    "Sampling temperature; lower is more deterministic": "采样温度；越低越稳定",
     "Sandbox mode": "沙盒模式",
     "Save": "保存",
     "Save all settings": "保存所有设置",
@@ -3048,6 +3255,7 @@
     "Scenario Templates": "场景模板",
     "Scheduled channel tests": "定期渠道测试",
     "scheduling controls": "调度控制能力",
+    "Science": "科研",
     "Scope": "作用域",
     "Scopes": "作用域",
     "Search": "搜索",
@@ -3072,6 +3280,7 @@
     "Search products...": "搜索产品...",
     "Search rules...": "搜索规则…",
     "Search tags...": "搜索标签...",
+    "Search the public web at inference time": "推理时检索公开互联网",
     "Search vendors...": "搜索供应商...",
     "Search...": "搜索...",
     "seconds": "秒",
@@ -3099,7 +3308,11 @@
     "Select an operation mode and enter the amount": "选择操作模式并输入金额",
     "Select announcement type": "选择公告类型",
     "Select at least one field to overwrite.": "请选择至少一个要覆盖的字段。",
+    "Select border radius": "选择圆角大小",
     "Select channel type": "选择渠道类型",
+    "Select color preset": "选择颜色预设",
+    "Select content width": "选择内容宽度",
+    "Select corner radius": "选择圆角大小",
     "Select currency": "选择货币",
     "Select date": "选择日期",
     "Select default chart": "选择默认图表",
@@ -3109,10 +3322,11 @@
     "Select from presets or type custom identifier.": "从预设中选择或输入自定义标识符。",
     "Select granularity": "选择粒度",
     "Select groups (leave empty to keep current)": "选择分组（留空以保持当前设置）",
+    "Select interface density": "选择界面密度",
     "Select items...": "选择项目...",
     "Select key format": "请选择密钥格式",
-    "Select Language": "选择语言",
     "Select language": "选择语言",
+    "Select Language": "选择语言",
     "Select layout style": "选择布局样式",
     "Select locations": "选择位置",
     "Select Model": "选择模型",
@@ -3140,6 +3354,7 @@
     "Select the API endpoint region": "选择 API 终端节点区域",
     "Select the fields you want to overwrite with upstream data. Unselected fields keep their local values.": "选择要使用上游数据覆盖的字段。未选择的字段将保留其本地值。",
     "Select theme preference": "选择主题偏好",
+    "Select theme preset": "选择主题预设",
     "Select time granularity": "选择时间粒度",
     "Select vendor": "选择供应商",
     "Selectable groups": "可选分组",
@@ -3176,9 +3391,9 @@
     "Set quota amount and limits": "设置令牌可用额度和数量",
     "Set Request Header": "设置请求头",
     "Set runtime request header: override entire value, or manipulate comma-separated tokens": "设置运行期请求头：可直接覆盖整条值，也可对逗号分隔的 token 做处理",
-    "Set the language used across the interface": "设置界面显示语言",
     "Set Tag": "设置标签",
     "Set tag for selected channels": "为选定的渠道设置标签",
+    "Set the language used across the interface": "设置界面显示语言",
     "Set the user's role (cannot be Root)": "设置用户角色（不能是 Root）",
     "Setting saved": "设置已保存",
     "Setting up 2FA...": "正在设置 2FA...",
@@ -3188,6 +3403,7 @@
     "Settings updated successfully": "设置更新成功",
     "Setup Instructions": "设置说明",
     "Setup Two-Factor Authentication": "设置双重身份验证",
+    "Share": "占比",
     "Share your link and earn rewards": "分享您的链接并赚取奖励",
     "Shared configuration for all payment gateways": "所有支付网关的共享配置",
     "Shorten": "缩词",
@@ -3214,6 +3430,7 @@
     "Signed in via WeChat": "通过微信登录",
     "Signed in with Passkey": "使用 Passkey 登录",
     "Signed out": "已登出",
+    "Significant outages detected": "检测到较为严重的故障",
     "Signing you in with {{provider}}": "正在使用 {{provider}} 登录",
     "SiliconFlow": "SiliconFlow",
     "Simple": "简洁",
@@ -3271,6 +3488,7 @@
     "Status:": "状态：",
     "Stay": "留下来",
     "Stay tuned though!": "敬请期待！",
+    "Steer behaviour with a system instruction": "通过系统指令引导模型行为",
     "Step": "步骤",
     "Stop": "停止",
     "Stop Retry": "停止重试",
@@ -3281,6 +3499,9 @@
     "Stream": "流",
     "Stream Mode": "流式模式",
     "Stream Status": "流状态",
+    "Stream tokens incrementally as they are generated": "在生成过程中按 token 逐步流式返回",
+    "Stream tokens via Server-Sent Events": "通过 SSE 流式返回 token",
+    "Streaming": "流式输出",
     "String Replace": "字符串替换",
     "Stripe": "Stripe",
     "Stripe API key (leave blank unless updating)": "Stripe API 密钥（除非更新，否则留空）",
@@ -3288,6 +3509,7 @@
     "Stripe Gateway": "Stripe 网关",
     "Stripe product price ID": "Stripe 产品价格 ID",
     "Stripe/Creem requires creating products on the third-party platform and entering the ID": "Stripe/Creem 需在第三方平台创建商品并填入 ID",
+    "Structured output": "结构化输出",
     "Submit": "提交",
     "Submit directly": "直接提交",
     "Submit Result": "提交结果",
@@ -3315,13 +3537,17 @@
     "Suffix": "后缀",
     "Suffix Match": "后缀匹配",
     "SunoAPI": "SunoAPI",
+    "Sunset Glow": "日落霞光",
     "Super Admin": "超级管理员",
     "Support for high concurrency with automatic load balancing": "支持高并发和自动负载均衡",
     "Supported Imagine Models": "支持的 Imagine 模型",
+    "Supported modalities": "支持的模态",
+    "Supported parameters": "支持的参数",
     "Supported variables": "支持变量",
     "Supports `-thinking`, `-thinking-": "支持 `-thinking`、`-thinking-`",
     "Supports HTML markup or iframe embedding. Enter HTML code directly, or provide a complete URL to automatically embed it as an iframe.": "支持 HTML 标记或 iframe 嵌入。直接输入 HTML 代码，或提供完整的 URL 以将其自动嵌入为 iframe。",
     "Supports PNG, JPG, SVG, or WebP. Recommended size: 128×128 or smaller.": "支持 PNG、JPG、SVG 或 WebP，建议尺寸不超过 128×128。",
+    "Sustained tokens per second": "持续每秒 Token 数",
     "Swap Face": "换脸",
     "Switch affinity on success": "成功后切换亲和",
     "Switch between the new frontend and the classic frontend. Changes take effect after page reload.": "切换新版前端和经典前端，保存后刷新页面生效。",
@@ -3341,6 +3567,7 @@
     "System Announcements": "系统公告",
     "System Behavior": "系统行为",
     "System data statistics": "系统数据统计",
+    "System default": "系统默认",
     "System Information": "系统信息",
     "System initialized successfully! Redirecting…": "系统初始化成功！正在重定向…",
     "System logo": "系统徽标",
@@ -3351,6 +3578,7 @@
     "System name is required": "系统名称为必填项",
     "System Notice": "系统公告",
     "System Performance Monitoring": "系统性能监控",
+    "System prompt": "系统提示词",
     "System Prompt": "系统提示词",
     "System Prompt Concatenation": "系统提示词连接",
     "System Prompt Override": "系统提示覆盖",
@@ -3402,7 +3630,11 @@
     "Test Model": "测试模型",
     "Testing all enabled channels started. Please refresh to see results.": "测试所有启用的通道已开始。请刷新以查看结果。",
     "Testing...": "测试中...",
+    "Text": "文本",
+    "Text description of the desired image": "想要生成图像的文字描述",
+    "Text description of the desired video": "想要生成视频的文字描述",
     "Text Input": "文字输入",
+    "Text or array of texts to embed": "需要向量化的文本或文本数组",
     "Text Output": "文字输出",
     "Text to Video": "文生视频",
     "The administrator account is already initialized. You can keep your existing credentials and continue to the next step.": "管理员账户已初始化。您可以保留现有凭据并继续下一步。",
@@ -3429,6 +3661,7 @@
     "The unique name for this vendor": "此供应商的唯一名称",
     "The URL for this chat client.": "此聊天客户端的 URL。",
     "Theme": "主题",
+    "Theme preset": "主题预设",
     "Theme Settings": "主题设置",
     "There are both add and remove models pending, but you only selected one type. Confirm submitting only the selected items?": "当前有新增和删除两类待处理模型，但您只勾选了其中一类。确认仅提交已勾选的部分吗？",
     "These models are still in your selection but were not returned by the upstream listing. Entries that are only model_mapping source aliases are omitted. Toggle to adjust before saving.": "这些模型仍然在您的勾选列表中，但上游已不再返回该名称；仅作为 model_mapping 来源键而不会出现在 upstream 列表的别名已从本视图排除，请在保存前调整勾选。",
@@ -3472,7 +3705,11 @@
     "This will permanently delete user": "这将永久删除用户",
     "This will permanently remove all log entries created before {{date}}.": "这将永久删除 {{date}} 之前创建的所有日志条目。",
     "This will permanently remove log entries before the selected timestamp.": "这将永久删除所选时间戳之前的日志条目。",
+    "This year": "本年",
     "Three steps to get started": "三步快速上手",
+    "Throughput": "吞吐量",
+    "Throughput by group": "各分组吞吐量",
+    "Throughput trend": "吞吐量趋势",
     "Tier": "档位",
     "Tier name": "档位名称",
     "Tiered": "阶梯",
@@ -3514,21 +3751,41 @@
     "Token Name": "令牌名称",
     "Token obtained from your Gotify application": "从您的 Gotify 应用程序获取的 Token",
     "Token regenerated and copied to clipboard": "令牌已重新生成并复制到剪贴板",
+    "Token share by model author across the last 24 hours": "过去 24 小时内各厂商的 Token 占比",
+    "Token share by model author across the past few weeks": "最近几周内各厂商的 Token 占比",
+    "Token share by model author across the past month": "过去一个月内各厂商的 Token 占比",
+    "Token share by model author across the past year": "过去一年内各厂商的 Token 占比",
+    "Token share by model author since launch": "自上线以来各厂商的 Token 占比",
     "Token unit": "Token 单位",
+    "Token usage by model since launch": "自上线以来各模型的 Token 用量",
     "Token-based": "按量计费",
+    "Tokenizer": "分词器",
     "tokens": "令牌",
     "Tokens": "令牌",
+    "tokens / mo": "token / 月",
+    "Tokens by category": "分类 Token 占比",
     "Tokens Only": "仅限 Token",
     "Tokens per minute": "每分钟 Token 数",
+    "Tokens since launch": "发布以来累计 Token",
     "Tokens-only mode will show raw quota values regardless of this toggle.": "Tokens-only 模式将无视此开关显示原始配额值。",
     "Too many files. Some were not added.": "文件过多。部分未添加。",
+    "Tool / function declarations the model may call": "模型可调用的工具 / 函数声明",
     "Tool identifier": "工具标识",
     "Tool price settings": "工具价格设置",
     "Tool prices": "工具价格",
+    "Tool-choice policy or specific tool name": "工具选择策略或具体工具名",
+    "Tools": "工具",
     "Top {{count}}": "前 {{count}}",
+    "Top app": "领头应用",
+    "Top apps": "热门应用",
+    "Top Apps": "热门应用",
+    "Top integrations using this model": "使用此模型的主要集成",
+    "Top model": "领头模型",
+    "Top models": "热门模型",
     "Top Models": "热门模型",
     "Top up balance and view billing history.": "充值余额并查看账单历史。",
     "Top Users": "热门用户",
+    "Top vendors": "热门厂商",
     "Top-up": "充值",
     "Top-up amount options": "充值金额选项",
     "Top-up Audit Info": "充值审计信息",
@@ -3552,13 +3809,16 @@
     "Total Quota": "总额度",
     "Total requests allowed per period. 0 = unlimited.": "每周期允许的总请求数。0 = 无限制。",
     "Total requests made": "总请求数",
+    "Total tokens": "总 Token",
     "Total Tokens": "总 Token 数",
     "Total Usage": "总用量",
     "Total:": "总计：",
     "TPM": "TPM",
     "Track per-request consumption to power usage analytics. Keeping this on increases database writes.": "跟踪每个请求的消耗，以支持使用情况分析。保持开启会增加数据库写入。",
     "Track usage, costs and performance with real-time analytics": "通过实时分析跟踪用量、成本和性能",
+    "Tracked apps": "已跟踪的应用",
     "Tracks current account base limits and additional metered usage on Codex upstream.": "跟踪当前账号在 Codex 上游的基础限额与附加计费用量。",
+    "Trading insights, accounting, advisory": "交易洞察、记账与财务建议",
     "Transfer": "转移",
     "Transfer Amount": "转移金额",
     "Transfer failed": "转账失败",
@@ -3566,18 +3826,28 @@
     "Transfer successful": "转账成功",
     "Transfer to Balance": "转移到余额",
     "Translate `-thinking` suffixes into Anthropic native thinking models while keeping pricing predictable.": "将 `-thinking` 后缀转换为 Anthropic 原生思维模型，同时保持价格可预测性。",
+    "Translation": "翻译",
     "Transparent Billing": "透明计费",
+    "Trend": "趋势",
+    "Trending down": "下降趋势",
+    "Trending up": "上升趋势",
     "Trim leading/trailing whitespace": "去掉字符串头尾空白",
     "Trim Prefix": "裁剪前缀",
     "Trim Space": "去掉空白",
     "Trim Suffix": "裁剪后缀",
+    "Truncate embeddings to this many dimensions": "将向量截断到指定维度",
     "Trusted": "受信任",
     "Try adjusting your search to locate a missing model.": "尝试调整您的搜索以找到缺失的模型。",
+    "TTFT P50": "TTFT P50",
+    "TTFT P95": "TTFT P95",
+    "TTFT P99": "TTFT P99",
+    "TTFT percentiles, throughput, and 30-day uptime by group": "各分组的 TTFT 分位数、吞吐量与 30 天可用率",
     "TTL": "TTL",
     "TTL (seconds, 0 = default)": "TTL（秒，0 表示默认）",
     "TTL (seconds)": "TTL（秒）",
     "Tune selection priority, testing, status handling, and request overrides.": "调整选择优先级、测试、状态处理和请求覆盖。",
     "Turnstile is enabled but site key is empty.": "Turnstile 已启用但站点密钥为空。",
+    "Tutoring, learning aids, assessment": "辅导、学习辅助与测评",
     "Two-factor Authentication": "双重身份验证",
     "Two-Factor Authentication": "两步验证",
     "Two-factor authentication disabled": "两因素认证已禁用",
@@ -3602,6 +3872,8 @@
     "Unbind": "解绑",
     "Unbind failed": "解绑失败",
     "Unbound {{provider}}": "已解绑 {{provider}}",
+    "Underground": "暗夜",
+    "Understand image inputs alongside text": "在文本之外理解图像输入",
     "Unexpected release payload": "意外的版本数据格式",
     "Unified API Gateway for": "统一 API 网关，服务于",
     "Unique identifier for this group.": "此组的唯一标识符。",
@@ -3618,6 +3890,7 @@
     "Untitled": "未命名",
     "Untrusted upstream data:": "不受信任的上游数据：",
     "Unused": "未使用",
+    "Up to 4 strings that stop generation": "最多 4 个停止生成的字符串",
     "Update": "更新",
     "Update All Balances": "更新所有余额",
     "Update API Key": "更新 API 密钥",
@@ -3642,6 +3915,7 @@
     "Update your password for account:": "更新账户密码：",
     "Update your password to keep your account secure": "更新您的密码以确保账户安全",
     "Updated": "更新时间",
+    "Updated daily": "每日更新",
     "Updated successfully": "更新成功",
     "Updating all channel balances. This may take a while. Please refresh to see results.": "正在更新所有渠道余额。这可能需要一段时间。请刷新以查看结果。",
     "Upgrade Group": "升级分组",
@@ -3666,6 +3940,8 @@
     "Upstream Updates": "上游更新",
     "uptime": "正常运行时间",
     "Uptime": "运行时间",
+    "Uptime (30d)": "可用率 (30 天)",
+    "Uptime (last 30 days)": "可用率（最近 30 天）",
     "Uptime Kuma": "Uptime Kuma",
     "Uptime Kuma groups saved successfully": "Uptime Kuma 组保存成功",
     "Uptime Kuma URL": "Uptime Kuma URL",
@@ -3684,6 +3960,7 @@
     "Use authenticator code": "使用验证器代码",
     "Use backup code": "使用备用代码",
     "Use disk cache when request body exceeds this size": "请求体超过此大小时使用磁盘缓存",
+    "Use external tools to extend capabilities": "通过外部工具扩展能力",
     "Use our unified OpenAI-compatible endpoint in your applications": "在应用中使用我们兼容 OpenAI 的统一接口",
     "Use Passkey to sign in without entering your password.": "使用通行密钥登录，无需输入密码。",
     "Use secure connection when sending emails": "发送电子邮件时使用安全连接",
@@ -3749,6 +4026,7 @@
     "Vendor deleted successfully": "供应商删除成功",
     "Vendor Name *": "供应商名称 *",
     "Vendor:": "供应商：",
+    "Vendors ranked by aggregated token volume": "厂商按聚合 Token 用量排序",
     "Verification code": "验证码",
     "Verification Code": "验证码",
     "Verification code must be 6 digits": "验证码必须是 6 位数字",
@@ -3767,6 +4045,7 @@
     "Vertex AI does not support functionResponse.id. Enable this to remove the field automatically.": "Vertex AI 不支持 functionResponse.id 字段，开启后将自动移除该字段",
     "Vertex AI Key Format": "Vertex AI 密钥格式",
     "Video": "视频",
+    "Video length in seconds": "视频时长（秒）",
     "Video Remix": "视频 Remix",
     "Vidu": "Vidu",
     "View": "查看",
@@ -3796,6 +4075,8 @@
     "Violation Marker": "违规标记",
     "vip": "vip",
     "VIP users with premium access": "拥有高级访问权限的 VIP 用户",
+    "Vision": "视觉",
+    "Vision, image / video, document chat": "视觉理解、图像 / 视频、文档对话",
     "Visit Settings → General and adjust quota options...": "访问设置 → 通用并调整配额选项...",
     "Visitors must authenticate before accessing the pricing directory.": "访客必须先进行身份验证才能访问定价目录。",
     "Visual": "可视",
@@ -3806,6 +4087,7 @@
     "Visual Mode": "可视模式",
     "Visual Parameter Override": "可视化参数覆盖",
     "VolcEngine": "字节火山方舟、豆包通用",
+    "vs. previous": "相较上期",
     "Waffo Pancake Payment Gateway": "Waffo Pancake 支付网关",
     "Waffo Payment": "Waffo 支付",
     "Waffo Payment Gateway": "Waffo 支付网关",
@@ -3826,6 +4108,7 @@
     "We could not load the setup status.": "我们无法加载设置状态。",
     "We will prompt your device to confirm using biometrics or your hardware key.": "我们将提示您的设备使用生物识别或硬件密钥进行确认。",
     "We'll be back online shortly.": "我们将很快恢复在线。",
+    "Web search": "网络搜索",
     "Web Search": "网页搜索",
     "Webhook Configuration:": "Webhook 配置：",
     "Webhook public key (production)": "Webhook 公钥（生产）",
@@ -3842,9 +4125,12 @@
     "WeChat login QR code": "微信登录二维码",
     "WeChat QR code will be displayed here": "微信二维码将显示在此处",
     "WeChat sign in": "微信登录",
-    "Week": "周",
+    "Week": "本周",
     "Weekday": "星期",
     "Weekly": "每周",
+    "Weekly token usage by model across the past few weeks": "最近几周内各模型的每周 Token 用量",
+    "Weekly token usage by model across the past year": "过去一年内按模型分布的每周 Token 使用量",
+    "Weekly token usage by model since launch": "自上线以来按模型分布的每周 Token 使用量",
     "Weekly Window": "每周窗口",
     "Weight": "权重",
     "Welcome back!": "欢迎回来！",
@@ -3869,7 +4155,9 @@
     "Whitelist (Only allow listed IPs)": "白名单（仅允许列出的 IP）",
     "whsec_xxx": "whsec_xxx",
     "Window:": "窗口：",
+    "Wire encoding for the embedding vectors": "向量传输的编码格式",
     "with conflicts": "有冲突",
+    "with the API key from your token settings.": "替换为令牌设置中的 API Key。",
     "Without additional conditions, only the type above is used for pruning.": "未添加附加条件时，仅使用上方 type 进行清理。",
     "Worker Access Key": "Worker 访问密钥",
     "Worker Proxy": "Worker 代理",
@@ -3880,6 +4168,7 @@
     "xAI": "xAI",
     "Xinference": "Xinference",
     "Xunfei": "讯飞",
+    "Year": "今年",
     "years": "年",
     "You are about to delete {{count}} API key(s).": "您即将删除 {{count}} 个 API 密钥。",
     "You are running the latest version ({{version}}).": "您正在运行最新版本 ({{version}})。",
@@ -3907,6 +4196,7 @@
     "Your Telegram Bot Token": "您的 Telegram 机器人令牌",
     "Your Turnstile secret key": "您的 Turnstile 密钥",
     "Your Turnstile site key": "您的 Turnstile 站点密钥",
+    "Zero retention": "零数据保留",
     "Zhipu": "智谱",
     "Zhipu V4": "智谱 V4",
     "Zoom": "缩放"
diff --git a/web/default/src/features/usage-logs/lib/avatar-color.ts b/web/default/src/lib/avatar.ts
similarity index 58%
rename from web/default/src/features/usage-logs/lib/avatar-color.ts
rename to web/default/src/lib/avatar.ts
index 8b6d2e71015..0cacf01049c 100644
--- a/web/default/src/features/usage-logs/lib/avatar-color.ts
+++ b/web/default/src/lib/avatar.ts
@@ -1,7 +1,6 @@
-export interface LogAvatarStyle {
-  backgroundColor: string
-  color: string
-}
+import type { CSSProperties } from 'react'
+
+export type UserAvatarStyle = Pick<CSSProperties, 'backgroundColor' | 'color'>
 
 function hashString(value: string): number {
   let hash = 0
@@ -11,7 +10,7 @@ function hashString(value: string): number {
   return hash
 }
 
-export function getLogAvatarStyle(name: string): LogAvatarStyle {
+export function getUserAvatarStyle(name: string): UserAvatarStyle {
   const hash = hashString(name)
   const hue = hash % 360
   const saturation = 54 + (hash % 8)
@@ -22,3 +21,7 @@ export function getLogAvatarStyle(name: string): LogAvatarStyle {
     color: 'white',
   }
 }
+
+export function getUserAvatarFallback(name: string): string {
+  return name.trim().charAt(0).toUpperCase() || '?'
+}
diff --git a/web/default/src/lib/colors.ts b/web/default/src/lib/colors.ts
index 9be26f0f154..ef5f231a858 100644
--- a/web/default/src/lib/colors.ts
+++ b/web/default/src/lib/colors.ts
@@ -39,18 +39,24 @@ export const avatarColorMap: Record<SemanticColor, string> = {
   blue: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400',
   green: 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400',
   cyan: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-500/20 dark:text-cyan-400',
-  purple: 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-400',
+  purple:
+    'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-400',
   pink: 'bg-pink-100 text-pink-700 dark:bg-pink-500/20 dark:text-pink-400',
   red: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400',
-  orange: 'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400',
+  orange:
+    'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400',
   amber: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400',
-  yellow: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-500/20 dark:text-yellow-400',
+  yellow:
+    'bg-yellow-100 text-yellow-700 dark:bg-yellow-500/20 dark:text-yellow-400',
   lime: 'bg-lime-100 text-lime-700 dark:bg-lime-500/20 dark:text-lime-400',
-  'light-green': 'bg-green-50 text-green-600 dark:bg-green-400/20 dark:text-green-300',
+  'light-green':
+    'bg-green-50 text-green-600 dark:bg-green-400/20 dark:text-green-300',
   teal: 'bg-teal-100 text-teal-700 dark:bg-teal-500/20 dark:text-teal-400',
   'light-blue': 'bg-sky-100 text-sky-700 dark:bg-sky-500/20 dark:text-sky-400',
-  indigo: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-400',
-  violet: 'bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-400',
+  indigo:
+    'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-400',
+  violet:
+    'bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-400',
   grey: 'bg-gray-100 text-gray-700 dark:bg-gray-500/20 dark:text-gray-400',
 }
 
diff --git a/web/default/src/lib/theme-customization.ts b/web/default/src/lib/theme-customization.ts
new file mode 100644
index 00000000000..41bb092c8da
--- /dev/null
+++ b/web/default/src/lib/theme-customization.ts
@@ -0,0 +1,99 @@
+/**
+ * Theme customization constants and types.
+ *
+ * Lives in `lib/` (not `context/`) so it can be imported alongside the
+ * provider without breaking React Fast Refresh boundaries.
+ */
+
+export const THEME_PRESETS = [
+  {
+    value: 'default',
+    name: 'Default',
+    swatches: ['oklch(0.13 0 0)', 'oklch(0.95 0 0)'],
+  },
+  {
+    value: 'underground',
+    name: 'Underground',
+    swatches: ['oklch(0.5315 0.0694 156.19)', 'oklch(0.5748 0.0862 336.52)'],
+  },
+  {
+    value: 'rose-garden',
+    name: 'Rose Garden',
+    swatches: ['oklch(0.5827 0.2418 12.23)', 'oklch(0.8131 0.1129 5.67)'],
+  },
+  {
+    value: 'lake-view',
+    name: 'Lake View',
+    swatches: ['oklch(0.765 0.177 163.22)', 'oklch(0.551 0.0899 200.52)'],
+  },
+  {
+    value: 'sunset-glow',
+    name: 'Sunset Glow',
+    swatches: ['oklch(0.5591 0.1882 25.33)', 'oklch(0.7938 0.1248 42.42)'],
+  },
+  {
+    value: 'forest-whisper',
+    name: 'Forest Whisper',
+    swatches: ['oklch(0.5276 0.1072 182.22)', 'oklch(0.5236 0.0505 250.18)'],
+  },
+  {
+    value: 'ocean-breeze',
+    name: 'Ocean Breeze',
+    swatches: ['oklch(0.5461 0.2152 262.88)', 'oklch(0.5854 0.2041 277.12)'],
+  },
+  {
+    value: 'lavender-dream',
+    name: 'Lavender Dream',
+    swatches: ['oklch(0.5709 0.1808 306.89)', 'oklch(0.811 0.0589 201.14)'],
+  },
+] as const
+
+export type ThemePreset = (typeof THEME_PRESETS)[number]['value']
+export type ThemeRadius = 'default' | 'none' | 'sm' | 'md' | 'lg' | 'xl'
+export type ThemeScale = 'default' | 'sm' | 'lg'
+export type ContentLayout = 'full' | 'centered'
+
+export type ThemeCustomization = {
+  preset: ThemePreset
+  radius: ThemeRadius
+  scale: ThemeScale
+  contentLayout: ContentLayout
+}
+
+export const DEFAULT_THEME_CUSTOMIZATION: ThemeCustomization = {
+  preset: 'default',
+  radius: 'default',
+  scale: 'default',
+  contentLayout: 'full',
+}
+
+export const THEME_PRESET_VALUES = new Set(
+  THEME_PRESETS.map((p) => p.value)
+) as ReadonlySet<ThemePreset>
+
+export const THEME_RADIUS_VALUES: ReadonlySet<ThemeRadius> = new Set([
+  'default',
+  'none',
+  'sm',
+  'md',
+  'lg',
+  'xl',
+])
+
+export const THEME_SCALE_VALUES: ReadonlySet<ThemeScale> = new Set([
+  'default',
+  'sm',
+  'lg',
+])
+
+export const CONTENT_LAYOUT_VALUES: ReadonlySet<ContentLayout> = new Set([
+  'full',
+  'centered',
+])
+
+export const THEME_COOKIE_KEYS = {
+  preset: 'theme_preset',
+  radius: 'theme_radius',
+  scale: 'theme_scale',
+  contentLayout: 'theme_content_layout',
+} as const
diff --git a/web/default/src/lib/use-chart-theme.ts b/web/default/src/lib/use-chart-theme.ts
new file mode 100644
index 00000000000..140a017b050
--- /dev/null
+++ b/web/default/src/lib/use-chart-theme.ts
@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from 'react'
+import { useTheme } from '@/context/theme-provider'
+
+/**
+ * Lazy-load VChart's `ThemeManager` and switch its theme to follow the
+ * resolved app theme (light / dark). Returns flags consumers can use to
+ * defer chart rendering until the theme is ready.
+ */
+let themeManagerPromise: Promise<
+  (typeof import('@visactor/vchart'))['ThemeManager']
+> | null = null
+
+export function useChartTheme() {
+  const { resolvedTheme } = useTheme()
+  const [themeReady, setThemeReady] = useState(false)
+  const themeRef = useRef<
+    (typeof import('@visactor/vchart'))['ThemeManager'] | null
+  >(null)
+
+  useEffect(() => {
+    let cancelled = false
+    const updateTheme = async () => {
+      setThemeReady(false)
+      if (!themeManagerPromise) {
+        themeManagerPromise = import('@visactor/vchart').then(
+          (m) => m.ThemeManager
+        )
+      }
+      const ThemeManager = await themeManagerPromise
+      if (cancelled) return
+      themeRef.current = ThemeManager
+      ThemeManager.setCurrentTheme(resolvedTheme === 'dark' ? 'dark' : 'light')
+      setThemeReady(true)
+    }
+    updateTheme()
+    return () => {
+      cancelled = true
+    }
+  }, [resolvedTheme])
+
+  return { resolvedTheme, themeReady }
+}
diff --git a/web/default/src/lib/use-controllable-state.ts b/web/default/src/lib/use-controllable-state.ts
new file mode 100644
index 00000000000..b542c9e3e52
--- /dev/null
+++ b/web/default/src/lib/use-controllable-state.ts
@@ -0,0 +1,68 @@
+import * as React from 'react'
+
+/**
+ * Local helper for components that can be either controlled or uncontrolled.
+ *
+ * Mirrors the original signature: pass either a controlled `prop` (with
+ * optional `onChange` callback) or an uncontrolled `defaultProp`. Returns a
+ * `[value, setValue]` tuple where `setValue` accepts either a new value or
+ * an updater function, just like `useState`.
+ *
+ * The return tuple's value type is non-`undefined` whenever `defaultProp`
+ * is provided, keeping existing call sites well-typed.
+ */
+type SetStateFn<T> = (prevState?: T) => T
+
+type Setter<T> = (next: T | undefined | SetStateFn<T | undefined>) => void
+
+export function useControllableState<T>(params: {
+  prop?: T | undefined
+  defaultProp: T
+  onChange?: (state: T) => void
+}): [T, Setter<T>]
+export function useControllableState<T>(params: {
+  prop?: T | undefined
+  defaultProp?: T | undefined
+  onChange?: (state: T) => void
+}): [T | undefined, Setter<T>]
+export function useControllableState<T>({
+  prop,
+  defaultProp,
+  onChange,
+}: {
+  prop?: T | undefined
+  defaultProp?: T | undefined
+  onChange?: (state: T) => void
+}): [T | undefined, Setter<T>] {
+  const [uncontrolledProp, setUncontrolledProp] = React.useState<T | undefined>(
+    defaultProp
+  )
+  const isControlled = prop !== undefined
+  const value = isControlled ? prop : uncontrolledProp
+  const handleChangeRef = React.useRef(onChange)
+
+  React.useEffect(() => {
+    handleChangeRef.current = onChange
+  })
+
+  const setValue = React.useCallback<Setter<T>>(
+    (next) => {
+      if (isControlled) {
+        const nextValue =
+          typeof next === 'function'
+            ? (next as SetStateFn<T | undefined>)(prop)
+            : next
+        if (nextValue !== prop) {
+          handleChangeRef.current?.(nextValue as T)
+        }
+      } else {
+        setUncontrolledProp(
+          next as T | undefined | ((prev: T | undefined) => T | undefined)
+        )
+      }
+    },
+    [isControlled, prop]
+  )
+
+  return [value, setValue]
+}
diff --git a/web/default/src/routeTree.gen.ts b/web/default/src/routeTree.gen.ts
index fd78de1527c..c1c7a97a0be 100644
--- a/web/default/src/routeTree.gen.ts
+++ b/web/default/src/routeTree.gen.ts
@@ -15,6 +15,7 @@ import { Route as AuthenticatedRouteRouteImport } from './routes/_authenticated/
 import { Route as authRouteRouteImport } from './routes/(auth)/route'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as SetupIndexRouteImport } from './routes/setup/index'
+import { Route as RankingsIndexRouteImport } from './routes/rankings/index'
 import { Route as PricingIndexRouteImport } from './routes/pricing/index'
 import { Route as AboutIndexRouteImport } from './routes/about/index'
 import { Route as OauthProviderRouteImport } from './routes/oauth/$provider'
@@ -93,6 +94,11 @@ const SetupIndexRoute = SetupIndexRouteImport.update({
   path: '/setup/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const RankingsIndexRoute = RankingsIndexRouteImport.update({
+  id: '/rankings/',
+  path: '/rankings/',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const PricingIndexRoute = PricingIndexRouteImport.update({
   id: '/pricing/',
   path: '/pricing/',
@@ -388,6 +394,7 @@ export interface FileRoutesByFullPath {
   '/oauth/$provider': typeof OauthProviderRoute
   '/about/': typeof AboutIndexRoute
   '/pricing/': typeof PricingIndexRoute
+  '/rankings/': typeof RankingsIndexRoute
   '/setup/': typeof SetupIndexRoute
   '/user/reset': typeof authUserResetRoute
   '/chat/$chatId': typeof AuthenticatedChatChatIdRoute
@@ -442,6 +449,7 @@ export interface FileRoutesByTo {
   '/oauth/$provider': typeof OauthProviderRoute
   '/about': typeof AboutIndexRoute
   '/pricing': typeof PricingIndexRoute
+  '/rankings': typeof RankingsIndexRoute
   '/setup': typeof SetupIndexRoute
   '/user/reset': typeof authUserResetRoute
   '/chat/$chatId': typeof AuthenticatedChatChatIdRoute
@@ -500,6 +508,7 @@ export interface FileRoutesById {
   '/oauth/$provider': typeof OauthProviderRoute
   '/about/': typeof AboutIndexRoute
   '/pricing/': typeof PricingIndexRoute
+  '/rankings/': typeof RankingsIndexRoute
   '/setup/': typeof SetupIndexRoute
   '/(auth)/user/reset': typeof authUserResetRoute
   '/_authenticated/chat/$chatId': typeof AuthenticatedChatChatIdRoute
@@ -557,6 +566,7 @@ export interface FileRouteTypes {
     | '/oauth/$provider'
     | '/about/'
     | '/pricing/'
+    | '/rankings/'
     | '/setup/'
     | '/user/reset'
     | '/chat/$chatId'
@@ -611,6 +621,7 @@ export interface FileRouteTypes {
     | '/oauth/$provider'
     | '/about'
     | '/pricing'
+    | '/rankings'
     | '/setup'
     | '/user/reset'
     | '/chat/$chatId'
@@ -668,6 +679,7 @@ export interface FileRouteTypes {
     | '/oauth/$provider'
     | '/about/'
     | '/pricing/'
+    | '/rankings/'
     | '/setup/'
     | '/(auth)/user/reset'
     | '/_authenticated/chat/$chatId'
@@ -718,6 +730,7 @@ export interface RootRouteChildren {
   OauthProviderRoute: typeof OauthProviderRoute
   AboutIndexRoute: typeof AboutIndexRoute
   PricingIndexRoute: typeof PricingIndexRoute
+  RankingsIndexRoute: typeof RankingsIndexRoute
   SetupIndexRoute: typeof SetupIndexRoute
   PricingModelIdIndexRoute: typeof PricingModelIdIndexRoute
 }
@@ -766,6 +779,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SetupIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/rankings/': {
+      id: '/rankings/'
+      path: '/rankings'
+      fullPath: '/rankings/'
+      preLoaderRoute: typeof RankingsIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/pricing/': {
       id: '/pricing/'
       path: '/pricing'
@@ -1254,6 +1274,7 @@ const rootRouteChildren: RootRouteChildren = {
   OauthProviderRoute: OauthProviderRoute,
   AboutIndexRoute: AboutIndexRoute,
   PricingIndexRoute: PricingIndexRoute,
+  RankingsIndexRoute: RankingsIndexRoute,
   SetupIndexRoute: SetupIndexRoute,
   PricingModelIdIndexRoute: PricingModelIdIndexRoute,
 }
diff --git a/web/default/src/routes/__root.tsx b/web/default/src/routes/__root.tsx
index 1574b94c436..8911baa3f65 100644
--- a/web/default/src/routes/__root.tsx
+++ b/web/default/src/routes/__root.tsx
@@ -6,6 +6,7 @@ import {
 } from '@tanstack/react-router'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { ThemeCustomizationProvider } from '@/context/theme-customization-provider'
 import { useSystemConfig } from '@/hooks/use-system-config'
 import { Toaster } from '@/components/ui/sonner'
 import { NavigationProgress } from '@/components/navigation-progress'
@@ -18,7 +19,7 @@ function RootComponent() {
   useSystemConfig({ autoLoad: true })
 
   return (
-    <>
+    <ThemeCustomizationProvider>
       <NavigationProgress />
       <Outlet />
       <Toaster duration={5000} />
@@ -28,7 +29,7 @@ function RootComponent() {
           <TanStackRouterDevtools position='bottom-right' />
         </>
       )}
-    </>
+    </ThemeCustomizationProvider>
   )
 }
 
diff --git a/web/default/src/routes/_authenticated/chat/$chatId.tsx b/web/default/src/routes/_authenticated/chat/$chatId.tsx
index f9adb335ab9..12acb659843 100644
--- a/web/default/src/routes/_authenticated/chat/$chatId.tsx
+++ b/web/default/src/routes/_authenticated/chat/$chatId.tsx
@@ -87,8 +87,8 @@ function ChatRouteComponent() {
             {t('The requested chat preset does not exist or has been removed.')}
           </p>
         </div>
-        <Button variant='outline' asChild>
-          <Link to='/dashboard'>{t('Return to dashboard')}</Link>
+        <Button variant='outline' render={<Link to='/dashboard' />}>
+          {t('Return to dashboard')}
         </Button>
       </div>
     )
@@ -107,8 +107,8 @@ function ChatRouteComponent() {
             )}
           </p>
         </div>
-        <Button variant='outline' asChild>
-          <Link to='/dashboard'>{t('Return to dashboard')}</Link>
+        <Button variant='outline' render={<Link to='/dashboard' />}>
+          {t('Return to dashboard')}
         </Button>
       </div>
     )
diff --git a/web/default/src/routes/_authenticated/playground/index.tsx b/web/default/src/routes/_authenticated/playground/index.tsx
index 00d07800d04..aee39d16bc2 100644
--- a/web/default/src/routes/_authenticated/playground/index.tsx
+++ b/web/default/src/routes/_authenticated/playground/index.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { AppHeader, Main } from '@/components/layout'
+import { Main } from '@/components/layout'
 import { Playground } from '@/features/playground'
 
 export const Route = createFileRoute('/_authenticated/playground/')({
@@ -8,11 +8,8 @@ export const Route = createFileRoute('/_authenticated/playground/')({
 
 function PlaygroundPage() {
   return (
-    <>
-      <AppHeader />
-      <Main className='p-0'>
-        <Playground />
-      </Main>
-    </>
+    <Main className='p-0'>
+      <Playground />
+    </Main>
   )
 }
diff --git a/web/default/src/routes/rankings/index.tsx b/web/default/src/routes/rankings/index.tsx
new file mode 100644
index 00000000000..f0a7112e0e2
--- /dev/null
+++ b/web/default/src/routes/rankings/index.tsx
@@ -0,0 +1,15 @@
+import z from 'zod'
+import { createFileRoute } from '@tanstack/react-router'
+import { Rankings } from '@/features/rankings'
+
+const rankingsSearchSchema = z.object({
+  period: z
+    .enum(['today', 'week', 'month', 'year', 'all'])
+    .optional()
+    .catch(undefined),
+})
+
+export const Route = createFileRoute('/rankings/')({
+  validateSearch: rankingsSearchSchema,
+  component: Rankings,
+})
diff --git a/web/default/src/styles/index.css b/web/default/src/styles/index.css
index 1d9f20665ac..5040724b429 100644
--- a/web/default/src/styles/index.css
+++ b/web/default/src/styles/index.css
@@ -4,6 +4,7 @@
 @import '@fontsource-variable/public-sans';
 
 @import './theme.css';
+@import './theme-presets.css';
 
 /* Shiki dual themes: token colors follow dark theme (pre background stays `bg-background` on the block) */
 @layer components {
@@ -28,7 +29,7 @@
     @apply bg-background text-foreground has-[div[data-variant='inset']]:bg-sidebar min-h-svh w-full font-sans;
   }
 
-  /* Override Radix scroll locking for sticky headers */
+  /* Keep sticky headers stable while primitives lock body scrolling. */
   body[data-scroll-locked] {
     overflow: unset !important;
   }
@@ -158,10 +159,10 @@
   overflow: hidden;
 }
 @media (prefers-reduced-motion: no-preference) {
-  .CollapsibleContent[data-state='open'] {
+  .CollapsibleContent[data-open] {
     animation: slideDown 300ms ease-out;
   }
-  .CollapsibleContent[data-state='closed'] {
+  .CollapsibleContent:not([data-open]) {
     animation: slideUp 300ms ease-out;
   }
 }
@@ -171,13 +172,13 @@
     height: 0;
   }
   to {
-    height: var(--radix-collapsible-content-height);
+    height: var(--collapsible-panel-height);
   }
 }
 
 @keyframes slideUp {
   from {
-    height: var(--radix-collapsible-content-height);
+    height: var(--collapsible-panel-height);
   }
   to {
     height: 0;
diff --git a/web/default/src/styles/theme-presets.css b/web/default/src/styles/theme-presets.css
new file mode 100644
index 00000000000..6221fdfd91c
--- /dev/null
+++ b/web/default/src/styles/theme-presets.css
@@ -0,0 +1,327 @@
+/*
+ * Theme presets — color palettes, border radius, and density scaling.
+ *
+ * Usage: applied via data attributes on <body>:
+ *   <body data-theme-preset="rose-garden" data-theme-radius="lg" data-theme-scale="sm" />
+ *
+ * - `data-theme-preset` overrides the color palette defined in ./theme.css and
+ *   ships a curated default `--radius` value to match the preset's mood
+ *   (e.g. rose-garden uses 1rem, ocean-breeze uses 0.3rem).
+ * - Each preset declares both light and dark color values; dark values use
+ *   the `.dark` ancestor selector so they apply when html has the `.dark` class.
+ * - `data-theme-radius` and `data-theme-scale` adjust visual density
+ *   independently. The radius block is intentionally placed AFTER the preset
+ *   blocks so an explicit user choice overrides the preset's default radius.
+ */
+
+/* ── Underground ──────────────────────────────────────────────────────── */
+[data-theme-preset='underground'] {
+  --primary: oklch(0.5315 0.0694 156.19);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.5748 0.0862 336.52);
+  --secondary-foreground: oklch(1 0 0);
+  --ring: oklch(0.5315 0.0694 156.19);
+  --chart-1: oklch(0.5315 0.0694 156.19);
+  --chart-2: oklch(0.5748 0.0862 336.52);
+  --chart-3: oklch(0.8603 0.0731 158.6);
+  --chart-4: oklch(0.8292 0.0422 332);
+  --chart-5: oklch(0.9564 0.0234 159.23);
+  --sidebar-primary: oklch(0.5315 0.0694 156.19);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.9687 0.0051 247.88);
+  --sidebar-accent-foreground: oklch(0.279 0.0299 260.05);
+  --sidebar-ring: oklch(0.5315 0.0694 156.19);
+  --radius: 0.5rem;
+}
+.dark [data-theme-preset='underground'] {
+  --primary: oklch(0.6147 0.0867 154.73);
+  --primary-foreground: oklch(0.129 0.0306 264.71);
+  --secondary: oklch(0.6624 0.0855 334.26);
+  --secondary-foreground: oklch(0.129 0.0306 264.71);
+  --ring: oklch(0.6147 0.0867 154.73);
+  --chart-1: oklch(0.6147 0.0867 154.73);
+  --chart-2: oklch(0.6624 0.0855 334.26);
+  --chart-3: oklch(0.7122 0.0991 154.66);
+  --chart-4: oklch(0.7308 0.07 333.6);
+  --chart-5: oklch(0.781 0.0975 156.24);
+  --sidebar-primary: oklch(0.6147 0.0867 154.73);
+  --sidebar-primary-foreground: oklch(0.129 0.0306 264.71);
+  --sidebar-accent: oklch(0.279 0.0299 260.05);
+  --sidebar-accent-foreground: oklch(0.929 0.0095 255.53);
+  --sidebar-ring: oklch(0.6147 0.0867 154.73);
+}
+
+/* ── Rose Garden ──────────────────────────────────────────────────────── */
+[data-theme-preset='rose-garden'] {
+  --primary: oklch(0.5827 0.2418 12.23);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.8131 0.1129 5.67);
+  --secondary-foreground: oklch(0.2686 0.0032 34.85);
+  --ring: oklch(0.5827 0.2418 12.23);
+  --chart-1: oklch(0.5827 0.2418 12.23);
+  --chart-2: oklch(0.8938 0.0563 3.77);
+  --chart-3: oklch(0.7135 0.1879 7.69);
+  --chart-4: oklch(0.8131 0.1129 5.67);
+  --chart-5: oklch(0.9429 0.0283 5.52);
+  --sidebar-primary: oklch(0.5827 0.2418 12.23);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.5827 0.2418 12.23);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-ring: oklch(0.5827 0.2418 12.23);
+  --radius: 1rem;
+}
+.dark [data-theme-preset='rose-garden'] {
+  --primary: oklch(0.6476 0.2348 10.36);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.8131 0.1129 5.67);
+  --secondary-foreground: oklch(0.9227 0.0029 34.49);
+  --ring: oklch(0.6476 0.2348 10.36);
+  --chart-1: oklch(0.6476 0.2348 10.36);
+  --chart-2: oklch(0.8938 0.0563 3.77);
+  --chart-3: oklch(0.7135 0.1879 7.69);
+  --chart-4: oklch(0.8131 0.1129 5.67);
+  --chart-5: oklch(0.9429 0.0283 5.52);
+  --sidebar-primary: oklch(0.6476 0.2348 10.36);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.6476 0.2348 10.36);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-ring: oklch(0.6476 0.2348 10.36);
+}
+
+/* ── Lake View ────────────────────────────────────────────────────────── */
+[data-theme-preset='lake-view'] {
+  --primary: oklch(0.765 0.177 163.22);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0.551 0.0899 200.52);
+  --secondary-foreground: oklch(1 0 0);
+  --ring: oklch(0.765 0.177 163.22);
+  --chart-1: oklch(0.765 0.177 163.22);
+  --chart-2: oklch(0.551 0.0899 200.52);
+  --chart-3: oklch(0.845 0.143 164.98);
+  --chart-4: oklch(0.8576 0.1202 192.38);
+  --chart-5: oklch(0.95 0.052 163.05);
+  --sidebar-primary: oklch(0.765 0.177 163.22);
+  --sidebar-primary-foreground: oklch(0 0 0);
+  --sidebar-accent: oklch(0.765 0.177 163.22);
+  --sidebar-accent-foreground: oklch(0.2742 0.0208 165.96);
+  --sidebar-ring: oklch(0.765 0.177 163.22);
+  --radius: 0.75rem;
+}
+.dark [data-theme-preset='lake-view'] {
+  --primary: oklch(0.765 0.177 163.22);
+  --primary-foreground: oklch(0 0 0);
+  --secondary: oklch(0.551 0.0899 200.52);
+  --secondary-foreground: oklch(1 0 0);
+  --ring: oklch(0.765 0.177 163.22);
+  --chart-1: oklch(0.765 0.177 163.22);
+  --chart-2: oklch(0.551 0.0899 200.52);
+  --chart-3: oklch(0.845 0.143 164.98);
+  --chart-4: oklch(0.8576 0.1202 192.38);
+  --chart-5: oklch(0.95 0.052 163.05);
+  --sidebar-primary: oklch(0.765 0.177 163.22);
+  --sidebar-primary-foreground: oklch(0 0 0);
+  --sidebar-accent: oklch(0.765 0.177 163.22);
+  --sidebar-accent-foreground: oklch(0 0 0);
+  --sidebar-ring: oklch(0.765 0.177 163.22);
+}
+
+/* ── Sunset Glow ──────────────────────────────────────────────────────── */
+[data-theme-preset='sunset-glow'] {
+  --primary: oklch(0.5591 0.1882 25.33);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.7938 0.1248 42.42);
+  --secondary-foreground: oklch(0 0 0);
+  --ring: oklch(0.5591 0.1882 25.33);
+  --chart-1: oklch(0.5591 0.1882 25.33);
+  --chart-2: oklch(0.7938 0.1248 42.42);
+  --chart-3: oklch(0.809 0.0875 17.95);
+  --chart-4: oklch(0.8964 0.0724 43.73);
+  --chart-5: oklch(0.9381 0.0241 16.66);
+  --sidebar-primary: oklch(0.5591 0.1882 25.33);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.5591 0.1882 25.33);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-ring: oklch(0.5591 0.1882 25.33);
+  --radius: 1rem;
+}
+.dark [data-theme-preset='sunset-glow'] {
+  --primary: oklch(0.6387 0.1822 23.51);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.7938 0.1248 42.42);
+  --secondary-foreground: oklch(0 0 0);
+  --ring: oklch(0.6387 0.1822 23.51);
+  --chart-1: oklch(0.6387 0.1822 23.51);
+  --chart-2: oklch(0.7938 0.1248 42.42);
+  --chart-3: oklch(0.809 0.0875 17.95);
+  --chart-4: oklch(0.8964 0.0724 43.73);
+  --chart-5: oklch(0.9381 0.0241 16.66);
+  --sidebar-primary: oklch(0.6387 0.1822 23.51);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.6387 0.1822 23.51);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-ring: oklch(0.6387 0.1822 23.51);
+}
+
+/* ── Forest Whisper ───────────────────────────────────────────────────── */
+[data-theme-preset='forest-whisper'] {
+  --primary: oklch(0.5276 0.1072 182.22);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.5236 0.0505 250.18);
+  --secondary-foreground: oklch(1 0 0);
+  --ring: oklch(0.5276 0.1072 182.22);
+  --chart-1: oklch(0.5276 0.1072 182.22);
+  --chart-2: oklch(0.5236 0.0505 250.18);
+  --chart-3: oklch(0.7741 0.1676 178.16);
+  --chart-4: oklch(0.7294 0.0416 244.67);
+  --chart-5: oklch(0.9511 0.0547 177.24);
+  --sidebar-primary: oklch(0.5276 0.1072 182.22);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.5276 0.1072 182.22);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-ring: oklch(0.5276 0.1072 182.22);
+  --radius: 0.5rem;
+}
+.dark [data-theme-preset='forest-whisper'] {
+  --primary: oklch(0.5991 0.1318 180.39);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.6578 0.0485 247.35);
+  --secondary-foreground: oklch(1 0 0);
+  --ring: oklch(0.5991 0.1318 180.39);
+  --chart-1: oklch(0.5991 0.1318 180.39);
+  --chart-2: oklch(0.6578 0.0485 247.35);
+  --chart-3: oklch(0.7741 0.1676 178.16);
+  --chart-4: oklch(0.7294 0.0416 244.67);
+  --chart-5: oklch(0.9511 0.0547 177.24);
+  --sidebar-primary: oklch(0.5991 0.1318 180.39);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.5991 0.1318 180.39);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-ring: oklch(0.5991 0.1318 180.39);
+}
+
+/* ── Ocean Breeze ─────────────────────────────────────────────────────── */
+[data-theme-preset='ocean-breeze'] {
+  --primary: oklch(0.5461 0.2152 262.88);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.5854 0.2041 277.12);
+  --secondary-foreground: oklch(1 0 0);
+  --ring: oklch(0.5461 0.2152 262.88);
+  --chart-1: oklch(0.5461 0.2152 262.88);
+  --chart-2: oklch(0.5854 0.2041 277.12);
+  --chart-3: oklch(0.809 0.0922 251.81);
+  --chart-4: oklch(0.785 0.1007 274.72);
+  --chart-5: oklch(0.932 0.0281 255.58);
+  --sidebar-primary: oklch(0.5461 0.2152 262.88);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.5461 0.2152 262.88);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-ring: oklch(0.5461 0.2152 262.88);
+  --radius: 0.3rem;
+}
+.dark [data-theme-preset='ocean-breeze'] {
+  --primary: oklch(0.623 0.188 259.81);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.5854 0.2041 277.12);
+  --secondary-foreground: oklch(0 0 0);
+  --ring: oklch(0.623 0.188 259.81);
+  --chart-1: oklch(0.623 0.188 259.81);
+  --chart-2: oklch(0.5854 0.2041 277.12);
+  --chart-3: oklch(0.809 0.0922 251.81);
+  --chart-4: oklch(0.785 0.1007 274.72);
+  --chart-5: oklch(0.932 0.0281 255.58);
+  --sidebar-primary: oklch(0.623 0.188 259.81);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.623 0.188 259.81);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-ring: oklch(0.623 0.188 259.81);
+}
+
+/* ── Lavender Dream ───────────────────────────────────────────────────── */
+[data-theme-preset='lavender-dream'] {
+  --primary: oklch(0.5709 0.1808 306.89);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.811 0.0589 201.14);
+  --secondary-foreground: oklch(0 0 0);
+  --ring: oklch(0.5709 0.1808 306.89);
+  --chart-1: oklch(0.5709 0.1808 306.89);
+  --chart-2: oklch(0.811 0.0589 201.14);
+  --chart-3: oklch(0.8281 0.078 309.73);
+  --chart-4: oklch(0.8611 0.0504 198.03);
+  --chart-5: oklch(0.947 0.0212 309.77);
+  --sidebar-primary: oklch(0.5709 0.1808 306.89);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.5709 0.1808 306.89);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-ring: oklch(0.5709 0.1808 306.89);
+  --radius: 1rem;
+}
+.dark [data-theme-preset='lavender-dream'] {
+  --primary: oklch(0.6359 0.1699 307.95);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.811 0.0589 201.14);
+  --secondary-foreground: oklch(0 0 0);
+  --ring: oklch(0.6359 0.1699 307.95);
+  --chart-1: oklch(0.6359 0.1699 307.95);
+  --chart-2: oklch(0.811 0.0589 201.14);
+  --chart-3: oklch(0.8281 0.078 309.73);
+  --chart-4: oklch(0.8611 0.0504 198.03);
+  --chart-5: oklch(0.947 0.0212 309.77);
+  --sidebar-primary: oklch(0.6359 0.1699 307.95);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.6359 0.1699 307.95);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-ring: oklch(0.6359 0.1699 307.95);
+}
+
+/* ── Border radius ────────────────────────────────────────────────────── */
+[data-theme-radius='none'] {
+  --radius: 0rem;
+}
+[data-theme-radius='sm'] {
+  --radius: 0.3rem;
+}
+[data-theme-radius='md'] {
+  --radius: 0.5rem;
+}
+[data-theme-radius='lg'] {
+  --radius: 0.75rem;
+}
+[data-theme-radius='xl'] {
+  --radius: 1rem;
+}
+
+/* ── Density scale ────────────────────────────────────────────────────── */
+/* `sm` = compact UI; `lg` = comfortable. Default (no attribute) keeps Tailwind defaults. */
+[data-theme-scale='sm'] {
+  --text-xs: 0.7rem;
+  --text-sm: 0.78rem;
+  --text-base: 0.88rem;
+  --text-lg: 1rem;
+  --text-xl: 1.13rem;
+  --text-2xl: 1.38rem;
+  --text-3xl: 1.7rem;
+  --spacing: 0.225rem;
+}
+[data-theme-scale='lg'] {
+  --text-xs: 0.84rem;
+  --text-sm: 0.95rem;
+  --text-base: 1.075rem;
+  --text-lg: 1.2rem;
+  --text-xl: 1.35rem;
+  --text-2xl: 1.65rem;
+  --text-3xl: 2rem;
+  --spacing: 0.28rem;
+}
+
+/* ── Content layout ───────────────────────────────────────────────────── */
+/* `centered` clamps inset content to a comfortable reading width on large screens.
+ * Targets every direct child of <SidebarInset> so router outlet wrappers and
+ * page content alike are centered. Only kicks in once the viewport exceeds the
+ * clamp value. */
+@media (min-width: 1280px) {
+  [data-theme-content-layout='centered'] [data-slot='sidebar-inset'] > * {
+    max-width: var(--max-content-width, 1280px);
+    margin-inline: auto;
+    width: 100%;
+  }
+}
diff --git a/web/default/src/styles/theme.css b/web/default/src/styles/theme.css
index 98ee941b129..a325183506f 100644
--- a/web/default/src/styles/theme.css
+++ b/web/default/src/styles/theme.css
@@ -1,78 +1,5 @@
 @custom-variant dark (&:is(.dark *));
 
-:root {
-  --background: oklch(0.994 0.002 247.858);
-  --foreground: oklch(0.18 0.035 264.695);
-  --card: oklch(0.997 0.002 247.858);
-  --card-foreground: oklch(0.18 0.035 264.695);
-  --popover: oklch(0.997 0.002 247.858);
-  --popover-foreground: oklch(0.18 0.035 264.695);
-  --primary: oklch(0.255 0.042 265.755);
-  --primary-foreground: oklch(0.985 0.004 247.858);
-  --secondary: oklch(0.974 0.004 247.896);
-  --secondary-foreground: oklch(0.255 0.042 265.755);
-  --muted: oklch(0.972 0.004 247.896);
-  --muted-foreground: oklch(0.49 0.04 257.417);
-  --accent: oklch(0.972 0.004 247.896);
-  --accent-foreground: oklch(0.255 0.042 265.755);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.925 0.01 255.508);
-  --input: oklch(0.925 0.01 255.508);
-  --ring: oklch(0.64 0.055 256.788);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.991 0.002 247.858);
-  --sidebar-foreground: var(--foreground);
-  --sidebar-primary: var(--primary);
-  --sidebar-primary-foreground: var(--primary-foreground);
-  --sidebar-accent: var(--accent);
-  --sidebar-accent-foreground: var(--accent-foreground);
-  --sidebar-border: var(--border);
-  --sidebar-ring: var(--ring);
-  --skeleton-base: oklch(0.948 0.004 264);
-  --skeleton-highlight: oklch(0.988 0.002 264);
-}
-
-.dark {
-  --background: oklch(0.245 0.018 265);
-  --foreground: oklch(0.88 0.014 252);
-  --card: oklch(0.275 0.017 265);
-  --card-foreground: oklch(0.88 0.014 252);
-  --popover: oklch(0.3 0.018 265);
-  --popover-foreground: oklch(0.88 0.014 252);
-  --primary: oklch(0.68 0.12 236);
-  --primary-foreground: oklch(0.985 0.004 247.858);
-  --secondary: oklch(0.32 0.016 265);
-  --secondary-foreground: oklch(0.88 0.014 252);
-  --muted: oklch(0.305 0.016 265);
-  --muted-foreground: oklch(0.72 0.018 252);
-  --accent: oklch(0.34 0.024 255);
-  --accent-foreground: oklch(0.9 0.012 252);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(0.38 0.018 265);
-  --input: oklch(0.405 0.018 265);
-  --ring: oklch(0.62 0.09 236);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.255 0.017 265);
-  --sidebar-foreground: oklch(0.86 0.014 252);
-  --sidebar-primary: var(--primary);
-  --sidebar-primary-foreground: var(--primary-foreground);
-  --sidebar-accent: oklch(0.325 0.018 265);
-  --sidebar-accent-foreground: oklch(0.9 0.012 252);
-  --sidebar-border: oklch(0.37 0.018 265);
-  --sidebar-ring: var(--ring);
-  --skeleton-base: oklch(0.31 0.014 265);
-  --skeleton-highlight: oklch(0.39 0.018 265);
-}
-
 @theme inline {
   --font-sans: 'Public Sans', sans-serif;
   --font-inter:
@@ -97,6 +24,7 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -114,11 +42,88 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --radius: 0.5rem;
+  --app-header-height: 3rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.13 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.95 0 0);
+  --secondary-foreground: oklch(0.145 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.49 0 0);
+  --accent: oklch(0.95 0 0);
+  --accent-foreground: oklch(0.145 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.93 0 0);
+  --input: oklch(0.93 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.975 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.13 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.92 0 0);
+  --sidebar-accent-foreground: oklch(0.145 0 0);
+  --sidebar-border: oklch(0.93 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+  --skeleton-base: oklch(0.97 0 0);
+  --skeleton-highlight: oklch(0.985 0 0);
+}
+
+.dark {
+  /* OpenAI-like dark mode: nearly black chrome, readable raised surfaces. */
+  --background: oklch(0.185 0 0);
+  --foreground: oklch(0.965 0 0);
+  --card: oklch(0.235 0 0);
+  --card-foreground: oklch(0.965 0 0);
+  --popover: oklch(0.255 0 0);
+  --popover-foreground: oklch(0.965 0 0);
+  --primary: oklch(0.965 0 0);
+  --primary-foreground: oklch(0.145 0 0);
+  --secondary: oklch(0.285 0 0);
+  --secondary-foreground: oklch(0.965 0 0);
+  --muted: oklch(0.255 0 0);
+  --muted-foreground: oklch(0.76 0 0);
+  --accent: oklch(0.325 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 9%);
+  --input: oklch(1 0 0 / 16%);
+  --ring: oklch(0.68 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.115 0 0);
+  --sidebar-foreground: oklch(0.95 0 0);
+  --sidebar-primary: oklch(0.965 0 0);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+  --sidebar-accent: oklch(0.31 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.68 0 0);
+  --skeleton-base: oklch(0.285 0 0);
+  --skeleton-highlight: oklch(0.39 0 0);
 }