Design system overhaul: unified tokens, component authority, standardized layout

.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

convex/users.ts

@@ -467,6 +467,41 @@ 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 skills = [];
+    let cursor: string | null = null;
+
+    for (;;) {
+      const page = await ctx.db
+        .query("skills")
+        .withIndex("by_owner", (q) => q.eq("ownerUserId", args.userId))
+        .paginate({ cursor, numItems: 100 });
+      skills.push(...page.page);
+      if (page.isDone) {
+        break;
+      }
+      cursor = page.continueCursor;
+    }
+
+    const active = skills.filter((s) => !s.softDeletedAt);
+    let totalStars = 0;
+    let totalDownloads = 0;
+    for (const s of active) {
+      totalStars += s.stats?.stars ?? 0;
+      totalDownloads += s.stats?.downloads ?? 0;
+    }
+
+    return {
+      publishedSkills: active.length,
+      totalStars,
+      totalDownloads,
+    };
+  },
+});
+
 export const getReservedHandleInternal = internalQuery({
   args: { handle: v.string() },
   handler: async (ctx, args) => {

src/__tests__/header.test.tsx

@@ -20,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", () => ({
@@ -125,5 +127,4 @@ describe("Header", () => {
     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,

src/__tests__/search-route.test.ts

@@ -1,5 +1,13 @@
 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: { validateSearch?: unknown; component?: unknown }) => ({
     __config: config,

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,

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),
 }));

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/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>.