feat: UI discovery hub overhaul

[vincentkoc]

Summary

Complete frontend rebuild of ClawHub into a marketplace-style discovery hub inspired by HuggingFace and npm. No backend changes.

• Two-row navigation with content type tabs, count badges, and inline search
• Home page discovery hub with trending, recently updated, staff picks, and category browsing
• Browse pages with faceted sidebar filters, sort options, list/card toggle, full-width search
• README-first detail pages with metadata sidebar (stats, download, tags, publisher)
• Unified search across skills + plugins with type tabs
• Design system tokens for spacing (8 values), typography (8 values), radius — renamed to --fs-* and --r-* to avoid Tailwind CSS v4 variable collision
• Flat, utilitarian visual style — killed gradients, decorative shadows, hover animations
• Complete markdown rendering — tables, blockquotes, lists, images, heading hierarchy with npm-style borders
• Seed data — 20 realistic demo skills with publishers and highlighted badges
• Dashboard welcome state for new users
• Multi-column footer with Browse/Publish/Community/Platform navigation

New components

• SkillListItem — compact HF-style row
• BrowseSidebar — faceted filter sidebar with proper ARIA
• SkillMetadataSidebar — detail page right sidebar
• useUnifiedSearch — parallel search hook
• timeAgo / categories — utilities

Test plan

• npx vite build — clean, no errors
• npx vitest run — 122 files, 915/915 tests passing
• Visual check: home page, /skills, /plugins, skill detail, /search, /dashboard
• Dark mode renders correctly
• Mobile responsive at 760px and 520px breakpoints
• Convex seed data populates correctly (bunx convex run seedDemo:seedDemoSkills)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clawhub	Ready	Preview, Comment	Apr 6, 2026 9:58pm

[greptile-apps]

Greptile Summary

This is a substantial frontend-only marketplace UI overhaul — new discovery hub home page, faceted browse sidebar, unified search page, and HuggingFace/npm-style list rows. All the home-page and Header data-fetching has been correctly migrated to convexHttp.query() one-shot calls, which aligns with the project's Convex performance rules for public listing pages.

Key issues found:

• convex/seedDemo.ts imports from _generated/server instead of convex/functions.ts — All three mutations (seedDemoSkills, repairGlobalStats, repairHighlightedBadges) bypass the wrapDB trigger layer. convex/functions.ts already exports a wrapped internalMutation; the import just needs to point there.

• activeCategory={undefined} is hardcoded in src/routes/skills/index.tsx — Category pills in the BrowseSidebar never reflect the active selection visually (or via aria-checked). Clicking a category correctly updates the search query, but the sidebar always shows "All" as active.

• repairGlobalStats does a full JS .filter() after .collect() — Reads every skillSearchDigest document, then filters by moderationStatus in JavaScript. As the catalog scales this will scan the entire table on each repair run, risking the 32K document read limit.

• Unused vi import in githubActionsOidc.test.ts — Minor lint warning under Biome/oxlint.

Confidence Score: 3/5

Safe to merge after fixing the internalMutation import in seedDemo.ts — the frontend changes are well-structured and the data-fetching patterns are correct.

Score lowered from 5 primarily due to the internalMutation import bypass — seeding through the unwrapped function skips trigger hooks that keep denormalized tables in sync, which could leave skillSearchDigest or stats rollups in a stale state after seeding. The activeCategory UI bug and full-table scan in the repair mutation are also genuine issues, though lower severity. Frontend changes are extensive but well-tested and follow project conventions.

convex/seedDemo.ts needs attention for the wrong import and the JS table-scan. src/routes/skills/index.tsx needs the activeCategory derivation fix.

Prompt To Fix All With AI

This is a comment left during a code review.
Path: convex/seedDemo.ts
Line: 3

Comment:
**Wrong import — bypasses trigger wrapping**

`internalMutation` is imported from `./_generated/server`, but `convex/functions.ts` exports a wrapped version that includes trigger/`wrapDB` context. Per the project's CLAUDE.md:

> All mutations import from `convex/functions.ts` (not `convex/_generated/server`) to get trigger wrapping.

`convex/functions.ts` line 380 confirms the wrapped export exists:
```ts
export const internalMutation = customMutation(rawInternalMutation, customCtx(triggers.wrapDB));
```

Seeding through the un-wrapped version means denormalized/trigger-synced tables (e.g. `skillSearchDigest` or stats rollups) won't be kept in sync if trigger handlers are registered on these tables.

```suggestion
import { internalMutation } from "./functions";
```

This applies to all three exported mutations in this file (`seedDemoSkills`, `repairGlobalStats`, `repairHighlightedBadges`).

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: src/routes/skills/index.tsx
Line: 134

Comment:
**`activeCategory` is hardcoded to `undefined` — category selection has no visual feedback**

`activeCategory={undefined}` is a constant, so the "All" radio option always renders with `aria-checked="true"` regardless of which category the user clicked. `handleCategoryChange` correctly updates the search query via `model.onQueryChange`, but there is no inverse mapping from the current `model.query` back to a category slug.

As a result: clicking "MCP Tools" sets the search query to `"mcp"` but the sidebar continues to show "All" as selected. This is both a broken ARIA state (`aria-checked` on the actual category button stays `false`) and a visual UX regression.

A minimal fix is to derive `activeCategory` from the current query:

```ts
const activeCategory = useMemo(() => {
  if (!model.query) return undefined;
  return (
    SKILL_CATEGORIES.find((c) =>
      c.keywords.some((k) => k === model.query.trim().toLowerCase()),
    )?.slug ?? undefined
  );
}, [model.query]);
```

Then pass `activeCategory={activeCategory}` to `<BrowseSidebar>`.

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: convex/seedDemo.ts
Line: 369-376

Comment:
**JS filtering after `.collect()` scans the full `skillSearchDigest` table**

The index query on `by_active_updated` already constrains `softDeletedAt === undefined`, so the additional `!d.softDeletedAt` JS check is redundant. More importantly, the `moderationStatus === "active"` condition is applied entirely in JavaScript after collecting all documents, which reads and bills for the full table. Per AGENTS.md:

> `.filter().collect()` without an index causes full table scans — every doc is read and billed.

Consider using a Convex `.filter()` call to push the predicate server-side:

```ts
const count = await ctx.db
  .query("skillSearchDigest")
  .withIndex("by_active_updated", (q) => q.eq("softDeletedAt", undefined))
  .filter((q) => q.eq(q.field("moderationStatus"), "active"))
  .collect()
  .then((r) => r.length);
```

Even as a repair utility this can time-out on large deployments and hits the 32K document read limit once the real catalog grows.

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: convex/lib/githubActionsOidc.test.ts
Line: 3

Comment:
**Unused `vi` import**

`vi` is imported from `vitest` but is never referenced in this file. This will cause a lint warning under the project's Biome / oxlint setup.

```suggestion
import { describe, expect, it } from "vitest";
```

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "feat: marketplace UI overhaul — HuggingF..." | Re-trigger Greptile}