resolve: marketplace UI overhaul

[BunsDev]

Summary

below is copypasta of PR from @vincentkoc #1507 (comment)
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	Apr 7, 2026 4:50am

[greptile-apps]

Greptile Summary

This PR delivers a large frontend-only marketplace UI overhaul (HuggingFace/npm-style) plus a convex/seedDemo.ts backend seeding file. The frontend changes are well-structured, but there are three policy violations introduced in the diff that should be resolved before merging.

• convex/seedDemo.ts adds 20 demo skills via a seed mutation, which AGENTS.md explicitly prohibits ("seed-only additions intended as published skills... must be uploaded/published via CLI").
• repairGlobalStats in the same file uses .filter() on the globalStats.key field instead of the available by_key index, causing a full table scan (CLAUDE.md rule).
• src/routes/skills/index.tsx subscribes to countPublicSkills via useQuery on a public browse page instead of the required ConvexHttpClient.query() one-shot pattern (CLAUDE.md rule)."

Confidence Score: 4/5

Not safe to merge as-is: the seed mutation directly violates an explicit AGENTS.md reject-on-sight rule, and two CLAUDE.md Convex performance rules are broken in new code.

Three P1 findings in changed files — one explicit policy violation (AGENTS.md seed rule) and two Convex performance rule breaches (.filter() without index, useQuery on a public listing page) — prevent a score of 5.

convex/seedDemo.ts (seed policy + table scan), src/routes/skills/index.tsx (reactive subscription on browse page)

Prompt To Fix All With AI

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

Comment:
**Seed mutation adds skills directly — violates AGENTS.md policy**

`AGENTS.md` explicitly states: *"Reject PRs that add skills into source code/repo content directly (for example under `skills/` or seed-only additions intended as published skills). Skills must be uploaded/published via CLI."* The 20 entries in `DEMO_SKILLS` are seeded as fully-formed public skill rows (with download counts, stars, digest entries, and publisher records) and will surface as real listings in the UI once `seedDemoSkills` runs. This is exactly the "seed-only additions intended as published skills" pattern the policy prohibits.

**Context Used:** AGENTS.md ([source](https://app.greptile.com/review/custom-context?memory=a1d58d20-b4dd-4cbb-973a-9fd7824e1921))

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: 358-363

Comment:
**`.filter()` on indexed `key` field — full table scan**

`globalStats` has a `by_key` index (confirmed in `schema.ts:1030`). CLAUDE.md requires `.withIndex()` instead of `.filter()` for indexed fields; `.filter()` reads every document in the table. Fix:

```suggestion
    const stats = await ctx.db
      .query("globalStats")
      .withIndex("by_key", (q) => q.eq("key", "default"))
      .first();
```

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: 66

Comment:
**`useQuery` on public browse page — use `ConvexHttpClient` instead**

CLAUDE.md states: *"For public listing/browse pages, use `ConvexHttpClient.query()` (one-shot fetch), not `useQuery`/`usePaginatedQuery` (reactive subscription)."* The skill count badge doesn't need live updates and opens an unnecessary reactive subscription that widens the invalidation scope. Replace with `convexHttp.query(api.skills.countPublicSkills, {})` inside a `useEffect`, matching the pattern already used in `src/routes/index.tsx`.

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/lib/useUnifiedSearch.ts
Line: 67-71

Comment:
**3-tuple type annotated but only 2 elements initialised**

The type annotation declares a 3-element tuple but the initializer supplies only `[null, null]`. TypeScript strict mode raises a type error here because the third slot is missing. The third element is later assigned via index-2 access (which works at runtime but is type-unsound). Initialise all three slots:

```suggestion
          const promises: [
            Promise<unknown> | null,
            Promise<{ items: PackageListItem[] }> | null,
            Promise<{ items: PublicUser[] }> | null,
          ] = [null, null, null];
```

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

_{Reviews (1): Last reviewed commit: "fix: audit fixes — warm colors, lint, AR..." | Re-trigger Greptile}

[greptile-apps]

Seed mutation adds skills directly — violates AGENTS.md policy

AGENTS.md explicitly states: "Reject PRs that add skills into source code/repo content directly (for example under skills/ or seed-only additions intended as published skills). Skills must be uploaded/published via CLI." The 20 entries in DEMO_SKILLS are seeded as fully-formed public skill rows (with download counts, stars, digest entries, and publisher records) and will surface as real listings in the UI once seedDemoSkills runs. This is exactly the "seed-only additions intended as published skills" pattern the policy prohibits.

Context Used: AGENTS.md (source)

Prompt To Fix With AI

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

Comment:
**Seed mutation adds skills directly — violates AGENTS.md policy**

`AGENTS.md` explicitly states: *"Reject PRs that add skills into source code/repo content directly (for example under `skills/` or seed-only additions intended as published skills). Skills must be uploaded/published via CLI."* The 20 entries in `DEMO_SKILLS` are seeded as fully-formed public skill rows (with download counts, stars, digest entries, and publisher records) and will surface as real listings in the UI once `seedDemoSkills` runs. This is exactly the "seed-only additions intended as published skills" pattern the policy prohibits.

**Context Used:** AGENTS.md ([source](https://app.greptile.com/review/custom-context?memory=a1d58d20-b4dd-4cbb-973a-9fd7824e1921))

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

[greptile-apps]

.filter() on indexed key field — full table scan

globalStats has a by_key index (confirmed in schema.ts:1030). CLAUDE.md requires .withIndex() instead of .filter() for indexed fields; .filter() reads every document in the table. Fix:

Suggested change

	const stats = await ctx.db
	.query("globalStats")
	.filter((q) => q.eq(q.field("key"), "default"))
	.first();
	if (stats) {
	const stats = await ctx.db
	.query("globalStats")
	.withIndex("by_key", (q) => q.eq("key", "default"))
	.first();

Prompt To Fix With AI

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

Comment:
**`.filter()` on indexed `key` field — full table scan**

`globalStats` has a `by_key` index (confirmed in `schema.ts:1030`). CLAUDE.md requires `.withIndex()` instead of `.filter()` for indexed fields; `.filter()` reads every document in the table. Fix:

```suggestion
    const stats = await ctx.db
      .query("globalStats")
      .withIndex("by_key", (q) => q.eq("key", "default"))
      .first();
```

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

[greptile-apps]

useQuery on public browse page — use ConvexHttpClient instead

CLAUDE.md states: "For public listing/browse pages, use ConvexHttpClient.query() (one-shot fetch), not useQuery/usePaginatedQuery (reactive subscription)." The skill count badge doesn't need live updates and opens an unnecessary reactive subscription that widens the invalidation scope. Replace with convexHttp.query(api.skills.countPublicSkills, {}) inside a useEffect, matching the pattern already used in src/routes/index.tsx.

Prompt To Fix With AI

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

Comment:
**`useQuery` on public browse page — use `ConvexHttpClient` instead**

CLAUDE.md states: *"For public listing/browse pages, use `ConvexHttpClient.query()` (one-shot fetch), not `useQuery`/`usePaginatedQuery` (reactive subscription)."* The skill count badge doesn't need live updates and opens an unnecessary reactive subscription that widens the invalidation scope. Replace with `convexHttp.query(api.skills.countPublicSkills, {})` inside a `useEffect`, matching the pattern already used in `src/routes/index.tsx`.

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

[greptile-apps]

3-tuple type annotated but only 2 elements initialised

The type annotation declares a 3-element tuple but the initializer supplies only [null, null]. TypeScript strict mode raises a type error here because the third slot is missing. The third element is later assigned via index-2 access (which works at runtime but is type-unsound). Initialise all three slots:

Suggested change

	const promises: [
	Promise<unknown> | null,
	Promise<{ items: PackageListItem[] }> | null,
	Promise<{ items: PublicUser[] }> | null,
	] = [null, null];
	const promises: [
	Promise<unknown> | null,
	Promise<{ items: PackageListItem[] }> | null,
	Promise<{ items: PublicUser[] }> | null,
	] = [null, null, null];

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/lib/useUnifiedSearch.ts
Line: 67-71

Comment:
**3-tuple type annotated but only 2 elements initialised**

The type annotation declares a 3-element tuple but the initializer supplies only `[null, null]`. TypeScript strict mode raises a type error here because the third slot is missing. The third element is later assigned via index-2 access (which works at runtime but is type-unsound). Initialise all three slots:

```suggestion
          const promises: [
            Promise<unknown> | null,
            Promise<{ items: PackageListItem[] }> | null,
            Promise<{ items: PublicUser[] }> | null,
          ] = [null, null, null];
```

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

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 051b1dafcd

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Use indexed exact-match in public user search

queryUsersForPublicList only ranks users from the most recent scanLimit rows (order("desc").take(...)), so once there are more users than that window, older accounts are never considered even for exact handle searches. This makes /users and unified search return false negatives for legitimate users who are outside the recent slice. The admin path already handles this by doing an indexed exact lookup first; the public path needs the same pattern to avoid dropping valid results.

Useful? React with 👍 / 👎.

[chatgpt-codex-connector]

Route soul-mode header searches to souls index

The navbar submit handler always navigates to /search, even when isSoulMode is true. In soul mode the UI prompts users to “Search souls…”, but /search is wired to unified skills/plugins/users results, so soul queries are sent to the wrong route and cannot return soul matches. This should branch to /souls (with its search params) in soul mode.

Useful? React with 👍 / 👎.

[vercel]

Suggested change

	] = [null, null];
	] = [null, null, null];

3-element tuple type initialized with only 2 elements [null, null] causing a TypeScript type error