Refresh invite and repository web pages

web/src/app/routes/root.tsx

@@ -1,5 +1,4 @@
-import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
-import { ThemeToggle } from "@/shared/theme/ThemeToggle";
+import { Outlet, createRootRoute } from "@tanstack/react-router";
 
 export const Route = createRootRoute({
   component: RootLayout,
@@ -8,15 +7,6 @@ export const Route = createRootRoute({
 function RootLayout() {
   return (
     <div className="flex min-h-dvh flex-col">
-      <header className="flex h-12 items-center justify-between border-b px-4">
-        <Link
-          to="/"
-          className="text-sm font-semibold tracking-tight text-foreground"
-        >
-          Buzz
-        </Link>
-        <ThemeToggle />
-      </header>
       <main className="flex flex-1 flex-col">
         <Outlet />
       </main>

web/src/features/invite/ui/InvitePage.tsx

@@ -1,5 +1,4 @@
-import { Download, ExternalLink, Hexagon } from "lucide-react";
-
+import buzzAppIcon from "@/assets/app-icon@3x.png";
 import { relayWsUrl } from "@/shared/lib/relay-url";
 import { Button } from "@/shared/ui/button";
 
@@ -19,39 +18,52 @@ export function InvitePage({ code }: { code: string }) {
   const deepLink = `buzz://join?relay=${encodeURIComponent(relay)}&code=${encodeURIComponent(code)}`;
 
   return (
-    <div className="flex flex-1 flex-col items-center justify-center px-4 py-16 text-center">
-      <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10">
-        <Hexagon className="h-8 w-8 text-primary" />
-      </div>
-      <h1 className="mt-6 text-2xl font-semibold tracking-tight">
-        You&apos;re invited to join
-      </h1>
-      <p className="mt-1 font-mono text-lg text-foreground">{host}</p>
-      <p className="mt-3 max-w-md text-sm leading-relaxed text-muted-foreground">
-        Buzz is a messaging platform for human–agent collaboration. Accept this
-        invite in the desktop app to join the workspace on this relay.
-      </p>
+    <div
+      className="flex flex-1 flex-col items-center justify-center px-4 py-16 text-center"
+      style={{
+        backgroundImage: "linear-gradient(180deg, #D7D72E 0%, #D7E7F6 100%)",
+      }}
+    >
+      <div
+        className="flex w-full max-w-xl flex-col items-center rounded-3xl bg-white px-6 py-10 sm:px-12 sm:py-12"
+        style={{
+          boxShadow:
+            "0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04)",
+        }}
+      >
+        <div
+          className="h-16 w-16 overflow-hidden bg-black"
+          style={{ borderRadius: "22.37%" }}
+        >
+          <img alt="Buzz" className="h-full w-full" src={buzzAppIcon} />
+        </div>
+        <h1 className="mt-6 text-2xl font-semibold tracking-tight text-black">
+          You&apos;re invited to join
+        </h1>
+        <p className="mt-1 font-mono text-lg text-black/70">{host}</p>
 
-      <div className="mt-8 flex flex-col items-center gap-3 sm:flex-row">
-        <Button asChild size="lg">
-          <a href={deepLink}>
-            <ExternalLink className="h-4 w-4" />
-            Open in Buzz
-          </a>
-        </Button>
-        <Button asChild variant="outline" size="lg">
-          <a href={DOWNLOAD_URL} target="_blank" rel="noreferrer">
-            <Download className="h-4 w-4" />
-            Download Buzz
+        <div className="mt-8">
+          <Button
+            asChild
+            className="bg-black text-white hover:bg-black/90 focus-visible:ring-black"
+            size="lg"
+          >
+            <a href={deepLink}>Accept invite in Buzz</a>
+          </Button>
+        </div>
+
+        <p className="mt-6 text-sm text-black/60">
+          Don&apos;t have the app?{" "}
+          <a
+            className="font-medium text-black underline-offset-4 hover:text-black/70 hover:decoration-current hover:underline focus-visible:underline"
+            href={DOWNLOAD_URL}
+            rel="noreferrer"
+            target="_blank"
+          >
+            Download it now
           </a>
-        </Button>
+        </p>
       </div>
-
-      <p className="mt-6 max-w-sm text-xs leading-relaxed text-muted-foreground">
-        Already have Buzz installed? &ldquo;Open in Buzz&rdquo; will launch it
-        and accept the invite. Otherwise download the app first, then come back
-        and use this link again.
-      </p>
     </div>
   );
 }

web/src/features/repos/mock-repos.ts

@@ -0,0 +1,149 @@
+import type { Repo } from "./use-repos";
+import type {
+  BlobView,
+  CommitInfo,
+  ReadmeResult,
+  TreeEntry,
+} from "./git-client";
+
+const now = Math.floor(Date.now() / 1000);
+const people = {
+  ada: "1".repeat(64),
+  grace: "2".repeat(64),
+  linus: "3".repeat(64),
+  margaret: "4".repeat(64),
+};
+
+/** Local-only data for previewing the populated repositories state. */
+export const mockRepos: Repo[] = [
+  {
+    id: "buzz-desktop",
+    name: "buzz-desktop",
+    description:
+      "The desktop client for collaborating with people and agents across Buzz workspaces.",
+    cloneUrls: ["https://example.com/buzz-desktop.git"],
+    webUrl: null,
+    channelId: null,
+    owner: people.ada,
+    contributors: [people.grace, people.linus],
+    createdAt: now - 60 * 24,
+  },
+  {
+    id: "agent-harness",
+    name: "agent-harness",
+    description:
+      "Tools and shared workflows for launching and coordinating coding agents.",
+    cloneUrls: ["https://example.com/agent-harness.git"],
+    webUrl: null,
+    channelId: null,
+    owner: people.grace,
+    contributors: [people.ada, people.margaret],
+    createdAt: now - 60 * 60 * 3,
+  },
+  {
+    id: "relay-infrastructure",
+    name: "relay-infrastructure",
+    description:
+      "Infrastructure and deployment configuration for community relays.",
+    cloneUrls: ["https://example.com/relay-infrastructure.git"],
+    webUrl: null,
+    channelId: null,
+    owner: people.linus,
+    contributors: [people.margaret],
+    createdAt: now - 60 * 60 * 24 * 2,
+  },
+  {
+    id: "design-system",
+    name: "design-system",
+    description: "Shared foundations, components, and interaction patterns.",
+    cloneUrls: ["https://example.com/design-system.git"],
+    webUrl: null,
+    channelId: null,
+    owner: people.margaret,
+    contributors: [people.ada, people.grace, people.linus],
+    createdAt: now - 60 * 60 * 24 * 8,
+  },
+];
+
+export function getMockRepo(repoId: string): Repo | undefined {
+  if (!import.meta.env.DEV) return undefined;
+  return mockRepos.find((repo) => repo.id === repoId);
+}
+
+export const mockRepoTree: TreeEntry[] = [
+  {
+    name: "src",
+    type: "tree",
+    mode: "040000",
+    oid: "1".repeat(40),
+  },
+  {
+    name: "README.md",
+    type: "blob",
+    mode: "100644",
+    oid: "2".repeat(40),
+  },
+  {
+    name: "package.json",
+    type: "blob",
+    mode: "100644",
+    oid: "3".repeat(40),
+  },
+];
+
+export const mockRepoCommits: CommitInfo[] = [
+  {
+    oid: "a".repeat(40),
+    message: "Polish repository browsing styles",
+    author: {
+      name: "Ada",
+      email: "ada@example.com",
+      timestamp: now - 60 * 24,
+    },
+  },
+  {
+    oid: "b".repeat(40),
+    message: "Add repository empty states",
+    author: {
+      name: "Grace",
+      email: "grace@example.com",
+      timestamp: now - 60 * 60 * 5,
+    },
+  },
+];
+
+export const mockRepoReadme: ReadmeResult = {
+  filename: "README.md",
+  content:
+    "# Buzz Desktop\n\nA focused workspace for people and agents to collaborate.\n\n## Getting started\n\nInstall dependencies, then start the development app.",
+};
+
+export function getMockBlob(
+  repoId: string,
+  filepath: string,
+): BlobView | undefined {
+  if (!getMockRepo(repoId)) return undefined;
+
+  if (filepath === "README.md") {
+    return {
+      kind: "markdown",
+      content: mockRepoReadme.content,
+      sizeBytes: mockRepoReadme.content.length,
+    };
+  }
+
+  if (filepath === "package.json") {
+    const content = `${JSON.stringify(
+      {
+        name: repoId,
+        private: true,
+        scripts: { dev: "vite", build: "tsc && vite build" },
+      },
+      null,
+      2,
+    )}\n`;
+    return { kind: "text", content, sizeBytes: content.length };
+  }
+
+  return undefined;
+}

web/src/features/repos/ui/ConnectButton.tsx

@@ -7,7 +7,10 @@ export function ConnectButton({ className }: { className?: string }) {
   const deepLink = `buzz://connect?relay=${encodeURIComponent(relayWsUrl())}`;
 
   return (
-    <Button asChild className={className}>
+    <Button
+      asChild
+      className={`bg-black text-white hover:bg-black/90 focus-visible:ring-black dark:bg-white dark:text-black dark:hover:bg-white/90 dark:focus-visible:ring-white ${className ?? ""}`}
+    >
       <a href={deepLink}>
         <ExternalLink className="h-4 w-4" />
         Open in Buzz

web/src/features/repos/ui/OrgSidebar.tsx

@@ -30,7 +30,7 @@ export function OrgSidebar({ repos }: { repos: Repo[] }) {
       {/* People section */}
       {uniquePubkeys.length > 0 && (
         <div>
-          <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-sidebar-foreground">
+          <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-black dark:text-white">
             <Users className="h-4 w-4" />
             People
           </h3>
@@ -40,7 +40,7 @@ export function OrgSidebar({ repos }: { repos: Repo[] }) {
             ))}
           </div>
           {overflowCount > 0 && (
-            <span className="mt-2 block text-xs text-muted-foreground">
+            <span className="mt-2 block text-xs text-black/50 dark:text-white/50">
               {uniquePubkeys.length} people
             </span>
           )}