fix: restore ClawHub public UI

Restore the public header, hero, featured carousel, Trending Now, category grid, footer, and UI design-contract guardrails. Remove tweakcn/custom visual overlay settings and stale density preference plumbing, while preserving reviewed search/typeahead behavior and latest review fixes.

Author: BunsDev

docs/regression-notes/2026-04-29-hero-slot-easter-egg.md

@@ -0,0 +1,22 @@
+# Hero Slot Easter Egg Regression Note
+
+Date: 2026-04-29
+
+The homepage hero easter egg was originally added in commit `91c7e44` by Val Alexander on 2026-04-18 as `feat: slot machine Easter egg on hero label triple-click`.
+
+Follow-up behavior changes:
+
+- `cb75011` by Val Alexander on 2026-04-18 tuned odds to 1/25 for any jackpot and 1/100 for the Hack jackpot.
+- `fec5db7` by Val Alexander on 2026-04-18 added timer and interval cleanup on unmount.
+
+The easter egg was removed from `src/routes/index.tsx` in commit `6c0163f` by Patrick Erichsen on 2026-04-28 as part of `feat: add skills plugins search typeahead`.
+
+Expected behavior:
+
+- Triple-click `BUILT BY THE COMMUNITY.` within 800ms to trigger the slot-machine headline.
+- Reels stop at 1200ms, 1800ms, and 2400ms.
+- Non-jackpot spins reroll accidental triples so jackpot odds stay controlled.
+- Jackpot odds are 1/25 overall.
+- Hack jackpot odds are 1/100 overall.
+- Wins fire confetti; Hack wins use the aquatic Hack-specific effect.
+- Wins display for 10s and cool down for 18s; losses display for 2.4s and cool down for 3s.

docs/regression-notes/2026-04-29-ui-design-contract.md

@@ -0,0 +1,15 @@
+# UI Design Contract Regression Guard
+
+Date: 2026-04-29
+
+The restored ClawHub public UI has strict regression guards in `src/__tests__/ui-design-contract.test.ts`.
+
+Protected fundamentals:
+
+- Two-row header: brand, full-width desktop search, rectangular theme mode control, auth action, then content nav with `Skills`, `Plugins`, `Users`, and `About`.
+- Compact header: menu button, inline search, GitHub action, and visible content nav row.
+- Home hero: `BUILT BY THE COMMUNITY.`, `Tools built by thousands, ready in one search.`, search focus border behavior, slot-machine easter egg support, featured carousel, category grid breakpoints, and `Trending Now`.
+- Footer: restored four public sections and mobile section toggles.
+- Visual settings: no tweakcn overlay, custom-theme file, relaxed/compact density controls, or other nonfunctional visual preferences.
+
+Intentional changes to these fundamentals must update the design-contract test and this note in the same PR. A removal without a matching contract update should be treated as an accidental regression.

package.json

@@ -28,6 +28,7 @@
     "test:e2e:local": "bash scripts/run-playwright-local.sh",
     "test:e2e:prod-http": "vitest run -c vitest.e2e.config.ts e2e/prod-http-smoke.e2e.test.ts",
     "test:pw": "playwright test",
+    "test:ui-contract": "vitest run src/__tests__/ui-design-contract.test.ts src/__tests__/header.test.tsx src/__tests__/home-route.test.tsx src/components/Footer.test.tsx src/lib/theme.test.tsx src/routes/-settings.test.tsx",
     "test:watch": "vitest",
     "verify:convex-contract": "bun scripts/verify-convex-contract.ts"
   },

src/__tests__/header.test.tsx

@@ -1,5 +1,7 @@
 /* @vitest-environment jsdom */
 
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
 import { fireEvent, render, screen, within } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -86,19 +88,13 @@ vi.mock("../lib/useAuthStatus", () => ({
   useAuthStatus: () => authStatusMock(),
 }));
 
-const setThemeMock = vi.fn();
 const setModeMock = vi.fn();
 
 vi.mock("../lib/theme", () => ({
   applyTheme: vi.fn(),
-  THEME_OPTIONS: [
-    { value: "claw", label: "Claw", description: "" },
-    { value: "hub", label: "Hub", description: "" },
-  ],
   useThemeMode: () => ({
-    theme: "hub",
+    theme: "claw",
     mode: "system",
-    setTheme: setThemeMock,
     setMode: setModeMock,
   }),
 }));
@@ -148,14 +144,47 @@ vi.mock("../components/ui/dropdown-menu", () => ({
 }));
 
 vi.mock("../components/ui/toggle-group", () => ({
-  ToggleGroup: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  ToggleGroupItem: ({ children }: { children: ReactNode }) => (
-    <button type="button">{children}</button>
+  ToggleGroup: ({
+    children,
+    className,
+    ...props
+  }: {
+    children: ReactNode;
+    className?: string;
+    "aria-label"?: string;
+  }) => (
+    <div className={className} aria-label={props["aria-label"]}>
+      {children}
+    </div>
+  ),
+  ToggleGroupItem: ({
+    children,
+    value,
+    ...props
+  }: {
+    children: ReactNode;
+    value?: string;
+    "aria-label"?: string;
+  }) => (
+    <button type="button" aria-label={props["aria-label"]} data-value={value}>
+      {children}
+    </button>
   ),
 }));
 
 import Header from "../components/Header";
 
+function stylesCss() {
+  return readFileSync(resolve(process.cwd(), "src/styles.css"), "utf8");
+}
+
+function compactHeaderCss() {
+  const css = stylesCss();
+  const start = css.indexOf("@media (max-width: 760px)");
+  const end = css.indexOf("@media (max-width: 520px)", start);
+  return css.slice(start, end);
+}
+
 describe("Header", () => {
   beforeEach(() => {
     authStatusMock.mockReturnValue({
@@ -175,29 +204,80 @@ describe("Header", () => {
     expect(screen.queryByText("Packages")).toBeNull();
   });
 
-  it("renders simplified desktop nav and theme toggle", () => {
+  it("renders restored desktop nav rows and segmented theme controls", () => {
     siteModeMock.mockReturnValue("skills");
-    setThemeMock.mockClear();
     setModeMock.mockClear();
 
     render(<Header />);
 
-    expect(screen.getByRole("button", { name: /Toggle theme\. Current: system/i })).toBeTruthy();
+    expect(document.querySelector(".navbar-tabs")).toBeTruthy();
+    expect(document.querySelector(".navbar-tabs-secondary")).toBeTruthy();
+    expect(document.querySelector(".theme-mode-toggle")).toBeTruthy();
+    expect(screen.getByLabelText("Theme mode").className).toContain("theme-mode-toggle");
+    expect(screen.getByRole("button", { name: /Cycle theme mode/i })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "System theme" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Light theme" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Dark theme" })).toBeTruthy();
     expect(screen.getAllByText("Skills")).toHaveLength(1);
     expect(screen.getAllByText("Plugins")).toHaveLength(1);
-    expect(screen.queryByText("Users")).toBeNull();
+    expect(screen.getAllByText("Users")).toHaveLength(1);
+    expect(screen.getAllByText("About")).toHaveLength(1);
     expect(screen.queryByText("Dashboard")).toBeNull();
     expect(screen.queryByText("Manage")).toBeNull();
-    expect(screen.getByPlaceholderText("Search skills and plugins")).toBeTruthy();
+    expect(screen.getByPlaceholderText("Search skills, plugins, users")).toBeTruthy();
 
-    fireEvent.click(screen.getByRole("button", { name: /Toggle theme\. Current: system/i }));
-    expect(setModeMock).toHaveBeenCalledWith("dark");
+    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("Plugins")).toHaveLength(2);
+    expect(screen.getAllByText("Users")).toHaveLength(2);
+    expect(screen.getAllByText("About")).toHaveLength(2);
+  });
+
+  it("renders the GitHub sign-in button with desktop and compact labels", () => {
+    siteModeMock.mockReturnValue("skills");
+
+    render(<Header />);
+
+    const signInButton = screen.getByRole("button", { name: "Sign in with GitHub" });
+    expect(signInButton.className).toContain("github-sign-in-button");
+    const fullCopy = signInButton.querySelector(".sign-in-full-copy");
+    expect(fullCopy?.textContent).toBe("Sign in with GitHub");
+    expect(fullCopy?.childNodes).toHaveLength(1);
+    expect(signInButton.querySelector(".sign-in-with")).toBeNull();
+    expect(signInButton.querySelector(".sign-in-compact-copy")?.textContent).toBe("GitHub");
+  });
+
+  it("keeps inline search and content nav visible in the compact header", () => {
+    const css = compactHeaderCss();
+
+    expect(css).toContain(".navbar-search-wrap");
+    expect(css).toContain("grid-template-columns");
+    expect(css).toContain(".navbar-search {");
+    expect(css).toContain("display: flex;");
+    expect(css).toContain(".navbar-search-mobile-trigger");
+    expect(css).toContain("display: none;");
+    expect(css).toContain(".navbar-tabs {");
+    expect(css).toContain("display: flex;");
+    expect(css).toContain(".navbar-tabs-secondary");
+    expect(css).toContain("display: inline-flex;");
+    expect(css).not.toContain(".navbar-search {\n    display: none;");
+    expect(css).not.toContain(".navbar-tabs {\n    display: none;");
+  });
+
+  it("aligns the restored header shell to the browse page width", () => {
+    const css = stylesCss();
+    const compactCss = compactHeaderCss();
+
+    expect(css).toContain(".navbar-inner {\n  width: 100%;\n  max-width: var(--page-max);");
+    expect(css).toContain("margin: 0 auto;\n  padding: 0 var(--space-5);");
+    expect(compactCss).toContain("padding: 10px 16px;");
+    expect(compactCss).toContain("scroll-padding-inline: 16px;");
+    expect(css).not.toContain(".navbar-inner,\n  .section.detail-page-section");
   });
 
   it("shows grouped skills and plugins typeahead without users", () => {
@@ -206,7 +286,7 @@ describe("Header", () => {
 
     render(<Header />);
 
-    const input = screen.getByPlaceholderText("Search skills and plugins");
+    const input = screen.getByPlaceholderText("Search skills, plugins, users");
     fireEvent.focus(input);
     fireEvent.change(input, { target: { value: "weather" } });
 
@@ -249,7 +329,7 @@ describe("Header", () => {
 
     render(<Header />);
 
-    const input = screen.getByPlaceholderText("Search skills and plugins");
+    const input = screen.getByPlaceholderText("Search skills, plugins, users");
     fireEvent.focus(input);
     fireEvent.change(input, { target: { value: "weather" } });
     fireEvent.click(screen.getByRole("option", { name: /Weather Skill/i }));
@@ -278,7 +358,7 @@ describe("Header", () => {
 
     render(<Header />);
 
-    const input = screen.getByPlaceholderText("Search skills and plugins");
+    const input = screen.getByPlaceholderText("Search skills, plugins, users");
     fireEvent.focus(input);
     fireEvent.change(input, { target: { value: "zzzz" } });