👍

.gitignore

···
+node_modules
+.env
+.env.prod
+*.db*

deno.json

···
+{
+  "tasks": {
+    "start": "deno run -A --unstable-kv --env-file=.env src/main.ts",
+    "dev": "deno run -A --unstable-kv --env-file=.env --watch src/main.ts"
+  },
+  "compilerOptions": {
+    "jsx": "precompile",
+    "jsxImportSource": "preact"
+  },
+  "imports": {
+    "@slices/oauth": "jsr:@slices/oauth@^0.3.2",
+    "@slices/session": "jsr:@slices/session@^0.2.0",
+    "preact": "npm:preact@^10.27.1",
+    "preact-render-to-string": "npm:preact-render-to-string@^6.5.13",
+    "@std/http": "jsr:@std/http@^1.0.20",
+    "typed-htmx": "npm:typed-htmx@^0.3.1"
+  },
+  "nodeModulesDir": "auto"
+}

deno.lock

···
+{
+  "version": "5",
+  "specifiers": {
+    "jsr:@slices/oauth@~0.3.2": "0.3.2",
+    "jsr:@slices/session@0.2": "0.2.0",
+    "jsr:@std/cli@^1.0.21": "1.0.21",
+    "jsr:@std/encoding@^1.0.10": "1.0.10",
+    "jsr:@std/fmt@^1.0.8": "1.0.8",
+    "jsr:@std/fs@^1.0.19": "1.0.19",
+    "jsr:@std/html@^1.0.4": "1.0.4",
+    "jsr:@std/http@^1.0.20": "1.0.20",
+    "jsr:@std/internal@^1.0.10": "1.0.10",
+    "jsr:@std/media-types@^1.1.0": "1.1.0",
+    "jsr:@std/net@^1.0.4": "1.0.5",
+    "jsr:@std/path@^1.1.1": "1.1.2",
+    "jsr:@std/streams@^1.0.10": "1.0.11",
+    "npm:@types/node@*": "22.15.15",
+    "npm:pg@^8.16.3": "8.16.3",
+    "npm:preact-render-to-string@^6.5.13": "6.5.13_preact@10.27.1",
+    "npm:preact@^10.27.1": "10.27.1",
+    "npm:typed-htmx@~0.3.1": "0.3.1"
+  },
+  "jsr": {
+    "@slices/oauth@0.3.2": {
+      "integrity": "51feaa6be538a61a3278ee7f1d264ed937187d09da2be1f0a2a837128df82526"
+    },
+    "@slices/session@0.2.0": {
+      "integrity": "5245be75a1de2e397ba96b2ce80179cedaa95a33e2edf1e16c348d353271ff57",
+      "dependencies": [
+        "jsr:@slices/oauth",
+        "npm:pg"
+      ]
+    },
+    "@std/cli@1.0.21": {
+      "integrity": "cd25b050bdf6282e321854e3822bee624f07aca7636a3a76d95f77a3a919ca2a"
+    },
+    "@std/encoding@1.0.10": {
+      "integrity": "8783c6384a2d13abd5e9e87a7ae0520a30e9f56aeeaa3bdf910a3eaaf5c811a1"
+    },
+    "@std/fmt@1.0.8": {
+      "integrity": "71e1fc498787e4434d213647a6e43e794af4fd393ef8f52062246e06f7e372b7"
+    },
+    "@std/fs@1.0.19": {
+      "integrity": "051968c2b1eae4d2ea9f79a08a3845740ef6af10356aff43d3e2ef11ed09fb06"
+    },
+    "@std/html@1.0.4": {
+      "integrity": "eff3497c08164e6ada49b7f81a28b5108087033823153d065e3f89467dd3d50e"
+    },
+    "@std/http@1.0.20": {
+      "integrity": "b5cc33fc001bccce65ed4c51815668c9891c69ccd908295997e983d8f56070a1",
+      "dependencies": [
+        "jsr:@std/cli",
+        "jsr:@std/encoding",
+        "jsr:@std/fmt",
+        "jsr:@std/fs",
+        "jsr:@std/html",
+        "jsr:@std/media-types",
+        "jsr:@std/net",
+        "jsr:@std/path",
+        "jsr:@std/streams"
+      ]
+    },
+    "@std/internal@1.0.10": {
+      "integrity": "e3be62ce42cab0e177c27698e5d9800122f67b766a0bea6ca4867886cbde8cf7"
+    },
+    "@std/media-types@1.1.0": {
+      "integrity": "c9d093f0c05c3512932b330e3cc1fe1d627b301db33a4c2c2185c02471d6eaa4"
+    },
+    "@std/net@1.0.5": {
+      "integrity": "b759d8c5e17d997e164af6379d57764668c6714f30109685eec0fd5e194d501a"
+    },
+    "@std/path@1.1.2": {
+      "integrity": "c0b13b97dfe06546d5e16bf3966b1cadf92e1cc83e56ba5476ad8b498d9e3038",
+      "dependencies": [
+        "jsr:@std/internal"
+      ]
+    },
+    "@std/streams@1.0.11": {
+      "integrity": "db583d27e28d133f389f1eec318cffdf4998305e5134c1d4b1c56b361cee6018"
+    }
+  },
+  "npm": {
+    "@types/node@22.15.15": {
+      "integrity": "sha512-R5muMcZob3/Jjchn5LcO8jdKwSCbzqmPB6ruBxMcf9kbxtniZHP327s6C37iOfuw8mbKK3cAQa7sEl7afLrQ8A==",
+      "dependencies": [
+        "undici-types"
+      ]
+    },
+    "pg-cloudflare@1.2.7": {
+      "integrity": "sha512-YgCtzMH0ptvZJslLM1ffsY4EuGaU0cx4XSdXLRFae8bPP4dS5xL1tNB3k2o/N64cHJpwU7dxKli/nZ2lUa5fLg=="
+    },
+    "pg-connection-string@2.9.1": {
+      "integrity": "sha512-nkc6NpDcvPVpZXxrreI/FOtX3XemeLl8E0qFr6F2Lrm/I8WOnaWNhIPK2Z7OHpw7gh5XJThi6j6ppgNoaT1w4w=="
+    },
+    "pg-int8@1.0.1": {
+      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw=="
+    },
+    "pg-pool@3.10.1_pg@8.16.3": {
+      "integrity": "sha512-Tu8jMlcX+9d8+QVzKIvM/uJtp07PKr82IUOYEphaWcoBhIYkoHpLXN3qO59nAI11ripznDsEzEv8nUxBVWajGg==",
+      "dependencies": [
+        "pg"
+      ]
+    },
+    "pg-protocol@1.10.3": {
+      "integrity": "sha512-6DIBgBQaTKDJyxnXaLiLR8wBpQQcGWuAESkRBX/t6OwA8YsqP+iVSiond2EDy6Y/dsGk8rh/jtax3js5NeV7JQ=="
+    },
+    "pg-types@2.2.0": {
+      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
+      "dependencies": [
+        "pg-int8",
+        "postgres-array",
+        "postgres-bytea",
+        "postgres-date",
+        "postgres-interval"
+      ]
+    },
+    "pg@8.16.3": {
+      "integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==",
+      "dependencies": [
+        "pg-connection-string",
+        "pg-pool",
+        "pg-protocol",
+        "pg-types",
+        "pgpass"
+      ],
+      "optionalDependencies": [
+        "pg-cloudflare"
+      ]
+    },
+    "pgpass@1.0.5": {
+      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
+      "dependencies": [
+        "split2"
+      ]
+    },
+    "postgres-array@2.0.0": {
+      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA=="
+    },
+    "postgres-bytea@1.0.0": {
+      "integrity": "sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w=="
+    },
+    "postgres-date@1.0.7": {
+      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q=="
+    },
+    "postgres-interval@1.2.0": {
+      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
+      "dependencies": [
+        "xtend"
+      ]
+    },
+    "preact-render-to-string@6.5.13_preact@10.27.1": {
+      "integrity": "sha512-iGPd+hKPMFKsfpR2vL4kJ6ZPcFIoWZEcBf0Dpm3zOpdVvj77aY8RlLiQji5OMrngEyaxGogeakTb54uS2FvA6w==",
+      "dependencies": [
+        "preact"
+      ]
+    },
+    "preact@10.27.1": {
+      "integrity": "sha512-V79raXEWch/rbqoNc7nT9E4ep7lu+mI3+sBmfRD4i1M73R3WLYcCtdI0ibxGVf4eQL8ZIz2nFacqEC+rmnOORQ=="
+    },
+    "split2@4.2.0": {
+      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg=="
+    },
+    "typed-html@3.0.1": {
+      "integrity": "sha512-JKCM9zTfPDuPqQqdGZBWSEiItShliKkBFg5c6yOR8zth43v763XkAzTWaOlVqc0Y6p9ee8AaAbipGfUnCsYZUA=="
+    },
+    "typed-htmx@0.3.1": {
+      "integrity": "sha512-6WSPsukTIOEMsVbx5wzgVSvldLmgBUVcFIm2vJlBpRPtcbDOGC5y1IYrCWNX1yUlNsrv1Ngcw4gGM8jsPyNV7w==",
+      "dependencies": [
+        "typed-html"
+      ]
+    },
+    "undici-types@6.21.0": {
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="
+    },
+    "xtend@4.0.2": {
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+    }
+  },
+  "workspace": {
+    "dependencies": [
+      "jsr:@slices/oauth@~0.3.2",
+      "jsr:@slices/session@0.2",
+      "jsr:@std/http@^1.0.20",
+      "npm:preact-render-to-string@^6.5.13",
+      "npm:preact@^10.27.1",
+      "npm:typed-htmx@~0.3.1"
+    ]
+  }
+}

scripts/register-oauth-client.sh

···
+#!/bin/bash
+
+# OAuth Dynamic Client Registration Script for AT Protocol
+# Registers a new OAuth client with the AIP server per RFC 7591
+# Usage: bash scripts/register-oauth-client.sh
+
+set -e  # Exit on any error
+
+# Configuration
+AIP_BASE="${AIP_BASE_URL:-http://localhost:8081}"
+CLIENT_BASE_URL="${CLIENT_BASE_URL:-http://localhost:8080}"
+CLIENT_NAME="${CLIENT_NAME:-Slice AT Proto Client}"
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
+CONFIG_FILE="$ROOT_DIR/.env"
+
+echo "🚀 OAuth Dynamic Client Registration for Slice"
+echo "AIP Server: $AIP_BASE"
+echo "Client Base URL: $CLIENT_BASE_URL"
+echo "Client Name: $CLIENT_NAME"
+echo
+
+# Check if client is already registered
+if [ -f "$CONFIG_FILE" ]; then
+    echo "⚠️  Existing OAuth client configuration found at $CONFIG_FILE"
+    echo -n "Do you want to register a new client? This will overwrite the existing config. (y/N): "
+    read -r OVERWRITE
+    if [ "$OVERWRITE" != "y" ] && [ "$OVERWRITE" != "Y" ]; then
+        echo "❌ Registration cancelled"
+        exit 1
+    fi
+fi
+
+echo "🔍 Using OAuth registration endpoint..."
+REGISTRATION_ENDPOINT="$AIP_BASE/oauth/clients/register"
+
+echo "✅ Registration endpoint: $REGISTRATION_ENDPOINT"
+echo
+
+# Create client registration request
+echo "📝 Creating client registration request..."
+REDIRECT_URI="$CLIENT_BASE_URL/oauth/callback"
+
+REGISTRATION_REQUEST=$(cat <<EOF
+{
+    "client_name": "$CLIENT_NAME",
+    "redirect_uris": ["$REDIRECT_URI"],
+    "scope": "atproto:atproto atproto:transition:generic openid profile email",
+    "grant_types": ["authorization_code", "refresh_token"],
+    "response_types": ["code"],
+    "token_endpoint_auth_method": "client_secret_basic"
+}
+EOF
+)
+
+echo "Registration request:"
+echo "$REGISTRATION_REQUEST" | jq '.' 2>/dev/null || echo "$REGISTRATION_REQUEST"
+echo
+
+# Register the client
+echo "🔄 Registering client with AIP server..."
+REGISTRATION_RESPONSE=$(curl -s -X POST "$REGISTRATION_ENDPOINT" \
+    -H "Content-Type: application/json" \
+    -d "$REGISTRATION_REQUEST" || {
+        echo "❌ Failed to register client with AIP server"
+        echo "Make sure the AIP server is running at $AIP_BASE"
+        exit 1
+    })
+
+echo "Registration response:"
+echo "$REGISTRATION_RESPONSE" | jq '.' 2>/dev/null || echo "$REGISTRATION_RESPONSE"
+echo
+
+# Extract client credentials
+CLIENT_ID=$(echo "$REGISTRATION_RESPONSE" | grep -o '"client_id":"[^"]*' | cut -d'"' -f4)
+CLIENT_SECRET=$(echo "$REGISTRATION_RESPONSE" | grep -o '"client_secret":"[^"]*' | cut -d'"' -f4)
+
+if [ -z "$CLIENT_ID" ] || [ -z "$CLIENT_SECRET" ]; then
+    echo "❌ Failed to extract client credentials from registration response"
+    echo "Expected client_id and client_secret in response"
+    echo "Response was: $REGISTRATION_RESPONSE"
+    exit 1
+fi
+
+echo "✅ Client registered successfully!"
+echo "Client ID: $CLIENT_ID"
+echo "Client Secret: [REDACTED]"
+echo
+
+# Save credentials to .env.oauth file
+echo "💾 Saving client credentials to $CONFIG_FILE..."
+cat > "$CONFIG_FILE" <<EOF
+# OAuth Client Credentials for Slice AT Proto Client
+# Generated on $(date)
+# AIP Server: $AIP_BASE
+
+OAUTH_CLIENT_ID="$CLIENT_ID"
+OAUTH_CLIENT_SECRET="$CLIENT_SECRET"
+OAUTH_REDIRECT_URI="$REDIRECT_URI"
+OAUTH_AIP_BASE_URL="$AIP_BASE"
+EOF
+
+echo "✅ Client registration complete!"
+echo
+echo "📋 Summary:"
+echo "  - Client ID: $CLIENT_ID"
+echo "  - Client Name: $CLIENT_NAME"
+echo "  - Redirect URI: $REDIRECT_URI"
+echo "  - Scopes: atproto:atproto atproto:transition:generic openid profile email"
+echo "  - Config saved to: $CONFIG_FILE"
+echo
+echo "🔧 Environment variables saved to $CONFIG_FILE:"
+echo "  OAUTH_CLIENT_ID"
+echo "  OAUTH_CLIENT_SECRET"
+echo "  OAUTH_REDIRECT_URI"
+echo "  OAUTH_AIP_BASE_URL"
+echo
+echo "💡 To use these credentials in your application:"
+echo "  source $CONFIG_FILE"
+echo "  # Or load them in your .env file"
+echo
+echo "🧪 To test the OAuth flow, you can now use the registered credentials"
+echo "    with your AtProtoClient in TypeScript/Deno."

src/api.ts

···
+import { atprotoClient } from "./config.ts";
+import { HydratedStatus } from "./types.ts";
+
+export async function fetchStatusesWithAuthors(): Promise<HydratedStatus[]> {
+  try {
+    const records = await atprotoClient.xyz.statusphere.status.listRecords({
+      sort: "createdAt:desc",
+    });
+    const statuses = records.records || [];
+
+    // Get unique DIDs from statuses
+    const dids = [...new Set(statuses.map((s) => s.did))];
+
+    // Fetch actors for all authors of the statuses
+    const actorsResponse = await atprotoClient.getActors({
+      dids,
+    });
+
+    // Create a map of DID to actor info
+    const actorMap = new Map();
+    actorsResponse.actors?.forEach((actor) => {
+      actorMap.set(actor.did, actor);
+    });
+
+    // Hydrate statuses with author info
+    return statuses.map((status) => ({
+      ...status,
+      author: actorMap.get(status.did),
+    }));
+  } catch (error) {
+    console.error("Error fetching statuses:", error);
+    return [];
+  }
+}

src/components/App.tsx

···
+import { HomePage } from "./HomePage.tsx";
+import { LoginPage } from "./LoginPage.tsx";
+import { Layout } from "./Layout.tsx";
+import { HydratedStatus } from "../types.ts";
+
+interface AppProps {
+  currentUser: {
+    isAuthenticated: boolean;
+    handle?: string;
+    sub?: string;
+  };
+  statuses?: HydratedStatus[];
+  page?: string;
+  error?: string;
+}
+
+export function App({ currentUser, statuses = [], page, error }: AppProps) {
+  if (page === "login") {
+    return (
+      <Layout title="Login - Statusphere" currentUser={currentUser}>
+        <LoginPage error={error} />
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout title="Statusphere" currentUser={currentUser}>
+      <HomePage currentUser={currentUser} statuses={statuses} />
+    </Layout>
+  );
+}

src/components/HomePage.tsx

···
+import { HydratedStatus } from "../types.ts";
+
+interface HomePageProps {
+  currentUser: {
+    isAuthenticated: boolean;
+    handle?: string;
+  };
+  statuses: HydratedStatus[];
+}
+
+const statusOptions = [
+  "👍",
+  "👎",
+  "💙",
+  "❤️",
+  "😍",
+  "🤩",
+  "😎",
+  "🤔",
+  "😴",
+  "🎉",
+  "🔥",
+  "💯",
+  "✨",
+  "⭐",
+  "🌟",
+  "🚀",
+  "💪",
+  "🙌",
+  "👏",
+  "🤝",
+  "🤗",
+  "😊",
+  "😄",
+  "😆",
+  "😂",
+  "🥳",
+  "🤯",
+  "😱",
+  "😭",
+  "💔",
+  "🙏",
+  "🤞",
+  "👀",
+  "🧠",
+  "💡",
+];
+
+export function HomePage({ currentUser, statuses }: HomePageProps) {
+  return (
+    <div>
+      <div class="card">
+        <h2>How are you feeling?</h2>
+        <div class="status-options">
+          {statusOptions.map((emoji) => (
+            <button
+              type="button"
+              key={emoji}
+              class="status-option"
+              title={`Set status to ${emoji}`}
+              hx-post="/status"
+              hx-vals={`{"status": "${emoji}"}`}
+              hx-target="#status-timeline"
+              hx-swap="outerHTML"
+              hx-indicator="#loading"
+            >
+              {emoji}
+            </button>
+          ))}
+        </div>
+        <div id="loading" class="htmx-indicator">
+          Setting status...
+        </div>
+      </div>
+
+      <div class="card">
+        <h3>Recent Statuses</h3>
+        <StatusTimeline statuses={statuses} />
+      </div>
+    </div>
+  );
+}
+
+interface StatusTimelineProps {
+  statuses: HydratedStatus[];
+}
+
+export function StatusTimeline({ statuses }: StatusTimelineProps) {
+  return (
+    <div id="status-timeline">
+      {statuses.length === 0 ? (
+        <div class="status-timeline">
+          <p class="status-meta">No statuses yet. Be the first to share!</p>
+        </div>
+      ) : (
+        <div class="status-timeline">
+          {statuses.map((status) => {
+            const authorHandle = status.author?.handle || 
+                               status.did?.split(":").pop() || 
+                               "unknown";
+            const createdAt = new Date(status.value.createdAt).toLocaleString();
+
+            return (
+              <div key={status.uri} class="status-item">
+                <div class="status-emoji">{status.value.status}</div>
+                <div>
+                  <div class="status-meta">
+                    @{authorHandle} • {createdAt}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Layout.tsx

···
+import type { ComponentChildren } from "preact";
+
+interface LayoutProps {
+  title: string;
+  currentUser: {
+    isAuthenticated: boolean;
+    handle?: string;
+  };
+  children: ComponentChildren;
+}
+
+export function Layout({ title, currentUser, children }: LayoutProps) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title}</title>
+        <script src="https://unpkg.com/htmx.org@2.0.2"></script>
+        <style dangerouslySetInnerHTML={{ __html: styles }} />
+      </head>
+      <body>
+        <nav class="nav">
+          <div class="nav-container">
+            <a href="/" class="nav-brand">
+              Statusphere
+            </a>
+            <div class="nav-user">
+              {currentUser.isAuthenticated ? (
+                <div class="user-info">
+                  <span class="handle">@{currentUser.handle}</span>
+                  <form method="post" action="/logout">
+                    <button type="submit" class="btn btn-secondary">
+                      Logout
+                    </button>
+                  </form>
+                </div>
+              ) : (
+                <a href="/login" class="btn btn-primary">
+                  Login
+                </a>
+              )}
+            </div>
+          </div>
+        </nav>
+        <main class="container">
+          {children}
+        </main>
+      </body>
+    </html>
+  );
+}
+
+const styles = `
+  /* Josh's CSS Reset */
+  *, *::before, *::after { box-sizing: border-box; }
+  * { margin: 0; }
+  body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
+  img, picture, video, canvas, svg { display: block; max-width: 100%; }
+  input, button, textarea, select { font: inherit; }
+  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
+
+  /* Custom Properties */
+  :root {
+    --primary-50: #eff6ff;
+    --primary-100: #dbeafe;
+    --primary-200: #bfdbfe;
+    --primary-300: #93c5fd;
+    --primary-400: #60a5fa;
+    --primary-500: #3b82f6;
+    --primary-600: #2563eb;
+    --primary-700: #1d4ed8;
+    --primary-800: #1e40af;
+    --primary-900: #1e3a8a;
+    
+    --gray-50: #f9fafb;
+    --gray-100: #f3f4f6;
+    --gray-200: #e5e7eb;
+    --gray-300: #d1d5db;
+    --gray-400: #9ca3af;
+    --gray-500: #6b7280;
+    --gray-600: #4b5563;
+    --gray-700: #374151;
+    --gray-800: #1f2937;
+    --gray-900: #111827;
+    
+    --error-500: #ef4444;
+    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  }
+
+  body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    background: var(--gray-50);
+    color: var(--gray-900);
+  }
+
+  .nav {
+    background: white;
+    border-bottom: 1px solid var(--gray-200);
+    padding: 1rem 0;
+  }
+
+  .nav-container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .nav-brand {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--primary-600);
+    text-decoration: none;
+  }
+
+  .nav-user {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .user-info {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .handle {
+    color: var(--gray-600);
+  }
+
+  .container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+  }
+
+  .btn {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease-in-out;
+  }
+
+  .btn-primary {
+    background: var(--primary-600);
+    color: white;
+  }
+
+  .btn-primary:hover {
+    background: var(--primary-700);
+    box-shadow: var(--shadow);
+  }
+
+  .btn-secondary {
+    background: var(--gray-100);
+    color: var(--gray-700);
+    border: 1px solid var(--gray-300);
+  }
+
+  .btn-secondary:hover {
+    background: var(--gray-200);
+  }
+
+  .card {
+    background: white;
+    border: 1px solid var(--gray-200);
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    box-shadow: var(--shadow);
+    margin-bottom: 1rem;
+  }
+
+  .form-group {
+    margin-bottom: 1rem;
+  }
+
+  .form-label {
+    display: block;
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+    color: var(--gray-700);
+  }
+
+  .form-input {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--gray-300);
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+  }
+
+  .form-input:focus {
+    outline: none;
+    border-color: var(--primary-500);
+    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
+  }
+
+  .status-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin: 1rem 0;
+  }
+
+  .status-option {
+    width: 3rem;
+    height: 3rem;
+    border: 2px solid var(--gray-200);
+    border-radius: 50%;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: all 0.15s ease-in-out;
+  }
+
+  .status-option:hover {
+    border-color: var(--primary-300);
+    box-shadow: var(--shadow);
+  }
+
+  .status-timeline {
+    margin-top: 2rem;
+  }
+
+  .status-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 0;
+    border-bottom: 1px solid var(--gray-100);
+  }
+
+  .status-item:last-child {
+    border-bottom: none;
+  }
+
+  .status-emoji {
+    font-size: 1.5rem;
+    width: 2.5rem;
+    text-align: center;
+  }
+
+  .status-meta {
+    color: var(--gray-600);
+    font-size: 0.875rem;
+  }
+
+  .error {
+    color: var(--error-500);
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+    padding: 0.75rem;
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    border-radius: 0.375rem;
+    margin-bottom: 1rem;
+  }
+
+  .form-container {
+    margin-top: 1.5rem;
+  }
+
+  .form-help {
+    font-size: 0.75rem;
+    color: var(--gray-500);
+    margin-top: 0.25rem;
+  }
+
+  .btn-block {
+    width: 100%;
+  }
+
+  .btn-text {
+    display: inline;
+  }
+
+  .signup-prompt {
+    margin-top: 1.5rem;
+    text-align: center;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--gray-200);
+  }
+
+  .link {
+    color: var(--primary-600);
+    text-decoration: none;
+  }
+
+  .link:hover {
+    text-decoration: underline;
+  }
+
+  .htmx-indicator {
+    display: none;
+    color: var(--gray-500);
+    font-size: 0.875rem;
+  }
+
+  .htmx-request .htmx-indicator {
+    display: inline;
+  }
+
+  .htmx-request .btn-text {
+    display: none;
+  }
+`;

src/components/LoginPage.tsx

···
+interface LoginPageProps {
+  error?: string;
+}
+
+export function LoginPage({ error }: LoginPageProps) {
+  return (
+    <div class="card">
+      <h1>Sign In to Statusphere</h1>
+      <p class="status-meta">
+        Share your current status with a single emoji using your AT Protocol identity.
+      </p>
+      
+      {error && (
+        <div class="error" role="alert">
+          {error}
+        </div>
+      )}
+      
+      <form 
+        method="post" 
+        action="/oauth/authorize"
+        class="form-container"
+      >
+        <div class="form-group">
+          <label class="form-label" for="loginHint">
+            AT Protocol Handle
+          </label>
+          <input
+            type="text"
+            id="loginHint"
+            name="loginHint"
+            class="form-input"
+            placeholder="alice.bsky.social"
+            required
+          />
+          <div class="form-help">
+            Enter your Bluesky or AT Protocol handle
+          </div>
+        </div>
+        
+        <button type="submit" class="btn btn-primary btn-block">
+          Sign In with OAuth
+        </button>
+      </form>
+      
+      <div class="signup-prompt">
+        <p class="status-meta">
+          Don't have an account? 
+          <a href="https://bsky.app" target="_blank" rel="noopener" class="link">
+            Sign up on Bluesky
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+}

src/config.ts

···
+import { OAuthClient, DenoKVOAuthStorage } from "@slices/oauth";
+import { SessionStore, DenoKVAdapter, withOAuthSession } from "@slices/session";
+import { AtProtoClient } from "./generated_client.ts";
+
+// Environment configuration
+export const PORT = parseInt(Deno.env.get("PORT") || "8080");
+export const DATABASE_URL = Deno.env.get("DATABASE_URL") || "./statusphere.db";
+export const OAUTH_CLIENT_ID = Deno.env.get("OAUTH_CLIENT_ID") || "";
+export const OAUTH_CLIENT_SECRET = Deno.env.get("OAUTH_CLIENT_SECRET") || "";
+export const OAUTH_REDIRECT_URI =
+  Deno.env.get("OAUTH_REDIRECT_URI") ||
+  `http://localhost:${PORT}/oauth/callback`;
+export const OAUTH_AIP_BASE_URL =
+  Deno.env.get("OAUTH_AIP_BASE_URL") || "https://bsky.social";
+export const SLICE_URI =
+  Deno.env.get("SLICE_URI") ||
+  "at://did:plc:bcgltzqazw5tb6k2g3ttenbj/social.slices.slice/3lx5y476bws2q";
+export const SLICES_API_URL = Deno.env.get("SLICES_API_URL") || "";
+
+// OAuth and Session setup
+// In Deno Deploy, don't specify a path to use the default KV store
+const kv = await Deno.openKv(
+  Deno.env.get("ENV") === "production" ? undefined : DATABASE_URL
+);
+const oauthStorage = new DenoKVOAuthStorage(kv);
+export const oauthClient = new OAuthClient(
+  {
+    clientId: OAUTH_CLIENT_ID,
+    clientSecret: OAUTH_CLIENT_SECRET,
+    authBaseUrl: OAUTH_AIP_BASE_URL,
+    redirectUri: OAUTH_REDIRECT_URI,
+    scopes: [
+      "openid",
+      "profile",
+      "email",
+      "atproto:atproto",
+      "atproto:transition:generic",
+    ],
+  },
+  oauthStorage
+);
+
+export const sessionStore = new SessionStore({
+  adapter: new DenoKVAdapter(kv),
+  cookieOptions: {
+    httpOnly: true,
+    secure: Deno.env.get("ENV") === "production",
+    sameSite: "lax",
+    path: "/",
+  },
+});
+
+export const oauthSessions = withOAuthSession(sessionStore, oauthClient, {
+  autoRefresh: true,
+});
+
+// Slices AT Protocol client
+export const atprotoClient = new AtProtoClient(
+  SLICES_API_URL,
+  SLICE_URI,
+  oauthClient
+);

src/generated_client.ts

···
+// Generated TypeScript client for AT Protocol records
+// Generated at: 2025-08-28 00:22:31 UTC
+// Lexicons: 2
+
+/**
+ * @example Usage
+ * ```ts
+ * import { AtProtoClient } from "./generated_client.ts";
+ *
+ * const client = new AtProtoClient(
+ *   'https://slices-api.fly.dev',
+ *   'at://did:plc:bcgltzqazw5tb6k2g3ttenbj/social.slices.slice/3lx5y476bws2q'
+ * );
+ *
+ * // List records from the app.bsky.actor.profile collection
+ * const records = await client.app.bsky.actor.profile.listRecords();
+ *
+ * // Get a specific record
+ * const record = await client.app.bsky.actor.profile.getRecord({
+ *   uri: 'at://did:plc:example/app.bsky.actor.profile/3abc123'
+ * });
+ *
+ * // Search records in the collection
+ * const searchResults = await client.app.bsky.actor.profile.searchRecords({
+ *   query: "example search term"
+ * });
+ *
+ * // Search specific field
+ * const fieldSearch = await client.app.bsky.actor.profile.searchRecords({
+ *   query: "blog",
+ *   field: "title"
+ * });
+ *
+ * // Serve the records as JSON
+ * Deno.serve(async () => new Response(JSON.stringify(records.records.map(r => r.value))));
+ * ```
+ */
+
+import { OAuthClient } from "@slices/oauth";
+
+export interface RecordResponse<T> {
+  uri: string;
+  cid: string;
+  did: string;
+  collection: string;
+  value: T;
+  indexedAt: string;
+}
+
+export interface ListRecordsResponse<T> {
+  records: RecordResponse<T>[];
+  cursor?: string;
+}
+
+export interface GetActorsResponse {
+  actors: Actor[];
+  cursor?: string;
+}
+
+export interface ListRecordsParams<TSortField extends string = string> {
+  author?: string;
+  authors?: string[];
+  limit?: number;
+  cursor?: string;
+  sort?:
+    | `${TSortField}:${"asc" | "desc"}`
+    | `${TSortField}:${"asc" | "desc"},${TSortField}:${"asc" | "desc"}`;
+}
+
+export interface GetRecordParams {
+  uri: string;
+}
+
+export interface GetActorsParams {
+  search?: string;
+  dids?: string[];
+  limit?: number;
+  cursor?: string;
+}
+
+export interface SearchRecordsParams<TSortField extends string = string> {
+  query: string;
+  field?: string;
+  limit?: number;
+  cursor?: string;
+  sort?:
+    | `${TSortField}:${"asc" | "desc"}`
+    | `${TSortField}:${"asc" | "desc"},${TSortField}:${"asc" | "desc"}`;
+}
+
+export interface IndexedRecord {
+  uri: string;
+  cid: string;
+  did: string;
+  collection: string;
+  value: Record<string, unknown>;
+  indexedAt: string;
+}
+
+export interface Actor {
+  did: string;
+  handle?: string;
+  sliceUri: string;
+  indexedAt: string;
+}
+
+export interface CodegenXrpcRequest {
+  target: string;
+  slice: string;
+}
+
+export interface CodegenXrpcResponse {
+  success: boolean;
+  generatedCode?: string;
+  error?: string;
+}
+
+export interface BulkSyncParams {
+  collections?: string[];
+  externalCollections?: string[];
+  repos?: string[];
+  limitPerRepo?: number;
+}
+
+export interface BulkSyncOutput {
+  success: boolean;
+  totalRecords: number;
+  collectionsSynced: string[];
+  reposProcessed: number;
+  message: string;
+}
+
+export interface SyncJobResponse {
+  success: boolean;
+  jobId?: string;
+  message: string;
+}
+
+export interface SyncJobResult {
+  success: boolean;
+  totalRecords: number;
+  collectionsSynced: string[];
+  reposProcessed: number;
+  message: string;
+}
+
+export interface JobStatus {
+  jobId: string;
+  status: string;
+  createdAt: string;
+  startedAt?: string;
+  completedAt?: string;
+  result?: SyncJobResult;
+  error?: string;
+  retryCount: number;
+}
+
+export interface GetJobStatusParams {
+  jobId: string;
+}
+
+export interface GetJobHistoryParams {
+  userDid: string;
+  sliceUri: string;
+  limit?: number;
+}
+
+export type GetJobHistoryResponse = JobStatus[];
+
+export interface CollectionStats {
+  collection: string;
+  recordCount: number;
+  uniqueActors: number;
+}
+
+export interface SliceStatsParams {
+  slice: string;
+}
+
+export interface SliceStatsOutput {
+  success: boolean;
+  collections: string[];
+  collectionStats: CollectionStats[];
+  totalLexicons: number;
+  totalRecords: number;
+  totalActors: number;
+  message?: string;
+}
+
+export interface SliceRecordsParams {
+  slice: string;
+  collection: string;
+  repo?: string;
+  limit?: number;
+  cursor?: string;
+}
+
+export interface SliceRecordsOutput {
+  success: boolean;
+  records: IndexedRecord[];
+  cursor?: string;
+  message?: string;
+}
+
+export interface UploadBlobRequest {
+  data: ArrayBuffer | Uint8Array;
+  mimeType: string;
+}
+
+export interface BlobRef {
+  $type: string;
+  ref: string;
+  mimeType: string;
+  size: number;
+}
+
+export interface UploadBlobResponse {
+  blob: BlobRef;
+}
+
+export interface CollectionOperations<T> {
+  listRecords(params?: ListRecordsParams): Promise<ListRecordsResponse<T>>;
+  getRecord(params: GetRecordParams): Promise<RecordResponse<T>>;
+  searchRecords(params: SearchRecordsParams): Promise<ListRecordsResponse<T>>;
+}
+
+export interface AppBskyActorProfileRecord {
+  /** Small image to be displayed next to posts from account. AKA, 'profile picture' */
+  avatar?: BlobRef;
+  /** Larger horizontal image to display behind profile view. */
+  banner?: BlobRef;
+  createdAt?: string;
+  /** Free-form profile description text. */
+  description?: string;
+  displayName?: string;
+}
+
+export type AppBskyActorProfileRecordSortFields =
+  | "createdAt"
+  | "description"
+  | "displayName";
+
+export interface XyzStatusphereStatusRecord {
+  createdAt: string;
+  status: string;
+}
+
+export type XyzStatusphereStatusRecordSortFields = "createdAt" | "status";
+
+class BaseClient {
+  protected readonly baseUrl: string;
+  protected oauthClient?: OAuthClient;
+
+  constructor(baseUrl: string, oauthClient?: OAuthClient) {
+    this.baseUrl = baseUrl;
+    this.oauthClient = oauthClient;
+  }
+
+  protected async ensureValidToken(): Promise<void> {
+    if (!this.oauthClient) {
+      throw new Error("OAuth client not configured");
+    }
+
+    await this.oauthClient.ensureValidToken();
+  }
+
+  protected async makeRequest<T = unknown>(
+    endpoint: string,
+    method?: "GET" | "POST" | "PUT" | "DELETE",
+    params?: Record<string, unknown> | unknown
+  ): Promise<T> {
+    return this.makeRequestWithRetry(endpoint, method, params, false);
+  }
+
+  private async makeRequestWithRetry<T = unknown>(
+    endpoint: string,
+    method?: "GET" | "POST" | "PUT" | "DELETE",
+    params?: Record<string, unknown> | unknown,
+    isRetry?: boolean
+  ): Promise<T> {
+    isRetry = isRetry ?? false;
+    const httpMethod = method || "GET";
+    let url = `${this.baseUrl}/xrpc/${endpoint}`;
+
+    const requestInit: RequestInit = {
+      method: httpMethod,
+      headers: {},
+    };
+
+    // Add authorization header if OAuth client is available
+    if (this.oauthClient) {
+      try {
+        const tokens = await this.oauthClient.ensureValidToken();
+        if (tokens.accessToken) {
+          (requestInit.headers as Record<string, string>)[
+            "Authorization"
+          ] = `${tokens.tokenType} ${tokens.accessToken}`;
+        }
+      } catch (tokenError) {
+        // For write operations, OAuth tokens are required
+        if (httpMethod !== "GET") {
+          throw new Error(
+            `Authentication required: OAuth tokens are invalid or expired. Please log in again.`
+          );
+        }
+
+        // For read operations, continue without auth (allow read-only operations)
+      }
+    }
+
+    if (httpMethod === "GET" && params) {
+      const searchParams = new URLSearchParams();
+      Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null) {
+          searchParams.append(key, String(value));
+        }
+      });
+      const queryString = searchParams.toString();
+      if (queryString) {
+        url += "?" + queryString;
+      }
+    } else if (httpMethod !== "GET" && params) {
+      // Regular API endpoints expect JSON
+      (requestInit.headers as Record<string, string>)["Content-Type"] =
+        "application/json";
+      requestInit.body = JSON.stringify(params);
+    }
+
+    const response = await fetch(url, requestInit);
+    if (!response.ok) {
+      // Handle 404 gracefully for GET requests
+      if (response.status === 404 && httpMethod === "GET") {
+        return null as T;
+      }
+
+      // Handle 401 Unauthorized - attempt token refresh and retry once
+      if (
+        response.status === 401 &&
+        !isRetry &&
+        this.oauthClient &&
+        httpMethod !== "GET"
+      ) {
+        try {
+          // Force token refresh by calling ensureValidToken again
+          await this.oauthClient.ensureValidToken();
+          // Retry the request once with refreshed tokens
+          return this.makeRequestWithRetry(endpoint, method, params, true);
+        } catch (_refreshError) {
+          throw new Error(
+            `Authentication required: OAuth tokens are invalid or expired. Please log in again.`
+          );
+        }
+      }
+
+      throw new Error(
+        `Request failed: ${response.status} ${response.statusText}`
+      );
+    }
+
+    return (await response.json()) as T;
+  }
+}
+
+class ProfileActorBskyAppClient extends BaseClient {
+  private readonly sliceUri: string;
+
+  constructor(baseUrl: string, sliceUri: string, oauthClient?: OAuthClient) {
+    super(baseUrl, oauthClient);
+    this.sliceUri = sliceUri;
+  }
+
+  async listRecords(
+    params?: ListRecordsParams<AppBskyActorProfileRecordSortFields>
+  ): Promise<ListRecordsResponse<AppBskyActorProfileRecord>> {
+    const requestParams = { ...params, slice: this.sliceUri };
+    return await this.makeRequest<
+      ListRecordsResponse<AppBskyActorProfileRecord>
+    >("app.bsky.actor.profile.list", "GET", requestParams);
+  }
+
+  async getRecord(
+    params: GetRecordParams
+  ): Promise<RecordResponse<AppBskyActorProfileRecord>> {
+    const requestParams = { ...params, slice: this.sliceUri };
+    return await this.makeRequest<RecordResponse<AppBskyActorProfileRecord>>(
+      "app.bsky.actor.profile.get",
+      "GET",
+      requestParams
+    );
+  }
+
+  async searchRecords(
+    params: SearchRecordsParams<AppBskyActorProfileRecordSortFields>
+  ): Promise<ListRecordsResponse<AppBskyActorProfileRecord>> {
+    const requestParams = { ...params, slice: this.sliceUri };
+    return await this.makeRequest<
+      ListRecordsResponse<AppBskyActorProfileRecord>
+    >("app.bsky.actor.profile.searchRecords", "GET", requestParams);
+  }
+
+  async createRecord(
+    record: AppBskyActorProfileRecord,
+    useSelfRkey?: boolean
+  ): Promise<{ uri: string; cid: string }> {
+    const recordWithType = { $type: "app.bsky.actor.profile", ...record };
+    const payload = useSelfRkey
+      ? { ...recordWithType, rkey: "self" }
+      : recordWithType;
+    return await this.makeRequest<{ uri: string; cid: string }>(
+      "app.bsky.actor.profile.create",
+      "POST",
+      payload
+    );
+  }
+
+  async updateRecord(
+    rkey: string,
+    record: AppBskyActorProfileRecord
+  ): Promise<{ uri: string; cid: string }> {
+    const recordWithType = { $type: "app.bsky.actor.profile", ...record };
+    return await this.makeRequest<{ uri: string; cid: string }>(
+      "app.bsky.actor.profile.update",
+      "POST",
+      { rkey, record: recordWithType }
+    );
+  }
+
+  async deleteRecord(rkey: string): Promise<void> {
+    return await this.makeRequest<void>(
+      "app.bsky.actor.profile.delete",
+      "POST",
+      { rkey }
+    );
+  }
+}
+
+class ActorBskyAppClient extends BaseClient {
+  readonly profile: ProfileActorBskyAppClient;
+  private readonly sliceUri: string;
+
+  constructor(baseUrl: string, sliceUri: string, oauthClient?: OAuthClient) {
+    super(baseUrl, oauthClient);
+    this.sliceUri = sliceUri;
+    this.profile = new ProfileActorBskyAppClient(
+      baseUrl,
+      sliceUri,
+      oauthClient
+    );
+  }
+}
+
+class BskyAppClient extends BaseClient {
+  readonly actor: ActorBskyAppClient;
+  private readonly sliceUri: string;
+
+  constructor(baseUrl: string, sliceUri: string, oauthClient?: OAuthClient) {
+    super(baseUrl, oauthClient);
+    this.sliceUri = sliceUri;
+    this.actor = new ActorBskyAppClient(baseUrl, sliceUri, oauthClient);
+  }
+}
+
+class AppClient extends BaseClient {
+  readonly bsky: BskyAppClient;
+  private readonly sliceUri: string;
+
+  constructor(baseUrl: string, sliceUri: string, oauthClient?: OAuthClient) {
+    super(baseUrl, oauthClient);
+    this.sliceUri = sliceUri;
+    this.bsky = new BskyAppClient(baseUrl, sliceUri, oauthClient);
+  }
+}
+
+class StatusStatusphereXyzClient extends BaseClient {
+  private readonly sliceUri: string;
+
+  constructor(baseUrl: string, sliceUri: string, oauthClient?: OAuthClient) {
+    super(baseUrl, oauthClient);
+    this.sliceUri = sliceUri;
+  }
+
+  async listRecords(
+    params?: ListRecordsParams<XyzStatusphereStatusRecordSortFields>
+  ): Promise<ListRecordsResponse<XyzStatusphereStatusRecord>> {
+    const requestParams = { ...params, slice: this.sliceUri };
+    return await this.makeRequest<
+      ListRecordsResponse<XyzStatusphereStatusRecord>
+    >("xyz.statusphere.status.list", "GET", requestParams);
+  }
+
+  async getRecord(
+    params: GetRecordParams
+  ): Promise<RecordResponse<XyzStatusphereStatusRecord>> {
+    const requestParams = { ...params, slice: this.sliceUri };
+    return await this.makeRequest<RecordResponse<XyzStatusphereStatusRecord>>(
+      "xyz.statusphere.status.get",
+      "GET",
+      requestParams
+    );
+  }
+
+  async searchRecords(
+    params: SearchRecordsParams<XyzStatusphereStatusRecordSortFields>
+  ): Promise<ListRecordsResponse<XyzStatusphereStatusRecord>> {
+    const requestParams = { ...params, slice: this.sliceUri };
+    return await this.makeRequest<
+      ListRecordsResponse<XyzStatusphereStatusRecord>
+    >("xyz.statusphere.status.searchRecords", "GET", requestParams);
+  }
+
+  async createRecord(
+    record: XyzStatusphereStatusRecord,
+    useSelfRkey?: boolean
+  ): Promise<{ uri: string; cid: string }> {
+    const recordWithType = { $type: "xyz.statusphere.status", ...record };
+    const payload = useSelfRkey
+      ? { ...recordWithType, rkey: "self" }
+      : recordWithType;
+    return await this.makeRequest<{ uri: string; cid: string }>(
+      "xyz.statusphere.status.create",
+      "POST",
+      payload
+    );
+  }
+
+  async updateRecord(
+    rkey: string,
+    record: XyzStatusphereStatusRecord
+  ): Promise<{ uri: string; cid: string }> {
+    const recordWithType = { $type: "xyz.statusphere.status", ...record };
+    return await this.makeRequest<{ uri: string; cid: string }>(
+      "xyz.statusphere.status.update",
+      "POST",
+      { rkey, record: recordWithType }
+    );
+  }
+
+  async deleteRecord(rkey: string): Promise<void> {
+    return await this.makeRequest<void>(
+      "xyz.statusphere.status.delete",
+      "POST",
+      { rkey }
+    );
+  }
+}
+
+class StatusphereXyzClient extends BaseClient {
+  readonly status: StatusStatusphereXyzClient;
+  private readonly sliceUri: string;
+
+  constructor(baseUrl: string, sliceUri: string, oauthClient?: OAuthClient) {
+    super(baseUrl, oauthClient);
+    this.sliceUri = sliceUri;
+    this.status = new StatusStatusphereXyzClient(
+      baseUrl,
+      sliceUri,
+      oauthClient
+    );
+  }
+}
+
+class XyzClient extends BaseClient {
+  readonly statusphere: StatusphereXyzClient;
+  private readonly sliceUri: string;
+
+  constructor(baseUrl: string, sliceUri: string, oauthClient?: OAuthClient) {
+    super(baseUrl, oauthClient);
+    this.sliceUri = sliceUri;
+    this.statusphere = new StatusphereXyzClient(baseUrl, sliceUri, oauthClient);
+  }
+}
+
+export class AtProtoClient extends BaseClient {
+  readonly app: AppClient;
+  readonly xyz: XyzClient;
+  readonly oauth?: OAuthClient;
+  private readonly sliceUri: string;
+
+  constructor(baseUrl: string, sliceUri: string, oauthClient?: OAuthClient) {
+    super(baseUrl, oauthClient);
+    this.sliceUri = sliceUri;
+    this.app = new AppClient(baseUrl, sliceUri, oauthClient);
+    this.xyz = new XyzClient(baseUrl, sliceUri, oauthClient);
+    this.oauth = this.oauthClient;
+  }
+
+  async getActors(params: GetActorsParams): Promise<GetActorsResponse> {
+    const requestParams = { ...params, slice: this.sliceUri };
+    return await this.makeRequest<GetActorsResponse>(
+      "social.slices.slice.getActors",
+      "GET",
+      requestParams
+    );
+  }
+
+  uploadBlob(request: UploadBlobRequest): Promise<UploadBlobResponse> {
+    return this.uploadBlobWithRetry(request, false);
+  }
+
+  private async uploadBlobWithRetry(
+    request: UploadBlobRequest,
+    isRetry?: boolean
+  ): Promise<UploadBlobResponse> {
+    isRetry = isRetry ?? false;
+    // Special handling for blob upload with binary data
+    const httpMethod = "POST";
+    const url = `${this.baseUrl}/xrpc/com.atproto.repo.uploadBlob`;
+
+    if (!this.oauthClient) {
+      throw new Error("OAuth client not configured");
+    }
+
+    const tokens = await this.oauthClient.ensureValidToken();
+
+    const requestInit: RequestInit = {
+      method: httpMethod,
+      headers: {
+        "Content-Type": request.mimeType,
+        Authorization: `${tokens.tokenType} ${tokens.accessToken}`,
+      },
+      body: request.data,
+    };
+
+    const response = await fetch(url, requestInit);
+    if (!response.ok) {
+      // Handle 401 Unauthorized - attempt token refresh and retry once
+      if (response.status === 401 && !isRetry && this.oauthClient) {
+        try {
+          // Force token refresh by calling ensureValidToken again
+          await this.oauthClient.ensureValidToken();
+          // Retry the request once with refreshed tokens
+          return this.uploadBlobWithRetry(request, true);
+        } catch (_refreshError) {
+          throw new Error(
+            `Authentication required: OAuth tokens are invalid or expired. Please log in again.`
+          );
+        }
+      }
+
+      throw new Error(
+        `Blob upload failed: ${response.status} ${response.statusText}`
+      );
+    }
+
+    return await response.json();
+  }
+}

src/main.ts

···
+import { render } from "preact-render-to-string";
+import { App } from "./components/App.tsx";
+import { StatusTimeline } from "./components/HomePage.tsx";
+import { PORT, sessionStore, oauthSessions, atprotoClient } from "./config.ts";
+import { AuthenticatedUser } from "./types.ts";
+import { fetchStatusesWithAuthors } from "./api.ts";
+
+async function handler(req: Request): Promise<Response> {
+  const url = new URL(req.url);
+  const pathname = url.pathname;
+
+  // Get current user session
+  const currentUser = await sessionStore.getCurrentUser(req);
+
+  // Routing
+  if (pathname === "/") {
+    return await handleHome(req, currentUser);
+  }
+
+  if (pathname === "/login") {
+    return handleLogin(req, currentUser);
+  }
+
+  if (pathname === "/oauth/authorize" && req.method === "POST") {
+    return await handleOAuthAuthorize(req);
+  }
+
+  if (pathname === "/oauth/callback") {
+    return await handleOAuthCallback(req);
+  }
+
+  if (pathname === "/logout" && req.method === "POST") {
+    return await handleLogout(req);
+  }
+
+  if (pathname === "/status" && req.method === "POST") {
+    return await handleSetStatus(req, currentUser);
+  }
+
+  return new Response("Not Found", { status: 404 });
+}
+
+async function handleHome(
+  _req: Request,
+  currentUser: AuthenticatedUser
+): Promise<Response> {
+  const statuses = await fetchStatusesWithAuthors();
+
+  const html = render(App({ currentUser, statuses }));
+
+  return new Response(`<!DOCTYPE html>${html}`, {
+    headers: { "Content-Type": "text/html" },
+  });
+}
+
+function handleLogin(req: Request, currentUser: AuthenticatedUser): Response {
+  if (currentUser.isAuthenticated) {
+    return Response.redirect(new URL("/", req.url), 302);
+  }
+
+  const html = render(App({ currentUser, page: "login" }));
+
+  return new Response(`<!DOCTYPE html>${html}`, {
+    headers: { "Content-Type": "text/html" },
+  });
+}
+
+async function handleOAuthAuthorize(req: Request): Promise<Response> {
+  await atprotoClient.oauth?.logout();
+
+  const formData = await req.formData();
+  const loginHint = formData.get("loginHint") as string;
+
+  const authResult = await atprotoClient.oauth!.authorize({ loginHint });
+
+  return Response.redirect(authResult.authorizationUrl, 302);
+}
+
+async function handleOAuthCallback(req: Request): Promise<Response> {
+  const url = new URL(req.url);
+  const code = url.searchParams.get("code");
+  const state = url.searchParams.get("state");
+
+  if (!code || !state) {
+    return new Response("Missing OAuth parameters", { status: 400 });
+  }
+
+  await atprotoClient.oauth!.handleCallback({ code, state });
+
+  const sessionId = await oauthSessions.createOAuthSession();
+
+  if (!sessionId) {
+    return new Response("Failed to create session", { status: 500 });
+  }
+
+  const sessionCookie = sessionStore.createSessionCookie(sessionId);
+
+  return new Response(null, {
+    status: 302,
+    headers: {
+      Location: new URL("/", req.url).toString(),
+      "Set-Cookie": sessionCookie,
+    },
+  });
+}
+
+async function handleLogout(req: Request): Promise<Response> {
+  const session = await sessionStore.getSessionFromRequest(req);
+
+  if (session) {
+    await oauthSessions.logout(session.sessionId);
+  }
+
+  const clearCookie = sessionStore.createLogoutCookie();
+
+  return new Response(null, {
+    status: 302,
+    headers: {
+      Location: new URL("/login", req.url).toString(),
+      "Set-Cookie": clearCookie,
+    },
+  });
+}
+
+async function handleSetStatus(
+  req: Request,
+  currentUser: AuthenticatedUser
+): Promise<Response> {
+  if (!currentUser.isAuthenticated) {
+    // For HTMX requests, send redirect header
+    const isHtmxRequest = req.headers.get("HX-Request") === "true";
+    if (isHtmxRequest) {
+      return new Response(null, {
+        status: 200,
+        headers: {
+          "HX-Redirect": "/login",
+        },
+      });
+    }
+    return Response.redirect(new URL("/login", req.url), 302);
+  }
+
+  const isHtmxRequest = req.headers.get("HX-Request") === "true";
+
+  const formData = await req.formData();
+  const status = formData.get("status") as string;
+
+  try {
+    await atprotoClient.xyz.statusphere.status.createRecord({
+      status,
+      createdAt: new Date().toISOString(),
+    });
+  } catch (error) {
+    console.error("Error setting status:", error);
+    return new Response("Error setting status", { status: 500 });
+  }
+
+  if (isHtmxRequest) {
+    // Return updated timeline for HTMX
+    try {
+      const statuses = await fetchStatusesWithAuthors();
+      const html = render(StatusTimeline({ statuses }));
+
+      return new Response(html, {
+        headers: { "Content-Type": "text/html" },
+      });
+    } catch (error) {
+      console.error("Error fetching updated statuses:", error);
+      return new Response("Error loading statuses", { status: 500 });
+    }
+  }
+
+  return Response.redirect(new URL("/", req.url), 302);
+}
+
+Deno.serve({ port: PORT, hostname: "0.0.0.0" }, handler);

src/types.ts

···
+import { XyzStatusphereStatusRecord, RecordResponse, Actor } from "./generated_client.ts";
+
+export interface AuthenticatedUser {
+  isAuthenticated: boolean;
+  handle?: string;
+  sub?: string;
+}
+
+export interface HydratedStatus extends RecordResponse<XyzStatusphereStatusRecord> {
+  author?: Actor;
+}