Merge origin/staging into okcode/clawhub-modern-appstore

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

.github/workflows/ci.yml

@@ -27,9 +27,13 @@ jobs:
 
       - name: Test
         run: bun run test
+        env:
+          VITE_CONVEX_URL: https://example.invalid
 
       - name: Coverage
         run: bun run coverage
+        env:
+          VITE_CONVEX_URL: https://example.invalid
 
       - name: ClawHub CLI Verify
         run: bun run --cwd packages/clawhub verify

.gitignore

@@ -24,3 +24,7 @@ coverage
 playwright-report
 test-results
 .playwright
+convex/_generated/
+skills-lock.json
+*/skills/*
+skills/*

AGENTS.md

@@ -87,3 +87,11 @@
 - **32K document limit per query.** Split `.collect()` calls by a partition field (e.g., one day at a time instead of a 7-day range). See `rebuildTrendingLeaderboardAction` in `convex/leaderboards.ts` for an example.
 - **Common mistakes**: `.filter().collect()` without an index; `ctx.db.get()` on large docs in a loop for list views; while loops that paginate the whole table to find filtered results.
 - **Before writing or reviewing Convex queries, check deployment health.** Run `bunx convex insights` to check for OCC conflicts, `bytesReadLimit`, and `documentsReadLimit` errors. Run `bunx convex logs --failure` to see individual error messages and stack traces. This helps identify which functions are causing bandwidth issues so you can prioritize fixes.
+
+<!-- convex-ai-start -->
+This project uses [Convex](https://convex.dev) as its backend.
+
+When working on Convex code, **always read `convex/_generated/ai/guidelines.md` first** for important guidelines on how to correctly use Convex APIs and patterns. The file contains rules that override what you may have learned about Convex from training data.
+
+Convex agent skills for common tasks can be installed by running `npx convex ai-files install`.
+<!-- convex-ai-end -->

CHANGELOG.md

@@ -1,11 +1,5 @@
 # Changelog
 
-## Unreleased
-
-### Changed
-
-- Search: add CJK tokenization support (Chinese/Japanese/Korean) with Intl.Segmenter plus fallback behavior to improve skill query matching (#1596) (thanks @pq-dong).
-
 ## 0.10.0 - 2026-04-05
 
 ### Added

CLAUDE.md

@@ -45,3 +45,11 @@
 
 - Tests use `._handler` to call mutation handlers directly with mock `db` objects.
 - Mock `db` objects MUST include `normalizeId: vi.fn()` for trigger wrapper compatibility.
+
+<!-- convex-ai-start -->
+This project uses [Convex](https://convex.dev) as its backend.
+
+When working on Convex code, **always read `convex/_generated/ai/guidelines.md` first** for important guidelines on how to correctly use Convex APIs and patterns. The file contains rules that override what you may have learned about Convex from training data.
+
+Convex agent skills for common tasks can be installed by running `npx convex ai-files install`.
+<!-- convex-ai-end -->

DESIGN.md

@@ -0,0 +1,356 @@
+# ClawHub Design System
+
+This document outlines the design rules, patterns, and guidelines for the ClawHub platform to ensure consistency, accessibility, and maintainability across all components.
+
+---
+
+## Color System
+
+### Brand Palette (OpenClaw)
+
+ClawHub uses a strict **3-5 color palette** based on the OpenClaw brand:
+
+| Token | Light Mode | Dark Mode | Usage |
+|-------|------------|-----------|-------|
+| `--accent` | `#dc2626` | `#dc2626` | Primary actions, interactive elements, emphasis |
+| `--accent-deep` | `#b91c1c` | `#ef4444` | Hover states, secondary emphasis |
+| `--ink` | `#0a0a0a` | `#fafafa` | Primary text |
+| `--ink-soft` | `#525252` | `#a1a1a1` | Secondary text, descriptions |
+| `--surface` | `#ffffff` | `#121212` | Card backgrounds, elevated surfaces |
+| `--bg` | `#fafafa` | `#0a0a0a` | Page background |
+
+### Rules
+
+1. **Never exceed 5 colors** without explicit design approval
+2. **Never use purple/violet prominently** unless explicitly requested
+3. **Always override text color** when changing background color to ensure contrast
+4. **Use semantic tokens** (`--accent`, `--ink`, `--surface`) instead of raw colors
+
+---
+
+## Typography
+
+### Font Stack
+
+```css
+--font-sans: 'Geist', system-ui, sans-serif;
+--font-mono: 'Geist Mono', monospace;
+--font-display: 'Geist', system-ui, sans-serif;
+```
+
+### Scale
+
+| Token | Size | Usage |
+|-------|------|-------|
+| `--fs-xs` | 0.75rem (12px) | Labels, badges, metadata |
+| `--fs-sm` | 0.875rem (14px) | Body text, descriptions |
+| `--fs-base` | 1rem (16px) | Default body text |
+| `--fs-md` | 1.125rem (18px) | Subheadings |
+| `--fs-lg` | 1.25rem (20px) | Section titles |
+| `--fs-xl` | 1.5rem (24px) | Page headings |
+
+### Rules
+
+1. **Maximum 2 font families** per page
+2. **Line height 1.4-1.6** for body text (use `leading-relaxed`)
+3. **Never use decorative fonts** for body text
+4. **Minimum font size: 14px** for readability
+5. Use `text-balance` or `text-pretty` for titles
+
+---
+
+## Layout
+
+### Method Priority
+
+Use this hierarchy for layout decisions:
+
+1. **Flexbox** - Default for most layouts
+2. **CSS Grid** - Only for complex 2D layouts (cards, galleries)
+3. **Never use floats** or absolute positioning unless absolutely necessary
+
+### Spacing Scale
+
+```css
+--space-1: 0.25rem   /* 4px */
+--space-2: 0.5rem    /* 8px */
+--space-3: 0.75rem   /* 12px */
+--space-4: 1rem      /* 16px */
+--space-5: 1.5rem    /* 24px */
+--space-6: 2rem      /* 32px */
+```
+
+### Grid Patterns
+
+#### Auto-fit Grid (Recommended for Cards)
+```css
+grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+```
+- Automatically adjusts columns based on container width
+- Prevents orphan items on partial rows
+- Maintains consistent card widths
+
+#### Fixed Grid (When exact columns needed)
+```css
+/* 3-column at desktop, 2 at tablet, 1 at mobile */
+grid-template-columns: repeat(3, minmax(0, 1fr));
+
+@media (max-width: 860px) {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+@media (max-width: 520px) {
+  grid-template-columns: 1fr;
+}
+```
+
+### Container Widths
+
+| Size | Max Width | Usage |
+|------|-----------|-------|
+| Default | `--page-max` (1200px) | Standard pages |
+| Narrow | `--page-narrow` (720px) | Reading content, forms |
+| Wide | Full width | Dashboards, data tables |
+
+---
+
+## Components
+
+### Cards
+
+```css
+.card {
+  padding: var(--space-4);
+  border: 1px solid var(--line);
+  border-radius: var(--r-md);
+  background: var(--surface);
+}
+```
+
+**Rules:**
+- Always use `display: flex; flex-direction: column;` for consistent height
+- Add `flex: 1` to content area for equal-height cards in grids
+- Include hover state with `border-color` and subtle `box-shadow`
+
+### Buttons
+
+| Variant | Usage |
+|---------|-------|
+| `primary` | Main actions (Submit, Save, Download) |
+| `secondary` | Alternative actions |
+| `ghost` | Tertiary actions, navigation |
+| `destructive` | Delete, remove, dangerous actions |
+
+**Rules:**
+- Always include visible focus state
+- Minimum touch target: 44x44px on mobile
+- Include `aria-label` when icon-only
+
+### Form Controls
+
+- Labels above inputs (not inline)
+- Error states use `--status-error-fg`
+- Focus rings use `--accent` with 0.2 opacity
+- Minimum input height: 40px
+
+---
+
+## Responsive Breakpoints
+
+```css
+/* Mobile first - base styles for mobile */
+
+@media (min-width: 520px) {
+  /* Small tablets, large phones */
+}
+
+@media (min-width: 640px) {
+  /* Tablets */
+}
+
+@media (min-width: 860px) {
+  /* Small desktops, landscape tablets */
+}
+
+@media (min-width: 1024px) {
+  /* Desktops */
+}
+
+@media (min-width: 1280px) {
+  /* Large desktops */
+}
+```
+
+### Rules
+
+1. **Mobile-first approach** - Base styles target mobile
+2. **Progressive enhancement** - Add complexity as viewport increases
+3. **Test intermediate breakpoints** - Avoid jarring layout jumps
+4. **Never hide critical content** on mobile
+
+---
+
+## Accessibility
+
+### Color Contrast
+
+- Normal text: Minimum 4.5:1 ratio
+- Large text (18px+): Minimum 3:1 ratio
+- Interactive elements: Minimum 3:1 ratio
+
+### Focus States
+
+```css
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+```
+
+### Screen Readers
+
+- Use `sr-only` class for visually hidden but accessible text
+- Always include `alt` text for images (empty `alt=""` for decorative)
+- Use semantic HTML elements (`main`, `nav`, `article`, `section`)
+- Proper heading hierarchy (h1 > h2 > h3, no skipping)
+
+### Motion
+
+```css
+/* Respect user preference */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+---
+
+## Animation
+
+### Timing
+
+```css
+--transition-fast: 150ms;
+--transition-base: 200ms;
+--transition-slow: 300ms;
+```
+
+### Easing
+
+- Use `ease` or `ease-out` for most transitions
+- Use `ease-in-out` for enter/exit animations
+- Never use `linear` except for continuous animations
+
+### Rules
+
+1. **Subtle by default** - Avoid flashy animations
+2. **Purpose-driven** - Animation should provide feedback
+3. **Respect preferences** - Support `prefers-reduced-motion`
+4. **Performance** - Use `transform` and `opacity` only
+
+---
+
+## Icons
+
+### Usage
+
+- Use Lucide icons consistently
+- Standard sizes: 14px, 16px, 20px, 24px
+- Include `aria-hidden="true"` for decorative icons
+- Never use emojis as icons
+
+### Placement
+
+- Left of labels in buttons and navigation
+- Right of labels for external links or dropdowns
+- Centered when used alone with `aria-label`
+
+---
+
+## Dark Mode
+
+### Implementation
+
+```css
+[data-theme="dark"] {
+  /* Dark mode overrides */
+}
+```
+
+### Rules
+
+1. Never use pure white (`#ffffff`) on dark backgrounds
+2. Reduce shadow intensity in dark mode
+3. Adjust image brightness if needed
+4. Test contrast ratios in both modes
+
+---
+
+## Performance
+
+### CSS
+
+1. Use CSS custom properties for theming
+2. Avoid deeply nested selectors (max 3 levels)
+3. Use `will-change` sparingly
+4. Prefer `transform` over `top/left` for animations
+
+### Images
+
+1. Always specify `width` and `height` attributes
+2. Use `loading="lazy"` for below-fold images
+3. Use appropriate formats (WebP with fallbacks)
+4. Include placeholder or skeleton states
+
+---
+
+## Code Style
+
+### CSS Class Naming
+
+```css
+/* Component */
+.component-name { }
+
+/* Component modifier */
+.component-name.variant { }
+
+/* Component child */
+.component-name-child { }
+
+/* State */
+.component-name.is-active { }
+.component-name[data-state="open"] { }
+```
+
+### File Organization
+
+```
+src/
+  components/
+    ui/           # Primitive components (Button, Input, Card)
+    layout/       # Layout components (Container, Header)
+  styles.css      # Global styles and design tokens
+  lib/
+    theme.ts      # Theme utilities
+    preferences.ts # User preference management
+```
+
+---
+
+## Checklist
+
+Before shipping any UI changes, verify:
+
+- [ ] Color contrast meets WCAG AA standards
+- [ ] Focus states are visible
+- [ ] Layout works at all breakpoints
+- [ ] Animations respect `prefers-reduced-motion`
+- [ ] Text is readable at default browser zoom
+- [ ] Interactive elements have 44px minimum touch target
+- [ ] Semantic HTML is used appropriately
+- [ ] Dark mode has been tested

bun.lock

@@ -20,6 +20,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-toggle-group": "^1.1.11",
         "@radix-ui/react-tooltip": "^1.2.8",
@@ -32,6 +34,7 @@
         "@tanstack/react-table": "^8.21.3",
         "@tanstack/router-plugin": "1.167.2",
         "@vercel/analytics": "^2.0.1",
+        "class-variance-authority": "^0.7.1",
         "clawhub-schema": "workspace:*",
         "clsx": "^2.1.1",
         "convex": "^1.34.1",
@@ -41,6 +44,8 @@
         "ignore": "^7.0.5",
         "lucide-react": "^0.577.0",
         "monaco-editor": "^0.55.1",
+        "next": "^16.2.3",
+        "next-themes": "^0.4.6",
         "nitro": "3.0.260311-beta",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
@@ -51,6 +56,7 @@
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.5.0",
         "tailwindcss": "^4.2.2",
+        "tw-animate-css": "^1.4.0",
         "vite-tsconfig-paths": "^6.1.1",
         "yaml": "^2.8.3",
         "zod": "^4.3.6",
@@ -73,7 +79,7 @@
         "oxlint-tsgolint": "^0.17.4",
         "typescript": "^5.9.3",
         "undici": "^7.24.7",
-        "vite": "8.0.5",
+        "vite": "8.0.1",
         "vitest": "^4.1.2",
       },
     },
@@ -266,6 +272,56 @@
 
     "@fontsource/manrope": ["@fontsource/manrope@5.2.8", "", {}, "sha512-gJHJmcuUk7qWcNCfcAri/DJQtXtBYqi9yKratr4jXhSo0I3xUtNNKI+igQIcw5c+m95g0vounk8ZnX/kb8o0TA=="],
 
+    "@img/colour": ["@img/colour@1.1.0", "", {}, "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ=="],
+
+    "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="],
+
+    "@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.2.4" }, "os": "darwin", "cpu": "x64" }, "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw=="],
+
+    "@img/sharp-libvips-darwin-arm64": ["@img/sharp-libvips-darwin-arm64@1.2.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g=="],
+
+    "@img/sharp-libvips-darwin-x64": ["@img/sharp-libvips-darwin-x64@1.2.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg=="],
+
+    "@img/sharp-libvips-linux-arm": ["@img/sharp-libvips-linux-arm@1.2.4", "", { "os": "linux", "cpu": "arm" }, "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A=="],
+
+    "@img/sharp-libvips-linux-arm64": ["@img/sharp-libvips-linux-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw=="],
+
+    "@img/sharp-libvips-linux-ppc64": ["@img/sharp-libvips-linux-ppc64@1.2.4", "", { "os": "linux", "cpu": "ppc64" }, "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA=="],
+
+    "@img/sharp-libvips-linux-riscv64": ["@img/sharp-libvips-linux-riscv64@1.2.4", "", { "os": "linux", "cpu": "none" }, "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA=="],
+
+    "@img/sharp-libvips-linux-s390x": ["@img/sharp-libvips-linux-s390x@1.2.4", "", { "os": "linux", "cpu": "s390x" }, "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ=="],
+
+    "@img/sharp-libvips-linux-x64": ["@img/sharp-libvips-linux-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw=="],
+
+    "@img/sharp-libvips-linuxmusl-arm64": ["@img/sharp-libvips-linuxmusl-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw=="],
+
+    "@img/sharp-libvips-linuxmusl-x64": ["@img/sharp-libvips-linuxmusl-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg=="],
+
+    "@img/sharp-linux-arm": ["@img/sharp-linux-arm@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm": "1.2.4" }, "os": "linux", "cpu": "arm" }, "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw=="],
+
+    "@img/sharp-linux-arm64": ["@img/sharp-linux-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg=="],
+
+    "@img/sharp-linux-ppc64": ["@img/sharp-linux-ppc64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-ppc64": "1.2.4" }, "os": "linux", "cpu": "ppc64" }, "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA=="],
+
+    "@img/sharp-linux-riscv64": ["@img/sharp-linux-riscv64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-riscv64": "1.2.4" }, "os": "linux", "cpu": "none" }, "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw=="],
+
+    "@img/sharp-linux-s390x": ["@img/sharp-linux-s390x@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-s390x": "1.2.4" }, "os": "linux", "cpu": "s390x" }, "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg=="],
+
+    "@img/sharp-linux-x64": ["@img/sharp-linux-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ=="],
+
+    "@img/sharp-linuxmusl-arm64": ["@img/sharp-linuxmusl-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg=="],
+
+    "@img/sharp-linuxmusl-x64": ["@img/sharp-linuxmusl-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q=="],
+
+    "@img/sharp-wasm32": ["@img/sharp-wasm32@0.34.5", "", { "dependencies": { "@emnapi/runtime": "^1.7.0" }, "cpu": "none" }, "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw=="],
+
+    "@img/sharp-win32-arm64": ["@img/sharp-win32-arm64@0.34.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g=="],
+
+    "@img/sharp-win32-ia32": ["@img/sharp-win32-ia32@0.34.5", "", { "os": "win32", "cpu": "ia32" }, "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg=="],
+
+    "@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.34.5", "", { "os": "win32", "cpu": "x64" }, "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw=="],
+
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
 
     "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
@@ -282,6 +338,24 @@
 
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.1", "", { "dependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1", "@tybys/wasm-util": "^0.10.1" } }, "sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A=="],
 
+    "@next/env": ["@next/env@16.2.3", "", {}, "sha512-ZWXyj4uNu4GCWQw9cjRxWlbD+33mcDszIo9iQxFnBX3Wmgq9ulaSJcl6VhuWx5pCWqqD+9W6Wfz7N0lM5lYPMA=="],
+
+    "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.2.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-u37KDKTKQ+OQLvY+z7SNXixwo4Q2/IAJFDzU1fYe66IbCE51aDSAzkNDkWmLN0yjTUh4BKBd+hb69jYn6qqqSg=="],
+
+    "@next/swc-darwin-x64": ["@next/swc-darwin-x64@16.2.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-gHjL/qy6Q6CG3176FWbAKyKh9IfntKZTB3RY/YOJdDFpHGsUDXVH38U4mMNpHVGXmeYW4wj22dMp1lTfmu/bTQ=="],
+
+    "@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@16.2.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-U6vtblPtU/P14Y/b/n9ZY0GOxbbIhTFuaFR7F4/uMBidCi2nSdaOFhA0Go81L61Zd6527+yvuX44T4ksnf8T+Q=="],
+
+    "@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@16.2.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-/YV0LgjHUmfhQpn9bVoGc4x4nan64pkhWR5wyEV8yCOfwwrH630KpvRg86olQHTwHIn1z59uh6JwKvHq1h4QEw=="],
+
+    "@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@16.2.3", "", { "os": "linux", "cpu": "x64" }, "sha512-/HiWEcp+WMZ7VajuiMEFGZ6cg0+aYZPqCJD3YJEfpVWQsKYSjXQG06vJP6F1rdA03COD9Fef4aODs3YxKx+RDQ=="],
+
+    "@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@16.2.3", "", { "os": "linux", "cpu": "x64" }, "sha512-Kt44hGJfZSefebhk/7nIdivoDr3Ugp5+oNz9VvF3GUtfxutucUIHfIO0ZYO8QlOPDQloUVQn4NVC/9JvHRk9hw=="],
+
+    "@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@16.2.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-O2NZ9ie3Tq6xj5Z5CSwBT3+aWAMW2PIZ4egUi9MaWLkwaehgtB7YZjPm+UpcNpKOme0IQuqDcor7BsW6QBiQBw=="],
+
+    "@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@16.2.3", "", { "os": "win32", "cpu": "x64" }, "sha512-Ibm29/GgB/ab5n7XKqlStkm54qqZE8v2FnijUPBgrd67FWrac45o/RsNlaOWjme/B5UqeWt/8KM4aWBwA1D2Kw=="],
+
     "@oozcitak/dom": ["@oozcitak/dom@2.0.2", "", { "dependencies": { "@oozcitak/infra": "^2.0.2", "@oozcitak/url": "^3.0.0", "@oozcitak/util": "^10.0.0" } }, "sha512-GjpKhkSYC3Mj4+lfwEyI1dqnsKTgwGy48ytZEhm4A/xnH/8z9M3ZVXKr/YGQi3uCLs1AEBS+x5T2JPiueEDW8w=="],
 
     "@oozcitak/infra": ["@oozcitak/infra@2.0.2", "", { "dependencies": { "@oozcitak/util": "^10.0.0" } }, "sha512-2g+E7hoE2dgCz/APPOEK5s3rMhJvNxSMBrP+U+j1OWsIbtSpWxxlUjq1lU8RIsFJNYv7NMlnVsCuHcUzJW+8vA=="],
@@ -298,7 +372,7 @@
 
     "@oslojs/encoding": ["@oslojs/encoding@1.1.0", "", {}, "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ=="],
 
-    "@oxc-project/types": ["@oxc-project/types@0.122.0", "", {}, "sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA=="],
+    "@oxc-project/types": ["@oxc-project/types@0.120.0", "", {}, "sha512-k1YNu55DuvAip/MGE1FTsIuU3FUCn6v/ujG9V7Nq5Df/kX2CWb13hhwD0lmJGMGqE+bE1MXvv9SZVnMzEXlWcg=="],
 
     "@oxfmt/binding-android-arm-eabi": ["@oxfmt/binding-android-arm-eabi@0.41.0", "", { "os": "android", "cpu": "arm" }, "sha512-REfrqeMKGkfMP+m/ScX4f5jJBSmVNYcpoDF8vP8f8eYPDuPGZmzp56NIUsYmx3h7f6NzC6cE3gqh8GDWrJHCKw=="],
 
@@ -440,7 +514,9 @@
 
     "@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-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-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=="],
 
@@ -474,35 +550,35 @@
 
     "@resvg/resvg-wasm": ["@resvg/resvg-wasm@2.6.2", "", {}, "sha512-FqALmHI8D4o6lk/LRWDnhw95z5eO+eAa6ORjVg09YRR7BkcM6oPHU9uyC0gtQG5vpFLvgpeU4+zEAz2H8APHNw=="],
 
-    "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.0-rc.12", "", { "os": "android", "cpu": "arm64" }, "sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA=="],
+    "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.0-rc.10", "", { "os": "android", "cpu": "arm64" }, "sha512-jOHxwXhxmFKuXztiu1ORieJeTbx5vrTkcOkkkn2d35726+iwhrY1w/+nYY/AGgF12thg33qC3R1LMBF5tHTZHg=="],
 
-    "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.0.0-rc.12", "", { "os": "darwin", "cpu": "arm64" }, "sha512-cFYr6zTG/3PXXF3pUO+umXxt1wkRK/0AYT8lDwuqvRC+LuKYWSAQAQZjCWDQpAH172ZV6ieYrNnFzVVcnSflAg=="],
+    "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.0.0-rc.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-gED05Teg/vtTZbIJBc4VNMAxAFDUPkuO/rAIyyxZjTj1a1/s6z5TII/5yMGZ0uLRCifEtwUQn8OlYzuYc0m70w=="],
 
-    "@rolldown/binding-darwin-x64": ["@rolldown/binding-darwin-x64@1.0.0-rc.12", "", { "os": "darwin", "cpu": "x64" }, "sha512-ZCsYknnHzeXYps0lGBz8JrF37GpE9bFVefrlmDrAQhOEi4IOIlcoU1+FwHEtyXGx2VkYAvhu7dyBf75EJQffBw=="],
+    "@rolldown/binding-darwin-x64": ["@rolldown/binding-darwin-x64@1.0.0-rc.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-rI15NcM1mA48lqrIxVkHfAqcyFLcQwyXWThy+BQ5+mkKKPvSO26ir+ZDp36AgYoYVkqvMcdS8zOE6SeBsR9e8A=="],
 
-    "@rolldown/binding-freebsd-x64": ["@rolldown/binding-freebsd-x64@1.0.0-rc.12", "", { "os": "freebsd", "cpu": "x64" }, "sha512-dMLeprcVsyJsKolRXyoTH3NL6qtsT0Y2xeuEA8WQJquWFXkEC4bcu1rLZZSnZRMtAqwtrF/Ib9Ddtpa/Gkge9Q=="],
+    "@rolldown/binding-freebsd-x64": ["@rolldown/binding-freebsd-x64@1.0.0-rc.10", "", { "os": "freebsd", "cpu": "x64" }, "sha512-XZRXHdTa+4ME1MuDVp021+doQ+z6Ei4CCFmNc5/sKbqb8YmkiJdj8QKlV3rCI0AJtAeSB5n0WGPuJWNL9p/L2w=="],
 
-    "@rolldown/binding-linux-arm-gnueabihf": ["@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.12", "", { "os": "linux", "cpu": "arm" }, "sha512-YqWjAgGC/9M1lz3GR1r1rP79nMgo3mQiiA+Hfo+pvKFK1fAJ1bCi0ZQVh8noOqNacuY1qIcfyVfP6HoyBRZ85Q=="],
+    "@rolldown/binding-linux-arm-gnueabihf": ["@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.10", "", { "os": "linux", "cpu": "arm" }, "sha512-R0SQMRluISSLzFE20sPWYHVmJdDQnRyc/FzSCN72BqQmh2SOZUFG+N3/vBZpR4C6WpEUVYJLrYUXaj43sJsNLA=="],
 
-    "@rolldown/binding-linux-arm64-gnu": ["@rolldown/binding-linux-arm64-gnu@1.0.0-rc.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-/I5AS4cIroLpslsmzXfwbe5OmWvSsrFuEw3mwvbQ1kDxJ822hFHIx+vsN/TAzNVyepI/j/GSzrtCIwQPeKCLIg=="],
+    "@rolldown/binding-linux-arm64-gnu": ["@rolldown/binding-linux-arm64-gnu@1.0.0-rc.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-Y1reMrV/o+cwpduYhJuOE3OMKx32RMYCidf14y+HssARRmhDuWXJ4yVguDg2R/8SyyGNo+auzz64LnPK9Hq6jg=="],
 
-    "@rolldown/binding-linux-arm64-musl": ["@rolldown/binding-linux-arm64-musl@1.0.0-rc.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw=="],
+    "@rolldown/binding-linux-arm64-musl": ["@rolldown/binding-linux-arm64-musl@1.0.0-rc.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-vELN+HNb2IzuzSBUOD4NHmP9yrGwl1DVM29wlQvx1OLSclL0NgVWnVDKl/8tEks79EFek/kebQKnNJkIAA4W2g=="],
 
-    "@rolldown/binding-linux-ppc64-gnu": ["@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.12", "", { "os": "linux", "cpu": "ppc64" }, "sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g=="],
+    "@rolldown/binding-linux-ppc64-gnu": ["@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.10", "", { "os": "linux", "cpu": "ppc64" }, "sha512-ZqrufYTgzxbHwpqOjzSsb0UV/aV2TFIY5rP8HdsiPTv/CuAgCRjM6s9cYFwQ4CNH+hf9Y4erHW1GjZuZ7WoI7w=="],
 
-    "@rolldown/binding-linux-s390x-gnu": ["@rolldown/binding-linux-s390x-gnu@1.0.0-rc.12", "", { "os": "linux", "cpu": "s390x" }, "sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og=="],
+    "@rolldown/binding-linux-s390x-gnu": ["@rolldown/binding-linux-s390x-gnu@1.0.0-rc.10", "", { "os": "linux", "cpu": "s390x" }, "sha512-gSlmVS1FZJSRicA6IyjoRoKAFK7IIHBs7xJuHRSmjImqk3mPPWbR7RhbnfH2G6bcmMEllCt2vQ/7u9e6bBnByg=="],
 
-    "@rolldown/binding-linux-x64-gnu": ["@rolldown/binding-linux-x64-gnu@1.0.0-rc.12", "", { "os": "linux", "cpu": "x64" }, "sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg=="],
+    "@rolldown/binding-linux-x64-gnu": ["@rolldown/binding-linux-x64-gnu@1.0.0-rc.10", "", { "os": "linux", "cpu": "x64" }, "sha512-eOCKUpluKgfObT2pHjztnaWEIbUabWzk3qPZ5PuacuPmr4+JtQG4k2vGTY0H15edaTnicgU428XW/IH6AimcQw=="],
 
-    "@rolldown/binding-linux-x64-musl": ["@rolldown/binding-linux-x64-musl@1.0.0-rc.12", "", { "os": "linux", "cpu": "x64" }, "sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig=="],
+    "@rolldown/binding-linux-x64-musl": ["@rolldown/binding-linux-x64-musl@1.0.0-rc.10", "", { "os": "linux", "cpu": "x64" }, "sha512-Xdf2jQbfQowJnLcgYfD/m0Uu0Qj5OdxKallD78/IPPfzaiaI4KRAwZzHcKQ4ig1gtg1SuzC7jovNiM2TzQsBXA=="],
 
-    "@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.0.0-rc.12", "", { "os": "none", "cpu": "arm64" }, "sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA=="],
+    "@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.0.0-rc.10", "", { "os": "none", "cpu": "arm64" }, "sha512-o1hYe8hLi1EY6jgPFyxQgQ1wcycX+qz8eEbVmot2hFkgUzPxy9+kF0u0NIQBeDq+Mko47AkaFFaChcvZa9UX9Q=="],
 
-    "@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.0.0-rc.12", "", { "dependencies": { "@napi-rs/wasm-runtime": "^1.1.1" }, "cpu": "none" }, "sha512-ykGiLr/6kkiHc0XnBfmFJuCjr5ZYKKofkx+chJWDjitX+KsJuAmrzWhwyOMSHzPhzOHOy7u9HlFoa5MoAOJ/Zg=="],
+    "@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.0.0-rc.10", "", { "dependencies": { "@napi-rs/wasm-runtime": "^1.1.1" }, "cpu": "none" }, "sha512-Ugv9o7qYJudqQO5Y5y2N2SOo6S4WiqiNOpuQyoPInnhVzCY+wi/GHltcLHypG9DEUYMB0iTB/huJrpadiAcNcA=="],
 
-    "@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.0.0-rc.12", "", { "os": "win32", "cpu": "arm64" }, "sha512-5eOND4duWkwx1AzCxadcOrNeighiLwMInEADT0YM7xeEOOFcovWZCq8dadXgcRHSf3Ulh1kFo/qvzoFiCLOL1Q=="],
+    "@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.0.0-rc.10", "", { "os": "win32", "cpu": "arm64" }, "sha512-7UODQb4fQUNT/vmgDZBl3XOBAIOutP5R3O/rkxg0aLfEGQ4opbCgU5vOw/scPe4xOqBwL9fw7/RP1vAMZ6QlAQ=="],
 
-    "@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.0.0-rc.12", "", { "os": "win32", "cpu": "x64" }, "sha512-PyqoipaswDLAZtot351MLhrlrh6lcZPo2LSYE+VDxbVk24LVKAGOuE4hb8xZQmrPAuEtTZW8E6D2zc5EUZX4Lw=="],
+    "@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.0.0-rc.10", "", { "os": "win32", "cpu": "x64" }, "sha512-PYxKHMVHOb5NJuDL53vBUl1VwUjymDcYI6rzpIni0C9+9mTiJedvUxSk7/RPp7OOAm3v+EjgMu9bIy3N6b408w=="],
 
     "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.7", "", {}, "sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA=="],
 
@@ -536,6 +612,8 @@
 
     "@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
 
+    "@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
+
     "@tailwindcss/node": ["@tailwindcss/node@4.2.2", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.19.0", "jiti": "^2.6.1", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.2.2" } }, "sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA=="],
 
     "@tailwindcss/oxide": ["@tailwindcss/oxide@4.2.2", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.2.2", "@tailwindcss/oxide-darwin-arm64": "4.2.2", "@tailwindcss/oxide-darwin-x64": "4.2.2", "@tailwindcss/oxide-freebsd-x64": "4.2.2", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.2", "@tailwindcss/oxide-linux-arm64-gnu": "4.2.2", "@tailwindcss/oxide-linux-arm64-musl": "4.2.2", "@tailwindcss/oxide-linux-x64-gnu": "4.2.2", "@tailwindcss/oxide-linux-x64-musl": "4.2.2", "@tailwindcss/oxide-wasm32-wasi": "4.2.2", "@tailwindcss/oxide-win32-arm64-msvc": "4.2.2", "@tailwindcss/oxide-win32-x64-msvc": "4.2.2" } }, "sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg=="],
@@ -744,6 +822,8 @@
 
     "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
 
+    "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
+
     "clawhub": ["clawhub@workspace:packages/clawhub"],
 
     "clawhub-schema": ["clawhub-schema@workspace:packages/schema"],
@@ -752,6 +832,8 @@
 
     "cli-spinners": ["cli-spinners@3.4.0", "", {}, "sha512-bXfOC4QcT1tKXGorxL3wbJm6XJPDqEnij2gQ2m7ESQuE+/z9YFIWnl/5RpTiKWbMq3EVKR4fRLJGn6DVfu0mpw=="],
 
+    "client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
+
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
     "comma-separated-tokens": ["comma-separated-tokens@2.0.3", "", {}, "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="],
@@ -1096,6 +1178,10 @@
 
     "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
+    "next": ["next@16.2.3", "", { "dependencies": { "@next/env": "16.2.3", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.2.3", "@next/swc-darwin-x64": "16.2.3", "@next/swc-linux-arm64-gnu": "16.2.3", "@next/swc-linux-arm64-musl": "16.2.3", "@next/swc-linux-x64-gnu": "16.2.3", "@next/swc-linux-x64-musl": "16.2.3", "@next/swc-win32-arm64-msvc": "16.2.3", "@next/swc-win32-x64-msvc": "16.2.3", "sharp": "^0.34.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-9V3zV4oZFza3PVev5/poB9g0dEafVcgNyQ8eTRop8GvxZjV2G15FC5ARuG1eFD42QgeYkzJBJzHghNP8Ad9xtA=="],
+
+    "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=="],
+
     "nf3": ["nf3@0.3.13", "", {}, "sha512-drDt0yl4d/yUhlpD0GzzqahSpA5eUNeIfFq0/aoZb0UlPY0ZwP4u1EfREVvZrYdEnJ3OU9Le9TrzbvWgEkkeKw=="],
 
     "nitro": ["nitro@3.0.260311-beta", "", { "dependencies": { "consola": "^3.4.2", "crossws": "^0.4.4", "db0": "^0.3.4", "env-runner": "^0.1.6", "h3": "^2.0.1-rc.16", "hookable": "^6.0.1", "nf3": "^0.3.11", "ocache": "^0.1.2", "ofetch": "^2.0.0-alpha.3", "ohash": "^2.0.11", "rolldown": "^1.0.0-rc.8", "srvx": "^0.11.9", "unenv": "^2.0.0-rc.24", "unstorage": "^2.0.0-alpha.6" }, "peerDependencies": { "dotenv": "*", "giget": "*", "jiti": "^2.6.1", "rollup": "^4.59.0", "vite": "^7 || ^8 || >=8.0.0-0", "xml2js": "^0.6.2", "zephyr-agent": "^0.1.15" }, "optionalPeers": ["dotenv", "giget", "jiti", "rollup", "vite", "xml2js", "zephyr-agent"], "bin": { "nitro": "dist/cli/index.mjs" } }, "sha512-0o0fJ9LUh4WKUqJNX012jyieUOtMCnadkNDWr0mHzdraoHpJP/1CGNefjRyZyMXSpoJfwoWdNEZu2iGf35TUvQ=="],
@@ -1206,7 +1292,7 @@
 
     "restore-cursor": ["restore-cursor@5.1.0", "", { "dependencies": { "onetime": "^7.0.0", "signal-exit": "^4.1.0" } }, "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA=="],
 
-    "rolldown": ["rolldown@1.0.0-rc.12", "", { "dependencies": { "@oxc-project/types": "=0.122.0", "@rolldown/pluginutils": "1.0.0-rc.12" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.0.0-rc.12", "@rolldown/binding-darwin-arm64": "1.0.0-rc.12", "@rolldown/binding-darwin-x64": "1.0.0-rc.12", "@rolldown/binding-freebsd-x64": "1.0.0-rc.12", "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.12", "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.12", "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-x64-musl": "1.0.0-rc.12", "@rolldown/binding-openharmony-arm64": "1.0.0-rc.12", "@rolldown/binding-wasm32-wasi": "1.0.0-rc.12", "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.12", "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.12" }, "bin": { "rolldown": "bin/cli.mjs" } }, "sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A=="],
+    "rolldown": ["rolldown@1.0.0-rc.10", "", { "dependencies": { "@oxc-project/types": "=0.120.0", "@rolldown/pluginutils": "1.0.0-rc.10" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.0.0-rc.10", "@rolldown/binding-darwin-arm64": "1.0.0-rc.10", "@rolldown/binding-darwin-x64": "1.0.0-rc.10", "@rolldown/binding-freebsd-x64": "1.0.0-rc.10", "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.10", "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.10", "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.10", "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.10", "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.10", "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.10", "@rolldown/binding-linux-x64-musl": "1.0.0-rc.10", "@rolldown/binding-openharmony-arm64": "1.0.0-rc.10", "@rolldown/binding-wasm32-wasi": "1.0.0-rc.10", "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.10", "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.10" }, "bin": { "rolldown": "bin/cli.mjs" } }, "sha512-q7j6vvarRFmKpgJUT8HCAUljkgzEp4LAhPlJUvQhA5LA1SUL36s5QCysMutErzL3EbNOZOkoziSx9iZC4FddKA=="],
 
     "rou3": ["rou3@0.8.1", "", {}, "sha512-ePa+XGk00/3HuCqrEnK3LxJW7I0SdNg6EFzKUJG73hMAdDcOUC/i/aSz7LSDwLrGr33kal/rqOGydzwl6U7zBA=="],
 
@@ -1224,6 +1310,8 @@
 
     "server-only": ["server-only@0.0.1", "", {}, "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA=="],
 
+    "sharp": ["sharp@0.34.5", "", { "dependencies": { "@img/colour": "^1.0.0", "detect-libc": "^2.1.2", "semver": "^7.7.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.34.5", "@img/sharp-darwin-x64": "0.34.5", "@img/sharp-libvips-darwin-arm64": "1.2.4", "@img/sharp-libvips-darwin-x64": "1.2.4", "@img/sharp-libvips-linux-arm": "1.2.4", "@img/sharp-libvips-linux-arm64": "1.2.4", "@img/sharp-libvips-linux-ppc64": "1.2.4", "@img/sharp-libvips-linux-riscv64": "1.2.4", "@img/sharp-libvips-linux-s390x": "1.2.4", "@img/sharp-libvips-linux-x64": "1.2.4", "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", "@img/sharp-libvips-linuxmusl-x64": "1.2.4", "@img/sharp-linux-arm": "0.34.5", "@img/sharp-linux-arm64": "0.34.5", "@img/sharp-linux-ppc64": "0.34.5", "@img/sharp-linux-riscv64": "0.34.5", "@img/sharp-linux-s390x": "0.34.5", "@img/sharp-linux-x64": "0.34.5", "@img/sharp-linuxmusl-arm64": "0.34.5", "@img/sharp-linuxmusl-x64": "0.34.5", "@img/sharp-wasm32": "0.34.5", "@img/sharp-win32-arm64": "0.34.5", "@img/sharp-win32-ia32": "0.34.5", "@img/sharp-win32-x64": "0.34.5" } }, "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg=="],
+
     "shell-quote": ["shell-quote@1.8.3", "", {}, "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw=="],
 
     "shiki": ["shiki@4.0.2", "", { "dependencies": { "@shikijs/core": "4.0.2", "@shikijs/engine-javascript": "4.0.2", "@shikijs/engine-oniguruma": "4.0.2", "@shikijs/langs": "4.0.2", "@shikijs/themes": "4.0.2", "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-eAVKTMedR5ckPo4xne/PjYQYrU3qx78gtJZ+sHlXEg5IHhhoQhMfZVzetTYuaJS0L2Ef3AcCRzCHV8T0WI6nIQ=="],
@@ -1264,6 +1352,8 @@
 
     "style-to-object": ["style-to-object@1.0.14", "", { "dependencies": { "inline-style-parser": "0.2.7" } }, "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw=="],
 
+    "styled-jsx": ["styled-jsx@5.1.6", "", { "dependencies": { "client-only": "0.0.1" }, "peerDependencies": { "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0" } }, "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA=="],
+
     "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
 
     "symbol-tree": ["symbol-tree@3.2.4", "", {}, "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="],
@@ -1308,6 +1398,8 @@
 
     "tsx": ["tsx@4.21.0", "", { "dependencies": { "esbuild": "~0.27.0", "get-tsconfig": "^4.7.5" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "bin": { "tsx": "dist/cli.mjs" } }, "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw=="],
 
+    "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
+
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
 
     "ufo": ["ufo@1.6.3", "", {}, "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q=="],
@@ -1346,7 +1438,7 @@
 
     "vfile-message": ["vfile-message@4.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw=="],
 
-    "vite": ["vite@8.0.5", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.4", "postcss": "^8.5.8", "rolldown": "1.0.0-rc.12", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-nmu43Qvq9UopTRfMx2jOYW5l16pb3iDC1JH6yMuPkpVbzK0k+L7dfsEDH4jRgYFmsg0sTAqkojoZgzLMlwHsCQ=="],
+    "vite": ["vite@8.0.1", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.3", "postcss": "^8.5.8", "rolldown": "1.0.0-rc.10", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.27.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-wt+Z2qIhfFt85uiyRt5LPU4oVEJBXj8hZNWKeqFG4gRG/0RaRGJ7njQCwzFVjO+v4+Ipmf5CY7VdmZRAYYBPHw=="],
 
     "vite-tsconfig-paths": ["vite-tsconfig-paths@6.1.1", "", { "dependencies": { "debug": "^4.1.1", "globrex": "^0.1.2", "tsconfck": "^3.0.3" }, "peerDependencies": { "vite": "*" } }, "sha512-2cihq7zliibCCZ8P9cKJrQBkfgdvcFkOOc3Y02o3GWUDLgqjWsZudaoiuOwO/gzTzy17cS5F7ZPo4bsnS4DGkg=="],
 
@@ -1400,10 +1492,14 @@
 
     "@radix-ui/react-collection/@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-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-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-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-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-dropdown-menu/@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=="],
@@ -1416,14 +1512,14 @@
 
     "@radix-ui/react-menu/@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-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-popper/@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-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-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-primitive/@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-roving-focus/@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-roving-focus/@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=="],
@@ -1436,6 +1532,12 @@
 
     "@radix-ui/react-select/@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-switch/@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-switch/@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-tabs/@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-tabs/@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=="],
@@ -1450,6 +1552,8 @@
 
     "@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=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.9.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA=="],
@@ -1492,7 +1596,7 @@
 
     "jsdom/undici": ["undici@7.24.5", "", {}, "sha512-3IWdCpjgxp15CbJnsi/Y9TCDE7HWVN19j1hmzVhoAkY/+CJx449tVxT5wZc1Gwg8J+P0LWvzlBzxYRnHJ+1i7Q=="],
 
-    "nitro/rolldown": ["rolldown@1.0.0-rc.10", "", { "dependencies": { "@oxc-project/types": "=0.120.0", "@rolldown/pluginutils": "1.0.0-rc.10" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.0.0-rc.10", "@rolldown/binding-darwin-arm64": "1.0.0-rc.10", "@rolldown/binding-darwin-x64": "1.0.0-rc.10", "@rolldown/binding-freebsd-x64": "1.0.0-rc.10", "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.10", "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.10", "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.10", "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.10", "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.10", "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.10", "@rolldown/binding-linux-x64-musl": "1.0.0-rc.10", "@rolldown/binding-openharmony-arm64": "1.0.0-rc.10", "@rolldown/binding-wasm32-wasi": "1.0.0-rc.10", "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.10", "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.10" }, "bin": { "rolldown": "bin/cli.mjs" } }, "sha512-q7j6vvarRFmKpgJUT8HCAUljkgzEp4LAhPlJUvQhA5LA1SUL36s5QCysMutErzL3EbNOZOkoziSx9iZC4FddKA=="],
+    "next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
 
     "parse-entities/@types/unist": ["@types/unist@2.0.11", "", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],
 
@@ -1506,82 +1610,34 @@
 
     "recast/source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
 
-    "rolldown/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.12", "", {}, "sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw=="],
+    "rolldown/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.10", "", {}, "sha512-UkVDEFk1w3mveXeKgaTuYfKWtPbvgck1dT8TUG3bnccrH0XtLTuAyfCoks4Q/M5ZGToSVJTIQYCzy2g/atAOeg=="],
 
     "strip-ansi/ansi-regex": ["ansi-regex@6.2.2", "", {}, "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg=="],
 
-    "vite/picomatch": ["picomatch@4.0.4", "", {}, "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="],
+    "@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=="],
 
-    "vitest/vite": ["vite@8.0.1", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.3", "postcss": "^8.5.8", "rolldown": "1.0.0-rc.10", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.27.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-wt+Z2qIhfFt85uiyRt5LPU4oVEJBXj8hZNWKeqFG4gRG/0RaRGJ7njQCwzFVjO+v4+Ipmf5CY7VdmZRAYYBPHw=="],
+    "@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=="],
 
-    "nitro/rolldown/@oxc-project/types": ["@oxc-project/types@0.120.0", "", {}, "sha512-k1YNu55DuvAip/MGE1FTsIuU3FUCn6v/ujG9V7Nq5Df/kX2CWb13hhwD0lmJGMGqE+bE1MXvv9SZVnMzEXlWcg=="],
+    "@radix-ui/react-dropdown-menu/@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=="],
 
-    "nitro/rolldown/@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.0-rc.10", "", { "os": "android", "cpu": "arm64" }, "sha512-jOHxwXhxmFKuXztiu1ORieJeTbx5vrTkcOkkkn2d35726+iwhrY1w/+nYY/AGgF12thg33qC3R1LMBF5tHTZHg=="],
+    "@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=="],
 
-    "nitro/rolldown/@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.0.0-rc.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-gED05Teg/vtTZbIJBc4VNMAxAFDUPkuO/rAIyyxZjTj1a1/s6z5TII/5yMGZ0uLRCifEtwUQn8OlYzuYc0m70w=="],
+    "@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=="],
 
-    "nitro/rolldown/@rolldown/binding-darwin-x64": ["@rolldown/binding-darwin-x64@1.0.0-rc.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-rI15NcM1mA48lqrIxVkHfAqcyFLcQwyXWThy+BQ5+mkKKPvSO26ir+ZDp36AgYoYVkqvMcdS8zOE6SeBsR9e8A=="],
+    "@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=="],
 
-    "nitro/rolldown/@rolldown/binding-freebsd-x64": ["@rolldown/binding-freebsd-x64@1.0.0-rc.10", "", { "os": "freebsd", "cpu": "x64" }, "sha512-XZRXHdTa+4ME1MuDVp021+doQ+z6Ei4CCFmNc5/sKbqb8YmkiJdj8QKlV3rCI0AJtAeSB5n0WGPuJWNL9p/L2w=="],
+    "@radix-ui/react-roving-focus/@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=="],
 
-    "nitro/rolldown/@rolldown/binding-linux-arm-gnueabihf": ["@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.10", "", { "os": "linux", "cpu": "arm" }, "sha512-R0SQMRluISSLzFE20sPWYHVmJdDQnRyc/FzSCN72BqQmh2SOZUFG+N3/vBZpR4C6WpEUVYJLrYUXaj43sJsNLA=="],
+    "@radix-ui/react-scroll-area/@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=="],
 
-    "nitro/rolldown/@rolldown/binding-linux-arm64-gnu": ["@rolldown/binding-linux-arm64-gnu@1.0.0-rc.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-Y1reMrV/o+cwpduYhJuOE3OMKx32RMYCidf14y+HssARRmhDuWXJ4yVguDg2R/8SyyGNo+auzz64LnPK9Hq6jg=="],
+    "@radix-ui/react-switch/@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=="],
 
-    "nitro/rolldown/@rolldown/binding-linux-arm64-musl": ["@rolldown/binding-linux-arm64-musl@1.0.0-rc.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-vELN+HNb2IzuzSBUOD4NHmP9yrGwl1DVM29wlQvx1OLSclL0NgVWnVDKl/8tEks79EFek/kebQKnNJkIAA4W2g=="],
+    "@radix-ui/react-tabs/@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=="],
 
-    "nitro/rolldown/@rolldown/binding-linux-ppc64-gnu": ["@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.10", "", { "os": "linux", "cpu": "ppc64" }, "sha512-ZqrufYTgzxbHwpqOjzSsb0UV/aV2TFIY5rP8HdsiPTv/CuAgCRjM6s9cYFwQ4CNH+hf9Y4erHW1GjZuZ7WoI7w=="],
+    "@radix-ui/react-toggle-group/@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=="],
 
-    "nitro/rolldown/@rolldown/binding-linux-s390x-gnu": ["@rolldown/binding-linux-s390x-gnu@1.0.0-rc.10", "", { "os": "linux", "cpu": "s390x" }, "sha512-gSlmVS1FZJSRicA6IyjoRoKAFK7IIHBs7xJuHRSmjImqk3mPPWbR7RhbnfH2G6bcmMEllCt2vQ/7u9e6bBnByg=="],
+    "@radix-ui/react-toggle/@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=="],
 
-    "nitro/rolldown/@rolldown/binding-linux-x64-gnu": ["@rolldown/binding-linux-x64-gnu@1.0.0-rc.10", "", { "os": "linux", "cpu": "x64" }, "sha512-eOCKUpluKgfObT2pHjztnaWEIbUabWzk3qPZ5PuacuPmr4+JtQG4k2vGTY0H15edaTnicgU428XW/IH6AimcQw=="],
-
-    "nitro/rolldown/@rolldown/binding-linux-x64-musl": ["@rolldown/binding-linux-x64-musl@1.0.0-rc.10", "", { "os": "linux", "cpu": "x64" }, "sha512-Xdf2jQbfQowJnLcgYfD/m0Uu0Qj5OdxKallD78/IPPfzaiaI4KRAwZzHcKQ4ig1gtg1SuzC7jovNiM2TzQsBXA=="],
-
-    "nitro/rolldown/@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.0.0-rc.10", "", { "os": "none", "cpu": "arm64" }, "sha512-o1hYe8hLi1EY6jgPFyxQgQ1wcycX+qz8eEbVmot2hFkgUzPxy9+kF0u0NIQBeDq+Mko47AkaFFaChcvZa9UX9Q=="],
-
-    "nitro/rolldown/@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.0.0-rc.10", "", { "dependencies": { "@napi-rs/wasm-runtime": "^1.1.1" }, "cpu": "none" }, "sha512-Ugv9o7qYJudqQO5Y5y2N2SOo6S4WiqiNOpuQyoPInnhVzCY+wi/GHltcLHypG9DEUYMB0iTB/huJrpadiAcNcA=="],
-
-    "nitro/rolldown/@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.0.0-rc.10", "", { "os": "win32", "cpu": "arm64" }, "sha512-7UODQb4fQUNT/vmgDZBl3XOBAIOutP5R3O/rkxg0aLfEGQ4opbCgU5vOw/scPe4xOqBwL9fw7/RP1vAMZ6QlAQ=="],
-
-    "nitro/rolldown/@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.0.0-rc.10", "", { "os": "win32", "cpu": "x64" }, "sha512-PYxKHMVHOb5NJuDL53vBUl1VwUjymDcYI6rzpIni0C9+9mTiJedvUxSk7/RPp7OOAm3v+EjgMu9bIy3N6b408w=="],
-
-    "nitro/rolldown/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.10", "", {}, "sha512-UkVDEFk1w3mveXeKgaTuYfKWtPbvgck1dT8TUG3bnccrH0XtLTuAyfCoks4Q/M5ZGToSVJTIQYCzy2g/atAOeg=="],
-
-    "vitest/vite/rolldown": ["rolldown@1.0.0-rc.10", "", { "dependencies": { "@oxc-project/types": "=0.120.0", "@rolldown/pluginutils": "1.0.0-rc.10" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.0.0-rc.10", "@rolldown/binding-darwin-arm64": "1.0.0-rc.10", "@rolldown/binding-darwin-x64": "1.0.0-rc.10", "@rolldown/binding-freebsd-x64": "1.0.0-rc.10", "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.10", "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.10", "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.10", "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.10", "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.10", "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.10", "@rolldown/binding-linux-x64-musl": "1.0.0-rc.10", "@rolldown/binding-openharmony-arm64": "1.0.0-rc.10", "@rolldown/binding-wasm32-wasi": "1.0.0-rc.10", "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.10", "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.10" }, "bin": { "rolldown": "bin/cli.mjs" } }, "sha512-q7j6vvarRFmKpgJUT8HCAUljkgzEp4LAhPlJUvQhA5LA1SUL36s5QCysMutErzL3EbNOZOkoziSx9iZC4FddKA=="],
-
-    "vitest/vite/rolldown/@oxc-project/types": ["@oxc-project/types@0.120.0", "", {}, "sha512-k1YNu55DuvAip/MGE1FTsIuU3FUCn6v/ujG9V7Nq5Df/kX2CWb13hhwD0lmJGMGqE+bE1MXvv9SZVnMzEXlWcg=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.0-rc.10", "", { "os": "android", "cpu": "arm64" }, "sha512-jOHxwXhxmFKuXztiu1ORieJeTbx5vrTkcOkkkn2d35726+iwhrY1w/+nYY/AGgF12thg33qC3R1LMBF5tHTZHg=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.0.0-rc.10", "", { "os": "darwin", "cpu": "arm64" }, "sha512-gED05Teg/vtTZbIJBc4VNMAxAFDUPkuO/rAIyyxZjTj1a1/s6z5TII/5yMGZ0uLRCifEtwUQn8OlYzuYc0m70w=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-darwin-x64": ["@rolldown/binding-darwin-x64@1.0.0-rc.10", "", { "os": "darwin", "cpu": "x64" }, "sha512-rI15NcM1mA48lqrIxVkHfAqcyFLcQwyXWThy+BQ5+mkKKPvSO26ir+ZDp36AgYoYVkqvMcdS8zOE6SeBsR9e8A=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-freebsd-x64": ["@rolldown/binding-freebsd-x64@1.0.0-rc.10", "", { "os": "freebsd", "cpu": "x64" }, "sha512-XZRXHdTa+4ME1MuDVp021+doQ+z6Ei4CCFmNc5/sKbqb8YmkiJdj8QKlV3rCI0AJtAeSB5n0WGPuJWNL9p/L2w=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-linux-arm-gnueabihf": ["@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.10", "", { "os": "linux", "cpu": "arm" }, "sha512-R0SQMRluISSLzFE20sPWYHVmJdDQnRyc/FzSCN72BqQmh2SOZUFG+N3/vBZpR4C6WpEUVYJLrYUXaj43sJsNLA=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-linux-arm64-gnu": ["@rolldown/binding-linux-arm64-gnu@1.0.0-rc.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-Y1reMrV/o+cwpduYhJuOE3OMKx32RMYCidf14y+HssARRmhDuWXJ4yVguDg2R/8SyyGNo+auzz64LnPK9Hq6jg=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-linux-arm64-musl": ["@rolldown/binding-linux-arm64-musl@1.0.0-rc.10", "", { "os": "linux", "cpu": "arm64" }, "sha512-vELN+HNb2IzuzSBUOD4NHmP9yrGwl1DVM29wlQvx1OLSclL0NgVWnVDKl/8tEks79EFek/kebQKnNJkIAA4W2g=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-linux-ppc64-gnu": ["@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.10", "", { "os": "linux", "cpu": "ppc64" }, "sha512-ZqrufYTgzxbHwpqOjzSsb0UV/aV2TFIY5rP8HdsiPTv/CuAgCRjM6s9cYFwQ4CNH+hf9Y4erHW1GjZuZ7WoI7w=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-linux-s390x-gnu": ["@rolldown/binding-linux-s390x-gnu@1.0.0-rc.10", "", { "os": "linux", "cpu": "s390x" }, "sha512-gSlmVS1FZJSRicA6IyjoRoKAFK7IIHBs7xJuHRSmjImqk3mPPWbR7RhbnfH2G6bcmMEllCt2vQ/7u9e6bBnByg=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-linux-x64-gnu": ["@rolldown/binding-linux-x64-gnu@1.0.0-rc.10", "", { "os": "linux", "cpu": "x64" }, "sha512-eOCKUpluKgfObT2pHjztnaWEIbUabWzk3qPZ5PuacuPmr4+JtQG4k2vGTY0H15edaTnicgU428XW/IH6AimcQw=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-linux-x64-musl": ["@rolldown/binding-linux-x64-musl@1.0.0-rc.10", "", { "os": "linux", "cpu": "x64" }, "sha512-Xdf2jQbfQowJnLcgYfD/m0Uu0Qj5OdxKallD78/IPPfzaiaI4KRAwZzHcKQ4ig1gtg1SuzC7jovNiM2TzQsBXA=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.0.0-rc.10", "", { "os": "none", "cpu": "arm64" }, "sha512-o1hYe8hLi1EY6jgPFyxQgQ1wcycX+qz8eEbVmot2hFkgUzPxy9+kF0u0NIQBeDq+Mko47AkaFFaChcvZa9UX9Q=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.0.0-rc.10", "", { "dependencies": { "@napi-rs/wasm-runtime": "^1.1.1" }, "cpu": "none" }, "sha512-Ugv9o7qYJudqQO5Y5y2N2SOo6S4WiqiNOpuQyoPInnhVzCY+wi/GHltcLHypG9DEUYMB0iTB/huJrpadiAcNcA=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.0.0-rc.10", "", { "os": "win32", "cpu": "arm64" }, "sha512-7UODQb4fQUNT/vmgDZBl3XOBAIOutP5R3O/rkxg0aLfEGQ4opbCgU5vOw/scPe4xOqBwL9fw7/RP1vAMZ6QlAQ=="],
-
-    "vitest/vite/rolldown/@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.0.0-rc.10", "", { "os": "win32", "cpu": "x64" }, "sha512-PYxKHMVHOb5NJuDL53vBUl1VwUjymDcYI6rzpIni0C9+9mTiJedvUxSk7/RPp7OOAm3v+EjgMu9bIy3N6b408w=="],
-
-    "vitest/vite/rolldown/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.10", "", {}, "sha512-UkVDEFk1w3mveXeKgaTuYfKWtPbvgck1dT8TUG3bnccrH0XtLTuAyfCoks4Q/M5ZGToSVJTIQYCzy2g/atAOeg=="],
+    "@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=="],
   }
 }

convex/_generated/api.d.ts

@@ -77,7 +77,6 @@ import type * as lib_reservedSlugs from "../lib/reservedSlugs.js";
 import type * as lib_searchText from "../lib/searchText.js";
 import type * as lib_securityPrompt from "../lib/securityPrompt.js";
 import type * as lib_skillBackfill from "../lib/skillBackfill.js";
-import type * as lib_skillCapabilityTags from "../lib/skillCapabilityTags.js";
 import type * as lib_skillPublish from "../lib/skillPublish.js";
 import type * as lib_skillQuality from "../lib/skillQuality.js";
 import type * as lib_skillSafety from "../lib/skillSafety.js";
@@ -100,6 +99,7 @@ import type * as publishers from "../publishers.js";
 import type * as rateLimits from "../rateLimits.js";
 import type * as search from "../search.js";
 import type * as seed from "../seed.js";
+import type * as seedDemo from "../seedDemo.js";
 import type * as seedSouls from "../seedSouls.js";
 import type * as skillStatEvents from "../skillStatEvents.js";
 import type * as skillTransfers from "../skillTransfers.js";
@@ -193,7 +193,6 @@ declare const fullApi: ApiFromModules<{
   "lib/searchText": typeof lib_searchText;
   "lib/securityPrompt": typeof lib_securityPrompt;
   "lib/skillBackfill": typeof lib_skillBackfill;
-  "lib/skillCapabilityTags": typeof lib_skillCapabilityTags;
   "lib/skillPublish": typeof lib_skillPublish;
   "lib/skillQuality": typeof lib_skillQuality;
   "lib/skillSafety": typeof lib_skillSafety;
@@ -216,6 +215,7 @@ declare const fullApi: ApiFromModules<{
   rateLimits: typeof rateLimits;
   search: typeof search;
   seed: typeof seed;
+  seedDemo: typeof seedDemo;
   seedSouls: typeof seedSouls;
   skillStatEvents: typeof skillStatEvents;
   skillTransfers: typeof skillTransfers;

convex/devSeed.ts

@@ -237,74 +237,6 @@ xuezh snapshot --profile default
 xuezh review next --limit 10
 xuezh audio process-voice --file ./utterance.wav
 \`\`\`
-`,
-  },
-  {
-    slug: "hanzi-helper",
-    displayName: "汉字助手",
-    summary: "汉字学习与分析工具，支持笔画查询、部首检索和组词生成。",
-    version: "0.1.0",
-    metadata: {
-      clawdbot: {
-        nix: {
-          plugin: "github:example/hanzi-helper",
-          systems: ["aarch64-darwin", "x86_64-linux"],
-        },
-        config: {
-          requiredEnv: ["HANZI_DB_PATH"],
-          stateDirs: [".config/hanzi"],
-          example:
-            'config = { env = { HANZI_DB_PATH = ".config/hanzi/db"; }; stateDirs = [ ".config/hanzi" ]; };',
-        },
-        cliHelp: `汉字助手 - Chinese character learning and analysis
-
-Usage:
-  hanzi-helper [command]
-
-Available Commands:
-  lookup      查询汉字信息（笔画、部首、释义）
-  radical     按部首检索汉字
-  stroke      按笔画数筛选汉字
-  words       生成汉字组词
-  practice    练习汉字书写
-  quiz        汉字听写测试
-
-Flags:
-  -h, --help   help for hanzi-helper
-  --json       Output JSON
-`,
-      },
-    },
-    rawSkillMd: `---
-name: hanzi-helper
-description: 汉字学习与分析工具，提供笔画查询、部首检索、组词生成和汉字听写练习功能。
----
-
-# 汉字助手
-
-## 功能介绍
-
-汉字助手是一个强大的中文汉字学习工具，帮助用户深入了解每个汉字的结构和含义。
-
-## CLI
-
-\`\`\`bash
-hanzi-helper lookup --char 学
-hanzi-helper radical --name 木
-hanzi-helper stroke --count 8
-hanzi-helper words --char 大 --limit 20
-\`\`\`
-
-## 使用场景
-
-- **汉字查询**：输入任意汉字，查看笔画数、部首、繁体形式和基本释义
-- **部首检索**：按部首浏览相关汉字，了解汉字的分类规律
-- **组词生成**：输入一个汉字，自动生成常用词语和成语
-- **听写练习**：随机生成汉字听写测试，巩固学习效果
-
-## 学习建议
-
-建议每天学习五个新汉字，结合组词和例句加深记忆。坚持使用听写练习功能可以有效提高汉字识别能力。
 `,
   },
 ];
@@ -469,6 +401,11 @@ export const seedSkillMutation = internalMutation({
       createdAt: now,
       updatedAt: now,
     });
+    await ctx.db.patch(userId, {
+      publishedSkills: 1,
+      totalStars: 0,
+      totalDownloads: 0,
+    });
 
     const versionId = await ctx.db.insert("skillVersions", {
       skillId,

convex/devSeedExtra.ts

@@ -448,22 +448,6 @@ const EXTRA_SEED_SKILLS: SeedSkillSpec[] = [
     ["SSH_KEY_DIR"],
     ["generate", "rotate", "deploy", "list", "revoke"],
   ),
-
-  // CJK Language Support (2)
-  makeSkill(
-    "nihongo-check",
-    "日本語チェッカー",
-    "日本語文章の文法チェックと翻訳支援ツール。Japanese grammar checker and translation assistant.",
-    ["NIHONGO_API_KEY"],
-    ["check", "translate", "kanji", "grammar", "vocabulary"],
-  ),
-  makeSkill(
-    "hangukgeo-helper",
-    "한국어 도우미",
-    "한국어 학습 보조 도구입니다. Korean language learning assistant with vocabulary and grammar support.",
-    ["HANGUL_API_KEY"],
-    ["learn", "quiz", "vocabulary", "grammar", "pronunciation"],
-  ),
 ];
 
 function injectMetadata(rawSkillMd: string, metadata: Record<string, unknown>) {

convex/httpApiV1.handlers.test.ts

@@ -2552,51 +2552,6 @@ describe("httpApiV1 handlers", () => {
     });
   });
 
-  it("packages detail returns stats for plugins", async () => {
-    const runQuery = vi.fn(async (_query: unknown, args: Record<string, unknown>) => {
-      if ("name" in args) {
-        return {
-          package: {
-            _id: "packages:demo-plugin",
-            name: "demo-plugin",
-            displayName: "Demo Plugin",
-            family: "code-plugin",
-            tags: {},
-            latestReleaseId: "packageReleases:1",
-            channel: "community",
-            isOfficial: false,
-            summary: "Plugin summary",
-            latestVersion: "1.2.3",
-            stats: { downloads: 7, installs: 3, stars: 2, versions: 4 },
-            createdAt: 1,
-            updatedAt: 2,
-          },
-          latestRelease: null,
-          owner: { _id: "users:owner", handle: "owner", displayName: "Owner" },
-        };
-      }
-      return null;
-    });
-    const runMutation = vi.fn().mockResolvedValue(okRate());
-
-    const response = await __handlers.packagesGetRouterV1Handler(
-      makeCtx({ runQuery, runMutation }),
-      new Request("https://example.com/api/v1/packages/demo-plugin"),
-    );
-
-    if (response.status !== 200) throw new Error(await response.text());
-    await expect(response.json()).resolves.toMatchObject({
-      package: {
-        name: "demo-plugin",
-        latestVersion: "1.2.3",
-        stats: { downloads: 7, installs: 3, stars: 2, versions: 4 },
-      },
-      owner: {
-        handle: "owner",
-      },
-    });
-  });
-
   it("packages file serves SKILL.md for skill README requests", async () => {
     const runQuery = vi.fn(async (_query: unknown, args: Record<string, unknown>) => {
       if ("name" in args) return null;

convex/httpApiV1/packagesV1.ts

@@ -1433,7 +1433,6 @@ type PublicPackageDocLike = {
   compatibility?: Doc<"packages">["compatibility"];
   capabilities?: Doc<"packages">["capabilities"];
   verification?: Doc<"packages">["verification"];
-  stats?: { downloads: number; installs: number; stars: number; versions: number };
   createdAt: number;
   updatedAt: number;
 };

convex/httpApiV1/shared.ts

@@ -1,4 +1,4 @@
-import { CliPublishRequestSchema, normalizeTextContentType, parseArk } from "clawhub-schema";
+import { CliPublishRequestSchema, parseArk } from "clawhub-schema";
 import { internal } from "../_generated/api";
 import type { Doc, Id } from "../_generated/dataModel";
 import type { ActionCtx } from "../_generated/server";
@@ -25,9 +25,7 @@ export function safeTextFileResponse(params: {
   size: number;
   headers?: HeadersInit;
 }) {
-  const contentType =
-    normalizeTextContentType(params.path, params.contentType) ?? params.contentType;
-  const isSvg = isSvgLike(contentType, params.path);
+  const isSvg = isSvgLike(params.contentType, params.path);
 
   // For any text response that a browser might try to render, lock it down.
   // In particular, this prevents SVG <foreignObject> script execution from reading
@@ -35,8 +33,8 @@ export function safeTextFileResponse(params: {
   const headers = mergeHeaders(
     params.headers,
     {
-      "Content-Type": contentType
-        ? `${contentType}; charset=utf-8`
+      "Content-Type": params.contentType
+        ? `${params.contentType}; charset=utf-8`
         : "text/plain; charset=utf-8",
       "Cache-Control": "private, max-age=60",
       ETag: params.sha256,

convex/httpApiV1/skillsV1.ts

@@ -1,11 +1,9 @@
 import { api, internal } from "../_generated/api";
-import { normalizeTextContentType } from "clawhub-schema";
 import type { Doc, Id } from "../_generated/dataModel";
 import type { ActionCtx } from "../_generated/server";
 import { getOptionalApiTokenUserId, requireApiTokenUser } from "../lib/apiTokenAuth";
 import { applyRateLimit, parseBearerToken } from "../lib/httpRateLimit";
 import { parseBooleanQueryParam, resolveBooleanQueryParam } from "../lib/httpUtils";
-import type { LlmEvalDimension } from "../lib/securityPrompt";
 import { publishVersionForUser } from "../skills";
 import {
   MAX_RAW_FILE_BYTES,
@@ -208,7 +206,7 @@ type SkillSecuritySnapshot = {
       normalizedStatus: NormalizedSecurityStatus;
       confidence: string | null;
       summary: string | null;
-      dimensions: LlmEvalDimension[] | null;
+      dimensions: NonNullable<Doc<"skillVersions">["llmAnalysis"]>["dimensions"] | null;
       guidance: string | null;
       findings: string | null;
       model: string | null;
@@ -264,7 +262,7 @@ function mergeSecurityStatuses(statuses: NormalizedSecurityStatus[]) {
 }
 
 function hasLlmDimensionWarnings(
-  dimensions: LlmEvalDimension[] | undefined,
+  dimensions: NonNullable<Doc<"skillVersions">["llmAnalysis"]>["dimensions"] | undefined,
 ) {
   if (!Array.isArray(dimensions)) return false;
   return dimensions.some((dimension) => {
@@ -735,7 +733,7 @@ export async function skillsGetRouterV1Handler(ctx: ActionCtx, request: Request)
             path: file.path,
             size: file.size,
             sha256: file.sha256,
-            contentType: normalizeTextContentType(file.path, file.contentType) ?? null,
+            contentType: file.contentType ?? null,
           })),
           security: security ?? undefined,
         },

convex/httpApiV1/starsV1.ts

@@ -22,10 +22,7 @@ export async function starsPostRouterV1Handler(ctx: ActionCtx, request: Request)
       skillId: skill._id,
     });
     return json(result, 200, rate.headers);
-  } catch (e) {
-    if (e instanceof Error && e.message === "Skill not found") {
-      return text("Skill not found", 404, rate.headers);
-    }
+  } catch {
     return text("Unauthorized", 401, rate.headers);
   }
 }

convex/lib/githubActionsOidc.test.ts

@@ -1,6 +1,6 @@
 /* @vitest-environment node */
 
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import {
   extractWorkflowFilenameFromWorkflowRef,
   verifyGitHubActionsTrustedPublishJwt,

convex/lib/moderationEngine.test.ts

@@ -92,173 +92,6 @@ describe("moderationEngine", () => {
     expect(result.status).toBe("suspicious");
   });
 
-  it("flags raw user placeholders embedded in generated Python source within markdown", () => {
-    const result = runStaticModerationScan({
-      slug: "word-document-organizer",
-      displayName: "Word Document Organizer",
-      summary: "Organize and restyle Word documents",
-      frontmatter: {},
-      metadata: {},
-      files: [{ path: "SKILL.md", size: 512 }],
-      fileContents: [
-        {
-          path: "SKILL.md",
-          content: [
-            "Generate a Python helper like this:",
-            "```python",
-            'doc_path = "${document_path}"',
-            'output_path = "${output_path}" if "${output_path}" else doc_path',
-            'template = "${style_template}"',
-            "```",
-          ].join("\n"),
-        },
-      ],
-    });
-
-    expect(result.reasonCodes).toContain("suspicious.generated_source_template_injection");
-    expect(result.status).toBe("suspicious");
-  });
-
-  it("does not flag ordinary placeholder usage outside generated source assignments", () => {
-    const result = runStaticModerationScan({
-      slug: "api-docs",
-      displayName: "API Docs",
-      summary: "Shows users how to call an API",
-      frontmatter: {},
-      metadata: {},
-      files: [{ path: "SKILL.md", size: 256 }],
-      fileContents: [
-        {
-          path: "SKILL.md",
-          content: [
-            "Use this request template:",
-            "```bash",
-            'curl "https://example.com/search?q=${query}"',
-            "```",
-          ].join("\n"),
-        },
-      ],
-    });
-
-    expect(result.reasonCodes).not.toContain("suspicious.generated_source_template_injection");
-    expect(result.status).toBe("clean");
-  });
-
-  it("flags hardcoded connection_id UUIDs in markdown examples", () => {
-    const result = runStaticModerationScan({
-      slug: "api-gateway",
-      displayName: "API Gateway",
-      summary: "Route API calls through an authenticated gateway",
-      frontmatter: {},
-      metadata: {},
-      files: [{ path: "SKILL.md", size: 256 }],
-      fileContents: [
-        {
-          path: "SKILL.md",
-          content: [
-            "Use this payload:",
-            "```json",
-            '{"connection_id": "21fd90f9-5935-43cd-b6c8-bde9d915ca80"}',
-            "```",
-          ].join("\n"),
-        },
-      ],
-    });
-
-    expect(result.reasonCodes).toContain("suspicious.exposed_resource_identifier");
-    expect(result.status).toBe("suspicious");
-    expect(
-      result.findings.find((finding) => finding.message.includes("connection_id"))?.message,
-    ).toContain("connection_id");
-  });
-
-  it("flags hardcoded Google Sheets spreadsheet IDs in markdown examples", () => {
-    const result = runStaticModerationScan({
-      slug: "api-gateway",
-      displayName: "API Gateway",
-      summary: "Route API calls through an authenticated gateway",
-      frontmatter: {},
-      metadata: {},
-      files: [{ path: "SKILL.md", size: 256 }],
-      fileContents: [
-        {
-          path: "SKILL.md",
-          content: [
-            "Call the Sheets bridge like this:",
-            "```python",
-            "req = urllib.request.Request('https://gateway.maton.ai/google-sheets/v4/spreadsheets/122BS1sFN2RKL8AOUQjkLdubzOwgqzPT64KfZ2rvYI4M/values/Sheet1!A1:B2')",
-            "```",
-          ].join("\n"),
-        },
-      ],
-    });
-
-    expect(result.reasonCodes).toContain("suspicious.exposed_resource_identifier");
-    expect(result.status).toBe("suspicious");
-    expect(
-      result.findings.find((finding) => finding.message.includes("spreadsheet ID"))?.message,
-    ).toContain("spreadsheet ID");
-  });
-
-  it("does not flag placeholder resource identifiers in markdown examples", () => {
-    const result = runStaticModerationScan({
-      slug: "api-gateway",
-      displayName: "API Gateway",
-      summary: "Route API calls through an authenticated gateway",
-      frontmatter: {},
-      metadata: {},
-      files: [{ path: "SKILL.md", size: 256 }],
-      fileContents: [
-        {
-          path: "SKILL.md",
-          content: [
-            "Use placeholders in public docs:",
-            "```json",
-            '{"connection_id": "YOUR_CONNECTION_ID"}',
-            "```",
-            "```python",
-            "req = urllib.request.Request('https://gateway.maton.ai/google-sheets/v4/spreadsheets/YOUR_SPREADSHEET_ID/values/Sheet1!A1:B2')",
-            "```",
-          ].join("\n"),
-        },
-      ],
-    });
-
-    expect(result.reasonCodes).not.toContain("suspicious.exposed_resource_identifier");
-    expect(result.status).toBe("clean");
-  });
-
-  it("flags a real spreadsheet ID even when a placeholder URL appears first", () => {
-    const result = runStaticModerationScan({
-      slug: "api-gateway",
-      displayName: "API Gateway",
-      summary: "Route API calls through an authenticated gateway",
-      frontmatter: {},
-      metadata: {},
-      files: [{ path: "SKILL.md", size: 512 }],
-      fileContents: [
-        {
-          path: "SKILL.md",
-          content: [
-            "Placeholder example first:",
-            "```python",
-            "req = urllib.request.Request('https://gateway.maton.ai/google-sheets/v4/spreadsheets/YOUR_SPREADSHEET_ID/values/Sheet1!A1:B2')",
-            "```",
-            "Real leaked URL later:",
-            "```python",
-            "req = urllib.request.Request('https://gateway.maton.ai/google-sheets/v4/spreadsheets/122BS1sFN2RKL8AOUQjkLdubzOwgqzPT64KfZ2rvYI4M/values/Sheet1!A1:B2')",
-            "```",
-          ].join("\n"),
-        },
-      ],
-    });
-
-    expect(result.reasonCodes).toContain("suspicious.exposed_resource_identifier");
-    expect(
-      result.findings.find((finding) => finding.message.includes("spreadsheet ID"))?.line,
-    ).toBe(7);
-  });
-
   it("blocks obfuscated terminal install payload prompts in markdown", () => {
     const result = runStaticModerationScan({
       slug: "evil-installer",

convex/lib/moderationEngine.ts

@@ -50,14 +50,6 @@ const CODE_EXTENSION = /\.(js|ts|mjs|cjs|mts|cts|jsx|tsx|py|sh|bash|zsh|rb|go)$/
 const STANDARD_PORTS = new Set([80, 443, 8080, 8443, 3000]);
 const RAW_IP_URL_PATTERN = /https?:\/\/\d{1,3}(?:\.\d{1,3}){3}(?::\d+)?(?:\/|["'])/i;
 const INSTALL_PACKAGE_PATTERN = /installer-package\s*:\s*https?:\/\/[^\s"'`]+/i;
-const GENERATED_SOURCE_PLACEHOLDER_PATTERN =
-  /^\s*[A-Za-z_][A-Za-z0-9_]*\s*=.*["']\$\{[A-Za-z_][A-Za-z0-9_-]*\}["']/m;
-const GENERATED_SOURCE_CONTEXT_PATTERN =
-  /```(?:python|py|javascript|js|typescript|ts|shell|bash|sh)\b|cat\s*(?:>|>>)?\s*[^`\n]*\.(?:py|js|ts|sh)\b|python3?\b|node\b/i;
-const HARDCODED_CONNECTION_ID_PATTERN =
-  /["']connection_id["']\s*:\s*["'][0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}["']/i;
-const GOOGLE_SHEETS_SPREADSHEET_URL_PATTERN =
-  /https?:\/\/[^\s"'`]*\/spreadsheets\/([A-Za-z0-9_-]{20,})\/[^\s"'`]*/i;
 
 function hasMaliciousInstallPrompt(content: string) {
   const hasTerminalInstruction =
@@ -83,10 +75,6 @@ function truncateEvidence(evidence: string, maxLen = 160) {
   return `${evidence.slice(0, maxLen)}...`;
 }
 
-function looksLikePlaceholderIdentifier(identifier: string) {
-  return /^[A-Z0-9_]+$/.test(identifier) || /(your|example|placeholder)/i.test(identifier);
-}
-
 function addFinding(
   findings: ModerationFinding[],
   finding: Omit<ModerationFinding, "evidence"> & { evidence: string },
@@ -104,14 +92,6 @@ function findFirstLine(content: string, pattern: RegExp) {
   return { line: 1, text: lines[0] ?? "" };
 }
 
-function findLineAtIndex(content: string, index: number) {
-  const line = content.slice(0, index).split("\n").length;
-  const lineStart = content.lastIndexOf("\n", Math.max(0, index - 1)) + 1;
-  const nextNewline = content.indexOf("\n", index);
-  const lineEnd = nextNewline === -1 ? content.length : nextNewline;
-  return { line, text: content.slice(lineStart, lineEnd) };
-}
-
 function scanCodeFile(path: string, content: string, findings: ModerationFinding[]) {
   if (!CODE_EXTENSION.test(path)) return;
 
@@ -247,53 +227,6 @@ function scanMarkdownFile(path: string, content: string, findings: ModerationFin
       evidence: match.text,
     });
   }
-
-  if (
-    GENERATED_SOURCE_PLACEHOLDER_PATTERN.test(content) &&
-    GENERATED_SOURCE_CONTEXT_PATTERN.test(content)
-  ) {
-    const match = findFirstLine(content, GENERATED_SOURCE_PLACEHOLDER_PATTERN);
-    addFinding(findings, {
-      code: REASON_CODES.GENERATED_SOURCE_TEMPLATE,
-      severity: "critical",
-      file: path,
-      line: match.line,
-      message: "User-controlled placeholder is embedded directly into generated source code.",
-      evidence: match.text,
-    });
-  }
-
-  if (HARDCODED_CONNECTION_ID_PATTERN.test(content)) {
-    const match = findFirstLine(content, HARDCODED_CONNECTION_ID_PATTERN);
-    addFinding(findings, {
-      code: REASON_CODES.EXPOSED_RESOURCE_IDENTIFIER,
-      severity: "critical",
-      file: path,
-      line: match.line,
-      message: "Example code exposes a concrete connection_id instead of a placeholder.",
-      evidence: match.text,
-    });
-  }
-
-  const spreadsheetUrlPattern = new RegExp(
-    GOOGLE_SHEETS_SPREADSHEET_URL_PATTERN.source,
-    `${GOOGLE_SHEETS_SPREADSHEET_URL_PATTERN.flags.replaceAll("g", "")}g`,
-  );
-  for (const spreadsheetUrlMatch of content.matchAll(spreadsheetUrlPattern)) {
-    const spreadsheetId = spreadsheetUrlMatch[1];
-    if (!spreadsheetId || looksLikePlaceholderIdentifier(spreadsheetId)) continue;
-
-    const match = findLineAtIndex(content, spreadsheetUrlMatch.index ?? 0);
-    addFinding(findings, {
-      code: REASON_CODES.EXPOSED_RESOURCE_IDENTIFIER,
-      severity: "critical",
-      file: path,
-      line: match.line,
-      message: "Example code exposes a concrete Google Sheets spreadsheet ID instead of a placeholder.",
-      evidence: match.text,
-    });
-    break;
-  }
 }
 
 function scanManifestFile(path: string, content: string, findings: ModerationFinding[]) {

convex/lib/moderationReasonCodes.ts

@@ -12,13 +12,11 @@ export type ModerationFinding = {
   evidence: string;
 };
 
-export const MODERATION_ENGINE_VERSION = "v2.4.0";
+export const MODERATION_ENGINE_VERSION = "v2.2.0";
 
 export const REASON_CODES = {
   DANGEROUS_EXEC: "suspicious.dangerous_exec",
   DYNAMIC_CODE: "suspicious.dynamic_code_execution",
-  GENERATED_SOURCE_TEMPLATE: "suspicious.generated_source_template_injection",
-  EXPOSED_RESOURCE_IDENTIFIER: "suspicious.exposed_resource_identifier",
   CREDENTIAL_HARVEST: "suspicious.env_credential_access",
   EXFILTRATION: "suspicious.potential_exfiltration",
   OBFUSCATED_CODE: "suspicious.obfuscated_code",

convex/lib/packageSearchDigest.ts

@@ -5,8 +5,6 @@ function pick<T extends Record<string, unknown>, K extends keyof T>(obj: T, keys
   return Object.fromEntries(keys.map((key) => [key, obj[key]])) as Pick<T, K>;
 }
 
-type SharedPackageKey = Extract<keyof Doc<"packages">, keyof Doc<"packageSearchDigest">>;
-
 const SHARED_KEYS = [
   "name",
   "normalizedName",
@@ -24,7 +22,7 @@ const SHARED_KEYS = [
   "softDeletedAt",
   "createdAt",
   "updatedAt",
-] as const satisfies readonly SharedPackageKey[];
+] as const satisfies readonly (keyof Doc<"packages"> & keyof Doc<"packageSearchDigest">)[];
 
 const CAPABILITY_SHARED_KEYS = [
   "packageId",

convex/lib/searchText.test.ts

@@ -47,55 +47,4 @@ describe("searchText", () => {
   it("normalize uses lowercase", () => {
     expect(__test.normalize("AbC")).toBe("abc");
   });
-
-  // CJK (Chinese, Japanese, Korean) support tests
-  describe("CJK tokenization", () => {
-    it("tokenizes Chinese text using Intl.Segmenter", () => {
-      const tokens = tokenize("中文搜索");
-      expect(tokens.length).toBeGreaterThan(0);
-      expect(tokens).toContain("中文");
-      expect(tokens).toContain("搜索");
-    });
-
-    it("tokenizes mixed Chinese and English text", () => {
-      const tokens = tokenize("React 组件开发");
-      expect(tokens).toContain("react");
-      expect(tokens.some((t) => t.includes("组") || t.includes("件"))).toBe(true);
-    });
-
-    it("matches Chinese query tokens against Chinese skill names", () => {
-      const queryTokens = tokenize("翻译");
-      const skillName = "AI翻译助手";
-      expect(matchesExactTokens(queryTokens, [skillName])).toBe(true);
-    });
-
-    it("matches partial Chinese words", () => {
-      const queryTokens = tokenize("助手");
-      const skillName = "AI翻译助手";
-      expect(matchesExactTokens(queryTokens, [skillName])).toBe(true);
-    });
-
-    it("handles Japanese text", () => {
-      const tokens = tokenize("こんにちは世界");
-      expect(tokens.length).toBeGreaterThan(0);
-    });
-
-    it("handles Korean text", () => {
-      const tokens = tokenize("안녕하세요");
-      expect(tokens.length).toBeGreaterThan(0);
-    });
-
-    it("returns empty array for empty or whitespace-only input", () => {
-      expect(tokenize("")).toEqual([]);
-      expect(tokenize("   ")).toEqual([]);
-      expect(tokenize("!!!")).toEqual([]);
-    });
-
-    it("detects CJK language correctly", () => {
-      expect(__test.detectCJKLanguage("中文")).toBe("zh");
-      expect(__test.detectCJKLanguage("こんにちは")).toBe("ja");
-      expect(__test.detectCJKLanguage("안녕하세요")).toBe("ko");
-      expect(__test.detectCJKLanguage("hello")).toBeNull();
-    });
-  });
 });

convex/lib/searchText.ts

@@ -1,135 +1,12 @@
-const CJK_RE = /[\u4e00-\u9fff\u3400-\u4dbf\u3041-\u3096\u30a1-\u30fa\uac00-\ud7af]/;
-
-const hasSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl;
-
-let zhSegmenter: Intl.Segmenter | null = null;
-let jaSegmenter: Intl.Segmenter | null = null;
-let koSegmenter: Intl.Segmenter | null = null;
-
-function getZhSegmenter(): Intl.Segmenter {
-  if (!zhSegmenter) {
-    zhSegmenter = new Intl.Segmenter("zh-CN", { granularity: "word" });
-  }
-  return zhSegmenter;
-}
-
-function getJaSegmenter(): Intl.Segmenter {
-  if (!jaSegmenter) {
-    jaSegmenter = new Intl.Segmenter("ja", { granularity: "word" });
-  }
-  return jaSegmenter;
-}
-
-function getKoSegmenter(): Intl.Segmenter {
-  if (!koSegmenter) {
-    koSegmenter = new Intl.Segmenter("ko", { granularity: "word" });
-  }
-  return koSegmenter;
-}
-
-/**
- * Fallback: split CJK text into individual characters.
- * Used when Intl.Segmenter is unavailable (e.g. stripped V8 runtime).
- */
-function segmentCJKByChar(text: string): string[] {
-  const tokens: string[] = [];
-  for (const ch of text) {
-    if (CJK_RE.test(ch)) {
-      tokens.push(ch);
-    }
-  }
-  return tokens;
-}
+const WORD_RE = /[a-z0-9]+/g;
 
 function normalize(value: string) {
   return value.toLowerCase();
 }
 
-/**
- * Detect the primary CJK language in a text
- * Returns 'zh' for Chinese, 'ja' for Japanese, 'ko' for Korean, or null
- */
-function detectCJKLanguage(text: string): "zh" | "ja" | "ko" | null {
-  const chineseCount = (text.match(/[\u4e00-\u9fff\u3400-\u4dbf]/g) || []).length;
-  const hiraganaCount = (text.match(/[\u3040-\u309f]/g) || []).length;
-  const katakanaCount = (text.match(/[\u30a0-\u30ff]/g) || []).length;
-  const hangulCount = (text.match(/[\uac00-\ud7af]/g) || []).length;
-  if (hiraganaCount + katakanaCount > 0) {
-    return "ja";
-  }
-  if (hangulCount > 0) {
-    return "ko";
-  }
-  if (chineseCount > 0) {
-    return "zh";
-  }
-  return null;
-}
-
-/**
- * Segment CJK text using Intl.Segmenter, falling back to character-level
- * tokenization when the API is unavailable.
- */
-function segmentCJK(text: string): string[] {
-  if (!hasSegmenter) return segmentCJKByChar(text);
-
-  const lang = detectCJKLanguage(text);
-  if (!lang) return [];
-
-  let segmenter: Intl.Segmenter;
-  switch (lang) {
-    case "ja":
-      segmenter = getJaSegmenter();
-      break;
-    case "ko":
-      segmenter = getKoSegmenter();
-      break;
-    default:
-      segmenter = getZhSegmenter();
-  }
-
-  const segments: string[] = [];
-  for (const { segment, isWordLike } of segmenter.segment(text)) {
-    const trimmed = segment.trim();
-    if (trimmed && isWordLike) {
-      segments.push(trimmed);
-    }
-  }
-  return segments;
-}
-
-/**
- * Tokenize text for search, supporting both English and CJK languages
- *
- * For English: uses word boundaries (whitespace, punctuation)
- * For CJK: uses Intl.Segmenter for proper word segmentation
- */
 export function tokenize(value: string): string[] {
   if (!value) return [];
-
-  const normalized = normalize(value);
-
-  if (!CJK_RE.test(normalized)) {
-    return normalized.match(/[a-z0-9]+/g) ?? [];
-  }
-
-  const tokens: string[] = [];
-
-  const parts = normalized.split(/([^\u4e00-\u9fff\u3400-\u4dbf\u3041-\u3096\u30a1-\u30fa\uac00-\ud7af]+)/g);
-
-  for (const part of parts) {
-    if (!part.trim()) continue;
-
-    if (CJK_RE.test(part)) {
-      const cjkTokens = segmentCJK(part);
-      tokens.push(...cjkTokens);
-    } else {
-      const asciiTokens = part.match(/[a-z0-9]+/g) ?? [];
-      tokens.push(...asciiTokens);
-    }
-  }
-
-  return tokens;
+  return normalize(value).match(WORD_RE) ?? [];
 }
 
 export function matchesExactTokens(
@@ -147,8 +24,4 @@ export function matchesExactTokens(
   );
 }
 
-export const __test = {
-  normalize,
-  detectCJKLanguage,
-  segmentCJKByChar,
-};
+export const __test = { normalize, tokenize, matchesExactTokens };

convex/lib/skillPublish.ts

@@ -1,5 +1,4 @@
 import { ConvexError } from "convex/values";
-import { normalizeTextContentType } from "clawhub-schema";
 import semver from "semver";
 import { api, internal } from "../_generated/api";
 import type { Doc, Id } from "../_generated/dataModel";
@@ -114,7 +113,6 @@ export async function publishVersionForUser(
   const sanitizedFiles = args.files.map((file) => ({
     ...file,
     path: sanitizePath(file.path),
-    contentType: normalizeTextContentType(file.path, file.contentType),
   }));
   if (sanitizedFiles.some((file) => !file.path)) {
     throw new ConvexError("Invalid file paths");

convex/lib/skillSearchDigest.ts

@@ -6,8 +6,6 @@ function pick<T extends Record<string, unknown>, K extends keyof T>(obj: T, keys
   return Object.fromEntries(keys.map((k) => [k, obj[k]])) as Pick<T, K>;
 }
 
-type SharedSkillKey = Extract<keyof Doc<"skills">, keyof Doc<"skillSearchDigest">>;
-
 /**
  * Fields shared 1:1 between `skills` and `skillSearchDigest` (same name,
  * same type).  Used by both `extractDigestFields` and `digestToHydratableSkill`
@@ -37,7 +35,7 @@ const SHARED_KEYS = [
   "moderationReason",
   "createdAt",
   "updatedAt",
-] as const satisfies readonly SharedSkillKey[];
+] as const satisfies readonly (keyof Doc<"skills"> & keyof Doc<"skillSearchDigest">)[];
 
 /** Fields stored in the skillSearchDigest table. */
 export type SkillSearchDigestFields = Pick<Doc<"skills">, (typeof SHARED_KEYS)[number]> & {

convex/lib/soulPublish.ts

@@ -1,5 +1,4 @@
 import { ConvexError } from "convex/values";
-import { normalizeTextContentType } from "clawhub-schema";
 import semver from "semver";
 import { internal } from "../_generated/api";
 import type { Doc, Id } from "../_generated/dataModel";
@@ -102,11 +101,7 @@ export async function publishSoulVersionForUser(
   const sanitizedFiles = args.files.map((file) => {
     const path = sanitizePath(file.path);
     if (!path) throw new ConvexError("Invalid file paths");
-    return {
-      ...file,
-      path,
-      contentType: normalizeTextContentType(file.path, file.contentType),
-    };
+    return { ...file, path };
   });
   const publishFiles = sanitizedFiles.filter((file) => !isMacJunkPath(file.path));
   if (publishFiles.some((file) => !isTextFile(file.path, file.contentType ?? undefined))) {

convex/lib/userSkillStats.ts

@@ -0,0 +1,67 @@
+import type { Doc, Id } from "../_generated/dataModel";
+import type { MutationCtx } from "../_generated/server";
+
+function getSkillContribution(skill: Doc<"skills">) {
+  if (skill.softDeletedAt) {
+    return { publishedSkills: 0, totalStars: 0, totalDownloads: 0 };
+  }
+
+  return {
+    publishedSkills: 1,
+    totalStars: skill.stats?.stars ?? 0,
+    totalDownloads: skill.stats?.downloads ?? 0,
+  };
+}
+
+async function patchUserStats(
+  ctx: Pick<MutationCtx, "db">,
+  userId: Id<"users">,
+  delta: { publishedSkills: number; totalStars: number; totalDownloads: number },
+) {
+  const user = await ctx.db.get(userId);
+  if (!user) return;
+
+  await ctx.db.patch(userId, {
+    publishedSkills: Math.max(0, (user.publishedSkills ?? 0) + delta.publishedSkills),
+    totalStars: Math.max(0, (user.totalStars ?? 0) + delta.totalStars),
+    totalDownloads: Math.max(0, (user.totalDownloads ?? 0) + delta.totalDownloads),
+  });
+}
+
+export async function adjustUserSkillStatsForSkillChange(
+  ctx: Pick<MutationCtx, "db">,
+  previousSkill: Doc<"skills"> | null | undefined,
+  nextSkill: Doc<"skills"> | null | undefined,
+) {
+  if (!previousSkill && !nextSkill) return;
+
+  const prevOwnerId = previousSkill?.ownerUserId ?? null;
+  const nextOwnerId = nextSkill?.ownerUserId ?? null;
+  const prevContribution = previousSkill ? getSkillContribution(previousSkill) : null;
+  const nextContribution = nextSkill ? getSkillContribution(nextSkill) : null;
+
+  if (prevOwnerId && prevOwnerId === nextOwnerId) {
+    await patchUserStats(ctx, prevOwnerId, {
+      publishedSkills: (nextContribution?.publishedSkills ?? 0) - (prevContribution?.publishedSkills ?? 0),
+      totalStars: (nextContribution?.totalStars ?? 0) - (prevContribution?.totalStars ?? 0),
+      totalDownloads: (nextContribution?.totalDownloads ?? 0) - (prevContribution?.totalDownloads ?? 0),
+    });
+    return;
+  }
+
+  if (prevOwnerId) {
+    await patchUserStats(ctx, prevOwnerId, {
+      publishedSkills: -(prevContribution?.publishedSkills ?? 0),
+      totalStars: -(prevContribution?.totalStars ?? 0),
+      totalDownloads: -(prevContribution?.totalDownloads ?? 0),
+    });
+  }
+
+  if (nextOwnerId) {
+    await patchUserStats(ctx, nextOwnerId, {
+      publishedSkills: nextContribution?.publishedSkills ?? 0,
+      totalStars: nextContribution?.totalStars ?? 0,
+      totalDownloads: nextContribution?.totalDownloads ?? 0,
+    });
+  }
+}

convex/packages.ts

@@ -4,7 +4,6 @@ import {
   type PackageChannel,
   type PackageFamily,
   type PackagePublishRequest,
-  type PackageVerificationTier,
 } from "clawhub-schema";
 import { paginationOptsValidator } from "convex/server";
 import { ConvexError, v } from "convex/values";
@@ -128,7 +127,7 @@ type PublicPackageListItem = {
   latestVersion: string | null;
   capabilityTags: string[];
   executesCode: boolean;
-  verificationTier: PackageVerificationTier | null;
+  verificationTier: Doc<"packageSearchDigest">["verificationTier"] | null;
 };
 type PackageDigestLike = Pick<
   Doc<"packageSearchDigest">,
@@ -164,14 +163,6 @@ type PublicPageCursorState = {
 };
 const PUBLIC_PAGE_CURSOR_PREFIX = "pkgpage:";
 
-function stringifyId(value: Id<"users"> | Id<"publishers">): string {
-  return value;
-}
-
-function stringifyOptionalId(value: Id<"publishers"> | null | undefined): string | null {
-  return value ? stringifyId(value) : null;
-}
-
 async function runQueryRef<T>(
   ctx: { runQuery: (ref: never, args: never) => Promise<unknown> },
   ref: unknown,
@@ -221,7 +212,6 @@ type PublicPackageDoc = {
   capabilities?: Doc<"packages">["capabilities"];
   verification?: Doc<"packages">["verification"];
   scanStatus?: Doc<"packages">["scanStatus"];
-  stats: Doc<"packages">["stats"];
   createdAt: number;
   updatedAt: number;
 };
@@ -327,7 +317,6 @@ function toPublicPackage(
     capabilities: pkg.capabilities,
     verification: pkg.verification,
     scanStatus: pkg.scanStatus,
-    stats: pkg.stats,
     createdAt: pkg.createdAt,
     updatedAt: pkg.updatedAt,
   };
@@ -2144,11 +2133,6 @@ export const insertReleaseInternal = internalMutation({
       args.channel ??
       (existing?.channel === "private" ? "private" : publisherTrusted ? "official" : "community");
     const nextIsOfficial = nextChannel === "official";
-    const nextOwnerPublisherId = stringifyOptionalId(args.ownerPublisherId ?? null);
-    const nextOwnerUserId = stringifyId(args.ownerUserId);
-    const nextName = args.name;
-    const nextRuntimeId = args.runtimeId ?? null;
-    const nextVersion = args.version;
     if (existing) {
       const existingIsLegacyPersonalPackage =
         !existing.ownerPublisherId &&
@@ -2160,18 +2144,18 @@ export const insertReleaseInternal = internalMutation({
       const existingOwnerKey = existing.ownerPublisherId
         ? `publisher:${existing.ownerPublisherId}`
         : existingIsLegacyPersonalPackage
-          ? `publisher:${nextOwnerPublisherId}`
+          ? `publisher:${args.ownerPublisherId}`
           : `user:${existing.ownerUserId}`;
-      const nextOwnerKey = nextOwnerPublisherId
-        ? `publisher:${nextOwnerPublisherId}`
-        : `user:${nextOwnerUserId}`;
+      const nextOwnerKey = args.ownerPublisherId
+        ? `publisher:${args.ownerPublisherId}`
+        : `user:${args.ownerUserId}`;
       if (existingOwnerKey !== nextOwnerKey) {
         throw new ConvexError("Package already exists and belongs to another publisher");
       }
     }
     if (existing && existing.family !== args.family) {
       throw new ConvexError(
-        `Package "${nextName}" already exists as a ${existing.family}; family changes are not allowed`,
+        `Package "${args.name}" already exists as a ${existing.family}; family changes are not allowed`,
       );
     }
     if (
@@ -2182,7 +2166,7 @@ export const insertReleaseInternal = internalMutation({
       existing.runtimeId !== args.runtimeId
     ) {
       throw new ConvexError(
-        `Package "${nextName}" already exists with plugin id "${existing.runtimeId}"; runtime id changes are not allowed`,
+        `Package "${args.name}" already exists with plugin id "${existing.runtimeId}"; runtime id changes are not allowed`,
       );
     }
     if (args.family === "code-plugin" && args.runtimeId) {
@@ -2191,7 +2175,9 @@ export const insertReleaseInternal = internalMutation({
         .withIndex("by_runtime_id", (q) => q.eq("runtimeId", args.runtimeId))
         .unique();
       if (runtimeCollision && runtimeCollision._id !== existing?._id) {
-        throw new ConvexError(`Plugin id "${nextRuntimeId}" is already claimed by another package`);
+        throw new ConvexError(
+          `Plugin id "${args.runtimeId}" is already claimed by another package`,
+        );
       }
     }
 
@@ -2228,7 +2214,7 @@ export const insertReleaseInternal = internalMutation({
           q.eq("packageId", existing._id).eq("version", args.version),
         )
         .unique();
-      if (releaseExists) throw new ConvexError(`Version ${nextVersion} already exists`);
+      if (releaseExists) throw new ConvexError(`Version ${args.version} already exists`);
     }
     const priorReleases = existing
       ? await ctx.db

convex/schema.ts

@@ -28,6 +28,9 @@ const users = defineTable({
   githubFetchedAt: v.optional(v.number()),
   githubProfileSyncedAt: v.optional(v.number()),
   trustedPublisher: v.optional(v.boolean()),
+  publishedSkills: v.optional(v.number()),
+  totalStars: v.optional(v.number()),
+  totalDownloads: v.optional(v.number()),
   personalPublisherId: v.optional(v.id("publishers")),
   requiresModerationAt: v.optional(v.number()),
   requiresModerationReason: v.optional(v.string()),
@@ -40,7 +43,8 @@ const users = defineTable({
 })
   .index("email", ["email"])
   .index("phone", ["phone"])
-  .index("handle", ["handle"]);
+  .index("handle", ["handle"])
+  .index("by_active_handle", ["deletedAt", "deactivatedAt", "handle"]);
 
 const publishers = defineTable({
   kind: v.union(v.literal("user"), v.literal("org")),
@@ -384,8 +388,7 @@ const souls = defineTable({
   .index("by_slug", ["slug"])
   .index("by_owner", ["ownerUserId"])
   .index("by_owner_publisher", ["ownerPublisherId"])
-  .index("by_updated", ["updatedAt"])
-  .index("by_active_updated", ["softDeletedAt", "updatedAt"]);
+  .index("by_updated", ["updatedAt"]);
 
 const skillVersions = defineTable({
   skillId: v.id("skills"),

convex/seedDemo.ts

@@ -0,0 +1,419 @@
+import type { Id } from "./_generated/dataModel";
+import { internalMutation } from "./functions";
+
+const DEMO_SKILLS = [
+  {
+    slug: "mcp-github",
+    displayName: "MCP GitHub",
+    summary: "Full GitHub API integration via MCP — issues, PRs, repos, code search, and actions.",
+    downloads: 14200,
+    stars: 342,
+    installs: 8100,
+  },
+  {
+    slug: "claude-memory",
+    displayName: "Claude Memory",
+    summary: "Persistent memory layer for Claude — stores context across conversations with vector recall.",
+    downloads: 11800,
+    stars: 287,
+    installs: 6400,
+  },
+  {
+    slug: "web-scraper-pro",
+    displayName: "Web Scraper Pro",
+    summary: "Intelligent web scraping with automatic pagination, JS rendering, and structured data extraction.",
+    downloads: 9400,
+    stars: 198,
+    installs: 5200,
+  },
+  {
+    slug: "sql-analyst",
+    displayName: "SQL Analyst",
+    summary: "Natural language to SQL with schema introspection, query optimization, and result visualization.",
+    downloads: 8700,
+    stars: 221,
+    installs: 4800,
+  },
+  {
+    slug: "pytest-agent",
+    displayName: "Pytest Agent",
+    summary: "Automated test generation and execution for Python — coverage analysis, mutation testing, fixtures.",
+    downloads: 7200,
+    stars: 156,
+    installs: 3900,
+  },
+  {
+    slug: "docker-compose-helper",
+    displayName: "Docker Compose Helper",
+    summary: "Generate, validate, and debug Docker Compose configurations with multi-service orchestration.",
+    downloads: 6800,
+    stars: 134,
+    installs: 3600,
+  },
+  {
+    slug: "api-docs-generator",
+    displayName: "API Docs Generator",
+    summary: "Auto-generate OpenAPI specs and beautiful documentation from any codebase or endpoint.",
+    downloads: 5900,
+    stars: 178,
+    installs: 3100,
+  },
+  {
+    slug: "slack-bot-builder",
+    displayName: "Slack Bot Builder",
+    summary: "Build and deploy Slack bots with natural language — slash commands, modals, and event handlers.",
+    downloads: 5400,
+    stars: 112,
+    installs: 2800,
+  },
+  {
+    slug: "terraform-assistant",
+    displayName: "Terraform Assistant",
+    summary: "Infrastructure as code helper — plan reviews, drift detection, module generation for AWS/GCP/Azure.",
+    downloads: 4800,
+    stars: 145,
+    installs: 2400,
+  },
+  {
+    slug: "regex-wizard",
+    displayName: "Regex Wizard",
+    summary: "Natural language to regex with live testing, explanation, and edge case generation.",
+    downloads: 4200,
+    stars: 89,
+    installs: 2100,
+  },
+  {
+    slug: "git-history-explorer",
+    displayName: "Git History Explorer",
+    summary: "Semantic search through git history — find commits by intent, trace code evolution, blame analysis.",
+    downloads: 3900,
+    stars: 102,
+    installs: 1900,
+  },
+  {
+    slug: "cron-scheduler",
+    displayName: "Cron Scheduler",
+    summary: "Natural language to cron expressions with timezone handling, overlap protection, and monitoring.",
+    downloads: 3400,
+    stars: 67,
+    installs: 1600,
+  },
+  {
+    slug: "jwt-debugger",
+    displayName: "JWT Debugger",
+    summary: "Decode, verify, and generate JWTs with visual payload inspection and expiry tracking.",
+    downloads: 3100,
+    stars: 78,
+    installs: 1400,
+  },
+  {
+    slug: "graphql-builder",
+    displayName: "GraphQL Builder",
+    summary: "Schema-first GraphQL development — type generation, resolver scaffolding, and playground integration.",
+    downloads: 2800,
+    stars: 94,
+    installs: 1200,
+  },
+  {
+    slug: "security-scanner",
+    displayName: "Security Scanner",
+    summary: "OWASP-aware security scanning for codebases — dependency audit, secret detection, SAST patterns.",
+    downloads: 2500,
+    stars: 156,
+    installs: 1100,
+  },
+  {
+    slug: "markdown-slides",
+    displayName: "Markdown Slides",
+    summary: "Turn markdown into presentation decks with themes, speaker notes, and PDF export.",
+    downloads: 2200,
+    stars: 45,
+    installs: 900,
+  },
+  {
+    slug: "env-manager",
+    displayName: "Env Manager",
+    summary: "Environment variable management across projects — sync .env files, validate schemas, rotate secrets.",
+    downloads: 1800,
+    stars: 56,
+    installs: 800,
+  },
+  {
+    slug: "csv-transform",
+    displayName: "CSV Transform",
+    summary: "Powerful CSV/TSV manipulation — column transforms, joins, pivots, and format conversion.",
+    downloads: 1500,
+    stars: 34,
+    installs: 600,
+  },
+  {
+    slug: "ssh-config-manager",
+    displayName: "SSH Config Manager",
+    summary: "Manage SSH configs, keys, and tunnels with natural language — jump hosts, port forwarding, agent setup.",
+    downloads: 1200,
+    stars: 42,
+    installs: 500,
+  },
+  {
+    slug: "changelog-writer",
+    displayName: "Changelog Writer",
+    summary: "Generate changelogs from git history with conventional commit parsing and release note formatting.",
+    downloads: 980,
+    stars: 28,
+    installs: 400,
+  },
+];
+
+const DEMO_OWNERS = [
+  { handle: "anthropic", displayName: "Anthropic", highlighted: true },
+  { handle: "openai-labs", displayName: "OpenAI Labs", highlighted: false },
+  { handle: "devtools-co", displayName: "DevTools Co", highlighted: false },
+  { handle: "securityfirst", displayName: "SecurityFirst", highlighted: true },
+  { handle: "dataflow", displayName: "DataFlow", highlighted: false },
+];
+
+export const seedDemoSkills = internalMutation({
+  args: {},
+  handler: async (ctx) => {
+    // Check if we already seeded
+    const existingSkill = await ctx.db
+      .query("skills")
+      .withIndex("by_slug", (q) => q.eq("slug", "mcp-github"))
+      .first();
+    if (existingSkill) {
+      return { seeded: false, reason: "already seeded" };
+    }
+
+    // Create a seed user
+    const seedUserId = await ctx.db.insert("users", {
+      name: "ClawHub Demo",
+      displayName: "ClawHub Demo",
+      handle: "clawhub-demo",
+      image: undefined,
+      role: "admin",
+    });
+
+    // Create publisher accounts
+    const publisherIds: string[] = [];
+    for (const owner of DEMO_OWNERS) {
+      const pubId = await ctx.db.insert("publishers", {
+        kind: "org",
+        handle: owner.handle,
+        displayName: owner.displayName,
+        linkedUserId: seedUserId,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+      });
+      publisherIds.push(pubId);
+
+      // Add membership
+      await ctx.db.insert("publisherMembers", {
+        publisherId: pubId as Id<"publishers">,
+        userId: seedUserId,
+        role: "owner",
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+      });
+    }
+
+    const now = Date.now();
+    const DAY = 86400000;
+    let totalPublishedSkills = 0;
+    let totalStars = 0;
+    let totalDownloads = 0;
+
+    for (let i = 0; i < DEMO_SKILLS.length; i++) {
+      const s = DEMO_SKILLS[i];
+      const ownerIdx = i % publisherIds.length;
+      const createdDaysAgo = Math.floor(Math.random() * 90) + 7;
+      const updatedDaysAgo = Math.floor(Math.random() * createdDaysAgo);
+      const createdAt = now - createdDaysAgo * DAY;
+      const updatedAt = now - updatedDaysAgo * DAY;
+      const version = `${Math.floor(Math.random() * 3) + 1}.${Math.floor(Math.random() * 10)}.${Math.floor(Math.random() * 20)}`;
+
+      const isHighlighted = i < 6;
+      const badges = isHighlighted
+        ? { highlighted: { byUserId: seedUserId, at: now } }
+        : undefined;
+
+      const numVersions = Math.floor(Math.random() * 8) + 1;
+      const numComments = Math.floor(Math.random() * 15);
+
+      // Create skill first (without latestVersionId)
+      const skillId = await ctx.db.insert("skills", {
+        slug: s.slug,
+        displayName: s.displayName,
+        summary: s.summary,
+        ownerUserId: seedUserId,
+        ownerPublisherId: publisherIds[ownerIdx] as Id<"publishers">,
+        tags: {},
+        badges,
+        moderationStatus: "active",
+        moderationVerdict: "clean",
+        stats: {
+          downloads: s.downloads,
+          installsCurrent: Math.floor(s.installs * 0.3),
+          installsAllTime: s.installs,
+          stars: s.stars,
+          versions: numVersions,
+          comments: numComments,
+        },
+        statsDownloads: s.downloads,
+        statsStars: s.stars,
+        statsInstallsCurrent: Math.floor(s.installs * 0.3),
+        statsInstallsAllTime: s.installs,
+        createdAt,
+        updatedAt,
+      });
+
+      // Create skillBadges entry for highlighted skills
+      if (isHighlighted) {
+        await ctx.db.insert("skillBadges", {
+          skillId,
+          kind: "highlighted",
+          byUserId: seedUserId,
+          at: now,
+        });
+      }
+
+      // Now create version with real skillId
+      const versionId = await ctx.db.insert("skillVersions", {
+        skillId,
+        version,
+        changelog: `Release ${version} — improvements and bug fixes.`,
+        files: [],
+        parsed: { frontmatter: {} },
+        createdBy: seedUserId,
+        createdAt: updatedAt,
+      });
+
+      // Patch skill with version info
+      await ctx.db.patch(skillId, {
+        latestVersionId: versionId,
+        latestVersionSummary: {
+          version,
+          createdAt: updatedAt,
+          changelog: `Release ${version}`,
+        },
+        tags: { latest: versionId },
+      });
+
+      totalPublishedSkills += 1;
+      totalStars += s.stars;
+      totalDownloads += s.downloads;
+
+      // Create digest for search
+      await ctx.db.insert("skillSearchDigest", {
+        skillId,
+        slug: s.slug,
+        displayName: s.displayName,
+        summary: s.summary,
+        ownerUserId: seedUserId,
+        ownerPublisherId: publisherIds[ownerIdx] as Id<"publishers">,
+        ownerHandle: DEMO_OWNERS[ownerIdx].handle,
+        ownerName: DEMO_OWNERS[ownerIdx].displayName,
+        ownerDisplayName: DEMO_OWNERS[ownerIdx].displayName,
+        ownerImage: undefined,
+        latestVersionId: versionId,
+        latestVersionSummary: {
+          version,
+          createdAt: updatedAt,
+          changelog: `Release ${version}`,
+        },
+        tags: { latest: versionId },
+        badges,
+        stats: {
+          downloads: s.downloads,
+          installsCurrent: Math.floor(s.installs * 0.3),
+          installsAllTime: s.installs,
+          stars: s.stars,
+          versions: numVersions,
+          comments: numComments,
+        },
+          versions: numVersions,
+          comments: numComments,
+        moderationReason: undefined,
+        isSuspicious: false,
+        createdAt,
+        updatedAt,
+      });
+    }
+
+    await ctx.db.patch(seedUserId, {
+      publishedSkills: totalPublishedSkills,
+      totalStars,
+      totalDownloads,
+    });
+
+    return { seeded: true, count: DEMO_SKILLS.length };
+  },
+});
+
+// Repair globalStats count to match actual seeded data
+export const repairGlobalStats = internalMutation({
+  args: {},
+  handler: async (ctx) => {
+    // Count active digests — push filter server-side
+    const digests = await ctx.db
+      .query("skillSearchDigest")
+      .withIndex("by_active_updated", (q) => q.eq("softDeletedAt", undefined))
+      .filter((q) => q.eq(q.field("moderationStatus"), "active"))
+      .collect();
+
+    const count = digests.length;
+
+    // Update globalStats
+    const stats = await ctx.db
+      .query("globalStats")
+      .filter((q) => q.eq(q.field("key"), "default"))
+      .first();
+
+    if (stats) {
+      await ctx.db.patch(stats._id, { activeSkillsCount: count, updatedAt: Date.now() });
+    } else {
+      await ctx.db.insert("globalStats", {
+        key: "default",
+        activeSkillsCount: count,
+        updatedAt: Date.now(),
+      });
+    }
+
+    return { count };
+  },
+});
+
+// Repair function to add missing skillBadges for already-seeded data
+export const repairHighlightedBadges = internalMutation({
+  args: {},
+  handler: async (ctx) => {
+    const highlightedSlugs = DEMO_SKILLS.slice(0, 6).map((s) => s.slug);
+    let fixed = 0;
+
+    for (const slug of highlightedSlugs) {
+      const skill = await ctx.db
+        .query("skills")
+        .withIndex("by_slug", (q) => q.eq("slug", slug))
+        .first();
+      if (!skill) continue;
+
+      // Check if badge already exists
+      const existing = await ctx.db
+        .query("skillBadges")
+        .withIndex("by_skill_kind", (q) =>
+          q.eq("skillId", skill._id).eq("kind", "highlighted"),
+        )
+        .first();
+      if (existing) continue;
+
+      await ctx.db.insert("skillBadges", {
+        skillId: skill._id,
+        kind: "highlighted",
+        byUserId: skill.ownerUserId,
+        at: Date.now(),
+      });
+      fixed++;
+    }
+
+    return { fixed };
+  },
+});

convex/skillStatEvents.ts

@@ -23,6 +23,7 @@ import type { Doc, Id } from "./_generated/dataModel";
 import type { MutationCtx } from "./_generated/server";
 import { internalAction, internalMutation, internalQuery } from "./functions";
 import { applySkillStatDeltas, bumpDailySkillStats } from "./lib/skillStats";
+import { adjustUserSkillStatsForSkillChange } from "./lib/userSkillStats";
 
 /**
  * Event types that affect skill stats:
@@ -259,6 +260,7 @@ export const processSkillStatEventsInternal = internalMutation({
         // Don't update `updatedAt` — stat changes shouldn't move the
         // skill's position in the by_active_updated index.
         await ctx.db.patch(skill._id, patch);
+        await adjustUserSkillStatsForSkillChange(ctx, skill, { ...skill, ...patch });
       }
 
       // NOTE: Daily stats (skillDailyStats) are written by the 15-minute

convex/skills.pendingScanQueue.test.ts

@@ -5,10 +5,7 @@ vi.mock("@convex-dev/auth/server", () => ({
   authTables: {},
 }));
 
-import {
-  getActiveSkillBatchForStaticScanBackfillInternal,
-  getPendingScanSkillsInternal,
-} from "./skills";
+import { getPendingScanSkillsInternal } from "./skills";
 
 type PendingScanResult = Array<{
   skillId: string;
@@ -28,17 +25,6 @@ const getPendingScanSkillsHandler = (
   >
 )._handler;
 
-const getStaticScanBackfillBatchHandler = (
-  getActiveSkillBatchForStaticScanBackfillInternal as unknown as WrappedHandler<
-    Record<string, unknown>,
-    {
-      skills: Array<{ skillId: string; versionId: string; slug: string }>;
-      nextCursor: number;
-      done: boolean;
-    }
-  >
-)._handler;
-
 describe("skills.getPendingScanSkillsInternal", () => {
   it("includes unresolved VT records from the oldest slice and skips finalized ones", async () => {
     const recentSkills = [
@@ -229,114 +215,6 @@ describe("skills.getPendingScanSkillsInternal", () => {
   });
 });
 
-describe("skills.getActiveSkillBatchForStaticScanBackfillInternal", () => {
-  it("includes latest active skills with missing or stale static scan engine versions", async () => {
-    const skills = [
-      {
-        _id: "skills:missing-static",
-        _creationTime: 10,
-        softDeletedAt: undefined,
-        moderationStatus: "active",
-        latestVersionId: "skillVersions:missing-static",
-        slug: "missing-static",
-      },
-      {
-        _id: "skills:stale-static",
-        _creationTime: 20,
-        softDeletedAt: undefined,
-        moderationStatus: "active",
-        latestVersionId: "skillVersions:stale-static",
-        slug: "stale-static",
-      },
-      {
-        _id: "skills:current-static",
-        _creationTime: 30,
-        softDeletedAt: undefined,
-        moderationStatus: "active",
-        latestVersionId: "skillVersions:current-static",
-        slug: "current-static",
-      },
-      {
-        _id: "skills:hidden-static",
-        _creationTime: 40,
-        softDeletedAt: undefined,
-        moderationStatus: "hidden",
-        latestVersionId: "skillVersions:hidden-static",
-        slug: "hidden-static",
-      },
-    ];
-
-    const versions = new Map<string, unknown>([
-      ["skillVersions:missing-static", { _id: "skillVersions:missing-static" }],
-      [
-        "skillVersions:stale-static",
-        {
-          _id: "skillVersions:stale-static",
-          staticScan: { engineVersion: "v2.2.0" },
-        },
-      ],
-      [
-        "skillVersions:current-static",
-        {
-          _id: "skillVersions:current-static",
-          staticScan: { engineVersion: "v2.4.0" },
-        },
-      ],
-      [
-        "skillVersions:hidden-static",
-        {
-          _id: "skillVersions:hidden-static",
-          staticScan: { engineVersion: "v2.2.0" },
-        },
-      ],
-    ]);
-
-    const ctx = {
-      db: {
-        query: vi.fn((table: string) => {
-          if (table !== "skills") throw new Error(`unexpected table ${table}`);
-          return {
-            withIndex: (
-              indexName: string,
-              builder: (q: { gt: (field: string, value: unknown) => unknown }) => unknown,
-            ) => {
-              builder({ gt: () => ({}) });
-              if (indexName !== "by_creation_time") {
-                throw new Error(`unexpected index ${indexName}`);
-              }
-              return {
-                order: () => ({
-                  take: async () => skills,
-                }),
-              };
-            },
-          };
-        }),
-        get: vi.fn(async (id: string) => versions.get(id) ?? null),
-      },
-    };
-
-    const result = await getStaticScanBackfillBatchHandler(ctx, {
-      batchSize: 10,
-      cursor: 0,
-    });
-
-    expect(result.skills).toEqual([
-      {
-        skillId: "skills:missing-static",
-        versionId: "skillVersions:missing-static",
-        slug: "missing-static",
-      },
-      {
-        skillId: "skills:stale-static",
-        versionId: "skillVersions:stale-static",
-        slug: "stale-static",
-      },
-    ]);
-    expect(result.done).toBe(true);
-  });
-});
-
 function makeSkill(
   id: string,
   versionId: string,

convex/skills.public.test.ts

@@ -35,12 +35,6 @@ const getBySlugHandler = (
         image: string | null;
         bio?: string | null;
       } | null;
-      latestVersion?: {
-        files?: Array<{
-          path: string;
-          contentType?: string;
-        }>;
-      } | null;
     } | null
   >
 )._handler;
@@ -177,70 +171,4 @@ describe("skills.getBySlug", () => {
 
     expect(result).toBeNull();
   });
-
-  it("normalizes misleading file MIME types in public version metadata", async () => {
-    const ctx = makeCtx({
-      skill: {
-        _id: "skills:1",
-        _creationTime: 1,
-        slug: "demo",
-        displayName: "Demo",
-        summary: "Public demo skill",
-        ownerUserId: "users:1",
-        canonicalSkillId: undefined,
-        forkOf: undefined,
-        latestVersionId: "skillVersions:1",
-        tags: {},
-        stats: {
-          downloads: 10,
-          installsCurrent: 2,
-          installsAllTime: 5,
-          stars: 3,
-          versions: 1,
-          comments: 0,
-        },
-        createdAt: 1,
-        updatedAt: 2,
-        moderationStatus: "active",
-        moderationFlags: undefined,
-        softDeletedAt: undefined,
-      },
-      owner: {
-        _id: "users:1",
-        _creationTime: 1,
-        handle: "demo-owner",
-        name: "Demo Owner",
-        displayName: "Demo Owner",
-        image: null,
-      },
-      latestVersion: {
-        _id: "skillVersions:1",
-        _creationTime: 2,
-        skillId: "skills:1",
-        version: "1.0.0",
-        fingerprint: "abc",
-        changelog: "",
-        changelogSource: "user",
-        files: [
-          {
-            path: "src/index.ts",
-            size: 10,
-            sha256: "deadbeef",
-            contentType: "video/mp2t",
-          },
-        ],
-        createdBy: "users:1",
-        createdAt: 2,
-      },
-    });
-
-    const result = await getBySlugHandler(ctx, { slug: "demo" } as never);
-
-    expect(result?.latestVersion?.files).toEqual([
-      expect.objectContaining({
-        path: "src/index.ts",
-        contentType: "application/typescript",
-      }),
-    ]);
-  });
 });

convex/skills.ts

@@ -1,5 +1,4 @@
 import { getAuthUserId } from "@convex-dev/auth/server";
-import { normalizeTextContentType } from "clawhub-schema";
 import { getPage, type IndexKey, paginator } from "convex-helpers/server/pagination";
 import { paginationOptsValidator } from "convex/server";
 import { ConvexError, v, type Value } from "convex/values";
@@ -39,7 +38,6 @@ import { deriveModerationFlags } from "./lib/moderation";
 import { buildModerationSnapshot } from "./lib/moderationEngine";
 import {
   legacyFlagsFromVerdict,
-  MODERATION_ENGINE_VERSION,
   summarizeReasonCodes,
   verdictFromCodes,
 } from "./lib/moderationReasonCodes";
@@ -75,7 +73,6 @@ import {
   publishVersionForUser,
   queueHighlightedWebhook,
 } from "./lib/skillPublish";
-import { runStaticPublishScan } from "./lib/staticPublishScan";
 import { getFrontmatterValue, hashSkillFiles } from "./lib/skills";
 import { computeIsSuspicious, isSkillSuspicious } from "./lib/skillSafety";
 import {
@@ -84,6 +81,7 @@ import {
   extractDigestFields,
   upsertSkillSearchDigest,
 } from "./lib/skillSearchDigest";
+import { adjustUserSkillStatsForSkillChange } from "./lib/userSkillStats";
 import schema from "./schema";
 
 export { publishVersionForUser } from "./lib/skillPublish";
@@ -462,7 +460,7 @@ async function syncSkillModerationFromLatestVersion(
 
 function buildConflictingSkillUrl(
   skill: Doc<"skills">,
-  owner: SkillOwnerRef,
+  owner: Doc<"users"> | Doc<"publishers"> | null | undefined,
 ) {
   if (!owner || owner.deletedAt || owner.deactivatedAt || !isPublicSkillDoc(skill)) return null;
   const ownerParam = owner.handle?.trim() || String(owner._id);
@@ -472,7 +470,7 @@ function buildConflictingSkillUrl(
 
 function buildSlugTakenErrorMessage(
   skill: Doc<"skills">,
-  owner: SkillOwnerRef,
+  owner: Doc<"users"> | Doc<"publishers"> | null | undefined,
 ) {
   if (!owner || owner.deletedAt || owner.deactivatedAt) {
     return (
@@ -488,7 +486,7 @@ function buildSlugTakenErrorMessage(
 
 function buildAliasTakenErrorMessage(
   skill: Doc<"skills">,
-  owner: SkillOwnerRef,
+  owner: Doc<"users"> | Doc<"publishers"> | null | undefined,
 ) {
   const base = "Slug redirects to an existing skill. Choose a different slug.";
   const url = buildConflictingSkillUrl(skill, owner);
@@ -500,16 +498,6 @@ function normalizeSkillSlugKey(slug: string) {
   return slug.trim().toLowerCase();
 }
 
-type SkillOwnerRef =
-  | {
-      _id: Id<"users"> | Id<"publishers">;
-      handle?: string | null;
-      deletedAt?: number | null;
-      deactivatedAt?: number | null;
-    }
-  | null
-  | undefined;
-
 function normalizeSkillSlugForWrite(slug: string) {
   const normalized = normalizeSkillSlugKey(slug);
   if (!normalized || !/^[a-z0-9][a-z0-9-]*$/.test(normalized)) {
@@ -758,6 +746,7 @@ async function hardDeleteSkillStep(
     const nextSkill = { ...skill, ...patch };
     await ctx.db.patch(skill._id, patch);
     await adjustGlobalPublicCountForSkillChange(ctx, skill, nextSkill);
+    await adjustUserSkillStatsForSkillChange(ctx, skill, nextSkill);
   }
 
   switch (phase) {
@@ -1230,7 +1219,7 @@ function toPublicSkillVersion(
       path: file.path,
       size: file.size,
       sha256: file.sha256,
-      contentType: normalizeTextContentType(file.path, file.contentType),
+      contentType: file.contentType,
     })),
     parsed: version.parsed
       ? {
@@ -2529,6 +2518,7 @@ export const report = mutation({
     const nextSkill = { ...skill, ...updates };
     await ctx.db.patch(skill._id, updates);
     await adjustGlobalPublicCountForSkillChange(ctx, skill, nextSkill);
+    await adjustUserSkillStatsForSkillChange(ctx, skill, nextSkill);
 
     if (shouldAutoHide) {
       await setSkillEmbeddingsSoftDeleted(ctx, skill._id, true, now);
@@ -3696,56 +3686,6 @@ export const getActiveSkillBatchForLlmBackfillInternal = internalQuery({
   },
 });
 
-/**
- * Get active latest skill versions whose static scan is missing or uses an older engine version.
- * Used to backfill new static rules onto already-published skills.
- */
-export const getActiveSkillBatchForStaticScanBackfillInternal = internalQuery({
-  args: {
-    cursor: v.optional(v.number()),
-    batchSize: v.optional(v.number()),
-  },
-  handler: async (ctx, args) => {
-    const batchSize = args.batchSize ?? 25;
-    const cursor = args.cursor ?? 0;
-
-    const candidates = await ctx.db
-      .query("skills")
-      .withIndex("by_creation_time", (q) => q.gt("_creationTime", cursor))
-      .order("asc")
-      .take(batchSize * 4);
-
-    const results: Array<{
-      skillId: Id<"skills">;
-      versionId: Id<"skillVersions">;
-      slug: string;
-    }> = [];
-    let nextCursor = cursor;
-
-    for (const skill of candidates) {
-      nextCursor = skill._creationTime;
-      if (results.length >= batchSize) break;
-
-      if (skill.softDeletedAt) continue;
-      if ((skill.moderationStatus ?? "active") !== "active") continue;
-      if (!skill.latestVersionId) continue;
-
-      const version = await ctx.db.get(skill.latestVersionId);
-      if (!version) continue;
-      if (version.staticScan?.engineVersion === MODERATION_ENGINE_VERSION) continue;
-
-      results.push({
-        skillId: skill._id,
-        versionId: version._id,
-        slug: skill.slug,
-      });
-    }
-
-    const done = candidates.length < batchSize * 4;
-    return { skills: results, nextCursor, done };
-  },
-});
-
 /**
  * Get skills with stale moderationReason that have vtAnalysis cached.
  * Used to sync moderationReason with cached VT results.
@@ -3844,159 +3784,6 @@ export const getPendingVTSkillsInternal = internalQuery({
   },
 });
 
-export const updateSkillVersionStaticScanInternal = internalMutation({
-  args: {
-    skillId: v.id("skills"),
-    versionId: v.id("skillVersions"),
-    staticScan: v.object({
-      status: v.union(v.literal("clean"), v.literal("suspicious"), v.literal("malicious")),
-      reasonCodes: v.array(v.string()),
-      findings: v.array(
-        v.object({
-          code: v.string(),
-          severity: v.union(v.literal("info"), v.literal("warn"), v.literal("critical")),
-          file: v.string(),
-          line: v.number(),
-          message: v.string(),
-          evidence: v.string(),
-        }),
-      ),
-      summary: v.string(),
-      engineVersion: v.string(),
-      checkedAt: v.number(),
-    }),
-  },
-  handler: async (ctx, args) => {
-    const version = await ctx.db.get(args.versionId);
-    if (!version || version.skillId !== args.skillId) return { ok: true as const, skipped: "missing" as const };
-
-    await ctx.db.patch(version._id, {
-      staticScan: args.staticScan,
-    });
-
-    const skill = await ctx.db.get(args.skillId);
-    if (!skill) return { ok: true as const, skipped: "missing" as const };
-    if (skill.latestVersionId !== version._id) {
-      return { ok: true as const, skipped: "not_latest" as const };
-    }
-
-    const owner = skill.ownerUserId ? await ctx.db.get(skill.ownerUserId) : null;
-    const now = Date.now();
-    const updatedVersion = { ...version, staticScan: args.staticScan };
-    const basePatch = buildScannerModerationPatchFromVersion({
-      owner,
-      version: updatedVersion,
-      now,
-    });
-    const patch = applySkillManualOverrideToSkillPatch({
-      skill,
-      basePatch: {
-        ...basePatch,
-        updatedAt: now,
-      },
-      now,
-    });
-    const nextSkill = { ...skill, ...patch };
-    await ctx.db.patch(skill._id, patch);
-    await adjustGlobalPublicCountForSkillChange(ctx, skill, nextSkill);
-
-    if (patch.moderationVerdict === "malicious" && skill.ownerUserId) {
-      await ctx.scheduler.runAfter(0, internal.users.placeUserUnderModerationInternal, {
-        ownerUserId: skill.ownerUserId,
-        slug: skill.slug,
-        reason:
-          patch.moderationReasonCodes?.find((code) => code.startsWith("malicious.")) ??
-          "malicious.static_scan",
-      });
-    }
-
-    return { ok: true as const, status: args.staticScan.status };
-  },
-});
-
-export const scanSkillVersionStaticallyInternal: ReturnType<typeof internalAction> = internalAction({
-  args: {
-    skillId: v.id("skills"),
-    versionId: v.id("skillVersions"),
-  },
-  handler: async (ctx, args) => {
-    const [skill, version] = await Promise.all([
-      ctx.runQuery(internal.skills.getSkillByIdInternal, { skillId: args.skillId }),
-      ctx.runQuery(internal.skills.getVersionByIdInternal, { versionId: args.versionId }),
-    ]);
-
-    if (!skill || !version) {
-      return { ok: true as const, skipped: "missing" as const };
-    }
-
-    const staticScan = await runStaticPublishScan(ctx, {
-      slug: skill.slug,
-      displayName: skill.displayName,
-      summary: skill.summary ?? undefined,
-      frontmatter: version.parsed?.frontmatter ?? {},
-      metadata: version.parsed?.metadata,
-      files: version.files,
-    });
-
-    return await ctx.runMutation(internal.skills.updateSkillVersionStaticScanInternal, {
-      skillId: skill._id,
-      versionId: version._id,
-      staticScan,
-    });
-  },
-});
-
-export const backfillSkillStaticScansInternal: ReturnType<typeof internalAction> = internalAction({
-  args: {
-    cursor: v.optional(v.number()),
-    batchSize: v.optional(v.number()),
-    rescanned: v.optional(v.number()),
-  },
-  handler: async (ctx, args) => {
-    const batchSize = Math.max(1, Math.min(args.batchSize ?? 25, 100));
-    const batch = await ctx.runQuery(internal.skills.getActiveSkillBatchForStaticScanBackfillInternal, {
-      cursor: args.cursor,
-      batchSize,
-    });
-
-    let rescanned = args.rescanned ?? 0;
-    for (const skill of batch.skills) {
-      await ctx.scheduler.runAfter(0, internal.skills.scanSkillVersionStaticallyInternal, {
-        skillId: skill.skillId,
-        versionId: skill.versionId,
-      });
-      rescanned += 1;
-    }
-
-    if (!batch.done) {
-      await ctx.scheduler.runAfter(0, internal.skills.backfillSkillStaticScansInternal, {
-        cursor: batch.nextCursor,
-        batchSize,
-        rescanned,
-      });
-    }
-
-    return {
-      rescanned,
-      nextCursor: batch.nextCursor,
-      done: batch.done,
-    };
-  },
-});
-
-export const backfillSkillStaticScans: ReturnType<typeof action> = action({
-  args: {
-    batchSize: v.optional(v.number()),
-  },
-  handler: async (ctx, args) => {
-    const { user } = await requireUserFromAction(ctx);
-    assertAdmin(user);
-    return await ctx.runAction(internal.skills.backfillSkillStaticScansInternal, {
-      batchSize: args.batchSize,
-    });
-  },
-});
-
 /**
  * Emergency escalation by skillId for legacy rows without sha256hash.
  * Rebuilds the full moderation snapshot so legacy rows stay in sync with structured fields.
@@ -4255,6 +4042,7 @@ export const applyBanToOwnedSkillsBatchInternal = internalMutation({
       const nextSkill = { ...skill, ...patch };
       await ctx.db.patch(skill._id, patch);
       await adjustGlobalPublicCountForSkillChange(ctx, skill, nextSkill);
+      await adjustUserSkillStatsForSkillChange(ctx, skill, nextSkill);
       await setSkillEmbeddingsSoftDeleted(ctx, skill._id, true, args.bannedAt);
     }
 
@@ -4366,6 +4154,7 @@ export const restoreOwnedSkillsForUnbanBatchInternal = internalMutation({
       const nextSkill = { ...skill, ...patch };
       await ctx.db.patch(skill._id, patch);
       await adjustGlobalPublicCountForSkillChange(ctx, skill, nextSkill);
+      await adjustUserSkillStatsForSkillChange(ctx, skill, nextSkill);
 
       await setSkillEmbeddingsSoftDeleted(ctx, skill._id, false, now);
       restoredCount += 1;
@@ -5305,6 +5094,7 @@ export const setSoftDeleted = mutation({
     const nextSkill = { ...skill, ...patch };
     await ctx.db.patch(skill._id, patch);
     await adjustGlobalPublicCountForSkillChange(ctx, skill, nextSkill);
+    await adjustUserSkillStatsForSkillChange(ctx, skill, nextSkill);
 
     await setSkillEmbeddingsSoftDeleted(ctx, skill._id, args.deleted, now);
 
@@ -5343,6 +5133,7 @@ export const changeOwner = mutation({
       lastReviewedAt: now,
       updatedAt: now,
     });
+    await adjustUserSkillStatsForSkillChange(ctx, skill, { ...skill, ownerUserId: args.ownerUserId });
 
     const embeddings = await listSkillEmbeddingsForSkill(ctx, skill._id);
     for (const embedding of embeddings) {
@@ -6423,6 +6214,7 @@ export const insertVersion = internalMutation({
         // Digest sync is handled after the version patch below (line ~4222),
         // which captures the final state including latestVersionId and tags.
         await adjustGlobalPublicCountForSkillChange(ctx, null, skill);
+        await adjustUserSkillStatsForSkillChange(ctx, null, skill);
       }
     }
 

convex/souls.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { getSoulBySlugInternal, insertVersion, list } from "./souls";
+import { getSoulBySlugInternal, insertVersion } from "./souls";
 
 type WrappedHandler<TArgs> = {
   _handler: (ctx: unknown, args: TArgs) => Promise<unknown>;
@@ -10,7 +10,6 @@ const insertVersionHandler = (insertVersion as unknown as WrappedHandler<Record<
 const getSoulBySlugInternalHandler = (
   getSoulBySlugInternal as unknown as WrappedHandler<{ slug: string }>
 )._handler;
-const listHandler = (list as unknown as WrappedHandler<{ ownerUserId?: string; limit?: number }>)._handler;
 
 describe("souls.insertVersion", () => {
   it("throws a soul-specific ownership error for non-owners", async () => {
@@ -140,75 +139,3 @@ describe("souls.insertVersion", () => {
     );
   });
 });
-
-describe("souls.list", () => {
-  it("uses the active browse index and only takes the requested limit", async () => {
-    let requestedIndex: string | null = null;
-    let requestedSoftDeletedAt: number | undefined;
-    let requestedLimit: number | null = null;
-
-    const result = await listHandler(
-      {
-        db: {
-          query: vi.fn((table: string) => {
-            if (table !== "souls") throw new Error(`unexpected table ${table}`);
-            return {
-              withIndex: (
-                name: string,
-                build:
-                  | ((q: { eq: (field: string, value: undefined) => unknown }) => unknown)
-                  | undefined,
-              ) => {
-                requestedIndex = name;
-                const q = {
-                  eq: (field: string, value: undefined) => {
-                    if (field !== "softDeletedAt") throw new Error(`unexpected field ${field}`);
-                    requestedSoftDeletedAt = value;
-                    return q;
-                  },
-                };
-                build?.(q);
-                return {
-                  order: () => ({
-                    take: async (limit: number) => {
-                      requestedLimit = limit;
-                      return [
-                        {
-                          _id: "souls:1",
-                          _creationTime: 1,
-                          slug: "demo-soul",
-                          displayName: "Demo Soul",
-                          summary: "A demo soul",
-                          ownerUserId: "users:owner",
-                          ownerPublisherId: undefined,
-                          latestVersionId: undefined,
-                          tags: {},
-                          softDeletedAt: undefined,
-                          stats: { downloads: 1, stars: 2, versions: 3, comments: 4 },
-                          createdAt: 1,
-                          updatedAt: 2,
-                        },
-                      ];
-                    },
-                  }),
-                };
-              },
-            };
-          }),
-        },
-      } as never,
-      { limit: 7 } as never,
-    );
-
-    expect(requestedIndex).toBe("by_active_updated");
-    expect(requestedSoftDeletedAt).toBeUndefined();
-    expect(requestedLimit).toBe(7);
-    expect(result).toEqual([
-      expect.objectContaining({
-        _id: "souls:1",
-        slug: "demo-soul",
-        displayName: "Demo Soul",
-      }),
-    ]);
-  });
-});

convex/souls.ts

@@ -138,10 +138,11 @@ export const list = query({
     }
     const entries = await ctx.db
       .query("souls")
-      .withIndex("by_active_updated", (q) => q.eq("softDeletedAt", undefined))
       .order("desc")
-      .take(limit);
+      .take(limit * 5);
     return entries
+      .filter((soul) => !soul.softDeletedAt)
+      .slice(0, limit)
       .map((soul) => toPublicSoul(soul))
       .filter((soul): soul is NonNullable<typeof soul> => Boolean(soul));
   },

convex/stars.ts

@@ -34,8 +34,6 @@ export const toggle = mutation({
       return { starred: false };
     }
 
-    if (skill.softDeletedAt) throw new Error("Skill not found");
-
     await ctx.db.insert("stars", {
       skillId: args.skillId,
       userId,
@@ -72,7 +70,7 @@ export const addStarInternal = internalMutation({
   args: { userId: v.id("users"), skillId: v.id("skills") },
   handler: async (ctx, args) => {
     const skill = await ctx.db.get(args.skillId);
-    if (!skill || skill.softDeletedAt) throw new Error("Skill not found");
+    if (!skill) throw new Error("Skill not found");
     const existing = await ctx.db
       .query("stars")
       .withIndex("by_skill_user", (q) => q.eq("skillId", args.skillId).eq("userId", args.userId))

convex/statsMaintenance.ts

@@ -230,11 +230,8 @@ export const reconcileSkillStarCounts = internalMutation({
       .order("asc")
       .paginate({ cursor: args.cursor ?? null, numItems: batchSize });
 
-    let scanned = 0;
     let patched = 0;
     for (const skill of page) {
-      if (skill.softDeletedAt) continue;
-      scanned += 1;
       // Count actual star records for this skill
       const starRecords = await ctx.db
         .query("stars")
@@ -266,7 +263,7 @@ export const reconcileSkillStarCounts = internalMutation({
     }
 
     return {
-      scanned,
+      scanned: page.length,
       patched,
       cursor: isDone ? null : continueCursor,
       isDone,

convex/users.test.ts

@@ -1075,81 +1075,6 @@ describe("users.list", () => {
     expect(result.items[0]?.handle).toBe("alice");
   });
 
-  it("includes an exact older handle match outside the bounded scan", async () => {
-    vi.mocked(requireUser).mockResolvedValue({
-      userId: "users:admin",
-      user: { _id: "users:admin", role: "admin" },
-    } as never);
-    const users = [
-      ...Array.from({ length: 500 }, (_value, index) => ({
-        _id: `users:recent-${index}`,
-        _creationTime: 10_000 - index,
-        handle: `recent-${index}`,
-        role: "user",
-      })),
-      { _id: "users:older", _creationTime: 1, handle: "alice", role: "user" },
-    ];
-    const { ctx, take, collect } = makeListCtx(users);
-    const listHandler = (
-      list as unknown as { _handler: (ctx: unknown, args: unknown) => Promise<unknown> }
-    )._handler;
-
-    const result = (await listHandler(ctx, { limit: 50, search: "alice" })) as {
-      items: Array<Record<string, unknown>>;
-      total: number;
-    };
-
-    expect(take).toHaveBeenCalledWith(500);
-    expect(collect).not.toHaveBeenCalled();
-    expect(result.total).toBe(1);
-    expect(result.items[0]?._id).toBe("users:older");
-  });
-
-  it("includes an exact personal publisher handle match without a full collect", async () => {
-    vi.mocked(requireUser).mockResolvedValue({
-      userId: "users:admin",
-      user: { _id: "users:admin", role: "admin" },
-    } as never);
-    const users = [{ _id: "users:1", _creationTime: 2, handle: "alice", role: "user" }];
-    const { ctx, take, collect } = makeListCtx(users, {
-      publishersByHandle: {
-        lmlukef: {
-          _id: "publishers:lmlukef",
-          kind: "user",
-          handle: "lmlukef",
-          linkedUserId: "users:owner",
-        },
-      },
-      usersById: {
-        "users:owner": {
-          _id: "users:owner",
-          _creationTime: 1,
-          handle: "luke",
-          name: "different-gh-login",
-          displayName: "Luke",
-          role: "user",
-        },
-      },
-    });
-    const listHandler = (
-      list as unknown as { _handler: (ctx: unknown, args: unknown) => Promise<unknown> }
-    )._handler;
-
-    const result = (await listHandler(ctx, { limit: 50, search: "lmLukeF" })) as {
-      items: Array<Record<string, unknown>>;
-      total: number;
-    };
-
-    expect(take).toHaveBeenCalledWith(500);
-    expect(collect).not.toHaveBeenCalled();
-    expect(result.total).toBe(1);
-    expect(result.items[0]).toMatchObject({
-      _id: "users:owner",
-      handle: "luke",
-      displayName: "Luke",
-    });
-  });
-
   it("clamps large limit and search scan size", async () => {
     vi.mocked(requireUser).mockResolvedValue({
       userId: "users:admin",

convex/users.ts

@@ -3,20 +3,15 @@ import { internal } from "./_generated/api";
 import type { Doc, Id } from "./_generated/dataModel";
 import type { ActionCtx, MutationCtx, QueryCtx } from "./_generated/server";
 import { internalAction, internalMutation, internalQuery, mutation, query } from "./functions";
-import {
-  assertAdmin,
-  assertModerator,
-  getOptionalActiveAuthUserId,
-  requireUser,
-} from "./lib/access";
+import { assertAdmin, assertModerator, getOptionalActiveAuthUserId, requireUser } from "./lib/access";
 import { syncGitHubProfile } from "./lib/githubAccount";
-import { toPublicUser } from "./lib/public";
 import {
   ensurePersonalPublisherForUser,
   getActiveUserByHandleOrPersonalPublisher,
   getPublisherByHandle,
   getUserByHandleOrPersonalPublisher,
 } from "./lib/publishers";
+import { toPublicUser } from "./lib/public";
 import {
   getLatestActiveReservedHandle,
   isHandleReservedForAnotherUser,
@@ -301,9 +296,7 @@ export async function ensureHandler(ctx: MutationCtx) {
     updates.updatedAt = Date.now();
     await ctx.db.patch(userId, updates);
   }
-  const ensuredUser = hasUpdates
-    ? ({ ...user, ...updates } as Doc<"users">)
-    : ((await ctx.db.get(userId)) ?? user);
+  const ensuredUser = hasUpdates ? ({ ...user, ...updates } as Doc<"users">) : ((await ctx.db.get(userId)) ?? user);
   await ensurePersonalPublisherForUser(ctx, ensuredUser);
   return await ctx.db.get(userId);
 }
@@ -393,6 +386,23 @@ export const list = query({
   },
 });
 
+export const listPublic = query({
+  args: { limit: v.optional(v.number()), search: v.optional(v.string()) },
+  handler: async (ctx, args) => {
+    const limit = clampInt(args.limit ?? 40, 1, 100);
+    const result = await queryUsersForPublicList(ctx, {
+      limit,
+      search: args.search,
+    });
+    return {
+      items: result.items
+        .map((user) => toPublicUser(user))
+        .filter((user): user is NonNullable<ReturnType<typeof toPublicUser>> => Boolean(user)),
+      total: result.total,
+    };
+  },
+});
+
 function normalizeSearchQuery(search?: string) {
   const trimmed = search?.trim().toLowerCase();
   return trimmed ? trimmed : undefined;
@@ -425,6 +435,27 @@ async function queryUsersForAdminList(
   };
 }
 
+async function queryUsersForPublicList(
+  ctx: Pick<QueryCtx, "db">,
+  args: { limit: number; search?: string },
+) {
+  const normalizedSearch = normalizeSearchQuery(args.search);
+  const scanLimit = normalizedSearch
+    ? computeUserSearchScanLimit(args.limit)
+    : clampInt(args.limit * 6, args.limit, MAX_USER_SEARCH_SCAN);
+  const scannedUsers = await ctx.db
+    .query("users")
+    .withIndex("by_active_handle", (q) => q.eq("deletedAt", undefined).eq("deactivatedAt", undefined))
+    .order("desc")
+    .take(scanLimit);
+  const activeUsers = scannedUsers.filter((user) => Boolean(user.handle));
+  const result = buildUserSearchResults(activeUsers, normalizedSearch);
+  return {
+    items: result.items.slice(0, args.limit),
+    total: result.total,
+  };
+}
+
 function clampInt(value: number, min: number, max: number) {
   return Math.min(Math.max(Math.trunc(value), min), max);
 }
@@ -436,6 +467,20 @@ export const getByHandle = query({
   },
 });
 
+/** Lightweight stats for user hover tooltips. Uses the skills by_owner index. */
+export const getHoverStats = query({
+  args: { userId: v.id("users") },
+  handler: async (ctx, args) => {
+    const user = await ctx.db.get(args.userId);
+
+    return {
+      publishedSkills: user?.publishedSkills ?? 0,
+      totalStars: user?.totalStars ?? 0,
+      totalDownloads: user?.totalDownloads ?? 0,
+    };
+  },
+});
+
 export const getReservedHandleInternal = internalQuery({
   args: { handle: v.string() },
   handler: async (ctx, args) => {
@@ -854,8 +899,7 @@ async function ensurePublisherHandleWithActor(
 
   if (existing) {
     const nextDisplayName =
-      args.displayName?.trim() &&
-      (!existing.displayName || existing.displayName === existing.handle)
+      args.displayName?.trim() && (!existing.displayName || existing.displayName === existing.handle)
         ? displayName
         : existing.displayName;
     await ctx.db.patch(existing._id, {

docs/cli.md

@@ -62,9 +62,6 @@ When no proxy variable is set, behavior is unchanged (direct connections).
 Stores your API token + cached registry URL.
 
 - macOS: `~/Library/Application Support/clawhub/config.json`
-- Linux/XDG: `$XDG_CONFIG_HOME/clawhub/config.json` or `~/.config/clawhub/config.json`
-- Windows: `%APPDATA%\\clawhub\\config.json`
-- Legacy fallback: if `clawhub/config.json` does not exist yet but `clawdhub/config.json` does, the CLI reuses the legacy path
 - override: `CLAWHUB_CONFIG_PATH` (legacy `CLAWDHUB_CONFIG_PATH`)
 
 ## Commands

package.json

@@ -7,7 +7,6 @@
   "type": "module",
   "scripts": {
     "build": "bun --bun vite build && bun scripts/copy-og-assets.ts",
-    "check": "bun run lint",
     "check:peers": "bun scripts/check-peer-deps.ts",
     "check:secrets": "bun scripts/check-staged-secrets.mjs",
     "convex:deploy": "bunx convex deploy --typecheck=disable --yes",
@@ -46,6 +45,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-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
@@ -58,6 +59,7 @@
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/router-plugin": "1.167.2",
     "@vercel/analytics": "^2.0.1",
+    "class-variance-authority": "^0.7.1",
     "clawhub-schema": "workspace:*",
     "clsx": "^2.1.1",
     "convex": "^1.34.1",
@@ -67,6 +69,8 @@
     "ignore": "^7.0.5",
     "lucide-react": "^0.577.0",
     "monaco-editor": "^0.55.1",
+    "next": "^16.2.3",
+    "next-themes": "^0.4.6",
     "nitro": "3.0.260311-beta",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -77,6 +81,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.2",
+    "tw-animate-css": "^1.4.0",
     "vite-tsconfig-paths": "^6.1.1",
     "yaml": "^2.8.3",
     "zod": "^4.3.6"
@@ -99,7 +104,7 @@
     "oxlint-tsgolint": "^0.17.4",
     "typescript": "^5.9.3",
     "undici": "^7.24.7",
-    "vite": "8.0.5",
+    "vite": "8.0.1",
     "vitest": "^4.1.2"
   }
 }

packages/clawhub/README.md

@@ -27,12 +27,7 @@ clawhub login --token clh_...
 Notes:
 
 - Browser login opens `https://clawhub.ai/cli/auth` and completes via a loopback callback.
-- Default config path:
-  - macOS: `~/Library/Application Support/clawhub/config.json`
-  - Linux/XDG: `$XDG_CONFIG_HOME/clawhub/config.json` or `~/.config/clawhub/config.json`
-  - Windows: `%APPDATA%\\clawhub\\config.json`
-- Legacy fallback: if `clawhub/config.json` does not exist yet but `clawdhub/config.json` does, the CLI reuses the legacy path.
-- Override via `CLAWHUB_CONFIG_PATH` (legacy `CLAWDHUB_CONFIG_PATH`).
+- Token stored in `~/Library/Application Support/clawhub/config.json` on macOS (override via `CLAWHUB_CONFIG_PATH`, legacy `CLAWDHUB_CONFIG_PATH`).
 
 ## Examples
 

packages/clawhub/src/schema/packages.ts

@@ -57,14 +57,6 @@ export const PackageVerificationSummarySchema = type({
 });
 export type PackageVerificationSummary = (typeof PackageVerificationSummarySchema)[inferred];
 
-export const PackageStatsSchema = type({
-  downloads: "number",
-  installs: "number",
-  stars: "number",
-  versions: "number",
-});
-export type PackageStats = (typeof PackageStatsSchema)[inferred];
-
 export const PackageVtAnalysisSchema = type({
   status: "string",
   verdict: "string?",
@@ -196,7 +188,6 @@ export const ApiV1PackageResponseSchema = type({
     compatibility: PackageCompatibilitySchema.or("null").optional(),
     capabilities: PackageCapabilitySummarySchema.or("null").optional(),
     verification: PackageVerificationSummarySchema.or("null").optional(),
-    stats: PackageStatsSchema.optional(),
   }).or("null"),
   owner: type({
     handle: "string|null",

packages/schema/dist/packages.d.ts

@@ -46,13 +46,6 @@ export declare const PackageVerificationSummarySchema: import("arktype/internal/
     scanStatus?: "clean" | "suspicious" | "malicious" | "pending" | "not-run" | undefined;
 }, {}>;
 export type PackageVerificationSummary = (typeof PackageVerificationSummarySchema)[inferred];
-export declare const PackageStatsSchema: import("arktype/internal/variants/object.ts").ObjectType<{
-    downloads: number;
-    installs: number;
-    stars: number;
-    versions: number;
-}, {}>;
-export type PackageStats = (typeof PackageStatsSchema)[inferred];
 export declare const PackageVtAnalysisSchema: import("arktype/internal/variants/object.ts").ObjectType<{
     status: string;
     checkedAt: number;
@@ -268,12 +261,6 @@ export declare const ApiV1PackageResponseSchema: import("arktype/internal/varian
             hasProvenance?: boolean | undefined;
             scanStatus?: "clean" | "suspicious" | "malicious" | "pending" | "not-run" | undefined;
         } | null | undefined;
-        stats?: {
-            downloads: number;
-            installs: number;
-            stars: number;
-            versions: number;
-        } | undefined;
     } | null;
     owner: {
         handle: string | null;

packages/schema/dist/packages.js

@@ -40,12 +40,6 @@ export const PackageVerificationSummarySchema = type({
     hasProvenance: "boolean?",
     scanStatus: '"clean"|"suspicious"|"malicious"|"pending"|"not-run"?',
 });
-export const PackageStatsSchema = type({
-    downloads: "number",
-    installs: "number",
-    stars: "number",
-    versions: "number",
-});
 export const PackageVtAnalysisSchema = type({
     status: "string",
     verdict: "string?",
@@ -157,7 +151,6 @@ export const ApiV1PackageResponseSchema = type({
         compatibility: PackageCompatibilitySchema.or("null").optional(),
         capabilities: PackageCapabilitySummarySchema.or("null").optional(),
         verification: PackageVerificationSummarySchema.or("null").optional(),
-        stats: PackageStatsSchema.optional(),
     }).or("null"),
     owner: type({
         handle: "string|null",

packages/schema/dist/textFiles.d.ts

@@ -3,5 +3,3 @@ export declare const TEXT_FILE_EXTENSION_SET: Set<string>;
 export declare const TEXT_CONTENT_TYPES: readonly ["application/json", "application/xml", "application/yaml", "application/x-yaml", "application/toml", "application/javascript", "application/typescript", "application/markdown", "image/svg+xml"];
 export declare const TEXT_CONTENT_TYPE_SET: Set<string>;
 export declare function isTextContentType(contentType: string): boolean;
-export declare function guessTextContentType(path: string): string | undefined;
-export declare function normalizeTextContentType(path: string, contentType?: string | null): string | undefined;

packages/schema/dist/textFiles.js

@@ -53,26 +53,6 @@ const RAW_TEXT_CONTENT_TYPES = [
 ];
 export const TEXT_CONTENT_TYPES = RAW_TEXT_CONTENT_TYPES;
 export const TEXT_CONTENT_TYPE_SET = new Set(TEXT_CONTENT_TYPES);
-const CANONICAL_TEXT_CONTENT_TYPES = {
-    md: "text/markdown",
-    mdx: "text/markdown",
-    txt: "text/plain",
-    json: "application/json",
-    json5: "application/json",
-    yaml: "application/yaml",
-    yml: "application/yaml",
-    toml: "application/toml",
-    js: "application/javascript",
-    cjs: "application/javascript",
-    mjs: "application/javascript",
-    jsx: "application/javascript",
-    ts: "application/typescript",
-    mts: "application/typescript",
-    cts: "application/typescript",
-    tsx: "application/typescript",
-    xml: "application/xml",
-    svg: "image/svg+xml",
-};
 export function isTextContentType(contentType) {
     if (!contentType)
         return false;
@@ -83,19 +63,4 @@ export function isTextContentType(contentType) {
         return true;
     return TEXT_CONTENT_TYPE_SET.has(normalized);
 }
-export function guessTextContentType(path) {
-    const ext = path.trim().toLowerCase().split(".").at(-1) ?? "";
-    if (!ext || !TEXT_FILE_EXTENSION_SET.has(ext))
-        return undefined;
-    return CANONICAL_TEXT_CONTENT_TYPES[ext] ?? "text/plain";
-}
-export function normalizeTextContentType(path, contentType) {
-    const normalized = contentType?.split(";", 1)[0]?.trim().toLowerCase() ?? "";
-    const guessed = guessTextContentType(path);
-    if (!guessed)
-        return normalized || undefined;
-    if (isTextContentType(normalized))
-        return normalized;
-    return guessed;
-}
 //# sourceMappingURL=textFiles.js.map

packages/schema/dist/textFiles.js.map

@@ -1 +1 @@
-{"version":3,"file":"textFiles.js","sourceRoot":"","sources":["../src/textFiles.ts"],"names":[],"mappings":"AAAA,MAAM,wBAAwB,GAAG;IAC/B,IAAI;IACJ,KAAK;IACL,KAAK;IACL,MAAM;IACN,OAAO;IACP,MAAM;IACN,KAAK;IACL,MAAM;IACN,IAAI;IACJ,KAAK;IACL,KAAK;IACL,IAAI;IACJ,KAAK;IACL,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,OAAO;IACP,IAAI;IACJ,MAAM;IACN,IAAI;IACJ,KAAK;IACL,GAAG;IACH,GAAG;IACH,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,MAAM;IACN,KAAK;IACL,MAAM;IACN,MAAM;IACN,KAAK;CACG,CAAC;AAEX,MAAM,CAAC,MAAM,oBAAoB,GAAG,wBAAwB,CAAC;AAC7D,MAAM,CAAC,MAAM,uBAAuB,GAAG,IAAI,GAAG,CAAS,oBAAoB,CAAC,CAAC;AAE7E,MAAM,sBAAsB,GAAG;IAC7B,kBAAkB;IAClB,iBAAiB;IACjB,kBAAkB;IAClB,oBAAoB;IACpB,kBAAkB;IAClB,wBAAwB;IACxB,wBAAwB;IACxB,sBAAsB;IACtB,eAAe;CACP,CAAC;AAEX,MAAM,CAAC,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AACzD,MAAM,CAAC,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAS,kBAAkB,CAAC,CAAC;AAEzE,MAAM,4BAA4B,GAA2B;IAC3D,EAAE,EAAE,eAAe;IACnB,GAAG,EAAE,eAAe;IACpB,GAAG,EAAE,YAAY;IACjB,IAAI,EAAE,kBAAkB;IACxB,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,kBAAkB;IACxB,GAAG,EAAE,kBAAkB;IACvB,IAAI,EAAE,kBAAkB;IACxB,EAAE,EAAE,wBAAwB;IAC5B,GAAG,EAAE,wBAAwB;IAC7B,GAAG,EAAE,wBAAwB;IAC7B,GAAG,EAAE,wBAAwB;IAC7B,EAAE,EAAE,wBAAwB;IAC5B,GAAG,EAAE,wBAAwB;IAC7B,GAAG,EAAE,wBAAwB;IAC7B,GAAG,EAAE,wBAAwB;IAC7B,GAAG,EAAE,iBAAiB;IACtB,GAAG,EAAE,eAAe;CACrB,CAAC;AAEF,MAAM,UAAU,iBAAiB,CAAC,WAAmB;IACnD,IAAI,CAAC,WAAW;QAAE,OAAO,KAAK,CAAC;IAC/B,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;IAC5E,IAAI,CAAC,UAAU;QAAE,OAAO,KAAK,CAAC;IAC9B,IAAI,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC;QAAE,OAAO,IAAI,CAAC;IAChD,OAAO,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,IAAY;IAC/C,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC9D,IAAI,CAAC,GAAG,IAAI,CAAC,uBAAuB,CAAC,GAAG,CAAC,GAAG,CAAC;QAAE,OAAO,SAAS,CAAC;IAChE,OAAO,4BAA4B,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC;AAC3D,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,IAAY,EAAE,WAA2B;IAChF,MAAM,UAAU,GAAG,WAAW,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;IAC7E,MAAM,OAAO,GAAG,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAC3C,IAAI,CAAC,OAAO;QAAE,OAAO,UAAU,IAAI,SAAS,CAAC;IAC7C,IAAI,iBAAiB,CAAC,UAAU,CAAC;QAAE,OAAO,UAAU,CAAC;IACrD,OAAO,OAAO,CAAC;AACjB,CAAC"}
+{"version":3,"file":"textFiles.js","sourceRoot":"","sources":["../src/textFiles.ts"],"names":[],"mappings":"AAAA,MAAM,wBAAwB,GAAG;IAC/B,IAAI;IACJ,KAAK;IACL,KAAK;IACL,MAAM;IACN,OAAO;IACP,MAAM;IACN,KAAK;IACL,MAAM;IACN,IAAI;IACJ,KAAK;IACL,KAAK;IACL,IAAI;IACJ,KAAK;IACL,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,OAAO;IACP,IAAI;IACJ,MAAM;IACN,IAAI;IACJ,KAAK;IACL,GAAG;IACH,GAAG;IACH,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,MAAM;IACN,KAAK;IACL,MAAM;IACN,MAAM;IACN,KAAK;CACG,CAAC;AAEX,MAAM,CAAC,MAAM,oBAAoB,GAAG,wBAAwB,CAAC;AAC7D,MAAM,CAAC,MAAM,uBAAuB,GAAG,IAAI,GAAG,CAAS,oBAAoB,CAAC,CAAC;AAE7E,MAAM,sBAAsB,GAAG;IAC7B,kBAAkB;IAClB,iBAAiB;IACjB,kBAAkB;IAClB,oBAAoB;IACpB,kBAAkB;IAClB,wBAAwB;IACxB,wBAAwB;IACxB,sBAAsB;IACtB,eAAe;CACP,CAAC;AAEX,MAAM,CAAC,MAAM,kBAAkB,GAAG,sBAAsB,CAAC;AACzD,MAAM,CAAC,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAS,kBAAkB,CAAC,CAAC;AAEzE,MAAM,UAAU,iBAAiB,CAAC,WAAmB;IACnD,IAAI,CAAC,WAAW;QAAE,OAAO,KAAK,CAAC;IAC/B,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;IAC5E,IAAI,CAAC,UAAU;QAAE,OAAO,KAAK,CAAC;IAC9B,IAAI,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC;QAAE,OAAO,IAAI,CAAC;IAChD,OAAO,qBAAqB,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;AAC/C,CAAC"}

packages/schema/src/packages.ts

@@ -57,14 +57,6 @@ export const PackageVerificationSummarySchema = type({
 });
 export type PackageVerificationSummary = (typeof PackageVerificationSummarySchema)[inferred];
 
-export const PackageStatsSchema = type({
-  downloads: "number",
-  installs: "number",
-  stars: "number",
-  versions: "number",
-});
-export type PackageStats = (typeof PackageStatsSchema)[inferred];
-
 export const PackageVtAnalysisSchema = type({
   status: "string",
   verdict: "string?",
@@ -198,7 +190,6 @@ export const ApiV1PackageResponseSchema = type({
     compatibility: PackageCompatibilitySchema.or("null").optional(),
     capabilities: PackageCapabilitySummarySchema.or("null").optional(),
     verification: PackageVerificationSummarySchema.or("null").optional(),
-    stats: PackageStatsSchema.optional(),
   }).or("null"),
   owner: type({
     handle: "string|null",

packages/schema/src/textFiles.test.ts

@@ -2,12 +2,7 @@
 
 import { describe, expect, it } from "vitest";
 import * as schema from ".";
-import {
-  guessTextContentType,
-  isTextContentType,
-  normalizeTextContentType,
-  TEXT_FILE_EXTENSION_SET,
-} from "./textFiles";
+import { isTextContentType, TEXT_FILE_EXTENSION_SET } from "./textFiles";
 
 describe("clawhub-schema textFiles", () => {
   it("exports text-file extension set", () => {
@@ -21,25 +16,8 @@ describe("clawhub-schema textFiles", () => {
     expect(isTextContentType("application/octet-stream")).toBe(false);
   });
 
-  it("guesses canonical content types for text files", () => {
-    expect(guessTextContentType("src/index.ts")).toBe("application/typescript");
-    expect(guessTextContentType("README.md")).toBe("text/markdown");
-    expect(guessTextContentType("image.png")).toBeUndefined();
-  });
-
-  it("normalizes misleading MIME types for text files", () => {
-    expect(normalizeTextContentType("src/index.ts", "video/mp2t")).toBe("application/typescript");
-    expect(normalizeTextContentType("README.md", "text/markdown; charset=utf-8")).toBe(
-      "text/markdown",
-    );
-    expect(normalizeTextContentType("image.png", "image/png")).toBe("image/png");
-  });
-
   it("re-exports helpers from index", () => {
     expect(typeof schema.isTextContentType).toBe("function");
     expect(schema.isTextContentType("application/markdown")).toBe(true);
-    expect(schema.normalizeTextContentType("src/index.ts", "video/mp2t")).toBe(
-      "application/typescript",
-    );
   });
 });

packages/schema/src/textFiles.ts

@@ -57,27 +57,6 @@ const RAW_TEXT_CONTENT_TYPES = [
 export const TEXT_CONTENT_TYPES = RAW_TEXT_CONTENT_TYPES;
 export const TEXT_CONTENT_TYPE_SET = new Set<string>(TEXT_CONTENT_TYPES);
 
-const CANONICAL_TEXT_CONTENT_TYPES: Record<string, string> = {
-  md: "text/markdown",
-  mdx: "text/markdown",
-  txt: "text/plain",
-  json: "application/json",
-  json5: "application/json",
-  yaml: "application/yaml",
-  yml: "application/yaml",
-  toml: "application/toml",
-  js: "application/javascript",
-  cjs: "application/javascript",
-  mjs: "application/javascript",
-  jsx: "application/javascript",
-  ts: "application/typescript",
-  mts: "application/typescript",
-  cts: "application/typescript",
-  tsx: "application/typescript",
-  xml: "application/xml",
-  svg: "image/svg+xml",
-};
-
 export function isTextContentType(contentType: string) {
   if (!contentType) return false;
   const normalized = contentType.split(";", 1)[0]?.trim().toLowerCase() ?? "";
@@ -85,17 +64,3 @@ export function isTextContentType(contentType: string) {
   if (normalized.startsWith("text/")) return true;
   return TEXT_CONTENT_TYPE_SET.has(normalized);
 }
-
-export function guessTextContentType(path: string) {
-  const ext = path.trim().toLowerCase().split(".").at(-1) ?? "";
-  if (!ext || !TEXT_FILE_EXTENSION_SET.has(ext)) return undefined;
-  return CANONICAL_TEXT_CONTENT_TYPES[ext] ?? "text/plain";
-}
-
-export function normalizeTextContentType(path: string, contentType?: string | null) {
-  const normalized = contentType?.split(";", 1)[0]?.trim().toLowerCase() ?? "";
-  const guessed = guessTextContentType(path);
-  if (!guessed) return normalized || undefined;
-  if (isTextContentType(normalized)) return normalized;
-  return guessed;
-}

public/logo.svg

@@ -0,0 +1,45 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
+  <rect width="512" height="512" rx="0" fill="none"/>
+  <!-- Body segments -->
+  <g fill="#F03020" stroke="#fff" stroke-width="6" stroke-linejoin="round">
+    <!-- Tail fan - center -->
+    <ellipse cx="256" cy="460" rx="42" ry="30"/>
+    <!-- Tail fan - left -->
+    <ellipse cx="210" cy="455" rx="32" ry="24" transform="rotate(25 210 455)"/>
+    <!-- Tail fan - right -->
+    <ellipse cx="302" cy="455" rx="32" ry="24" transform="rotate(-25 302 455)"/>
+    <!-- Lower body segment -->
+    <rect x="208" y="380" width="96" height="55" rx="12"/>
+    <!-- Mid-lower body -->
+    <rect x="204" y="335" width="104" height="55" rx="12"/>
+    <!-- Mid body -->
+    <rect x="200" y="290" width="112" height="55" rx="14"/>
+    <!-- Upper body / thorax -->
+    <ellipse cx="256" cy="255" rx="72" ry="65"/>
+    <!-- Head -->
+    <circle cx="256" cy="195" r="58"/>
+    <!-- Left claw arm -->
+    <path d="M195 230 Q150 190 120 170 Q100 155 95 140" stroke-width="18" fill="none" stroke-linecap="round"/>
+    <!-- Right claw arm -->
+    <path d="M317 230 Q362 190 392 170 Q412 155 417 140" stroke-width="18" fill="none" stroke-linecap="round"/>
+    <!-- Left claw -->
+    <ellipse cx="88" cy="115" rx="52" ry="42" transform="rotate(-20 88 115)"/>
+    <!-- Right claw -->
+    <ellipse cx="424" cy="115" rx="52" ry="42" transform="rotate(20 424 115)"/>
+    <!-- Left claw notch -->
+    <path d="M65 95 Q78 80 72 65" stroke-width="6" fill="none" stroke="#fff" stroke-linecap="round"/>
+    <!-- Right claw notch -->
+    <path d="M447 95 Q434 80 440 65" stroke-width="6" fill="none" stroke="#fff" stroke-linecap="round"/>
+    <!-- Left legs -->
+    <path d="M205 290 Q175 295 155 305" stroke-width="10" fill="none" stroke-linecap="round"/>
+    <path d="M202 320 Q172 330 152 340" stroke-width="10" fill="none" stroke-linecap="round"/>
+    <path d="M205 350 Q178 358 158 370" stroke-width="10" fill="none" stroke-linecap="round"/>
+    <!-- Right legs -->
+    <path d="M307 290 Q337 295 357 305" stroke-width="10" fill="none" stroke-linecap="round"/>
+    <path d="M310 320 Q340 330 360 340" stroke-width="10" fill="none" stroke-linecap="round"/>
+    <path d="M307 350 Q334 358 354 370" stroke-width="10" fill="none" stroke-linecap="round"/>
+  </g>
+  <!-- Eyes -->
+  <circle cx="236" cy="185" r="10" fill="#000"/>
+  <circle cx="276" cy="185" r="10" fill="#000"/>
+</svg>

src/__tests__/header.test.tsx

@@ -5,8 +5,12 @@ import type { ReactNode } from "react";
 import { describe, expect, it, vi } from "vitest";
 import Header from "../components/Header";
 
+const siteModeMock = vi.fn(() => "souls");
+const convexQueryMock = vi.fn().mockResolvedValue(0);
+
 vi.mock("@tanstack/react-router", () => ({
   Link: (props: { children: ReactNode }) => <a href="/">{props.children}</a>,
+  useNavigate: () => vi.fn(),
 }));
 
 vi.mock("@convex-dev/auth/react", () => ({
@@ -16,12 +20,14 @@ vi.mock("@convex-dev/auth/react", () => ({
   }),
 }));
 
+const authStatusMock = vi.fn(() => ({
+  isAuthenticated: false,
+  isLoading: false,
+  me: null,
+}));
+
 vi.mock("../lib/useAuthStatus", () => ({
-  useAuthStatus: () => ({
-    isAuthenticated: false,
-    isLoading: false,
-    me: null,
-  }),
+  useAuthStatus: () => authStatusMock(),
 }));
 
 vi.mock("../lib/theme", () => ({
@@ -56,7 +62,7 @@ vi.mock("../lib/roles", () => ({
 
 vi.mock("../lib/site", () => ({
   getClawHubSiteUrl: () => "https://clawhub.ai",
-  getSiteMode: () => "souls",
+  getSiteMode: () => siteModeMock(),
   getSiteName: () => "OnlyCrabs",
 }));
 
@@ -68,6 +74,24 @@ vi.mock("../lib/gravatar", () => ({
   gravatarUrl: vi.fn(),
 }));
 
+vi.mock("../convex/client", () => ({
+  convexHttp: {
+    query: convexQueryMock,
+  },
+}));
+
+vi.mock("../../convex/_generated/api", () => ({
+  api: {
+    skills: {
+      countPublicSkills: "countPublicSkills",
+    },
+  },
+}));
+
+vi.mock("../lib/numberFormat", () => ({
+  formatCompactStat: (n: number) => String(n),
+}));
+
 vi.mock("../components/ui/dropdown-menu", () => ({
   DropdownMenu: ({ children }: { children: ReactNode }) => <div>{children}</div>,
   DropdownMenuContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
@@ -85,8 +109,22 @@ vi.mock("../components/ui/toggle-group", () => ({
 
 describe("Header", () => {
   it("hides Packages navigation in soul mode on mobile and desktop", () => {
+    siteModeMock.mockReturnValue("souls");
+
     render(<Header />);
 
     expect(screen.queryByText("Packages")).toBeNull();
   });
-});
+
+  it("renders a plain Skills tab without fetching a count", () => {
+    siteModeMock.mockReturnValue("skills");
+    convexQueryMock.mockClear();
+
+    render(<Header />);
+
+    expect(screen.getAllByText("Skills")).toHaveLength(2);
+    expect(screen.getAllByText("Souls")).toHaveLength(2);
+    expect(screen.getAllByText("Users")).toHaveLength(2);
+    expect(screen.getByPlaceholderText("Search skills, plugins, users")).toBeTruthy();
+    expect(convexQueryMock).not.toHaveBeenCalled();
+  });});

src/__tests__/import.route.test.tsx

@@ -17,6 +17,7 @@ const useAuthStatusMock = vi.fn();
 let useActionCallCount = 0;
 
 vi.mock("convex/react", () => ({
+  ConvexReactClient: class {},
   useQuery: (...args: unknown[]) => useQueryMock(...args),
   useAction: () => {
     const action = [previewImport, previewCandidate, importSkill][useActionCallCount % 3];

src/__tests__/packages-publish-route.test.tsx

@@ -26,6 +26,7 @@ const useAuthStatusMock = vi.fn();
 const originalFetch = globalThis.fetch;
 
 vi.mock("convex/react", () => ({
+  ConvexReactClient: class {},
   useMutation: () => generateUploadUrl,
   useAction: () => publishRelease,
   useQuery: () => undefined,
@@ -276,12 +277,6 @@ describe("plugins publish route", () => {
 
     expect(screen.getByText(/openclaw\.compat\.pluginApi/i)).toBeTruthy();
     expect(screen.getByText(/openclaw\.build\.openclawVersion/i)).toBeTruthy();
-    const docsLink = screen.getByRole("link", { name: /Plugin Setup and Config/i });
-    expect(docsLink.getAttribute("href")).toBe(
-      "https://docs.openclaw.ai/plugins/sdk-setup#package-metadata",
-    );
-    expect(docsLink.getAttribute("target")).toBe("_blank");
-    expect(docsLink.getAttribute("rel")).toBe("noopener noreferrer");
     expect(screen.getByRole("button", { name: "Publish" }).getAttribute("disabled")).not.toBeNull();
     expect(publishRelease).not.toHaveBeenCalled();
   });

src/__tests__/search-route.test.ts

@@ -1,99 +1,74 @@
 import { describe, expect, it, vi } from "vitest";
 
+process.env.VITE_CONVEX_URL = process.env.VITE_CONVEX_URL ?? "https://example.convex.cloud";
+
+
+vi.mock("../convex/client", () => ({
+  convex: {},
+  convexHttp: { query: vi.fn() },
+}));
+
 vi.mock("@tanstack/react-router", () => ({
-  createFileRoute: () => (config: { beforeLoad?: unknown }) => ({ __config: config }),
+  createFileRoute: () => (config: { validateSearch?: unknown; component?: unknown }) => ({
+    __config: config,
+  }),
   redirect: (options: unknown) => ({ redirect: options }),
+  Link: "a",
+  useNavigate: () => vi.fn(),
 }));
 
 import { Route } from "../routes/search";
 
-function runBeforeLoad(
-  search: { q?: string; highlighted?: boolean; nonSuspicious?: boolean },
-  hostname = "clawdhub.com",
-) {
+function runValidateSearch(search: Record<string, unknown>) {
   const route = Route as unknown as {
     __config: {
-      beforeLoad?: (args: {
-        search: { q?: string; highlighted?: boolean; nonSuspicious?: boolean };
-        location: { url: URL };
-      }) => void;
+      validateSearch?: (search: Record<string, unknown>) => unknown;
     };
   };
-  const beforeLoad = route.__config.beforeLoad as (args: {
-    search: { q?: string; highlighted?: boolean; nonSuspicious?: boolean };
-    location: { url: URL };
-  }) => void;
-  let thrown: unknown;
-
-  try {
-    beforeLoad({ search, location: { url: new URL(`https://${hostname}/search`) } });
-  } catch (error) {
-    thrown = error;
-  }
-
-  return thrown;
+  const validateSearch = route.__config.validateSearch;
+  return validateSearch ? validateSearch(search) : {};
 }
 
 describe("search route", () => {
-  it("redirects skills host to the skills index", () => {
-    expect(runBeforeLoad({ q: "crab", highlighted: true }, "clawdhub.com")).toEqual({
-      redirect: {
-        to: "/skills",
-        search: {
-          q: "crab",
-          sort: undefined,
-          dir: undefined,
-          highlighted: true,
-          nonSuspicious: undefined,
-          view: undefined,
-        },
-        replace: true,
-      },
+  it("validates search with query", () => {
+    expect(runValidateSearch({ q: "crab" })).toEqual({
+      q: "crab",
+      type: undefined,
     });
   });
 
-  it("forwards nonSuspicious filter to skills index", () => {
-    expect(runBeforeLoad({ q: "crab", nonSuspicious: true }, "clawdhub.com")).toEqual({
-      redirect: {
-        to: "/skills",
-        search: {
-          q: "crab",
-          sort: undefined,
-          dir: undefined,
-          highlighted: undefined,
-          nonSuspicious: true,
-          view: undefined,
-        },
-        replace: true,
-      },
+  it("validates search with type filter", () => {
+    expect(runValidateSearch({ q: "crab", type: "skills" })).toEqual({
+      q: "crab",
+      type: "skills",
     });
   });
 
-  it("redirects souls host with query to home search", () => {
-    expect(runBeforeLoad({ q: "crab", highlighted: true }, "onlycrabs.ai")).toEqual({
-      redirect: {
-        to: "/",
-        search: {
-          q: "crab",
-          highlighted: undefined,
-          search: undefined,
-        },
-        replace: true,
-      },
+  it("ignores invalid type filter", () => {
+    expect(runValidateSearch({ q: "crab", type: "invalid" })).toEqual({
+      q: "crab",
+      type: undefined,
     });
   });
 
-  it("redirects souls host without query to home with search mode", () => {
-    expect(runBeforeLoad({}, "onlycrabs.ai")).toEqual({
-      redirect: {
-        to: "/",
-        search: {
-          q: undefined,
-          highlighted: undefined,
-          search: true,
-        },
-        replace: true,
-      },
+  it("accepts the users type filter", () => {
+    expect(runValidateSearch({ q: "vincent", type: "users" })).toEqual({
+      q: "vincent",
+      type: "users",
     });
   });
+
+  it("strips empty query", () => {
+    expect(runValidateSearch({ q: "   " })).toEqual({
+      q: undefined,
+      type: undefined,
+    });
+  });
+
+  it("has a component (not a redirect-only route)", () => {
+    const route = Route as unknown as {
+      __config: { component?: unknown };
+    };
+    expect(route.__config.component).toBeDefined();
+  });
 });

src/__tests__/skill-detail-page.test.tsx

@@ -6,6 +6,18 @@ import { SkillDetailPage } from "../components/SkillDetailPage";
 const navigateMock = vi.fn();
 const useAuthStatusMock = vi.fn();
 
+process.env.VITE_CONVEX_URL = process.env.VITE_CONVEX_URL ?? "https://example.convex.cloud";
+
+
+vi.mock("../components/UserBadge", () => ({
+  UserBadge: () => null,
+}));
+
+vi.mock("../convex/client", () => ({
+  convex: {},
+  convexHttp: { query: vi.fn() },
+}));
+
 vi.mock("@tanstack/react-router", () => ({
   Link: ({ children }: { children: unknown }) => children,
   useNavigate: () => navigateMock,
@@ -15,6 +27,7 @@ const useQueryMock = vi.fn();
 const getReadmeMock = vi.fn();
 
 vi.mock("convex/react", () => ({
+  ConvexReactClient: class {},
   useQuery: (...args: unknown[]) => useQueryMock(...args),
   useMutation: () => vi.fn(),
   useAction: () => getReadmeMock,
@@ -24,8 +37,8 @@ vi.mock("../lib/useAuthStatus", () => ({
   useAuthStatus: () => useAuthStatusMock(),
 }));
 
-vi.mock("../components/SkillDiffCard", () => ({
-  SkillDiffCard: () => <div data-testid="skill-diff-card" />,
+vi.mock("../components/SkillCommentsPanel", () => ({
+  SkillCommentsPanel: () => <div data-testid="skill-comments-panel" />,
 }));
 
 describe("SkillDetailPage", () => {
@@ -58,11 +71,8 @@ describe("SkillDetailPage", () => {
       return undefined;
     });
 
-    const { container } = render(<SkillDetailPage slug="weather" />);
-    // Loading state now renders a skeleton, not text
-    expect(
-      container.querySelector('[class*="animate-pulse"], [data-slot="skeleton"]'),
-    ).toBeTruthy();
+    render(<SkillDetailPage slug="weather" />);
+    expect(screen.getByText(/Loading skill/i)).toBeTruthy();
     expect(screen.queryByText(/Skill not found/i)).toBeNull();
   });
 
@@ -135,174 +145,11 @@ describe("SkillDetailPage", () => {
       />,
     );
 
-    // With initialData, should render content instead of skeleton
-    expect(await screen.findByRole("heading", { name: "Weather" })).toBeTruthy();
+    expect(screen.queryByText(/Loading skill/i)).toBeNull();
+    expect((await screen.findAllByRole("heading", { name: "Weather" })).length).toBeGreaterThan(0);
     expect(screen.getByText(/Get current weather\./i)).toBeTruthy();
-    expect(screen.getByRole("tab", { name: "Files" })).toBeTruthy();
-  });
-
-  it("shows capability tags on the skill page without other scan findings", async () => {
-    useQueryMock.mockImplementation((_fn: unknown, args: unknown) => {
-      if (args === "skip") return undefined;
-      if (args && typeof args === "object" && "skillId" in args) return [];
-      return undefined;
-    });
-
-    render(
-      <SkillDetailPage
-        slug="skill-pay"
-        initialData={{
-          result: {
-            skill: {
-              _id: skillId,
-              _creationTime: 0,
-              slug: "skill-pay",
-              displayName: "SkillPay",
-              summary: "Crypto payments for AI skills.",
-              ownerUserId: ownerId,
-              ownerPublisherId,
-              tags: {},
-              badges: {},
-              stats: {
-                stars: 12,
-                downloads: 34,
-                installsCurrent: 5,
-                installsAllTime: 8,
-                versions: 1,
-                comments: 0,
-              },
-              createdAt: 0,
-              updatedAt: 0,
-            },
-            owner: {
-              _id: ownerPublisherId,
-              _creationTime: 0,
-              kind: "user",
-              handle: "steipete",
-              displayName: "Peter",
-              linkedUserId: ownerId,
-            },
-            latestVersion: {
-              _id: versionId,
-              _creationTime: 0,
-              skillId,
-              version: "1.0.0",
-              fingerprint: "abc",
-              changelog: "Initial release",
-              parsed: { license: "MIT-0", frontmatter: {} },
-              capabilityTags: ["crypto", "requires-wallet", "can-make-purchases"],
-              sha256hash: "abc123",
-              files: [
-                {
-                  path: "SKILL.md",
-                  size: 10,
-                  storageId,
-                  sha256: "abc",
-                  contentType: "text/markdown",
-                },
-              ],
-              createdBy: ownerId,
-              createdAt: 0,
-            },
-            forkOf: null,
-            canonical: null,
-          },
-          readme: "# SkillPay",
-          readmeError: null,
-        }}
-      />,
-    );
-
-    expect(await screen.findByRole("heading", { name: "SkillPay" })).toBeTruthy();
-    expect(screen.getByText("Capability signals")).toBeTruthy();
-    expect(screen.getByText("Crypto")).toBeTruthy();
-    expect(screen.getByText("Requires wallet")).toBeTruthy();
-    expect(screen.getByText("Can make purchases")).toBeTruthy();
-  });
-
-  it("prefers the full frontmatter description over the shortened summary in the header", async () => {
-    useQueryMock.mockImplementation((_fn: unknown, args: unknown) => {
-      if (args === "skip") return undefined;
-      if (args && typeof args === "object" && "skillId" in args) return [];
-      return undefined;
-    });
-
-    const fullDescription =
-      "Add credit-based payments to any OpenClaw skill. Register paid skills, charge users per call, track earnings, and withdraw USDC. Use when a user wants to monetize a skill.";
-
-    render(
-      <SkillDetailPage
-        slug="skill-pay"
-        initialData={{
-          result: {
-            skill: {
-              _id: skillId,
-              _creationTime: 0,
-              slug: "skill-pay",
-              displayName: "SkillPay",
-              summary: "Add credit-based payments to any OpenClaw skill. Register paid skills...",
-              ownerUserId: ownerId,
-              ownerPublisherId,
-              tags: {},
-              badges: {},
-              stats: {
-                stars: 12,
-                downloads: 34,
-                installsCurrent: 5,
-                installsAllTime: 8,
-                versions: 1,
-                comments: 0,
-              },
-              createdAt: 0,
-              updatedAt: 0,
-            },
-            owner: {
-              _id: ownerPublisherId,
-              _creationTime: 0,
-              kind: "user",
-              handle: "steipete",
-              displayName: "Peter",
-              linkedUserId: ownerId,
-            },
-            latestVersion: {
-              _id: versionId,
-              _creationTime: 0,
-              skillId,
-              version: "1.0.0",
-              fingerprint: "abc",
-              changelog: "Initial release",
-              parsed: {
-                license: "MIT-0",
-                frontmatter: {
-                  description: fullDescription,
-                },
-              },
-              files: [
-                {
-                  path: "SKILL.md",
-                  size: 10,
-                  storageId,
-                  sha256: "abc",
-                  contentType: "text/markdown",
-                },
-              ],
-              createdBy: ownerId,
-              createdAt: 0,
-            },
-            forkOf: null,
-            canonical: null,
-          },
-          readme: "# SkillPay",
-          readmeError: null,
-        }}
-      />,
-    );
-
-    expect(await screen.findByRole("heading", { name: "SkillPay" })).toBeTruthy();
-    // The header now always shows skill.summary (not frontmatter.description)
-    expect(
-      screen.getByText("Add credit-based payments to any OpenClaw skill. Register paid skills..."),
-    ).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Files" })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Compare" })).toBeNull();
   });
 
   it("does not refetch readme when SSR data already matches the latest version", async () => {
@@ -375,7 +222,7 @@ describe("SkillDetailPage", () => {
       />,
     );
 
-    expect(await screen.findByRole("heading", { name: "Weather" })).toBeTruthy();
+    expect((await screen.findAllByRole("heading", { name: "Weather" })).length).toBeGreaterThan(0);
     expect(screen.getByText(/Get current weather\./i)).toBeTruthy();
     expect(getReadmeMock).not.toHaveBeenCalled();
   });
@@ -394,17 +241,17 @@ describe("SkillDetailPage", () => {
     useQueryMock.mockImplementation((_fn: unknown, args: unknown) => {
       if (args === "skip") return undefined;
       if (args && typeof args === "object" && "skillId" in args) return [];
-      return {
-        skill: {
-          _id: "skills:1",
-          slug: "weather",
-          displayName: "Weather",
-          summary: "Get current weather.",
-          ownerUserId: "users:1",
-          ownerPublisherId: "publishers:steipete",
-          tags: {},
-          stats: { stars: 0, downloads: 0 },
-        },
+        return {
+          skill: {
+            _id: "skills:1",
+            slug: "weather",
+            displayName: "Weather",
+            summary: "Get current weather.",
+            ownerUserId: "users:1",
+            ownerPublisherId: "publishers:steipete",
+            tags: {},
+            stats: { stars: 0, downloads: 0 },
+          },
         owner: {
           _id: "publishers:steipete",
           _creationTime: 0,
@@ -417,9 +264,8 @@ describe("SkillDetailPage", () => {
       };
     });
 
-    const { container } = render(<SkillDetailPage slug="weather" redirectToCanonical />);
-    // Loading state now renders a skeleton, not text
-    expect(container.querySelector('[class*="animate-pulse"]')).toBeTruthy();
+    render(<SkillDetailPage slug="weather" redirectToCanonical />);
+    expect(screen.getByText(/Loading skill/i)).toBeTruthy();
 
     await waitFor(() => {
       expect(navigateMock).toHaveBeenCalled();
@@ -524,7 +370,7 @@ describe("SkillDetailPage", () => {
       />,
     );
 
-    expect(screen.queryByText(/Skill not found/i)).toBeNull();
+    expect(screen.queryByText(/Loading skill/i)).toBeNull();
     expect(screen.getAllByText("Weather").length).toBeGreaterThan(0);
     expect(navigateMock).not.toHaveBeenCalled();
   });
@@ -634,10 +480,24 @@ describe("SkillDetailPage", () => {
   it("defers compare version query until compare tab is requested", async () => {
     useQueryMock.mockImplementation((_fn: unknown, args: unknown) => {
       if (args === "skip") return undefined;
+      if (
+        args &&
+        typeof args === "object" &&
+        "skillId" in args &&
+        "limit" in args &&
+        (args as { limit: number }).limit === 50
+      ) {
+        return [
+          { _id: "skillVersions:1", version: "1.0.0", files: [] },
+          { _id: "skillVersions:2", version: "1.1.0", files: [] },
+        ];
+      }
+      if (args && typeof args === "object" && "skillId" in args && "limit" in args) {
+        if ((args as { limit: number }).limit === 200) return [];
+      }
       if (args && typeof args === "object" && "limit" in args) {
         return [];
       }
-      if (args && typeof args === "object" && "skillId" in args) return [];
       if (args && typeof args === "object" && "slug" in args) {
         return {
           skill: {
@@ -666,6 +526,7 @@ describe("SkillDetailPage", () => {
 
     render(<SkillDetailPage slug="weather" />);
     expect(await screen.findByText("Weather")).toBeTruthy();
+    expect(screen.getByRole("button", { name: /compare/i })).toBeTruthy();
 
     expect(
       useQueryMock.mock.calls.some((call) => {
@@ -679,9 +540,7 @@ describe("SkillDetailPage", () => {
       }),
     ).toBe(false);
 
-    const compareTab = screen.getByRole("tab", { name: /compare/i });
-    fireEvent.mouseEnter(compareTab);
-    fireEvent.click(compareTab);
+    fireEvent.click(screen.getByRole("button", { name: /compare/i }));
 
     await waitFor(() => {
       expect(

src/__tests__/skill-route-loader.test.ts

@@ -17,6 +17,7 @@ vi.mock("@tanstack/react-router", () => ({
   createFileRoute:
     () =>
     (config: {
+      beforeLoad?: (args: { params: { owner: string; slug: string } }) => unknown;
       loader?: (args: { params: { owner: string; slug: string } }) => Promise<unknown>;
       component?: unknown;
       head?: unknown;
@@ -31,6 +32,7 @@ vi.mock("../lib/skillPage", () => ({
 async function loadRoute() {
   return (await import("../routes/$owner/$slug")).Route as unknown as {
     __config: {
+      beforeLoad?: (args: { params: { owner: string; slug: string } }) => unknown;
       loader?: (args: { params: { owner: string; slug: string } }) => Promise<unknown>;
       head?: (args: {
         params: { owner: string; slug: string };
@@ -45,6 +47,14 @@ async function loadRoute() {
   };
 }
 
+async function runBeforeLoad(params: { owner: string; slug: string }) {
+  const route = await loadRoute();
+  const beforeLoad = route.__config.beforeLoad as ((args: {
+    params: { owner: string; slug: string };
+  }) => unknown) | undefined;
+  return beforeLoad?.({ params });
+}
+
 async function runLoader(params: { owner: string; slug: string }) {
   const route = await loadRoute();
   const loader = route.__config.loader as (args: {
@@ -71,6 +81,18 @@ function runHead(
 }
 
 describe("skill route loader", () => {
+  it("allows numeric owner handles in beforeLoad", () => {
+    expect(() => runBeforeLoad({ owner: "123abc", slug: "weather" })).not.toThrow();
+  });
+
+  it("allows raw owner ids in beforeLoad", () => {
+    expect(() => runBeforeLoad({ owner: "users:abc123", slug: "weather" })).not.toThrow();
+  });
+
+  it("allows raw publisher ids in beforeLoad", () => {
+    expect(() => runBeforeLoad({ owner: "publishers:abc123", slug: "weather" })).not.toThrow();
+  });
+
   beforeEach(() => {
     fetchSkillPageDataMock.mockReset();
   });

src/__tests__/skills-index-load-more.test.tsx

@@ -23,6 +23,7 @@ vi.mock("@tanstack/react-router", () => ({
 }));
 
 vi.mock("convex/react", () => ({
+  ConvexReactClient: class {},
   useAction: (...args: unknown[]) => convexReactMocks.useAction(...args),
   useQuery: (...args: unknown[]) => convexReactMocks.useQuery(...args),
 }));

src/__tests__/skills-index.test.tsx

@@ -23,6 +23,7 @@ vi.mock("@tanstack/react-router", () => ({
 }));
 
 vi.mock("convex/react", () => ({
+  ConvexReactClient: class {},
   useAction: (...args: unknown[]) => convexReactMocks.useAction(...args),
   useQuery: (...args: unknown[]) => convexReactMocks.useQuery(...args),
 }));
@@ -66,7 +67,7 @@ describe("SkillsIndex", () => {
   it("renders an empty state when no skills are returned", async () => {
     render(<SkillsIndex />);
     await act(async () => {});
-    expect(screen.getByText("No skills match that filter")).toBeTruthy();
+    expect(screen.getByText("No skills found")).toBeTruthy();
   });
 
   it("shows loading state before fetch completes", async () => {
@@ -74,9 +75,9 @@ describe("SkillsIndex", () => {
     convexHttpMock.query.mockReturnValue(new Promise(() => {}));
     render(<SkillsIndex />);
     await act(async () => {});
-    // Header subtitle shows "Loading skills..."
-    expect(screen.getAllByText("Loading skills...").length).toBeGreaterThanOrEqual(1);
-    expect(screen.queryByText("No skills match that filter")).toBeNull();
+    // Results area shows skeleton or dash while loading
+    expect(screen.getByText("\u2014")).toBeTruthy();
+    expect(screen.queryByText("No skills found")).toBeNull();
   });
 
   it("shows empty state immediately when search returns no results", async () => {
@@ -91,8 +92,8 @@ describe("SkillsIndex", () => {
     });
 
     // Should show empty state, not loading
-    expect(screen.getByText("No skills match that filter")).toBeTruthy();
-    expect(screen.queryByText("Loading skills...")).toBeNull();
+    expect(screen.getByText("No skills found")).toBeTruthy();
+    expect(screen.queryByText(/Loading skills/)).toBeNull();
   });
 
   it("skips list fetch and calls search when query is set", async () => {
@@ -136,7 +137,7 @@ describe("SkillsIndex", () => {
 
     render(<SkillsIndex />);
 
-    const input = screen.getByPlaceholderText("Search skills by name, slug, or summary...");
+    const input = screen.getByPlaceholderText("Search skills...");
     await act(async () => {
       fireEvent.change(input, { target: { value: "cli-design-framework" } });
       await vi.runAllTimersAsync();
@@ -161,7 +162,7 @@ describe("SkillsIndex", () => {
 
     render(<SkillsIndex />);
 
-    const input = screen.getByPlaceholderText("Search skills by name, slug, or summary...");
+    const input = screen.getByPlaceholderText("Search skills...");
     await act(async () => {
       fireEvent.change(input, { target: { value: "cli-design-framework" } });
       await vi.runAllTimersAsync();
@@ -251,9 +252,12 @@ describe("SkillsIndex", () => {
       await vi.runAllTimersAsync();
     });
 
-    const links = screen.getAllByRole("link");
-    expect(links[0]?.textContent).toContain("Older High Score");
-    expect(links[1]?.textContent).toContain("Newer Low Score");
+    const titles = Array.from(
+      document.querySelectorAll(".skill-list-item-name"),
+    ).map((node) => node.textContent);
+
+    expect(titles[0]).toBe("Older High Score");
+    expect(titles[1]).toBe("Newer Low Score");
   });
 
   it("passes nonSuspiciousOnly to list query when filter is active", async () => {
@@ -288,42 +292,6 @@ describe("SkillsIndex", () => {
     );
   });
 
-  it("passes capabilityTag to list query when tag filter is active", async () => {
-    searchMock = { tag: "crypto" };
-    render(<SkillsIndex />);
-    await act(async () => {});
-
-    expect(convexHttpMock.query).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.objectContaining({
-        capabilityTag: "crypto",
-      }),
-    );
-  });
-
-  it("shows and clears the active capability tag filter", async () => {
-    searchMock = { tag: "crypto" };
-    render(<SkillsIndex />);
-    await act(async () => {});
-
-    const capabilityChip = screen.getByRole("button", { name: /crypto/i });
-    expect(capabilityChip).toBeTruthy();
-
-    await act(async () => {
-      fireEvent.click(capabilityChip);
-    });
-
-    expect(navigateMock).toHaveBeenCalled();
-    const lastCall = navigateMock.mock.calls.at(-1)?.[0] as {
-      replace?: boolean;
-      search: (prev: Record<string, unknown>) => Record<string, unknown>;
-    };
-    expect(lastCall.replace).toBe(true);
-    expect(lastCall.search({ tag: "crypto" })).toEqual({
-      tag: undefined,
-    });
-  });
-
   it("shows load-more button when more results are available", async () => {
     vi.stubGlobal("IntersectionObserver", undefined);
     convexHttpMock.query.mockResolvedValue({
@@ -356,7 +324,7 @@ describe("SkillsIndex", () => {
       fireEvent.click(loadMoreButton);
     });
 
-    expect(screen.getByRole("button", { name: "Load more" }).hasAttribute("disabled")).toBe(true);
+    expect(screen.getByText(/Loading/)).toBeTruthy();
   });
 });
 

src/__tests__/upload.route.test.tsx

@@ -22,6 +22,7 @@ const useAuthStatusMock = vi.fn();
 let useActionCallCount = 0;
 
 vi.mock("convex/react", () => ({
+  ConvexReactClient: class {},
   useQuery: (...args: unknown[]) => useQueryMock(...args),
   useMutation: () => generateUploadUrl,
   useAction: () => {

src/components/AppProviders.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef } from "react";
 import { convex } from "../convex/client";
 import { getUserFacingAuthError, normalizeAuthErrorMessage } from "../lib/authErrorMessage";
 import { clearAuthError, setAuthError } from "../lib/useAuthError";
+import { TooltipProvider } from "./ui/tooltip";
 import { UserBootstrap } from "./UserBootstrap";
 
 function getPendingAuthCode() {
@@ -82,10 +83,12 @@ export function AuthErrorHandler() {
 export function AppProviders({ children }: { children: React.ReactNode }) {
   return (
     <ConvexAuthProvider client={convex} shouldHandleCode={false}>
-      <AuthCodeHandler />
-      <AuthErrorHandler />
-      <UserBootstrap />
-      {children}
+      <TooltipProvider delayDuration={400}>
+        <AuthCodeHandler />
+        <AuthErrorHandler />
+        <UserBootstrap />
+        {children}
+      </TooltipProvider>
     </ConvexAuthProvider>
   );
 }

src/components/BrowseSidebar.tsx

@@ -0,0 +1,120 @@
+import {
+  Database,
+  GitBranch,
+  MessageSquare,
+  Package,
+  Plug,
+  Shield,
+  Wrench,
+  Zap,
+} from "lucide-react";
+import type { SkillCategory } from "../lib/categories";
+
+type FilterItem = {
+  key: string;
+  label: string;
+  active: boolean;
+};
+
+type SortOption = {
+  value: string;
+  label: string;
+};
+
+type BrowseSidebarProps = {
+  categories?: SkillCategory[];
+  activeCategory?: string;
+  onCategoryChange?: (slug: string | undefined) => void;
+  sortOptions: SortOption[];
+  activeSort: string;
+  onSortChange: (value: string) => void;
+  filters: FilterItem[];
+  onFilterToggle: (key: string) => void;
+};
+
+const CATEGORY_ICONS: Record<string, React.ReactNode> = {
+  "mcp-tools": <Plug size={15} />,
+  prompts: <MessageSquare size={15} />,
+  workflows: <GitBranch size={15} />,
+  "dev-tools": <Wrench size={15} />,
+  data: <Database size={15} />,
+  security: <Shield size={15} />,
+  automation: <Zap size={15} />,
+  other: <Package size={15} />,
+};
+
+export function BrowseSidebar({
+  categories,
+  activeCategory,
+  onCategoryChange,
+  sortOptions,
+  activeSort,
+  onSortChange,
+  filters,
+  onFilterToggle,
+}: BrowseSidebarProps) {
+  return (
+    <aside className="browse-sidebar" aria-label="Browse filters">
+      <fieldset className="sidebar-section" role="radiogroup" aria-label="Sort order">
+        <legend className="sidebar-title">Sort by</legend>
+        {sortOptions.map((opt) => (
+          <button
+            key={opt.value}
+            className={`sidebar-option${activeSort === opt.value ? " is-active" : ""}`}
+            type="button"
+            role="radio"
+            aria-checked={activeSort === opt.value}
+            onClick={() => onSortChange(opt.value)}
+          >
+            {opt.label}
+          </button>
+        ))}
+      </fieldset>
+
+      {categories && onCategoryChange ? (
+        <fieldset className="sidebar-section" role="radiogroup" aria-label="Category filter">
+          <legend className="sidebar-title">Categories</legend>
+          <button
+            className={`sidebar-option${!activeCategory ? " is-active" : ""}`}
+            type="button"
+            role="radio"
+            aria-checked={!activeCategory}
+            onClick={() => onCategoryChange(undefined)}
+          >
+            All
+          </button>
+          {categories.map((cat) => (
+            <button
+              key={cat.slug}
+              className={`sidebar-option${activeCategory === cat.slug ? " is-active" : ""}`}
+              type="button"
+              role="radio"
+              aria-checked={activeCategory === cat.slug}
+              onClick={() => onCategoryChange(cat.slug)}
+            >
+              <span className="sidebar-option-icon" aria-hidden="true">
+                {CATEGORY_ICONS[cat.slug]}
+              </span>
+              {cat.label}
+            </button>
+          ))}
+        </fieldset>
+      ) : null}
+
+      <fieldset className="sidebar-section" aria-label="Toggle filters">
+        <legend className="sidebar-title">Filters</legend>
+        {filters.map((f) => (
+          <label key={f.key} className="sidebar-checkbox">
+            <input
+              type="checkbox"
+              checked={f.active}
+              onChange={() => onFilterToggle(f.key)}
+              aria-label={f.label}
+            />
+            <span>{f.label}</span>
+          </label>
+        ))}
+      </fieldset>
+    </aside>
+  );
+}

src/components/DeploymentDriftBanner.tsx

@@ -69,17 +69,7 @@ function DeploymentDriftBannerContent() {
   return (
     <div
       role="alert"
-      style={{
-        margin: "16px auto 0",
-        width: "min(1100px, calc(100vw - 32px))",
-        border: "1px solid #f59e0b",
-        background: "#fff7ed",
-        color: "#9a3412",
-        borderRadius: "14px",
-        padding: "12px 16px",
-        fontSize: "0.95rem",
-        lineHeight: 1.4,
-      }}
+      className="mx-auto mt-4 w-[min(1100px,calc(100vw-32px))] rounded-[14px] border border-status-warning-fg/40 bg-status-warning-bg px-4 py-3 text-[0.95rem] leading-[1.4] text-status-warning-fg"
     >
       Deploy mismatch detected. Frontend expects backend build <code>{drift.expectedBuildSha}</code>{" "}
       but Convex reports <code>{drift.actualBuildSha}</code>.

src/components/Footer.tsx

@@ -1,34 +1,51 @@
+import { Link } from "@tanstack/react-router";
+import { FOOTER_NAV_SECTIONS } from "../lib/nav-items";
 import { getSiteName } from "../lib/site";
-import { Separator } from "./ui/separator";
 
 export function Footer() {
   const siteName = getSiteName();
   return (
-    <footer className="mt-auto px-7 pb-8 pt-12">
-      <div className="mx-auto max-w-[1200px]">
-        <Separator className="mb-6" />
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-[0.82rem] text-[color:var(--ink-soft)]">
-          <span className="font-semibold text-[color:var(--ink)]">{siteName}</span>
-          <FooterLink href="https://openclaw.ai">OpenClaw</FooterLink>
-          <FooterLink href="https://vercel.com">Vercel</FooterLink>
-          <FooterLink href="https://www.convex.dev">Convex</FooterLink>
-          <FooterLink href="https://github.com/openclaw/clawhub">Open source (MIT)</FooterLink>
-          <FooterLink href="https://steipete.me">Peter Steinberger</FooterLink>
+    <footer className="site-footer" role="contentinfo">
+      <div className="site-footer-inner">
+        <div className="site-footer-divider" aria-hidden="true" />
+        <div className="footer-grid">
+          {FOOTER_NAV_SECTIONS.map((section) => (
+            <div key={section.title} className="footer-col">
+              <h4 className="footer-col-title">{section.title}</h4>
+              {section.items.map((item) => {
+                if (item.kind === "link") {
+                  return (
+                    <Link key={item.label} to={item.to} search={item.search ?? {}}>
+                      {item.label}
+                    </Link>
+                  );
+                }
+                if (item.kind === "external") {
+                  return (
+                    <a key={item.label} href={item.href} target="_blank" rel="noreferrer">
+                      {item.label}
+                    </a>
+                  );
+                }
+                // kind === "text"
+                return <span key={item.label}>{item.label}</span>;
+              })}
+            </div>
+          ))}
+        </div>
+        <div className="footer-bottom">
+          <span>
+            {siteName} — An{" "}
+            <a href="https://openclaw.ai" target="_blank" rel="noreferrer">
+              OpenClaw
+            </a>{" "}
+            project by{" "}
+            <a href="https://steipete.me" target="_blank" rel="noreferrer">
+              Peter Steinberger
+            </a>
+          </span>
         </div>
       </div>
     </footer>
   );
 }
-
-function FooterLink({ href, children }: { href: string; children: React.ReactNode }) {
-  return (
-    <a
-      href={href}
-      target="_blank"
-      rel="noreferrer"
-      className="text-[color:var(--ink-soft)] transition-colors duration-150 hover:text-[color:var(--ink)]"
-    >
-      {children}
-    </a>
-  );
-}

src/components/Header.tsx

@@ -1,16 +1,21 @@
 import { useAuthActions } from "@convex-dev/auth/react";
-import { Link } from "@tanstack/react-router";
-import { Menu, Monitor, Moon, Plus, Search, Sun } from "lucide-react";
-import { useMemo, useRef } from "react";
+import { Link, useLocation, useNavigate } from "@tanstack/react-router";
+import { Ghost, Github, Menu, Monitor, Moon, Plug, Search, Sun, Wrench } from "lucide-react";
+import { useMemo, useRef, useState } from "react";
+import { getUserFacingAuthError } from "../lib/authErrorMessage";
 import { gravatarUrl } from "../lib/gravatar";
+import {
+  filterNavItems,
+  type NavIconName,
+  PRIMARY_NAV_ITEMS,
+  SECONDARY_NAV_ITEMS,
+} from "../lib/nav-items";
 import { isModerator } from "../lib/roles";
 import { getClawHubSiteUrl, getSiteMode, getSiteName } from "../lib/site";
 import { applyTheme, useThemeMode } from "../lib/theme";
 import { startThemeTransition } from "../lib/theme-transition";
-import { useAuthError } from "../lib/useAuthError";
-import { SignInButton } from "./SignInButton";
+import { setAuthError, useAuthError } from "../lib/useAuthError";
 import { useAuthStatus } from "../lib/useAuthStatus";
-import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Button } from "./ui/button";
 import {
   DropdownMenu,
@@ -19,24 +24,51 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "./ui/sheet";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "./ui/sheet";
 import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group";
 
+const NAV_ICONS: Record<NavIconName, React.ComponentType<{ size?: number; className?: string }>> = {
+  wrench: Wrench,
+  plug: Plug,
+  ghost: Ghost,
+};
+
 export default function Header() {
   const { isAuthenticated, isLoading, me } = useAuthStatus();
-  const { signOut } = useAuthActions();
+  const { signIn, signOut } = useAuthActions();
   const { mode, setMode } = useThemeMode();
   const toggleRef = useRef<HTMLDivElement | null>(null);
   const siteMode = getSiteMode();
   const siteName = useMemo(() => getSiteName(siteMode), [siteMode]);
   const isSoulMode = siteMode === "souls";
   const clawHubUrl = getClawHubSiteUrl();
+  const navigate = useNavigate();
+  const location = useLocation();
 
   const avatar = me?.image ?? (me?.email ? gravatarUrl(me.email) : undefined);
   const handle = me?.handle ?? me?.displayName ?? "user";
   const initial = (me?.displayName ?? me?.name ?? handle).charAt(0).toUpperCase();
   const isStaff = isModerator(me);
+  const hasResolvedUser = Boolean(me);
+  const navCtx = useMemo(
+    () => ({ isSoulMode, isAuthenticated: hasResolvedUser, isStaff }),
+    [hasResolvedUser, isSoulMode, isStaff],
+  );
+  const primaryItems = useMemo(() => filterNavItems(PRIMARY_NAV_ITEMS, navCtx), [navCtx]);
+  const secondaryItems = useMemo(() => filterNavItems(SECONDARY_NAV_ITEMS, navCtx), [navCtx]);
   const { error: authError, clear: clearAuthError } = useAuthError();
+  const signInRedirectTo = getCurrentRelativeUrl();
+
+  const [navSearchQuery, setNavSearchQuery] = useState("");
+  const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   const setTheme = (next: "system" | "light" | "dark") => {
     startThemeTransition({
@@ -51,277 +83,289 @@ export default function Header() {
     });
   };
 
-  const navLinks = (
-    <>
-      {isSoulMode ? (
-        <a
-          href={clawHubUrl}
-          className="text-[color:var(--ink-soft)] font-semibold text-sm transition-colors duration-150 hover:text-[color:var(--ink)]"
-        >
-          ClawHub
-        </a>
-      ) : null}
-      {isSoulMode ? (
-        <Link
-          to="/souls"
-          search={{
-            q: undefined,
-            sort: undefined,
-            dir: undefined,
-            view: undefined,
-            focus: undefined,
-          }}
-          className="text-[color:var(--ink-soft)] font-semibold text-sm transition-colors duration-150 hover:text-[color:var(--ink)]"
-        >
-          Souls
-        </Link>
-      ) : (
-        <Link
-          to="/skills"
-          search={{
-            q: undefined,
-            sort: undefined,
-            dir: undefined,
-            highlighted: undefined,
-            nonSuspicious: undefined,
-            view: undefined,
-            focus: undefined,
-          }}
-          className="text-[color:var(--ink-soft)] font-semibold text-sm transition-colors duration-150 hover:text-[color:var(--ink)]"
-        >
-          Skills
-        </Link>
-      )}
-      {isSoulMode ? null : (
-        <Link
-          to="/plugins"
-          className="text-[color:var(--ink-soft)] font-semibold text-sm transition-colors duration-150 hover:text-[color:var(--ink)]"
-        >
-          Plugins
-        </Link>
-      )}
-      <Link
-        to={isSoulMode ? "/souls" : "/skills"}
-        search={
-          isSoulMode
-            ? { q: undefined, sort: undefined, dir: undefined, view: undefined, focus: "search" }
-            : {
-                q: undefined,
-                sort: undefined,
-                dir: undefined,
-                highlighted: undefined,
-                nonSuspicious: undefined,
-                view: undefined,
-                focus: "search",
-              }
-        }
-        className="text-[color:var(--ink-soft)] font-semibold text-sm transition-colors duration-150 hover:text-[color:var(--ink)] inline-flex items-center gap-1.5"
-      >
-        <Search className="h-3.5 w-3.5" />
-        Search
-      </Link>
-      {isSoulMode ? null : (
-        <Link
-          to="/about"
-          className="text-[color:var(--ink-soft)] font-semibold text-sm transition-colors duration-150 hover:text-[color:var(--ink)]"
-        >
-          About
-        </Link>
-      )}
-      {me ? (
-        <Link
-          to="/stars"
-          className="text-[color:var(--ink-soft)] font-semibold text-sm transition-colors duration-150 hover:text-[color:var(--ink)]"
-        >
-          Stars
-        </Link>
-      ) : null}
-      {isStaff ? (
-        <Link
-          to="/management"
-          search={{ skill: undefined }}
-          className="text-[color:var(--ink-soft)] font-semibold text-sm transition-colors duration-150 hover:text-[color:var(--ink)]"
-        >
-          Management
-        </Link>
-      ) : null}
-    </>
-  );
+  const handleNavSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    const q = navSearchQuery.trim();
+    if (!q) return;
+    void navigate({
+      to: "/search",
+      search: { q, type: undefined },
+    });
+    setNavSearchQuery("");
+    setMobileSearchOpen(false);
+  };
 
   return (
-    <header className="sticky top-0 z-50 border-b border-[color:var(--line)] bg-[color:var(--nav-bg)] backdrop-blur-xl">
-      <div className="mx-auto flex h-16 max-w-[1200px] items-center justify-between gap-4 px-5">
-        {/* Brand */}
-        <Link
-          to="/"
-          search={{ q: undefined, highlighted: undefined, search: undefined }}
-          className="flex items-center gap-2.5 font-display text-lg font-bold text-[color:var(--ink)] no-underline transition-opacity hover:opacity-80"
-        >
-          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-[color:var(--accent)] to-[color:var(--accent-deep)] p-0.5">
-            <img
-              src="/clawd-logo.png"
-              alt=""
-              aria-hidden="true"
-              className="h-full w-full rounded-full object-cover"
-            />
-          </span>
-          <span>{siteName}</span>
-        </Link>
-
-        {/* Desktop nav */}
-        <nav className="hidden items-center gap-6 md:flex">{navLinks}</nav>
-
-        {/* Actions */}
-        <div className="flex items-center gap-3">
-          {/* Publish CTA (desktop, authenticated) */}
-          {isAuthenticated && me && (
-            <Link
-              to="/publish-skill"
-              search={{ updateSlug: undefined }}
-              className="hidden sm:block"
-            >
-              <Button variant="primary" size="sm">
-                <Plus className="h-3.5 w-3.5" />
-                Publish
-              </Button>
-            </Link>
-          )}
-
-          {/* Mobile nav trigger */}
-          <div className="md:hidden">
-            <Sheet>
-              <SheetTrigger asChild>
-                <Button variant="ghost" size="icon" aria-label="Open menu">
-                  <Menu className="h-5 w-5" />
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="right" className="w-72">
-                <SheetHeader>
+    <header className="navbar">
+      <div className="navbar-inner">
+        {/* Row 1: Brand + Search + Actions */}
+        <div className="navbar-top">
+          <div className="nav-mobile">
+            <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+              <button
+                className="nav-mobile-trigger"
+                type="button"
+                aria-label="Open menu"
+                onClick={() => setMobileMenuOpen(true)}
+              >
+                <Menu className="h-4 w-4" aria-hidden="true" />
+              </button>
+              <SheetContent side="left" className="mobile-nav-sheet">
+                <SheetHeader className="pr-10">
                   <SheetTitle>{siteName}</SheetTitle>
+                  <SheetDescription>
+                    Browse sections, switch theme, and access account actions.
+                  </SheetDescription>
                 </SheetHeader>
-                <nav className="mt-6 flex flex-col gap-4">{navLinks}</nav>
-                {/* Mobile theme toggle */}
-                <div className="mt-6 flex flex-col gap-2">
-                  <span className="text-xs font-bold uppercase tracking-widest text-[color:var(--ink-soft)]">
-                    Theme
-                  </span>
-                  <ToggleGroup
-                    type="single"
-                    value={mode}
-                    onValueChange={(value) => {
-                      if (!value) return;
-                      setTheme(value as "system" | "light" | "dark");
+                <div className="mobile-nav-section">
+                  {isSoulMode ? (
+                    <SheetClose asChild>
+                      <a href={clawHubUrl} className="mobile-nav-link">
+                        ClawHub
+                      </a>
+                    </SheetClose>
+                  ) : null}
+                  {primaryItems.map((item) => (
+                    <SheetClose key={item.to + item.label} asChild>
+                      <Link to={item.to} search={item.search ?? {}} className="mobile-nav-link">
+                        {item.label}
+                      </Link>
+                    </SheetClose>
+                  ))}
+                  {secondaryItems.map((item) => (
+                    <SheetClose key={item.to + item.label} asChild>
+                      <Link to={item.to} search={item.search ?? {}} className="mobile-nav-link">
+                        {item.label === "Management" ? "Manage" : item.label}
+                      </Link>
+                    </SheetClose>
+                  ))}
+                </div>
+                <div className="mobile-nav-section">
+                  <div className="mobile-nav-section-title">Theme</div>
+                  <button
+                    className="mobile-nav-link"
+                    type="button"
+                    onClick={() => {
+                      setTheme("system");
+                      setMobileMenuOpen(false);
                     }}
-                    aria-label="Theme mode"
                   >
-                    <ToggleGroupItem value="system" aria-label="System theme">
-                      <Monitor className="h-4 w-4" aria-hidden="true" />
-                    </ToggleGroupItem>
-                    <ToggleGroupItem value="light" aria-label="Light theme">
-                      <Sun className="h-4 w-4" aria-hidden="true" />
-                    </ToggleGroupItem>
-                    <ToggleGroupItem value="dark" aria-label="Dark theme">
-                      <Moon className="h-4 w-4" aria-hidden="true" />
-                    </ToggleGroupItem>
-                  </ToggleGroup>
+                    <Monitor className="h-4 w-4" aria-hidden="true" />
+                    System
+                  </button>
+                  <button
+                    className="mobile-nav-link"
+                    type="button"
+                    onClick={() => {
+                      setTheme("light");
+                      setMobileMenuOpen(false);
+                    }}
+                  >
+                    <Sun className="h-4 w-4" aria-hidden="true" />
+                    Light
+                  </button>
+                  <button
+                    className="mobile-nav-link"
+                    type="button"
+                    onClick={() => {
+                      setTheme("dark");
+                      setMobileMenuOpen(false);
+                    }}
+                  >
+                    <Moon className="h-4 w-4" aria-hidden="true" />
+                    Dark
+                  </button>
                 </div>
-                {/* Mobile publish link */}
-                {isAuthenticated && me && (
-                  <div className="mt-6">
-                    <Link to="/publish-skill" search={{ updateSlug: undefined }}>
-                      <Button variant="primary" className="w-full">
-                        <Plus className="h-4 w-4" />
-                        Publish Skill
-                      </Button>
-                    </Link>
-                  </div>
-                )}
               </SheetContent>
             </Sheet>
           </div>
 
-          {/* Desktop theme toggle */}
-          <div className="theme-toggle hidden md:block" ref={toggleRef}>
-            <ToggleGroup
-              type="single"
-              value={mode}
-              onValueChange={(value) => {
-                if (!value) return;
-                setTheme(value as "system" | "light" | "dark");
-              }}
-              aria-label="Theme mode"
-            >
-              <ToggleGroupItem value="system" aria-label="System theme">
-                <Monitor className="h-4 w-4" aria-hidden="true" />
-              </ToggleGroupItem>
-              <ToggleGroupItem value="light" aria-label="Light theme">
-                <Sun className="h-4 w-4" aria-hidden="true" />
-              </ToggleGroupItem>
-              <ToggleGroupItem value="dark" aria-label="Dark theme">
-                <Moon className="h-4 w-4" aria-hidden="true" />
-              </ToggleGroupItem>
-            </ToggleGroup>
-          </div>
+          <Link
+            to="/"
+            search={{ q: undefined, highlighted: undefined, search: undefined }}
+            className="brand"
+          >
+            <span className="brand-mark">
+              <img src="/clawd-logo.png" alt="" aria-hidden="true" className="brand-mark-image" />
+            </span>
+            <span className="brand-name brand-name-responsive">{siteName}</span>
+          </Link>
 
-          {/* User menu / Sign in */}
-          {isAuthenticated && me ? (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <button
-                  type="button"
-                  className="flex cursor-pointer items-center gap-2 rounded-full border border-[color:var(--line)] bg-[color:var(--surface)] px-2 py-1.5 text-sm font-semibold text-[color:var(--ink)] transition-colors hover:border-[color:var(--border-ui-hover)]"
-                >
-                  <Avatar className="h-7 w-7">
-                    {avatar && (
-                      <AvatarImage src={avatar} alt={me.displayName ?? me.name ?? "User avatar"} />
-                    )}
-                    <AvatarFallback className="text-xs">{initial}</AvatarFallback>
-                  </Avatar>
-                  <span className="hidden font-mono text-xs sm:inline">@{handle}</span>
-                  <span className="text-xs text-[color:var(--ink-soft)]">▾</span>
-                </button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem asChild>
-                  <Link to="/dashboard">Dashboard</Link>
-                </DropdownMenuItem>
-                <DropdownMenuItem asChild>
-                  <Link to="/settings">Settings</Link>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem onClick={() => void signOut()}>Sign out</DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          ) : (
-            <>
-              {authError ? (
-                <div
-                  className="flex items-center gap-1 text-[0.85rem] text-red-600 dark:text-red-400"
-                  role="alert"
-                >
-                  {authError}
-                  <button
-                    type="button"
-                    onClick={clearAuthError}
-                    aria-label="Dismiss"
-                    className="ml-1 cursor-pointer border-none bg-transparent p-0.5 text-inherit opacity-70 hover:opacity-100"
-                  >
-                    &times;
-                  </button>
-                </div>
-              ) : null}
-              <SignInButton
-                variant="primary"
-                size="sm"
-                disabled={isLoading}
+          <form className="navbar-search" onSubmit={handleNavSearch} role="search" aria-label="Site search">
+            <Search size={16} className="navbar-search-icon" aria-hidden="true" />
+            <input
+              className="navbar-search-input"
+              type="search"
+              placeholder={isSoulMode ? "Search souls..." : "Search skills, plugins, users"}
+              value={navSearchQuery}
+              onChange={(e) => setNavSearchQuery(e.target.value)}
+              aria-label="Search"
+            />
+          </form>
+
+          <div className="nav-actions">
+            <button
+              className="navbar-search-mobile-trigger"
+              type="button"
+              aria-label="Search"
+              onClick={() => setMobileSearchOpen(!mobileSearchOpen)}
+            >
+              <Search size={18} aria-hidden="true" />
+            </button>
+            <div className="theme-toggle" ref={toggleRef}>
+              <ToggleGroup
+                type="single"
+                value={mode}
+                onValueChange={(value) => {
+                  if (!value) return;
+                  setTheme(value as "system" | "light" | "dark");
+                }}
+                aria-label="Theme mode"
               >
-                <span>Sign in</span>
-                <span className="hidden text-white/70 sm:inline">with GitHub</span>
-              </SignInButton>
-            </>
-          )}
+                <ToggleGroupItem value="system" aria-label="System theme">
+                  <Monitor className="h-4 w-4" aria-hidden="true" />
+                  <span className="sr-only">System</span>
+                </ToggleGroupItem>
+                <ToggleGroupItem value="light" aria-label="Light theme">
+                  <Sun className="h-4 w-4" aria-hidden="true" />
+                  <span className="sr-only">Light</span>
+                </ToggleGroupItem>
+                <ToggleGroupItem value="dark" aria-label="Dark theme">
+                  <Moon className="h-4 w-4" aria-hidden="true" />
+                  <span className="sr-only">Dark</span>
+                </ToggleGroupItem>
+              </ToggleGroup>
+            </div>
+            {isAuthenticated && me ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button className="user-trigger" type="button">
+                    {avatar ? (
+                      <img src={avatar} alt={me.displayName ?? me.name ?? "User avatar"} />
+                    ) : (
+                      <span className="user-menu-fallback">{initial}</span>
+                    )}
+                    <span className="mono">@{handle}</span>
+                    <span className="user-menu-chevron">▾</span>
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem asChild>
+                    <Link to="/dashboard">Dashboard</Link>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem asChild>
+                    <Link to="/settings">Settings</Link>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => void signOut()}>Sign out</DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : (
+              <>
+                {authError ? (
+                  <div className="error mr-2 text-[0.85rem]" role="alert">
+                    {authError}{" "}
+                    <button
+                      type="button"
+                      onClick={clearAuthError}
+                      aria-label="Dismiss"
+                      className="cursor-pointer border-none bg-transparent px-0.5 py-0 text-inherit"
+                    >
+                      &times;
+                    </button>
+                  </div>
+                ) : null}
+                <Button
+                  variant="primary"
+                  size="sm"
+                  type="button"
+                  disabled={isLoading}
+                  onClick={() => {
+                    clearAuthError();
+                    void signIn(
+                      "github",
+                      signInRedirectTo ? { redirectTo: signInRedirectTo } : undefined,
+                    ).catch((error) => {
+                      setAuthError(getUserFacingAuthError(error, "Sign in failed. Please try again."));
+                    });
+                  }}
+                >
+                  <Github size={16} aria-hidden="true" />
+                  <span className="sign-in-label">Sign in</span>
+                  <span className="sign-in-provider">with GitHub</span>
+                </Button>
+              </>
+            )}
+          </div>
         </div>
+
+        {/* Mobile search bar (expandable) */}
+        {mobileSearchOpen ? (
+          <form className="navbar-search-mobile" onSubmit={handleNavSearch}>
+            <Search size={16} className="navbar-search-icon" aria-hidden="true" />
+            <input
+              className="navbar-search-input"
+              type="text"
+              placeholder={isSoulMode ? "Search souls..." : "Search skills, plugins, users"}
+              value={navSearchQuery}
+              onChange={(e) => setNavSearchQuery(e.target.value)}
+              autoFocus
+            />
+          </form>
+        ) : null}
+
+        {/* Row 2: Content type tabs */}
+        <nav className="navbar-tabs" aria-label="Content types">
+          <div className="navbar-tabs-primary">
+            {isSoulMode ? (
+              <a href={clawHubUrl} className="navbar-tab">
+                ClawHub
+              </a>
+            ) : null}
+            {primaryItems.map((item) => {
+              const Icon = item.icon ? NAV_ICONS[item.icon] : null;
+              const isActiveByPrefix = item.activePathPrefixes?.some((prefix) =>
+                location.pathname.startsWith(prefix)
+              );
+              return (
+                <Link
+                  key={item.to + item.label}
+                  to={item.to}
+                  className="navbar-tab"
+                  search={item.search ?? {}}
+                  data-status={isActiveByPrefix ? "active" : undefined}
+                >
+                  {Icon ? <Icon size={14} className="opacity-50" aria-hidden="true" /> : null}
+                  {item.label}
+                </Link>
+              );
+            })}
+          </div>
+          <div className="navbar-tabs-secondary">
+            {secondaryItems.map((item) => {
+              const isActiveByPrefix = item.activePathPrefixes?.some((prefix) =>
+                location.pathname.startsWith(prefix)
+              );
+              return (
+                <Link
+                  key={item.to + item.label}
+                  to={item.to}
+                  search={item.search ?? {}}
+                  className="navbar-tab navbar-tab-secondary"
+                  data-status={isActiveByPrefix ? "active" : undefined}
+                >
+                  {item.label === "Management" ? "Manage" : item.label}
+                </Link>
+              );
+            })}
+          </div>
+        </nav>
       </div>
     </header>
   );
 }
+
+function getCurrentRelativeUrl() {
+  if (typeof window === "undefined") return "/";
+  return `${window.location.pathname}${window.location.search}${window.location.hash}`;
+}

src/components/InstallSwitcher.tsx

@@ -43,7 +43,7 @@ export function InstallSwitcher({ exampleSlug = "sonoscli" }: InstallSwitcherPro
               type="button"
               className={`cursor-pointer rounded-full border-none px-3 py-1.5 text-xs font-semibold transition-all duration-200 ${
                 pm === entry.id
-                  ? "bg-[color:var(--accent)] text-white shadow-sm"
+                  ? "bg-accent text-accent-fg shadow-sm"
                   : "bg-transparent text-[color:var(--ink-soft)] hover:text-[color:var(--ink)]"
               }`}
               role="tab"

src/components/MarketplaceIcon.tsx

@@ -0,0 +1,63 @@
+import { FileText, Package, Plug, User } from "lucide-react";
+
+type MarketplaceIconProps = {
+  kind: "skill" | "plugin" | "soul" | "user";
+  label: string;
+  imageUrl?: string | null;
+  size?: "sm" | "md";
+};
+
+const TONES = [
+  { accent: "oklch(0.63 0.16 42)", wash: "oklch(0.95 0.04 42)" },
+  { accent: "oklch(0.61 0.15 168)", wash: "oklch(0.95 0.04 168)" },
+  { accent: "oklch(0.59 0.14 236)", wash: "oklch(0.95 0.04 236)" },
+  { accent: "oklch(0.66 0.13 92)", wash: "oklch(0.96 0.04 92)" },
+] as const;
+
+function hashTone(label: string) {
+  let sum = 0;
+  for (const char of label) sum += char.charCodeAt(0);
+  return TONES[sum % TONES.length] ?? TONES[0];
+}
+
+function getIcon(kind: MarketplaceIconProps["kind"]) {
+  switch (kind) {
+    case "plugin":
+      return Plug;
+    case "soul":
+      return FileText;
+    case "user":
+      return User;
+    default:
+      return Package;
+  }
+}
+
+export function MarketplaceIcon({
+  kind,
+  label,
+  imageUrl,
+  size = "sm",
+}: MarketplaceIconProps) {
+  const Icon = getIcon(kind);
+  const tone = hashTone(label);
+
+  return (
+    <span
+      className={`marketplace-icon marketplace-icon-${size}`}
+      style={
+        {
+          "--marketplace-icon-accent": tone.accent,
+          "--marketplace-icon-wash": tone.wash,
+        } as React.CSSProperties
+      }
+      aria-hidden="true"
+    >
+      {imageUrl ? (
+        <img className="marketplace-icon-image" src={imageUrl} alt="" loading="lazy" />
+      ) : (
+        <Icon className="marketplace-icon-glyph" strokeWidth={1.8} />
+      )}
+    </span>
+  );
+}

src/components/PackageSourceChooser.tsx

@@ -8,9 +8,6 @@ import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { Card } from "./ui/card";
 
-const OPENCLAW_PLUGIN_PACKAGE_METADATA_DOCS_URL =
-  'https://docs.openclaw.ai/plugins/sdk-setup#package-metadata';
-
 export function PackageSourceChooser(props: {
   files: File[];
   totalBytes: number;
@@ -158,12 +155,7 @@ export function PackageSourceChooser(props: {
         <Badge variant="accent">
           Missing required OpenClaw package metadata: {props.codePluginFieldIssues.join(", ")}. Add
           these fields to <code>package.json</code> before publishing. See{" "}
-          <a
-            href={OPENCLAW_PLUGIN_PACKAGE_METADATA_DOCS_URL}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="underline"
-          >
+          <a href="/plugins/sdk-setup#package-metadata" className="underline">
             Plugin Setup and Config
           </a>
           .

src/components/PluginListItem.tsx

@@ -0,0 +1,40 @@
+import { Link } from "@tanstack/react-router";
+import { MarketplaceIcon } from "./MarketplaceIcon";
+import { Badge } from "./ui/badge";
+import { familyLabel } from "../lib/packageLabels";
+import type { PackageListItem } from "../lib/packageApi";
+
+type PluginListItemProps = {
+  item: PackageListItem;
+};
+
+export function PluginListItem({ item }: PluginListItemProps) {
+  return (
+    <Link to="/plugins/$name" params={{ name: item.name }} className="skill-list-item" aria-label={`Plugin: ${item.displayName}`}>
+      <MarketplaceIcon kind="plugin" label={item.displayName} />
+      <div className="skill-list-item-body">
+        <div className="skill-list-item-main">
+          {item.ownerHandle ? (
+            <>
+              <span className="skill-list-item-owner">@{item.ownerHandle}</span>
+              <span className="skill-list-item-sep">/</span>
+            </>
+          ) : null}
+          <span className="skill-list-item-name">{item.displayName}</span>
+          <Badge variant="compact">{familyLabel(item.family)}</Badge>
+          {item.isOfficial ? <Badge variant="accent">Verified</Badge> : null}
+        </div>
+        <p className="skill-list-item-summary">{item.summary ?? "Plugin package for agent workflows."}</p>
+        <div className="skill-list-item-meta">
+          <span className="skill-list-item-meta-item">Plugin</span>
+          {item.latestVersion ? (
+            <span className="skill-list-item-meta-item">v{item.latestVersion}</span>
+          ) : null}
+          <span className="skill-list-item-meta-item">
+            {item.ownerHandle ? `@${item.ownerHandle}` : "community"}
+          </span>
+        </div>
+      </div>
+    </Link>
+  );
+}

src/components/SkillCard.tsx

@@ -1,8 +1,8 @@
 import { Link } from "@tanstack/react-router";
-import { ShieldCheck } from "lucide-react";
 import type { ReactNode } from "react";
-import type { PublicSkill } from "../lib/publicUser";
+import { MarketplaceIcon } from "./MarketplaceIcon";
 import { Badge } from "./ui/badge";
+import type { PublicSkill } from "../lib/publicUser";
 
 type SkillCardProps = {
   skill: PublicSkill;
@@ -12,7 +12,6 @@ type SkillCardProps = {
   summaryFallback: string;
   meta: ReactNode;
   href?: string;
-  verified?: boolean;
 };
 
 export function SkillCard({
@@ -23,7 +22,6 @@ export function SkillCard({
   summaryFallback,
   meta,
   href,
-  verified,
 }: SkillCardProps) {
   const owner = encodeURIComponent(String(skill.ownerUserId));
   const link = href ?? `/${owner}/${skill.slug}`;
@@ -31,43 +29,28 @@ export function SkillCard({
   const hasTags = badges.length || chip || platformLabels?.length;
 
   return (
-    <Link
-      to={link}
-      className="group flex w-full flex-col gap-3 rounded-[var(--radius-md)] border border-[color:var(--line)] bg-[color:var(--surface)] p-[22px] no-underline transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-[0_12px_28px_rgba(29,26,23,0.12)] hover:border-[color:var(--border-ui-hover)]"
-    >
+    <Link to={link} className="card skill-card">
       {hasTags ? (
-        <div className="flex flex-wrap items-center gap-1.5">
+        <div className="skill-card-tags">
           {badges.map((label) => (
-            <Badge key={label} variant="default">
+            <Badge key={label}>
               {label}
             </Badge>
           ))}
-          {chip ? (
-            <Badge variant="accent" className="text-[0.72rem] px-2.5 py-0.5">
-              {chip}
-            </Badge>
-          ) : null}
+          {chip ? <Badge variant="accent">{chip}</Badge> : null}
           {platformLabels?.map((label) => (
             <Badge key={label} variant="compact">
               {label}
             </Badge>
           ))}
-          {verified && (
-            <span className="inline-flex items-center gap-1 text-[0.72rem] font-semibold text-emerald-600 dark:text-emerald-400">
-              <ShieldCheck className="h-3.5 w-3.5" />
-            </span>
-          )}
         </div>
       ) : null}
-      <h3 className="font-display text-base font-bold leading-tight text-[color:var(--ink)] group-hover:text-[color:var(--accent)]">
-        {skill.displayName}
-      </h3>
-      <p className="line-clamp-2 text-sm leading-relaxed text-[color:var(--ink-soft)]">
-        {skill.summary ?? summaryFallback}
-      </p>
-      <div className="mt-auto flex flex-col gap-2 pt-1 text-[0.82rem] text-[color:var(--ink-soft)]">
-        {meta}
+      <div className="skill-card-header">
+        <MarketplaceIcon kind="skill" label={skill.displayName} size="md" />
+        <h3 className="skill-card-title">{skill.displayName}</h3>
       </div>
+      <p className="skill-card-summary">{skill.summary ?? summaryFallback}</p>
+      <div className="skill-card-footer">{meta}</div>
     </Link>
   );
 }

src/components/SkillDetailPage.tsx

@@ -2,19 +2,16 @@ import { useNavigate } from "@tanstack/react-router";
 import type { ClawdisSkillMetadata } from "clawhub-schema";
 import { useAction, useMutation, useQuery } from "convex/react";
 import { useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
 import { api } from "../../convex/_generated/api";
 import type { Doc, Id } from "../../convex/_generated/dataModel";
 import { canManageSkill, isModerator } from "../lib/roles";
-import { hasOwnProperty } from "../lib/hasOwnProperty";
 import type { SkillBySlugResult, SkillPageInitialData } from "../lib/skillPage";
 import { useAuthStatus } from "../lib/useAuthStatus";
+import { Card } from "./ui/card";
 import { ClientOnly } from "./ClientOnly";
-import { EmptyState } from "./EmptyState";
-import { Container } from "./layout/Container";
-import { SkillDetailSkeleton } from "./skeletons/SkillDetailSkeleton";
 import { SkillCommentsPanel } from "./SkillCommentsPanel";
-import { SkillDetailTabs } from "./SkillDetailTabs";
+import { SkillDetailTabs, type DetailTab } from "./SkillDetailTabs";
+import { SkillMetadataSidebar } from "./SkillMetadataSidebar";
 import {
   buildSkillHref,
   formatConfigSnippet,
@@ -25,8 +22,6 @@ import {
 import { SkillHeader } from "./SkillHeader";
 import { SkillOwnershipPanel } from "./SkillOwnershipPanel";
 import { SkillReportDialog } from "./SkillReportDialog";
-import { Card } from "./ui/card";
-import { Skeleton } from "./ui/skeleton";
 
 type SkillDetailPageProps = {
   slug: string;
@@ -38,11 +33,13 @@ type SkillDetailPageProps = {
 type SkillFile = Doc<"skillVersions">["files"][number];
 
 function formatReportError(error: unknown) {
-  if (hasOwnProperty(error, "data")) {
+  if (error && typeof error === "object" && "data" in error) {
     const data = (error as { data?: unknown }).data;
     if (typeof data === "string" && data.trim()) return data.trim();
     if (
-      hasOwnProperty(data, "message") &&
+      data &&
+      typeof data === "object" &&
+      "message" in data &&
       typeof (data as { message?: unknown }).message === "string"
     ) {
       const message = (data as { message?: string }).message?.trim();
@@ -98,7 +95,7 @@ export function SkillDetailPage({
   );
   const [tagName, setTagName] = useState("latest");
   const [tagVersionId, setTagVersionId] = useState<Id<"skillVersions"> | "">("");
-  const [activeTab, setActiveTab] = useState<"files" | "compare" | "versions">("files");
+  const [activeTab, setActiveTab] = useState<DetailTab>("readme");
   const [shouldPrefetchCompare, setShouldPrefetchCompare] = useState(false);
   const [isReportDialogOpen, setIsReportDialogOpen] = useState(false);
   const [reportReason, setReportReason] = useState("");
@@ -215,7 +212,6 @@ export function SkillDetailPage({
     ?.clawdis;
   const osLabels = useMemo(() => formatOsList(clawdis?.os), [clawdis?.os]);
   const nixPlugin = clawdis?.nix?.plugin;
-  const nixSystems = clawdis?.nix?.systems ?? [];
   const nixSnippet = nixPlugin ? formatNixInstallSnippet(nixPlugin) : null;
   const configRequirements = clawdis?.config;
   const configExample = configRequirements?.example
@@ -299,13 +295,10 @@ export function SkillDetailPage({
 
   const deleteTag = (tag: string) => {
     if (!skill) return;
-    toast(`Delete tag "${tag}"?`, {
-      action: {
-        label: "Delete",
-        onClick: () => {
-          void deleteTags({ skillId: skill._id, tags: [tag] });
-        },
-      },
+    if (!window.confirm(`Delete tag "${tag}"?`)) return;
+    void deleteTags({
+      skillId: skill._id,
+      tags: [tag],
     });
   };
 
@@ -324,9 +317,9 @@ export function SkillDetailPage({
       const submission = await reportSkill({ skillId: skill._id, reason: trimmedReason });
       closeReportDialog();
       if (submission.reported) {
-        toast.success("Thanks — your report has been submitted.");
+        window.alert("Thanks — your report has been submitted.");
       } else {
-        toast.info("You have already reported this skill.");
+        window.alert("You have already reported this skill.");
       }
     } catch (error) {
       console.error("Failed to report skill", error);
@@ -336,19 +329,19 @@ export function SkillDetailPage({
   };
 
   if (isLoadingSkill || wantsCanonicalRedirect) {
-    return <SkillDetailSkeleton />;
+    return (
+      <main className="section">
+        <Card>
+          <div className="loading-indicator">Loading skill…</div>
+        </Card>
+      </main>
+    );
   }
 
   if (result === null || !skill) {
     return (
-      <main className="py-10">
-        <Container>
-          <EmptyState
-            title="Skill not found"
-            description="The skill you're looking for doesn't exist or may have been removed."
-            action={{ label: "Browse skills", href: "/skills" }}
-          />
-        </Container>
+      <main className="section">
+        <Card>Skill not found.</Card>
       </main>
     );
   }
@@ -356,80 +349,91 @@ export function SkillDetailPage({
   const tagEntries = Object.entries(skill.tags ?? {}) as Array<[string, Id<"skillVersions">]>;
 
   return (
-    <main className="py-10">
-      <Container>
-        <div className="flex flex-col gap-6">
-          <SkillHeader
-            skill={skill}
-            owner={owner}
+    <main className="section">
+      <div className="skill-detail-stack">
+        <SkillHeader
+          skill={skill}
+          owner={owner}
+          ownerHandle={ownerHandle}
+          latestVersion={latestVersion}
+          modInfo={modInfo}
+          canManage={canManage}
+          isAuthenticated={isAuthenticated}
+          isStaff={isStaff}
+          isStarred={isStarred}
+          onToggleStar={() => void toggleStar({ skillId: skill._id })}
+          onOpenReport={openReportDialog}
+          forkOf={forkOf}
+          forkOfLabel={forkOfLabel}
+          forkOfHref={forkOfHref}
+          forkOfOwnerHandle={forkOfOwnerHandle}
+          canonical={canonical}
+          canonicalHref={canonicalHref}
+          canonicalOwnerHandle={canonicalOwnerHandle}
+          staffModerationNote={staffModerationNote}
+          staffVisibilityTag={staffVisibilityTag}
+          isAutoHidden={isAutoHidden}
+          isRemoved={isRemoved}
+          nixPlugin={nixPlugin}
+          hasPluginBundle={hasPluginBundle}
+          configRequirements={configRequirements}
+          cliHelp={cliHelp}
+          tagEntries={tagEntries}
+          versionById={versionById}
+          tagName={tagName}
+          onTagNameChange={setTagName}
+          tagVersionId={tagVersionId}
+          onTagVersionChange={setTagVersionId}
+          onTagSubmit={submitTag}
+          onTagDelete={deleteTag}
+          tagVersions={versions ?? []}
+          clawdis={clawdis}
+          osLabels={osLabels}
+        />
+
+        {isOwner && skill ? (
+          <SkillOwnershipPanel
+            skillId={skill._id}
+            slug={skill.slug}
             ownerHandle={ownerHandle}
-            latestVersion={latestVersion}
-            modInfo={modInfo}
-            canManage={canManage}
-            isAuthenticated={isAuthenticated}
-            isStaff={isStaff}
-            isStarred={isStarred}
-            onToggleStar={() => void toggleStar({ skillId: skill._id })}
-            onOpenReport={openReportDialog}
-            forkOf={forkOf}
-            forkOfLabel={forkOfLabel}
-            forkOfHref={forkOfHref}
-            forkOfOwnerHandle={forkOfOwnerHandle}
-            canonical={canonical}
-            canonicalHref={canonicalHref}
-            canonicalOwnerHandle={canonicalOwnerHandle}
-            staffModerationNote={staffModerationNote}
-            staffVisibilityTag={staffVisibilityTag}
-            isAutoHidden={isAutoHidden}
-            isRemoved={isRemoved}
-            nixPlugin={nixPlugin}
-            hasPluginBundle={hasPluginBundle}
-            configRequirements={configRequirements}
-            cliHelp={cliHelp}
-            tagEntries={tagEntries}
-            versionById={versionById}
-            tagName={tagName}
-            onTagNameChange={setTagName}
-            tagVersionId={tagVersionId}
-            onTagVersionChange={setTagVersionId}
-            onTagSubmit={submitTag}
-            onTagDelete={deleteTag}
-            tagVersions={versions ?? []}
-            clawdis={clawdis}
-            osLabels={osLabels}
+            ownerId={owner?._id ?? null}
+            ownedSkills={(ownedSkills ?? []).filter((entry) => entry._id !== skill._id)}
           />
+        ) : null}
 
-          {isOwner && skill ? (
-            <SkillOwnershipPanel
-              skillId={skill._id}
-              slug={skill.slug}
-              ownerHandle={ownerHandle}
-              ownerId={owner?._id ?? null}
-              ownedSkills={(ownedSkills ?? []).filter((entry) => entry._id !== skill._id)}
-            />
-          ) : null}
+        <SkillMetadataSidebar
+          skill={skill}
+          latestVersion={latestVersion}
+          owner={owner}
+          ownerHandle={ownerHandle}
+          clawdis={clawdis}
+          osLabels={osLabels}
+          tagEntries={tagEntries}
+          isMalwareBlocked={modInfo?.isMalwareBlocked}
+          isRemoved={modInfo?.isRemoved}
+          nixPlugin={nixPlugin}
+        />
 
+        <div className="detail-content-full">
           {nixSnippet ? (
             <Card>
-              <h2 className="font-display text-lg font-bold text-[color:var(--ink)]">
+              <h3 className="m-0 text-[length:var(--text-base)] font-semibold">
                 Install via Nix
-              </h2>
-              <p className="text-sm text-[color:var(--ink-soft)]">
-                {nixSystems.length ? `Systems: ${nixSystems.join(", ")}` : "nix-clawdbot"}
-              </p>
-              <pre className="hero-install-code mt-3">{nixSnippet}</pre>
+              </h3>
+              <pre className="hero-install-code mt-2">
+                {nixSnippet}
+              </pre>
             </Card>
           ) : null}
 
           {configExample ? (
             <Card>
-              <h2 className="font-display text-lg font-bold text-[color:var(--ink)]">
+              <h3 className="m-0 text-[length:var(--text-base)] font-semibold">
                 Config example
-              </h2>
-              <p className="text-sm text-[color:var(--ink-soft)]">
-                Starter config for this plugin bundle.
-              </p>
-              <pre className="hero-install-code mt-3">{configExample}</pre>
+              </h3>
+              <pre className="hero-install-code mt-2">
+                {configExample}
+              </pre>
             </Card>
           ) : null}
 
@@ -452,11 +456,12 @@ export function SkillDetailPage({
           <ClientOnly
             fallback={
               <Card>
-                <h2 className="font-display text-lg font-bold text-[color:var(--ink)]">Comments</h2>
-                <div className="flex flex-col gap-3 pt-2">
-                  <Skeleton className="h-4 w-48" />
-                  <Skeleton className="h-20 w-full" />
-                </div>
+                <h2 className="section-title text-[1.2rem] m-0">
+                  Comments
+                </h2>
+                <p className="section-subtitle mt-3 mb-0">
+                  Loading comments...
+                </p>
               </Card>
             }
           >
@@ -467,17 +472,17 @@ export function SkillDetailPage({
             />
           </ClientOnly>
         </div>
+      </div>
 
-        <SkillReportDialog
-          isOpen={isAuthenticated && isReportDialogOpen}
-          isSubmitting={isSubmittingReport}
-          reportReason={reportReason}
-          reportError={reportError}
-          onReasonChange={setReportReason}
-          onCancel={closeReportDialog}
-          onSubmit={() => void submitReport()}
-        />
-      </Container>
+      <SkillReportDialog
+        isOpen={isAuthenticated && isReportDialogOpen}
+        isSubmitting={isSubmittingReport}
+        reportReason={reportReason}
+        reportError={reportError}
+        onReasonChange={setReportReason}
+        onCancel={closeReportDialog}
+        onSubmit={() => void submitReport()}
+      />
     </main>
   );
 }

src/components/SkillDetailTabs.tsx

@@ -1,9 +1,8 @@
 import { lazy, Suspense } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import type { Doc, Id } from "../../convex/_generated/dataModel";
 import { SkillVersionsPanel } from "./SkillVersionsPanel";
-import { Card } from "./ui/card";
-import { Skeleton } from "./ui/skeleton";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
 
 const SkillDiffCard = lazy(() =>
   import("./SkillDiffCard").then((module) => ({ default: module.SkillDiffCard })),
@@ -15,9 +14,11 @@ const SkillFilesPanel = lazy(() =>
 
 type SkillFile = Doc<"skillVersions">["files"][number];
 
+export type DetailTab = "readme" | "files" | "compare" | "versions";
+
 type SkillDetailTabsProps = {
-  activeTab: "files" | "compare" | "versions";
-  setActiveTab: (tab: "files" | "compare" | "versions") => void;
+  activeTab: DetailTab;
+  setActiveTab: (tab: DetailTab) => void;
   onCompareIntent: () => void;
   readmeContent: string | null;
   readmeError: string | null;
@@ -46,13 +47,30 @@ export function SkillDetailTabs({
   suppressVersionScanResults,
   scanResultsSuppressedMessage,
 }: SkillDetailTabsProps) {
+  const compareEnabled = (versions?.length ?? 0) > 1;
+
   return (
-    <Card>
-      <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as typeof activeTab)}>
-        <TabsList>
-          <TabsTrigger value="files">Files</TabsTrigger>
-          <TabsTrigger
-            value="compare"
+    <div className="card tab-card">
+      <div className="tab-header">
+        <button
+          className={`tab-button${activeTab === "readme" ? " is-active" : ""}`}
+          type="button"
+          onClick={() => setActiveTab("readme")}
+        >
+          README
+        </button>
+        <button
+          className={`tab-button${activeTab === "files" ? " is-active" : ""}`}
+          type="button"
+          onClick={() => setActiveTab("files")}
+        >
+          Files
+        </button>
+        {compareEnabled ? (
+          <button
+            className={`tab-button${activeTab === "compare" ? " is-active" : ""}`}
+            type="button"
+            onClick={() => setActiveTab("compare")}
             onMouseEnter={() => {
               onCompareIntent();
               void import("./SkillDiffCard");
@@ -63,37 +81,64 @@ export function SkillDetailTabs({
             }}
           >
             Compare
-          </TabsTrigger>
-          <TabsTrigger value="versions">Versions</TabsTrigger>
-        </TabsList>
+          </button>
+        ) : null}
+        <button
+          className={`tab-button${activeTab === "versions" ? " is-active" : ""}`}
+          type="button"
+          onClick={() => setActiveTab("versions")}
+        >
+          Versions
+        </button>
+      </div>
 
-        <TabsContent value="files">
-          <Suspense fallback={<Skeleton className="h-40 w-full" />}>
-            <SkillFilesPanel
-              versionId={latestVersionId}
-              readmeContent={readmeContent}
-              readmeError={readmeError}
-              latestFiles={latestFiles}
-            />
-          </Suspense>
-        </TabsContent>
+      {activeTab === "readme" ? (
+        <div className="tab-body">
+          {readmeContent ? (
+            <div className="markdown">
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>{readmeContent}</ReactMarkdown>
+            </div>
+          ) : readmeError ? (
+            <div className="empty-state px-[var(--space-4)] py-[var(--space-6)]">
+              <p className="empty-state-title">No README available</p>
+              <p className="empty-state-body">
+                This skill doesn't have a SKILL.md file yet.
+              </p>
+            </div>
+          ) : (
+            <div className="stat p-4">
+              Loading README...
+            </div>
+          )}
+        </div>
+      ) : null}
 
-        <TabsContent value="compare">
-          <Suspense fallback={<Skeleton className="h-40 w-full" />}>
+      {activeTab === "files" ? (
+        <Suspense fallback={<div className="tab-body stat">Loading file viewer...</div>}>
+          <SkillFilesPanel
+            versionId={latestVersionId}
+            latestFiles={latestFiles}
+          />
+        </Suspense>
+      ) : null}
+
+      {activeTab === "compare" ? (
+        <div className="tab-body">
+          <Suspense fallback={<div className="stat">Loading diff viewer...</div>}>
             <SkillDiffCard skill={skill} versions={diffVersions ?? []} variant="embedded" />
           </Suspense>
-        </TabsContent>
+        </div>
+      ) : null}
 
-        <TabsContent value="versions">
-          <SkillVersionsPanel
-            versions={versions}
-            nixPlugin={nixPlugin}
-            skillSlug={skill.slug}
-            suppressScanResults={suppressVersionScanResults}
-            suppressedMessage={scanResultsSuppressedMessage}
-          />
-        </TabsContent>
-      </Tabs>
-    </Card>
+      {activeTab === "versions" ? (
+        <SkillVersionsPanel
+          versions={versions}
+          nixPlugin={nixPlugin}
+          skillSlug={skill.slug}
+          suppressScanResults={suppressVersionScanResults}
+          suppressedMessage={scanResultsSuppressedMessage}
+        />
+      ) : null}
+    </div>
   );
 }

src/components/SkillDiffCard.test.tsx

@@ -83,7 +83,7 @@ describe("SkillDiffCard", () => {
     await waitFor(() => {
       expect(screen.getByTestId("diff-editor").getAttribute("data-side-by-side")).toBe("false");
     });
-    expect(screen.getByRole("button", { name: "Inline" }).className).toContain("shadow-sm");
+    expect(screen.getByRole("button", { name: "Inline" }).className).toContain("is-active");
     expect(screen.getByTestId("diff-editor").getAttribute("data-inline-fallback")).toBe("false");
   });
 
@@ -106,6 +106,6 @@ describe("SkillDiffCard", () => {
     await waitFor(() => {
       expect(screen.getByTestId("diff-editor").getAttribute("data-side-by-side")).toBe("true");
     });
-    expect(screen.getByRole("button", { name: "Side-by-side" }).className).toContain("shadow-sm");
+    expect(screen.getByRole("button", { name: "Side-by-side" }).className).toContain("is-active");
   });
 });

src/components/SkillDiffCard.tsx

@@ -13,12 +13,8 @@ import {
   selectDefaultFilePath,
   sortVersionsBySemver,
 } from "../lib/diffing";
-import { ClientOnly } from "./ClientOnly";
-import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
-import { Card } from "./ui/card";
-import { Label } from "./ui/label";
-import { Skeleton } from "./ui/skeleton";
+import { ClientOnly } from "./ClientOnly";
 
 type SkillDiffCardProps = {
   skill: Doc<"skills">;
@@ -277,174 +273,145 @@ export function SkillDiffCard({ skill, versions, variant = "card" }: SkillDiffCa
   const fileSelected = Boolean(selectedItem);
   const diffOptions = useMemo(() => buildDiffOptions(viewMode), [viewMode]);
 
-  const Wrapper = variant === "card" ? Card : "div";
-  const wrapperClassName = variant === "card" ? "flex flex-col gap-4" : "flex flex-col gap-4";
+  const containerClass = variant === "card" ? "card diff-card" : "diff-card diff-card-embedded";
 
   return (
-    <Wrapper className={wrapperClassName}>
-      <div className="flex flex-wrap items-start justify-between gap-3">
+    <div className={containerClass}>
+      <div className="diff-header">
         <div>
-          <h2 className="m-0 font-display text-[1.2rem] font-bold text-[color:var(--ink)]">
+          <h2 className="section-title text-[1.2rem] m-0">
             Compare versions
           </h2>
-          <p className="m-0 text-sm text-[color:var(--ink-soft)]">
+          <p className="section-subtitle m-0">
             Inline or side-by-side diff for any file.
           </p>
         </div>
-        <fieldset className="inline-flex items-center gap-0.5 rounded-full border border-[color:var(--line)] bg-[color:var(--surface-muted)] p-[3px]">
-          <legend className="sr-only">Diff layout</legend>
-          <button
-            className={`cursor-pointer rounded-full border-none px-3 py-1.5 text-xs font-semibold transition-all duration-200 ${
-              viewMode === "split"
-                ? "bg-[color:var(--surface)] text-[color:var(--ink)] shadow-sm"
-                : "bg-transparent text-[color:var(--ink-soft)] hover:text-[color:var(--ink)]"
-            }`}
-            type="button"
-            onClick={() => updateViewMode("split")}
-          >
-            Side-by-side
-          </button>
-          <button
-            className={`cursor-pointer rounded-full border-none px-3 py-1.5 text-xs font-semibold transition-all duration-200 ${
-              viewMode === "inline"
-                ? "bg-[color:var(--surface)] text-[color:var(--ink)] shadow-sm"
-                : "bg-transparent text-[color:var(--ink-soft)] hover:text-[color:var(--ink)]"
-            }`}
-            type="button"
-            onClick={() => updateViewMode("inline")}
-          >
-            Inline
-          </button>
-        </fieldset>
+        {!diffUnavailable ? (
+          <fieldset className="diff-toggle-group">
+            <legend className="sr-only">Diff layout</legend>
+            <button
+              className={`diff-toggle${viewMode === "split" ? " is-active" : ""}`}
+              type="button"
+              onClick={() => updateViewMode("split")}
+            >
+              Side-by-side
+            </button>
+            <button
+              className={`diff-toggle${viewMode === "inline" ? " is-active" : ""}`}
+              type="button"
+              onClick={() => updateViewMode("inline")}
+            >
+              Inline
+            </button>
+          </fieldset>
+        ) : null}
       </div>
 
-      <div className="flex flex-wrap items-end gap-3">
-        <div className="flex min-w-[140px] flex-1 flex-col gap-1">
-          <Label htmlFor="diff-left">Left</Label>
-          <select
-            id="diff-left"
-            className="min-h-[44px] w-full rounded-[var(--radius-sm)] border border-[rgba(29,59,78,0.22)] bg-[rgba(255,255,255,0.94)] px-3.5 py-[13px] text-[color:var(--ink)] transition-all duration-[180ms] ease-out focus:border-[color-mix(in_srgb,var(--accent)_70%,white)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--accent)_22%,transparent)] focus:outline-none dark:border-[rgba(255,255,255,0.12)] dark:bg-[rgba(14,28,37,0.84)]"
-            value={leftVersionId ?? ""}
-            onChange={(event) => setLeftVersionId(event.target.value as Id<"skillVersions">)}
-          >
-            <option value="" disabled>
-              Select version
-            </option>
-            {renderOptions(versionOptions)}
-          </select>
-        </div>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => {
-            setLeftVersionId(rightVersionId);
-            setRightVersionId(leftVersionId);
-          }}
-          disabled={!leftVersionId || !rightVersionId}
-        >
-          Swap
-        </Button>
-        <div className="flex min-w-[140px] flex-1 flex-col gap-1">
-          <Label htmlFor="diff-right">Right</Label>
-          <select
-            id="diff-right"
-            className="min-h-[44px] w-full rounded-[var(--radius-sm)] border border-[rgba(29,59,78,0.22)] bg-[rgba(255,255,255,0.94)] px-3.5 py-[13px] text-[color:var(--ink)] transition-all duration-[180ms] ease-out focus:border-[color-mix(in_srgb,var(--accent)_70%,white)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--accent)_22%,transparent)] focus:outline-none dark:border-[rgba(255,255,255,0.12)] dark:bg-[rgba(14,28,37,0.84)]"
-            value={rightVersionId ?? ""}
-            onChange={(event) => setRightVersionId(event.target.value as Id<"skillVersions">)}
-          >
-            <option value="" disabled>
-              Select version
-            </option>
-            {renderOptions(versionOptions)}
-          </select>
-        </div>
-      </div>
+      {!diffUnavailable ? (
+        <>
+          <div className="diff-controls">
+            <div className="diff-select">
+              <label htmlFor="diff-left">Left</label>
+              <select
+                id="diff-left"
+                className="search-input"
+                value={leftVersionId ?? ""}
+                onChange={(event) => setLeftVersionId(event.target.value as Id<"skillVersions">)}
+              >
+                <option value="" disabled>
+                  Select version
+                </option>
+                {renderOptions(versionOptions)}
+              </select>
+            </div>
+            <Button
+              className="diff-swap"
+              type="button"
+              onClick={() => {
+                setLeftVersionId(rightVersionId);
+                setRightVersionId(leftVersionId);
+              }}
+              disabled={!leftVersionId || !rightVersionId}
+            >
+              Swap
+            </Button>
+            <div className="diff-select">
+              <label htmlFor="diff-right">Right</label>
+              <select
+                id="diff-right"
+                className="search-input"
+                value={rightVersionId ?? ""}
+                onChange={(event) => setRightVersionId(event.target.value as Id<"skillVersions">)}
+              >
+                <option value="" disabled>
+                  Select version
+                </option>
+                {renderOptions(versionOptions)}
+              </select>
+            </div>
+          </div>
 
-      <div className="flex flex-wrap items-center gap-3 text-sm text-[color:var(--ink-soft)]">
-        <span>
-          Left {leftLabel} • Right {rightLabel}
-        </span>
-        {diffUnavailable ? <span>Need at least 2 versions.</span> : null}
-      </div>
+          <div className="diff-meta">
+            <span>
+              Left {leftLabel} • Right {rightLabel}
+            </span>
+          </div>
+        </>
+      ) : null}
 
-      <div className="grid gap-0 overflow-hidden rounded-[var(--radius-md)] border border-[color:var(--line)] md:grid-cols-[minmax(160px,220px)_1fr]">
-        <div className="flex max-h-[500px] flex-col overflow-y-auto border-b border-[color:var(--line)] bg-[color:var(--surface-muted)] md:border-r md:border-b-0">
-          {fileDiffItems.length === 0 ? (
-            <div className="p-3 text-sm text-[color:var(--ink-soft)]">No files to compare.</div>
+      <div className="diff-layout">
+        <div className="diff-files">
+          {diffUnavailable ? (
+            <div className="diff-empty">
+              Publish another version to compare changes side by side.
+            </div>
+          ) : fileDiffItems.length === 0 ? (
+            <div className="diff-empty">No files to compare.</div>
           ) : (
             fileDiffItems.map((item) => (
               <button
                 key={item.path}
                 type="button"
-                className={`flex w-full cursor-pointer items-center gap-2 border-none px-3 py-2 text-left text-sm transition-colors hover:bg-[color:var(--surface)] ${
-                  item.path === selectedPath
-                    ? "bg-[color:var(--surface)] font-semibold text-[color:var(--ink)]"
-                    : "bg-transparent text-[color:var(--ink)]"
-                }`}
+                className={`diff-file${item.path === selectedPath ? " is-active" : ""}`}
                 onClick={() => setSelectedPath(item.path)}
               >
-                <Badge
-                  variant={
-                    item.status === "added"
-                      ? "success"
-                      : item.status === "removed"
-                        ? "destructive"
-                        : item.status === "changed"
-                          ? "warning"
-                          : "compact"
-                  }
-                  className="shrink-0 text-[0.65rem]"
-                >
-                  {item.status}
-                </Badge>
-                <span className="truncate font-mono text-xs">{item.path}</span>
+                <span className={`diff-pill diff-pill-${item.status}`}>{item.status}</span>
+                <span className="diff-file-name">{item.path}</span>
               </button>
             ))
           )}
         </div>
-        <div className="relative min-h-[300px]">
+        <div className="diff-view">
           {error ? (
-            <div className="flex h-full items-center justify-center p-4 text-sm text-[color:var(--ink-soft)]">
-              {error}
-            </div>
+            <div className="diff-empty">{error}</div>
           ) : sizeWarning ? (
-            <div className="flex h-full items-center justify-center p-4 text-sm text-[color:var(--ink-soft)]">
+            <div className="diff-empty">
               {sizeWarning.side === "left" ? "Left" : "Right"} file exceeds 200KB:{" "}
               {sizeWarning.path}
             </div>
           ) : diffUnavailable ? (
-            <div className="flex h-full items-center justify-center p-4 text-sm text-[color:var(--ink-soft)]">
-              Publish another version to compare.
-            </div>
+            <div className="diff-empty">Publish another version to compare.</div>
           ) : !selectionReady ? (
-            <div className="flex h-full items-center justify-center p-4 text-sm text-[color:var(--ink-soft)]">
-              Select two versions to compare.
-            </div>
+            <div className="diff-empty">Select two versions to compare.</div>
           ) : !fileSelected ? (
-            <div className="flex h-full items-center justify-center p-4 text-sm text-[color:var(--ink-soft)]">
-              Select a file to compare.
-            </div>
+            <div className="diff-empty">Select a file to compare.</div>
           ) : (
-            <ClientOnly fallback={<Skeleton className="h-full w-full" />}>
+            <ClientOnly fallback={<div className="diff-empty">Preparing diff…</div>}>
               <DiffEditor
                 key={`diff-${viewMode}`}
-                className={`h-full min-h-[400px] w-full ${viewMode === "inline" ? "max-w-full" : ""}`}
+                className={`diff-monaco diff-monaco-${viewMode}`}
                 original={leftText}
                 modified={rightText}
                 theme={getMonacoThemeName()}
-                loading={<Skeleton className="h-full w-full" />}
+                loading={<div className="diff-empty">Loading diff…</div>}
                 options={diffOptions}
               />
-              {isLoading ? (
-                <div className="absolute inset-0 flex items-center justify-center bg-[color:var(--surface)]/80">
-                  <Skeleton className="h-8 w-24" />
-                </div>
-              ) : null}
+              {isLoading ? <div className="diff-loading">Loading…</div> : null}
             </ClientOnly>
           )}
         </div>
       </div>
-    </Wrapper>
+    </div>
   );
 }
 

src/components/SkillFilesPanel.test.tsx

@@ -9,10 +9,6 @@ vi.mock("convex/react", () => ({
   useAction: () => getFileTextMock,
 }));
 
-vi.mock("./MarkdownPreview", () => ({
-  MarkdownPreview: ({ children }: { children: string }) => <div>{children}</div>,
-}));
-
 type SkillFile = Doc<"skillVersions">["files"][number];
 
 function makeFile(path: string, size: number): SkillFile {
@@ -34,8 +30,6 @@ describe("SkillFilesPanel", () => {
     render(
       <SkillFilesPanel
         versionId={"skillVersions:1" as Id<"skillVersions">}
-        readmeContent={"# skill"}
-        readmeError={null}
         latestFiles={[makeFile("scripts/run.sh", 10)]}
       />,
     );
@@ -68,8 +62,6 @@ describe("SkillFilesPanel", () => {
     render(
       <SkillFilesPanel
         versionId={"skillVersions:1" as Id<"skillVersions">}
-        readmeContent={"# skill"}
-        readmeError={null}
         latestFiles={[makeFile("a.txt", 5), makeFile("b.txt", 6)]}
       />,
     );

src/components/SkillFilesPanel.tsx

@@ -2,23 +2,17 @@ import { useAction } from "convex/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { api } from "../../convex/_generated/api";
 import type { Doc, Id } from "../../convex/_generated/dataModel";
-import { MarkdownPreview } from "./MarkdownPreview";
 import { formatBytes } from "./skillDetailUtils";
-import { Skeleton } from "./ui/skeleton";
 
 type SkillFile = Doc<"skillVersions">["files"][number];
 
 type SkillFilesPanelProps = {
   versionId: Id<"skillVersions"> | null;
-  readmeContent: string | null;
-  readmeError: string | null;
   latestFiles: SkillFile[];
 };
 
 export function SkillFilesPanel({
   versionId,
-  readmeContent,
-  readmeError,
   latestFiles,
 }: SkillFilesPanelProps) {
   const getFileText = useAction(api.skills.getFileText);
@@ -91,82 +85,56 @@ export function SkillFilesPanel({
   );
 
   return (
-    <div className="grid max-w-full gap-5 overflow-x-auto">
-      <div>
-        <h2 className="m-0 font-display text-[1.2rem] font-bold text-[color:var(--ink)]">
-          SKILL.md
-        </h2>
-        <div>
-          {readmeContent ? (
-            <MarkdownPreview>{readmeContent}</MarkdownPreview>
-          ) : readmeError ? (
-            <div className="text-sm text-[color:var(--ink-soft)]">
-              Failed to load SKILL.md: {readmeError}
-            </div>
-          ) : (
-            <Skeleton className="h-24 w-full" />
-          )}
-        </div>
-      </div>
-      <div className="grid gap-0 overflow-hidden rounded-[var(--radius-md)] border border-[color:var(--line)] md:grid-cols-[minmax(180px,280px)_1fr]">
-        <div className="flex flex-col border-b border-[color:var(--line)] md:border-r md:border-b-0">
-          <div className="flex items-center justify-between border-b border-[color:var(--line)] bg-[color:var(--surface-muted)] px-3 py-2">
-            <h3 className="m-0 font-display text-[1.05rem] font-bold text-[color:var(--ink)]">
+    <div className="tab-body">
+      <div className="file-browser">
+        <div className="file-list">
+          <div className="file-list-header">
+            <h3 className="section-title text-[1.05rem] m-0">
               Files
             </h3>
-            <span className="m-0 text-sm text-[color:var(--ink-soft)]">
+            <span className="section-subtitle m-0">
               {latestFiles.length} total
             </span>
           </div>
-          <div className="flex max-h-[400px] flex-col overflow-y-auto">
+          <div className="file-list-body">
             {latestFiles.length === 0 ? (
-              <div className="px-3 py-2 text-sm text-[color:var(--ink-soft)]">
-                No files available.
-              </div>
+              <div className="stat">No files available.</div>
             ) : (
               latestFiles.map((file) => (
                 <button
                   key={file.path}
-                  className={`flex w-full cursor-pointer items-center justify-between border-none px-3 py-2 text-left text-sm transition-colors hover:bg-[color:var(--surface-muted)] ${
-                    selectedPath === file.path
-                      ? "bg-[color:var(--surface-muted)] font-semibold text-[color:var(--ink)]"
-                      : "bg-transparent text-[color:var(--ink)]"
+                  className={`file-row file-row-button${
+                    selectedPath === file.path ? " is-active" : ""
                   }`}
                   type="button"
                   onClick={() => handleSelect(file.path)}
                   aria-current={selectedPath === file.path ? "true" : undefined}
                 >
-                  <span className="truncate font-mono text-xs">{file.path}</span>
-                  <span className="ml-2 shrink-0 text-xs text-[color:var(--ink-soft)]">
-                    {formatBytes(file.size)}
-                  </span>
+                  <span className="file-path">{file.path}</span>
+                  <span className="file-meta">{formatBytes(file.size)}</span>
                 </button>
               ))
             )}
           </div>
         </div>
-        <div className="flex flex-col">
-          <div className="flex items-center justify-between border-b border-[color:var(--line)] bg-[color:var(--surface-muted)] px-3 py-2">
-            <div className="truncate font-mono text-xs">{selectedPath ?? "Select a file"}</div>
+        <div className="file-viewer">
+          <div className="file-viewer-header">
+            <div className="file-path">{selectedPath ?? "Select a file"}</div>
             {fileMeta ? (
-              <span className="ml-2 shrink-0 text-xs text-[color:var(--ink-soft)]">
+              <span className="file-meta">
                 {formatBytes(fileMeta.size)} · {fileMeta.sha256.slice(0, 12)}…
               </span>
             ) : null}
           </div>
-          <div className="min-h-[200px] p-3">
+          <div className="file-viewer-body">
             {isLoading ? (
-              <Skeleton className="h-24 w-full" />
+              <div className="stat">Loading…</div>
             ) : fileError ? (
-              <div className="text-sm text-[color:var(--ink-soft)]">
-                Failed to load file: {fileError}
-              </div>
+              <div className="stat">Failed to load file: {fileError}</div>
             ) : fileContent ? (
-              <pre className="m-0 overflow-x-auto whitespace-pre-wrap break-words font-mono text-xs leading-relaxed">
-                {fileContent}
-              </pre>
+              <pre className="file-viewer-code">{fileContent}</pre>
             ) : (
-              <div className="text-sm text-[color:var(--ink-soft)]">Select a file to preview.</div>
+              <div className="stat">Select a file to preview.</div>
             )}
           </div>
         </div>

src/components/SkillHeader.tsx

@@ -1,21 +1,14 @@
-import { Link } from "@tanstack/react-router";
 import type { ClawdisSkillMetadata } from "clawhub-schema";
-import {
-  PLATFORM_SKILL_LICENSE,
-  PLATFORM_SKILL_LICENSE_SUMMARY,
-} from "clawhub-schema/licenseConstants";
+import { Link } from "@tanstack/react-router";
 import { Package } from "lucide-react";
 import type { Doc, Id } from "../../convex/_generated/dataModel";
 import { getSkillBadges } from "../lib/badges";
 import { formatCompactStat, formatSkillStatsTriplet } from "../lib/numberFormat";
 import type { PublicPublisher, PublicSkill } from "../lib/publicUser";
-import { getRuntimeEnv } from "../lib/runtimeEnv";
-import { SkillInstallCard } from "./SkillInstallCard";
+
 import { type LlmAnalysis, SecurityScanResults } from "./SkillSecurityScanResults";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
-import { Card, CardContent } from "./ui/card";
-import { Input } from "./ui/input";
 import { UserBadge } from "./UserBadge";
 
 export type SkillModerationInfo = {
@@ -117,10 +110,9 @@ export function SkillHeader({
   onTagSubmit,
   onTagDelete,
   tagVersions,
-  clawdis,
-  osLabels,
+  clawdis: _clawdis,
+  osLabels: _osLabels,
 }: SkillHeaderProps) {
-  const convexSiteUrl = getRuntimeEnv("VITE_CONVEX_SITE_URL") ?? "https://clawhub.ai";
   const formattedStats = formatSkillStatsTriplet(skill.stats);
   const suppressScanResults =
     !isStaff &&
@@ -134,8 +126,8 @@ export function SkillHeader({
   return (
     <>
       {modInfo?.isPendingScan ? (
-        <div className="rounded-[var(--radius-md)] border border-amber-300/50 bg-amber-50 p-5 dark:border-amber-500/30 dark:bg-amber-950/40">
-          <div className="flex flex-col gap-2">
+        <div className="pending-banner">
+          <div className="pending-banner-content">
             <strong>Security scan in progress</strong>
             <p>
               Your skill is being scanned by VirusTotal. It will be visible to others once the scan
@@ -145,8 +137,8 @@ export function SkillHeader({
           </div>
         </div>
       ) : modInfo?.isMalwareBlocked ? (
-        <div className="rounded-[var(--radius-md)] border border-red-300/50 bg-red-50 p-5 dark:border-red-500/30 dark:bg-red-950/40">
-          <div className="flex flex-col gap-2">
+        <div className="pending-banner pending-banner-blocked">
+          <div className="pending-banner-content">
             <strong>Skill blocked — malicious content detected</strong>
             <p>
               ClawHub Security flagged this skill as malicious. Downloads are disabled. Review the
@@ -155,15 +147,15 @@ export function SkillHeader({
           </div>
         </div>
       ) : modInfo?.isSuspicious ? (
-        <div className="rounded-[var(--radius-md)] border border-amber-300/50 bg-amber-50 p-5 dark:border-amber-500/30 dark:bg-amber-950/40">
-          <div className="flex flex-col gap-2">
+        <div className="pending-banner pending-banner-warning">
+          <div className="pending-banner-content">
             <strong>Skill flagged — suspicious patterns detected</strong>
             <p>
               ClawHub Security flagged this skill as suspicious. Review the scan results before
               using.
             </p>
             {canManage ? (
-              <p className="text-sm text-[color:var(--ink-soft)]">
+              <p className="pending-banner-appeal">
                 If you believe this skill has been incorrectly flagged, please{" "}
                 <a
                   href="https://github.com/openclaw/clawhub/issues"
@@ -178,142 +170,109 @@ export function SkillHeader({
           </div>
         </div>
       ) : modInfo?.isRemoved ? (
-        <div className="rounded-[var(--radius-md)] border border-red-300/50 bg-red-50 p-5 dark:border-red-500/30 dark:bg-red-950/40">
-          <div className="flex flex-col gap-2">
+        <div className="pending-banner pending-banner-blocked">
+          <div className="pending-banner-content">
             <strong>Skill removed by moderator</strong>
             <p>This skill has been removed and is not visible to others.</p>
           </div>
         </div>
       ) : modInfo?.isHiddenByMod ? (
-        <div className="rounded-[var(--radius-md)] border border-red-300/50 bg-red-50 p-5 dark:border-red-500/30 dark:bg-red-950/40">
-          <div className="flex flex-col gap-2">
+        <div className="pending-banner pending-banner-blocked">
+          <div className="pending-banner-content">
             <strong>Skill hidden</strong>
             <p>This skill is currently hidden and not visible to others.</p>
           </div>
         </div>
       ) : null}
 
-      <Card>
-        <div className={`flex flex-col gap-5${hasPluginBundle ? " pb-2" : ""}`}>
-          <div className="flex flex-col gap-5 md:flex-row md:gap-8">
-            <div className="flex flex-1 flex-col gap-3">
-              <div className="flex flex-col gap-1">
-                <div className="flex flex-wrap items-center gap-2">
-                  <h1 className="m-0 font-display text-lg font-bold text-[color:var(--ink)]">
-                    {skill.displayName}
-                  </h1>
-                  {latestVersion?.version ? (
-                    <Badge variant="compact">v{latestVersion.version}</Badge>
+      <div className="card skill-hero">
+        <div className={`skill-hero-top${hasPluginBundle ? " has-plugin" : ""}`}>
+          <div className="skill-hero-header">
+            <div className="skill-hero-title">
+              <div className="skill-hero-title-row">
+                <h1 className="section-title m-0">
+                  {skill.displayName}
+                </h1>
+                {latestVersion?.version ? (
+                  <span className="plugin-version-badge">v{latestVersion.version}</span>
+                ) : null}
+                {nixPlugin ? <Badge variant="accent">Plugin bundle (nix)</Badge> : null}
+              </div>
+              <p className="section-subtitle">{skill.summary ?? "No summary provided."}</p>
+
+              {isStaff && staffModerationNote ? (
+                <div className="skill-hero-note">{staffModerationNote}</div>
+              ) : null}
+              {nixPlugin ? (
+                <div className="skill-hero-note">
+                  Bundles the skill pack, CLI binary, and config requirements in one Nix install.
+                </div>
+              ) : null}
+
+              <div className="skill-hero-inline-meta">
+                <div className="skill-hero-stats-row">
+                  <span className="stat">⭐ {formattedStats.stars}</span>
+                  <span className="text-ink-soft opacity-40">·</span>
+                  <span className="stat"><Package size={14} aria-hidden="true" /> {formattedStats.downloads}</span>
+                  <span className="text-ink-soft opacity-40">·</span>
+                  <span className="stat">{formatCompactStat(skill.stats.installsCurrent ?? 0)} current</span>
+                  <span className="text-ink-soft opacity-40">·</span>
+                  <span className="stat">{formattedStats.installsAllTime} all-time</span>
+                </div>
+                <div className="skill-hero-meta-row">
+                  <UserBadge
+                    user={owner}
+                    fallbackHandle={ownerHandle}
+                    prefix="by"
+                    size="md"
+                    showName
+                  />
+                  {forkOf && forkOfHref ? (
+                    <>
+                      <span className="text-ink-soft opacity-40">·</span>
+                      <span className="stat">
+                        {forkOfLabel}{" "}
+                        <a href={forkOfHref}>
+                          {forkOfOwnerHandle ? `@${forkOfOwnerHandle}/` : ""}
+                          {forkOf.skill.slug}
+                        </a>
+                        {forkOf.version ? ` (${forkOf.version})` : null}
+                      </span>
+                    </>
                   ) : null}
-                  {nixPlugin ? <Badge variant="accent">Plugin bundle (nix)</Badge> : null}
-                </div>
-                <p className="m-0 text-sm text-[color:var(--ink-soft)]">
-                  {skill.summary ?? "No summary provided."}
-                </p>
-
-                {isStaff && staffModerationNote ? (
-                  <div className="rounded-[var(--radius-sm)] border border-amber-200/60 bg-amber-50/60 px-3 py-2 text-sm text-[color:var(--ink-soft)] dark:border-amber-500/20 dark:bg-amber-950/30">
-                    {staffModerationNote}
-                  </div>
-                ) : null}
-                {nixPlugin ? (
-                  <div className="rounded-[var(--radius-sm)] border border-amber-200/60 bg-amber-50/60 px-3 py-2 text-sm text-[color:var(--ink-soft)] dark:border-amber-500/20 dark:bg-amber-950/30">
-                    Bundles the skill pack, CLI binary, and config requirements in one Nix install.
-                  </div>
-                ) : null}
-
-                <div className="flex flex-col gap-2 pt-1">
-                  <div className="flex flex-wrap items-center gap-2">
-                    <span className="text-sm text-[color:var(--ink-soft)]">
-                      ⭐ {formattedStats.stars}
-                    </span>
-                    <span className="text-[color:var(--ink-soft)] opacity-40">·</span>
-                    <span className="flex items-center gap-1 text-sm text-[color:var(--ink-soft)]">
-                      <Package size={14} aria-hidden="true" /> {formattedStats.downloads}
-                    </span>
-                    <span className="text-[color:var(--ink-soft)] opacity-40">·</span>
-                    <span className="text-sm text-[color:var(--ink-soft)]">
-                      {formatCompactStat(skill.stats.installsCurrent ?? 0)} current
-                    </span>
-                    <span className="text-[color:var(--ink-soft)] opacity-40">·</span>
-                    <span className="text-sm text-[color:var(--ink-soft)]">
-                      {formattedStats.installsAllTime} all-time
-                    </span>
-                  </div>
-                  <div className="flex flex-wrap items-center gap-2">
-                    <UserBadge
-                      user={owner}
-                      fallbackHandle={ownerHandle}
-                      prefix="by"
-                      size="md"
-                      showName
-                    />
-                    {forkOf && forkOfHref ? (
-                      <>
-                        <span className="text-[color:var(--ink-soft)] opacity-40">·</span>
-                        <span className="text-sm text-[color:var(--ink-soft)]">
-                          {forkOfLabel}{" "}
-                          <a href={forkOfHref}>
-                            {forkOfOwnerHandle ? `@${forkOfOwnerHandle}/` : ""}
-                            {forkOf.skill.slug}
-                          </a>
-                          {forkOf.version ? ` (${forkOf.version})` : null}
-                        </span>
-                      </>
-                    ) : null}
-                    {canonicalHref ? (
-                      <>
-                        <span className="text-[color:var(--ink-soft)] opacity-40">·</span>
-                        <span className="text-sm text-[color:var(--ink-soft)]">
-                          canonical:{" "}
-                          <a href={canonicalHref}>
-                            {canonicalOwnerHandle ? `@${canonicalOwnerHandle}/` : ""}
-                            {canonical?.skill?.slug}
-                          </a>
-                        </span>
-                      </>
-                    ) : null}
-                  </div>
-                </div>
-
-                <div className="flex flex-wrap gap-1.5 pt-1">
-                  <Badge variant="compact">{PLATFORM_SKILL_LICENSE}</Badge>
-                  {getSkillBadges(skill).map((badge) => (
-                    <Badge key={badge} variant="compact">
-                      {badge}
-                    </Badge>
-                  ))}
-                  {isStaff && staffVisibilityTag ? (
-                    <Badge variant={isAutoHidden || isRemoved ? "accent" : "compact"}>
-                      {staffVisibilityTag}
-                    </Badge>
+                  {canonicalHref ? (
+                    <>
+                      <span className="text-ink-soft opacity-40">·</span>
+                      <span className="stat">
+                        canonical:{" "}
+                        <a href={canonicalHref}>
+                          {canonicalOwnerHandle ? `@${canonicalOwnerHandle}/` : ""}
+                          {canonical?.skill?.slug}
+                        </a>
+                      </span>
+                    </>
                   ) : null}
                 </div>
               </div>
+
+              <div className="skill-hero-badges">
+                {getSkillBadges(skill).map((badge) => (
+                  <Badge key={badge} variant="compact">
+                    {badge}
+                  </Badge>
+                ))}
+                {isStaff && staffVisibilityTag ? (
+                  <Badge variant={isAutoHidden || isRemoved ? "accent" : "compact"}>
+                    {staffVisibilityTag}
+                  </Badge>
+                ) : null}
+              </div>
             </div>
-            <div className="flex w-full flex-col gap-3 md:w-[220px] md:shrink-0">
-              {!nixPlugin && !modInfo?.isMalwareBlocked && !modInfo?.isRemoved ? (
-                <a
-                  href={`${convexSiteUrl}/api/v1/download?slug=${skill.slug}`}
-                  className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap font-semibold text-sm min-h-[44px] rounded-[var(--radius-pill)] px-4 py-[11px] border-none bg-gradient-to-br from-[color:var(--accent)] to-[color:var(--accent-deep)] text-white transition-all duration-200 no-underline hover:-translate-y-px hover:shadow-[0_10px_20px_rgba(29,26,23,0.12)]"
-                >
-                  Download zip
-                </a>
-              ) : null}
-              <div className="flex flex-col gap-2">
-                <div className="flex flex-col gap-0.5">
-                  <span className="text-xs font-semibold text-[color:var(--ink-soft)]">
-                    License
-                  </span>
-                  <span className="text-sm text-[color:var(--ink)]">
-                    {PLATFORM_SKILL_LICENSE} · {PLATFORM_SKILL_LICENSE_SUMMARY}
-                  </span>
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
+            <div className="skill-hero-sidebar">
+              <div className="skill-actions">
                 {isAuthenticated ? (
                   <button
-                    className={`flex h-9 w-9 items-center justify-center rounded-full border transition-all duration-200 ${isStarred ? "border-amber-400/60 bg-amber-50 text-amber-500 dark:border-amber-500/40 dark:bg-amber-950/40" : "border-[color:var(--line)] bg-[color:var(--surface)] text-[color:var(--ink-soft)] hover:text-amber-500"}`}
+                    className={`star-toggle${isStarred ? " is-active" : ""}`}
                     type="button"
                     onClick={onToggleStar}
                     aria-label={isStarred ? "Unstar skill" : "Star skill"}
@@ -322,18 +281,16 @@ export function SkillHeader({
                   </button>
                 ) : null}
                 {isAuthenticated ? (
-                  <Button variant="ghost" size="sm" onClick={onOpenReport}>
+                  <Button variant="ghost" size="sm" type="button" onClick={onOpenReport}>
                     Report
                   </Button>
                 ) : null}
                 {isStaff ? (
-                  <Link
-                    to="/management"
-                    search={{ skill: skill.slug }}
-                    className="inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold text-xs min-h-[34px] rounded-[var(--radius-pill)] px-3 py-1.5 border border-[color:var(--line)] bg-[color:var(--surface)] text-[color:var(--ink)] transition-all duration-200 no-underline"
-                  >
-                    Manage
-                  </Link>
+                  <Button asChild size="sm">
+                    <Link to="/management" search={{ skill: skill.slug }}>
+                      Manage
+                    </Link>
+                  </Button>
                 ) : null}
               </div>
             </div>
@@ -341,13 +298,12 @@ export function SkillHeader({
 
           {/* Security scan — full width below the header columns */}
           {suppressScanResults ? (
-            <div className="rounded-[var(--radius-sm)] border border-amber-200/60 bg-amber-50/60 px-3 py-2 text-sm text-[color:var(--ink-soft)] dark:border-amber-500/20 dark:bg-amber-950/30">
-              {overrideScanMessage}
-            </div>
+            <div className="skill-hero-note">{overrideScanMessage}</div>
           ) : latestVersion?.sha256hash ||
             latestVersion?.llmAnalysis ||
-            (latestVersion?.staticScan?.findings?.length ?? 0) > 0 ? (
-            <div className="flex flex-col gap-2">
+            (latestVersion?.staticScan?.findings?.length ?? 0) > 0 ||
+            (latestVersion?.capabilityTags?.length ?? 0) > 0 ? (
+            <div className="skill-hero-scan-row">
               <SecurityScanResults
                 sha256hash={latestVersion?.sha256hash}
                 vtAnalysis={latestVersion?.vtAnalysis}
@@ -355,77 +311,67 @@ export function SkillHeader({
                 staticFindings={latestVersion?.staticScan?.findings}
                 capabilityTags={latestVersion?.capabilityTags}
               />
-              <p className="text-xs text-[color:var(--ink-soft)]">
+              <p className="scan-disclaimer">
                 Like a lobster shell, security has layers — review code before you run it.
               </p>
             </div>
           ) : null}
           {hasPluginBundle ? (
-            <Card className="border-dashed">
-              <CardContent>
-                <div className="flex flex-col gap-1">
-                  <div className="font-display text-base font-bold text-[color:var(--ink)]">
-                    Plugin bundle (nix)
-                  </div>
-                  <div className="text-sm text-[color:var(--ink-soft)]">
-                    Skill pack · CLI binary · Config
+            <div className="skill-panel bundle-card">
+              <div className="bundle-header">
+                <div className="bundle-title">Plugin bundle (nix)</div>
+                <div className="bundle-subtitle">Skill pack · CLI binary · Config</div>
+              </div>
+              <div className="bundle-includes">
+                <span>SKILL.md</span>
+                <span>CLI</span>
+                <span>Config</span>
+              </div>
+              {configRequirements ? (
+                <div className="bundle-section">
+                  <div className="bundle-section-title">Config requirements</div>
+                  <div className="bundle-meta">
+                    {configRequirements.requiredEnv?.length ? (
+                      <div className="stat">
+                        <strong>Required env</strong>
+                        <span>{configRequirements.requiredEnv.join(", ")}</span>
+                      </div>
+                    ) : null}
+                    {configRequirements.stateDirs?.length ? (
+                      <div className="stat">
+                        <strong>State dirs</strong>
+                        <span>{configRequirements.stateDirs.join(", ")}</span>
+                      </div>
+                    ) : null}
                   </div>
                 </div>
-                <div className="flex flex-wrap gap-2">
-                  <Badge>SKILL.md</Badge>
-                  <Badge>CLI</Badge>
-                  <Badge>Config</Badge>
-                </div>
-                {configRequirements ? (
-                  <div className="flex flex-col gap-2">
-                    <div className="text-sm font-semibold text-[color:var(--ink)]">
-                      Config requirements
-                    </div>
-                    <div className="flex flex-col gap-1">
-                      {configRequirements.requiredEnv?.length ? (
-                        <div className="text-sm text-[color:var(--ink-soft)]">
-                          <strong>Required env</strong>
-                          <span>{configRequirements.requiredEnv.join(", ")}</span>
-                        </div>
-                      ) : null}
-                      {configRequirements.stateDirs?.length ? (
-                        <div className="text-sm text-[color:var(--ink-soft)]">
-                          <strong>State dirs</strong>
-                          <span>{configRequirements.stateDirs.join(", ")}</span>
-                        </div>
-                      ) : null}
-                    </div>
-                  </div>
-                ) : null}
-                {cliHelp ? (
-                  <details className="flex flex-col gap-2">
-                    <summary className="cursor-pointer text-sm font-semibold text-[color:var(--ink)]">
-                      CLI help (from plugin)
-                    </summary>
-                    <pre className="mt-2 overflow-x-auto rounded-[var(--radius-sm)] bg-[color:var(--surface-muted)] p-3 font-mono text-xs">
-                      {cliHelp}
-                    </pre>
-                  </details>
-                ) : null}
-              </CardContent>
-            </Card>
+              ) : null}
+              {cliHelp ? (
+                <details className="bundle-section bundle-details">
+                  <summary>CLI help (from plugin)</summary>
+                  <pre className="hero-install-code mono">{cliHelp}</pre>
+                </details>
+              ) : null}
+            </div>
           ) : null}
         </div>
 
-        <div className="flex flex-wrap items-center gap-2 border-t border-[color:var(--line)] pt-4">
+        <div className="skill-tag-row">
           {tagEntries.length === 0 ? (
-            <span className="m-0 text-sm text-[color:var(--ink-soft)]">No tags yet.</span>
+            <span className="section-subtitle m-0">
+              No tags yet.
+            </span>
           ) : (
             tagEntries.map(([tag, versionId]) => (
-              <Badge key={tag} className="gap-1.5">
+              <Badge key={tag}>
                 {tag}
-                <span className="text-[0.68rem] opacity-70">
+                <span className="tag-meta">
                   v{versionById.get(versionId)?.version ?? versionId}
                 </span>
                 {canManage && tag !== "latest" ? (
                   <button
                     type="button"
-                    className="ml-0.5 cursor-pointer border-none bg-transparent p-0 text-current opacity-60 hover:opacity-100"
+                    className="tag-delete"
                     onClick={() => onTagDelete(tag)}
                     aria-label={`Delete tag ${tag}`}
                     title={`Delete tag "${tag}"`}
@@ -444,16 +390,16 @@ export function SkillHeader({
               event.preventDefault();
               onTagSubmit();
             }}
-            className="flex flex-wrap items-end gap-2 border-t border-[color:var(--line)] pt-4"
+            className="tag-form"
           >
-            <Input
+            <input
+              className="search-input"
               value={tagName}
               onChange={(event) => onTagNameChange(event.target.value)}
               placeholder="latest"
-              className="w-auto max-w-[160px]"
             />
             <select
-              className="min-h-[44px] rounded-[var(--radius-sm)] border border-[rgba(29,59,78,0.22)] bg-[rgba(255,255,255,0.94)] px-3.5 py-[13px] text-[color:var(--ink)] transition-all duration-[180ms] ease-out focus:border-[color-mix(in_srgb,var(--accent)_70%,white)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--accent)_22%,transparent)] focus:outline-none dark:border-[rgba(255,255,255,0.12)] dark:bg-[rgba(14,28,37,0.84)]"
+              className="search-input"
               value={tagVersionId ?? ""}
               onChange={(event) => onTagVersionChange(event.target.value as Id<"skillVersions">)}
             >
@@ -463,12 +409,13 @@ export function SkillHeader({
                 </option>
               ))}
             </select>
-            <Button type="submit">Update tag</Button>
+            <Button type="submit">
+              Update tag
+            </Button>
           </form>
         ) : null}
 
-        <SkillInstallCard clawdis={clawdis} osLabels={osLabels} />
-      </Card>
+      </div>
     </>
   );
 }

src/components/SkillInstallCard.tsx

@@ -1,12 +1,6 @@
 import type { ClawdisSkillMetadata } from "clawhub-schema";
-import {
-  PLATFORM_SKILL_LICENSE,
-  PLATFORM_SKILL_LICENSE_SUMMARY,
-  PLATFORM_SKILL_LICENSE_URL,
-} from "clawhub-schema/licenseConstants";
-import { formatInstallCommand, formatInstallLabel } from "./skillDetailUtils";
 import { Badge } from "./ui/badge";
-import { Card, CardContent } from "./ui/card";
+import { formatInstallCommand, formatInstallLabel } from "./skillDetailUtils";
 
 type SkillInstallCardProps = {
   clawdis: ClawdisSkillMetadata | undefined;
@@ -32,229 +26,180 @@ export function SkillInstallCard({ clawdis, osLabels }: SkillInstallCardProps) {
   const hasInstallSpecs = installSpecs.length > 0;
   const hasDependencies = dependencies.length > 0;
   const hasLinks = Boolean(links?.homepage || links?.repository || links?.documentation);
-  const hasLicense = true;
 
-  if (!hasRuntimeRequirements && !hasInstallSpecs && !hasDependencies && !hasLinks && !hasLicense) {
+  if (!hasRuntimeRequirements && !hasInstallSpecs && !hasDependencies && !hasLinks) {
     return null;
   }
 
   return (
-    <div className="border-t border-[color:var(--line)] pt-4">
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        <Card className="p-4">
-          <CardContent className="gap-2">
-            <h3 className="m-0 font-display text-base font-bold text-[color:var(--ink)]">
-              License
-            </h3>
-            <div className="flex flex-col gap-2">
-              <Badge variant="accent">{PLATFORM_SKILL_LICENSE}</Badge>
-              <div className="text-sm text-[color:var(--ink-soft)]">
-                <span>{PLATFORM_SKILL_LICENSE_SUMMARY}</span>
-              </div>
-              <div className="text-sm text-[color:var(--ink-soft)]">
-                <strong>Terms</strong>
-                <a
-                  href={PLATFORM_SKILL_LICENSE_URL}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="ml-1"
-                >
-                  {PLATFORM_SKILL_LICENSE_URL}
-                </a>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+    <div className="skill-hero-content">
+      <div className="skill-hero-panels">
         {hasRuntimeRequirements ? (
-          <Card className="p-4">
-            <CardContent className="gap-2">
-              <h3 className="m-0 font-display text-base font-bold text-[color:var(--ink)]">
-                Runtime requirements
-              </h3>
-              <div className="flex flex-col gap-2">
-                {clawdis?.emoji ? <Badge>{clawdis.emoji} Clawdis</Badge> : null}
-                {osLabels.length ? (
-                  <div className="text-sm text-[color:var(--ink-soft)]">
-                    <strong>OS</strong>
-                    <span className="ml-1">{osLabels.join(" · ")}</span>
-                  </div>
-                ) : null}
-                {requirements?.bins?.length ? (
-                  <div className="text-sm text-[color:var(--ink-soft)]">
-                    <strong>Bins</strong>
-                    <span className="ml-1">{requirements.bins.join(", ")}</span>
-                  </div>
-                ) : null}
-                {requirements?.anyBins?.length ? (
-                  <div className="text-sm text-[color:var(--ink-soft)]">
-                    <strong>Any bin</strong>
-                    <span className="ml-1">{requirements.anyBins.join(", ")}</span>
-                  </div>
-                ) : null}
-                {requirements?.env?.length ? (
-                  <div className="text-sm text-[color:var(--ink-soft)]">
-                    <strong>Env</strong>
-                    <span className="ml-1">{requirements.env.join(", ")}</span>
-                  </div>
-                ) : null}
-                {requirements?.config?.length ? (
-                  <div className="text-sm text-[color:var(--ink-soft)]">
-                    <strong>Config</strong>
-                    <span className="ml-1">{requirements.config.join(", ")}</span>
-                  </div>
-                ) : null}
-                {clawdis?.primaryEnv ? (
-                  <div className="text-sm text-[color:var(--ink-soft)]">
-                    <strong>Primary env</strong>
-                    <span className="ml-1">{clawdis.primaryEnv}</span>
-                  </div>
-                ) : null}
-                {envVars.length > 0 ? (
-                  <div className="text-sm text-[color:var(--ink-soft)]">
-                    <strong>Environment variables</strong>
-                    <div className="mt-1 flex flex-col gap-1">
-                      {envVars.map((env, index) => (
-                        <div key={`${env.name}-${index}`} className="flex items-baseline gap-2">
-                          <code className="text-[0.85rem]">{env.name}</code>
-                          {env.required === false ? (
-                            <span className="text-xs text-[color:var(--ink-soft)]">optional</span>
-                          ) : env.required === true ? (
-                            <span className="text-xs text-[color:var(--accent)]">required</span>
-                          ) : null}
-                          {env.description ? (
-                            <span className="text-[0.8rem] text-[color:var(--ink-soft)]">
-                              — {env.description}
-                            </span>
-                          ) : null}
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                ) : null}
-              </div>
-            </CardContent>
-          </Card>
-        ) : null}
-        {hasDependencies ? (
-          <Card className="p-4">
-            <CardContent className="gap-2">
-              <h3 className="m-0 font-display text-base font-bold text-[color:var(--ink)]">
-                Dependencies
-              </h3>
-              <div className="flex flex-col gap-2">
-                {dependencies.map((dep, index) => (
-                  <div
-                    key={`${dep.name}-${index}`}
-                    className="text-sm text-[color:var(--ink-soft)]"
-                  >
-                    <div>
-                      <strong>{dep.name}</strong>
-                      <span className="ml-2 text-[0.85rem] text-[color:var(--ink-soft)]">
-                        {dep.type}
-                        {dep.version ? ` ${dep.version}` : ""}
-                      </span>
-                      {dep.url ? (
-                        <div className="break-all text-[0.8rem]">
-                          <a href={dep.url} target="_blank" rel="noopener noreferrer">
-                            {dep.url}
-                          </a>
-                        </div>
-                      ) : null}
-                      {dep.repository && dep.repository !== dep.url ? (
-                        <div className="text-[0.8rem]">
-                          <a href={dep.repository} target="_blank" rel="noopener noreferrer">
-                            Source
-                          </a>
-                        </div>
-                      ) : null}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-          </Card>
-        ) : null}
-        {hasInstallSpecs ? (
-          <Card className="p-4">
-            <CardContent className="gap-2">
-              <h3 className="m-0 font-display text-base font-bold text-[color:var(--ink)]">
-                Install
-              </h3>
-              <div className="flex flex-col gap-2">
-                {installSpecs.map((spec, index) => {
-                  const command = formatInstallCommand(spec);
-                  return (
-                    <div
-                      key={`${spec.id ?? spec.kind}-${index}`}
-                      className="text-sm text-[color:var(--ink-soft)]"
-                    >
-                      <div>
-                        <strong>{spec.label ?? formatInstallLabel(spec)}</strong>
-                        {spec.bins?.length ? (
-                          <div className="text-[0.85rem] text-[color:var(--ink-soft)]">
-                            Bins: {spec.bins.join(", ")}
-                          </div>
+          <div className="skill-panel">
+            <h3 className="section-title text-[1rem] m-0">
+              Runtime requirements
+            </h3>
+            <div className="skill-panel-body">
+              {clawdis?.emoji ? <Badge>{clawdis.emoji} Clawdis</Badge> : null}
+              {osLabels.length ? (
+                <div className="stat">
+                  <strong>OS</strong>
+                  <span>{osLabels.join(" · ")}</span>
+                </div>
+              ) : null}
+              {requirements?.bins?.length ? (
+                <div className="stat">
+                  <strong>Bins</strong>
+                  <span>{requirements.bins.join(", ")}</span>
+                </div>
+              ) : null}
+              {requirements?.anyBins?.length ? (
+                <div className="stat">
+                  <strong>Any bin</strong>
+                  <span>{requirements.anyBins.join(", ")}</span>
+                </div>
+              ) : null}
+              {requirements?.env?.length ? (
+                <div className="stat">
+                  <strong>Env</strong>
+                  <span>{requirements.env.join(", ")}</span>
+                </div>
+              ) : null}
+              {requirements?.config?.length ? (
+                <div className="stat">
+                  <strong>Config</strong>
+                  <span>{requirements.config.join(", ")}</span>
+                </div>
+              ) : null}
+              {clawdis?.primaryEnv ? (
+                <div className="stat">
+                  <strong>Primary env</strong>
+                  <span>{clawdis.primaryEnv}</span>
+                </div>
+              ) : null}
+              {envVars.length > 0 ? (
+                <div className="stat">
+                  <strong>Environment variables</strong>
+                  <div className="flex flex-col gap-1 mt-1">
+                    {envVars.map((env, index) => (
+                      <div
+                        key={`${env.name}-${index}`}
+                        className="flex items-baseline gap-2"
+                      >
+                        <code className="text-[0.85rem]">{env.name}</code>
+                        {env.required === false ? (
+                          <span className="text-ink-soft text-[0.75rem]">
+                            optional
+                          </span>
+                        ) : env.required === true ? (
+                          <span className="text-ink-accent text-[0.75rem]">
+                            required
+                          </span>
                         ) : null}
-                        {command ? (
-                          <code className="mt-0.5 block font-mono text-xs">{command}</code>
+                        {env.description ? (
+                          <span className="text-ink-soft text-[0.8rem]">
+                            — {env.description}
+                          </span>
                         ) : null}
                       </div>
+                    ))}
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+        {hasDependencies ? (
+          <div className="skill-panel">
+            <h3 className="section-title text-[1rem] m-0">
+              Dependencies
+            </h3>
+            <div className="skill-panel-body">
+              {dependencies.map((dep, index) => (
+                <div key={`${dep.name}-${index}`} className="stat">
+                  <div>
+                    <strong>{dep.name}</strong>
+                    <span className="text-ink-soft text-[0.85rem] ml-2">
+                      {dep.type}
+                      {dep.version ? ` ${dep.version}` : ""}
+                    </span>
+                    {dep.url ? (
+                      <div className="text-[0.8rem] break-all">
+                        <a href={dep.url} target="_blank" rel="noopener noreferrer">
+                          {dep.url}
+                        </a>
+                      </div>
+                    ) : null}
+                    {dep.repository && dep.repository !== dep.url ? (
+                      <div className="text-[0.8rem]">
+                        <a href={dep.repository} target="_blank" rel="noopener noreferrer">
+                          Source
+                        </a>
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : null}
+        {hasInstallSpecs ? (
+          <div className="skill-panel">
+            <h3 className="section-title text-[1rem] m-0">
+              Install
+            </h3>
+            <div className="skill-panel-body">
+              {installSpecs.map((spec, index) => {
+                const command = formatInstallCommand(spec);
+                return (
+                  <div key={`${spec.id ?? spec.kind}-${index}`} className="stat">
+                    <div>
+                      <strong>{spec.label ?? formatInstallLabel(spec)}</strong>
+                      {spec.bins?.length ? (
+                        <div className="text-ink-soft text-[0.85rem]">
+                          Bins: {spec.bins.join(", ")}
+                        </div>
+                      ) : null}
+                      {command ? <code>{command}</code> : null}
                     </div>
-                  );
-                })}
-              </div>
-            </CardContent>
-          </Card>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
         ) : null}
         {hasLinks ? (
-          <Card className="p-4">
-            <CardContent className="gap-2">
-              <h3 className="m-0 font-display text-base font-bold text-[color:var(--ink)]">
-                Links
-              </h3>
-              <div className="flex flex-col gap-2">
-                {links?.homepage ? (
-                  <div className="text-sm text-[color:var(--ink-soft)]">
-                    <strong>Homepage</strong>
-                    <a
-                      href={links.homepage}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="ml-1 break-all"
-                    >
-                      {links.homepage}
-                    </a>
-                  </div>
-                ) : null}
-                {links?.repository ? (
-                  <div className="text-sm text-[color:var(--ink-soft)]">
-                    <strong>Repository</strong>
-                    <a
-                      href={links.repository}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="ml-1 break-all"
-                    >
-                      {links.repository}
-                    </a>
-                  </div>
-                ) : null}
-                {links?.documentation ? (
-                  <div className="text-sm text-[color:var(--ink-soft)]">
-                    <strong>Docs</strong>
-                    <a
-                      href={links.documentation}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="ml-1"
-                    >
-                      {links.documentation}
-                    </a>
-                  </div>
-                ) : null}
-              </div>
-            </CardContent>
-          </Card>
+          <div className="skill-panel">
+            <h3 className="section-title text-[1rem] m-0">
+              Links
+            </h3>
+            <div className="skill-panel-body">
+              {links?.homepage ? (
+                <div className="stat">
+                  <strong>Homepage</strong>
+                  <a href={links.homepage} target="_blank" rel="noopener noreferrer" className="break-all">
+                    {links.homepage}
+                  </a>
+                </div>
+              ) : null}
+              {links?.repository ? (
+                <div className="stat">
+                  <strong>Repository</strong>
+                  <a href={links.repository} target="_blank" rel="noopener noreferrer" className="break-all">
+                    {links.repository}
+                  </a>
+                </div>
+              ) : null}
+              {links?.documentation ? (
+                <div className="stat">
+                  <strong>Docs</strong>
+                  <a href={links.documentation} target="_blank" rel="noopener noreferrer">
+                    {links.documentation}
+                  </a>
+                </div>
+              ) : null}
+            </div>
+          </div>
         ) : null}
       </div>
     </div>

src/components/SkillListItem.tsx

@@ -0,0 +1,53 @@
+import { Link } from "@tanstack/react-router";
+import { Package, Star } from "lucide-react";
+import { MarketplaceIcon } from "./MarketplaceIcon";
+import { Badge } from "./ui/badge";
+import { getSkillBadges } from "../lib/badges";
+import { formatCompactStat } from "../lib/numberFormat";
+import type { PublicPublisher, PublicSkill } from "../lib/publicUser";
+import { timeAgo } from "../lib/timeAgo";
+
+type SkillListItemProps = {
+  skill: PublicSkill;
+  ownerHandle?: string | null;
+  owner?: PublicPublisher | null;
+};
+
+export function SkillListItem({ skill, ownerHandle, owner }: SkillListItemProps) {
+  const handle = ownerHandle ?? owner?.handle ?? null;
+  const ownerSegment = handle?.trim() || String(skill.ownerPublisherId ?? skill.ownerUserId);
+  const href = `/${encodeURIComponent(ownerSegment)}/${encodeURIComponent(skill.slug)}`;
+  const badges = getSkillBadges(skill);
+
+  return (
+    <Link to={href} className="skill-list-item">
+      <MarketplaceIcon kind="skill" label={skill.displayName} />
+      <div className="skill-list-item-body">
+        <div className="skill-list-item-main">
+          {handle ? (
+            <>
+              <span className="skill-list-item-owner">@{handle}</span>
+              <span className="skill-list-item-sep">/</span>
+            </>
+          ) : null}
+          <span className="skill-list-item-name">{skill.displayName}</span>
+          {badges.map((b) => (
+            <Badge key={b} variant="compact">
+              {b}
+            </Badge>
+          ))}
+        </div>
+        {skill.summary ? <p className="skill-list-item-summary">{skill.summary}</p> : null}
+        <div className="skill-list-item-meta">
+          <span className="skill-list-item-meta-item">Updated {timeAgo(skill.updatedAt)}</span>
+          <span className="skill-list-item-meta-item">
+            <Star size={14} aria-hidden="true" /> {formatCompactStat(skill.stats.stars)}
+          </span>
+          <span className="skill-list-item-meta-item">
+            <Package size={14} aria-hidden="true" /> {formatCompactStat(skill.stats.downloads)}
+          </span>
+        </div>
+      </div>
+    </Link>
+  );
+}

src/components/SkillMetadataSidebar.tsx

@@ -0,0 +1,121 @@
+import type { ClawdisSkillMetadata } from "clawhub-schema";
+import {
+  PLATFORM_SKILL_LICENSE,
+  PLATFORM_SKILL_LICENSE_SUMMARY,
+} from "clawhub-schema/licenseConstants";
+import { Calendar, Download, Package, Scale, Star, Tag } from "lucide-react";
+import type { Id } from "../../convex/_generated/dataModel";
+import { formatCompactStat } from "../lib/numberFormat";
+import type { PublicPublisher, PublicSkill } from "../lib/publicUser";
+import { getRuntimeEnv } from "../lib/runtimeEnv";
+import { timeAgo } from "../lib/timeAgo";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import { UserBadge } from "./UserBadge";
+
+type SkillMetadataSidebarProps = {
+  skill: PublicSkill;
+  latestVersion: { version?: string; _id: Id<"skillVersions"> } | null;
+  owner: PublicPublisher | null;
+  ownerHandle: string | null;
+  clawdis?: ClawdisSkillMetadata;
+  osLabels: string[];
+  tagEntries: Array<[string, Id<"skillVersions">]>;
+  isMalwareBlocked?: boolean;
+  isRemoved?: boolean;
+  nixPlugin?: string;
+};
+
+export function SkillMetadataSidebar({
+  skill,
+  latestVersion,
+  owner,
+  ownerHandle,
+  clawdis: _clawdis,
+  osLabels,
+  tagEntries,
+  isMalwareBlocked,
+  isRemoved,
+  nixPlugin,
+}: SkillMetadataSidebarProps) {
+  const convexSiteUrl = getRuntimeEnv("VITE_CONVEX_SITE_URL") ?? "https://clawhub.ai";
+  const showDownload = !nixPlugin && !isMalwareBlocked && !isRemoved;
+
+  return (
+    <div className="detail-meta-bar">
+      {/* Stats row */}
+      <div className="meta-bar-stats">
+        <div className="meta-stat">
+          <Download size={14} aria-hidden="true" />
+          <span className="meta-stat-value">{formatCompactStat(skill.stats.downloads)}</span>
+          <span className="meta-stat-label">downloads</span>
+        </div>
+        <div className="meta-stat">
+          <Star size={14} aria-hidden="true" />
+          <span className="meta-stat-value">{formatCompactStat(skill.stats.stars)}</span>
+          <span className="meta-stat-label">stars</span>
+        </div>
+        <div className="meta-stat">
+          <Package size={14} aria-hidden="true" />
+          <span className="meta-stat-value">{formatCompactStat(skill.stats.versions ?? 0)}</span>
+          <span className="meta-stat-label">versions</span>
+        </div>
+      </div>
+
+      {/* Details row */}
+      <div className="meta-bar-details">
+        <div className="meta-detail">
+          <Calendar size={12} aria-hidden="true" />
+          <span>Updated {timeAgo(skill.updatedAt)}</span>
+        </div>
+        {latestVersion?.version ? (
+          <div className="meta-detail">
+            <Tag size={12} aria-hidden="true" />
+            <span>v{latestVersion.version}</span>
+          </div>
+        ) : null}
+        <div className="meta-detail">
+          <Scale size={12} aria-hidden="true" />
+          <span>{PLATFORM_SKILL_LICENSE}</span>
+        </div>
+        {osLabels.length > 0 ? (
+          <div className="meta-detail">
+            <span>{osLabels.join(", ")}</span>
+          </div>
+        ) : null}
+      </div>
+
+      {/* Tags and Publisher row */}
+      <div className="meta-bar-footer">
+        <div className="meta-bar-publisher">
+          <UserBadge
+            user={owner}
+            fallbackHandle={ownerHandle}
+            prefix=""
+            size="sm"
+            showName
+          />
+        </div>
+        
+        {tagEntries.length > 0 ? (
+          <div className="meta-bar-tags">
+            {tagEntries.map(([tag]) => (
+              <Badge key={tag} variant="compact">
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        ) : null}
+
+        {showDownload ? (
+          <Button asChild variant="primary" size="sm">
+            <a href={`${convexSiteUrl}/api/v1/download?slug=${skill.slug}`}>
+              <Download size={14} aria-hidden="true" />
+              Download
+            </a>
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+}

src/components/SkillSecurityScanResults.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { Badge } from "./ui/badge";
 
 type LlmAnalysisDimension = {
   name: string;
@@ -388,9 +389,9 @@ export function SecurityScanResults({
             <div className="scan-findings-title">Capability signals</div>
             <div className="scan-capability-tags">
               {visibleCapabilityTags.map((tag) => (
-                <span key={tag} className="tag scan-capability-tag">
+                <Badge key={tag} className="scan-capability-tag">
                   {SKILL_CAPABILITY_LABELS[tag] ?? tag}
-                </span>
+                </Badge>
               ))}
             </div>
             <div className="scan-capability-note">

src/components/SoulCard.tsx

@@ -1,5 +1,6 @@
 import { Link } from "@tanstack/react-router";
 import type { ReactNode } from "react";
+import { MarketplaceIcon } from "./MarketplaceIcon";
 import type { PublicSoul } from "../lib/publicUser";
 
 type SoulCardProps = {
@@ -10,18 +11,13 @@ type SoulCardProps = {
 
 export function SoulCard({ soul, summaryFallback, meta }: SoulCardProps) {
   return (
-    <Link
-      to="/souls/$slug"
-      params={{ slug: soul.slug }}
-      className="group flex flex-col gap-3 rounded-[var(--radius-md)] border border-[color:var(--line)] bg-[color:var(--surface)] p-[22px] no-underline transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_12px_28px_rgba(29,26,23,0.12)]"
-    >
-      <h3 className="font-display text-base font-bold text-[color:var(--ink)] group-hover:text-[color:var(--accent)]">
-        {soul.displayName}
-      </h3>
-      <p className="line-clamp-2 text-sm leading-relaxed text-[color:var(--ink-soft)]">
-        {soul.summary ?? summaryFallback}
-      </p>
-      <div className="mt-auto flex items-center gap-3 pt-2">{meta}</div>
+    <Link to="/souls/$slug" params={{ slug: soul.slug }} className="card skill-card">
+      <div className="skill-card-header">
+        <MarketplaceIcon kind="soul" label={soul.displayName} size="md" />
+        <h3 className="skill-card-title">{soul.displayName}</h3>
+      </div>
+      <p className="skill-card-summary">{soul.summary ?? summaryFallback}</p>
+      <div className="skill-card-footer">{meta}</div>
     </Link>
   );
 }

src/components/UserBadge.tsx

@@ -1,5 +1,12 @@
+import { Package, Star, Download } from "lucide-react";
+import { useEffect, useState } from "react";
+import { api } from "../../convex/_generated/api";
+import type { Id } from "../../convex/_generated/dataModel";
+import { convexHttp } from "../convex/client";
 import { hasOwnProperty } from "../lib/hasOwnProperty";
+import { formatCompactStat } from "../lib/numberFormat";
 import type { PublicPublisher, PublicUser } from "../lib/publicUser";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 type UserBadgeProps = {
   user: PublicUser | PublicPublisher | null | undefined;
@@ -40,7 +47,14 @@ export function UserBadge({
     displayName!.toLowerCase() !== handle!.toLowerCase();
   const initial = (displayName ?? handle ?? "u").charAt(0).toUpperCase();
 
-  return (
+  // Resolve userId for stats query — PublicUser has _id directly,
+  // PublicPublisher has linkedUserId
+  const userId =
+    user && hasOwnProperty(user, "kind")
+      ? (user as PublicPublisher).linkedUserId ?? null
+      : user?._id ?? null;
+
+  const badge = (
     <span className={`user-badge user-badge-${size}`}>
       {prefix ? <span className="user-badge-prefix">{prefix}</span> : null}
       <span className="user-avatar" aria-hidden="true">
@@ -67,4 +81,77 @@ export function UserBadge({
       )}
     </span>
   );
+
+  if (!userId) return badge;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{badge}</TooltipTrigger>
+      <UserStatsTooltipContent userId={userId} displayName={displayName} handle={handle} />
+    </Tooltip>
+  );
+}
+
+type HoverStats = { publishedSkills: number; totalStars: number; totalDownloads: number };
+
+function UserStatsTooltipContent({
+  userId,
+  displayName,
+  handle,
+}: {
+  userId: string;
+  displayName: string | null;
+  handle: string | null;
+}) {
+  const [stats, setStats] = useState<HoverStats | null>(null);
+  const [fetched, setFetched] = useState(false);
+
+  // One-shot fetch on mount (tooltip content only mounts when open)
+  useEffect(() => {
+    if (fetched) return;
+    setFetched(true);
+    void convexHttp
+      .query(api.users.getHoverStats, { userId: userId as Id<"users"> })
+      .then(setStats)
+      .catch(() => {});
+  }, [userId, fetched]);
+
+  return (
+    <TooltipContent
+      side="top"
+      className="min-w-[140px] p-0"
+      onPointerDownOutside={(e) => e.preventDefault()}
+    >
+      <div className="flex flex-col gap-space-1 px-3 py-2">
+        {displayName && (
+          <span className="text-fs-sm font-semibold text-ink truncate max-w-[180px]">
+            {displayName}
+          </span>
+        )}
+        {handle && (
+          <span className="text-fs-xs text-ink-soft">@{handle}</span>
+        )}
+      </div>
+      <div className="border-t border-line flex items-center gap-space-3 px-3 py-2">
+        {stats === null ? (
+          <span className="text-fs-xs text-ink-soft">Loading...</span>
+        ) : (
+          <>
+            <span className="flex items-center gap-1 text-fs-xs text-ink-soft" title="Published skills">
+              <Package size={12} />
+              {formatCompactStat(stats.publishedSkills)}
+            </span>
+            <span className="flex items-center gap-1 text-fs-xs text-ink-soft" title="Stars received">
+              <Star size={12} />
+              {formatCompactStat(stats.totalStars)}
+            </span>
+            <span className="flex items-center gap-1 text-fs-xs text-ink-soft" title="Total downloads">
+              <Download size={12} />
+              {formatCompactStat(stats.totalDownloads)}
+            </span>
+          </>
+        )}
+      </div>
+    </TooltipContent>
+  );
 }

src/components/UserListItem.tsx

@@ -0,0 +1,31 @@
+import { Link } from "@tanstack/react-router";
+import { MarketplaceIcon } from "./MarketplaceIcon";
+import type { PublicUser } from "../lib/publicUser";
+
+type UserListItemProps = {
+  user: PublicUser;
+};
+
+export function UserListItem({ user }: UserListItemProps) {
+  const handle = user.handle?.trim();
+  if (!handle) return null;
+
+  const displayName = user.displayName ?? user.name ?? handle;
+
+  return (
+    <Link to="/u/$handle" params={{ handle }} className="skill-list-item user-list-item" aria-label={`User: ${displayName}`}>
+      <MarketplaceIcon kind="user" label={displayName} imageUrl={user.image} />
+      <div className="skill-list-item-body">
+        <div className="skill-list-item-main">
+          <span className="skill-list-item-name">{displayName}</span>
+          <span className="skill-list-item-owner">@{handle}</span>
+        </div>
+        <p className="skill-list-item-summary">{user.bio?.trim() || "Builder on ClawHub."}</p>
+        <div className="skill-list-item-meta">
+          <span className="skill-list-item-meta-item">User</span>
+          <span className="skill-list-item-meta-item">Profile</span>
+        </div>
+      </div>
+    </Link>
+  );
+}

src/components/layout/Container.tsx

@@ -2,23 +2,23 @@ import * as React from "react";
 import { cn } from "../../lib/utils";
 
 interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  size?: "default" | "narrow" | "wide";
+	size?: "default" | "narrow" | "wide";
 }
 
 const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
-  ({ className, size = "default", ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        "mx-auto w-full px-4 sm:px-6 lg:px-7",
-        size === "default" && "max-w-[1200px]",
-        size === "narrow" && "max-w-[900px]",
-        size === "wide" && "max-w-[1400px]",
-        className,
-      )}
-      {...props}
-    />
-  ),
+	({ className, size = "default", ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn(
+				"mx-auto w-full px-4 sm:px-6 lg:px-7",
+				size === "default" && "max-w-page-max",
+				size === "narrow" && "max-w-page-narrow",
+				size === "wide" && "w-full",
+				className,
+			)}
+			{...props}
+		/>
+	),
 );
 Container.displayName = "Container";
 

src/components/skeletons/DashboardSkeleton.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from "../ui/skeleton";
 
 export function DashboardSkeleton() {
   return (
-    <div className="mx-auto max-w-[1200px] px-7 py-10">
+    <div className="mx-auto max-w-page-max px-7 py-10">
       {/* Header */}
       <div className="mb-8 flex items-center justify-between">
         <Skeleton className="h-8 w-52" />

src/components/skeletons/SkillDetailSkeleton.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from "../ui/skeleton";
 
 export function SkillDetailSkeleton() {
   return (
-    <div className="mx-auto max-w-[1200px] px-7 py-10">
+    <div className="mx-auto max-w-page-max px-7 py-10">
       {/* Breadcrumb */}
       <Skeleton className="mb-6 h-4 w-48" />
 

src/components/ui/badge.tsx

@@ -10,37 +10,16 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     <span
       ref={ref}
       className={cn(
-        // Base styles matching .tag
-        "inline-flex items-center gap-1.5 rounded-[var(--radius-pill)] text-[0.8rem] font-semibold",
-        // Variant styles
-        variant === "default" && [
-          "bg-[rgba(43,198,164,0.16)] px-3 py-1 text-[#1a6b5b]",
-          "dark:bg-[rgba(232,106,71,0.2)] dark:text-[#ffd0bf]",
-        ],
-        variant === "accent" && [
-          "bg-[rgba(255,107,74,0.16)] px-3 py-1 text-[color:var(--accent-deep)]",
-          "dark:bg-[rgba(232,106,71,0.24)] dark:text-[#ffd0bf]",
-        ],
-        variant === "compact" && [
-          "bg-[rgba(43,198,164,0.16)] px-2.5 py-0.5 text-[0.72rem] text-[#1a6b5b]",
-          "dark:bg-[rgba(232,106,71,0.2)] dark:text-[#ffd0bf]",
-        ],
-        variant === "pending" && [
-          "bg-[rgba(240,196,106,0.2)] px-3 py-1 text-[#8a6914]",
-          "dark:bg-[rgba(243,201,122,0.18)] dark:text-[color:var(--gold)]",
-        ],
-        variant === "success" && [
-          "bg-emerald-100 px-3 py-1 text-emerald-700",
-          "dark:bg-emerald-900/30 dark:text-emerald-300",
-        ],
-        variant === "warning" && [
-          "bg-amber-100 px-3 py-1 text-amber-700",
-          "dark:bg-amber-900/30 dark:text-amber-300",
-        ],
-        variant === "destructive" && [
-          "bg-red-100 px-3 py-1 text-red-700",
-          "dark:bg-red-900/30 dark:text-red-300",
-        ],
+        // Base styles
+        "inline-flex items-center gap-1.5 rounded-[var(--radius-pill)] text-fs-sm font-semibold",
+        // Variant styles — all token-driven, no dark: overrides needed
+        variant === "default" && "bg-hover-bg px-3 py-1 text-ink-soft border border-line",
+        variant === "accent" && "bg-active-bg px-3 py-1 text-accent-deep border border-line",
+        variant === "compact" && "bg-hover-bg px-2.5 py-0.5 text-fs-xs text-ink-soft border border-line",
+        variant === "pending" && "bg-status-warning-bg px-3 py-1 text-status-warning-fg border border-line",
+        variant === "success" && "bg-status-success-bg px-3 py-1 text-status-success-fg border border-line",
+        variant === "warning" && "bg-status-warning-bg px-3 py-1 text-status-warning-fg border border-line",
+        variant === "destructive" && "bg-status-error-bg px-3 py-1 text-status-error-fg border border-line",
         className,
       )}
       {...props}

src/components/ui/button.tsx

@@ -33,15 +33,15 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           "inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all duration-200 ease-out",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]/35 focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--bg)]",
           "disabled:pointer-events-none disabled:opacity-60",
-          // Hover lift (matches .btn:hover)
-          "hover:not-disabled:-translate-y-px hover:not-disabled:shadow-[0_10px_20px_rgba(29,26,23,0.12)]",
+          // Hover lift
+          "hover:not-disabled:-translate-y-px hover:not-disabled:shadow-hover",
           // Variant styles
           variant === "default" &&
             "border border-[color:var(--line)] bg-[color:var(--surface)] text-[color:var(--ink)]",
           variant === "primary" &&
-            "border-none bg-gradient-to-br from-[color:var(--accent)] to-[color:var(--accent-deep)] text-white dark:from-[#c35640] dark:to-[#953827] dark:shadow-[0_10px_22px_rgba(58,23,16,0.42),inset_0_1px_0_rgba(255,201,184,0.18)]",
+            "border border-accent bg-accent/10 text-[color:var(--ink)]",
           variant === "destructive" &&
-            "border border-red-300/40 bg-red-50 text-red-700 hover:not-disabled:bg-red-100 dark:border-red-500/30 dark:bg-red-950/50 dark:text-red-300",
+            "border border-status-error-fg/20 bg-status-error-bg text-status-error-fg hover:not-disabled:bg-active-bg",
           variant === "ghost" &&
             "border-transparent bg-transparent text-[color:var(--ink-soft)] hover:not-disabled:bg-[color:var(--surface-muted)] hover:not-disabled:text-[color:var(--ink)] hover:not-disabled:shadow-none hover:not-disabled:translate-y-0",
           variant === "outline" &&

src/components/ui/card.tsx

@@ -7,7 +7,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
       ref={ref}
       className={cn(
         // Matches .card
-        "flex w-full flex-col gap-3 rounded-[var(--radius-md)] border border-[color:var(--line)] bg-[color:var(--surface)] p-[22px] transition-all duration-200 ease-out",
+        "flex w-full flex-col gap-3 rounded-[var(--radius-md)] border border-[color:var(--line)] bg-[color:var(--surface)] p-space-5 transition-all duration-200 ease-out",
         className,
       )}
       {...props}

src/components/ui/dialog.tsx

@@ -16,7 +16,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       // Matches .report-dialog-backdrop
-      "fixed inset-0 z-80 grid place-items-center bg-[rgba(21,24,35,0.42)] p-5 backdrop-blur-[3px]",
+      "fixed inset-0 z-80 grid place-items-center bg-overlay-bg p-5 backdrop-blur-[3px]",
       "data-[state=open]:animate-in data-[state=open]:fade-in-0",
       "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
       className,
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         // Matches .report-dialog
-        "fixed top-1/2 left-1/2 z-80 grid w-[min(100%,560px)] -translate-x-1/2 -translate-y-1/2 gap-3 rounded-[var(--radius-md)] border border-[color:var(--line)] bg-[color:var(--surface)] p-5 shadow-[0_24px_50px_rgba(18,22,34,0.24)]",
+        "fixed top-1/2 left-1/2 z-80 grid w-[min(100%,560px)] -translate-x-1/2 -translate-y-1/2 gap-3 rounded-[var(--radius-md)] border border-[color:var(--line)] bg-[color:var(--surface)] p-5 shadow-dialog",
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         className,

src/components/ui/dropdown-menu.tsx

@@ -18,7 +18,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[180px] rounded-xl border border-[color:var(--line)] bg-[color:var(--surface)] p-2 text-[color:var(--ink)] shadow-[var(--shadow)]",
+        "z-50 min-w-[180px] rounded-[var(--radius-md)] border border-[color:var(--line)] bg-[color:var(--surface)] p-2 text-[color:var(--ink)] shadow-[var(--shadow)]",
         className,
       )}
       {...props}
@@ -34,7 +34,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "flex cursor-pointer select-none items-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold text-[color:var(--ink)] outline-none transition-colors focus:bg-[color:var(--surface-muted)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "flex cursor-pointer select-none items-center gap-2 rounded-[var(--radius-sm)] px-3 py-2 text-sm font-semibold text-[color:var(--ink)] outline-none transition-colors focus:bg-[color:var(--surface-muted)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}

src/components/ui/input.tsx

@@ -7,16 +7,12 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
       ref={ref}
       type={type}
       className={cn(
-        // Base styles matching .form-input
-        "w-full min-h-[44px] rounded-[var(--radius-sm)] border px-3.5 py-[13px] text-[color:var(--ink)] transition-all duration-[180ms] ease-out",
-        "border-[rgba(29,59,78,0.22)] bg-[rgba(255,255,255,0.94)]",
-        "placeholder:text-[rgba(88,115,133,0.72)]",
-        // Focus styles matching .form-input:focus
-        "focus:outline-none focus:border-[color-mix(in_srgb,var(--accent)_70%,white)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--accent)_22%,transparent)]",
-        // Dark mode matching [data-theme="dark"] .form-input
-        "dark:border-[rgba(255,255,255,0.12)] dark:bg-[rgba(14,28,37,0.84)]",
-        "dark:placeholder:text-[rgba(184,205,216,0.68)]",
-        "dark:focus:border-[rgba(255,131,95,0.75)] dark:focus:shadow-[0_0_0_3px_rgba(255,131,95,0.2)]",
+        // Base styles
+        "w-full min-h-[44px] rounded-[var(--radius-sm)] border px-3.5 py-space-3 text-[color:var(--ink)] transition-all duration-[180ms] ease-out",
+        "border-input-border bg-input-bg",
+        "placeholder:text-input-placeholder",
+        // Focus
+        "focus:outline-none focus:border-input-focus-border focus:shadow-[0_0_0_3px_var(--input-focus-ring)]",
         // Disabled
         "disabled:cursor-not-allowed disabled:opacity-60",
         className,