Merge origin/staging into copilot/fix-unbounded-paginate-loop

Agent-Logs-Url: https://github.com/openclaw/clawhub/sessions/72334ac1-590a-44fc-81a4-d18a77b43f86

Co-authored-by: BunsDev <68980965+BunsDev@users.noreply.github.com>

AGENTS.md

@@ -95,3 +95,23 @@ When working on Convex code, **always read `convex/_generated/ai/guidelines.md`
 
 Convex agent skills for common tasks can be installed by running `npx convex ai-files install`.
 <!-- convex-ai-end -->
+
+## Stat Field Migration Rules
+
+The `skills` table maintains two parallel sets of stat fields as part of an in-progress field migration:
+
+| Legacy (nested, `@deprecated`) | Top-level (source of truth, indexable) |
+|---|---|
+| `stats.downloads` | `statsDownloads` |
+| `stats.stars` | `statsStars` |
+| `stats.installsCurrent` | `statsInstallsCurrent` |
+| `stats.installsAllTime` | `statsInstallsAllTime` |
+
+**Rules:**
+
+- **Always use `readCanonicalStat(skill, field)` (`convex/lib/skillStats.ts`) to read** any of the four migrated fields. It prefers the top-level field and falls back to the nested field for pre-migration documents. Never access `skill.stats.downloads` / `.stars` / `.installsCurrent` / `.installsAllTime` directly.
+- **Always use `applySkillStatDeltas()` to write** stat deltas. It writes both the top-level and nested fields in the same patch to keep them in sync.
+- **Both sets of fields must be written together** in any patch that touches stat values (see the return shape of `applySkillStatDeltas`).
+- **Nested-only reads are acceptable only for** `stats.comments` and `stats.versions` — no top-level field exists for these yet.
+- The four legacy nested fields are marked `@deprecated` in `statsValidator` (schema.ts). Any IDE access to `skill.stats.downloads` etc. will show a strikethrough warning — treat this as a signal to use `readCanonicalStat()` instead.
+- When adding new stat fields, follow the same dual-write pattern and add a cursor-based backfill mutation (see `backfillSkillStatFieldsInternal` for an example).

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Changed
 
 - Search: add CJK tokenization support (Chinese/Japanese/Korean) with Intl.Segmenter plus fallback behavior to improve skill query matching (#1596) (thanks @pq-dong).
+- Stats: centralize migrated skill stat fallback reads through `readCanonicalStat()` and add schema/agent guardrails to discourage direct legacy nested-field access (#1709) (thanks @momothemage).
 
 ### Fixes
 

README.md

@@ -10,7 +10,7 @@
   <a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge" alt="MIT License"></a>
 </p>
 
-ClawHub is the **public skill registry for Clawdbot**: publish, version, and search text-based agent skills (a `SKILL.md` plus supporting files).
+ClawHub is the **public skill registry for OpenClaw**: publish, version, and search text-based agent skills (a `SKILL.md` plus supporting files).
 It's designed for fast browsing + a CLI-friendly API, with moderation hooks and vector search.
 It also now exposes a native **OpenClaw package catalog** for code plugins and bundle plugins.
 

convex/lib/skillStats.ts

@@ -10,18 +10,34 @@ type SkillStatDeltas = {
   installsAllTime?: number;
 };
 
+/**
+ * Read the canonical value of a migrated stat field from a skill document.
+ *
+ * Top-level fields (`statsDownloads`, etc.) are the source of truth — they are
+ * indexable and kept up-to-date by the event pipeline. The nested `stats.*`
+ * fields are only used as a fallback for pre-migration documents where the
+ * top-level field is still `undefined`.
+ *
+ * All code that reads a migrated stat value should go through this function
+ * rather than accessing `skill.stats.*` directly.
+ */
+export function readCanonicalStat(
+  skill: Doc<"skills">,
+  field: "downloads" | "stars" | "installsCurrent" | "installsAllTime",
+): number {
+  const topLevelKey = `stats${field[0].toUpperCase()}${field.slice(1)}` as
+    | "statsDownloads"
+    | "statsStars"
+    | "statsInstallsCurrent"
+    | "statsInstallsAllTime";
+  return typeof skill[topLevelKey] === "number" ? skill[topLevelKey]! : (skill.stats[field] ?? 0);
+}
+
 export function applySkillStatDeltas(skill: Doc<"skills">, deltas: SkillStatDeltas) {
-  const currentDownloads =
-    typeof skill.statsDownloads === "number" ? skill.statsDownloads : skill.stats.downloads;
-  const currentStars = typeof skill.statsStars === "number" ? skill.statsStars : skill.stats.stars;
-  const currentInstallsCurrent =
-    typeof skill.statsInstallsCurrent === "number"
-      ? skill.statsInstallsCurrent
-      : (skill.stats.installsCurrent ?? 0);
-  const currentInstallsAllTime =
-    typeof skill.statsInstallsAllTime === "number"
-      ? skill.statsInstallsAllTime
-      : (skill.stats.installsAllTime ?? 0);
+  const currentDownloads = readCanonicalStat(skill, "downloads");
+  const currentStars = readCanonicalStat(skill, "stars");
+  const currentInstallsCurrent = readCanonicalStat(skill, "installsCurrent");
+  const currentInstallsAllTime = readCanonicalStat(skill, "installsAllTime");
 
   const currentComments = skill.stats.comments;
   const nextDownloads = Math.max(0, currentDownloads + (deltas.downloads ?? 0));

convex/maintenance.test.ts

@@ -7,6 +7,10 @@ vi.mock("./_generated/api", () => ({
       getSkillBackfillPageInternal: Symbol("getSkillBackfillPageInternal"),
       applySkillBackfillPatchInternal: Symbol("applySkillBackfillPatchInternal"),
       backfillSkillSummariesInternal: Symbol("backfillSkillSummariesInternal"),
+      getUserStatsBackfillPageInternal: Symbol("getUserStatsBackfillPageInternal"),
+      getUserOwnedSkillsBackfillPageInternal: Symbol("getUserOwnedSkillsBackfillPageInternal"),
+      applyUserStatsBackfillPatchInternal: Symbol("applyUserStatsBackfillPatchInternal"),
+      backfillUserStatsInternal: Symbol("backfillUserStatsInternal"),
       getSkillFingerprintBackfillPageInternal: Symbol("getSkillFingerprintBackfillPageInternal"),
       applySkillFingerprintBackfillPatchInternal: Symbol(
         "applySkillFingerprintBackfillPatchInternal",
@@ -36,6 +40,7 @@ const {
   backfillLatestVersionSummaryInternal,
   backfillSkillFingerprintsInternalHandler,
   backfillSkillSummariesInternalHandler,
+  backfillUserStatsInternalHandler,
   cleanupEmptySkillsInternalHandler,
   nominateEmptySkillSpammersInternalHandler,
   upsertSkillBadgeRecordInternal,
@@ -259,6 +264,63 @@ describe("maintenance backfill", () => {
     });
     expect(runAfter).not.toHaveBeenCalled();
   });
+
+  it("backfills denormalized user hover stats from indexed owner pages", async () => {
+    const runQuery = vi
+      .fn()
+      .mockResolvedValueOnce({
+        items: [{ _id: "users:1" }],
+        cursor: null,
+        isDone: true,
+      })
+      .mockResolvedValueOnce({
+        items: [
+          { stats: { stars: 4, downloads: 30 }, softDeletedAt: undefined },
+          { stats: { stars: 2, downloads: 10 }, softDeletedAt: 123 },
+          { stats: { stars: 1, downloads: 5 }, softDeletedAt: undefined },
+        ],
+        cursor: null,
+        isDone: true,
+      });
+    const runMutation = vi.fn().mockResolvedValue({ ok: true });
+
+    const result = await backfillUserStatsInternalHandler(
+      { runQuery, runMutation } as never,
+      { batchSize: 10, skillBatchSize: 50, maxBatches: 1 },
+    );
+
+    expect(result).toEqual({
+      ok: true,
+      stats: {
+        usersScanned: 1,
+        usersPatched: 1,
+      },
+      isDone: true,
+      cursor: null,
+    });
+    expect(runQuery).toHaveBeenNthCalledWith(1, internal.maintenance.getUserStatsBackfillPageInternal, {
+      cursor: undefined,
+      batchSize: 10,
+    });
+    expect(runQuery).toHaveBeenNthCalledWith(
+      2,
+      internal.maintenance.getUserOwnedSkillsBackfillPageInternal,
+      {
+        ownerUserId: "users:1",
+        cursor: undefined,
+        batchSize: 50,
+      },
+    );
+    expect(runMutation).toHaveBeenCalledWith(
+      internal.maintenance.applyUserStatsBackfillPatchInternal,
+      {
+        userId: "users:1",
+        publishedSkills: 2,
+        totalStars: 5,
+        totalDownloads: 35,
+      },
+    );
+  });
 });
 
 describe("maintenance badge denormalization", () => {

convex/maintenance.ts

@@ -36,6 +36,11 @@ type BackfillStats = {
   missingStorageBlob: number;
 };
 
+type UserStatsBackfillStats = {
+  usersScanned: number;
+  usersPatched: number;
+};
+
 type BackfillPageItem =
   | {
       kind: "ok";
@@ -57,6 +62,18 @@ type BackfillPageResult = {
   isDone: boolean;
 };
 
+type UserStatsBackfillPageResult = {
+  items: Array<Pick<Doc<"users">, "_id">>;
+  cursor: string | null;
+  isDone: boolean;
+};
+
+type UserOwnedSkillsBackfillPageResult = {
+  items: Array<Pick<Doc<"skills">, "stats" | "softDeletedAt">>;
+  cursor: string | null;
+  isDone: boolean;
+};
+
 export const getSkillBackfillPageInternal = internalQuery({
   args: {
     cursor: v.optional(v.string()),
@@ -136,6 +153,65 @@ export const applySkillBackfillPatchInternal = internalMutation({
   },
 });
 
+export const getUserStatsBackfillPageInternal = internalQuery({
+  args: {
+    cursor: v.optional(v.string()),
+    batchSize: v.optional(v.number()),
+  },
+  handler: async (ctx, args): Promise<UserStatsBackfillPageResult> => {
+    const batchSize = clampInt(args.batchSize ?? DEFAULT_BATCH_SIZE, 1, MAX_BATCH_SIZE);
+    const { page, isDone, continueCursor } = await ctx.db
+      .query("users")
+      .order("asc")
+      .paginate({ cursor: args.cursor ?? null, numItems: batchSize });
+    return {
+      items: page.map((user) => ({ _id: user._id })),
+      cursor: continueCursor,
+      isDone,
+    };
+  },
+});
+
+export const getUserOwnedSkillsBackfillPageInternal = internalQuery({
+  args: {
+    ownerUserId: v.id("users"),
+    cursor: v.optional(v.string()),
+    batchSize: v.optional(v.number()),
+  },
+  handler: async (ctx, args): Promise<UserOwnedSkillsBackfillPageResult> => {
+    const batchSize = clampInt(args.batchSize ?? DEFAULT_BATCH_SIZE, 1, MAX_BATCH_SIZE);
+    const { page, isDone, continueCursor } = await ctx.db
+      .query("skills")
+      .withIndex("by_owner", (q) => q.eq("ownerUserId", args.ownerUserId))
+      .paginate({ cursor: args.cursor ?? null, numItems: batchSize });
+    return {
+      items: page.map((skill) => ({
+        stats: skill.stats,
+        softDeletedAt: skill.softDeletedAt,
+      })),
+      cursor: continueCursor,
+      isDone,
+    };
+  },
+});
+
+export const applyUserStatsBackfillPatchInternal = internalMutation({
+  args: {
+    userId: v.id("users"),
+    publishedSkills: v.number(),
+    totalStars: v.number(),
+    totalDownloads: v.number(),
+  },
+  handler: async (ctx, args) => {
+    await ctx.db.patch(args.userId, {
+      publishedSkills: args.publishedSkills,
+      totalStars: args.totalStars,
+      totalDownloads: args.totalDownloads,
+    });
+    return { ok: true as const };
+  },
+});
+
 export type BackfillActionArgs = {
   dryRun?: boolean;
   batchSize?: number;
@@ -151,6 +227,20 @@ export type BackfillActionResult = {
   cursor: string | null;
 };
 
+export type UserStatsBackfillActionArgs = {
+  batchSize?: number;
+  skillBatchSize?: number;
+  maxBatches?: number;
+  cursor?: string;
+};
+
+export type UserStatsBackfillActionResult = {
+  ok: true;
+  stats: UserStatsBackfillStats;
+  isDone: boolean;
+  cursor: string | null;
+};
+
 export async function backfillSkillSummariesInternalHandler(
   ctx: ActionCtx,
   args: BackfillActionArgs,
@@ -246,6 +336,73 @@ export async function backfillSkillSummariesInternalHandler(
   return { ok: true as const, stats: totals, isDone, cursor };
 }
 
+export async function backfillUserStatsInternalHandler(
+  ctx: ActionCtx,
+  args: UserStatsBackfillActionArgs,
+): Promise<UserStatsBackfillActionResult> {
+  const batchSize = clampInt(args.batchSize ?? DEFAULT_BATCH_SIZE, 1, MAX_BATCH_SIZE);
+  const skillBatchSize = clampInt(args.skillBatchSize ?? DEFAULT_BATCH_SIZE, 1, MAX_BATCH_SIZE);
+  const maxBatches = clampInt(args.maxBatches ?? DEFAULT_MAX_BATCHES, 1, MAX_MAX_BATCHES);
+  const totals: UserStatsBackfillStats = {
+    usersScanned: 0,
+    usersPatched: 0,
+  };
+
+  let cursor: string | null = args.cursor ?? null;
+  let isDone = false;
+
+  for (let i = 0; i < maxBatches; i++) {
+    const page = (await ctx.runQuery(internal.maintenance.getUserStatsBackfillPageInternal, {
+      cursor: cursor ?? undefined,
+      batchSize,
+    })) as UserStatsBackfillPageResult;
+
+    cursor = page.cursor;
+    isDone = page.isDone;
+
+    for (const user of page.items) {
+      totals.usersScanned++;
+      let ownedSkillsCursor: string | null = null;
+      let userPublishedSkills = 0;
+      let userTotalStars = 0;
+      let userTotalDownloads = 0;
+
+      while (true) {
+        const skillPage = (await ctx.runQuery(
+          internal.maintenance.getUserOwnedSkillsBackfillPageInternal,
+          {
+            ownerUserId: user._id,
+            cursor: ownedSkillsCursor ?? undefined,
+            batchSize: skillBatchSize,
+          },
+        )) as UserOwnedSkillsBackfillPageResult;
+
+        for (const skill of skillPage.items) {
+          if (skill.softDeletedAt) continue;
+          userPublishedSkills += 1;
+          userTotalStars += skill.stats?.stars ?? 0;
+          userTotalDownloads += skill.stats?.downloads ?? 0;
+        }
+
+        if (skillPage.isDone) break;
+        ownedSkillsCursor = skillPage.cursor;
+      }
+
+      await ctx.runMutation(internal.maintenance.applyUserStatsBackfillPatchInternal, {
+        userId: user._id,
+        publishedSkills: userPublishedSkills,
+        totalStars: userTotalStars,
+        totalDownloads: userTotalDownloads,
+      });
+      totals.usersPatched++;
+    }
+
+    if (isDone) break;
+  }
+
+  return { ok: true as const, stats: totals, isDone, cursor };
+}
+
 export const backfillSkillSummariesInternal = internalAction({
   args: {
     dryRun: v.optional(v.boolean()),
@@ -257,6 +414,16 @@ export const backfillSkillSummariesInternal = internalAction({
   handler: backfillSkillSummariesInternalHandler,
 });
 
+export const backfillUserStatsInternal = internalAction({
+  args: {
+    batchSize: v.optional(v.number()),
+    skillBatchSize: v.optional(v.number()),
+    maxBatches: v.optional(v.number()),
+    cursor: v.optional(v.string()),
+  },
+  handler: backfillUserStatsInternalHandler,
+});
+
 export const backfillSkillSummaries: ReturnType<typeof action> = action({
   args: {
     dryRun: v.optional(v.boolean()),

convex/packages.ts

@@ -2146,9 +2146,9 @@ export const insertReleaseInternal = internalMutation({
     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;
+    const nextNameLabel = typeof args.name === "string" ? args.name : "<unknown>";
+    const nextRuntimeIdLabel = typeof args.runtimeId === "string" ? args.runtimeId : "<unknown>";
+    const nextVersionLabel = typeof args.version === "string" ? args.version : "<unknown>";
     if (existing) {
       const existingIsLegacyPersonalPackage =
         !existing.ownerPublisherId &&
@@ -2171,7 +2171,7 @@ export const insertReleaseInternal = internalMutation({
     }
     if (existing && existing.family !== args.family) {
       throw new ConvexError(
-        `Package "${nextName}" already exists as a ${existing.family}; family changes are not allowed`,
+        `Package "${nextNameLabel}" already exists as a ${existing.family}; family changes are not allowed`,
       );
     }
     if (
@@ -2182,7 +2182,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 "${nextNameLabel}" already exists with plugin id "${existing.runtimeId}"; runtime id changes are not allowed`,
       );
     }
     if (args.family === "code-plugin" && args.runtimeId) {
@@ -2191,7 +2191,7 @@ 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 "${nextRuntimeIdLabel}" is already claimed by another package`);
       }
     }
 
@@ -2228,7 +2228,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 ${nextVersionLabel} already exists`);
     }
     const priorReleases = existing
       ? await ctx.db

convex/schema.ts

@@ -95,10 +95,22 @@ const badgesValidator = v.optional(
   }),
 );
 
+/**
+ * Nested stat fields on the `skills` document.
+ *
+ * The four migrated fields below are kept for backward compatibility only.
+ * Always use the top-level fields (`statsDownloads`, `statsStars`,
+ * `statsInstallsCurrent`, `statsInstallsAllTime`) as the source of truth,
+ * and use `readCanonicalStat()` / `applySkillStatDeltas()` to read/write them.
+ */
 const statsValidator = v.object({
+  /** @deprecated Use top-level `statsDownloads` instead. */
   downloads: v.number(),
+  /** @deprecated Use top-level `statsInstallsCurrent` instead. */
   installsCurrent: v.optional(v.number()),
+  /** @deprecated Use top-level `statsInstallsAllTime` instead. */
   installsAllTime: v.optional(v.number()),
+  /** @deprecated Use top-level `statsStars` instead. */
   stars: v.number(),
   versions: v.number(),
   comments: v.number(),

convex/seedDemo.ts

@@ -1,419 +0,0 @@
-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/users.ts

@@ -467,7 +467,7 @@ export const getByHandle = query({
   },
 });
 
-/** Lightweight stats for user hover tooltips. Uses the skills by_owner index. */
+/** Lightweight stats for user hover tooltips from denormalized user counters. */
 export const getHoverStats = query({
   args: { userId: v.id("users") },
   handler: async (ctx, args) => {

e2e/mobile-skills.pw.test.ts

@@ -0,0 +1,135 @@
+import { expect, test } from "@playwright/test";
+import { expectHealthyPage, trackRuntimeErrors } from "./helpers/runtimeErrors";
+
+// Only run in mobile projects — skip on desktop
+test.beforeEach(({}, testInfo) => {
+  test.skip(
+    !testInfo.project.name.includes("mobile"),
+    "mobile-only test",
+  );
+});
+
+test("browse page has no horizontal overflow on mobile", async ({ page }) => {
+  const errors = trackRuntimeErrors(page);
+
+  await page.goto("/skills?sort=downloads", { waitUntil: "domcontentloaded" });
+  await expect(page.getByRole("heading", { name: /^Skills/ })).toBeVisible();
+  await expect(page.locator(".skill-card, .skill-list-item").first()).toBeVisible();
+
+  const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth);
+  const clientWidth = await page.evaluate(() => document.documentElement.clientWidth);
+  expect(scrollWidth).toBeLessThanOrEqual(clientWidth + 1);
+
+  await expectHealthyPage(page, errors);
+});
+
+test("browse sidebar toggle opens and closes filters", async ({ page }) => {
+  const errors = trackRuntimeErrors(page);
+
+  await page.goto("/skills?sort=downloads", { waitUntil: "domcontentloaded" });
+  await expect(page.getByRole("heading", { name: /^Skills/ })).toBeVisible();
+
+  const filterButton = page.getByRole("button", { name: "Toggle filters" });
+  await expect(filterButton).toBeVisible();
+
+  // Sidebar should be hidden initially
+  const sidebar = page.locator(".browse-sidebar");
+  await expect(sidebar).not.toBeVisible();
+
+  // Open sidebar
+  await filterButton.click();
+  await expect(sidebar).toBeVisible();
+
+  // Close sidebar
+  await filterButton.click();
+  await expect(sidebar).not.toBeVisible();
+
+  await expectHealthyPage(page, errors);
+});
+
+test("card grid fits within viewport on mobile", async ({ page }) => {
+  const errors = trackRuntimeErrors(page);
+
+  await page.goto("/skills?sort=downloads&view=cards", { waitUntil: "domcontentloaded" });
+  await expect(page.locator(".skill-card").first()).toBeVisible();
+
+  const card = page.locator(".skill-card").first();
+  const cardBox = await card.boundingBox();
+  const viewport = page.viewportSize()!;
+
+  // Card should not exceed viewport width
+  expect(cardBox!.width).toBeLessThanOrEqual(viewport.width);
+
+  await expectHealthyPage(page, errors);
+});
+
+test("skill detail page has no horizontal overflow on mobile", async ({ page, request }) => {
+  const errors = trackRuntimeErrors(page);
+
+  const response = await request.get("/api/v1/skills/gifgrep");
+  test.skip(!response.ok(), "gifgrep fixture missing");
+
+  const payload = (await response.json()) as {
+    owner?: { handle?: string | null };
+    skill?: { slug?: string | null; displayName?: string | null };
+  };
+  const ownerHandle = payload.owner?.handle?.trim();
+  const slug = payload.skill?.slug?.trim();
+  test.skip(!ownerHandle || !slug || !payload.skill?.displayName, "fixture missing owner handle, slug, or displayName");
+
+  await page.goto(`/${ownerHandle}/${slug}`, { waitUntil: "domcontentloaded" });
+  await expect(
+    page.getByRole("heading", { name: payload.skill!.displayName! }),
+  ).toBeVisible();
+
+  const scrollWidth = await page.evaluate(() => document.documentElement.scrollWidth);
+  const clientWidth = await page.evaluate(() => document.documentElement.clientWidth);
+  expect(scrollWidth).toBeLessThanOrEqual(clientWidth + 1);
+
+  await expectHealthyPage(page, errors);
+});
+
+test("detail tabs are scrollable and touch-friendly on mobile", async ({ page, request }) => {
+  const errors = trackRuntimeErrors(page);
+
+  const response = await request.get("/api/v1/skills/gifgrep");
+  test.skip(!response.ok(), "gifgrep fixture missing");
+
+  const payload = (await response.json()) as {
+    owner?: { handle?: string | null };
+    skill?: { slug?: string | null };
+  };
+  const ownerHandle = payload.owner?.handle?.trim();
+  const slug = payload.skill?.slug?.trim();
+  test.skip(!ownerHandle || !slug, "fixture missing");
+
+  await page.goto(`/${ownerHandle}/${slug}`, { waitUntil: "domcontentloaded" });
+
+  // All standard tabs should be accessible (even if scrolled)
+  for (const tabName of ["README", "Files", "Versions"]) {
+    const tab = page.getByRole("button", { name: tabName });
+    await tab.scrollIntoViewIfNeeded();
+    await expect(tab).toBeVisible();
+
+    // Touch target should be at least 44px
+    const box = await tab.boundingBox();
+    expect(box!.height).toBeGreaterThanOrEqual(44);
+  }
+
+  await expectHealthyPage(page, errors);
+});
+
+test("search input font size prevents iOS zoom", async ({ page }) => {
+  const errors = trackRuntimeErrors(page);
+
+  await page.goto("/skills?sort=downloads", { waitUntil: "domcontentloaded" });
+
+  const input = page.locator(".browse-search-input");
+  await expect(input).toBeVisible();
+
+  const fontSize = await input.evaluate((el) => getComputedStyle(el).fontSize);
+  // iOS Safari zooms the page when an input has font-size below 16px
+  expect(parseFloat(fontSize)).toBeGreaterThanOrEqual(16);
+
+  await expectHealthyPage(page, errors);
+});

playwright.config.ts

@@ -29,5 +29,13 @@ export default defineConfig({
       name: "chromium",
       use: { ...devices["Desktop Chrome"] },
     },
+    {
+      name: "mobile-chrome",
+      use: { ...devices["Pixel 7"] },
+    },
+    {
+      name: "mobile-safari",
+      use: { ...devices["iPhone 14"] },
+    },
   ],
 });

public/logo.svg

@@ -1,45 +0,0 @@
-<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>

public/manifest.json

@@ -21,5 +21,5 @@
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "background_color": "#0a0a0a"
 }

public/og.svg

@@ -1,98 +0,0 @@
-<svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="1200" y2="630" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#14110F"/>
-      <stop offset="0.55" stop-color="#1A1512"/>
-      <stop offset="1" stop-color="#14110F"/>
-    </linearGradient>
-
-    <radialGradient id="glowOrange" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(260 60) rotate(120) scale(520 420)">
-      <stop stop-color="#E86A47" stop-opacity="0.55"/>
-      <stop offset="1" stop-color="#E86A47" stop-opacity="0"/>
-    </radialGradient>
-
-    <radialGradient id="glowSea" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1050 120) rotate(140) scale(520 420)">
-      <stop stop-color="#4AD8B7" stop-opacity="0.35"/>
-      <stop offset="1" stop-color="#4AD8B7" stop-opacity="0"/>
-    </radialGradient>
-
-    <filter id="softBlur" x="-40%" y="-40%" width="180%" height="180%">
-      <feGaussianBlur stdDeviation="24"/>
-    </filter>
-
-    <filter id="cardShadow" x="-20%" y="-20%" width="140%" height="140%">
-      <feDropShadow dx="0" dy="18" stdDeviation="26" flood-color="#000000" flood-opacity="0.6"/>
-    </filter>
-
-    <linearGradient id="pill" x1="0" y1="0" x2="360" y2="0" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#E86A47" stop-opacity="0.22"/>
-      <stop offset="1" stop-color="#E86A47" stop-opacity="0.08"/>
-    </linearGradient>
-
-    <linearGradient id="stroke" x1="0" y1="0" x2="0" y2="1">
-      <stop stop-color="#FFFFFF" stop-opacity="0.16"/>
-      <stop offset="1" stop-color="#FFFFFF" stop-opacity="0.06"/>
-    </linearGradient>
-  </defs>
-
-  <!-- Background -->
-  <rect width="1200" height="630" fill="url(#bg)"/>
-  <circle cx="260" cy="60" r="520" fill="url(#glowOrange)" filter="url(#softBlur)"/>
-  <circle cx="1050" cy="120" r="520" fill="url(#glowSea)" filter="url(#softBlur)"/>
-
-  <!-- Subtle grain (very light) -->
-  <g opacity="0.08">
-    <path d="M0 84 C160 120 340 40 520 86 C700 132 820 210 1200 160" stroke="#FFFFFF" stroke-opacity="0.10" stroke-width="2"/>
-    <path d="M0 188 C220 240 360 160 560 204 C760 248 900 330 1200 300" stroke="#FFFFFF" stroke-opacity="0.08" stroke-width="2"/>
-    <path d="M0 440 C240 380 420 520 620 470 C820 420 960 500 1200 460" stroke="#FFFFFF" stroke-opacity="0.06" stroke-width="2"/>
-  </g>
-
-  <!-- Right mark -->
-  <g opacity="0.22" filter="url(#softBlur)">
-    <image href="clawd-mark.png" x="740" y="70" width="560" height="560" preserveAspectRatio="xMidYMid meet"/>
-  </g>
-
-  <!-- Content card -->
-  <g filter="url(#cardShadow)">
-    <rect x="72" y="96" width="640" height="438" rx="34" fill="#201B18" fill-opacity="0.92" stroke="url(#stroke)"/>
-  </g>
-
-  <!-- Tiny mark -->
-  <image href="clawd-mark.png" x="108" y="134" width="46" height="46" preserveAspectRatio="xMidYMid meet"/>
-
-  <!-- Pill -->
-  <g>
-    <rect x="166" y="136" width="304" height="42" rx="21" fill="url(#pill)" stroke="#E86A47" stroke-opacity="0.28"/>
-    <text x="186" y="163"
-      fill="#F6EFE4"
-      font-size="18"
-      font-weight="600"
-      font-family="Bricolage Grotesque, Manrope, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif"
-      opacity="0.92">lobster-light. agent-right.</text>
-  </g>
-
-  <!-- Title -->
-  <text x="112" y="265"
-    fill="#F6EFE4"
-    font-size="92"
-    font-weight="700"
-    font-family="Bricolage Grotesque, Manrope, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif">ClawHub</text>
-
-  <!-- Subtitle -->
-  <text x="114" y="332"
-    fill="#C6B8A8"
-    font-size="23"
-    font-weight="500"
-    font-family="Manrope, Bricolage Grotesque, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif">
-    a fast skill registry for agents, with vector search.
-  </text>
-
-  <!-- Accent line + hint -->
-  <rect x="114" y="372" width="110" height="6" rx="3" fill="#E86A47"/>
-  <text x="114" y="430"
-    fill="#F6EFE4"
-    font-size="20"
-    font-weight="600"
-    opacity="0.90"
-    font-family="IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace">clawhub.ai</text>
-</svg>

scripts/copy-og-assets.ts

@@ -1,6 +1,39 @@
-import { copyFile, mkdir } from "node:fs/promises";
+import { copyFile, mkdir, stat } from "node:fs/promises";
 import path from "node:path";
 
+async function resolveExistingPath(candidates: string[]) {
+  for (const candidate of candidates) {
+    try {
+      await stat(candidate);
+      return candidate;
+    } catch {
+      // Try next candidate.
+    }
+  }
+
+  throw new Error(`Missing required asset. Tried: ${candidates.join(", ")}`);
+}
+
+function nodeModuleCandidates(relativePath: string) {
+  return [
+    path.resolve(`node_modules/${relativePath}`),
+    path.resolve(`../../node_modules/${relativePath}`),
+  ];
+}
+
+const resvgWasmSource = await resolveExistingPath(
+  nodeModuleCandidates("@resvg/resvg-wasm/index_bg.wasm"),
+);
+const bricolage800Source = await resolveExistingPath(
+  nodeModuleCandidates("@fontsource/bricolage-grotesque/files/bricolage-grotesque-latin-800-normal.woff2"),
+);
+const bricolage500Source = await resolveExistingPath(
+  nodeModuleCandidates("@fontsource/bricolage-grotesque/files/bricolage-grotesque-latin-500-normal.woff2"),
+);
+const ibmPlex500Source = await resolveExistingPath(
+  nodeModuleCandidates("@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-500-normal.woff2"),
+);
+
 const copies = [
   {
     source: path.resolve("public/clawd-mark.png"),
@@ -12,7 +45,7 @@ const copies = [
     ],
   },
   {
-    source: path.resolve("node_modules/@resvg/resvg-wasm/index_bg.wasm"),
+    source: resvgWasmSource,
     targets: [
       path.resolve(".output/server/node_modules/@resvg/resvg-wasm/index_bg.wasm"),
       path.resolve(
@@ -21,9 +54,7 @@ const copies = [
     ],
   },
   {
-    source: path.resolve(
-      "node_modules/@fontsource/bricolage-grotesque/files/bricolage-grotesque-latin-800-normal.woff2",
-    ),
+    source: bricolage800Source,
     targets: [
       path.resolve(
         ".output/server/node_modules/@fontsource/bricolage-grotesque/files/bricolage-grotesque-latin-800-normal.woff2",
@@ -34,9 +65,7 @@ const copies = [
     ],
   },
   {
-    source: path.resolve(
-      "node_modules/@fontsource/bricolage-grotesque/files/bricolage-grotesque-latin-500-normal.woff2",
-    ),
+    source: bricolage500Source,
     targets: [
       path.resolve(
         ".output/server/node_modules/@fontsource/bricolage-grotesque/files/bricolage-grotesque-latin-500-normal.woff2",
@@ -47,9 +76,7 @@ const copies = [
     ],
   },
   {
-    source: path.resolve(
-      "node_modules/@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-500-normal.woff2",
-    ),
+    source: ibmPlex500Source,
     targets: [
       path.resolve(
         ".output/server/node_modules/@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-500-normal.woff2",

src/__tests__/about-inline-code.test.tsx

@@ -0,0 +1,51 @@
+/* @vitest-environment jsdom */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { renderWithInlineCode } from "../routes/about";
+
+function renderToContainer(text: string) {
+  const { container } = render(<p>{renderWithInlineCode(text)}</p>);
+  return container.querySelector("p")!;
+}
+
+describe("renderWithInlineCode", () => {
+  it("returns plain text unchanged when no backticks present", () => {
+    const el = renderToContainer("No code here.");
+    expect(el.textContent).toBe("No code here.");
+    expect(el.querySelectorAll("code")).toHaveLength(0);
+  });
+
+  it("wraps backtick-delimited text in <code> elements", () => {
+    const el = renderToContainer("Run `curl | sh` to install.");
+    const codes = el.querySelectorAll("code");
+    expect(codes).toHaveLength(1);
+    expect(codes[0].textContent).toBe("curl | sh");
+    expect(codes[0].className).toBe("about-inline-code");
+    expect(el.textContent).toBe("Run curl | sh to install.");
+  });
+
+  it("handles multiple code spans in a single string", () => {
+    const el = renderToContainer(
+      "Use `curl | sh` or `npx @latest` for setup."
+    );
+    const codes = el.querySelectorAll("code");
+    expect(codes).toHaveLength(2);
+    expect(codes[0].textContent).toBe("curl | sh");
+    expect(codes[1].textContent).toBe("npx @latest");
+  });
+
+  it("handles empty input string", () => {
+    const el = renderToContainer("");
+    expect(el.textContent).toBe("");
+    expect(el.querySelectorAll("code")).toHaveLength(0);
+  });
+
+  it("handles string that is only a code span", () => {
+    const el = renderToContainer("`only-code`");
+    const codes = el.querySelectorAll("code");
+    expect(codes).toHaveLength(1);
+    expect(codes[0].textContent).toBe("only-code");
+    expect(el.textContent).toBe("only-code");
+  });
+});

src/__tests__/header.test.tsx

@@ -6,6 +6,7 @@ import { describe, expect, it, vi } from "vitest";
 import Header from "../components/Header";
 
 const siteModeMock = vi.fn(() => "souls");
+const navigateMock = vi.fn();
 
 vi.mock("@tanstack/react-router", () => ({
   Link: (props: {
@@ -19,7 +20,7 @@ vi.mock("@tanstack/react-router", () => ({
     </a>
   ),
   useLocation: () => ({ pathname: "/" }),
-  useNavigate: () => vi.fn(),
+  useNavigate: () => navigateMock,
 }));
 
 vi.mock("@convex-dev/auth/react", () => ({
@@ -89,16 +90,26 @@ vi.mock("../lib/gravatar", () => ({
 }));
 
 vi.mock("../components/ui/dropdown-menu", () => ({
-  DropdownMenu: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  DropdownMenuContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  DropdownMenuItem: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  DropdownMenu: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuContent: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuItem: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
   DropdownMenuSeparator: () => <hr />,
-  DropdownMenuTrigger: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  DropdownMenuTrigger: ({ children }: { children: ReactNode }) => (
+    <div>{children}</div>
+  ),
 }));
 
 vi.mock("../components/ui/toggle-group", () => ({
   ToggleGroup: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  ToggleGroupItem: ({ children }: { children: ReactNode }) => <button type="button">{children}</button>,
+  ToggleGroupItem: ({ children }: { children: ReactNode }) => (
+    <button type="button">{children}</button>
+  ),
 }));
 
 describe("Header", () => {
@@ -117,27 +128,61 @@ describe("Header", () => {
 
     render(<Header />);
 
-    expect(screen.getByText("Theme")).toBeTruthy();
-    expect(screen.getByRole("button", { name: "Claw" })).toBeTruthy();
-    expect(screen.getByRole("button", { name: "Hub" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: /Cycle theme mode/i })).toBeTruthy();
     expect(screen.getAllByText("Skills")).toHaveLength(1);
-    expect(screen.getAllByText("Souls")).toHaveLength(1);
     expect(screen.getAllByText("Users")).toHaveLength(1);
     expect(screen.getByPlaceholderText("Search skills, plugins, users")).toBeTruthy();
 
-    fireEvent.click(screen.getByRole("button", { name: "Hub" }));
-    expect(setThemeMock).toHaveBeenCalledWith("hub");
-
-    fireEvent.click(screen.getByRole("button", { name: /Cycle theme family/i }));
-    expect(setThemeMock).toHaveBeenCalledWith("claw");
-
     fireEvent.click(screen.getByRole("button", { name: /Cycle theme mode/i }));
     expect(setModeMock).toHaveBeenCalledWith("light");
 
     fireEvent.click(screen.getByRole("button", { name: "Open menu" }));
 
+    expect(screen.getAllByText("Home")).toHaveLength(1);
     expect(screen.getAllByText("Skills")).toHaveLength(2);
-    expect(screen.getAllByText("Souls")).toHaveLength(2);
     expect(screen.getAllByText("Users")).toHaveLength(2);
   });
+
+  it("shows Home above Skills in the mobile menu", () => {
+    siteModeMock.mockReturnValue("skills");
+
+    render(<Header />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Open menu" }));
+
+    expect(document.querySelector(".mobile-nav-brand-mark-image")).toBeTruthy();
+
+    const labels = Array.from(
+      document.querySelectorAll(".mobile-nav-section .mobile-nav-link"),
+    )
+      .map((element) => element.textContent?.trim())
+      .filter((label): label is string => Boolean(label));
+
+    expect(labels.slice(0, 2)).toEqual(["Home", "Skills"]);
+    expect(screen.getAllByText("Skills")).toHaveLength(2);
+    expect(screen.getAllByText("Users")).toHaveLength(2);
+  });
+
+  it("routes soul-mode header searches to the souls browse page", () => {
+    siteModeMock.mockReturnValue("souls");
+    navigateMock.mockReset();
+
+    render(<Header />);
+
+    fireEvent.change(screen.getByPlaceholderText("Search souls..."), {
+      target: { value: "angler" },
+    });
+    fireEvent.submit(screen.getByRole("search", { name: "Site search" }));
+
+    expect(navigateMock).toHaveBeenCalledWith({
+      to: "/souls",
+      search: {
+        q: "angler",
+        sort: undefined,
+        dir: undefined,
+        view: undefined,
+        focus: undefined,
+      },
+    });
+  });
 });

src/__tests__/packages-route.test.tsx

@@ -28,6 +28,7 @@ let loaderDataMock: {
   nextCursor: string | null;
   rateLimited: boolean;
   retryAfterSeconds: number | null;
+  apiError?: boolean;
 } = {
   items: [],
   nextCursor: null,
@@ -72,7 +73,13 @@ describe("plugins route", () => {
     isRateLimitedPackageApiErrorMock.mockClear();
     navigateMock.mockReset();
     searchMock = {};
-    loaderDataMock = { items: [], nextCursor: null, rateLimited: false, retryAfterSeconds: null };
+    loaderDataMock = {
+      items: [],
+      nextCursor: null,
+      rateLimited: false,
+      retryAfterSeconds: null,
+      apiError: false,
+    };
   });
 
   it("rejects skill family filter in search state", async () => {
@@ -223,6 +230,36 @@ describe("plugins route", () => {
       nextCursor: null,
       rateLimited: true,
       retryAfterSeconds: 22,
+      apiError: false,
+    });
+  });
+
+  it("flags API errors for filtered catalog requests", async () => {
+    fetchPluginCatalogMock.mockRejectedValue(new Error("boom"));
+    const route = await loadRoute();
+    const loader = route.__config.loader as (args: {
+      deps: Record<string, unknown>;
+    }) => Promise<{
+      items: Array<{ name: string }>;
+      nextCursor: string | null;
+      rateLimited: boolean;
+      retryAfterSeconds: number | null;
+      apiError?: boolean;
+    }>;
+
+    const result = await loader({
+      deps: {
+        q: "demo",
+        executesCode: true,
+      },
+    });
+
+    expect(result).toEqual({
+      items: [],
+      nextCursor: null,
+      rateLimited: false,
+      retryAfterSeconds: null,
+      apiError: true,
     });
   });
 

src/__tests__/search-route.test.tsx

@@ -0,0 +1,80 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import type { ComponentType, ReactNode } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const navigateMock = vi.fn();
+let searchMock: { q?: string; type?: "all" | "skills" | "plugins" | "users" } = {};
+
+vi.mock("@tanstack/react-router", () => ({
+  createFileRoute:
+    () =>
+    (config: { component?: unknown; validateSearch?: unknown }) => ({
+      __config: config,
+      useSearch: () => searchMock,
+    }),
+  useNavigate: () => navigateMock,
+}));
+
+vi.mock("../lib/useUnifiedSearch", () => ({
+  useUnifiedSearch: () => ({
+    results: [],
+    skillCount: 0,
+    pluginCount: 0,
+    userCount: 0,
+    isSearching: false,
+  }),
+}));
+
+vi.mock("../components/PluginListItem", () => ({
+  PluginListItem: ({ item }: { item: { name: string } }) => <div>{item.name}</div>,
+}));
+
+vi.mock("../components/SkillListItem", () => ({
+  SkillListItem: ({ skill }: { skill: { slug: string } }) => <div>{skill.slug}</div>,
+}));
+
+vi.mock("../components/UserListItem", () => ({
+  UserListItem: ({ user }: { user: { _id: string } }) => <div>{user._id}</div>,
+}));
+
+vi.mock("../components/ui/card", () => ({
+  Card: ({ children, className }: { children: ReactNode; className?: string }) => (
+    <div className={className}>{children}</div>
+  ),
+}));
+
+async function loadRoute() {
+  return (await import("../routes/search")).Route as unknown as {
+    __config: {
+      component?: ComponentType;
+    };
+  };
+}
+
+describe("search route", () => {
+  beforeEach(() => {
+    searchMock = { q: "first" };
+    navigateMock.mockReset();
+  });
+
+  it("keeps the input synced with query param changes while mounted", async () => {
+    const route = await loadRoute();
+    const Component = route.__config.component as ComponentType;
+    const rendered = render(<Component />);
+
+    const input = screen.getByPlaceholderText("Search skills, plugins, users...") as HTMLInputElement;
+    expect(input.value).toBe("first");
+
+    fireEvent.change(input, { target: { value: "draft" } });
+    expect(input.value).toBe("draft");
+
+    searchMock = { q: "second" };
+    rendered.rerender(<Component />);
+
+    expect(
+      (screen.getByPlaceholderText("Search skills, plugins, users...") as HTMLInputElement).value,
+    ).toBe("second");
+  });
+});

src/components/BrowseSidebar.tsx

@@ -4,9 +4,9 @@ import {
   MessageSquare,
   Package,
   Plug,
+  RefreshCw,
   Shield,
   Wrench,
-  Zap,
 } from "lucide-react";
 import type { SkillCategory } from "../lib/categories";
 
@@ -39,7 +39,7 @@ const CATEGORY_ICONS: Record<string, React.ReactNode> = {
   "dev-tools": <Wrench size={15} />,
   data: <Database size={15} />,
   security: <Shield size={15} />,
-  automation: <Zap size={15} />,
+  automation: <RefreshCw size={15} />,
   other: <Package size={15} />,
 };
 

src/components/Footer.tsx

@@ -1,13 +1,9 @@
 import { Link } from "@tanstack/react-router";
 import { FOOTER_NAV_SECTIONS } from "../lib/nav-items";
-import { getSiteName } from "../lib/site";
-
 export function Footer() {
-  const siteName = getSiteName();
   return (
     <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">
@@ -33,18 +29,6 @@ export function Footer() {
             </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>
   );

src/components/Header.tsx

@@ -97,8 +97,16 @@ export default function Header() {
     const q = navSearchQuery.trim();
     if (!q) return;
     void navigate({
-      to: "/search",
-      search: { q, type: undefined },
+      to: isSoulMode ? "/souls" : "/search",
+      search: isSoulMode
+        ? {
+            q,
+            sort: undefined,
+            dir: undefined,
+            view: undefined,
+            focus: undefined,
+          }
+        : { q, type: undefined },
     });
     setNavSearchQuery("");
     setMobileSearchOpen(false);
@@ -121,12 +129,29 @@ export default function Header() {
               </button>
               <SheetContent side="left" className="mobile-nav-sheet">
                 <SheetHeader className="pr-10">
-                  <SheetTitle>{siteName}</SheetTitle>
+                  <SheetTitle>
+                    <span className="mobile-nav-brand">
+                      <span className="mobile-nav-brand-mark" aria-hidden="true">
+                        <img
+                          src="/clawd-logo.png"
+                          alt=""
+                          aria-hidden="true"
+                          className="mobile-nav-brand-mark-image"
+                        />
+                      </span>
+                      <span className="mobile-nav-brand-name">{siteName}</span>
+                    </span>
+                  </SheetTitle>
                   <SheetDescription>
                     Browse sections, switch theme, and access account actions.
                   </SheetDescription>
                 </SheetHeader>
                 <div className="mobile-nav-section">
+                  <SheetClose asChild>
+                    <Link to="/" className="mobile-nav-link">
+                      Home
+                    </Link>
+                  </SheetClose>
                   {isSoulMode ? (
                     <SheetClose asChild>
                       <a href={clawHubUrl} className="mobile-nav-link">

src/components/SkillCommentsPanel.tsx

@@ -143,7 +143,7 @@ export function SkillCommentsPanel({ skillId, isAuthenticated, me }: SkillCommen
           comments.map((entry) => (
             <div
               key={entry.comment._id}
-              className="flex gap-3 rounded-[var(--radius-sm)] border border-[color:var(--line)] bg-[color:var(--surface)] p-3"
+              className="comment-entry flex gap-3 rounded-[var(--radius-sm)] border border-[color:var(--line)] bg-[color:var(--surface)] p-3"
             >
               <div className="flex min-w-0 flex-1 flex-col gap-1.5">
                 <strong className="text-sm">

src/components/SkillDiffCard.test.tsx

@@ -1,10 +1,13 @@
 /* @vitest-environment jsdom */
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { useEffect } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { Doc, Id } from "../../convex/_generated/dataModel";
 import { SkillDiffCard } from "./SkillDiffCard";
 
 const getFileTextMock = vi.fn();
+let diffEditorMounts = 0;
+let diffEditorUnmounts = 0;
 
 vi.mock("convex/react", () => ({
   useAction: () => getFileTextMock,
@@ -18,15 +21,37 @@ vi.mock("@monaco-editor/react", () => ({
     className?: string;
     options?: { renderSideBySide?: boolean; useInlineViewWhenSpaceIsLimited?: boolean };
   }) => (
+    <MockDiffEditor
+      className={className}
+      options={options}
+    />
+  ),
+  useMonaco: () => null,
+}));
+
+function MockDiffEditor({
+  className,
+  options,
+}: {
+  className?: string;
+  options?: { renderSideBySide?: boolean; useInlineViewWhenSpaceIsLimited?: boolean };
+}) {
+  useEffect(() => {
+    diffEditorMounts += 1;
+    return () => {
+      diffEditorUnmounts += 1;
+    };
+  }, []);
+
+  return (
     <div
       className={className}
       data-inline-fallback={String(options?.useInlineViewWhenSpaceIsLimited)}
       data-side-by-side={String(options?.renderSideBySide)}
       data-testid="diff-editor"
     />
-  ),
-  useMonaco: () => null,
-}));
+  );
+}
 
 function installMatchMedia(matches: boolean) {
   Object.defineProperty(window, "matchMedia", {
@@ -65,6 +90,8 @@ describe("SkillDiffCard", () => {
   beforeEach(() => {
     getFileTextMock.mockReset();
     getFileTextMock.mockResolvedValue({ text: "content" });
+    diffEditorMounts = 0;
+    diffEditorUnmounts = 0;
   });
 
   it("defaults to inline mode on narrow screens", async () => {
@@ -108,4 +135,34 @@ describe("SkillDiffCard", () => {
     });
     expect(screen.getByRole("button", { name: "Side-by-side" }).className).toContain("is-active");
   });
+
+  it("keeps the diff editor mounted when toggling view mode", async () => {
+    installMatchMedia(false);
+
+    render(
+      <SkillDiffCard
+        skill={skill}
+        versions={[
+          makeVersion("skillVersions:1", "1.0.1"),
+          makeVersion("skillVersions:2", "1.0.2"),
+        ]}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("diff-editor")).toBeTruthy();
+    });
+
+    expect(diffEditorMounts).toBe(1);
+    expect(diffEditorUnmounts).toBe(0);
+
+    fireEvent.click(screen.getByRole("button", { name: "Inline" }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("diff-editor").getAttribute("data-side-by-side")).toBe("false");
+    });
+
+    expect(diffEditorMounts).toBe(1);
+    expect(diffEditorUnmounts).toBe(0);
+  });
 });

src/components/SkillDiffCard.tsx

@@ -38,7 +38,7 @@ type SizeWarning = {
 };
 
 const EMPTY_DIFF_TEXT = "";
-const MOBILE_DIFF_BREAKPOINT = 860;
+const MOBILE_DIFF_BREAKPOINT = 768;
 
 function getDefaultViewMode() {
   if (typeof window === "undefined") return "split";
@@ -402,7 +402,6 @@ export function SkillDiffCard({ skill, versions, variant = "card" }: SkillDiffCa
           ) : (
             <ClientOnly fallback={<div className="diff-empty">Preparing diff…</div>}>
               <DiffEditor
-                key={`diff-${viewMode}`}
                 className={`diff-monaco diff-monaco-${viewMode}`}
                 original={leftText}
                 modified={rightText}

src/components/SkillHeader.tsx

@@ -7,6 +7,7 @@ import { formatCompactStat, formatSkillStatsTriplet } from "../lib/numberFormat"
 import type { PublicPublisher, PublicSkill } from "../lib/publicUser";
 
 import { type LlmAnalysis, SecurityScanResults } from "./SkillSecurityScanResults";
+import { SkillInstallCard } from "./SkillInstallCard";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
 import { UserBadge } from "./UserBadge";
@@ -110,8 +111,8 @@ export function SkillHeader({
   onTagSubmit,
   onTagDelete,
   tagVersions,
-  clawdis: _clawdis,
-  osLabels: _osLabels,
+  clawdis,
+  osLabels,
 }: SkillHeaderProps) {
   const formattedStats = formatSkillStatsTriplet(skill.stats);
   const suppressScanResults =
@@ -354,6 +355,7 @@ export function SkillHeader({
               ) : null}
             </div>
           ) : null}
+          <SkillInstallCard clawdis={clawdis} osLabels={osLabels} />
         </div>
 
         <div className="skill-tag-row">

src/components/ui/button.tsx

@@ -47,10 +47,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           variant === "outline" &&
             "border border-[color:var(--border-ui)] bg-transparent text-[color:var(--ink)] hover:not-disabled:border-[color:var(--border-ui-hover)] hover:not-disabled:bg-[color:var(--surface)]",
           // Size styles
-          size === "default" && "min-h-[44px] rounded-[var(--radius-pill)] px-4 py-[11px] text-sm",
-          size === "sm" && "min-h-[34px] rounded-[var(--radius-pill)] px-3 py-1.5 text-xs",
-          size === "lg" && "min-h-[52px] rounded-[var(--radius-pill)] px-6 py-3 text-base",
-          size === "icon" && "h-[44px] w-[44px] rounded-[var(--radius-pill)] p-0",
+          size === "default" && "min-h-[44px] rounded-[var(--r-btn)] px-4 py-[11px] text-sm",
+          size === "sm" && "min-h-[34px] rounded-[var(--r-btn)] px-3 py-1.5 text-xs",
+          size === "lg" && "min-h-[52px] rounded-[var(--r-btn)] px-6 py-3 text-base",
+          size === "icon" && "h-[44px] w-[44px] rounded-[var(--r-btn)] p-0",
           className,
         )}
         disabled={disabled || loading}

src/lib/nav-items.ts

@@ -83,7 +83,7 @@ export const PRIMARY_NAV_ITEMS: NavItem[] = [
     authRequired: false,
     staffOnly: false,
     soulModeOnly: false,
-    soulModeHide: true,
+    soulModeHide: false,
     activePathPrefixes: ["/plugin/"],
   },
   {
@@ -194,25 +194,18 @@ export const FOOTER_NAV_SECTIONS: FooterNavSection[] = [
           sourceRepo: undefined,
         },
       },
-      {
-        kind: "external",
-        label: "Documentation",
-        href: "https://github.com/openclaw/clawhub",
-      },
     ],
   },
   {
     title: "Community",
     items: [
       { kind: "external", label: "GitHub", href: "https://github.com/openclaw/clawhub" },
-      { kind: "link", label: "About", to: "/about" },
       { kind: "external", label: "OpenClaw", href: "https://openclaw.ai" },
     ],
   },
   {
     title: "Platform",
     items: [
-      { kind: "text", label: "MIT Licensed" },
       { kind: "external", label: "Deployed on Vercel", href: "https://vercel.com" },
       { kind: "external", label: "Powered by Convex", href: "https://www.convex.dev" },
     ],

src/lib/packageApi.ts

@@ -128,15 +128,36 @@ function normalizeApiPath(path: string) {
   return path.startsWith("/") ? path : `/${path}`;
 }
 
+function resolveAbsoluteBaseUrl(...candidates: Array<string | undefined>) {
+  for (const candidate of candidates) {
+    const value = candidate?.trim();
+    if (!value) continue;
+    try {
+      return new URL(value).toString();
+    } catch {
+      continue;
+    }
+  }
+  return null;
+}
+
 async function packageApiUrl(path: string) {
   const normalizedPath = normalizeApiPath(path);
   if (typeof window !== "undefined") {
     // In production, Vercel rewrites /api/* to the Convex site, so relative
     // paths work. In local dev, Nitro intercepts the request before Vite's
     // proxy, so we must use the Convex site URL directly.
-    const convexSiteUrl = getRuntimeEnv("VITE_CONVEX_SITE_URL");
-    if (convexSiteUrl && window.location.hostname === "localhost") {
-      return new URL(normalizedPath, convexSiteUrl);
+    const convexClientBaseUrl = resolveAbsoluteBaseUrl(
+      getRuntimeEnv("VITE_CONVEX_SITE_URL"),
+      getRuntimeEnv("VITE_CONVEX_URL"),
+    );
+    if (
+      convexClientBaseUrl &&
+      (window.location.hostname === "localhost" ||
+        window.location.hostname === "127.0.0.1" ||
+        window.location.hostname === "0.0.0.0")
+    ) {
+      return new URL(normalizedPath, convexClientBaseUrl);
     }
     return new URL(normalizedPath, window.location.origin);
   }
@@ -144,7 +165,11 @@ async function packageApiUrl(path: string) {
   // In production, Vercel rewrites /api/* but SSR loaders run server-side
   // where the rewrite doesn't apply. Using getRequestUrl() would loop back
   // into TanStack Start / Nitro, which rejects non-HTML requests.
-  const base = getRuntimeEnv("VITE_CONVEX_SITE_URL") ?? getRequiredRuntimeEnv("VITE_CONVEX_URL");
+  const base =
+    resolveAbsoluteBaseUrl(
+      getRuntimeEnv("VITE_CONVEX_SITE_URL"),
+      getRuntimeEnv("VITE_CONVEX_URL"),
+    ) ?? getRequiredRuntimeEnv("VITE_CONVEX_URL");
   return new URL(normalizedPath, base);
 }
 
@@ -277,51 +302,32 @@ export async function fetchPluginCatalog(params: {
   executesCode?: boolean;
   limit?: number;
 }): Promise<PluginCatalogResult> {
-  try {
-    if (params.family) {
-      const response = await fetchPackages({
-        q: params.q,
-        cursor: params.cursor,
-        family: params.family,
-        isOfficial: params.isOfficial,
-        executesCode: params.executesCode,
-        limit: params.limit,
-      });
-      if (hasOwnProperty(response, "results") && Array.isArray(response.results)) {
-        return {
-          items: response.results.map((entry) => entry?.package).filter(Boolean) as PackageListItem[],
-          nextCursor: null,
-        };
-      }
-
-      const browseResponse = response as PackageCatalogBrowseResponse;
+  if (params.family) {
+    const response = await fetchPackages({
+      q: params.q,
+      cursor: params.cursor,
+      family: params.family,
+      isOfficial: params.isOfficial,
+      executesCode: params.executesCode,
+      limit: params.limit,
+    });
+    if (hasOwnProperty(response, "results") && Array.isArray(response.results)) {
       return {
-        items: browseResponse?.items ?? [],
-        nextCursor: browseResponse?.nextCursor ?? null,
-      };
-    }
-
-    if (params.q?.trim()) {
-      const url = await packageApiUrl(`${ApiRoutes.plugins}/search`);
-      url.searchParams.set("q", params.q.trim());
-      if (typeof params.limit === "number") url.searchParams.set("limit", String(params.limit));
-      if (typeof params.isOfficial === "boolean") {
-        url.searchParams.set("isOfficial", String(params.isOfficial));
-      }
-      if (typeof params.executesCode === "boolean") {
-        url.searchParams.set("executesCode", String(params.executesCode));
-      }
-      const response = await fetchJson<{
-        results?: Array<{ score: number; package: PackageListItem }>;
-      }>(url);
-      return {
-        items: (response?.results ?? []).map((entry) => entry?.package).filter(Boolean) as PackageListItem[],
+        items: response.results.map((entry) => entry?.package).filter(Boolean) as PackageListItem[],
         nextCursor: null,
       };
     }
 
-    const url = await packageApiUrl(ApiRoutes.plugins);
-    if (params.cursor) url.searchParams.set("cursor", params.cursor);
+    const browseResponse = response as PackageCatalogBrowseResponse;
+    return {
+      items: browseResponse?.items ?? [],
+      nextCursor: browseResponse?.nextCursor ?? null,
+    };
+  }
+
+  if (params.q?.trim()) {
+    const url = await packageApiUrl(`${ApiRoutes.plugins}/search`);
+    url.searchParams.set("q", params.q.trim());
     if (typeof params.limit === "number") url.searchParams.set("limit", String(params.limit));
     if (typeof params.isOfficial === "boolean") {
       url.searchParams.set("isOfficial", String(params.isOfficial));
@@ -329,29 +335,39 @@ export async function fetchPluginCatalog(params: {
     if (typeof params.executesCode === "boolean") {
       url.searchParams.set("executesCode", String(params.executesCode));
     }
-    const result = await fetchJson<PluginCatalogResult>(url);
+    const response = await fetchJson<{
+      results?: Array<{ score: number; package: PackageListItem }>;
+    }>(url);
     return {
-      items: result?.items ?? [],
-      nextCursor: result?.nextCursor ?? null,
+      items: (response?.results ?? []).map((entry) => entry?.package).filter(Boolean) as PackageListItem[],
+      nextCursor: null,
     };
-  } catch {
-    // Return empty result on API error to prevent SSR crashes
-    return { items: [], nextCursor: null };
   }
+
+  const url = await packageApiUrl(ApiRoutes.plugins);
+  if (params.cursor) url.searchParams.set("cursor", params.cursor);
+  if (typeof params.limit === "number") url.searchParams.set("limit", String(params.limit));
+  if (typeof params.isOfficial === "boolean") {
+    url.searchParams.set("isOfficial", String(params.isOfficial));
+  }
+  if (typeof params.executesCode === "boolean") {
+    url.searchParams.set("executesCode", String(params.executesCode));
+  }
+  const result = await fetchJson<PluginCatalogResult>(url);
+  return {
+    items: result?.items ?? [],
+    nextCursor: result?.nextCursor ?? null,
+  };
 }
 
 export async function fetchPackageDetail(name: string): Promise<PackageDetailResponse> {
-  try {
-    const url = await packageApiUrl(`${ApiRoutes.packages}/${encodeURIComponent(name)}`);
-    const response = await packageFetch(url, "application/json");
-    if (response.status === 404 || !response.ok) {
-      return { package: null, owner: null };
-    }
-    return (await response.json()) as PackageDetailResponse;
-  } catch {
-    // Return empty result on API error to prevent SSR crashes
+  const url = await packageApiUrl(`${ApiRoutes.packages}/${encodeURIComponent(name)}`);
+  const response = await packageFetch(url, "application/json");
+  if (response.status === 404) {
     return { package: null, owner: null };
   }
+  if (!response.ok) throw await createPackageApiError(response);
+  return (await response.json()) as PackageDetailResponse;
 }
 
 export async function fetchPackageVersion(name: string, version: string): Promise<PackageVersionDetail | null> {
@@ -367,15 +383,13 @@ export async function fetchPackageVersion(name: string, version: string): Promis
 }
 
 export async function fetchPackageReadme(name: string, version?: string | null): Promise<string | null> {
-  try {
-    const url = await packageApiUrl(`${ApiRoutes.packages}/${encodeURIComponent(name)}/file`);
-    url.searchParams.set("path", "README.md");
-    if (version) url.searchParams.set("version", version);
-    const response = await packageFetch(url, "text/plain");
-    if (response.ok) return await response.text();
-    return null;
-  } catch {
-    // Return null on API error to prevent SSR crashes
+  const url = await packageApiUrl(`${ApiRoutes.packages}/${encodeURIComponent(name)}/file`);
+  url.searchParams.set("path", "README.md");
+  if (version) url.searchParams.set("version", version);
+  const response = await packageFetch(url, "text/plain");
+  if (response.ok) return await response.text();
+  if (response.status === 404 || response.status === 423) {
     return null;
   }
+  throw await createPackageApiError(response);
 }

src/lib/preferences.test.tsx

@@ -0,0 +1,121 @@
+/* @vitest-environment jsdom */
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it } from "vitest";
+import { usePreferences, getStoredPreferencesSnapshot } from "./preferences";
+
+const PREFERENCES_KEY = "clawhub-preferences";
+
+function PreferencesProbe() {
+  const { preferences, updatePreference, isAdvancedMode } = usePreferences();
+
+  return (
+    <div>
+      <div data-testid="density">{preferences.layoutDensity}</div>
+      <div data-testid="advanced">{String(isAdvancedMode)}</div>
+      <button
+        type="button"
+        onClick={() => updatePreference("advancedMode", !preferences.advancedMode)}
+      >
+        Toggle advanced
+      </button>
+    </div>
+  );
+}
+
+describe("preferences store", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it("returns a stable snapshot when storage has not changed", () => {
+    const first = getStoredPreferencesSnapshot();
+    const second = getStoredPreferencesSnapshot();
+
+    expect(first).toBe(second);
+    expect(first.layoutDensity).toBe("comfortable");
+  });
+
+  it("falls back to defaults when localStorage reads throw", () => {
+    const getItemSpy = vi
+      .spyOn(Storage.prototype, "getItem")
+      .mockImplementation(() => {
+        throw new DOMException("blocked", "SecurityError");
+      });
+
+    render(<PreferencesProbe />);
+
+    expect(screen.getByTestId("density").textContent).toBe("comfortable");
+    expect(screen.getByTestId("advanced").textContent).toBe("false");
+
+    getItemSpy.mockRestore();
+  });
+
+  it("resets to defaults when the preference key is cleared in another tab", () => {
+    window.localStorage.setItem(
+      PREFERENCES_KEY,
+      JSON.stringify({
+        advancedMode: true,
+        layoutDensity: "compact",
+      }),
+    );
+
+    render(<PreferencesProbe />);
+    expect(screen.getByTestId("advanced").textContent).toBe("true");
+    expect(screen.getByTestId("density").textContent).toBe("compact");
+
+    window.localStorage.removeItem(PREFERENCES_KEY);
+    act(() => {
+      const event = Object.assign(new Event("storage"), {
+        key: PREFERENCES_KEY,
+        newValue: null,
+        oldValue: JSON.stringify({
+          advancedMode: true,
+          layoutDensity: "compact",
+        }),
+        storageArea: window.localStorage,
+      });
+      window.dispatchEvent(event);
+    });
+
+    expect(screen.getByTestId("advanced").textContent).toBe("false");
+    expect(screen.getByTestId("density").textContent).toBe("comfortable");
+  });
+
+  it("re-renders cleanly after a preference update", () => {
+    window.localStorage.setItem(
+      PREFERENCES_KEY,
+      JSON.stringify({
+        advancedMode: false,
+      }),
+    );
+
+    render(<PreferencesProbe />);
+
+    expect(screen.getByTestId("advanced").textContent).toBe("false");
+
+    fireEvent.click(screen.getByRole("button", { name: /toggle advanced/i }));
+
+    expect(screen.getByTestId("advanced").textContent).toBe("true");
+    expect(JSON.parse(window.localStorage.getItem(PREFERENCES_KEY) ?? "{}")).toMatchObject({
+      advancedMode: true,
+    });
+  });
+
+  it("does not cache a preference change when storage writes fail", () => {
+    const setItemSpy = vi
+      .spyOn(Storage.prototype, "setItem")
+      .mockImplementation(() => {
+        throw new DOMException("quota", "QuotaExceededError");
+      });
+
+    render(<PreferencesProbe />);
+    expect(screen.getByTestId("advanced").textContent).toBe("false");
+
+    fireEvent.click(screen.getByRole("button", { name: /toggle advanced/i }));
+
+    expect(screen.getByTestId("advanced").textContent).toBe("false");
+    expect(window.localStorage.getItem(PREFERENCES_KEY)).toBeNull();
+
+    setItemSpy.mockRestore();
+  });
+});

src/lib/preferences.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useSyncExternalStore } from "react";
 
 const PREFERENCES_KEY = "clawhub-preferences";
 
@@ -66,36 +66,95 @@ const defaultPreferences: UserPreferences = {
 
 // Simple event emitter for cross-tab sync
 const listeners = new Set<() => void>();
+let cachedPreferencesRaw: string | null = null;
+let cachedPreferencesSnapshot: UserPreferences = defaultPreferences;
+let hasCachedPreferences = false;
+let removeStorageListener: (() => void) | null = null;
+
+function normalizePreferences(parsed: Partial<UserPreferences> | null): UserPreferences {
+  if (!parsed) return defaultPreferences;
+  return { ...defaultPreferences, ...parsed };
+}
+
+function parsePreferences(raw: string | null): UserPreferences {
+  if (!raw) return defaultPreferences;
+  try {
+    const parsed = JSON.parse(raw) as Partial<UserPreferences>;
+    return normalizePreferences(parsed);
+  } catch {
+    return defaultPreferences;
+  }
+}
+
+function readStoredPreferences(): UserPreferences {
+  if (typeof window === "undefined") return defaultPreferences;
+
+  try {
+    const stored = window.localStorage.getItem(PREFERENCES_KEY);
+    if (hasCachedPreferences && stored === cachedPreferencesRaw) {
+      return cachedPreferencesSnapshot;
+    }
+
+    cachedPreferencesRaw = stored;
+    cachedPreferencesSnapshot = parsePreferences(stored);
+    hasCachedPreferences = true;
+    return cachedPreferencesSnapshot;
+  } catch {
+    cachedPreferencesRaw = null;
+    cachedPreferencesSnapshot = defaultPreferences;
+    hasCachedPreferences = true;
+    return cachedPreferencesSnapshot;
+  }
+}
 
 function subscribe(listener: () => void) {
   listeners.add(listener);
-  return () => listeners.delete(listener);
+
+  if (typeof window !== "undefined" && !removeStorageListener) {
+    const handleStorage = (event: StorageEvent) => {
+      if (event.storageArea !== window.localStorage || event.key !== PREFERENCES_KEY) {
+        return;
+      }
+
+      cachedPreferencesRaw = event.newValue;
+      cachedPreferencesSnapshot = parsePreferences(event.newValue);
+      hasCachedPreferences = true;
+      notifyListeners();
+    };
+
+    window.addEventListener("storage", handleStorage);
+    removeStorageListener = () => {
+      window.removeEventListener("storage", handleStorage);
+      removeStorageListener = null;
+    };
+  }
+
+  return () => {
+    listeners.delete(listener);
+
+    if (listeners.size === 0 && removeStorageListener) {
+      removeStorageListener();
+    }
+  };
 }
 
 function notifyListeners() {
   listeners.forEach((listener) => listener());
 }
 
-function getStoredPreferences(): UserPreferences {
-  if (typeof window === "undefined") return defaultPreferences;
-  try {
-    const stored = window.localStorage.getItem(PREFERENCES_KEY);
-    if (!stored) return defaultPreferences;
-    const parsed = JSON.parse(stored) as Partial<UserPreferences>;
-    return { ...defaultPreferences, ...parsed };
-  } catch {
-    return defaultPreferences;
-  }
-}
-
 function savePreferences(prefs: UserPreferences) {
   if (typeof window === "undefined") return;
   try {
-    window.localStorage.setItem(PREFERENCES_KEY, JSON.stringify(prefs));
-    notifyListeners();
+    const serialized = JSON.stringify(prefs);
+    window.localStorage.setItem(PREFERENCES_KEY, serialized);
+    cachedPreferencesRaw = serialized;
+    cachedPreferencesSnapshot = prefs;
+    hasCachedPreferences = true;
   } catch {
     // Storage might be full or disabled
   }
+
+  notifyListeners();
 }
 
 // Server snapshot for SSR
@@ -106,7 +165,7 @@ function getServerSnapshot(): UserPreferences {
 export function usePreferences() {
   const preferences = useSyncExternalStore(
     subscribe,
-    getStoredPreferences,
+    readStoredPreferences,
     getServerSnapshot
   );
 
@@ -114,13 +173,13 @@ export function usePreferences() {
     key: K,
     value: UserPreferences[K]
   ) => {
-    const current = getStoredPreferences();
+    const current = readStoredPreferences();
     const updated = { ...current, [key]: value };
     savePreferences(updated);
   }, []);
 
   const updatePreferences = useCallback((updates: Partial<UserPreferences>) => {
-    const current = getStoredPreferences();
+    const current = readStoredPreferences();
     const updated = { ...current, ...updates };
     savePreferences(updated);
   }, []);
@@ -163,3 +222,4 @@ export function usePreferences() {
 }
 
 export { defaultPreferences };
+export { readStoredPreferences as getStoredPreferencesSnapshot };

src/routes/__root.tsx

@@ -97,11 +97,6 @@ export const Route = createRootRoute({
           href: "/favicon.ico",
           type: "image/x-icon",
         },
-        {
-          rel: "icon",
-          href: "/logo.svg",
-          type: "image/svg+xml",
-        },
         {
           rel: "apple-touch-icon",
           href: "/logo192.png",
@@ -122,6 +117,11 @@ function RootDocument({ children }: { children: React.ReactNode }) {
     <html lang="en">
       <head>
         <HeadContent />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var d=document.documentElement,s='clawhub-theme-selection',k='clawhub-theme',n='clawhub-theme-name',l='clawdhub-theme';var sel;try{var raw=localStorage.getItem(s);if(raw){sel=JSON.parse(raw)}}catch(e){}if(!sel){var m=localStorage.getItem(k),t=localStorage.getItem(n);if(m||t){sel={theme:t||'claw',mode:m||'system'}}else{var lg=localStorage.getItem(l);if(lg){var map={dark:'dark',light:'light',system:'system',defaultTheme:'dark',docsTheme:'light',lightTheme:'dark',landingTheme:'dark',newTheme:'dark',openknot:'dark',fieldmanual:'dark',clawdash:'light'};sel={theme:'claw',mode:map[lg]||'system'}}}}if(!sel)sel={theme:'claw',mode:'system'};var themes=['claw'],modes=['system','light','dark'];if(themes.indexOf(sel.theme)<0)sel.theme='claw';if(modes.indexOf(sel.mode)<0)sel.mode='system';var resolved=sel.mode==='system'?(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):sel.mode;d.dataset.theme=resolved;d.dataset.themeResolved=resolved;d.dataset.themeMode=sel.mode;d.dataset.themeFamily=sel.theme;if(resolved==='dark')d.classList.add('dark');else d.classList.remove('dark')}catch(e){}})()`,
+          }}
+        />
       </head>
       <body>
         <AppProviders>

src/routes/about.tsx

@@ -1,41 +1,72 @@
 import { createFileRoute, Link } from '@tanstack/react-router';
+import type { LucideIcon } from 'lucide-react';
+import {
+  Banknote,
+  Drama,
+  Eye,
+  EyeOff,
+  ImageOff,
+  ShieldOff,
+  UserX,
+} from 'lucide-react';
 import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
 import { getSiteMode, getSiteName, getSiteUrlForMode } from '../lib/site';
 
-const prohibitedCategories = [
+export function renderWithInlineCode(text: string): (string | JSX.Element)[] {
+  const parts = text.split(/(`[^`]+`)/g);
+  return parts.map((part, i) => {
+    if (part.startsWith('`') && part.endsWith('`')) {
+      return (
+        <code key={i} className="about-inline-code">
+          {part.slice(1, -1)}
+        </code>
+      );
+    }
+    return part;
+  });
+}
+
+const prohibitedCategories: { title: string; icon: LucideIcon; examples: string }[] = [
   {
     title: 'Bypass and unauthorized access',
+    icon: ShieldOff,
     examples:
       'Auth bypass, account takeover, CAPTCHA bypass, Cloudflare or anti-bot evasion, rate-limit bypass, reusable session theft, live call or agent takeover.',
   },
   {
     title: 'Platform abuse and ban evasion',
+    icon: UserX,
     examples:
       'Stealth accounts after bans, account warming/farming, fake engagement, multi-account automation, spam posting, marketplace or social automation built to avoid detection.',
   },
   {
     title: 'Fraud and deception',
+    icon: Banknote,
     examples:
       'Fake certificates, fake invoices, deceptive payment flows, fake social proof, scam outreach, or synthetic-identity workflows built to create accounts for fraud.',
   },
   {
     title: 'Privacy-invasive surveillance',
+    icon: Eye,
     examples:
       'Mass contact scraping for spam, doxxing, stalking, covert monitoring, biometric / face-matching workflows without clear consent, or buying, publishing, downloading, or operationalizing leaked data or breach dumps.',
   },
   {
     title: 'Non-consensual impersonation',
+    icon: Drama,
     examples:
       'Face swap, digital twins, cloned influencers, fake personas, or other identity manipulation used to impersonate or mislead.',
   },
   {
     title: 'Explicit sexual content',
+    icon: ImageOff,
     examples:
       'NSFW image, video, or text generation, especially wrappers around third-party APIs with safety checks disabled.',
   },
   {
     title: 'Hidden or misleading execution',
+    icon: EyeOff,
     examples:
       'Obfuscated install commands, `curl | sh`, undeclared secret requirements, undeclared private-key use, or remote `npx @latest` execution without reviewability.',
   },
@@ -112,18 +143,23 @@ function AboutPage() {
 
         <section className="about-panel about-panel-categories">
           <div className="home-section-header">
-            <h2 className="home-section-title">Immediate rejection categories</h2>
+            <h2 className="home-section-title">Rejection Categories</h2>
           </div>
           <div className="about-grid">
-            {prohibitedCategories.map((category, index) => (
-              <article
-                key={category.title}
-                className={`about-rule-card${index % 3 === 0 ? ' about-rule-card-featured' : ''}`}
-              >
-                <h2>{category.title}</h2>
-                <p>{category.examples}</p>
-              </article>
-            ))}
+            {prohibitedCategories.map((category) => {
+              const Icon = category.icon;
+              return (
+                <article key={category.title} className="about-rule-card">
+                  <div className="about-rule-card-header">
+                    <div className="about-rule-card-icon">
+                      <Icon size={18} />
+                    </div>
+                    <h3>{category.title}</h3>
+                  </div>
+                  <p>{renderWithInlineCode(category.examples)}</p>
+                </article>
+              );
+            })}
           </div>
         </section>
 

src/routes/index.tsx

@@ -1,25 +1,22 @@
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { useAction, useQuery } from "convex/react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   ArrowLeft,
   ArrowRight,
   ChevronRight,
   Code2,
   Download,
-  Layers,
+  Package,
   Search,
-  Shield,
   Star,
   Users,
-  Zap,
 } from "lucide-react";
 import { api } from "../../convex/_generated/api";
 import { SoulCard } from "../components/SoulCard";
 import { SoulStatsTripletLine } from "../components/SoulStats";
 import { convexHttp } from "../convex/client";
 import type { PublicSkill, PublicSoul, PublicUser } from "../lib/publicUser";
-import { FEATURE_SOULS } from "../lib/features";
 import { getSiteMode } from "../lib/site";
 
 export const Route = createFileRoute("/")({
@@ -31,6 +28,13 @@ function Home() {
   return mode === "souls" ? <OnlyCrabsHome /> : <SkillsHome />;
 }
 
+// ═══ Slot machine word pool (13 words = 1/13 jackpot odds) ═══
+const SLOT_WORDS = [
+  "Equip", "Install", "Unleash", "Ship", "Build",
+  "Create", "Deploy", "Launch", "Hack", "Scale",
+  "Forge", "Craft", "Wield",
+];
+
 function SkillsHome() {
   type SkillPageEntry = {
     skill: PublicSkill;
@@ -100,8 +104,263 @@ function SkillsHome() {
   // Build carousel cards from highlighted data
   const carouselCards = highlighted.length > 0 ? highlighted.slice(0, 6) : [];
 
+  // ═══ SLOT MACHINE EASTER EGG ═══
+  const HACK_INDEX = SLOT_WORDS.indexOf("Hack");
+  const clickTimesRef = useRef<number[]>([]);
+  const [slotState, setSlotState] = useState<
+    | null
+    | { phase: "spinning" }
+    | { phase: "stopped"; results: [number, number, number]; won: boolean; isHackJackpot: boolean }
+  >(null);
+  const slotTimersRef = useRef<ReturnType<typeof setTimeout>[]>([]);
+  const [slotReelOffsets, setSlotReelOffsets] = useState<[number, number, number]>([0, 0, 0]);
+  const [stoppedReels, setStoppedReels] = useState<Set<number>>(new Set());
+  const confettiRef = useRef<HTMLCanvasElement>(null);
+  const spinIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const cooldownUntilRef = useRef<number>(0);
+
+  // Clean up timers/intervals if the component unmounts mid-spin
+  useEffect(() => {
+    return () => {
+      for (const t of slotTimersRef.current) clearTimeout(t);
+      if (spinIntervalRef.current) clearInterval(spinIntervalRef.current);
+    };
+  }, []);
+
+  const triggerSlots = useCallback(() => {
+    // Clean up any previous timers
+    for (const t of slotTimersRef.current) clearTimeout(t);
+    slotTimersRef.current = [];
+    if (spinIntervalRef.current) clearInterval(spinIntervalRef.current);
+
+    setSlotState({ phase: "spinning" });
+    setStoppedReels(new Set());
+
+    // Controlled odds: ~1/25 any jackpot, ~1/100 Hack jackpot
+    let r0: number, r1: number, r2: number;
+    const isJackpot = Math.random() < 1 / 25;
+    if (isJackpot) {
+      // 25% of jackpots are Hack (1/25 × 1/4 = 1/100 overall)
+      const isHack = Math.random() < 0.25;
+      if (isHack) {
+        r0 = HACK_INDEX;
+      } else {
+        // Pick any word except Hack
+        let idx = Math.floor(Math.random() * (SLOT_WORDS.length - 1));
+        if (idx >= HACK_INDEX) idx++;
+        r0 = idx;
+      }
+      r1 = r0;
+      r2 = r0;
+    } else {
+      // Normal spin — re-roll if accidental triple match
+      do {
+        r0 = Math.floor(Math.random() * SLOT_WORDS.length);
+        r1 = Math.floor(Math.random() * SLOT_WORDS.length);
+        r2 = Math.floor(Math.random() * SLOT_WORDS.length);
+      } while (r0 === r1 && r1 === r2);
+    }
+    const results: [number, number, number] = [r0, r1, r2];
+    const landed = new Set<number>();
+
+    // Animate fast offset cycling — only cycle reels that haven't landed
+    let frame = 0;
+    const spinInterval = setInterval(() => {
+      frame++;
+      setSlotReelOffsets((prev) => [
+        landed.has(0) ? prev[0] : (frame * 3) % SLOT_WORDS.length,
+        landed.has(1) ? prev[1] : (frame * 5 + 4) % SLOT_WORDS.length,
+        landed.has(2) ? prev[2] : (frame * 7 + 9) % SLOT_WORDS.length,
+      ]);
+    }, 60);
+    spinIntervalRef.current = spinInterval;
+
+    // Stop reels sequentially with a satisfying stagger
+    const stopReel = (reelIdx: 0 | 1 | 2, delay: number) => {
+      const t = setTimeout(() => {
+        landed.add(reelIdx);
+        setStoppedReels((prev) => new Set(prev).add(reelIdx));
+        setSlotReelOffsets((prev) => {
+          const next = [...prev] as [number, number, number];
+          next[reelIdx] = results[reelIdx];
+          return next;
+        });
+      }, delay);
+      slotTimersRef.current.push(t);
+    };
+
+    stopReel(0, 1200);
+    stopReel(1, 1800);
+
+    const tFinal = setTimeout(() => {
+      clearInterval(spinInterval);
+      spinIntervalRef.current = null;
+      landed.add(2);
+      setStoppedReels(new Set([0, 1, 2]));
+      setSlotReelOffsets(results);
+      const won = r0 === r1 && r1 === r2;
+      const isHackJackpot = won && r0 === HACK_INDEX;
+      setSlotState({ phase: "stopped", results, won, isHackJackpot });
+      if (won) {
+        fireConfetti(isHackJackpot);
+      }
+      // Cooldown: 18s after win, 3s after loss
+      const displayTime = won ? 10000 : 2400;
+      const cooldownTime = won ? 18000 : 3000;
+      cooldownUntilRef.current = Date.now() + cooldownTime;
+      const tReset = setTimeout(() => {
+        setSlotState(null);
+        setStoppedReels(new Set());
+      }, displayTime);
+      slotTimersRef.current.push(tReset);
+    }, 2400);
+    slotTimersRef.current.push(tFinal);
+  }, []);
+
+  const handleLabelClick = useCallback(() => {
+    const now = Date.now();
+    // Respect cooldown period
+    if (now < cooldownUntilRef.current) return;
+    clickTimesRef.current.push(now);
+    // Keep only last 3 clicks
+    if (clickTimesRef.current.length > 3) {
+      clickTimesRef.current = clickTimesRef.current.slice(-3);
+    }
+    if (clickTimesRef.current.length === 3) {
+      const first = clickTimesRef.current[0];
+      const last = clickTimesRef.current[2];
+      if (last - first < 800 && !slotState) {
+        clickTimesRef.current = [];
+        triggerSlots();
+      }
+    }
+  }, [slotState, triggerSlots]);
+
+  const fireConfetti = (isHackJackpot: boolean) => {
+    const canvas = confettiRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    canvas.style.display = "block";
+
+    const STANDARD_COLORS = [
+      "#d4453a", "#ff6b6b", "#ffd93d", "#6bcb77",
+      "#4d96ff", "#ff6f91", "#845ec2", "#ffc75f",
+    ];
+    const OCEAN_COLORS = [
+      "#0ea5e9", "#06b6d4", "#14b8a6", "#22d3ee",
+      "#38bdf8", "#67e8f9", "#a5f3fc", "#2dd4bf",
+      "#d4453a", "#ff6b6b",
+    ];
+    const colors = isHackJackpot ? OCEAN_COLORS : STANDARD_COLORS;
+
+    type Particle = {
+      x: number; y: number; vx: number; vy: number;
+      w: number; h: number; color: string; rot: number; vr: number;
+      life: number; shape: "rect" | "bubble" | "claw";
+    };
+    const particles: Particle[] = [];
+
+    const count = isHackJackpot ? 200 : 150;
+    for (let i = 0; i < count; i++) {
+      const isBubble = isHackJackpot && Math.random() < 0.35;
+      const isClaw = isHackJackpot && !isBubble && Math.random() < 0.2;
+      particles.push({
+        x: canvas.width / 2 + (Math.random() - 0.5) * 300,
+        y: canvas.height * 0.35,
+        vx: (Math.random() - 0.5) * 18,
+        vy: isHackJackpot
+          ? -Math.random() * 14 - 2 + (isBubble ? -4 : 0)
+          : -Math.random() * 16 - 4,
+        w: isBubble ? Math.random() * 8 + 4 : Math.random() * 10 + 4,
+        h: isBubble ? 0 : Math.random() * 6 + 3,
+        color: colors[Math.floor(Math.random() * colors.length)],
+        rot: Math.random() * Math.PI * 2,
+        vr: (Math.random() - 0.5) * 0.3,
+        life: isHackJackpot ? 1.3 : 1,
+        shape: isClaw ? "claw" : isBubble ? "bubble" : "rect",
+      });
+    }
+
+    const drawClaw = (ctx: CanvasRenderingContext2D, size: number) => {
+      // Simple lobster claw shape
+      ctx.beginPath();
+      ctx.moveTo(0, size * 0.5);
+      ctx.quadraticCurveTo(-size * 0.6, size * 0.2, -size * 0.4, -size * 0.3);
+      ctx.quadraticCurveTo(-size * 0.2, -size * 0.6, 0, -size * 0.3);
+      ctx.quadraticCurveTo(size * 0.2, -size * 0.6, size * 0.4, -size * 0.3);
+      ctx.quadraticCurveTo(size * 0.6, size * 0.2, 0, size * 0.5);
+      ctx.closePath();
+      ctx.fill();
+    };
+
+    let raf: number;
+    const draw = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      let alive = false;
+      for (const p of particles) {
+        if (p.life <= 0) continue;
+        alive = true;
+        p.x += p.vx;
+        p.y += p.vy;
+        p.vy += p.shape === "bubble" ? 0.15 : 0.4;
+        p.vx *= 0.99;
+        p.rot += p.vr;
+        p.life -= isHackJackpot ? 0.005 : 0.008;
+        ctx.save();
+        ctx.translate(p.x, p.y);
+        ctx.rotate(p.rot);
+        ctx.globalAlpha = Math.max(0, Math.min(1, p.life));
+        ctx.fillStyle = p.color;
+
+        if (p.shape === "bubble") {
+          ctx.beginPath();
+          ctx.arc(0, 0, p.w, 0, Math.PI * 2);
+          ctx.strokeStyle = p.color;
+          ctx.lineWidth = 1.5;
+          ctx.globalAlpha *= 0.7;
+          ctx.stroke();
+          ctx.globalAlpha *= 0.15;
+          ctx.fill();
+        } else if (p.shape === "claw") {
+          drawClaw(ctx, p.w);
+        } else {
+          ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h);
+        }
+        ctx.restore();
+      }
+      if (alive) {
+        raf = requestAnimationFrame(draw);
+      } else {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        canvas.style.display = "none";
+      }
+    };
+    raf = requestAnimationFrame(draw);
+  };
+
+  const renderSlotReel = (reelIdx: 0 | 1 | 2) => {
+    const offset = slotReelOffsets[reelIdx];
+    const word = SLOT_WORDS[offset];
+    const isReelSpinning = slotState !== null && !stoppedReels.has(reelIdx);
+    return (
+      <span className={`home-v2-slot-reel ${isReelSpinning ? "spinning" : ""}`}>
+        <span className="home-v2-slot-word">{word}</span>
+      </span>
+    );
+  };
+
   return (
     <main className="home-v2-main">
+      {/* Confetti canvas for slot machine wins */}
+      <canvas
+        ref={confettiRef}
+        className="home-v2-confetti"
+        style={{ display: "none" }}
+      />
+
       {/* ═══ HERO ═══ */}
       <section className="home-v2-hero">
         <div className="home-v2-hero-bg">
@@ -112,25 +371,59 @@ function SkillsHome() {
           <div className="home-v2-ring home-v2-ring-3" />
         </div>
 
-        <div className="home-v2-hero-label">BUILT BY THE COMMUNITY.</div>
+        <div
+          className={`home-v2-hero-label ${slotState ? "home-v2-hero-label-active" : ""}`}
+          onClick={handleLabelClick}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => { if (e.key === "Enter") handleLabelClick(); }}
+        >
+          BUILT BY THE COMMUNITY.
+        </div>
 
-        <h1 className="home-v2-headline">
-          <span className="home-v2-headline-inner">
-            <span className="home-v2-action-word">Equip</span>
-            <span className="home-v2-sep" />
-            <span className="home-v2-action-word">Install</span>
-            <span className="home-v2-sep" />
-            <span className="home-v2-cycle-wrap">
-              <span className="home-v2-cycle-track">
-                <span className="home-v2-cycle-word">Unleash.</span>
-                <span className="home-v2-cycle-word">Ship.</span>
-                <span className="home-v2-cycle-word">Build.</span>
-                <span className="home-v2-cycle-word">Create.</span>
-                <span className="home-v2-cycle-word">Unleash.</span>
+        {slotState ? (
+          <h1 className={`home-v2-headline home-v2-headline-slots${
+            slotState.phase === "stopped" && slotState.won
+              ? slotState.isHackJackpot
+                ? " home-v2-headline-jackpot home-v2-headline-hack"
+                : " home-v2-headline-jackpot"
+              : ""
+          }`}>
+            {slotState.phase === "stopped" && slotState.isHackJackpot && (
+              <img
+                src="/clawd-mark.png"
+                alt=""
+                aria-hidden="true"
+                className="home-v2-hack-lobster"
+              />
+            )}
+            <span className="home-v2-headline-inner">
+              {renderSlotReel(0)}
+              <span className="home-v2-sep" />
+              {renderSlotReel(1)}
+              <span className="home-v2-sep" />
+              {renderSlotReel(2)}
+            </span>
+          </h1>
+        ) : (
+          <h1 className="home-v2-headline">
+            <span className="home-v2-headline-inner">
+              <span className="home-v2-action-word">Equip</span>
+              <span className="home-v2-sep" />
+              <span className="home-v2-action-word">Install</span>
+              <span className="home-v2-sep" />
+              <span className="home-v2-cycle-wrap">
+                <span className="home-v2-cycle-track">
+                  <span className="home-v2-cycle-word">Unleash.</span>
+                  <span className="home-v2-cycle-word">Ship.</span>
+                  <span className="home-v2-cycle-word">Build.</span>
+                  <span className="home-v2-cycle-word">Create.</span>
+                  <span className="home-v2-cycle-word">Unleash.</span>
+                </span>
               </span>
             </span>
-          </span>
-        </h1>
+          </h1>
+        )}
 
         <p className="home-v2-sub">Tools built by thousands, ready in one search.</p>
 
@@ -145,7 +438,8 @@ function SkillsHome() {
             />
             <kbd>/</kbd>
             <button type="submit" className="home-v2-search-go">
-              Search <ArrowRight size={16} />
+              <span className="home-v2-search-go-label">Search</span>{" "}
+              <ArrowRight size={16} />
             </button>
           </form>
         </div>
@@ -157,28 +451,28 @@ function SkillsHome() {
             className="home-v2-suggestion"
             onClick={() => handleSuggestion("self-improving agent")}
           >
-            <Zap size={13} /> self-improving agent
+            self-improving agent
           </button>
           <button
             type="button"
             className="home-v2-suggestion"
             onClick={() => handleSuggestion("GitHub integration")}
           >
-            <Code2 size={13} /> GitHub integration
+            GitHub integration
           </button>
           <button
             type="button"
             className="home-v2-suggestion"
             onClick={() => handleSuggestion("security soul")}
           >
-            <Shield size={13} /> security soul
+            security soul
           </button>
           <button
             type="button"
             className="home-v2-suggestion"
             onClick={() => handleSuggestion("dashboard builder")}
           >
-            <Layers size={13} /> dashboard builder
+            dashboard builder
           </button>
         </div>
       </section>
@@ -207,9 +501,6 @@ function SkillsHome() {
                   className="home-v2-c-card"
                 >
                   <div className="home-v2-c-head">
-                    <div className="home-v2-c-icon">
-                      <Zap size={18} />
-                    </div>
                     <div className="home-v2-c-meta">
                       <div className="home-v2-c-name">
                         {entry.skill.displayName || entry.skill.slug}
@@ -219,9 +510,7 @@ function SkillsHome() {
                       </div>
                     </div>
                   </div>
-                  <span className="home-v2-c-tag">
-                    <Zap size={11} /> Skill
-                  </span>
+                  <span className="home-v2-c-tag">Skill</span>
                   <div className="home-v2-c-desc">
                     {entry.skill.summary || "A fresh skill bundle."}
                   </div>
@@ -250,9 +539,6 @@ function SkillsHome() {
                   className="home-v2-c-card"
                 >
                   <div className="home-v2-c-head">
-                    <div className="home-v2-c-icon">
-                      <Zap size={18} />
-                    </div>
                     <div className="home-v2-c-meta">
                       <div className="home-v2-c-name">
                         {entry.skill.displayName || entry.skill.slug}
@@ -262,9 +548,7 @@ function SkillsHome() {
                       </div>
                     </div>
                   </div>
-                  <span className="home-v2-c-tag">
-                    <Zap size={11} /> Skill
-                  </span>
+                  <span className="home-v2-c-tag">Skill</span>
                   <div className="home-v2-c-desc">
                     {entry.skill.summary || "A fresh skill bundle."}
                   </div>
@@ -307,7 +591,7 @@ function SkillsHome() {
             className="home-v2-cat-item"
           >
             <div className="home-v2-cat-icon">
-              <Zap size={20} />
+              <Package size={20} />
             </div>
             <div className="home-v2-cat-text">
               <div className="home-v2-cat-name">Skills</div>
@@ -341,30 +625,6 @@ function SkillsHome() {
               <ChevronRight size={16} />
             </span>
           </Link>
-          {FEATURE_SOULS && (
-          <Link
-            to="/souls"
-            search={{
-              q: undefined,
-              sort: undefined,
-              dir: undefined,
-              view: undefined,
-              focus: undefined,
-            }}
-            className="home-v2-cat-item"
-          >
-            <div className="home-v2-cat-icon">
-              <Shield size={20} />
-            </div>
-            <div className="home-v2-cat-text">
-              <div className="home-v2-cat-name">Souls</div>
-              <div className="home-v2-cat-desc">Agent identities</div>
-            </div>
-            <span className="home-v2-cat-arrow">
-              <ChevronRight size={16} />
-            </span>
-          </Link>
-          )}
         </div>
       </section>
 

src/routes/plugins/$name.tsx

@@ -14,6 +14,7 @@ import {
   fetchPackageReadme,
   fetchPackageVersion,
   getPackageDownloadPath,
+  isRateLimitedPackageApiError,
   type PackageDetailResponse,
   type PackageVersionDetail,
 } from "../../lib/packageApi";
@@ -35,7 +36,6 @@ type PluginDetailLoaderData = {
 
 export const Route = createFileRoute("/plugins/$name")({
   loader: async ({ params }): Promise<PluginDetailLoaderData> => {
-    // All fetch functions now handle errors internally and return null/empty on failure
     const requestedName = params.name;
     const candidateNames = requestedName.includes("/")
       ? [requestedName]
@@ -43,9 +43,25 @@ export const Route = createFileRoute("/plugins/$name")({
 
     let resolvedName = requestedName;
     let detail: PackageDetailResponse = { package: null, owner: null };
-    
+
     for (const candidateName of candidateNames) {
-      const candidateDetail = await fetchPackageDetail(candidateName);
+      let candidateDetail: PackageDetailResponse;
+      try {
+        candidateDetail = await fetchPackageDetail(candidateName);
+      } catch (error) {
+        if (isRateLimitedPackageApiError(error)) {
+          return {
+            detail: { package: null, owner: null },
+            version: null,
+            readme: null,
+            rateLimited: {
+              scope: "detail",
+              retryAfterSeconds: error.retryAfterSeconds,
+            },
+          };
+        }
+        throw error;
+      }
       if (candidateDetail.package) {
         detail = candidateDetail;
         resolvedName = candidateName;
@@ -58,15 +74,29 @@ export const Route = createFileRoute("/plugins/$name")({
       return { detail, version: null, readme: null, rateLimited: null };
     }
 
-    // Fetch readme and version in parallel - functions handle errors internally
-    const [version, readme] = await Promise.all([
-      detail.package.latestVersion 
-        ? fetchPackageVersion(resolvedName, detail.package.latestVersion)
-        : Promise.resolve(null),
-      fetchPackageReadme(resolvedName),
-    ]);
-    
-    return { detail, version, readme, rateLimited: null };
+    try {
+      const [version, readme] = await Promise.all([
+        detail.package.latestVersion
+          ? fetchPackageVersion(resolvedName, detail.package.latestVersion)
+          : Promise.resolve(null),
+        fetchPackageReadme(resolvedName),
+      ]);
+
+      return { detail, version, readme, rateLimited: null };
+    } catch (error) {
+      if (isRateLimitedPackageApiError(error)) {
+        return {
+          detail,
+          version: null,
+          readme: null,
+          rateLimited: {
+            scope: "metadata",
+            retryAfterSeconds: error.retryAfterSeconds,
+          },
+        };
+      }
+      throw error;
+    }
   },
   head: ({ params, loaderData }) => ({
     meta: [

src/routes/plugins/index.tsx

@@ -6,6 +6,7 @@ import { PluginListItem } from "../../components/PluginListItem";
 import { Button } from "../../components/ui/button";
 import {
   fetchPluginCatalog,
+  isRateLimitedPackageApiError,
   type PackageListItem,
 } from "../../lib/packageApi";
 
@@ -55,24 +56,42 @@ export const Route = createFileRoute("/plugins/")({
   }),
   loaderDeps: ({ search }) => search,
   loader: async ({ deps }): Promise<PluginsLoaderData> => {
-    // fetchPluginCatalog now handles errors internally and returns empty results
-    const data = await fetchPluginCatalog({
-      q: deps.q,
-      cursor: deps.q ? undefined : deps.cursor,
-      family: deps.family,
-      isOfficial: deps.verified,
-      executesCode: deps.executesCode,
-      limit: 50,
-    });
+    try {
+      const data = await fetchPluginCatalog({
+        q: deps.q,
+        cursor: deps.q ? undefined : deps.cursor,
+        family: deps.family,
+        isOfficial: deps.verified,
+        executesCode: deps.executesCode,
+        limit: 50,
+      });
 
-    const items = data?.items ?? [];
-    return {
-      items,
-      nextCursor: data?.nextCursor ?? null,
-      rateLimited: false,
-      retryAfterSeconds: null,
-      apiError: items.length === 0 && !deps.q && !deps.family && !deps.verified && !deps.executesCode,
-    };
+      return {
+        items: data?.items ?? [],
+        nextCursor: data?.nextCursor ?? null,
+        rateLimited: false,
+        retryAfterSeconds: null,
+        apiError: false,
+      };
+    } catch (error) {
+      if (isRateLimitedPackageApiError(error)) {
+        return {
+          items: [],
+          nextCursor: null,
+          rateLimited: true,
+          retryAfterSeconds: error.retryAfterSeconds,
+          apiError: false,
+        };
+      }
+
+      return {
+        items: [],
+        nextCursor: null,
+        rateLimited: false,
+        retryAfterSeconds: null,
+        apiError: true,
+      };
+    }
   },
   component: PluginsIndex,
 });

src/routes/search.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { Search } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { PluginListItem } from "../components/PluginListItem";
 import { SkillListItem } from "../components/SkillListItem";
 import { UserListItem } from "../components/UserListItem";
@@ -35,6 +35,10 @@ function UnifiedSearchPage() {
   const activeType = search.type ?? "all";
   const [query, setQuery] = useState(search.q ?? "");
 
+  useEffect(() => {
+    setQuery(search.q ?? "");
+  }, [search.q]);
+
   const { results, skillCount, pluginCount, userCount, isSearching } = useUnifiedSearch(
     search.q ?? "",
     activeType,

src/routes/settings.tsx

@@ -9,9 +9,7 @@ import {
   Moon,
   RotateCcw,
   Settings2,
-  Sparkles,
   Sun,
-  Zap,
 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
@@ -495,8 +493,7 @@ export function Settings() {
 
                 {/* Code & Content Section - Advanced */}
                 <div className="space-y-4">
-                  <Label className="text-sm font-semibold text-[color:var(--ink)] flex items-center gap-2">
-                    <Sparkles size={14} className="text-[color:var(--accent)]" />
+                  <Label className="text-sm font-semibold text-[color:var(--ink)]">
                     Code &amp; Content
                   </Label>
                   
@@ -533,10 +530,7 @@ export function Settings() {
                         </SelectTrigger>
                         <SelectContent>
                           <SelectItem value="full">
-                            <span className="flex items-center gap-2">
-                              <Zap size={14} />
-                              Full
-                            </span>
+                            Full
                           </SelectItem>
                           <SelectItem value="reduced">Reduced</SelectItem>
                           <SelectItem value="none">None</SelectItem>
@@ -604,8 +598,7 @@ export function Settings() {
 
                 {/* Experimental Features - Advanced */}
                 <div className="space-y-4">
-                  <Label className="text-sm font-semibold text-[color:var(--ink)] flex items-center gap-2">
-                    <Sparkles size={14} className="text-[color:var(--gold)]" />
+                  <Label className="text-sm font-semibold text-[color:var(--ink)]">
                     Experimental
                   </Label>
                   

src/routes/skills/-SkillsToolbar.tsx

@@ -8,11 +8,11 @@ import {
   MessageSquare,
   Package,
   Plug,
+  RefreshCw,
   Search,
   Shield,
   Wrench,
   X,
-  Zap,
 } from "lucide-react";
 import type { RefObject } from "react";
 import { useMemo } from "react";
@@ -64,7 +64,7 @@ const CATEGORY_ICONS: Record<string, React.ReactNode> = {
   "dev-tools": <Wrench size={13} />,
   data: <Database size={13} />,
   security: <Shield size={13} />,
-  automation: <Zap size={13} />,
+  automation: <RefreshCw size={13} />,
   other: <Package size={13} />,
 };