Switch to OAuth App auth and add paginated activity feeds

CONTRIBUTING.md

@@ -41,7 +41,7 @@ DiffKit is a **pnpm monorepo** managed with **Turborepo**:
 - **TanStack Router** — File-based routing in `apps/dashboard/src/routes/`
 - **TanStack Query** — Server state management and caching
 - **Drizzle ORM** — Database schema and migrations in `apps/dashboard/src/db/` and `apps/dashboard/drizzle/`
-- **Better Auth** — Authentication with a GitHub App
+- **Better Auth** — Authentication with a GitHub OAuth App (+ GitHub App for webhooks)
 - **Cloudflare D1** — SQLite database at the edge
 
 ### Adding a New Route

README.md

@@ -19,7 +19,7 @@ A fast, design-first GitHub dashboard for developers who want to stay on top of
 | Routing | TanStack Router (file-based) |
 | Data | TanStack Query + Octokit |
 | Database | Cloudflare D1 (SQLite) via Drizzle ORM |
-| Auth | Better Auth with GitHub App |
+| Auth | Better Auth with GitHub OAuth App + GitHub App |
 | Styling | Tailwind CSS 4 + Radix UI |
 | Icons | Lucide React |
 | Build | Vite 7 + Turborepo |
@@ -32,7 +32,8 @@ A fast, design-first GitHub dashboard for developers who want to stay on top of
 
 - [Node.js](https://nodejs.org/) (v20+)
 - [pnpm](https://pnpm.io/) (v10+)
-- A [GitHub App](https://github.com/settings/apps)
+- A [GitHub OAuth App](https://github.com/settings/developers) (for user authentication)
+- A [GitHub App](https://github.com/settings/apps) (for webhooks and installation management)
 
 ### Setup
 
@@ -54,16 +55,28 @@ A fast, design-first GitHub dashboard for developers who want to stay on top of
    Create a `.dev.vars` file in `apps/dashboard/`:
 
    ```
+   GITHUB_OAUTH_CLIENT_ID=your_oauth_app_client_id
+   GITHUB_OAUTH_CLIENT_SECRET=your_oauth_app_client_secret
    GITHUB_APP_CLIENT_ID=your_github_app_client_id
    GITHUB_APP_CLIENT_SECRET=your_github_app_client_secret
    GITHUB_WEBHOOK_SECRET=your_github_webhook_secret
    BETTER_AUTH_SECRET=a_random_32_character_string
    BETTER_AUTH_URL=http://localhost:3000
    ```
 
-   > DiffKit also accepts the legacy `GITHUB_CLIENT_ID` and `GITHUB_CLIENT_SECRET` names during migration, but new setups should use the `GITHUB_APP_*` names above.
+   > DiffKit also accepts the legacy `GITHUB_CLIENT_ID` and `GITHUB_CLIENT_SECRET` names as a fallback for the OAuth App credentials during migration.
 
-4. **Create and install the GitHub App**
+4. **Create the GitHub OAuth App** (for user authentication)
+
+   In [OAuth App settings](https://github.com/settings/developers):
+
+   - Click **New OAuth App**
+   - Set the callback URL to `http://localhost:3000/api/auth/callback/github`
+   - Note the **Client ID** and generate a **Client Secret**
+
+   The OAuth App handles user login and provides a token with `repo` scope, which gives broad read access to public repositories (needed for cross-references and timeline events).
+
+5. **Create and install the GitHub App** (for webhooks and installations)
 
    In [GitHub App settings](https://github.com/settings/apps):
 
@@ -116,13 +129,13 @@ A fast, design-first GitHub dashboard for developers who want to stay on top of
 
    For local Vite development, set `DEV_TUNNEL_URL` in `apps/dashboard/.dev.vars` to the full public tunnel URL, for example `https://your-subdomain.ngrok-free.app`. The dev server will use it to allow the tunnel host and configure HMR correctly.
 
-5. **Run database migrations**
+6. **Run database migrations**
 
    ```bash
    pnpm --filter dashboard migrate
    ```
 
-6. **Start the dev server**
+7. **Start the dev server**
 
    ```bash
    pnpm dev

apps/dashboard/.dev.vars.example

@@ -1,8 +1,16 @@
-# GitHub App credentials
+# GitHub OAuth App credentials (used for user authentication)
+# 1. Go to https://github.com/settings/developers > OAuth Apps > New OAuth App
+# 2. Set the callback URL to http://localhost:3000/api/auth/callback/github
+# 3. Note the Client ID and generate a Client Secret
+# OAuth App tokens support scopes (repo, user:email) and don't expire.
+GITHUB_OAUTH_CLIENT_ID=
+GITHUB_OAUTH_CLIENT_SECRET=
+
+# GitHub App credentials (used for webhooks and installation management)
 # 1. Go to https://github.com/settings/apps
-# 2. Create a new GitHub App
+# 2. Create a new GitHub App (or use an existing one)
 # 3. Set the callback URL to http://localhost:3000/api/auth/callback/github
-# 4. Under Permissions & events, grant Email addresses account permission: Read-only
+# 4. Under Permissions & events, grant the permissions listed in the README
 # 5. Install the app on the repositories or organizations you want DiffKit to access
 GITHUB_APP_CLIENT_ID=
 GITHUB_APP_CLIENT_SECRET=
@@ -17,7 +25,7 @@ GITHUB_WEBHOOK_SECRET=
 # Example: https://your-subdomain.ngrok-free.app
 DEV_TUNNEL_URL=
 
-# Legacy OAuth-style names are still supported as a fallback during migration.
+# Legacy OAuth-style names are still supported as a fallback for GITHUB_OAUTH_* during migration.
 GITHUB_CLIENT_ID=
 GITHUB_CLIENT_SECRET=
 

apps/dashboard/src/components/details/label-pill.tsx

@@ -0,0 +1,29 @@
+import { cn } from "@diffkit/ui/lib/utils";
+
+const sizes = {
+	sm: "px-1.5 py-px text-[10px]",
+	md: "px-2.5 py-0.5 text-xs",
+};
+
+export function LabelPill({
+	name,
+	color,
+	size = "md",
+}: {
+	name: string;
+	color: string;
+	size?: "sm" | "md";
+}) {
+	const hex = color.startsWith("#") ? color : `#${color}`;
+	return (
+		<span
+			className={cn(
+				"label-pill inline-flex items-center rounded-full font-medium",
+				sizes[size],
+			)}
+			style={{ "--label-color": hex } as React.CSSProperties}
+		>
+			{name}
+		</span>
+	);
+}