refactor frontend into feature folders, breaking out page components and fragments, also added a landing page

frontend/CLAUDE.md

···
-- dont use any
-- use htmx and hyperscript when possible
-- if jsx param is true don't pass the attribute value
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+```bash
+# Start development server with hot reload
+deno task dev
+
+# Start production server  
+deno task start
+
+# Format code
+deno fmt
+
+# Run tests
+deno test
+```
+
+## Architecture Overview
+
+This is a Deno-based web application that serves as the frontend for a "Slices" platform - an AT Protocol record management system. The application follows a feature-based architecture with server-side rendering using Preact and HTMX for interactivity.
+
+### Technology Stack
+- **Runtime**: Deno with TypeScript
+- **Frontend**: Preact with server-side rendering  
+- **Styling**: Tailwind CSS (via CDN)
+- **Interactivity**: HTMX + Hyperscript
+- **Routing**: Deno's standard HTTP routing
+- **Authentication**: OAuth with AT Protocol integration
+- **Database**: SQLite via `@slices/oauth` and `@slices/session`
+
+### Core Architecture Patterns
+
+#### Feature-Based Organization
+The codebase is organized by features rather than technical layers:
+
+```
+src/
+├── features/           # Feature modules
+│   ├── auth/          # Authentication (login/logout)
+│   ├── dashboard/     # Main dashboard (slice management)  
+│   ├── settings/      # User settings
+│   └── slices/        # Slice-specific features
+│       ├── overview/  # Slice overview
+│       ├── lexicon/   # AT Protocol lexicon management
+│       ├── records/   # Record browsing/filtering
+│       ├── oauth/     # OAuth client management
+│       ├── codegen/   # TypeScript client generation
+│       ├── sync/      # Data synchronization
+│       ├── jetstream/ # Real-time streaming
+│       └── api-docs/  # API documentation
+├── shared/            # Shared UI components
+├── routes/            # Route definitions and middleware
+├── utils/             # Utility functions
+└── lib/               # Core libraries
+```
+
+#### Handler Pattern
+Each feature follows a consistent pattern:
+- `handlers.tsx` - Route handlers that return Response objects
+- `templates/` - Preact components for rendering
+- `templates/fragments/` - Reusable UI components
+
+#### Authentication & Sessions
+- OAuth integration with AT Protocol using `@slices/oauth`
+- Session management with `@slices/session` 
+- Authentication state managed via `withAuth()` middleware
+- Automatic token refresh capabilities
+
+### Key Components
+
+#### Route System
+- All routes defined in `src/routes/mod.ts`
+- Feature routes exported from `src/features/*/handlers.tsx`
+- Middleware in `src/routes/middleware.ts` handles auth state
+
+#### Client Integration  
+- `src/client.ts` - Generated AT Protocol client for API communication
+- `src/config.ts` - Centralized configuration and service setup
+- Environment variables required: `OAUTH_CLIENT_ID`, `OAUTH_CLIENT_SECRET`, `OAUTH_REDIRECT_URI`, `OAUTH_AIP_BASE_URL`, `API_URL`, `SLICE_URI`
+
+#### Rendering System
+- `src/utils/render.tsx` - Unified HTML rendering with proper headers
+- Server-side rendering with Preact
+- HTMX for dynamic interactions without page reloads
+- Shared `Layout` component in `src/shared/fragments/Layout.tsx`
+
+### Development Guidelines
+
+#### Component Conventions
+- Use `.tsx` extension for components with JSX
+- Preact components for all UI rendering
+- HTMX attributes for interactive behavior
+- Tailwind classes for styling
+
+#### Feature Development
+When adding new features:
+1. Create feature directory under `src/features/`
+2. Add `handlers.tsx` with route definitions
+3. Create `templates/` directory with Preact components
+4. Export routes from feature and add to `src/routes/mod.ts`
+5. Follow existing authentication patterns using `withAuth()`
+
+#### Environment Setup
+The application requires a `.env` file with OAuth and API configuration. Missing environment variables will cause startup failures with descriptive error messages.
+
+### Request/Response Flow
+1. Request hits main server in `src/main.ts`
+2. Routes processed through `src/routes/mod.ts`
+3. Authentication middleware applies session state
+4. Feature handlers process requests and return rendered HTML
+5. HTMX handles partial page updates on client-side interactions

frontend/deno.json

···
     "preact": "npm:preact@^10.27.1",
     "preact-render-to-string": "npm:preact-render-to-string@^6.5.13",
     "typed-htmx": "npm:typed-htmx@^0.3.1",
-    "@std/http": "jsr:@std/http@^1.0.20"
+    "@std/http": "jsr:@std/http@^1.0.20",
+    "clsx": "npm:clsx@^2.1.1",
+    "tailwind-merge": "npm:tailwind-merge@^2.5.5"
   },
   "nodeModulesDir": "auto"
 }

frontend/deno.lock

···
     "npm:@shikijs/engine-oniguruma@^3.7.0": "3.11.0",
     "npm:@shikijs/types@^3.7.0": "3.11.0",
     "npm:@types/node@*": "22.15.15",
+    "npm:clsx@^2.1.1": "2.1.1",
     "npm:pg@^8.11.0": "8.16.3",
     "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:shiki@^3.7.0": "3.11.0",
+    "npm:tailwind-merge@^2.5.5": "2.6.0",
     "npm:typed-htmx@*": "0.3.1",
     "npm:typed-htmx@~0.3.1": "0.3.1"
   },
···
       "dependencies": [
         "npm:@shikijs/core",
         "npm:@shikijs/engine-oniguruma",
+        "npm:@shikijs/types",
         "npm:shiki"
       ]
     },
···
     "@slices/session@0.1.0": {
       "integrity": "63a4e35d70dcb2bb58e6117fdccf308f4a86cd9d94cf99412a3de9d35862cabc",
       "dependencies": [
+        "jsr:@slices/oauth",
         "npm:pg@^8.16.3"
       ]
     },
···
     "character-entities-legacy@3.0.0": {
       "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="
     },
+    "clsx@2.1.1": {
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+    },
     "comma-separated-tokens@2.0.3": {
       "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="
     },
···
         "character-entities-legacy"
       ]
     },
+    "tailwind-merge@2.6.0": {
+      "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA=="
+    },
     "trim-lines@3.0.1": {
       "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg=="
     },
···
       "jsr:@slices/session@0.1",
       "jsr:@std/assert@^1.0.14",
       "jsr:@std/http@^1.0.20",
+      "npm:clsx@^2.1.1",
       "npm:preact-render-to-string@^6.5.13",
       "npm:preact@^10.27.1",
+      "npm:tailwind-merge@^2.5.5",
       "npm:typed-htmx@~0.3.1"
     ]
   }

frontend/src/components/CodegenForm.tsx frontend/src/features/slices/codegen/templates/fragments/CodegenForm.tsx

···
+import { Button } from "../../../../../shared/fragments/Button.tsx";
+import { Select } from "../../../../../shared/fragments/Select.tsx";
+
 interface CodegenFormProps {
   sliceId: string;
 }
···
         hx-swap="innerHTML"
         className="space-y-4"
       >
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">
-            Output Format
-          </label>
-          <select
-            name="format"
-            className="block w-full border border-gray-300 rounded-md px-3 py-2"
-          >
-            <option value="typescript">TypeScript</option>
-          </select>
-        </div>
+        <Select label="Output Format" name="format">
+          <option value="typescript">TypeScript</option>
+        </Select>
 
-        <button
+        <Button
           type="submit"
-          className="bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-md flex items-center justify-center"
+          variant="warning"
+          class="flex items-center justify-center"
         >
           <i
             data-lucide="loader-2"
···
           ></i>
           <span className="htmx-indicator">Generating Client...</span>
           <span className="default-text">Generate Client</span>
-        </button>
+        </Button>
       </form>
 
       <div id="generationResult" className="mt-4">
···
       </div>
     </div>
   );
-}
+}

frontend/src/components/CodegenResult.tsx frontend/src/features/slices/codegen/templates/fragments/CodegenResult.tsx

···
 import { codeToHtml } from "jsr:@shikijs/shiki";
+import { Button } from "../../../../../shared/fragments/Button.tsx";
 
 interface CodegenResultProps {
   success: boolean;
···
           <h3 className="text-lg font-semibold text-green-800">
             ✅ Generated TypeScript Client
           </h3>
-          <button
-            type="button"
-            className="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded-md text-sm"
+          <Button
+            variant="success"
+            size="sm"
             _="on click js(me) navigator.clipboard.writeText(me.closest('.bg-green-50').querySelector('pre').textContent).then(() => { me.textContent = 'Copied!'; setTimeout(() => me.textContent = 'Copy to Clipboard', 2000); }) end"
           >
             Copy to Clipboard
-          </button>
+          </Button>
         </div>
         <div className="rounded overflow-hidden">
           <div

frontend/src/components/CreateSliceDialog.tsx frontend/src/features/dashboard/templates/fragments/CreateSliceDialog.tsx

···
+import { Input } from "../../../../shared/fragments/Input.tsx";
+import { Button } from "../../../../shared/fragments/Button.tsx";
+
 interface CreateSliceDialogProps {
   error?: string;
   name?: string;
···
             hx-swap="outerHTML"
             className="space-y-4"
           >
-            <div>
-              <label
-                htmlFor="name"
-                className="block text-sm font-medium text-gray-700 mb-1"
-              >
-                Slice Name
-              </label>
-              <input
-                type="text"
-                id="name"
-                name="name"
-                value={name}
-                required
-                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-                placeholder="Enter slice name"
-              />
-            </div>
+            <Input
+              type="text"
+              id="name"
+              name="name"
+              label="Slice Name"
+              required
+              defaultValue={name}
+              placeholder="Enter slice name"
+            />
 
             <div>
-              <label
-                htmlFor="domain"
-                className="block text-sm font-medium text-gray-700 mb-1"
-              >
-                Primary Domain
-              </label>
-              <input
+              <Input
                 type="text"
                 id="domain"
                 name="domain"
-                value={domain}
+                label="Primary Domain"
                 required
-                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                defaultValue={domain}
                 placeholder="e.g. social.grain"
               />
               <p className="mt-1 text-xs text-gray-500">
···
             </div>
 
             <div className="flex justify-end space-x-3 pt-4">
-              <button
+              <Button
                 type="button"
-                className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 hover:bg-gray-300 rounded-md"
+                variant="secondary"
                 _="on click remove #create-slice-modal"
               >
                 Cancel
-              </button>
-              <button
-                type="submit"
-                className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md"
-              >
+              </Button>
+              <Button type="submit" variant="primary">
                 Create Slice
-              </button>
+              </Button>
             </div>
           </form>
         </div>
       </div>
     </div>
   );
-}
+}

frontend/src/components/EmptyLexiconState.tsx frontend/src/features/slices/lexicon/templates/fragments/EmptyLexiconState.tsx

···
   }
 
   return content;
-}
+}

frontend/src/components/JetstreamLogs.tsx frontend/src/shared/fragments/LogViewer.tsx

···
-import type { LogEntry } from "../client.ts";
-import { formatTimestamp } from "../utils/time.ts";
+import type { LogEntry } from "../../client.ts";
+import { LogLevelBadge } from "./LogLevelBadge.tsx";
 
-interface JetstreamLogsProps {
+interface LogViewerProps {
   logs: LogEntry[];
+  emptyMessage?: string;
+  formatTimestamp?: (timestamp: string) => string;
 }
 
-function LogLevelBadge({ level }: { level: string }) {
-  const colors: Record<string, string> = {
-    error: "bg-red-100 text-red-800",
-    warn: "bg-yellow-100 text-yellow-800",
-    info: "bg-blue-100 text-blue-800",
-    debug: "bg-gray-100 text-gray-800",
-  };
-
-  return (
-    <span
-      className={`px-2 py-1 rounded text-xs font-medium ${
-        colors[level] || colors.debug
-      }`}
-    >
-      {level.toUpperCase()}
-    </span>
-  );
-}
-
-export function JetstreamLogs({ logs }: JetstreamLogsProps) {
+export function LogViewer({ 
+  logs, 
+  emptyMessage = "No logs available.",
+  formatTimestamp = (timestamp) => new Date(timestamp).toLocaleString()
+}: LogViewerProps) {
   if (logs.length === 0) {
     return (
       <div className="p-8 text-center text-gray-500">
-        No Jetstream logs available for this slice.
+        {emptyMessage}
       </div>
     );
   }

frontend/src/components/JetstreamStatus.tsx frontend/src/features/slices/jetstream/templates/fragments/JetstreamStatus.tsx

···
+import { Button } from "../../../../../shared/fragments/Button.tsx";
+
 interface JetstreamStatusProps {
   connected: boolean;
   status: string;
···
           </div>
           <div className="flex items-center gap-3">
             {sliceId && (
-              <a
+              <Button
                 href={`/slices/${sliceId}/jetstream/logs`}
-                className="bg-green-600 hover:bg-green-700 text-white text-xs px-3 py-1.5 rounded-md transition-colors whitespace-nowrap"
+                variant="success"
+                size="sm"
+                className="whitespace-nowrap"
               >
                 View Logs
-              </a>
+              </Button>
             )}
           </div>
         </div>
···
           </div>
           <div className="flex items-center gap-3">
             {sliceId && (
-              <a
+              <Button
                 href={`/slices/${sliceId}/jetstream/logs`}
-                className="bg-red-600 hover:bg-red-700 text-white text-xs px-3 py-1.5 rounded-md transition-colors whitespace-nowrap"
+                variant="danger"
+                size="sm"
+                className="whitespace-nowrap"
               >
                 View Logs
-              </a>
+              </Button>
             )}
           </div>
         </div>
       </div>
     );
   }
-}
+}

frontend/src/components/JobHistory.tsx frontend/src/features/slices/sync/templates/fragments/JobHistory.tsx

···
 
 function formatDate(dateString: string): string {
   const date = new Date(dateString);
-  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { 
-    hour: '2-digit', 
-    minute: '2-digit' 
-  });
+  return (
+    date.toLocaleDateString() +
+    " " +
+    date.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+    })
+  );
 }
 
 function extractDurationFromMessage(message: string): string {
-  // Extract duration from message like "Sync completed successfully in 424.233625ms"
   const match = message.match(/in ([\d.]+)(ms|s|m)/);
-  if (!match) return 'N/A';
-  
+  if (!match) return "N/A";
+
   const [, value, unit] = match;
   const numValue = parseFloat(value);
-  
-  if (unit === 'ms') {
+
+  if (unit === "ms") {
     if (numValue < 1000) return `${Math.round(numValue)}ms`;
     return `${(numValue / 1000).toFixed(1)}s`;
-  } else if (unit === 's') {
+  } else if (unit === "s") {
     if (numValue < 60) return `${numValue}s`;
     const minutes = Math.floor(numValue / 60);
     const seconds = Math.round(numValue % 60);
     return `${minutes}m ${seconds}s`;
-  } else if (unit === 'm') {
+  } else if (unit === "m") {
     return `${numValue}m`;
   }
-  
+
   return `${value}${unit}`;
 }
 
···
               <div className="flex-1">
                 <div className="flex items-center gap-2 mb-2">
                   {job.result?.success ? (
-                    <span className="text-green-600 font-medium">✅ Success</span>
+                    <span className="text-green-600 font-medium">
+                      ✅ Success
+                    </span>
                   ) : (
                     <span className="text-red-600 font-medium">❌ Failed</span>
                   )}
···
                         <strong>{job.result.totalRecords}</strong> records
                       </span>
                       <span>
-                        <strong>{job.result.reposProcessed}</strong> repositories
+                        <strong>{job.result.reposProcessed}</strong>{" "}
+                        repositories
                       </span>
                       <span>
-                        Collections: <strong>{job.result.collectionsSynced.join(', ')}</strong>
+                        Collections:{" "}
+                        <strong>
+                          {job.result.collectionsSynced.join(", ")}
+                        </strong>
                       </span>
                     </div>
                     {job.result.message && (
···
 
               <div className="flex flex-col items-end gap-2">
                 <div className="text-xs text-gray-400 font-mono">
-                  {job.jobId.split('-')[0]}...
+                  {job.jobId.split("-")[0]}...
                 </div>
                 <a
                   href={`/slices/${sliceId}/sync/logs/${job.jobId}`}

frontend/src/components/Layout.tsx

···
-import { JSX } from "preact";
-
-interface LayoutProps {
-  title?: string;
-  children: JSX.Element | JSX.Element[];
-  currentUser?: { handle?: string; isAuthenticated: boolean; avatar?: string };
-}
-
-export function Layout({
-  title = "Slices",
-  children,
-  currentUser,
-}: 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@1.9.10"></script>
-        <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
-        <script src="https://cdn.tailwindcss.com/3.4.1"></script>
-        <script src="https://unpkg.com/lucide@latest"></script>
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `
-
-          .htmx-indicator {
-            display: none;
-          }
-
-          .htmx-request .htmx-indicator {
-            display: inline;
-          }
-
-          .htmx-request .default-text {
-            display: none;
-          }
-        `,
-          }}
-        />
-      </head>
-      <body className="bg-gray-100 min-h-screen">
-        <nav className="bg-white text-gray-800 py-4 border-b border-gray-200">
-          <div className="max-w-5xl mx-auto px-4 flex justify-between items-center">
-            <a href="/" className="text-xl font-bold hover:text-blue-600">
-              Slices
-            </a>
-            <div className="flex items-center space-x-4">
-              {currentUser?.isAuthenticated ? (
-                <div className="flex items-center space-x-3">
-                  {currentUser.avatar && (
-                    <img
-                      src={currentUser.avatar}
-                      alt="Profile avatar"
-                      className="w-6 h-6 rounded-full"
-                    />
-                  )}
-                  <span className="text-sm text-gray-600">
-                    {currentUser.handle
-                      ? `@${currentUser.handle}`
-                      : "Authenticated User"}
-                  </span>
-                  <a
-                    href="/settings"
-                    className="text-sm text-gray-600 hover:text-gray-800"
-                  >
-                    Settings
-                  </a>
-                  <form method="post" action="/logout" className="inline">
-                    <button
-                      type="submit"
-                      className="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded"
-                    >
-                      Logout
-                    </button>
-                  </form>
-                </div>
-              ) : (
-                <a
-                  href="/login"
-                  className="text-sm bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded"
-                >
-                  Login
-                </a>
-              )}
-            </div>
-          </div>
-        </nav>
-        <main className="max-w-5xl mx-auto mt-8 px-4 pb-16 min-h-[calc(100vh-200px)]">
-          {children}
-        </main>
-      </body>
-    </html>
-  );
-}

frontend/src/components/LexiconListItem.tsx frontend/src/features/slices/lexicon/templates/fragments/LexiconListItem.tsx

···
-import { getRkeyFromUri } from "../utils/at-uri.ts";
+import { getRkeyFromUri } from "../../../../../utils/at-uri.ts";
+import { Button } from "../../../../../shared/fragments/Button.tsx";
 
 export function LexiconListItem({
   nsid,
···
           <p className="text-xs text-gray-400 font-mono">{uri}</p>
         </div>
         <div className="flex items-center space-x-2">
-          <button
+          <Button
             type="button"
+            variant="primary"
+            size="sm"
             hx-get={`/api/slices/${sliceId}/lexicons/${rkey}/view`}
             hx-target="#lexicon-modal"
             hx-swap="innerHTML"
-            className="inline-flex items-center px-2 py-1 border border-blue-300 rounded text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
           >
             <svg
               className="h-3 w-3 mr-1"
···
               />
             </svg>
             View
-          </button>
-          <button
+          </Button>
+          <Button
             type="button"
+            variant="danger"
+            size="sm"
             hx-delete={`/api/slices/${sliceId}/lexicons/${rkey}`}
             hx-target={`#lexicon-${rkey}`}
             hx-swap="outerHTML"
             hx-confirm="Are you sure you want to delete this lexicon?"
-            className="inline-flex items-center px-2 py-1 border border-red-300 rounded text-xs font-medium text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
           >
             <svg
               className="h-3 w-3 mr-1"
···
               />
             </svg>
             Delete
-          </button>
+          </Button>
         </div>
       </div>
     </div>
   );
-}
+}

frontend/src/components/LexiconSuccessMessage.tsx frontend/src/features/slices/lexicon/templates/fragments/LexiconSuccessMessage.tsx

···
       </div>
     </div>
   );
-}
+}

frontend/src/components/LexiconViewModal.tsx frontend/src/features/slices/lexicon/templates/fragments/LexiconViewModal.tsx

···
 import { codeToHtml } from "jsr:@shikijs/shiki";
-
-interface LexiconViewModalProps {
-  nsid: string;
-  definitions: string;
-  uri: string;
-  createdAt: string;
-}
+import { Button } from "../../../../../shared/fragments/Button.tsx";
 
 export async function LexiconViewModal({
   nsid,
   definitions,
   uri,
   createdAt,
-}: LexiconViewModalProps) {
-  // Parse and format the definitions JSON
+}: {
+  nsid: string;
+  definitions: string;
+  uri: string;
+  createdAt: string;
+}) {
   let formattedDefinitions = definitions;
   try {
     const parsed = JSON.parse(definitions);
···
     // Keep original if parsing fails
   }
 
-  // Apply Shiki syntax highlighting
   const highlightedJson = await codeToHtml(formattedDefinitions, {
     lang: "json",
     theme: "catppuccin-latte",
···
   return (
     <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50">
       <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden">
-        {/* Header */}
         <div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
           <div>
             <h3 className="text-lg font-semibold text-gray-900 font-mono">
···
           </button>
         </div>
 
-        {/* Content */}
         <div className="px-6 py-4 overflow-y-auto max-h-[calc(90vh-120px)]">
           <div className="mb-4">
             <label className="block text-sm font-medium text-gray-700 mb-2">
···
           </div>
         </div>
 
-        {/* Footer */}
         <div className="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
-          <button
+          <Button
             type="button"
-            _="on click js navigator.clipboard.writeText(me.previousElementSibling.textContent) then set my textContent to 'Copied!' then wait 2s then set my textContent to 'Copy JSON' end"
-            className="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            variant="secondary"
+            _="on click js navigator.clipboard.writeText(me.previousElementSibling.textContent) end then set my textContent to 'Copied!' then wait 2s then set my textContent to 'Copy JSON'"
           >
-            <svg
-              className="h-4 w-4 mr-2"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-              />
-            </svg>
             Copy JSON
-          </button>
+          </Button>
           <span className="hidden">{formattedDefinitions}</span>
-          <button
+          <Button
             type="button"
+            variant="primary"
             _="on click set #lexicon-modal's innerHTML to ''"
-            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
           >
             Close
-          </button>
+          </Button>
         </div>
       </div>
     </div>

frontend/src/components/OAuthClientModal.tsx

···
-import { OAuthClientDetails } from "../client.ts";
-
-interface OAuthClientModalProps {
-  sliceId: string;
-  sliceUri: string;
-  mode: "new" | "view";
-  clientData?: OAuthClientDetails;
-}
-
-export function OAuthClientModal({
-  sliceId,
-  sliceUri,
-  mode,
-  clientData,
-}: OAuthClientModalProps) {
-  if (mode === "view" && clientData) {
-    return (
-      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        <div className="bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
-          <form
-            hx-post={`/api/slices/${sliceId}/oauth/${encodeURIComponent(clientData.clientId)}/update`}
-            hx-target="#modal-container"
-            hx-swap="outerHTML"
-          >
-            <div className="flex justify-between items-start mb-4">
-              <h2 className="text-2xl font-semibold">OAuth Client Details</h2>
-              <button
-                type="button"
-                _="on click set #modal-container's innerHTML to ''"
-                className="text-gray-400 hover:text-gray-600"
-              >
-                ✕
-              </button>
-            </div>
-
-            <div className="space-y-4">
-              {/* Client ID - Read-only */}
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Client ID
-                </label>
-                <div className="font-mono text-sm bg-gray-100 p-2 rounded border">
-                  {clientData.clientId}
-                </div>
-              </div>
-
-              {/* Client Secret - Read-only, only shown once */}
-              {clientData.clientSecret && (
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
-                    Client Secret
-                  </label>
-                  <div className="font-mono text-sm bg-yellow-50 border border-yellow-200 p-2 rounded">
-                    <div className="text-yellow-800 text-xs mb-1">⚠️ Save this secret - it won't be shown again</div>
-                    {clientData.clientSecret}
-                  </div>
-                </div>
-              )}
-
-              {/* Client Name - Editable */}
-              <div>
-                <label
-                  htmlFor="clientName"
-                  className="block text-sm font-medium text-gray-700 mb-1"
-                >
-                  Client Name <span className="text-red-500">*</span>
-                </label>
-                <input
-                  type="text"
-                  id="clientName"
-                  name="clientName"
-                  required
-                  defaultValue={clientData.clientName}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                />
-              </div>
-
-              {/* Redirect URIs - Editable */}
-              <div>
-                <label
-                  htmlFor="redirectUris"
-                  className="block text-sm font-medium text-gray-700 mb-1"
-                >
-                  Redirect URIs <span className="text-red-500">*</span>
-                </label>
-                <textarea
-                  id="redirectUris"
-                  name="redirectUris"
-                  required
-                  rows={3}
-                  defaultValue={clientData.redirectUris.join('\n')}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                />
-                <p className="text-sm text-gray-500 mt-1">
-                  Enter one redirect URI per line
-                </p>
-              </div>
-
-              {/* Scope - Editable */}
-              <div>
-                <label
-                  htmlFor="scope"
-                  className="block text-sm font-medium text-gray-700 mb-1"
-                >
-                  Scope
-                </label>
-                <input
-                  type="text"
-                  id="scope"
-                  name="scope"
-                  defaultValue={clientData.scope || ''}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  placeholder="atproto:atproto"
-                />
-              </div>
-
-              {/* Client URI - Editable */}
-              <div>
-                <label
-                  htmlFor="clientUri"
-                  className="block text-sm font-medium text-gray-700 mb-1"
-                >
-                  Client URI
-                </label>
-                <input
-                  type="url"
-                  id="clientUri"
-                  name="clientUri"
-                  defaultValue={clientData.clientUri || ''}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  placeholder="https://example.com"
-                />
-              </div>
-
-              {/* Logo URI - Editable */}
-              <div>
-                <label
-                  htmlFor="logoUri"
-                  className="block text-sm font-medium text-gray-700 mb-1"
-                >
-                  Logo URI
-                </label>
-                <input
-                  type="url"
-                  id="logoUri"
-                  name="logoUri"
-                  defaultValue={clientData.logoUri || ''}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  placeholder="https://example.com/logo.png"
-                />
-              </div>
-
-              {/* Terms of Service URI - Editable */}
-              <div>
-                <label
-                  htmlFor="tosUri"
-                  className="block text-sm font-medium text-gray-700 mb-1"
-                >
-                  Terms of Service URI
-                </label>
-                <input
-                  type="url"
-                  id="tosUri"
-                  name="tosUri"
-                  defaultValue={clientData.tosUri || ''}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  placeholder="https://example.com/terms"
-                />
-              </div>
-
-              {/* Privacy Policy URI - Editable */}
-              <div>
-                <label
-                  htmlFor="policyUri"
-                  className="block text-sm font-medium text-gray-700 mb-1"
-                >
-                  Privacy Policy URI
-                </label>
-                <input
-                  type="url"
-                  id="policyUri"
-                  name="policyUri"
-                  defaultValue={clientData.policyUri || ''}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  placeholder="https://example.com/privacy"
-                />
-              </div>
-
-              <div className="flex justify-end gap-3 mt-6">
-                <button
-                  type="button"
-                  _="on click set #modal-container's innerHTML to ''"
-                  className="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-                >
-                  Update Client
-                </button>
-              </div>
-            </div>
-          </form>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
-        <form
-          hx-post={`/api/slices/${sliceId}/oauth/register`}
-          hx-target="#modal-container"
-          hx-swap="outerHTML"
-        >
-          <input type="hidden" name="sliceUri" value={sliceUri} />
-
-          <div className="flex justify-between items-start mb-4">
-            <h2 className="text-2xl font-semibold">Register OAuth Client</h2>
-            <button
-              type="button"
-              _="on click set #modal-container's innerHTML to ''"
-              className="text-gray-400 hover:text-gray-600"
-            >
-              ✕
-            </button>
-          </div>
-
-          <div className="space-y-4">
-            <div>
-              <label
-                htmlFor="clientName"
-                className="block text-sm font-medium text-gray-700 mb-1"
-              >
-                Client Name <span className="text-red-500">*</span>
-              </label>
-              <input
-                type="text"
-                id="clientName"
-                name="clientName"
-                required
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="My Application"
-              />
-            </div>
-
-            <div>
-              <label
-                htmlFor="redirectUris"
-                className="block text-sm font-medium text-gray-700 mb-1"
-              >
-                Redirect URIs <span className="text-red-500">*</span>
-              </label>
-              <textarea
-                id="redirectUris"
-                name="redirectUris"
-                required
-                rows={3}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="https://example.com/callback&#10;https://localhost:3000/callback"
-              />
-              <p className="text-sm text-gray-500 mt-1">
-                Enter one redirect URI per line
-              </p>
-            </div>
-
-            <div>
-              <label
-                htmlFor="scope"
-                className="block text-sm font-medium text-gray-700 mb-1"
-              >
-                Scope
-              </label>
-              <input
-                type="text"
-                id="scope"
-                name="scope"
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="atproto:atproto"
-              />
-            </div>
-
-            <div>
-              <label
-                htmlFor="clientUri"
-                className="block text-sm font-medium text-gray-700 mb-1"
-              >
-                Client URI
-              </label>
-              <input
-                type="url"
-                id="clientUri"
-                name="clientUri"
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="https://example.com"
-              />
-            </div>
-
-            <div>
-              <label
-                htmlFor="logoUri"
-                className="block text-sm font-medium text-gray-700 mb-1"
-              >
-                Logo URI
-              </label>
-              <input
-                type="url"
-                id="logoUri"
-                name="logoUri"
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="https://example.com/logo.png"
-              />
-            </div>
-
-            <div>
-              <label
-                htmlFor="tosUri"
-                className="block text-sm font-medium text-gray-700 mb-1"
-              >
-                Terms of Service URI
-              </label>
-              <input
-                type="url"
-                id="tosUri"
-                name="tosUri"
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="https://example.com/terms"
-              />
-            </div>
-
-            <div>
-              <label
-                htmlFor="policyUri"
-                className="block text-sm font-medium text-gray-700 mb-1"
-              >
-                Privacy Policy URI
-              </label>
-              <input
-                type="url"
-                id="policyUri"
-                name="policyUri"
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="https://example.com/privacy"
-              />
-            </div>
-
-            <div className="flex justify-end gap-3 mt-6">
-              <button
-                type="button"
-                _="on click set #modal-container's innerHTML to ''"
-                className="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300"
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-              >
-                Register Client
-              </button>
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}

frontend/src/components/OAuthDeleteResult.tsx

···
-interface OAuthDeleteResultProps {
-  success: boolean;
-  error?: string;
-}
-
-export function OAuthDeleteResult({ success, error }: OAuthDeleteResultProps) {
-  if (!success) {
-    return (
-      <div className="text-red-600">
-        Failed to delete OAuth client{error ? `: ${error}` : ""}
-      </div>
-    );
-  }
-
-  // Return empty for successful deletion (removes the row)
-  return null;
-}

frontend/src/components/OAuthRegistrationResult.tsx

···
-interface OAuthRegistrationResultProps {
-  success: boolean;
-  sliceId: string;
-  clientId?: string;
-  registrationToken?: string;
-  error?: string;
-}
-
-export function OAuthRegistrationResult({
-  success,
-  sliceId,
-  clientId,
-  registrationToken,
-  error,
-}: OAuthRegistrationResultProps) {
-  if (!success) {
-    return (
-      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-        ❌ Failed to register OAuth client: {error}
-      </div>
-    );
-  }
-
-  return (
-    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
-      <div class="font-semibold mb-2">
-        ✅ OAuth client registered successfully!
-      </div>
-      <div class="mb-2">
-        <span class="font-medium">Client ID:</span>{" "}
-        <code class="bg-green-200 px-1 rounded">{clientId}</code>
-      </div>
-      {registrationToken && (
-        <div class="bg-yellow-50 border border-yellow-400 text-yellow-800 p-3 rounded mb-3">
-          <div class="font-semibold mb-1">
-            ⚠️ Important: Save this registration access token
-          </div>
-          <div class="text-sm mb-2">
-            This token won't be shown again. Store it securely to manage this
-            client.
-          </div>
-          <code class="block bg-yellow-100 p-2 rounded text-xs break-all">
-            {registrationToken}
-          </code>
-        </div>
-      )}
-      <a
-        href={`/slices/${sliceId}/oauth`}
-        class="inline-block mt-4 px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 text-decoration-none"
-      >
-        Continue
-      </a>
-    </div>
-  );
-}

frontend/src/components/SettingsForm.tsx

···
-interface SettingsFormProps {
-  profile?: {
-    displayName?: string;
-    description?: string;
-    avatar?: string;
-  };
-  error?: string;
-}
-
-export function SettingsForm({ profile, error }: SettingsFormProps) {
-  return (
-    <div className="bg-white rounded-lg shadow-md p-6">
-      <h2 className="text-xl font-semibold text-gray-800 mb-4">
-        Profile Settings
-      </h2>
-
-      {error && (
-        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
-          {error}
-        </div>
-      )}
-
-      <form
-        hx-put="/api/profile"
-        hx-target="#settings-result"
-        hx-swap="innerHTML"
-        hx-encoding="multipart/form-data"
-        className="space-y-4"
-      >
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">
-            Display Name
-          </label>
-          <input
-            type="text"
-            name="displayName"
-            value={profile?.displayName || ""}
-            className="block w-full border border-gray-300 rounded-md px-3 py-2"
-            placeholder="Your display name"
-          />
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">
-            Description
-          </label>
-          <textarea
-            name="description"
-            rows={4}
-            className="block w-full border border-gray-300 rounded-md px-3 py-2"
-            placeholder="Free-form profile description text"
-          >
-            {profile?.description || ""}
-          </textarea>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 mb-2">
-            Avatar
-          </label>
-          <input
-            type="file"
-            name="avatar"
-            accept="image/*"
-            className="block w-full border border-gray-300 rounded-md px-3 py-2"
-          />
-        </div>
-
-        <button
-          type="submit"
-          className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-md"
-          hx-indicator="#loading-spinner"
-        >
-          <span
-            className="htmx-indicator"
-            id="loading-spinner"
-            style="display:none;"
-          >
-            Saving...
-          </span>
-          <span>Save Profile</span>
-        </button>
-      </form>
-
-      <div id="settings-result" className="mt-4">
-        {/* Results will be loaded here via htmx */}
-      </div>
-    </div>
-  );
-}

frontend/src/components/SettingsResult.tsx frontend/src/features/settings/templates/fragments/SettingsResult.tsx

···
       )}
     </div>
   );
-}
+}

frontend/src/components/SliceTabs.tsx frontend/src/features/slices/shared/fragments/SliceTabs.tsx

···
   return [
     { id: "overview", name: "Overview", href: `/slices/${sliceId}` },
     { id: "lexicon", name: "Lexicons", href: `/slices/${sliceId}/lexicon` },
-    { id: "records", name: "Records", href: `/slices/${sliceId}/records` },
     { id: "sync", name: "Sync", href: `/slices/${sliceId}/sync` },
+    { id: "records", name: "Records", href: `/slices/${sliceId}/records` },
     { id: "codegen", name: "Code Gen", href: `/slices/${sliceId}/codegen` },
     { id: "oauth", name: "OAuth Clients", href: `/slices/${sliceId}/oauth` },
     { id: "settings", name: "Settings", href: `/slices/${sliceId}/settings` },

frontend/src/components/SyncJobLogs.tsx

···
-import { formatTimestamp } from "../utils/time.ts";
-
-interface LogEntry {
-  id: number;
-  createdAt: string;
-  logType: string;
-  jobId?: string;
-  userDid?: string;
-  sliceUri?: string;
-  level: string;
-  message: string;
-  metadata?: Record<string, unknown>;
-}
-
-interface SyncJobLogsProps {
-  logs: LogEntry[];
-  jobId?: string;
-}
-
-function LogLevelBadge({ level }: { level: string }) {
-  const colors: Record<string, string> = {
-    error: "bg-red-100 text-red-800",
-    warn: "bg-yellow-100 text-yellow-800",
-    info: "bg-blue-100 text-blue-800",
-    debug: "bg-gray-100 text-gray-800",
-  };
-
-  return (
-    <span
-      className={`px-2 py-1 rounded text-xs font-medium ${
-        colors[level] || colors.debug
-      }`}
-    >
-      {level.toUpperCase()}
-    </span>
-  );
-}
-
-export function SyncJobLogs({ logs, jobId }: SyncJobLogsProps) {
-  if (logs.length === 0) {
-    return (
-      <div className="p-8 text-center text-gray-500">
-        No logs found for this job
-        {jobId && (
-          <div className="text-xs text-gray-400 mt-1 font-mono">
-            Job ID: {jobId}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  const errorCount = logs.filter((l) => l.level === "error").length;
-  const warnCount = logs.filter((l) => l.level === "warn").length;
-  const infoCount = logs.filter((l) => l.level === "info").length;
-
-  return (
-    <div className="divide-y divide-gray-200">
-      {/* Log Stats Header */}
-      <div className="p-4 bg-gray-50">
-        <div className="flex gap-4 text-sm">
-          <span>
-            Total logs: <strong>{logs.length}</strong>
-          </span>
-          {errorCount > 0 && (
-            <span className="text-red-600">
-              Errors: <strong>{errorCount}</strong>
-            </span>
-          )}
-          {warnCount > 0 && (
-            <span className="text-yellow-600">
-              Warnings: <strong>{warnCount}</strong>
-            </span>
-          )}
-          <span className="text-blue-600">
-            Info: <strong>{infoCount}</strong>
-          </span>
-        </div>
-      </div>
-
-      {/* Log Entries */}
-      <div className="max-h-[600px] overflow-y-auto">
-        {logs.map((log) => (
-          <div
-            key={log.id}
-            className={`p-3 hover:bg-gray-50 font-mono text-sm ${
-              log.level === "error"
-                ? "bg-red-50"
-                : log.level === "warn"
-                ? "bg-yellow-50"
-                : ""
-            }`}
-          >
-            <div className="flex items-start gap-3">
-              <span className="text-gray-400 text-xs">
-                {formatTimestamp(log.createdAt)}
-              </span>
-              <LogLevelBadge level={log.level} />
-              <div className="flex-1">
-                <div className="text-gray-800">{log.message}</div>
-                {log.metadata && Object.keys(log.metadata).length > 0 && (
-                  <details className="mt-2">
-                    <summary
-                      className="text-xs text-gray-500 cursor-pointer hover:text-gray-700"
-                      _="on click toggle .hidden on next <pre/>"
-                    >
-                      View metadata
-                    </summary>
-                    <pre className="mt-2 p-2 bg-gray-100 rounded text-xs overflow-x-auto hidden">
-                      {JSON.stringify(log.metadata, null, 2)}
-                    </pre>
-                  </details>
-                )}
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

frontend/src/components/SyncResult.tsx frontend/src/features/slices/sync/templates/fragments/SyncResult.tsx

···
       </div>
     </div>
   );
-}
+}

frontend/src/components/UpdateResult.tsx

···
-interface UpdateResultProps {
-  type: "success" | "error";
-  message: string;
-  showRefresh?: boolean;
-}
-
-export function UpdateResult({
-  type,
-  message,
-  showRefresh = false,
-}: UpdateResultProps) {
-  const colorClass = type === "success" ? "text-green-600" : "text-red-600";
-
-  return (
-    <div className={`${colorClass} text-sm`}>
-      {message}
-      {showRefresh && (
-        <>
-          {" "}
-          <a
-            href="#"
-            _="on click call window.location.reload()"
-            className="underline"
-          >
-            Refresh page
-          </a>{" "}
-          to see changes.
-        </>
-      )}
-    </div>
-  );
-}

frontend/src/features/auth/templates/LoginPage.tsx

···
+import type { AuthenticatedUser } from "../../../routes/middleware.ts";
+import { Layout } from "../../../shared/fragments/Layout.tsx";
+import { LoginForm } from "./fragments/LoginForm.tsx";
+import { ErrorAlert } from "./fragments/ErrorAlert.tsx";
+
+interface LoginPageProps {
+  error?: string;
+  currentUser?: AuthenticatedUser;
+}
+
+export function LoginPage({ error, currentUser }: LoginPageProps) {
+  return (
+    <Layout title="Login - Slice" currentUser={currentUser}>
+      <div className="max-w-md mx-auto mt-16">
+        <div className="bg-white rounded-lg shadow-md p-8">
+          <div className="text-center mb-8">
+            <h1 className="text-3xl font-bold text-gray-800 mb-2">
+              Welcome to Slices
+            </h1>
+            <p className="text-gray-600">
+              Sign in with your AT Protocol handle
+            </p>
+          </div>
+
+          {error && <ErrorAlert message={error} />}
+
+          <LoginForm />
+
+          <div className="mt-8 text-center">
+            <p className="text-sm text-gray-500 mb-4">
+              Don't have an AT Protocol account?
+            </p>
+            <div className="space-y-2">
+              <a
+                href="https://bsky.app"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block text-blue-600 hover:text-blue-800 text-sm"
+              >
+                Create account on Bluesky →
+              </a>
+              <a
+                href="https://atproto.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block text-blue-600 hover:text-blue-800 text-sm"
+              >
+                Learn about AT Protocol →
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}

frontend/src/features/auth/templates/fragments/ErrorAlert.tsx

···
+interface ErrorAlertProps {
+  message: string;
+}
+
+export function ErrorAlert({ message }: ErrorAlertProps) {
+  return (
+    <div className="bg-red-50 border border-red-200 rounded-md p-4 mb-6">
+      <p className="text-red-700 text-sm">{message}</p>
+    </div>
+  );
+}

frontend/src/features/auth/templates/fragments/LoginForm.tsx

···
+export function LoginForm() {
+  return (
+    <form method="post" action="/oauth/authorize" className="space-y-6">
+      <div>
+        <label
+          htmlFor="loginHint"
+          className="block text-sm font-medium text-gray-700 mb-2"
+        >
+          AT Protocol Handle
+        </label>
+        <input
+          type="text"
+          id="loginHint"
+          name="loginHint"
+          placeholder="alice.bsky.social"
+          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          required
+        />
+        <p className="text-xs text-gray-500 mt-1">
+          Enter your Bluesky handle or custom domain
+        </p>
+      </div>
+
+      <button
+        type="submit"
+        className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition-colors"
+      >
+        Sign In with OAuth
+      </button>
+    </form>
+  );
+}

frontend/src/features/dashboard/handlers.tsx

···
+import type { Route } from "@std/http/unstable-route";
+import { renderHTML } from "../../utils/render.tsx";
+import { hxRedirect } from "../../utils/htmx.ts";
+import { withAuth, requireAuth } from "../../routes/middleware.ts";
+import { atprotoClient } from "../../config.ts";
+import { DashboardPage } from "./templates/DashboardPage.tsx";
+import { CreateSliceDialog } from "./templates/fragments/CreateSliceDialog.tsx";
+import type { SocialSlicesSlice } from "../../client.ts";
+
+interface Slice extends SocialSlicesSlice {
+  id: string;
+}
+
+async function handleProfilePage(req: Request, params?: URLPatternResult): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const handle = params?.pathname.groups.handle as string;
+
+  // Get actor by handle to find DID
+  let profileDid: string;
+  try {
+    const actors = await atprotoClient.getActors({
+      where: { handle: { eq: handle } }
+    });
+    
+    if (actors.actors.length === 0) {
+      return new Response("Profile not found", { status: 404 });
+    }
+    
+    profileDid = actors.actors[0].did;
+  } catch (error) {
+    console.error("Failed to get actor:", error);
+    return new Response("Profile not found", { status: 404 });
+  }
+
+  // Fetch profile record using the DID
+  let _profileRecord;
+  try {
+    const profileResponse = await atprotoClient.app.bsky.actor.profile.getRecords({
+      where: { did: { eq: profileDid } }
+    });
+    _profileRecord = profileResponse.records[0];
+  } catch (error) {
+    console.error("Failed to fetch profile:", error);
+  }
+
+  let slices: Slice[] = [];
+
+  try {
+    // Fetch slices for this DID
+    const sliceRecords = await atprotoClient.social.slices.slice.getRecords({
+      where: { did: { eq: profileDid } },
+      sortBy: [{ field: "createdAt", direction: "desc" }],
+    });
+
+    slices = sliceRecords.records.map((record) => {
+      const uriParts = record.uri.split("/");
+      const id = uriParts[uriParts.length - 1];
+
+      return {
+        id,
+        ...record.value,
+      };
+    });
+  } catch (error) {
+    console.error("Failed to fetch slices:", error);
+  }
+
+  return renderHTML(
+    <DashboardPage slices={slices} currentUser={context.currentUser} />
+  );
+}
+
+async function handleCreateSlice(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const authInfo = await atprotoClient.oauth?.getAuthenticationInfo();
+  if (!authInfo?.isAuthenticated) {
+    return renderHTML(
+      <CreateSliceDialog error="Session expired. Please log in again." />
+    );
+  }
+
+  try {
+    const formData = await req.formData();
+    const name = formData.get("name") as string;
+    const domain = formData.get("domain") as string;
+
+    if (!name || name.trim().length === 0) {
+      return renderHTML(
+        <CreateSliceDialog
+          error="Slice name is required"
+          name={name}
+          domain={domain}
+        />
+      );
+    }
+
+    if (!domain || domain.trim().length === 0) {
+      return renderHTML(
+        <CreateSliceDialog
+          error="Primary domain is required"
+          name={name}
+          domain={domain}
+        />
+      );
+    }
+
+    try {
+      const recordData = {
+        name: name.trim(),
+        domain: domain.trim(),
+        createdAt: new Date().toISOString(),
+      };
+
+      const result = await atprotoClient.social.slices.slice.createRecord(
+        recordData
+      );
+
+      const uriParts = result.uri.split("/");
+      const sliceId = uriParts[uriParts.length - 1];
+
+      return hxRedirect(`/slices/${sliceId}`);
+    } catch (_createError) {
+      return renderHTML(
+        <CreateSliceDialog
+          error="Failed to create slice record. Please try again."
+          name={name}
+          domain={domain}
+        />
+      );
+    }
+  } catch (_error) {
+    return renderHTML(
+      <CreateSliceDialog error="Failed to create slice" />
+    );
+  }
+}
+
+async function handleCreateSliceDialog(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  return renderHTML(<CreateSliceDialog />);
+}
+
+export const dashboardRoutes: Route[] = [
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/profile/:handle" }),
+    handler: handleProfilePage,
+  },
+  {
+    method: "POST",
+    pattern: new URLPattern({ pathname: "/slices" }),
+    handler: handleCreateSlice,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/dialogs/create-slice" }),
+    handler: handleCreateSliceDialog,
+  },
+];

frontend/src/features/dashboard/templates/DashboardPage.tsx

···
+import { Layout } from "../../../shared/fragments/Layout.tsx";
+import { Button } from "../../../shared/fragments/Button.tsx";
+import { SlicesList } from "./fragments/SlicesList.tsx";
+import { EmptySlicesState } from "./fragments/EmptySlicesState.tsx";
+import type { AuthenticatedUser } from "../../../routes/middleware.ts";
+import type { SocialSlicesSlice } from "../../../client.ts";
+
+interface Slice extends SocialSlicesSlice {
+  id: string;
+}
+
+interface DashboardPageProps {
+  slices?: Slice[];
+  currentUser?: AuthenticatedUser;
+}
+
+export function DashboardPage({ slices = [], currentUser }: DashboardPageProps) {
+  return (
+    <Layout title="Slices" currentUser={currentUser}>
+      <div>
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-3xl font-bold text-gray-800">Slices</h1>
+          <Button
+            type="button"
+            variant="primary"
+            hx-get="/dialogs/create-slice"
+            hx-target="body"
+            hx-swap="beforeend"
+          >
+            + Create Slice
+          </Button>
+        </div>
+
+        {slices.length > 0 ? (
+          <SlicesList slices={slices} />
+        ) : (
+          <EmptySlicesState />
+        )}
+      </div>
+    </Layout>
+  );
+}

frontend/src/features/dashboard/templates/fragments/EmptySlicesState.tsx

···
+import { Button } from "../../../../shared/fragments/Button.tsx";
+
+export function EmptySlicesState() {
+  return (
+    <div className="bg-white rounded-lg shadow-md p-8 text-center">
+      <div className="text-gray-400 mb-4">
+        <svg
+          className="mx-auto h-16 w-16"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1}
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+          />
+        </svg>
+      </div>
+      <h3 className="text-lg font-medium text-gray-900 mb-2">
+        No slices yet
+      </h3>
+      <p className="text-gray-500 mb-6">
+        Create your first slice to get started organizing your AT Protocol
+        data.
+      </p>
+      <Button
+        type="button"
+        variant="primary"
+        hx-get="/dialogs/create-slice"
+        hx-target="body"
+        hx-swap="beforeend"
+      >
+        Create Your First Slice
+      </Button>
+    </div>
+  );
+}

frontend/src/features/dashboard/templates/fragments/SlicesList.tsx

···
+import type { SocialSlicesSlice } from "../../../../client.ts";
+
+interface Slice extends SocialSlicesSlice {
+  id: string;
+}
+
+interface SlicesListProps {
+  slices: Slice[];
+}
+
+export function SlicesList({ slices }: SlicesListProps) {
+  return (
+    <div className="bg-white rounded-lg shadow-md">
+      <div className="px-6 py-4 border-b border-gray-200">
+        <h2 className="text-lg font-semibold text-gray-800">
+          Your Slices ({slices.length})
+        </h2>
+      </div>
+      <div className="divide-y divide-gray-200">
+        {slices.map((slice) => (
+          <a
+            key={slice.id}
+            href={`/slices/${slice.id}`}
+            className="block px-6 py-4 hover:bg-gray-50"
+          >
+            <div className="flex justify-between items-center">
+              <div>
+                <h3 className="text-lg font-medium text-gray-900">
+                  {slice.name}
+                </h3>
+                <p className="text-sm text-gray-500">
+                  Created {new Date(slice.createdAt).toLocaleDateString()}
+                </p>
+              </div>
+              <div className="text-gray-400">
+                <svg
+                  className="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </div>
+            </div>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/features/landing/handlers.tsx

···
+import type { Route } from "@std/http/unstable-route";
+import { renderHTML } from "../../utils/render.tsx";
+import { withAuth } from "../../routes/middleware.ts";
+import { LandingPage } from "./templates/LandingPage.tsx";
+
+async function handleLandingPage(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  
+  // If user is authenticated and has a handle, redirect to their profile
+  if (context.currentUser?.isAuthenticated && context.currentUser.handle) {
+    return Response.redirect(new URL(`/profile/${context.currentUser.handle}`, req.url), 302);
+  }
+  
+  return renderHTML(<LandingPage />, {
+    title: "Slice - AT Protocol Data Management Platform",
+    description:
+      "Build, manage, and integrate with AT Protocol data effortlessly. Create custom lexicons, sync records, and generate TypeScript clients.",
+  });
+}
+
+export const landingRoutes: Route[] = [
+  {
+    pattern: new URLPattern({ pathname: "/" }),
+    handler: handleLandingPage,
+  },
+];

frontend/src/features/landing/templates/LandingPage.tsx

···
+import { Layout } from "../../../shared/fragments/Layout.tsx";
+
+export function LandingPage() {
+  return (
+    <Layout
+      title="Slice - AT Protocol Data Management Platform"
+      description="Build, manage, and integrate with AT Protocol data effortlessly. Create custom lexicons, sync records, and generate TypeScript clients."
+      showNavigation={false}
+    >
+      <div class="min-h-screen bg-white">
+        {/* Header */}
+        <header class="bg-white border-b border-gray-200">
+          <div class="container mx-auto px-8 py-6">
+            <div class="max-w-4xl mx-auto">
+              <div class="font-mono text-4xl font-bold text-gray-800 mb-2">
+                SLICES
+              </div>
+            </div>
+          </div>
+        </header>
+
+        {/* Menu Section */}
+        <section class="py-16 bg-white">
+          <div class="container mx-auto px-8">
+            <div class="max-w-4xl mx-auto">
+              {/* Menu Header */}
+              <div class="font-mono text-sm text-gray-700 mb-12 leading-relaxed">
+                Artisanal{" "}
+                <a
+                  href="https://atproto.com/"
+                  class="underline hover:text-gray-900"
+                >
+                  AT Protocol
+                </a>{" "}
+                AppViews
+                <br />
+              </div>
+
+              {/* Data Synchronization */}
+              <div class="mb-12">
+                <h2 class="font-mono text-lg font-bold text-gray-800 mb-6">
+                  Data Synchronization
+                </h2>
+                <div class="font-mono text-sm space-y-3">
+                  <div class="flex justify-between">
+                    <span>Automated Firehose sync</span>
+                    <span>market price</span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span>Real-time creates, updates & deletes</span>
+                    <span></span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span>Network backfill w/sync logs</span>
+                    <span></span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span>Search & filter indexed records</span>
+                    <span></span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Schema & Validation */}
+              <div class="mb-12">
+                <h2 class="font-mono text-lg font-bold text-gray-800 mb-6">
+                  Schema & Validation
+                </h2>
+                <div class="font-mono text-sm space-y-3">
+                  <div class="flex justify-between">
+                    <span>Import lexicon definitions</span>
+                    <span>$24.00</span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span>Autogenerated record-based XRPC routes</span>
+                    <span>$18.00</span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span>Built-in lexicon validation</span>
+                    <span>$22.00</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* TypeScript Client Generation */}
+              <div class="mb-12">
+                <h2 class="font-mono text-lg font-bold text-gray-800 mb-6">
+                  TypeScript Client Generation
+                </h2>
+                <div class="font-mono text-sm space-y-3">
+                  <div class="flex justify-between">
+                    <span>Type-safe client libraries</span>
+                    <div class="text-right">
+                      <div>half $16.00 whole $32.00</div>
+                    </div>
+                  </div>
+                  <div class="flex justify-between">
+                    <span>Auto CRUD method bindings</span>
+                    <div class="text-right">
+                      <div>half $14.00 whole $28.00</div>
+                    </div>
+                  </div>
+                  <div class="flex justify-between">
+                    <span>Advanced query capabilities</span>
+                    <div class="text-right">
+                      <div>half $18.00 whole $36.00</div>
+                    </div>
+                  </div>
+                  <div class="flex justify-between">
+                    <span>Lexicon-based type definitions</span>
+                    <div class="text-right">
+                      <div>half $12.00 whole $24.00</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Infrastructure & Management */}
+              <div class="mb-12">
+                <h2 class="font-mono text-lg font-bold text-gray-800 mb-6">
+                  Infrastructure & Management
+                </h2>
+                <div class="font-mono text-sm space-y-3">
+                  <div class="flex justify-between">
+                    <span>Postgres-backed data indexing</span>
+                    <span>$42.00</span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span>Interactive OpenAPI spec</span>
+                    <span>$38.00</span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span>OAuth client management</span>
+                    <span>$35.00</span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span>Self-hostable deployment</span>
+                    <span>$28.00</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* CTA */}
+              <div class="pt-8 border-t border-gray-200">
+                <div class="text-center">
+                  <a
+                    href="/auth/login"
+                    class="font-mono text-sm bg-gray-800 text-white px-8 py-3 hover:bg-gray-700 transition-colors"
+                  >
+                    JOIN THE WAITLIST
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Disclaimer */}
+        <section class="bg-gray-50 py-4">
+          <div class="container mx-auto px-8">
+            <div class="max-w-4xl mx-auto">
+              <div class="font-mono text-xs text-gray-400 text-center">
+                Note: Menu prices are just for funsies • Join the waitlist for
+                early access
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Footer */}
+        <footer class="bg-white border-t border-gray-200 py-8">
+          <div class="container mx-auto px-8">
+            <div class="max-w-4xl mx-auto">
+              <div class="font-mono text-xs text-gray-500 text-center">
+                © 2025 Slices • All rights reserved
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </Layout>
+  );
+}

frontend/src/features/settings/handlers.tsx

···
+import type { Route } from "@std/http/unstable-route";
+import { renderHTML } from "../../utils/render.tsx";
+import { hxRedirect } from "../../utils/htmx.ts";
+import { withAuth, requireAuth } from "../../routes/middleware.ts";
+import { atprotoClient } from "../../config.ts";
+import { buildAtUri } from "../../utils/at-uri.ts";
+import type { SocialSlicesActorProfile } from "../../client.ts";
+import { SettingsPage } from "./templates/SettingsPage.tsx";
+
+async function handleSettingsPage(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+
+  if (!context.currentUser.isAuthenticated) {
+    return Response.redirect(new URL("/login", req.url), 302);
+  }
+
+  const url = new URL(req.url);
+  const updated = url.searchParams.get("updated");
+  const error = url.searchParams.get("error");
+
+  let profile:
+    | {
+        displayName?: string;
+        description?: string;
+        avatar?: string;
+      }
+    | undefined;
+
+  try {
+    const profileRecord =
+      await atprotoClient.social.slices.actor.profile.getRecord({
+        uri: buildAtUri({
+          did: context.currentUser.sub!,
+          collection: "social.slices.actor.profile",
+          rkey: "self",
+        }),
+      });
+    if (profileRecord) {
+      profile = {
+        displayName: profileRecord.value.displayName,
+        description: profileRecord.value.description,
+        avatar: profileRecord.value.avatar?.toString(),
+      };
+    }
+  } catch (error) {
+    console.error("Failed to fetch profile:", error);
+  }
+
+  return renderHTML(
+    <SettingsPage 
+      profile={profile} 
+      currentUser={context.currentUser}
+      updated={updated === "true"}
+      error={error}
+    />
+  );
+}
+
+async function handleUpdateProfile(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  try {
+    const formData = await req.formData();
+    const displayName = formData.get("displayName") as string;
+    const description = formData.get("description") as string;
+    const avatarFile = formData.get("avatar") as File;
+
+    const profileData: Partial<SocialSlicesActorProfile> = {
+      displayName: displayName?.trim() || undefined,
+      description: description?.trim() || undefined,
+      createdAt: new Date().toISOString(),
+    };
+
+    if (avatarFile && avatarFile.size > 0) {
+      try {
+        const arrayBuffer = await avatarFile.arrayBuffer();
+
+        const blobResult = await atprotoClient.uploadBlob({
+          data: arrayBuffer,
+          mimeType: avatarFile.type,
+        });
+
+        profileData.avatar = blobResult.blob;
+      } catch (avatarError) {
+        console.error("Failed to upload avatar:", avatarError);
+      }
+    }
+
+    try {
+      if (!context.currentUser.sub) {
+        throw new Error("User DID (sub) is required for profile operations");
+      }
+
+      const existingProfile =
+        await atprotoClient.social.slices.actor.profile.getRecord({
+          uri: buildAtUri({
+            did: context.currentUser.sub,
+            collection: "social.slices.actor.profile",
+            rkey: "self",
+          }),
+        });
+
+      if (existingProfile) {
+        await atprotoClient.social.slices.actor.profile.updateRecord("self", {
+          ...profileData,
+          createdAt: existingProfile.value.createdAt,
+        });
+      } else {
+        await atprotoClient.social.slices.actor.profile.createRecord(
+          profileData,
+          true
+        );
+      }
+
+      // Redirect back to settings page with success message
+      return hxRedirect("/settings?updated=true");
+    } catch (profileError) {
+      console.error("Profile update error:", profileError);
+      return hxRedirect("/settings?error=update_failed");
+    }
+  } catch (error) {
+    console.error("Form processing error:", error);
+    return hxRedirect("/settings?error=form_error");
+  }
+}
+
+export const settingsRoutes: Route[] = [
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/settings" }),
+    handler: handleSettingsPage,
+  },
+  {
+    method: "PUT",
+    pattern: new URLPattern({ pathname: "/api/profile" }),
+    handler: handleUpdateProfile,
+  },
+];

frontend/src/features/settings/templates/SettingsPage.tsx

···
+import { Layout } from "../../../shared/fragments/Layout.tsx";
+import { FlashMessage } from "../../../shared/fragments/FlashMessage.tsx";
+import { SettingsForm } from "./fragments/SettingsForm.tsx";
+import type { AuthenticatedUser } from "../../../routes/middleware.ts";
+
+interface SettingsPageProps {
+  profile?: {
+    displayName?: string;
+    description?: string;
+    avatar?: string;
+  };
+  updated?: boolean;
+  error?: string | null;
+  currentUser?: AuthenticatedUser;
+}
+
+export function SettingsPage({
+  profile,
+  updated = false,
+  error,
+  currentUser,
+}: SettingsPageProps) {
+  return (
+    <Layout title="Settings - Slice" currentUser={currentUser}>
+      <div>
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">Settings</h1>
+          <p className="mt-2 text-gray-600">
+            Manage your profile information and preferences.
+          </p>
+        </div>
+
+        {/* Flash Messages */}
+        {updated && (
+          <FlashMessage 
+            type="success" 
+            message="Profile updated successfully!" 
+          />
+        )}
+
+        {error && (
+          <FlashMessage 
+            type="error" 
+            message={
+              error === "update_failed" 
+                ? "Failed to update profile. Please try again." 
+                : error === "form_error"
+                ? "Failed to process form data. Please try again."
+                : "An error occurred."
+            }
+          />
+        )}
+
+        <SettingsForm profile={profile} />
+      </div>
+    </Layout>
+  );
+}

frontend/src/features/settings/templates/fragments/SettingsForm.tsx

···
+import { Input } from "../../../../shared/fragments/Input.tsx";
+import { Textarea } from "../../../../shared/fragments/Textarea.tsx";
+import { Button } from "../../../../shared/fragments/Button.tsx";
+
+interface SettingsFormProps {
+  profile?: {
+    displayName?: string;
+    description?: string;
+    avatar?: string;
+  };
+}
+
+export function SettingsForm({ profile }: SettingsFormProps) {
+  return (
+    <div className="bg-white rounded-lg shadow-md p-6">
+      <h2 className="text-xl font-semibold text-gray-800 mb-4">
+        Profile Settings
+      </h2>
+
+      <form
+        hx-put="/api/profile"
+        hx-target="#settings-result"
+        hx-swap="innerHTML"
+        hx-encoding="multipart/form-data"
+        className="space-y-4"
+      >
+        <Input
+          type="text"
+          name="displayName"
+          label="Display Name"
+          defaultValue={profile?.displayName || ""}
+          placeholder="Your display name"
+        />
+
+        <Textarea
+          name="description"
+          label="Description"
+          rows={4}
+          placeholder="Free-form profile description text"
+          defaultValue={profile?.description || ""}
+        />
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-2">
+            Avatar
+          </label>
+          <input
+            type="file"
+            name="avatar"
+            accept="image/*"
+            className="block w-full border border-gray-300 rounded-md px-3 py-2"
+          />
+        </div>
+
+        <Button
+          type="submit"
+          variant="primary"
+          hx-indicator="#loading-spinner"
+        >
+          <span
+            className="htmx-indicator"
+            id="loading-spinner"
+            style="display:none;"
+          >
+            Saving...
+          </span>
+          <span>Save Profile</span>
+        </Button>
+      </form>
+
+      <div id="settings-result" className="mt-4">
+        {/* Results will be loaded here via htmx */}
+      </div>
+    </div>
+  );
+}

frontend/src/features/slices/api-docs/handlers.tsx

···
+import type { Route } from "@std/http/unstable-route";
+import { renderHTML } from "../../../utils/render.tsx";
+import { withAuth } from "../../../routes/middleware.ts";
+import { atprotoClient } from "../../../config.ts";
+import { buildAtUri } from "../../../utils/at-uri.ts";
+import { SliceApiDocsPage } from "./templates/SliceApiDocsPage.tsx";
+
+async function handleSliceApiDocsPage(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const sliceId = params?.pathname.groups.id;
+
+  if (!sliceId) {
+    return Response.redirect(new URL("/", req.url), 302);
+  }
+
+  // Get OAuth access token directly from OAuth client (clean separation)
+  let accessToken: string | undefined;
+  try {
+    // Tokens are managed by @slices/oauth, not stored in sessions
+    const tokens = await atprotoClient.oauth?.ensureValidToken();
+    accessToken = tokens?.accessToken;
+  } catch (error) {
+    console.log("Could not get OAuth token:", error);
+  }
+
+  // Get real slice data from AT Protocol
+  let sliceData = {
+    sliceId,
+    sliceName: "Unknown Slice",
+    accessToken,
+  };
+
+  if (context.currentUser.isAuthenticated) {
+    try {
+      const sliceUri = buildAtUri({
+        did: context.currentUser.sub!,
+        collection: "social.slices.slice",
+        rkey: sliceId,
+      });
+
+      const sliceRecord = await atprotoClient.social.slices.slice.getRecord({
+        uri: sliceUri,
+      });
+
+      sliceData = {
+        sliceId,
+        sliceName: sliceRecord.value.name,
+        accessToken,
+      };
+    } catch (error) {
+      console.error("Failed to fetch slice data:", error);
+      // Fall back to default data
+    }
+  }
+
+  return renderHTML(
+    <SliceApiDocsPage {...sliceData} currentUser={context.currentUser} />
+  );
+}
+
+export const apiDocsRoutes: Route[] = [
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/slices/:id/api-docs" }),
+    handler: handleSliceApiDocsPage,
+  },
+];

frontend/src/features/slices/codegen/handlers.tsx

···
+import type { Route } from "@std/http/unstable-route";
+import { withAuth, requireAuth } from "../../../routes/middleware.ts";
+import { atprotoClient } from "../../../config.ts";
+import { getSliceClient } from "../../../utils/client.ts";
+import { buildSliceUri } from "../../../utils/at-uri.ts";
+import { renderHTML } from "../../../utils/render.tsx";
+import { SliceCodegenPage } from "./templates/SliceCodegenPage.tsx";
+import { CodegenResult } from "./templates/fragments/CodegenResult.tsx";
+
+async function handleSliceCodegenPage(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const sliceId = params?.pathname.groups.id;
+
+  if (!sliceId) {
+    return Response.redirect(new URL("/", req.url), 302);
+  }
+
+  if (!context.currentUser.isAuthenticated) {
+    return Response.redirect(new URL("/login", req.url), 302);
+  }
+
+  let sliceData = {
+    sliceId,
+    sliceName: "Unknown Slice",
+  };
+
+  try {
+    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
+    const slice = await atprotoClient.social.slices.slice.getRecord({
+      uri: sliceUri,
+    });
+
+    if (slice.value) {
+      sliceData = {
+        sliceId,
+        sliceName: slice.value.name || "Unknown Slice",
+      };
+    }
+  } catch (error) {
+    console.error("Failed to fetch slice:", error);
+  }
+
+  return renderHTML(
+    <SliceCodegenPage {...sliceData} currentUser={context.currentUser} />
+  );
+}
+
+async function handleSliceCodegen(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const sliceId = params?.pathname.groups.id;
+  if (!sliceId) {
+    const component = await CodegenResult({
+      success: false,
+      error: "Invalid slice ID",
+    });
+    return renderHTML(component, { status: 400 });
+  }
+
+  try {
+    // Parse form data
+    const formData = await req.formData();
+    const target = formData.get("format") || "typescript";
+
+    // Construct the slice URI
+    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
+
+    // Use the slice-specific client
+    const sliceClient = getSliceClient(context, sliceId);
+
+    // Call the codegen XRPC endpoint
+    const result = await sliceClient.social.slices.slice.codegen({
+      target: target as string,
+      slice: sliceUri,
+    });
+
+    const component = await CodegenResult({
+      success: result.success,
+      generatedCode: result.generatedCode,
+      error: result.error,
+    });
+
+    return renderHTML(component);
+  } catch (error) {
+    console.error("Codegen error:", error);
+    const component = await CodegenResult({
+      success: false,
+      error: `Error: ${error instanceof Error ? error.message : String(error)}`,
+    });
+
+    return renderHTML(component);
+  }
+}
+
+export const codegenRoutes: Route[] = [
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/slices/:id/codegen" }),
+    handler: handleSliceCodegenPage,
+  },
+  {
+    method: "POST",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/codegen" }),
+    handler: handleSliceCodegen,
+  },
+];

frontend/src/features/slices/jetstream/handlers.tsx

···
+import type { Route } from "@std/http/unstable-route";
+import { withAuth, requireAuth } from "../../../routes/middleware.ts";
+import { getSliceClient } from "../../../utils/client.ts";
+import { atprotoClient } from "../../../config.ts";
+import { renderHTML } from "../../../utils/render.tsx";
+import { Layout } from "../../../shared/fragments/Layout.tsx";
+import { JetstreamLogsPage } from "./templates/JetstreamLogsPage.tsx";
+import { JetstreamLogs } from "./templates/fragments/JetstreamLogs.tsx";
+import { JetstreamStatus } from "./templates/fragments/JetstreamStatus.tsx";
+import type { LogEntry } from "../../../client.ts";
+
+async function handleJetstreamLogs(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const sliceId = params?.pathname.groups.id;
+  if (!sliceId) {
+    return renderHTML(
+      <div className="p-8 text-center text-red-600">❌ Invalid slice ID</div>,
+      { status: 400 }
+    );
+  }
+
+  try {
+    // Use the slice-specific client
+    const sliceClient = getSliceClient(context, sliceId);
+
+    // Get Jetstream logs
+    const result = await sliceClient.social.slices.slice.getJetstreamLogs({
+      limit: 100,
+    });
+
+    const logs = result?.logs || [];
+
+    // Sort logs in descending order (newest first)
+    const sortedLogs = logs.sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
+
+    // Render the log content
+    return renderHTML(<JetstreamLogs logs={sortedLogs} />);
+  } catch (error) {
+    console.error("Failed to get Jetstream logs:", error);
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    return renderHTML(
+      <Layout title="Error">
+        <div className="max-w-6xl mx-auto">
+          <div className="flex items-center gap-4 mb-6">
+            <a
+              href={`/slices/${sliceId}`}
+              className="text-blue-600 hover:text-blue-800"
+            >
+              ← Back to Slice
+            </a>
+            <h1 className="text-2xl font-semibold text-gray-900">
+              ✈️ Jetstream Logs
+            </h1>
+          </div>
+          <div className="p-8 text-center text-red-600">
+            ❌ Error loading Jetstream logs: {errorMessage}
+          </div>
+        </div>
+      </Layout>,
+      { status: 500 }
+    );
+  }
+}
+
+async function handleJetstreamStatus(
+  req: Request,
+  _params?: URLPatternResult
+): Promise<Response> {
+  try {
+    // Extract parameters from query
+    const url = new URL(req.url);
+    const sliceId = url.searchParams.get("sliceId");
+    const isCompact = url.searchParams.get("compact") === "true";
+
+    // Fetch jetstream status using the atproto client
+    const data = await atprotoClient.social.slices.slice.getJetstreamStatus();
+
+    // Render compact version for logs page
+    if (isCompact) {
+      return renderHTML(
+        <div className="inline-flex items-center gap-2 text-xs">
+          {data.connected ? (
+            <>
+              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+              <span className="text-green-700">Jetstream Connected</span>
+            </>
+          ) : (
+            <>
+              <div className="w-2 h-2 bg-red-500 rounded-full"></div>
+              <span className="text-red-700">Jetstream Offline</span>
+            </>
+          )}
+        </div>
+      );
+    }
+
+    // Render full version for main page
+    return renderHTML(
+      <JetstreamStatus
+        connected={data.connected}
+        status={data.status}
+        error={data.error}
+        sliceId={sliceId || undefined}
+      />
+    );
+  } catch (error) {
+    // Extract parameters for error case too
+    const url = new URL(req.url);
+    const sliceId = url.searchParams.get("sliceId");
+    const isCompact = url.searchParams.get("compact") === "true";
+
+    // Render compact error version
+    if (isCompact) {
+      return renderHTML(
+        <div className="inline-flex items-center gap-2 text-xs">
+          <div className="w-2 h-2 bg-red-500 rounded-full"></div>
+          <span className="text-red-700">Jetstream Offline</span>
+        </div>
+      );
+    }
+
+    // Fallback to disconnected state on error for full version
+    return renderHTML(
+      <JetstreamStatus
+        connected={false}
+        status="Connection error"
+        error={error instanceof Error ? error.message : "Unknown error"}
+        sliceId={sliceId || undefined}
+      />
+    );
+  }
+}
+
+async function handleJetstreamLogsPage(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+
+  if (!context.currentUser.isAuthenticated) {
+    return Response.redirect(new URL("/login", req.url), 302);
+  }
+
+  const sliceId = params?.pathname.groups.id;
+
+  if (!sliceId) {
+    return new Response("Invalid slice ID", { status: 400 });
+  }
+
+  // Fetch Jetstream logs
+  let logs: LogEntry[] = [];
+
+  try {
+    const sliceClient = getSliceClient(context, sliceId);
+
+    const logsResult = await sliceClient.social.slices.slice.getJetstreamLogs({
+      limit: 100,
+    });
+    logs = logsResult.logs.sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
+  } catch (error) {
+    console.error("Failed to fetch Jetstream logs:", error);
+  }
+
+  return renderHTML(
+    <JetstreamLogsPage
+      logs={logs}
+      sliceId={sliceId}
+      currentUser={context.currentUser}
+    />
+  );
+}
+
+export const jetstreamRoutes: Route[] = [
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/slices/:id/jetstream/logs" }),
+    handler: handleJetstreamLogsPage,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/jetstream/status" }),
+    handler: handleJetstreamStatus,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/jetstream/logs" }),
+    handler: handleJetstreamLogs,
+  },
+];

frontend/src/features/slices/jetstream/templates/fragments/JetstreamLogs.tsx

···
+import type { LogEntry } from "../../../../../client.ts";
+import { formatTimestamp } from "../../../../../utils/time.ts";
+import { LogViewer } from "../../../../../shared/fragments/LogViewer.tsx";
+
+interface JetstreamLogsProps {
+  logs: LogEntry[];
+}
+
+export function JetstreamLogs({ logs }: JetstreamLogsProps) {
+  return (
+    <LogViewer 
+      logs={logs} 
+      emptyMessage="No Jetstream logs available for this slice."
+      formatTimestamp={formatTimestamp}
+    />
+  );
+}

frontend/src/features/slices/lexicon/handlers.tsx

···
+import type { Route } from "@std/http/unstable-route";
+import { renderHTML } from "../../../utils/render.tsx";
+import { withAuth, requireAuth } from "../../../routes/middleware.ts";
+import { getSliceClient } from "../../../utils/client.ts";
+import { buildSliceUri, buildAtUri } from "../../../utils/at-uri.ts";
+import { atprotoClient } from "../../../config.ts";
+import { SliceLexiconPage } from "./templates/SliceLexiconPage.tsx";
+import { EmptyLexiconState } from "./templates/fragments/EmptyLexiconState.tsx";
+import { LexiconSuccessMessage } from "./templates/fragments/LexiconSuccessMessage.tsx";
+import { LexiconErrorMessage } from "./templates/fragments/LexiconErrorMessage.tsx";
+import { LexiconListItem } from "./templates/fragments/LexiconListItem.tsx";
+import { LexiconViewModal } from "./templates/fragments/LexiconViewModal.tsx";
+
+async function handleListLexicons(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const sliceId = params?.pathname.groups.id;
+  if (!sliceId) {
+    return new Response("Invalid slice ID", { status: 400 });
+  }
+
+  try {
+    const sliceClient = getSliceClient(context, sliceId);
+    const lexiconRecords = await sliceClient.social.slices.lexicon.getRecords();
+
+    if (lexiconRecords.records.length === 0) {
+      return renderHTML(<EmptyLexiconState />);
+    }
+
+    return renderHTML(
+      <div className="space-y-0">
+        {lexiconRecords.records.map((record) => (
+          <LexiconListItem
+            key={record.uri}
+            nsid={record.value.nsid}
+            uri={record.uri}
+            createdAt={record.value.createdAt}
+            sliceId={sliceId}
+          />
+        ))}
+      </div>
+    );
+  } catch (error) {
+    console.error("Failed to fetch lexicons:", error);
+    return renderHTML(
+      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        <p>Failed to load lexicons: {error}</p>
+      </div>,
+      { status: 500 }
+    );
+  }
+}
+
+async function handleCreateLexicon(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  try {
+    const formData = await req.formData();
+    const lexiconJson = formData.get("lexicon_json") as string;
+
+    if (!lexiconJson || lexiconJson.trim().length === 0) {
+      return renderHTML(
+        <LexiconErrorMessage error="Lexicon JSON is required" />,
+        { status: 400 }
+      );
+    }
+
+    let lexiconData;
+    try {
+      lexiconData = JSON.parse(lexiconJson);
+    } catch (parseError) {
+      return renderHTML(
+        <LexiconErrorMessage
+          error={`Failed to parse lexicon JSON: ${parseError}`}
+        />
+      );
+    }
+
+    if (!lexiconData.id && !lexiconData.nsid) {
+      return renderHTML(
+        <LexiconErrorMessage error="Lexicon must have an 'id' field (e.g., 'com.example.myLexicon')" />
+      );
+    }
+
+    if (!lexiconData.defs && !lexiconData.definitions) {
+      return renderHTML(
+        <LexiconErrorMessage error="Lexicon must have a 'defs' field containing the schema definitions" />
+      );
+    }
+
+    try {
+      const url = new URL(req.url);
+      const pathParts = url.pathname.split("/");
+      let sliceId = "example";
+
+      if (
+        pathParts.length >= 4 &&
+        pathParts[1] === "api" &&
+        pathParts[2] === "slices"
+      ) {
+        sliceId = pathParts[3];
+      }
+
+      const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
+
+      const lexiconRecord = {
+        nsid: lexiconData.id,
+        definitions: JSON.stringify(lexiconData.defs || lexiconData),
+        createdAt: new Date().toISOString(),
+        slice: sliceUri,
+      };
+
+      const sliceClient = getSliceClient(context, sliceId);
+      const result = await sliceClient.social.slices.lexicon.createRecord(
+        lexiconRecord
+      );
+
+      return renderHTML(
+        <LexiconSuccessMessage
+          nsid={lexiconRecord.nsid}
+          uri={result.uri}
+          sliceId={sliceId}
+        />
+      );
+    } catch (createError) {
+      let errorMessage = `Failed to create lexicon: ${createError}`;
+
+      if (createError instanceof Error) {
+        try {
+          const errorResponse = JSON.parse(createError.message);
+          if (
+            errorResponse.error === "ValidationError" &&
+            errorResponse.message
+          ) {
+            errorMessage = errorResponse.message;
+          }
+        } catch {
+          const errorStr = createError.message;
+          if (errorStr.includes("Invalid JSON in definitions field")) {
+            errorMessage =
+              "The lexicon definitions contain invalid JSON. Please check your JSON syntax.";
+          } else if (errorStr.includes("must be camelCase")) {
+            errorMessage =
+              'Definition names must be camelCase (letters and numbers only). Examples: "main", "listView", "aspectRatio"';
+          } else if (errorStr.includes("missing required 'type' field")) {
+            errorMessage =
+              'Each lexicon definition must have a "type" field. Valid types include: "record", "object", "string", "integer", "boolean", "array", "union", "ref", "blob", "bytes", "cid-link", "unknown"';
+          } else if (errorStr.includes("Lexicon validation failed")) {
+            errorMessage = errorStr;
+          }
+        }
+      }
+
+      return renderHTML(<LexiconErrorMessage error={errorMessage} />);
+    }
+  } catch (error) {
+    return renderHTML(
+      <LexiconErrorMessage error={`Server error: ${error}`} />,
+      { status: 500 }
+    );
+  }
+}
+
+async function handleViewLexicon(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const sliceId = params?.pathname.groups.id;
+  const rkey = params?.pathname.groups.rkey;
+  if (!sliceId || !rkey) {
+    return new Response("Invalid slice ID or lexicon key", { status: 400 });
+  }
+
+  try {
+    const sliceClient = getSliceClient(context, sliceId);
+    const lexiconRecords = await sliceClient.social.slices.lexicon.getRecords();
+
+    const lexicon = lexiconRecords.records.find((record) =>
+      record.uri.endsWith(`/${rkey}`)
+    );
+
+    if (!lexicon) {
+      return new Response("Lexicon not found", { status: 404 });
+    }
+
+    const component = await LexiconViewModal({
+      nsid: lexicon.value.nsid,
+      definitions: lexicon.value.definitions,
+      uri: lexicon.uri,
+      createdAt: lexicon.indexedAt,
+    });
+
+    return renderHTML(component);
+  } catch (error) {
+    console.error("Error viewing lexicon:", error);
+    return new Response("Failed to load lexicon", { status: 500 });
+  }
+}
+
+async function handleDeleteLexicon(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const sliceId = params?.pathname.groups.id;
+  const rkey = params?.pathname.groups.rkey;
+  if (!sliceId || !rkey) {
+    return new Response("Invalid slice ID or lexicon ID", { status: 400 });
+  }
+
+  try {
+    const sliceClient = getSliceClient(context, sliceId);
+    await sliceClient.social.slices.lexicon.deleteRecord(rkey);
+
+    const remainingLexicons =
+      await sliceClient.social.slices.lexicon.getRecords();
+
+    if (remainingLexicons.records.length === 0) {
+      return renderHTML(<EmptyLexiconState withPadding />, {
+        headers: {
+          "HX-Retarget": "#lexicon-list",
+        },
+      });
+    } else {
+      return new Response("", {
+        status: 200,
+        headers: { "content-type": "text/html" },
+      });
+    }
+  } catch (error) {
+    console.error("Failed to delete lexicon:", error);
+    return renderHTML(
+      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        <p>Failed to delete lexicon: {error}</p>
+      </div>,
+      { status: 500 }
+    );
+  }
+}
+
+async function handleSliceLexiconPage(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  if (!context.currentUser.isAuthenticated) {
+    return new Response("", {
+      status: 302,
+      headers: { location: "/login" },
+    });
+  }
+
+  const sliceId = params?.pathname.groups.id;
+  if (!sliceId) {
+    return new Response("Invalid slice ID", { status: 400 });
+  }
+
+  const sliceUri = buildAtUri({
+    did: context.currentUser.sub!,
+    collection: "social.slices.slice",
+    rkey: sliceId,
+  });
+
+  let slice;
+  try {
+    slice = await atprotoClient.social.slices.slice.getRecord({
+      uri: sliceUri,
+    });
+  } catch (error) {
+    console.error("Error fetching slice:", error);
+    return new Response("Slice not found", { status: 404 });
+  }
+
+  return renderHTML(
+    <SliceLexiconPage
+      sliceName={slice.value.name}
+      sliceId={sliceId}
+      currentUser={context.currentUser}
+    />
+  );
+}
+
+export const lexiconRoutes: Route[] = [
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/slices/:id/lexicon" }),
+    handler: handleSliceLexiconPage,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/lexicons/list" }),
+    handler: handleListLexicons,
+  },
+  {
+    method: "POST",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/lexicons" }),
+    handler: handleCreateLexicon,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({
+      pathname: "/api/slices/:id/lexicons/:rkey/view",
+    }),
+    handler: handleViewLexicon,
+  },
+  {
+    method: "DELETE",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/lexicons/:rkey" }),
+    handler: handleDeleteLexicon,
+  },
+];

frontend/src/features/slices/mod.ts

···
+import type { Route } from "@std/http/unstable-route";
+import { overviewRoutes } from "./overview/handlers.tsx";
+import { settingsRoutes } from "./settings/handlers.tsx";
+import { lexiconRoutes } from "./lexicon/handlers.tsx";
+import { recordsRoutes } from "./records/handlers.tsx";
+import { codegenRoutes } from "./codegen/handlers.tsx";
+import { oauthRoutes } from "./oauth/handlers.tsx";
+import { apiDocsRoutes } from "./api-docs/handlers.tsx";
+import { syncRoutes } from "./sync/handlers.tsx";
+import { syncLogsRoutes } from "./sync-logs/handlers.tsx";
+import { jetstreamRoutes } from "./jetstream/handlers.tsx";
+
+// Export individual route groups
+export { overviewRoutes, settingsRoutes, lexiconRoutes, recordsRoutes, codegenRoutes, oauthRoutes, apiDocsRoutes, syncRoutes, syncLogsRoutes, jetstreamRoutes };
+
+// Export consolidated routes array for easy import
+export const sliceRoutes: Route[] = [
+  ...overviewRoutes,
+  ...settingsRoutes,
+  ...lexiconRoutes,
+  ...recordsRoutes,
+  ...codegenRoutes,
+  ...oauthRoutes,
+  ...apiDocsRoutes,
+  ...syncRoutes,
+  ...syncLogsRoutes,
+  ...jetstreamRoutes,
+];

frontend/src/features/slices/oauth/handlers.tsx

···
+import type { Route } from "@std/http/unstable-route";
+import { withAuth, requireAuth } from "../../../routes/middleware.ts";
+import { getSliceClient } from "../../../utils/client.ts";
+import { buildSliceUri, buildAtUri } from "../../../utils/at-uri.ts";
+import { atprotoClient } from "../../../config.ts";
+import { renderHTML } from "../../../utils/render.tsx";
+import { SliceOAuthPage } from "./templates/SliceOAuthPage.tsx";
+import { OAuthClientModal } from "./templates/fragments/OAuthClientModal.tsx";
+import { OAuthRegistrationResult } from "./templates/fragments/OAuthRegistrationResult.tsx";
+import { OAuthDeleteResult } from "./templates/fragments/OAuthDeleteResult.tsx";
+
+async function handleOAuthClientNew(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const url = new URL(req.url);
+  const sliceId = url.pathname.split("/")[3];
+
+  try {
+    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
+
+    return renderHTML(
+      <OAuthClientModal
+        sliceId={sliceId}
+        sliceUri={sliceUri}
+        mode="new"
+        clientData={undefined}
+      />
+    );
+  } catch (error) {
+    console.error("Error showing new OAuth client modal:", error);
+    return renderHTML(
+      <div className="p-6">
+        <h2 className="text-xl font-semibold text-gray-800 mb-4">Error</h2>
+        <p className="text-gray-600 mb-4">
+          Failed to load OAuth client form:{" "}
+          {error instanceof Error ? error.message : String(error)}
+        </p>
+        <button
+          type="button"
+          _="on click set #modal-container's innerHTML to ''"
+          className="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition"
+        >
+          Close
+        </button>
+      </div>,
+      { status: 500 }
+    );
+  }
+}
+
+async function handleOAuthClientRegister(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const url = new URL(req.url);
+  const sliceId = url.pathname.split("/")[3];
+
+  try {
+    const formData = await req.formData();
+    const clientName = formData.get("clientName") as string;
+    const redirectUrisText = formData.get("redirectUris") as string;
+    const scope = formData.get("scope") as string;
+    const clientUri = formData.get("clientUri") as string;
+    const logoUri = formData.get("logoUri") as string;
+    const tosUri = formData.get("tosUri") as string;
+    const policyUri = formData.get("policyUri") as string;
+
+    // Parse redirect URIs (split by lines and filter empty)
+    const redirectUris = redirectUrisText
+      .split("\n")
+      .map((uri) => uri.trim())
+      .filter((uri) => uri.length > 0);
+
+    // Register new OAuth client via backend API
+    const sliceClient = getSliceClient(context, sliceId);
+    const newClient = await sliceClient.social.slices.slice.createOAuthClient({
+      clientName,
+      redirectUris,
+      scope: scope || undefined,
+      clientUri: clientUri || undefined,
+      logoUri: logoUri || undefined,
+      tosUri: tosUri || undefined,
+      policyUri: policyUri || undefined,
+    });
+
+    return renderHTML(
+      <OAuthRegistrationResult
+        success
+        sliceId={sliceId}
+        clientId={newClient.clientId}
+      />
+    );
+  } catch (error) {
+    console.error("Error registering OAuth client:", error);
+    return renderHTML(
+      <OAuthRegistrationResult
+        success={false}
+        error={error instanceof Error ? error.message : String(error)}
+        sliceId={sliceId}
+      />,
+      { status: 500 }
+    );
+  }
+}
+
+async function handleOAuthClientDelete(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const url = new URL(req.url);
+  const pathParts = url.pathname.split("/");
+  const sliceId = pathParts[3];
+  const clientId = decodeURIComponent(pathParts[5]);
+
+  try {
+    // Delete OAuth client via backend API
+    const sliceClient = getSliceClient(context, sliceId);
+    await sliceClient.social.slices.slice.deleteOAuthClient(clientId);
+
+    return renderHTML(<OAuthDeleteResult success />);
+  } catch (error) {
+    console.error("Error deleting OAuth client:", error);
+    return renderHTML(
+      <OAuthDeleteResult
+        success={false}
+        error={error instanceof Error ? error.message : String(error)}
+      />,
+      { status: 500 }
+    );
+  }
+}
+
+async function handleOAuthClientView(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const url = new URL(req.url);
+  const pathParts = url.pathname.split("/");
+  const sliceId = pathParts[3];
+  const clientId = decodeURIComponent(pathParts[5]);
+
+  try {
+    // Fetch OAuth client details via backend API
+    const sliceClient = getSliceClient(context, sliceId);
+    const clientsResponse =
+      await sliceClient.social.slices.slice.getOAuthClients();
+    const clientData = clientsResponse.clients.find(
+      (c) => c.clientId === clientId
+    );
+
+    const sliceUri = buildAtUri({
+      did: context.currentUser.sub!,
+      collection: "social.slices.slice",
+      rkey: sliceId,
+    });
+
+    return renderHTML(
+      <OAuthClientModal
+        sliceId={sliceId}
+        sliceUri={sliceUri}
+        mode="view"
+        clientData={clientData}
+      />
+    );
+  } catch (error) {
+    console.error("Error fetching OAuth client:", error);
+    return renderHTML(
+      <div className="p-6">
+        <h2 className="text-xl font-semibold text-gray-800 mb-4">Error</h2>
+        <p className="text-gray-600 mb-4">
+          Failed to load OAuth client details:{" "}
+          {error instanceof Error ? error.message : String(error)}
+        </p>
+        <button
+          type="button"
+          _="on click set #modal-container's innerHTML to ''"
+          className="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition"
+        >
+          Close
+        </button>
+      </div>,
+      { status: 500 }
+    );
+  }
+}
+
+async function handleOAuthClientUpdate(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const url = new URL(req.url);
+  const pathParts = url.pathname.split("/");
+  const sliceId = pathParts[3];
+  const clientId = decodeURIComponent(pathParts[5]);
+
+  try {
+    const formData = await req.formData();
+    const clientName = formData.get("clientName") as string;
+    const redirectUrisText = formData.get("redirectUris") as string;
+    const scope = formData.get("scope") as string;
+    const clientUri = formData.get("clientUri") as string;
+    const logoUri = formData.get("logoUri") as string;
+    const tosUri = formData.get("tosUri") as string;
+    const policyUri = formData.get("policyUri") as string;
+
+    // Parse redirect URIs (split by lines and filter empty)
+    const redirectUris = redirectUrisText
+      .split("\n")
+      .map((uri) => uri.trim())
+      .filter((uri) => uri.length > 0);
+
+    // Update OAuth client via backend API
+    const sliceClient = getSliceClient(context, sliceId);
+    const updatedClient =
+      await sliceClient.social.slices.slice.updateOAuthClient({
+        clientId,
+        clientName: clientName || undefined,
+        redirectUris: redirectUris.length > 0 ? redirectUris : undefined,
+        scope: scope || undefined,
+        clientUri: clientUri || undefined,
+        logoUri: logoUri || undefined,
+        tosUri: tosUri || undefined,
+        policyUri: policyUri || undefined,
+      });
+
+    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
+    return renderHTML(
+      <OAuthClientModal
+        sliceId={sliceId}
+        sliceUri={sliceUri}
+        mode="view"
+        clientData={updatedClient}
+      />
+    );
+  } catch (error) {
+    console.error("Error updating OAuth client:", error);
+    return renderHTML(
+      <OAuthDeleteResult
+        success={false}
+        error={error instanceof Error ? error.message : String(error)}
+      />,
+      { status: 500 }
+    );
+  }
+}
+
+async function handleSliceOAuthPage(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  if (!context.currentUser.isAuthenticated) {
+    return new Response("", {
+      status: 302,
+      headers: { location: "/login" },
+    });
+  }
+
+  const sliceId = params?.pathname.groups.id;
+  if (!sliceId) {
+    return new Response("Invalid slice ID", { status: 400 });
+  }
+
+  const sliceUri = buildAtUri({
+    did: context.currentUser.sub!,
+    collection: "social.slices.slice",
+    rkey: sliceId,
+  });
+
+  const sliceClient = getSliceClient(context, sliceId);
+
+  let slice;
+  try {
+    slice = await atprotoClient.social.slices.slice.getRecord({
+      uri: sliceUri,
+    });
+  } catch (error) {
+    console.error("Error fetching slice:", error);
+    return new Response("Slice not found", { status: 404 });
+  }
+
+  // Try to fetch OAuth clients
+  let clientsWithDetails: {
+    clientId: string;
+    createdAt: string;
+    clientName?: string;
+    redirectUris?: string[];
+  }[] = [];
+  let errorMessage = null;
+
+  try {
+    const oauthClientsResponse =
+      await sliceClient.social.slices.slice.getOAuthClients();
+    console.log("Fetched OAuth clients:", oauthClientsResponse.clients);
+    clientsWithDetails = oauthClientsResponse.clients.map((client) => ({
+      clientId: client.clientId,
+      createdAt: new Date().toISOString(), // Backend should provide this
+      clientName: client.clientName,
+      redirectUris: client.redirectUris,
+    }));
+  } catch (oauthError) {
+    console.error("Error fetching OAuth clients:", oauthError);
+    errorMessage = "Failed to fetch OAuth clients";
+  }
+
+  return renderHTML(
+    <SliceOAuthPage
+      sliceName={slice.value.name}
+      sliceId={sliceId}
+      clients={clientsWithDetails}
+      currentUser={context.currentUser}
+      error={errorMessage}
+    />
+  );
+}
+
+export const oauthRoutes: Route[] = [
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/slices/:id/oauth" }),
+    handler: handleSliceOAuthPage,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/new" }),
+    handler: handleOAuthClientNew,
+  },
+  {
+    method: "POST",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/register" }),
+    handler: handleOAuthClientRegister,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/:uri/view" }),
+    handler: handleOAuthClientView,
+  },
+  {
+    method: "POST",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/:uri/update" }),
+    handler: handleOAuthClientUpdate,
+  },
+  {
+    method: "DELETE",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/:uri" }),
+    handler: handleOAuthClientDelete,
+  },
+];

frontend/src/features/slices/oauth/templates/SliceOAuthPage.tsx

···
+import { Layout } from "../../../../shared/fragments/Layout.tsx";
+import { SliceTabs } from "../../shared/fragments/SliceTabs.tsx";
+import { Button } from "../../../../shared/fragments/Button.tsx";
+import { OAuthClientsList } from "./fragments/OAuthClientsList.tsx";
+import { EmptyOAuthState } from "./fragments/EmptyOAuthState.tsx";
+import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
+
+interface OAuthClient {
+  clientId: string;
+  createdAt: string;
+  clientName?: string;
+  redirectUris?: string[];
+}
+
+interface SliceOAuthPageProps {
+  sliceName?: string;
+  sliceId?: string;
+  clients?: OAuthClient[];
+  currentUser?: AuthenticatedUser;
+  error?: string | null;
+  success?: string | null;
+}
+
+export function SliceOAuthPage({
+  sliceName = "My Slice",
+  sliceId = "example",
+  clients = [],
+  currentUser,
+  error = null,
+  success = null,
+}: SliceOAuthPageProps) {
+  return (
+    <Layout title={`${sliceName} - OAuth Clients`} currentUser={currentUser}>
+      <div>
+        <div className="flex items-center justify-between mb-8">
+          <div className="flex items-center">
+            <a href="/" className="text-blue-600 hover:text-blue-800 mr-4">
+              ← Back to Slices
+            </a>
+            <h1 className="text-3xl font-bold text-gray-800">{sliceName}</h1>
+          </div>
+        </div>
+
+        <SliceTabs sliceId={sliceId} currentTab="oauth" />
+
+        {success && (
+          <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
+            ✅ {success}
+          </div>
+        )}
+
+        {error && (
+          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+            ❌ {error}
+          </div>
+        )}
+
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <div className="flex justify-between items-center mb-6">
+            <h2 className="text-2xl font-semibold text-gray-800">
+              OAuth Clients
+            </h2>
+            <Button
+              type="button"
+              variant="primary"
+              hx-get={`/api/slices/${sliceId}/oauth/new`}
+              hx-target="#modal-container"
+              hx-swap="innerHTML"
+            >
+              Register New Client
+            </Button>
+          </div>
+
+          {clients.length === 0 ? (
+            <EmptyOAuthState sliceId={sliceId} />
+          ) : (
+            <OAuthClientsList clients={clients} sliceId={sliceId} />
+          )}
+        </div>
+
+        <div id="modal-container"></div>
+      </div>
+    </Layout>
+  );
+}

frontend/src/features/slices/oauth/templates/fragments/EmptyOAuthState.tsx

···
+import { Button } from "../../../../../shared/fragments/Button.tsx";
+
+interface EmptyOAuthStateProps {
+  sliceId: string;
+}
+
+export function EmptyOAuthState({ sliceId }: EmptyOAuthStateProps) {
+  return (
+    <div className="text-center py-12">
+      <p className="text-gray-600 mb-4">
+        No OAuth clients registered for this slice.
+      </p>
+      <Button
+        type="button"
+        variant="ghost"
+        hx-get={`/api/slices/${sliceId}/oauth/new`}
+        hx-target="#modal-container"
+        hx-swap="innerHTML"
+        className="text-blue-600 hover:text-blue-800"
+      >
+        Register your first OAuth client
+      </Button>
+    </div>
+  );
+}

frontend/src/features/slices/oauth/templates/fragments/OAuthClientModal.tsx

···
+import { OAuthClientDetails } from "../../../../../client.ts";
+import { Button } from "../../../../../shared/fragments/Button.tsx";
+import { Input } from "../../../../../shared/fragments/Input.tsx";
+import { Textarea } from "../../../../../shared/fragments/Textarea.tsx";
+
+interface OAuthClientModalProps {
+  sliceId: string;
+  sliceUri: string;
+  mode: "new" | "view";
+  clientData?: OAuthClientDetails;
+}
+
+export function OAuthClientModal({
+  sliceId,
+  sliceUri,
+  mode,
+  clientData,
+}: OAuthClientModalProps) {
+  if (mode === "view" && clientData) {
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+          <form
+            hx-post={`/api/slices/${sliceId}/oauth/${encodeURIComponent(clientData.clientId)}/update`}
+            hx-target="#modal-container"
+            hx-swap="outerHTML"
+          >
+            <div className="flex justify-between items-start mb-4">
+              <h2 className="text-2xl font-semibold">OAuth Client Details</h2>
+              <button
+                type="button"
+                _="on click set #modal-container's innerHTML to ''"
+                className="text-gray-400 hover:text-gray-600"
+              >
+                ✕
+              </button>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  Client ID
+                </label>
+                <div className="font-mono text-sm bg-gray-100 p-2 rounded border">
+                  {clientData.clientId}
+                </div>
+              </div>
+
+              {clientData.clientSecret && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Client Secret
+                  </label>
+                  <div className="font-mono text-sm bg-yellow-50 border border-yellow-200 p-2 rounded">
+                    <div className="text-yellow-800 text-xs mb-1">⚠️ Save this secret - it won't be shown again</div>
+                    {clientData.clientSecret}
+                  </div>
+                </div>
+              )}
+
+              <Input
+                id="clientName"
+                name="clientName"
+                label="Client Name"
+                required
+                defaultValue={clientData.clientName}
+              />
+
+              <div>
+                <Textarea
+                  id="redirectUris"
+                  name="redirectUris"
+                  label="Redirect URIs"
+                  required
+                  rows={3}
+                  defaultValue={clientData.redirectUris.join('\n')}
+                />
+                <p className="text-sm text-gray-500 mt-1">
+                  Enter one redirect URI per line
+                </p>
+              </div>
+
+              <Input
+                id="scope"
+                name="scope"
+                label="Scope"
+                defaultValue={clientData.scope || ''}
+                placeholder="atproto:atproto"
+              />
+
+              <Input
+                type="url"
+                id="clientUri"
+                name="clientUri"
+                label="Client URI"
+                defaultValue={clientData.clientUri || ''}
+                placeholder="https://example.com"
+              />
+
+              <Input
+                type="url"
+                id="logoUri"
+                name="logoUri"
+                label="Logo URI"
+                defaultValue={clientData.logoUri || ''}
+                placeholder="https://example.com/logo.png"
+              />
+
+              <Input
+                type="url"
+                id="tosUri"
+                name="tosUri"
+                label="Terms of Service URI"
+                defaultValue={clientData.tosUri || ''}
+                placeholder="https://example.com/terms"
+              />
+
+              <Input
+                type="url"
+                id="policyUri"
+                name="policyUri"
+                label="Privacy Policy URI"
+                defaultValue={clientData.policyUri || ''}
+                placeholder="https://example.com/privacy"
+              />
+
+              <div className="flex justify-end gap-3 mt-6">
+                <Button
+                  type="button"
+                  variant="secondary"
+                  _="on click set #modal-container's innerHTML to ''"
+                >
+                  Cancel
+                </Button>
+                <Button type="submit" variant="primary">
+                  Update Client
+                </Button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <form
+          hx-post={`/api/slices/${sliceId}/oauth/register`}
+          hx-target="#modal-container"
+          hx-swap="outerHTML"
+        >
+          <input type="hidden" name="sliceUri" value={sliceUri} />
+
+          <div className="flex justify-between items-start mb-4">
+            <h2 className="text-2xl font-semibold">Register OAuth Client</h2>
+            <button
+              type="button"
+              _="on click set #modal-container's innerHTML to ''"
+              className="text-gray-400 hover:text-gray-600"
+            >
+              ✕
+            </button>
+          </div>
+
+          <div className="space-y-4">
+            <Input
+              id="clientName"
+              name="clientName"
+              label="Client Name"
+              required
+              placeholder="My Application"
+            />
+
+            <div>
+              <Textarea
+                id="redirectUris"
+                name="redirectUris"
+                label="Redirect URIs"
+                required
+                rows={3}
+                placeholder="https://example.com/callback&#10;https://localhost:3000/callback"
+              />
+              <p className="text-sm text-gray-500 mt-1">
+                Enter one redirect URI per line
+              </p>
+            </div>
+
+            <Input
+              id="scope"
+              name="scope"
+              label="Scope"
+              placeholder="atproto:atproto"
+            />
+
+            <Input
+              type="url"
+              id="clientUri"
+              name="clientUri"
+              label="Client URI"
+              placeholder="https://example.com"
+            />
+
+            <Input
+              type="url"
+              id="logoUri"
+              name="logoUri"
+              label="Logo URI"
+              placeholder="https://example.com/logo.png"
+            />
+
+            <Input
+              type="url"
+              id="tosUri"
+              name="tosUri"
+              label="Terms of Service URI"
+              placeholder="https://example.com/terms"
+            />
+
+            <Input
+              type="url"
+              id="policyUri"
+              name="policyUri"
+              label="Privacy Policy URI"
+              placeholder="https://example.com/privacy"
+            />
+
+            <div className="flex justify-end gap-3 mt-6">
+              <Button
+                type="button"
+                variant="secondary"
+                _="on click set #modal-container's innerHTML to ''"
+              >
+                Cancel
+              </Button>
+              <Button type="submit" variant="primary">
+                Register Client
+              </Button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/features/slices/oauth/templates/fragments/OAuthClientsList.tsx

···
+import { Button } from "../../../../../shared/fragments/Button.tsx";
+
+interface OAuthClient {
+  clientId: string;
+  createdAt: string;
+  clientName?: string;
+  redirectUris?: string[];
+}
+
+interface OAuthClientsListProps {
+  clients: OAuthClient[];
+  sliceId: string;
+}
+
+export function OAuthClientsList({ clients, sliceId }: OAuthClientsListProps) {
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full">
+        <thead>
+          <tr className="border-b">
+            <th className="text-left py-2 px-4">Client ID</th>
+            <th className="text-left py-2 px-4">Name</th>
+            <th className="text-left py-2 px-4">Redirect URIs</th>
+            <th className="text-left py-2 px-4">Created</th>
+            <th className="text-left py-2 px-4">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {clients.map((client) => (
+            <tr
+              key={client.clientId}
+              className="border-b hover:bg-gray-50"
+            >
+              <td className="py-3 px-4 font-mono text-sm">
+                {client.clientId}
+              </td>
+              <td className="py-3 px-4">
+                {client.clientName || "Loading..."}
+              </td>
+              <td className="py-3 px-4">
+                {client.redirectUris ? (
+                  <div className="text-sm">
+                    {client.redirectUris.slice(0, 2).map((uri, idx) => (
+                      <div key={idx} className="truncate max-w-xs">
+                        {uri}
+                      </div>
+                    ))}
+                    {client.redirectUris.length > 2 && (
+                      <div className="text-gray-500">
+                        +{client.redirectUris.length - 2} more
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <span className="text-gray-400">Loading...</span>
+                )}
+              </td>
+              <td className="py-3 px-4 text-sm text-gray-600">
+                {new Date(client.createdAt).toLocaleDateString()}
+              </td>
+              <td className="py-3 px-4">
+                <div className="flex gap-2">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    hx-get={`/api/slices/${sliceId}/oauth/${encodeURIComponent(
+                      client.clientId
+                    )}/view`}
+                    hx-target="#modal-container"
+                    hx-swap="innerHTML"
+                    className="text-blue-600 hover:text-blue-800"
+                  >
+                    View
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    hx-delete={`/api/slices/${sliceId}/oauth/${encodeURIComponent(
+                      client.clientId
+                    )}`}
+                    hx-confirm="Are you sure you want to delete this OAuth client?"
+                    hx-target="closest tr"
+                    hx-swap="outerHTML"
+                    className="text-red-600 hover:text-red-800"
+                  >
+                    Delete
+                  </Button>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

frontend/src/features/slices/oauth/templates/fragments/OAuthDeleteResult.tsx

···
+interface OAuthDeleteResultProps {
+  success: boolean;
+  error?: string;
+}
+
+export function OAuthDeleteResult({ success, error }: OAuthDeleteResultProps) {
+  if (success) {
+    return <></>;
+  }
+
+  return (
+    <tr>
+      <td colSpan={5} className="py-3 px-4 text-center text-red-600">
+        Failed to delete client: {error || "Unknown error"}
+      </td>
+    </tr>
+  );
+}

frontend/src/features/slices/oauth/templates/fragments/OAuthRegistrationResult.tsx

···
+import { Button } from "../../../../../shared/fragments/Button.tsx";
+
+interface OAuthRegistrationResultProps {
+  success: boolean;
+  sliceId: string;
+  clientId?: string;
+  error?: string;
+}
+
+export function OAuthRegistrationResult({
+  success,
+  sliceId,
+  clientId,
+  error,
+}: OAuthRegistrationResultProps) {
+  if (success) {
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="bg-white rounded-lg p-6 max-w-md w-full">
+          <h2 className="text-xl font-semibold text-gray-800 mb-4">
+            OAuth Client Registered
+          </h2>
+          <p className="text-gray-600 mb-4">
+            Your OAuth client has been successfully registered.
+          </p>
+          {clientId && (
+            <div className="bg-gray-50 rounded p-3 mb-4">
+              <p className="text-sm text-gray-700 font-medium">Client ID:</p>
+              <p className="font-mono text-sm">{clientId}</p>
+            </div>
+          )}
+          <div className="flex justify-end gap-3">
+            <Button
+              type="button"
+              variant="primary"
+              hx-get={`/slices/${sliceId}/oauth`}
+              hx-target="body"
+              hx-swap="innerHTML"
+              hx-push-url="true"
+            >
+              View OAuth Clients
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 max-w-md w-full">
+        <h2 className="text-xl font-semibold text-red-600 mb-4">
+          Registration Failed
+        </h2>
+        <p className="text-gray-600 mb-4">
+          Failed to register OAuth client: {error || "Unknown error"}
+        </p>
+        <div className="flex justify-end gap-3">
+          <Button
+            type="button"
+            variant="secondary"
+            _="on click set #modal-container's innerHTML to ''"
+          >
+            Close
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/features/slices/overview/handlers.tsx

···
+import type { Route } from "@std/http/unstable-route";
+import { withAuth } from "../../../routes/middleware.ts";
+import { atprotoClient } from "../../../config.ts";
+import { buildAtUri } from "../../../utils/at-uri.ts";
+import { renderHTML } from "../../../utils/render.tsx";
+import { SliceOverview } from "./templates/SliceOverview.tsx";
+
+async function handleSliceOverview(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const sliceId = params?.pathname.groups.id;
+
+  if (!sliceId) {
+    return Response.redirect(new URL("/", req.url), 302);
+  }
+
+  let sliceData = {
+    sliceId,
+    sliceName: "Unknown Slice",
+    totalRecords: 0,
+    totalActors: 0,
+    totalLexicons: 0,
+    collections: [] as Array<{ name: string; count: number; actors?: number }>,
+  };
+
+  if (context.currentUser.isAuthenticated) {
+    try {
+      const sliceUri = buildAtUri({
+        did: context.currentUser.sub || "unknown",
+        collection: "social.slices.slice",
+        rkey: sliceId,
+      });
+
+      const [sliceRecord, stats] = await Promise.all([
+        atprotoClient.social.slices.slice.getRecord({ uri: sliceUri }),
+        atprotoClient.social.slices.slice.stats({ slice: sliceUri }),
+      ]);
+
+      const collections = stats.success
+        ? stats.collectionStats.map((stat) => ({
+            name: stat.collection,
+            count: stat.recordCount,
+            actors: stat.uniqueActors,
+          }))
+        : [];
+
+      sliceData = {
+        sliceId,
+        sliceName: sliceRecord.value.name,
+        totalRecords: stats.success ? stats.totalRecords : 0,
+        totalActors: stats.success ? stats.totalActors : 0,
+        totalLexicons: stats.success ? stats.totalLexicons : 0,
+        collections,
+      };
+    } catch (error) {
+      console.error("Failed to fetch slice data:", error);
+    }
+  }
+
+  return renderHTML(
+    <SliceOverview
+      {...sliceData}
+      currentTab="overview"
+      currentUser={context.currentUser}
+    />
+  );
+}
+
+export const overviewRoutes: Route[] = [
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/slices/:id" }),
+    handler: handleSliceOverview,
+  },
+];

frontend/src/features/slices/records/handlers.tsx

···
+import type { Route } from "@std/http/unstable-route";
+import { withAuth } from "../../../routes/middleware.ts";
+import { atprotoClient } from "../../../config.ts";
+import { getSliceClient } from "../../../utils/client.ts";
+import { buildAtUri } from "../../../utils/at-uri.ts";
+import { renderHTML } from "../../../utils/render.tsx";
+import { SliceRecordsPage } from "./templates/SliceRecordsPage.tsx";
+import type { IndexedRecord } from "../../../client.ts";
+
+async function handleSliceRecordsPage(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const sliceId = params?.pathname.groups.id;
+
+  if (!sliceId) {
+    return Response.redirect(new URL("/", req.url), 302);
+  }
+
+  // Get real slice data from AT Protocol
+  let sliceData = {
+    sliceId,
+    sliceName: "Unknown Slice",
+    sliceDomain: "",
+    totalRecords: 0,
+    collections: [] as Array<{ name: string; count: number }>,
+  };
+
+  if (context.currentUser.isAuthenticated) {
+    try {
+      const sliceUri = buildAtUri({
+        did: context.currentUser.sub ?? "unknown",
+        collection: "social.slices.slice",
+        rkey: sliceId,
+      });
+
+      const [sliceRecord, stats] = await Promise.all([
+        atprotoClient.social.slices.slice.getRecord({ uri: sliceUri }),
+        atprotoClient.social.slices.slice.stats({ slice: sliceUri }),
+      ]);
+
+      const collections = stats.success
+        ? stats.collectionStats.map((stat) => ({
+            name: stat.collection,
+            count: stat.recordCount,
+          }))
+        : [];
+
+      sliceData = {
+        sliceId,
+        sliceName: sliceRecord.value.name,
+        sliceDomain: sliceRecord.value.domain || "",
+        totalRecords: stats.success ? stats.totalRecords : 0,
+        collections,
+      };
+    } catch (error) {
+      console.error("Failed to fetch slice:", error);
+    }
+  }
+
+  // Get URL parameters for collection, author, and search filtering
+  const url = new URL(req.url);
+  const selectedCollection = url.searchParams.get("collection") || "";
+  const selectedAuthor = url.searchParams.get("author") || "";
+  const searchQuery = url.searchParams.get("search") || "";
+
+  // Fetch real records if a collection is selected
+  let records: Array<IndexedRecord & { pretty_value: string }> = [];
+
+  if (
+    (selectedCollection || searchQuery) &&
+    sliceData.collections.length > 0
+  ) {
+    try {
+      const sliceClient = getSliceClient(context, sliceId);
+      const recordsResult =
+        await sliceClient.social.slices.slice.getSliceRecords({
+          where: {
+            ...(selectedCollection && {
+              collection: { eq: selectedCollection },
+            }),
+            ...(searchQuery && { json: { contains: searchQuery } }),
+            ...(selectedAuthor && { did: { eq: selectedAuthor } }),
+          },
+          limit: 20,
+        });
+
+      if (recordsResult.success) {
+        records = recordsResult.records.map((record) => ({
+          uri: record.uri,
+          indexedAt: record.indexedAt,
+          collection: record.collection,
+          did: record.did,
+          cid: record.cid,
+          value: record.value,
+          pretty_value: JSON.stringify(record.value, null, 2),
+        }));
+      }
+    } catch (error) {
+      console.error("Failed to fetch records:", error);
+    }
+  }
+
+  const recordsData = {
+    ...sliceData,
+    records,
+    collection: selectedCollection,
+    author: selectedAuthor,
+    search: searchQuery,
+    availableCollections: sliceData.collections,
+  };
+
+  return renderHTML(
+    <SliceRecordsPage {...recordsData} currentUser={context.currentUser} />
+  );
+}
+
+export const recordsRoutes: Route[] = [
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/slices/:id/records" }),
+    handler: handleSliceRecordsPage,
+  },
+];

frontend/src/features/slices/records/templates/SliceRecordsPage.tsx

···
+import { Layout } from "../../../../shared/fragments/Layout.tsx";
+import { SliceTabs } from "../../shared/fragments/SliceTabs.tsx";
+import { EmptyRecordsState } from "./fragments/EmptyRecordsState.tsx";
+import { RecordFilterForm } from "./fragments/RecordFilterForm.tsx";
+import { RecordsList } from "./fragments/RecordsList.tsx";
+import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
+import type { IndexedRecord } from "../../../../client.ts";
+
+interface Record extends IndexedRecord {
+  pretty_value?: string;
+}
+
+interface AvailableCollection {
+  name: string;
+  count: number;
+}
+
+interface SliceRecordsPageProps {
+  records?: Record[];
+  availableCollections?: AvailableCollection[];
+  collection?: string;
+  author?: string;
+  search?: string;
+  sliceName?: string;
+  sliceId?: string;
+  currentUser?: AuthenticatedUser;
+}
+
+export function SliceRecordsPage({
+  records = [],
+  availableCollections = [],
+  collection = "",
+  author = "",
+  search = "",
+  sliceName = "My Slice",
+  sliceId = "example",
+  currentUser,
+}: SliceRecordsPageProps) {
+  return (
+    <Layout title={`${sliceName} - Records`} currentUser={currentUser}>
+      <div>
+        <div className="flex items-center justify-between mb-8">
+          <div className="flex items-center">
+            <a href="/" className="text-blue-600 hover:text-blue-800 mr-4">
+              ← Back to Slices
+            </a>
+            <h1 className="text-3xl font-bold text-gray-800">{sliceName}</h1>
+          </div>
+        </div>
+
+        <SliceTabs sliceId={sliceId} currentTab="records" />
+
+        <RecordFilterForm
+          availableCollections={availableCollections}
+          collection={collection}
+          author={author}
+          search={search}
+        />
+
+        {records.length > 0 ? (
+          <RecordsList records={records} />
+        ) : (
+          <EmptyRecordsState
+            collection={collection}
+            author={author}
+            search={search}
+            sliceId={sliceId}
+          />
+        )}
+      </div>
+    </Layout>
+  );
+}

frontend/src/features/slices/records/templates/fragments/EmptyRecordsState.tsx

···
+import { Button } from "../../../../../shared/fragments/Button.tsx";
+
+interface EmptyRecordsStateProps {
+  collection?: string;
+  author?: string;
+  search?: string;
+  sliceId: string;
+}
+
+export function EmptyRecordsState({
+  collection,
+  author,
+  search,
+  sliceId,
+}: EmptyRecordsStateProps) {
+  return (
+    <div className="bg-white rounded-lg shadow-md p-8 text-center">
+      <div className="text-gray-400 mb-4">
+        <svg
+          className="mx-auto h-16 w-16"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={1}
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+          />
+        </svg>
+      </div>
+      <h3 className="text-lg font-medium text-gray-900 mb-2">
+        No records found
+      </h3>
+      <p className="text-gray-500 mb-6">
+        {collection || author || search
+          ? "Try adjusting your filters or search terms, or sync some data first."
+          : "Start by syncing some AT Protocol collections."}
+      </p>
+      <Button href={`/slices/${sliceId}/sync`} variant="primary">
+        Go to Sync
+      </Button>
+    </div>
+  );
+}

frontend/src/features/slices/records/templates/fragments/RecordFilterForm.tsx

···
+import { Button } from "../../../../../shared/fragments/Button.tsx";
+import { Input } from "../../../../../shared/fragments/Input.tsx";
+import { Select } from "../../../../../shared/fragments/Select.tsx";
+
+interface AvailableCollection {
+  name: string;
+  count: number;
+}
+
+interface RecordFilterFormProps {
+  availableCollections: AvailableCollection[];
+  collection: string;
+  author: string;
+  search: string;
+}
+
+export function RecordFilterForm({
+  availableCollections,
+  collection,
+  author,
+  search,
+}: RecordFilterFormProps) {
+  return (
+    <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-xl font-semibold">Filter Records</h2>
+      </div>
+      <form
+        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
+        method="get"
+        _="on submit
+             if #author.value is empty
+               remove @name from #author
+             end
+             if #search.value is empty
+               remove @name from #search
+             end"
+      >
+        <Select label="Collection" name="collection">
+          <option value="">All Collections</option>
+          {availableCollections.map((coll) => (
+            <option
+              key={coll.name}
+              value={coll.name}
+              selected={coll.name === collection}
+            >
+              {coll.name} ({coll.count})
+            </option>
+          ))}
+        </Select>
+
+        <Input
+          label="Author DID"
+          type="text"
+          name="author"
+          id="author"
+          value={author}
+          placeholder="did:plc:..."
+        />
+
+        <Input
+          label="Search"
+          type="text"
+          name="search"
+          id="search"
+          value={search}
+          placeholder="Search in record content..."
+        />
+
+        <div className="flex items-end">
+          <Button type="submit" variant="primary">
+            {search ? "Search" : "Filter"}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

frontend/src/features/slices/records/templates/fragments/RecordsList.tsx

···
+import type { IndexedRecord } from "../../../../../client.ts";
+
+interface Record extends IndexedRecord {
+  pretty_value?: string;
+}
+
+interface RecordsListProps {
+  records: Record[];
+}
+
+export function RecordsList({ records }: RecordsListProps) {
+  return (
+    <div className="bg-white rounded-lg shadow-md">
+      <div className="px-6 py-4 border-b border-gray-200">
+        <h2 className="text-lg font-semibold">
+          Records ({records.length})
+        </h2>
+      </div>
+      <div className="divide-y divide-gray-200">
+        {records.map((record) => (
+          <div key={record.uri} className="p-6">
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <div>
+                <h3 className="text-lg font-medium text-gray-900 mb-2">
+                  Metadata
+                </h3>
+                <dl className="grid grid-cols-1 gap-x-4 gap-y-2 text-sm">
+                  <div className="grid grid-cols-3 gap-4">
+                    <dt className="font-medium text-gray-500">URI:</dt>
+                    <dd className="col-span-2 text-gray-900 break-all">
+                      {record.uri}
+                    </dd>
+                  </div>
+                  <div className="grid grid-cols-3 gap-4">
+                    <dt className="font-medium text-gray-500">
+                      Collection:
+                    </dt>
+                    <dd className="col-span-2 text-gray-900">
+                      {record.collection}
+                    </dd>
+                  </div>
+                  <div className="grid grid-cols-3 gap-4">
+                    <dt className="font-medium text-gray-500">DID:</dt>
+                    <dd className="col-span-2 text-gray-900 break-all">
+                      {record.did}
+                    </dd>
+                  </div>
+                  <div className="grid grid-cols-3 gap-4">
+                    <dt className="font-medium text-gray-500">CID:</dt>
+                    <dd className="col-span-2 text-gray-900 break-all">
+                      {record.cid}
+                    </dd>
+                  </div>
+                  <div className="grid grid-cols-3 gap-4">
+                    <dt className="font-medium text-gray-500">
+                      Indexed:
+                    </dt>
+                    <dd className="col-span-2 text-gray-900">
+                      {new Date(record.indexedAt).toLocaleString()}
+                    </dd>
+                  </div>
+                </dl>
+              </div>
+              <div>
+                <h3 className="text-lg font-medium text-gray-900 mb-2">
+                  Record Data
+                </h3>
+                <pre className="bg-gray-50 p-3 rounded text-xs overflow-auto max-h-64">
+                  {record.pretty_value ||
+                    JSON.stringify(record.value, null, 2)}
+                </pre>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/features/slices/settings/handlers.tsx

···
+import type { Route } from "@std/http/unstable-route";
+import { withAuth } from "../../../routes/middleware.ts";
+import { atprotoClient } from "../../../config.ts";
+import { buildSliceUri } from "../../../utils/at-uri.ts";
+import { renderHTML } from "../../../utils/render.tsx";
+import { hxRedirect } from "../../../utils/htmx.ts";
+import { SliceSettings } from "./templates/SliceSettings.tsx";
+
+async function handleSliceSettingsPage(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const sliceId = params?.pathname.groups.id;
+
+  if (!sliceId) {
+    return Response.redirect(new URL("/", req.url), 302);
+  }
+
+  if (!context.currentUser.isAuthenticated) {
+    return Response.redirect(new URL("/login", req.url), 302);
+  }
+
+  const url = new URL(req.url);
+  const updated = url.searchParams.get("updated");
+  const error = url.searchParams.get("error");
+
+  // Get real slice data from AT Protocol
+  let sliceData = {
+    sliceId,
+    sliceName: "Unknown Slice",
+    sliceDomain: "",
+  };
+
+  try {
+    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
+    const slice = await atprotoClient.social.slices.slice.getRecord({
+      uri: sliceUri,
+    });
+
+    if (slice.value) {
+      sliceData = {
+        sliceId,
+        sliceName: slice.value.name || "Unknown Slice",
+        sliceDomain: slice.value.domain || "",
+      };
+    }
+  } catch (error) {
+    console.error("Failed to fetch slice:", error);
+  }
+
+  return renderHTML(
+    <SliceSettings
+      {...sliceData}
+      updated={updated === "true"}
+      error={error}
+      currentUser={context.currentUser}
+    />
+  );
+}
+
+async function handleUpdateSliceSettings(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const sliceId = params?.pathname.groups.id;
+
+  if (!sliceId) {
+    return new Response("Slice ID is required", { status: 400 });
+  }
+
+  if (!context.currentUser.isAuthenticated) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  try {
+    const formData = await req.formData();
+    const name = formData.get("name") as string;
+    const domain = formData.get("domain") as string;
+
+    if (!name || name.trim().length === 0) {
+      return new Response("Name is required", { status: 400 });
+    }
+
+    if (!domain || domain.trim().length === 0) {
+      return new Response("Domain is required", { status: 400 });
+    }
+
+    // Construct the URI for this slice
+    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
+
+    // Get the current record first
+    const currentRecord = await atprotoClient.social.slices.slice.getRecord({
+      uri: sliceUri,
+    });
+
+    // Update the record with new name and domain
+    await atprotoClient.social.slices.slice.updateRecord(sliceId, {
+      ...currentRecord.value,
+      name: name.trim(),
+      domain: domain.trim(),
+    });
+
+    return hxRedirect(`/slices/${sliceId}/settings?updated=true`);
+  } catch (_error) {
+    return hxRedirect(`/slices/${sliceId}/settings?error=update_failed`);
+  }
+}
+
+async function handleDeleteSlice(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const sliceId = params?.pathname.groups.id;
+
+  if (!sliceId) {
+    return new Response("Slice ID is required", { status: 400 });
+  }
+
+  if (!context.currentUser.isAuthenticated) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  try {
+    // Delete the slice record from AT Protocol
+    await atprotoClient.social.slices.slice.deleteRecord(sliceId);
+
+    return hxRedirect("/");
+  } catch (_error) {
+    return new Response("Failed to delete slice", { status: 500 });
+  }
+}
+
+export const settingsRoutes: Route[] = [
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/slices/:id/settings" }),
+    handler: handleSliceSettingsPage,
+  },
+  {
+    method: "PUT",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/settings" }),
+    handler: handleUpdateSliceSettings,
+  },
+  {
+    method: "DELETE",
+    pattern: new URLPattern({ pathname: "/api/slices/:id" }),
+    handler: handleDeleteSlice,
+  },
+];

frontend/src/features/slices/sync-logs/handlers.tsx

···
+import type { Route } from "@std/http/unstable-route";
+import { renderHTML } from "../../../utils/render.tsx";
+import { withAuth, requireAuth } from "../../../routes/middleware.ts";
+import { getSliceClient } from "../../../utils/client.ts";
+import { buildAtUri } from "../../../utils/at-uri.ts";
+import { SyncJobLogsPage } from "./templates/SyncJobLogsPage.tsx";
+import { SyncJobLogs } from "./templates/SyncJobLogs.tsx";
+
+async function handleSyncJobLogsPage(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+
+  if (!context.currentUser.isAuthenticated) {
+    return Response.redirect(new URL("/login", req.url), 302);
+  }
+
+  const sliceId = params?.pathname.groups.id;
+  const jobId = params?.pathname.groups.jobId;
+
+  if (!sliceId || !jobId) {
+    return new Response("Invalid slice ID or job ID", { status: 400 });
+  }
+
+  // Get slice details to pass slice name
+  let slice: { name: string } = { name: "Unknown Slice" };
+  try {
+    const sliceClient = getSliceClient(context, sliceId);
+    const sliceRecord = await sliceClient.social.slices.slice.getRecord({
+      uri: buildAtUri({
+        did: context.currentUser.sub!,
+        collection: "social.slices.slice",
+        rkey: sliceId,
+      }),
+    });
+    if (sliceRecord) {
+      slice = { name: sliceRecord.value.name };
+    }
+  } catch (error) {
+    console.error("Failed to fetch slice:", error);
+  }
+
+  return renderHTML(
+    <SyncJobLogsPage
+      sliceName={slice.name}
+      sliceId={sliceId}
+      jobId={jobId}
+      currentUser={context.currentUser}
+    />
+  );
+}
+
+async function handleSyncJobLogs(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const sliceId = params?.pathname.groups.id;
+  const jobId = params?.pathname.groups.jobId;
+
+  if (!sliceId || !jobId) {
+    return renderHTML(
+      <div className="p-8 text-center text-red-600">
+        Invalid slice ID or job ID
+      </div>,
+      { status: 400 }
+    );
+  }
+
+  try {
+    const sliceClient = getSliceClient(context, sliceId);
+    const logsResponse = await sliceClient.social.slices.slice.getJobLogs({
+      jobId,
+    });
+
+    if (logsResponse.logs && Array.isArray(logsResponse.logs)) {
+      return renderHTML(<SyncJobLogs logs={logsResponse.logs} />);
+    }
+
+    return renderHTML(
+      <div className="p-8 text-center text-gray-600">No logs available</div>
+    );
+  } catch (error) {
+    console.error("Failed to get sync job logs:", error);
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    return renderHTML(
+      <div className="p-8 text-center text-red-600">
+        Failed to load logs: {errorMessage}
+      </div>
+    );
+  }
+}
+
+export const syncLogsRoutes: Route[] = [
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/slices/:id/sync/logs/:jobId" }),
+    handler: handleSyncJobLogsPage,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/sync/logs/:jobId" }),
+    handler: handleSyncJobLogs,
+  },
+];

frontend/src/features/slices/sync-logs/templates/SyncJobLogs.tsx

···
+import type { LogEntry } from "../../../../client.ts";
+import { LogViewer } from "../../../../shared/fragments/LogViewer.tsx";
+
+interface SyncJobLogsProps {
+  logs: LogEntry[];
+}
+
+export function SyncJobLogs({ logs }: SyncJobLogsProps) {
+  return (
+    <LogViewer 
+      logs={logs} 
+      emptyMessage="No logs available for this sync job."
+    />
+  );
+}

frontend/src/features/slices/sync/handlers.tsx

···
+import type { Route } from "@std/http/unstable-route";
+import { renderHTML } from "../../../utils/render.tsx";
+import { withAuth, requireAuth } from "../../../routes/middleware.ts";
+import { getSliceClient } from "../../../utils/client.ts";
+import { buildSliceUri, buildAtUri } from "../../../utils/at-uri.ts";
+import { atprotoClient } from "../../../config.ts";
+import { SliceSyncPage } from "./templates/SliceSyncPage.tsx";
+import { SyncResult } from "./templates/fragments/SyncResult.tsx";
+import { JobHistory } from "./templates/fragments/JobHistory.tsx";
+
+async function handleSliceSync(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const sliceId = params?.pathname.groups.id;
+
+  if (!sliceId) {
+    return renderHTML(
+      <SyncResult success={false} error="Invalid slice ID" />
+    );
+  }
+
+  try {
+    const formData = await req.formData();
+    const collectionsText = (formData.get("collections") as string) || "";
+    const externalCollectionsText =
+      (formData.get("external_collections") as string) || "";
+    const reposText = (formData.get("repos") as string) || "";
+
+    const collections = collectionsText
+      .split("\n")
+      .map((line) => line.trim())
+      .filter((line) => line.length > 0);
+
+    const externalCollections = externalCollectionsText
+      .split("\n")
+      .map((line) => line.trim())
+      .filter((line) => line.length > 0);
+
+    const repos = reposText
+      .split("\n")
+      .map((line) => line.trim())
+      .filter((line) => line.length > 0);
+
+    if (collections.length === 0 && externalCollections.length === 0) {
+      return renderHTML(
+        <SyncResult
+          success={false}
+          error="Please specify at least one collection (primary or external) to sync"
+        />
+      );
+    }
+
+    const sliceClient = getSliceClient(context, sliceId);
+    const syncJobResponse = await sliceClient.social.slices.slice.startSync({
+      collections: collections.length > 0 ? collections : undefined,
+      externalCollections:
+        externalCollections.length > 0 ? externalCollections : undefined,
+      repos: repos.length > 0 ? repos : undefined,
+    });
+
+    return renderHTML(
+      <SyncResult
+        success={syncJobResponse.success}
+        message={
+          syncJobResponse.success
+            ? `Sync job started successfully. Job ID: ${syncJobResponse.jobId}`
+            : syncJobResponse.message
+        }
+        jobId={syncJobResponse.jobId}
+        collectionsCount={collections.length + externalCollections.length}
+        error={syncJobResponse.success ? undefined : syncJobResponse.message}
+      />
+    );
+  } catch (error) {
+    console.error("Failed to start sync:", error);
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    return renderHTML(<SyncResult success={false} error={errorMessage} />);
+  }
+}
+
+async function handleJobHistory(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const sliceId = params?.pathname.groups.id;
+
+  if (!sliceId) {
+    return renderHTML(
+      <div className="p-8 text-center text-red-600">Invalid slice ID</div>,
+      { status: 400 }
+    );
+  }
+
+  try {
+    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
+    const sliceClient = getSliceClient(context, sliceId);
+    const jobsResponse = await sliceClient.social.slices.slice.getJobHistory({
+      userDid: context.currentUser.sub!,
+      sliceUri: sliceUri,
+      limit: 10,
+    });
+
+    return renderHTML(
+      <JobHistory jobs={jobsResponse || []} sliceId={sliceId} />
+    );
+  } catch (error) {
+    console.error("Failed to fetch job history:", error);
+    return renderHTML(
+      <div className="p-8 text-center text-red-600">
+        Failed to load job history
+      </div>
+    );
+  }
+}
+
+async function handleSliceSyncPage(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  if (!context.currentUser.isAuthenticated) {
+    return new Response("", {
+      status: 302,
+      headers: { location: "/login" },
+    });
+  }
+
+  const sliceId = params?.pathname.groups.id;
+  if (!sliceId) {
+    return new Response("Invalid slice ID", { status: 400 });
+  }
+
+  // Get the slice record
+  const sliceUri = buildAtUri({
+    did: context.currentUser.sub!,
+    collection: "social.slices.slice",
+    rkey: sliceId,
+  });
+
+  const sliceClient = getSliceClient(context, sliceId);
+
+  let slice;
+  const collections: string[] = [];
+  const externalCollections: string[] = [];
+
+  try {
+    slice = await atprotoClient.social.slices.slice.getRecord({
+      uri: sliceUri,
+    });
+
+    // Get all lexicons and filter by record types
+    try {
+      const lexiconsResponse =
+        await sliceClient.social.slices.lexicon.getRecords();
+      const recordLexicons = lexiconsResponse.records.filter((lexicon) => {
+        try {
+          const definitions = JSON.parse(lexicon.value.definitions);
+          return definitions.main.type === "record";
+        } catch {
+          return false;
+        }
+      });
+
+      // Categorize by domain - primary collections match slice domain, external don't
+      const sliceDomain = slice.value.domain;
+
+      recordLexicons.forEach((lexicon) => {
+        if (lexicon.value.nsid.startsWith(sliceDomain)) {
+          collections.push(lexicon.value.nsid);
+        } else {
+          externalCollections.push(lexicon.value.nsid);
+        }
+      });
+    } catch (error) {
+      console.error("Error fetching lexicons:", error);
+    }
+  } catch (error) {
+    console.error("Error fetching slice:", error);
+    return new Response("Slice not found", { status: 404 });
+  }
+
+  return renderHTML(
+    <SliceSyncPage
+      sliceName={slice.value.name}
+      sliceId={sliceId}
+      currentUser={context.currentUser}
+      collections={collections}
+      externalCollections={externalCollections}
+    />
+  );
+}
+
+export const syncRoutes: Route[] = [
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/slices/:id/sync" }),
+    handler: handleSliceSyncPage,
+  },
+  {
+    method: "POST",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/sync" }),
+    handler: handleSliceSync,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/job-history" }),
+    handler: handleJobHistory,
+  },
+];

frontend/src/features/slices/sync/templates/SliceSyncPage.tsx

···
+import { Layout } from "../../../../shared/fragments/Layout.tsx";
+import { SliceTabs } from "../../shared/fragments/SliceTabs.tsx";
+import { Button } from "../../../../shared/fragments/Button.tsx";
+import { Textarea } from "../../../../shared/fragments/Textarea.tsx";
+import { JobHistory } from "./fragments/JobHistory.tsx";
+import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
+
+interface SliceSyncPageProps {
+  sliceName?: string;
+  sliceId?: string;
+  currentUser?: AuthenticatedUser;
+  collections?: string[];
+  externalCollections?: string[];
+}
+
+export function SliceSyncPage({
+  sliceName = "My Slice",
+  sliceId = "example",
+  currentUser,
+  collections = [],
+  externalCollections = [],
+}: SliceSyncPageProps) {
+  return (
+    <Layout title={`${sliceName} - Sync`} currentUser={currentUser}>
+      <div>
+        <div className="flex items-center justify-between mb-8">
+          <div className="flex items-center">
+            <a href="/" className="text-blue-600 hover:text-blue-800 mr-4">
+              ← Back to Slices
+            </a>
+            <h1 className="text-3xl font-bold text-gray-800">{sliceName}</h1>
+          </div>
+        </div>
+
+        <SliceTabs sliceId={sliceId} currentTab="sync" />
+
+        <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+          <h2 className="text-xl font-semibold text-gray-800 mb-4">
+            Sync Collections
+          </h2>
+          <p className="text-gray-600 mb-6">
+            Sync entire collections from AT Protocol network to this slice.
+          </p>
+
+          <form
+            hx-post={`/api/slices/${sliceId}/sync`}
+            hx-target="#sync-result"
+            hx-swap="innerHTML"
+            hx-on="htmx:afterRequest: if(event.detail.successful) this.reset()"
+            className="space-y-4"
+          >
+            <Textarea
+              id="collections"
+              name="collections"
+              label="Primary Collections"
+              rows={4}
+              placeholder={
+                collections.length > 0
+                  ? "Primary collections (matching your slice domain) loaded below:"
+                  : "Enter primary collections matching your slice domain, one per line:\n\nyour.domain.collection\nyour.domain.post"
+              }
+              defaultValue={collections.length > 0 ? collections.join("\n") : ""}
+            />
+            <p className="mt-1 text-xs text-gray-500">
+              Primary collections are those that match your slice's domain.
+            </p>
+
+            <Textarea
+              id="external_collections"
+              name="external_collections"
+              label="External Collections"
+              rows={4}
+              placeholder={
+                externalCollections.length > 0
+                  ? "External collections loaded below:"
+                  : "Enter external collections (not matching your domain), one per line:\n\napp.bsky.feed.post\napp.bsky.actor.profile"
+              }
+              defaultValue={externalCollections.length > 0 ? externalCollections.join("\n") : ""}
+            />
+            <p className="mt-1 text-xs text-gray-500">
+              External collections are those that don't match your slice's domain.
+            </p>
+
+            <Textarea
+              id="repos"
+              name="repos"
+              label="Specific Repositories (Optional)"
+              rows={4}
+              placeholder="Leave empty to sync all repositories, or specify DIDs:
+
+did:plc:example1
+did:plc:example2"
+            />
+
+            <div className="flex space-x-4">
+              <Button
+                type="submit"
+                variant="success"
+                className="flex items-center justify-center"
+              >
+                <i
+                  data-lucide="loader-2"
+                  className="htmx-indicator animate-spin mr-2 h-4 w-4"
+                  _="on load js lucide.createIcons() end"
+                ></i>
+                <span className="htmx-indicator">Syncing...</span>
+                <span className="default-text">Start Sync</span>
+              </Button>
+            </div>
+          </form>
+
+          <div id="sync-result" className="mt-4"></div>
+        </div>
+
+        <div
+          hx-get={`/api/slices/${sliceId}/job-history`}
+          hx-trigger="load, every 10s"
+          hx-swap="innerHTML"
+          className="mb-6"
+        >
+          <JobHistory jobs={[]} sliceId={sliceId} />
+        </div>
+
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
+          <h3 className="text-lg font-semibold text-blue-800 mb-2">
+            💡 Tips for Syncing
+          </h3>
+          <ul className="text-blue-700 space-y-1 text-sm">
+            <li>
+              • Primary collections matching your slice domain are automatically
+              loaded in the first field
+            </li>
+            <li>
+              • External collections from other domains are loaded in the second
+              field
+            </li>
+            <li>
+              • Use External Collections to sync popular collections like{" "}
+              <code>app.bsky.feed.post</code> that aren't in your lexicons
+            </li>
+            <li>• External collections bypass lexicon validation</li>
+            <li>• Large syncs may take several minutes to complete</li>
+            <li>• Leave repositories empty to sync from all available users</li>
+            <li>• Use the Records tab to browse synced data</li>
+          </ul>
+        </div>
+      </div>
+    </Layout>
+  );
+}

frontend/src/main.ts

···
 import { route } from "@std/http/unstable-route";
-import { allRoutes } from "./routes/index.ts";
-import { createLoggingHandler } from "./lib/request-logger.ts";
+import { allRoutes } from "./routes/mod.ts";
+import { createLoggingHandler } from "./lib/request_logger.ts";
 
 function defaultHandler(req: Request) {
   return Response.redirect(new URL("/", req.url), 302);

frontend/src/pages/IndexPage.tsx

···
-import { Layout } from "../components/Layout.tsx";
-
-interface Slice {
-  id: string;
-  name: string;
-  createdAt: string;
-}
-
-interface IndexPageProps {
-  slices?: Slice[];
-  currentUser?: { handle?: string; isAuthenticated: boolean };
-}
-
-export function IndexPage({ slices = [], currentUser }: IndexPageProps) {
-  return (
-    <Layout title="Slices" currentUser={currentUser}>
-      <div>
-        <div className="flex justify-between items-center mb-8">
-          <h1 className="text-3xl font-bold text-gray-800">Slices</h1>
-          <button
-            type="button"
-            className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
-            hx-get="/dialogs/create-slice"
-            hx-target="body"
-            hx-swap="beforeend"
-          >
-            + Create Slice
-          </button>
-        </div>
-
-        {slices.length > 0 ? (
-          <div className="bg-white rounded-lg shadow-md">
-            <div className="px-6 py-4 border-b border-gray-200">
-              <h2 className="text-lg font-semibold text-gray-800">
-                Your Slices ({slices.length})
-              </h2>
-            </div>
-            <div className="divide-y divide-gray-200">
-              {slices.map((slice) => (
-                <a
-                  key={slice.id}
-                  href={`/slices/${slice.id}`}
-                  className="block px-6 py-4 hover:bg-gray-50"
-                >
-                  <div className="flex justify-between items-center">
-                    <div>
-                      <h3 className="text-lg font-medium text-gray-900">
-                        {slice.name}
-                      </h3>
-                      <p className="text-sm text-gray-500">
-                        Created {new Date(slice.createdAt).toLocaleDateString()}
-                      </p>
-                    </div>
-                    <div className="text-gray-400">
-                      <svg
-                        className="h-5 w-5"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M9 5l7 7-7 7"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                </a>
-              ))}
-            </div>
-          </div>
-        ) : (
-          <div className="bg-white rounded-lg shadow-md p-8 text-center">
-            <div className="text-gray-400 mb-4">
-              <svg
-                className="mx-auto h-16 w-16"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={1}
-                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                />
-              </svg>
-            </div>
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
-              No slices yet
-            </h3>
-            <p className="text-gray-500 mb-6">
-              Create your first slice to get started organizing your AT Protocol
-              data.
-            </p>
-            <button
-              type="button"
-              className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded"
-              hx-get="/dialogs/create-slice"
-              hx-target="body"
-              hx-swap="beforeend"
-            >
-              Create Your First Slice
-            </button>
-          </div>
-        )}
-      </div>
-    </Layout>
-  );
-}

frontend/src/pages/JetstreamLogsPage.tsx frontend/src/features/slices/jetstream/templates/JetstreamLogsPage.tsx

···
-import type { LogEntry } from "../client.ts";
-import { Layout } from "../components/Layout.tsx";
-import { JetstreamLogs } from "../components/JetstreamLogs.tsx";
-import { JetstreamStatusCompact } from "../components/JetstreamStatusCompact.tsx";
+import type { LogEntry } from "../../../../client.ts";
+import { Layout } from "../../../../shared/fragments/Layout.tsx";
+import { JetstreamLogs } from "./fragments/JetstreamLogs.tsx";
+import { JetstreamStatusCompact } from "./fragments/JetstreamStatusCompact.tsx";
+import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
 
 interface JetstreamLogsPageProps {
   logs: LogEntry[];
   sliceId: string;
-  currentUser?: { handle?: string; isAuthenticated: boolean };
+  currentUser?: AuthenticatedUser;
 }
 
 export function JetstreamLogsPage({
···
       </div>
     </Layout>
   );
-}
+}

frontend/src/pages/LoginPage.tsx

···
-import { Layout } from "../components/Layout.tsx";
-
-interface LoginPageProps {
-  error?: string;
-  currentUser?: { handle?: string; isAuthenticated: boolean };
-}
-
-export function LoginPage({ error, currentUser }: LoginPageProps) {
-  return (
-    <Layout title="Login - Slice" currentUser={currentUser}>
-      <div className="max-w-md mx-auto mt-16">
-        <div className="bg-white rounded-lg shadow-md p-8">
-          <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold text-gray-800 mb-2">
-              Welcome to Slices
-            </h1>
-            <p className="text-gray-600">
-              Sign in with your AT Protocol handle
-            </p>
-          </div>
-
-          {error && (
-            <div className="bg-red-50 border border-red-200 rounded-md p-4 mb-6">
-              <p className="text-red-700 text-sm">{error}</p>
-            </div>
-          )}
-
-          <form method="post" action="/oauth/authorize" className="space-y-6">
-            <div>
-              <label
-                htmlFor="loginHint"
-                className="block text-sm font-medium text-gray-700 mb-2"
-              >
-                AT Protocol Handle
-              </label>
-              <input
-                type="text"
-                id="loginHint"
-                name="loginHint"
-                placeholder="alice.bsky.social"
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                required
-              />
-              <p className="text-xs text-gray-500 mt-1">
-                Enter your Bluesky handle or custom domain
-              </p>
-            </div>
-
-            <button
-              type="submit"
-              className="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition-colors"
-            >
-              Sign In with OAuth
-            </button>
-          </form>
-
-          <div className="mt-8 text-center">
-            <p className="text-sm text-gray-500 mb-4">
-              Don't have an AT Protocol account?
-            </p>
-            <div className="space-y-2">
-              <a
-                href="https://bsky.app"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="block text-blue-600 hover:text-blue-800 text-sm"
-              >
-                Create account on Bluesky →
-              </a>
-              <a
-                href="https://atproto.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="block text-blue-600 hover:text-blue-800 text-sm"
-              >
-                Learn about AT Protocol →
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Layout>
-  );
-}

frontend/src/pages/SettingsPage.tsx

···
-import { Layout } from "../components/Layout.tsx";
-import { SettingsForm } from "../components/SettingsForm.tsx";
-
-interface SettingsPageProps {
-  profile?: {
-    displayName?: string;
-    description?: string;
-    avatar?: string;
-  };
-  error?: string;
-  currentUser?: { handle?: string; isAuthenticated: boolean };
-}
-
-export function SettingsPage({
-  profile,
-  error,
-  currentUser,
-}: SettingsPageProps) {
-  return (
-    <Layout title="Settings - Slice" currentUser={currentUser}>
-      <div>
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold text-gray-900">Settings</h1>
-          <p className="mt-2 text-gray-600">
-            Manage your profile information and preferences.
-          </p>
-        </div>
-
-        <SettingsForm profile={profile} error={error} />
-      </div>
-    </Layout>
-  );
-}

frontend/src/pages/SliceApiDocsPage.tsx frontend/src/features/slices/api-docs/templates/SliceApiDocsPage.tsx

···
+import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
+
 interface SliceApiDocsPageProps {
   sliceId: string;
   sliceName: string;
   accessToken?: string;
-  currentUser: {
-    isAuthenticated: boolean;
-    username?: string;
-    sub?: string;
-  };
+  currentUser: AuthenticatedUser;
 }
 
 export function SliceApiDocsPage(props: SliceApiDocsPageProps) {
···
       </body>
     </html>
   );
-}
+}

frontend/src/pages/SliceCodegenPage.tsx frontend/src/features/slices/codegen/templates/SliceCodegenPage.tsx

···
-import { Layout } from "../components/Layout.tsx";
-import { CodegenForm } from "../components/CodegenForm.tsx";
-import { SliceTabs } from "../components/SliceTabs.tsx";
+import { Layout } from "../../../../shared/fragments/Layout.tsx";
+import { SliceTabs } from "../../shared/fragments/SliceTabs.tsx";
+import { CodegenForm } from "./fragments/CodegenForm.tsx";
+import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
 
 interface SliceCodegenPageProps {
   sliceName?: string;
   sliceId?: string;
-  currentUser?: { handle?: string; isAuthenticated: boolean };
+  currentUser?: AuthenticatedUser;
 }
 
 export function SliceCodegenPage({
···
   sliceId = "example",
   currentUser,
 }: SliceCodegenPageProps) {
-
   return (
     <Layout title={`${sliceName} - Code Generation`} currentUser={currentUser}>
       <div>
···
           </div>
         </div>
 
-        {/* Tab Navigation */}
         <SliceTabs sliceId={sliceId} currentTab="codegen" />
 
         <CodegenForm sliceId={sliceId} />
-
 
         <div className="mt-6 bg-green-50 border border-green-200 rounded-lg p-6">
           <h3 className="text-lg font-semibold text-green-800 mb-2">

frontend/src/pages/SliceLexiconPage.tsx frontend/src/features/slices/lexicon/templates/SliceLexiconPage.tsx

···
-import { Layout } from "../components/Layout.tsx";
-import { EmptyLexiconState } from "../components/EmptyLexiconState.tsx";
-import { SliceTabs } from "../components/SliceTabs.tsx";
+import { Layout } from "../../../../shared/fragments/Layout.tsx";
+import { SliceTabs } from "../../shared/fragments/SliceTabs.tsx";
+import { EmptyLexiconState } from "./fragments/EmptyLexiconState.tsx";
+import { Button } from "../../../../shared/fragments/Button.tsx";
+import { Textarea } from "../../../../shared/fragments/Textarea.tsx";
+import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
 
 interface SliceLexiconPageProps {
   sliceName?: string;
   sliceId?: string;
-  currentUser?: { handle?: string; isAuthenticated: boolean };
+  currentUser?: AuthenticatedUser;
 }
 
 export function SliceLexiconPage({
···
   sliceId = "example",
   currentUser,
 }: SliceLexiconPageProps) {
-
   return (
     <Layout title={`${sliceName} - Lexicons`} currentUser={currentUser}>
       <div>
···
           </div>
         </div>
 
-        {/* Tab Navigation */}
         <SliceTabs sliceId={sliceId} currentTab="lexicon" />
 
         <div className="bg-white rounded-lg shadow-md p-6 mb-6">
···
             className="space-y-4"
           >
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Lexicon JSON
-              </label>
-              <textarea
+              <Textarea
+                label="Lexicon JSON"
                 name="lexicon_json"
                 rows={12}
-                className="block w-full border border-gray-300 rounded-md px-3 py-2 font-mono text-sm"
+                class="font-mono text-sm"
                 placeholder={`{
   "lexicon": 1,
   "id": "social.slices.example",
···
               </p>
             </div>
 
-            <button
-              type="submit"
-              className="bg-purple-500 hover:bg-purple-600 text-white px-6 py-2 rounded-md"
-            >
+            <Button type="submit" variant="purple">
               Add Lexicon
-            </button>
+            </Button>
           </form>
 
           <div id="lexicon-result" className="mt-4"></div>
         </div>
 
-        <div className="bg-white rounded-lg shadow-md p-6 mb-6 hidden">
-          <h2 className="text-xl font-semibold text-gray-800 mb-4">
-            Upload Lexicon Files
-          </h2>
-          <p className="text-gray-600 mb-6">
-            Or upload lexicon schema files to define custom record types for
-            this slice.
-          </p>
-
-          <form
-            method="post"
-            action={`/slices/${sliceId}/lexicon/upload`}
-            enctype="multipart/form-data"
-            className="space-y-4"
-          >
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Lexicon File
-              </label>
-              <input
-                type="file"
-                name="lexicon"
-                accept=".zip,.json"
-                className="block w-full border border-gray-300 rounded-md px-3 py-2"
-              />
-              <p className="text-sm text-gray-500 mt-1">
-                Upload a ZIP file containing lexicon definitions or a single
-                JSON file
-              </p>
-            </div>
-
-            <button
-              type="submit"
-              className="bg-purple-500 hover:bg-purple-600 text-white px-6 py-2 rounded-md"
-            >
-              Upload Lexicon
-            </button>
-          </form>
-        </div>
-
         <div className="bg-white rounded-lg shadow-md">
           <div className="px-6 py-4 border-b border-gray-200">
             <h2 className="text-lg font-semibold text-gray-800">
···
           </ul>
         </div>
 
-        {/* Modal container for viewing lexicons */}
         <div id="lexicon-modal"></div>
       </div>
     </Layout>

frontend/src/pages/SliceOAuthPage.tsx

···
-import { Layout } from "../components/Layout.tsx";
-import { SliceTabs } from "../components/SliceTabs.tsx";
-
-interface OAuthClient {
-  clientId: string;
-  createdAt: string;
-  clientName?: string;
-  redirectUris?: string[];
-}
-
-interface SliceOAuthPageProps {
-  sliceName?: string;
-  sliceId?: string;
-  clients?: OAuthClient[];
-  currentUser?: { handle?: string; isAuthenticated: boolean };
-  error?: string | null;
-  success?: string | null;
-}
-
-export function SliceOAuthPage({
-  sliceName = "My Slice",
-  sliceId = "example",
-  clients = [],
-  currentUser,
-  error = null,
-  success = null,
-}: SliceOAuthPageProps) {
-  return (
-    <Layout title={`${sliceName} - OAuth Clients`} currentUser={currentUser}>
-      <div>
-        <div className="flex items-center justify-between mb-8">
-          <div className="flex items-center">
-            <a href="/" className="text-blue-600 hover:text-blue-800 mr-4">
-              ← Back to Slices
-            </a>
-            <h1 className="text-3xl font-bold text-gray-800">{sliceName}</h1>
-          </div>
-        </div>
-
-        {/* Tab Navigation */}
-        <SliceTabs sliceId={sliceId} currentTab="oauth" />
-
-        {/* Success Message */}
-        {success && (
-          <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
-            ✅ {success}
-          </div>
-        )}
-
-        {/* Error Message */}
-        {error && (
-          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
-            ❌ {error}
-          </div>
-        )}
-
-        {/* OAuth Clients Content */}
-        <div className="bg-white rounded-lg shadow-md p-6">
-          <div className="flex justify-between items-center mb-6">
-            <h2 className="text-2xl font-semibold text-gray-800">
-              OAuth Clients
-            </h2>
-            <button
-              type="button"
-              hx-get={`/api/slices/${sliceId}/oauth/new`}
-              hx-target="#modal-container"
-              hx-swap="innerHTML"
-              className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition"
-            >
-              Register New Client
-            </button>
-          </div>
-
-          {clients.length === 0 ? (
-            <div className="text-center py-12">
-              <p className="text-gray-600 mb-4">
-                No OAuth clients registered for this slice.
-              </p>
-              <button
-                type="button"
-                hx-get={`/api/slices/${sliceId}/oauth/new`}
-                hx-target="#modal-container"
-                hx-swap="innerHTML"
-                className="text-blue-600 hover:text-blue-800"
-              >
-                Register your first OAuth client
-              </button>
-            </div>
-          ) : (
-            <div className="overflow-x-auto">
-              <table className="w-full">
-                <thead>
-                  <tr className="border-b">
-                    <th className="text-left py-2 px-4">Client ID</th>
-                    <th className="text-left py-2 px-4">Name</th>
-                    <th className="text-left py-2 px-4">Redirect URIs</th>
-                    <th className="text-left py-2 px-4">Created</th>
-                    <th className="text-left py-2 px-4">Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {clients.map((client) => (
-                    <tr
-                      key={client.clientId}
-                      className="border-b hover:bg-gray-50"
-                    >
-                      <td className="py-3 px-4 font-mono text-sm">
-                        {client.clientId}
-                      </td>
-                      <td className="py-3 px-4">
-                        {client.clientName || "Loading..."}
-                      </td>
-                      <td className="py-3 px-4">
-                        {client.redirectUris ? (
-                          <div className="text-sm">
-                            {client.redirectUris.slice(0, 2).map((uri, idx) => (
-                              <div key={idx} className="truncate max-w-xs">
-                                {uri}
-                              </div>
-                            ))}
-                            {client.redirectUris.length > 2 && (
-                              <div className="text-gray-500">
-                                +{client.redirectUris.length - 2} more
-                              </div>
-                            )}
-                          </div>
-                        ) : (
-                          <span className="text-gray-400">Loading...</span>
-                        )}
-                      </td>
-                      <td className="py-3 px-4 text-sm text-gray-600">
-                        {new Date(client.createdAt).toLocaleDateString()}
-                      </td>
-                      <td className="py-3 px-4">
-                        <div className="flex gap-2">
-                          <button
-                            type="button"
-                            hx-get={`/api/slices/${sliceId}/oauth/${encodeURIComponent(
-                              client.clientId
-                            )}/view`}
-                            hx-target="#modal-container"
-                            hx-swap="innerHTML"
-                            className="text-blue-600 hover:text-blue-800 text-sm"
-                          >
-                            View
-                          </button>
-                          <button
-                            type="button"
-                            hx-delete={`/api/slices/${sliceId}/oauth/${encodeURIComponent(
-                              client.clientId
-                            )}`}
-                            hx-confirm="Are you sure you want to delete this OAuth client?"
-                            hx-target="closest tr"
-                            hx-swap="outerHTML"
-                            className="text-red-600 hover:text-red-800 text-sm"
-                          >
-                            Delete
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-
-        {/* Modal Container */}
-        <div id="modal-container"></div>
-      </div>
-    </Layout>
-  );
-}

frontend/src/pages/SlicePage.tsx frontend/src/features/slices/overview/templates/SliceOverview.tsx

···
-import { Layout } from "../components/Layout.tsx";
-import { SliceTabs } from "../components/SliceTabs.tsx";
+import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
+import { Layout } from "../../../../shared/fragments/Layout.tsx";
+import { SliceTabs } from "../../shared/fragments/SliceTabs.tsx";
+import { Button } from "../../../../shared/fragments/Button.tsx";
 
 interface Collection {
   name: string;
···
   actors?: number;
 }
 
-interface SlicePageProps {
+interface SliceOverviewProps {
   totalRecords?: number;
   totalActors?: number;
   totalLexicons?: number;
···
   sliceName?: string;
   sliceId?: string;
   currentTab?: string;
-  currentUser?: { handle?: string; isAuthenticated: boolean };
+  currentUser?: AuthenticatedUser;
 }
 
-export function SlicePage({
+export function SliceOverview({
   totalRecords = 0,
   totalActors = 0,
   totalLexicons = 0,
···
   sliceId = "example",
   currentTab = "overview",
   currentUser,
-}: SlicePageProps) {
+}: SliceOverviewProps) {
   return (
     <Layout title={sliceName} currentUser={currentUser}>
       <div>
···
           </div>
         </div>
 
-        {/* Tab Navigation */}
         <SliceTabs sliceId={sliceId} currentTab={currentTab} />
 
-        {/* Jetstream Status */}
         <div 
           hx-get={`/api/jetstream/status?sliceId=${sliceId}`}
           hx-trigger="load, every 2m"
···
             <p className="text-gray-600 mb-4">
               View lexicon definitions and schemas that define your slice.
             </p>
-            <a
+            <Button
               href={`/slices/${sliceId}/lexicon`}
-              className="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded"
+              variant="purple"
             >
               View Lexicons
-            </a>
+            </Button>
           </div>
 
           <div className="bg-white rounded-lg shadow-md p-6">
···
               Browse indexed AT Protocol records by collection.
             </p>
             {collections.length > 0 ? (
-              <a
+              <Button
                 href={`/slices/${sliceId}/records`}
-                className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
+                variant="primary"
               >
                 Browse Records
-              </a>
+              </Button>
             ) : (
               <p className="text-gray-500 text-sm">
                 No records synced yet. Start by syncing some records!
···
             <p className="text-gray-600 mb-4">
               Generate TypeScript client from your lexicon definitions.
             </p>
-            <a
+            <Button
               href={`/slices/${sliceId}/codegen`}
-              className="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded"
+              variant="warning"
             >
               Generate Client
-            </a>
+            </Button>
           </div>
 
           <div className="bg-white rounded-lg shadow-md p-6">
···
             <p className="text-gray-600 mb-4">
               Interactive OpenAPI documentation for your slice's XRPC endpoints.
             </p>
-            <a
+            <Button
               href={`/slices/${sliceId}/api-docs`}
-              className="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded"
+              variant="indigo"
             >
               View API Docs
-            </a>
+            </Button>
           </div>
 
           <div className="bg-white rounded-lg shadow-md p-6">
···
             <p className="text-gray-600 mb-4">
               Sync entire collections from AT Protocol network.
             </p>
-            <a
+            <Button
               href={`/slices/${sliceId}/sync`}
-              className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded"
+              variant="success"
             >
               Start Sync
-            </a>
+            </Button>
           </div>
 
           {collections.length > 0 ? (
···
       </div>
     </Layout>
   );
-}
+}

frontend/src/pages/SliceRecordsPage.tsx

···
-import { Layout } from "../components/Layout.tsx";
-import { SliceTabs } from "../components/SliceTabs.tsx";
-
-interface Record {
-  uri: string;
-  indexedAt: string;
-  collection: string;
-  did: string;
-  cid: string;
-  value?: any;
-  pretty_value?: string;
-}
-
-interface AvailableCollection {
-  name: string;
-  count: number;
-}
-
-interface SliceRecordsPageProps {
-  records?: Record[];
-  availableCollections?: AvailableCollection[];
-  collection?: string;
-  author?: string;
-  search?: string;
-  sliceName?: string;
-  sliceId?: string;
-  currentUser?: { handle?: string; isAuthenticated: boolean };
-}
-
-export function SliceRecordsPage({
-  records = [],
-  availableCollections = [],
-  collection = "",
-  author = "",
-  search = "",
-  sliceName = "My Slice",
-  sliceId = "example",
-  currentUser,
-}: SliceRecordsPageProps) {
-  return (
-    <Layout title={`${sliceName} - Records`} currentUser={currentUser}>
-      <div>
-        <div className="flex items-center justify-between mb-8">
-          <div className="flex items-center">
-            <a href="/" className="text-blue-600 hover:text-blue-800 mr-4">
-              ← Back to Slices
-            </a>
-            <h1 className="text-3xl font-bold text-gray-800">{sliceName}</h1>
-          </div>
-        </div>
-
-        {/* Tab Navigation */}
-        <SliceTabs sliceId={sliceId} currentTab="records" />
-
-        <div className="bg-white rounded-lg shadow-md p-6 mb-6">
-          <div className="flex justify-between items-center mb-4">
-            <h2 className="text-xl font-semibold">Filter Records</h2>
-          </div>
-          <form
-            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
-            method="get"
-            _="on submit
-                 if #author.value is empty
-                   remove @name from #author
-                 end
-                 if #search.value is empty
-                   remove @name from #search
-                 end"
-          >
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Collection
-              </label>
-              <select
-                name="collection"
-                className="block w-full border border-gray-300 rounded-md px-3 py-2"
-              >
-                <option value="">All Collections</option>
-                {availableCollections.map((coll) => (
-                  <option
-                    key={coll.name}
-                    value={coll.name}
-                    selected={coll.name === collection}
-                  >
-                    {coll.name} ({coll.count})
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Author DID
-              </label>
-              <input
-                type="text"
-                name="author"
-                id="author"
-                value={author}
-                placeholder="did:plc:..."
-                className="block w-full border border-gray-300 rounded-md px-3 py-2"
-              />
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Search
-              </label>
-              <input
-                type="text"
-                name="search"
-                id="search"
-                value={search}
-                placeholder="Search in record content..."
-                className="block w-full border border-gray-300 rounded-md px-3 py-2"
-              />
-            </div>
-
-            <div className="flex items-end">
-              <button
-                type="submit"
-                className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md"
-              >
-                {search ? "Search" : "Filter"}
-              </button>
-            </div>
-          </form>
-        </div>
-
-        {records.length > 0 ? (
-          <div className="bg-white rounded-lg shadow-md">
-            <div className="px-6 py-4 border-b border-gray-200">
-              <h2 className="text-lg font-semibold">
-                Records ({records.length})
-              </h2>
-            </div>
-            <div className="divide-y divide-gray-200">
-              {records.map((record) => (
-                <div key={record.uri} className="p-6">
-                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                    <div>
-                      <h3 className="text-lg font-medium text-gray-900 mb-2">
-                        Metadata
-                      </h3>
-                      <dl className="grid grid-cols-1 gap-x-4 gap-y-2 text-sm">
-                        <div className="grid grid-cols-3 gap-4">
-                          <dt className="font-medium text-gray-500">URI:</dt>
-                          <dd className="col-span-2 text-gray-900 break-all">
-                            {record.uri}
-                          </dd>
-                        </div>
-                        <div className="grid grid-cols-3 gap-4">
-                          <dt className="font-medium text-gray-500">
-                            Collection:
-                          </dt>
-                          <dd className="col-span-2 text-gray-900">
-                            {record.collection}
-                          </dd>
-                        </div>
-                        <div className="grid grid-cols-3 gap-4">
-                          <dt className="font-medium text-gray-500">DID:</dt>
-                          <dd className="col-span-2 text-gray-900 break-all">
-                            {record.did}
-                          </dd>
-                        </div>
-                        <div className="grid grid-cols-3 gap-4">
-                          <dt className="font-medium text-gray-500">CID:</dt>
-                          <dd className="col-span-2 text-gray-900 break-all">
-                            {record.cid}
-                          </dd>
-                        </div>
-                        <div className="grid grid-cols-3 gap-4">
-                          <dt className="font-medium text-gray-500">
-                            Indexed:
-                          </dt>
-                          <dd className="col-span-2 text-gray-900">
-                            {new Date(record.indexedAt).toLocaleString()}
-                          </dd>
-                        </div>
-                      </dl>
-                    </div>
-                    <div>
-                      <h3 className="text-lg font-medium text-gray-900 mb-2">
-                        Record Data
-                      </h3>
-                      <pre className="bg-gray-50 p-3 rounded text-xs overflow-auto max-h-64">
-                        {record.pretty_value ||
-                          JSON.stringify(record.value, null, 2)}
-                      </pre>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        ) : (
-          <div className="bg-white rounded-lg shadow-md p-8 text-center">
-            <div className="text-gray-400 mb-4">
-              <svg
-                className="mx-auto h-16 w-16"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={1}
-                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                />
-              </svg>
-            </div>
-            <h3 className="text-lg font-medium text-gray-900 mb-2">
-              No records found
-            </h3>
-            <p className="text-gray-500 mb-6">
-              {collection || author || search
-                ? "Try adjusting your filters or search terms, or sync some data first."
-                : "Start by syncing some AT Protocol collections."}
-            </p>
-            <a
-              href={`/slices/${sliceId}/sync`}
-              className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded"
-            >
-              Go to Sync
-            </a>
-          </div>
-        )}
-      </div>
-    </Layout>
-  );
-}

frontend/src/pages/SliceSettingsPage.tsx frontend/src/features/slices/settings/templates/SliceSettings.tsx

···
-import { Layout } from "../components/Layout.tsx";
-import { SliceTabs } from "../components/SliceTabs.tsx";
+import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
+import { Layout } from "../../../../shared/fragments/Layout.tsx";
+import { SliceTabs } from "../../shared/fragments/SliceTabs.tsx";
+import { Button } from "../../../../shared/fragments/Button.tsx";
+import { Input } from "../../../../shared/fragments/Input.tsx";
 
-interface SliceSettingsPageProps {
+interface SliceSettingsProps {
   sliceName?: string;
   sliceDomain?: string;
   sliceId?: string;
   updated?: boolean;
   error?: string | null;
-  currentUser?: { handle?: string; isAuthenticated: boolean };
+  currentUser?: AuthenticatedUser;
 }
 
-export function SliceSettingsPage({
+export function SliceSettings({
   sliceName = "My Slice",
   sliceDomain = "",
   sliceId = "example",
   updated = false,
   error = null,
   currentUser,
-}: SliceSettingsPageProps) {
+}: SliceSettingsProps) {
   return (
     <Layout title={`${sliceName} - Settings`} currentUser={currentUser}>
       <div>
···
               hx-swap="innerHTML"
               className="space-y-4"
             >
-              <div>
-                <label
-                  htmlFor="slice-name"
-                  className="block text-sm font-medium text-gray-700 mb-2"
-                >
-                  Slice Name
-                </label>
-                <input
-                  type="text"
-                  id="slice-name"
-                  name="name"
-                  value={sliceName}
-                  required
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
-                  placeholder="Enter slice name..."
-                />
-              </div>
+              <Input
+                label="Slice Name"
+                type="text"
+                id="slice-name"
+                name="name"
+                value={sliceName}
+                required
+                placeholder="Enter slice name..."
+              />
               
               <div>
-                <label
-                  htmlFor="slice-domain"
-                  className="block text-sm font-medium text-gray-700 mb-2"
-                >
-                  Primary Domain
-                </label>
-                <input
+                <Input
+                  label="Primary Domain"
                   type="text"
                   id="slice-domain"
                   name="domain"
                   value={sliceDomain}
                   required
-                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
                   placeholder="e.g. social.grain"
                 />
                 <p className="mt-1 text-xs text-gray-500">
···
               </div>
 
               <div className="flex justify-start">
-                <button
+                <Button
                   type="submit"
-                  className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-md font-medium"
+                  variant="primary"
+                  size="lg"
                 >
                   Update Settings
-                </button>
+                </Button>
               </div>
               <div id="settings-form-result" className="mt-4"></div>
             </form>
···
               Permanently delete this slice and all associated data. This action
               cannot be undone.
             </p>
-            <button
+            <Button
               type="button"
               hx-delete={`/api/slices/${sliceId}`}
               hx-confirm="Are you sure you want to delete this slice? This action cannot be undone."
               hx-target="body"
               hx-push-url="/"
-              className="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-md font-medium"
+              variant="danger"
+              size="lg"
             >
               Delete Slice
-            </button>
+            </Button>
           </div>
         </div>
       </div>
     </Layout>
   );
-}
+}

frontend/src/pages/SliceSyncPage.tsx

···
-import { Layout } from "../components/Layout.tsx";
-import { SliceTabs } from "../components/SliceTabs.tsx";
-import { JobHistory } from "../components/JobHistory.tsx";
-
-interface SliceSyncPageProps {
-  sliceName?: string;
-  sliceId?: string;
-  currentUser?: { handle?: string; isAuthenticated: boolean };
-  collections?: string[];
-  externalCollections?: string[];
-}
-
-export function SliceSyncPage({
-  sliceName = "My Slice",
-  sliceId = "example",
-  currentUser,
-  collections = [],
-  externalCollections = [],
-}: SliceSyncPageProps) {
-  return (
-    <Layout title={`${sliceName} - Sync`} currentUser={currentUser}>
-      <div>
-        <div className="flex items-center justify-between mb-8">
-          <div className="flex items-center">
-            <a href="/" className="text-blue-600 hover:text-blue-800 mr-4">
-              ← Back to Slices
-            </a>
-            <h1 className="text-3xl font-bold text-gray-800">{sliceName}</h1>
-          </div>
-        </div>
-
-        {/* Tab Navigation */}
-        <SliceTabs sliceId={sliceId} currentTab="sync" />
-
-        <div className="bg-white rounded-lg shadow-md p-6 mb-6">
-          <h2 className="text-xl font-semibold text-gray-800 mb-4">
-            Sync Collections
-          </h2>
-          <p className="text-gray-600 mb-6">
-            Sync entire collections from AT Protocol network to this slice.
-          </p>
-
-          <form
-            hx-post={`/api/slices/${sliceId}/sync`}
-            hx-target="#sync-result"
-            hx-swap="innerHTML"
-            hx-on="htmx:afterRequest: if(event.detail.successful) this.reset()"
-            className="space-y-4"
-          >
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Primary Collections
-              </label>
-              <textarea
-                id="collections"
-                name="collections"
-                rows={4}
-                className="block w-full border border-gray-300 rounded-md px-3 py-2"
-                placeholder={
-                  collections.length > 0
-                    ? "Primary collections (matching your slice domain) loaded below:"
-                    : "Enter primary collections matching your slice domain, one per line:\n\nyour.domain.collection\nyour.domain.post"
-                }
-              >
-                {collections.length > 0 ? collections.join("\n") : ""}
-              </textarea>
-              <p className="mt-1 text-xs text-gray-500">
-                Primary collections are those that match your slice's domain.
-              </p>
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                External Collections
-              </label>
-              <textarea
-                id="external_collections"
-                name="external_collections"
-                rows={4}
-                className="block w-full border border-gray-300 rounded-md px-3 py-2"
-                placeholder={
-                  externalCollections.length > 0
-                    ? "External collections loaded below:"
-                    : "Enter external collections (not matching your domain), one per line:\n\napp.bsky.feed.post\napp.bsky.actor.profile"
-                }
-              >
-                {externalCollections.length > 0
-                  ? externalCollections.join("\n")
-                  : ""}
-              </textarea>
-              <p className="mt-1 text-xs text-gray-500">
-                External collections are those that don't match your slice's
-                domain.
-              </p>
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Specific Repositories (Optional)
-              </label>
-              <textarea
-                id="repos"
-                name="repos"
-                rows={4}
-                className="block w-full border border-gray-300 rounded-md px-3 py-2"
-                placeholder="Leave empty to sync all repositories, or specify DIDs:
-
-did:plc:example1
-did:plc:example2"
-              />
-            </div>
-
-            <div className="flex space-x-4">
-              <button
-                type="submit"
-                className="bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-md flex items-center justify-center"
-              >
-                <i
-                  data-lucide="loader-2"
-                  className="htmx-indicator animate-spin mr-2 h-4 w-4"
-                  _="on load js lucide.createIcons() end"
-                ></i>
-                <span className="htmx-indicator">Syncing...</span>
-                <span className="default-text">Start Sync</span>
-              </button>
-            </div>
-          </form>
-
-          <div id="sync-result" className="mt-4">
-            {/* Results will be loaded here via htmx */}
-          </div>
-        </div>
-
-        {/* Job History */}
-        <div
-          hx-get={`/api/slices/${sliceId}/job-history`}
-          hx-trigger="load, every 10s"
-          hx-swap="innerHTML"
-          className="mb-6"
-        >
-          <JobHistory jobs={[]} sliceId={sliceId} />
-        </div>
-
-        <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
-          <h3 className="text-lg font-semibold text-blue-800 mb-2">
-            💡 Tips for Syncing
-          </h3>
-          <ul className="text-blue-700 space-y-1 text-sm">
-            <li>
-              • Primary collections matching your slice domain are automatically
-              loaded in the first field
-            </li>
-            <li>
-              • External collections from other domains are loaded in the second
-              field
-            </li>
-            <li>
-              • Use External Collections to sync popular collections like{" "}
-              <code>app.bsky.feed.post</code> that aren't in your lexicons
-            </li>
-            <li>• External collections bypass lexicon validation</li>
-            <li>• Large syncs may take several minutes to complete</li>
-            <li>• Leave repositories empty to sync from all available users</li>
-            <li>• Use the Records tab to browse synced data</li>
-          </ul>
-        </div>
-      </div>
-    </Layout>
-  );
-}

frontend/src/pages/SyncJobLogsPage.tsx frontend/src/features/slices/sync-logs/templates/SyncJobLogsPage.tsx

···
-import { Layout } from "../components/Layout.tsx";
+import { Layout } from "../../../../shared/fragments/Layout.tsx";
+import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
 
 interface SyncJobLogsPageProps {
   sliceName?: string;
   sliceId?: string;
   jobId?: string;
-  currentUser?: { handle?: string; isAuthenticated: boolean };
+  currentUser?: AuthenticatedUser;
 }
 
 export function SyncJobLogsPage({

frontend/src/routes/dialogs.tsx

···
-import type { Route } from "@std/http/unstable-route";
-import { render } from "preact-render-to-string";
-import { withAuth, requireAuth } from "./middleware.ts";
-import { CreateSliceDialog } from "../components/CreateSliceDialog.tsx";
-
-async function handleCreateSliceDialog(req: Request): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const dialogHtml = render(<CreateSliceDialog />);
-  return new Response(dialogHtml, {
-    status: 200,
-    headers: { "content-type": "text/html" },
-  });
-}
-
-export const dialogRoutes: Route[] = [
-  {
-    method: "GET",
-    pattern: new URLPattern({ pathname: "/dialogs/create-slice" }),
-    handler: handleCreateSliceDialog,
-  },
-];

frontend/src/routes/index.ts

···
-import type { Route } from "@std/http/unstable-route";
-import { oauthRoutes } from "./oauth.ts";
-import { sliceRoutes } from "./slices.tsx";
-import { dialogRoutes } from "./dialogs.tsx";
-import { pageRoutes } from "./pages.tsx";
-
-export const allRoutes: Route[] = [
-  ...oauthRoutes,
-  ...sliceRoutes,
-  ...dialogRoutes,
-  ...pageRoutes,
-];

frontend/src/routes/mod.ts

···
+import type { Route } from "@std/http/unstable-route";
+import { landingRoutes } from "../features/landing/handlers.tsx";
+import { authRoutes } from "../features/auth/handlers.tsx";
+import { dashboardRoutes } from "../features/dashboard/handlers.tsx";
+import { overviewRoutes, settingsRoutes as sliceSettingsRoutes, lexiconRoutes, recordsRoutes, codegenRoutes, oauthRoutes, apiDocsRoutes, syncRoutes, syncLogsRoutes, jetstreamRoutes } from "../features/slices/mod.ts";
+import { settingsRoutes } from "../features/settings/handlers.tsx";
+
+export const allRoutes: Route[] = [
+  // Landing page (public, no auth required)
+  ...landingRoutes,
+  
+  // Auth routes (login, oauth, logout)
+  ...authRoutes,
+  
+  // Dashboard routes (home page, create slice)
+  ...dashboardRoutes,
+  
+  // User settings routes
+  ...settingsRoutes,
+  
+  // Slice-specific routes
+  ...overviewRoutes,
+  ...sliceSettingsRoutes,
+  ...lexiconRoutes,
+  ...recordsRoutes,
+  ...codegenRoutes,
+  ...oauthRoutes,
+  ...apiDocsRoutes,
+  ...syncRoutes,
+  ...syncLogsRoutes,
+  ...jetstreamRoutes,
+];

frontend/src/routes/oauth.ts frontend/src/features/auth/handlers.tsx

···
 import type { Route } from "@std/http/unstable-route";
-import { atprotoClient, oauthSessions, sessionStore } from "../config.ts";
+import { withAuth } from "../../routes/middleware.ts";
+import { atprotoClient, oauthSessions, sessionStore } from "../../config.ts";
+import { renderHTML } from "../../utils/render.tsx";
+import { LoginPage } from "./templates/LoginPage.tsx";
+
+// ============================================================================
+// LOGIN PAGE HANDLER
+// ============================================================================
+
+async function handleLoginPage(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const url = new URL(req.url);
+
+  const error = url.searchParams.get("error");
+  return renderHTML(
+    <LoginPage error={error || undefined} currentUser={context.currentUser} />
+  );
+}
+
+// ============================================================================
+// OAUTH HANDLERS
+// ============================================================================
 
 async function handleOAuthAuthorize(req: Request): Promise<Response> {
   try {
···
     // Create session cookie
     const sessionCookie = sessionStore.createSessionCookie(sessionId);
 
+    // Get user info from OAuth session
+    let userInfo;
+    try {
+      userInfo = await atprotoClient.oauth?.getUserInfo();
+    } catch (error) {
+      console.log("Failed to get user info:", error);
+    }
+
     // Sync external collections if user doesn't have them yet
     try {
-      // Get user info from OAuth session
-      const userInfo = await atprotoClient.oauth?.getUserInfo();
       if (!userInfo?.sub) {
         console.log(
           "No user DID available, skipping external collections sync"
···
           const profileCheck =
             await atprotoClient.app.bsky.actor.profile.getRecords({
               where: {
-                did: { eq: userInfo.sub }
+                did: { eq: userInfo.sub },
               },
               limit: 1,
             });
···
       );
     }
 
+    // Redirect to user's profile page if handle is available
+    const redirectPath = userInfo?.name ? `/profile/${userInfo.name}` : "/";
+
     return new Response(null, {
       status: 302,
       headers: {
-        Location: new URL("/", req.url).toString(),
+        Location: new URL(redirectPath, req.url).toString(),
         "Set-Cookie": sessionCookie,
       },
     });
···
   });
 }
 
-export const oauthRoutes: Route[] = [
+// ============================================================================
+// ROUTE EXPORTS
+// ============================================================================
+
+export const authRoutes: Route[] = [
+  // Login page
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/login" }),
+    handler: handleLoginPage,
+  },
+  // OAuth flow
   {
     method: "POST",
     pattern: new URLPattern({ pathname: "/oauth/authorize" }),
···
     pattern: new URLPattern({ pathname: "/oauth/callback" }),
     handler: handleOAuthCallback,
   },
+  // Logout
   {
     method: "POST",
     pattern: new URLPattern({ pathname: "/logout" }),

frontend/src/routes/pages.tsx

···
-import type { Route } from "@std/http/unstable-route";
-import { render } from "preact-render-to-string";
-import { withAuth } from "./middleware.ts";
-import { atprotoClient } from "../config.ts";
-import { getSliceClient } from "../utils/client.ts";
-import { buildAtUri } from "../utils/at-uri.ts";
-import { IndexPage } from "../pages/IndexPage.tsx";
-import { LoginPage } from "../pages/LoginPage.tsx";
-import { SlicePage } from "../pages/SlicePage.tsx";
-import { SliceRecordsPage } from "../pages/SliceRecordsPage.tsx";
-import { SliceSyncPage } from "../pages/SliceSyncPage.tsx";
-import { SliceLexiconPage } from "../pages/SliceLexiconPage.tsx";
-import { SliceCodegenPage } from "../pages/SliceCodegenPage.tsx";
-import { SliceApiDocsPage } from "../pages/SliceApiDocsPage.tsx";
-import { SliceSettingsPage } from "../pages/SliceSettingsPage.tsx";
-import { SliceOAuthPage } from "../pages/SliceOAuthPage.tsx";
-import { SyncJobLogsPage } from "../pages/SyncJobLogsPage.tsx";
-import { JetstreamLogsPage } from "../pages/JetstreamLogsPage.tsx";
-import { SettingsPage } from "../pages/SettingsPage.tsx";
-import type { LogEntry } from "../client.ts";
-
-async function handleIndexPage(req: Request): Promise<Response> {
-  const context = await withAuth(req);
-
-  let slices: Array<{ id: string; name: string; createdAt: string }> = [];
-
-  if (context.currentUser.isAuthenticated) {
-    try {
-      const sliceRecords = await atprotoClient.social.slices.slice.getRecords({
-        sortBy: [{ field: "createdAt", direction: "desc" }],
-      });
-
-      slices = sliceRecords.records.map((record) => {
-        // Extract slice ID from URI
-        const uriParts = record.uri.split("/");
-        const id = uriParts[uriParts.length - 1];
-
-        return {
-          id,
-          name: record.value.name,
-          createdAt: record.value.createdAt,
-        };
-      });
-    } catch (error) {
-      console.error("Failed to fetch slices:", error);
-      // Fall back to empty array if fetch fails
-    }
-  }
-
-  const html = render(
-    <IndexPage slices={slices} currentUser={context.currentUser} />
-  );
-
-  const responseHeaders: Record<string, string> = {
-    "content-type": "text/html",
-  };
-
-  return new Response(`<!DOCTYPE html>${html}`, {
-    status: 200,
-    headers: responseHeaders,
-  });
-}
-
-async function handleLoginPage(req: Request): Promise<Response> {
-  const context = await withAuth(req);
-  const url = new URL(req.url);
-
-  // Login page with optional error message
-  const error = url.searchParams.get("error");
-  const html = render(
-    <LoginPage error={error || undefined} currentUser={context.currentUser} />
-  );
-
-  const responseHeaders: Record<string, string> = {
-    "content-type": "text/html",
-  };
-
-  return new Response(`<!DOCTYPE html>${html}`, {
-    status: 200,
-    headers: responseHeaders,
-  });
-}
-
-async function handleSlicePage(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-  const sliceId = params?.pathname.groups.id;
-
-  if (!sliceId) {
-    return Response.redirect(new URL("/", req.url), 302);
-  }
-
-  let sliceData = {
-    sliceId,
-    sliceName: "Unknown Slice",
-    totalRecords: 0,
-    totalActors: 0,
-    totalLexicons: 0,
-    collections: [] as Array<{ name: string; count: number; actors?: number }>,
-  };
-
-  if (context.currentUser.isAuthenticated) {
-    try {
-      const sliceUri = buildAtUri({
-        did: context.currentUser.sub || "unknown",
-        collection: "social.slices.slice",
-        rkey: sliceId,
-      });
-
-      // Fetch slice record and stats in parallel
-      const [sliceRecord, stats] = await Promise.all([
-        atprotoClient.social.slices.slice.getRecord({ uri: sliceUri }),
-        atprotoClient.social.slices.slice.stats({ slice: sliceUri }),
-      ]);
-
-      const collections = stats.success
-        ? stats.collectionStats.map((stat) => ({
-            name: stat.collection,
-            count: stat.recordCount,
-            actors: stat.uniqueActors,
-          }))
-        : [];
-
-      sliceData = {
-        sliceId,
-        sliceName: sliceRecord.value.name,
-        totalRecords: stats.success ? stats.totalRecords : 0,
-        totalActors: stats.success ? stats.totalActors : 0,
-        totalLexicons: stats.success ? stats.totalLexicons : 0,
-        collections,
-      };
-    } catch (error) {
-      console.error("Failed to fetch slice data:", error);
-      // Fall back to default data
-    }
-  }
-
-  const html = render(
-    <SlicePage
-      {...sliceData}
-      currentTab="overview"
-      currentUser={context.currentUser}
-    />
-  );
-
-  const responseHeaders: Record<string, string> = {
-    "content-type": "text/html",
-  };
-
-  return new Response(`<!DOCTYPE html>${html}`, {
-    status: 200,
-    headers: responseHeaders,
-  });
-}
-
-async function handleSliceTabPage(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-  const sliceId = params?.pathname.groups.id;
-  const tab = params?.pathname.groups.tab;
-
-  if (!sliceId || !tab) {
-    return Response.redirect(new URL("/", req.url), 302);
-  }
-
-  // Get real slice data from AT Protocol
-  let sliceData = {
-    sliceId,
-    sliceName: "Unknown Slice",
-    sliceDomain: "",
-    totalRecords: 0,
-    collections: [] as Array<{ name: string; count: number }>,
-  };
-
-  if (context.currentUser.isAuthenticated) {
-    try {
-      // Construct the full URI for this slice
-      const sliceUri = buildAtUri({
-        did: context.currentUser.sub ?? "unknown",
-        collection: "social.slices.slice",
-        rkey: sliceId,
-      });
-
-      // Fetch slice record and stats in parallel
-      const [sliceRecord, stats] = await Promise.all([
-        atprotoClient.social.slices.slice.getRecord({ uri: sliceUri }),
-        atprotoClient.social.slices.slice.stats({ slice: sliceUri }),
-      ]);
-
-      // Transform collection stats to match the interface
-      const collections = stats.success
-        ? stats.collectionStats.map((stat) => ({
-            name: stat.collection,
-            count: stat.recordCount,
-          }))
-        : [];
-
-      sliceData = {
-        sliceId,
-        sliceName: sliceRecord.value.name,
-        sliceDomain: sliceRecord.value.domain || "",
-        totalRecords: stats.success ? stats.totalRecords : 0,
-        collections,
-      };
-    } catch (error) {
-      console.error("Failed to fetch slice:", error);
-      // Fall back to default data
-    }
-  }
-
-  let html: string;
-
-  switch (tab) {
-    case "records": {
-      // Get URL parameters for collection, author, and search filtering
-      const url = new URL(req.url);
-      const selectedCollection = url.searchParams.get("collection") || "";
-      const selectedAuthor = url.searchParams.get("author") || "";
-      const searchQuery = url.searchParams.get("search") || "";
-
-      // Fetch real records if a collection is selected
-      let records: Array<{
-        uri: string;
-        indexedAt: string;
-        collection: string;
-        did: string;
-        cid: string;
-        value: unknown;
-        pretty_value: string;
-      }> = [];
-      if (
-        (selectedCollection || searchQuery) &&
-        sliceData.collections.length > 0
-      ) {
-        try {
-          // Use slice-specific client to ensure correct slice URI
-          const sliceClient = getSliceClient(context, sliceId);
-          const recordsResult =
-            await sliceClient.social.slices.slice.getSliceRecords({
-              where: {
-                ...(selectedCollection && {
-                  collection: { eq: selectedCollection },
-                }),
-                ...(searchQuery && { json: { contains: searchQuery } }),
-                ...(selectedAuthor && { did: { eq: selectedAuthor } }),
-              },
-              limit: 20,
-            });
-
-          if (recordsResult.success) {
-            records = recordsResult.records.map((record) => ({
-              uri: record.uri,
-              indexedAt: record.indexedAt,
-              collection: record.collection,
-              did: record.did,
-              cid: record.cid,
-              value: record.value,
-              pretty_value: JSON.stringify(record.value, null, 2),
-            }));
-          }
-        } catch (error) {
-          console.error("Failed to fetch records:", error);
-        }
-      }
-
-      const recordsData = {
-        ...sliceData,
-        records,
-        collection: selectedCollection,
-        author: selectedAuthor,
-        search: searchQuery,
-        availableCollections: sliceData.collections,
-      };
-      html = render(
-        <SliceRecordsPage {...recordsData} currentUser={context.currentUser} />
-      );
-      break;
-    }
-
-    case "sync": {
-      // Fetch slice stats to get available collections for prefilling
-      const primaryCollections: string[] = [];
-      const externalCollections: string[] = [];
-
-      try {
-        const sliceUri = buildAtUri({
-          did: context.currentUser.sub ?? "unknown",
-          collection: "social.slices.slice",
-          rkey: sliceId,
-        });
-
-        const stats = await atprotoClient.social.slices.slice.stats({
-          slice: sliceUri,
-        });
-
-        if (stats.success) {
-          const sliceDomain = sliceData.sliceDomain || "";
-
-          // Categorize collections by domain
-          stats.collections.forEach((collection) => {
-            if (sliceDomain && collection.startsWith(sliceDomain)) {
-              primaryCollections.push(collection);
-            } else {
-              externalCollections.push(collection);
-            }
-          });
-        }
-      } catch (error) {
-        console.error("Failed to fetch slice stats:", error);
-        // Will use empty collections arrays as fallback
-      }
-
-      html = render(
-        <SliceSyncPage
-          {...sliceData}
-          collections={primaryCollections}
-          externalCollections={externalCollections}
-          currentUser={context.currentUser}
-        />
-      );
-      break;
-    }
-
-    case "lexicon": {
-      const lexiconData = {
-        ...sliceData,
-        lexicons: [
-          {
-            nsid: "com.chadtmiller.slice",
-            updated_at: "2024-01-15 10:30:00",
-            pretty_definitions: `{\n  "lexicon": 1,\n  "id": "com.chadtmiller.slice",\n  "defs": {\n    "main": {\n      "type": "record",\n      "description": "Slice application record type"\n    }\n  }\n}`,
-          },
-        ],
-      };
-      html = render(
-        <SliceLexiconPage {...lexiconData} currentUser={context.currentUser} />
-      );
-      break;
-    }
-
-    case "codegen": {
-      const codegenData = {
-        ...sliceData,
-        lexicons: [
-          { nsid: "com.chadtmiller.slice" },
-          { nsid: "social.grain.gallery" },
-        ],
-      };
-      html = render(
-        <SliceCodegenPage {...codegenData} currentUser={context.currentUser} />
-      );
-      break;
-    }
-
-    case "settings": {
-      const url = new URL(req.url);
-      const updated = url.searchParams.get("updated");
-      const error = url.searchParams.get("error");
-
-      html = render(
-        <SliceSettingsPage
-          {...sliceData}
-          updated={updated === "true"}
-          error={error}
-          currentUser={context.currentUser}
-        />
-      );
-      break;
-    }
-
-    default:
-      // 404 for unknown slice subpaths
-      return Response.redirect(new URL("/", req.url), 302);
-  }
-
-  const responseHeaders: Record<string, string> = {
-    "content-type": "text/html",
-  };
-
-  return new Response(`<!DOCTYPE html>${html}`, {
-    status: 200,
-    headers: responseHeaders,
-  });
-}
-
-async function handleSliceApiDocsPage(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-  const sliceId = params?.pathname.groups.id;
-
-  if (!sliceId) {
-    return Response.redirect(new URL("/", req.url), 302);
-  }
-
-  // Get OAuth access token directly from OAuth client (clean separation)
-  let accessToken: string | undefined;
-  try {
-    // Tokens are managed by @slices/oauth, not stored in sessions
-    const tokens = await atprotoClient.oauth?.ensureValidToken();
-    accessToken = tokens?.accessToken;
-  } catch (error) {
-    console.log("Could not get OAuth token:", error);
-  }
-
-  // Get real slice data from AT Protocol
-  let sliceData = {
-    sliceId,
-    sliceName: "Unknown Slice",
-    accessToken,
-  };
-
-  if (context.currentUser.isAuthenticated) {
-    try {
-      const sliceUri = buildAtUri({
-        did: context.currentUser.sub!,
-        collection: "social.slices.slice",
-        rkey: sliceId,
-      });
-
-      const sliceRecord = await atprotoClient.social.slices.slice.getRecord({
-        uri: sliceUri,
-      });
-
-      sliceData = {
-        sliceId,
-        sliceName: sliceRecord.value.name,
-        accessToken,
-      };
-    } catch (error) {
-      console.error("Failed to fetch slice data:", error);
-      // Fall back to default data
-    }
-  }
-
-  const html = render(
-    <SliceApiDocsPage {...sliceData} currentUser={context.currentUser} />
-  );
-
-  const responseHeaders: Record<string, string> = {
-    "content-type": "text/html",
-  };
-
-  return new Response(`<!DOCTYPE html>${html}`, {
-    status: 200,
-    headers: responseHeaders,
-  });
-}
-
-async function handleSettingsPage(req: Request): Promise<Response> {
-  const context = await withAuth(req);
-
-  if (!context.currentUser.isAuthenticated) {
-    return Response.redirect(new URL("/login", req.url), 302);
-  }
-
-  // Try to fetch existing profile
-  let profile:
-    | {
-        displayName?: string;
-        description?: string;
-        avatar?: string;
-      }
-    | undefined;
-
-  try {
-    const profileRecord =
-      await atprotoClient.social.slices.actor.profile.getRecord({
-        uri: buildAtUri({
-          did: context.currentUser.sub!,
-          collection: "social.slices.actor.profile",
-          rkey: "self",
-        }),
-      });
-    if (profileRecord) {
-      profile = {
-        displayName: profileRecord.value.displayName,
-        description: profileRecord.value.description,
-        avatar: profileRecord.value.avatar?.toString(), // Convert Blob to string representation
-      };
-    }
-  } catch (error) {
-    console.error("Failed to fetch profile:", error);
-    // Continue without profile data
-  }
-
-  const html = render(
-    <SettingsPage profile={profile} currentUser={context.currentUser} />
-  );
-
-  const responseHeaders: Record<string, string> = {
-    "content-type": "text/html",
-  };
-
-  return new Response(`<!DOCTYPE html>${html}`, {
-    status: 200,
-    headers: responseHeaders,
-  });
-}
-
-async function handleSyncJobLogsPage(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-
-  if (!context.currentUser.isAuthenticated) {
-    return Response.redirect(new URL("/login", req.url), 302);
-  }
-
-  const sliceId = params?.pathname.groups.id;
-  const jobId = params?.pathname.groups.jobId;
-
-  if (!sliceId || !jobId) {
-    return new Response("Invalid slice ID or job ID", { status: 400 });
-  }
-
-  // Get slice details to pass slice name
-  let slice: { name: string } = { name: "Unknown Slice" };
-  try {
-    const sliceClient = getSliceClient(context, sliceId);
-    const sliceRecord = await sliceClient.social.slices.slice.getRecord({
-      uri: buildAtUri({
-        did: context.currentUser.sub!,
-        collection: "social.slices.slice",
-        rkey: sliceId,
-      }),
-    });
-    if (sliceRecord) {
-      slice = { name: sliceRecord.value.name };
-    }
-  } catch (error) {
-    console.error("Failed to fetch slice:", error);
-  }
-
-  const html = render(
-    <SyncJobLogsPage
-      sliceName={slice.name}
-      sliceId={sliceId}
-      jobId={jobId}
-      currentUser={context.currentUser}
-    />
-  );
-
-  const responseHeaders: Record<string, string> = {
-    "content-type": "text/html",
-  };
-
-  return new Response(`<!DOCTYPE html>${html}`, {
-    status: 200,
-    headers: responseHeaders,
-  });
-}
-
-async function handleJetstreamLogsPage(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-
-  if (!context.currentUser.isAuthenticated) {
-    return Response.redirect(new URL("/login", req.url), 302);
-  }
-
-  const sliceId = params?.pathname.groups.id;
-
-  if (!sliceId) {
-    return new Response("Invalid slice ID", { status: 400 });
-  }
-
-  // Fetch Jetstream logs
-  let logs: LogEntry[] = [];
-
-  try {
-    const sliceClient = getSliceClient(context, sliceId);
-
-    const logsResult = await sliceClient.social.slices.slice.getJetstreamLogs({
-      limit: 100,
-    });
-    logs = logsResult.logs.sort(
-      (a, b) =>
-        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-    );
-  } catch (error) {
-    console.error("Failed to fetch Jetstream logs:", error);
-  }
-
-  const html = render(
-    <JetstreamLogsPage
-      logs={logs}
-      sliceId={sliceId}
-      currentUser={context.currentUser}
-    />
-  );
-
-  const responseHeaders: Record<string, string> = {
-    "content-type": "text/html",
-  };
-
-  return new Response(`<!DOCTYPE html>${html}`, {
-    status: 200,
-    headers: responseHeaders,
-  });
-}
-
-async function handleSliceOAuthPage(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-  if (!context.currentUser.isAuthenticated) {
-    return new Response("", {
-      status: 302,
-      headers: { location: "/login" },
-    });
-  }
-
-  const sliceId = params?.pathname.groups.id;
-  if (!sliceId) {
-    return new Response("Invalid slice ID", { status: 400 });
-  }
-
-  // Get the slice record first (separate from OAuth clients)
-  const sliceUri = buildAtUri({
-    did: context.currentUser.sub!,
-    collection: "social.slices.slice",
-    rkey: sliceId,
-  });
-
-  const sliceClient = getSliceClient(context, sliceId);
-
-  let slice;
-  try {
-    slice = await atprotoClient.social.slices.slice.getRecord({
-      uri: sliceUri,
-    });
-  } catch (error) {
-    console.error("Error fetching slice:", error);
-    return new Response("Slice not found", { status: 404 });
-  }
-
-  // Try to fetch OAuth clients
-  let clientsWithDetails: {
-    clientId: string;
-    createdAt: string;
-    clientName?: string;
-    redirectUris?: string[];
-  }[] = [];
-  let errorMessage = null;
-
-  try {
-    const oauthClientsResponse =
-      await sliceClient.social.slices.slice.getOAuthClients();
-    console.log("Fetched OAuth clients:", oauthClientsResponse.clients);
-    clientsWithDetails = oauthClientsResponse.clients.map((client) => ({
-      clientId: client.clientId,
-      createdAt: new Date().toISOString(), // Backend should provide this
-      clientName: client.clientName,
-      redirectUris: client.redirectUris,
-    }));
-  } catch (oauthError) {
-    console.error("Error fetching OAuth clients:", oauthError);
-    errorMessage = "Failed to fetch OAuth clients";
-  }
-
-  const html = render(
-    <SliceOAuthPage
-      sliceName={slice.value.name}
-      sliceId={sliceId}
-      clients={clientsWithDetails}
-      currentUser={context.currentUser}
-      error={errorMessage}
-    />
-  );
-
-  const responseHeaders: Record<string, string> = {
-    "content-type": "text/html",
-  };
-
-  return new Response(`<!DOCTYPE html>${html}`, {
-    status: 200,
-    headers: responseHeaders,
-  });
-}
-
-export const pageRoutes: Route[] = [
-  {
-    pattern: new URLPattern({ pathname: "/" }),
-    handler: handleIndexPage,
-  },
-  {
-    pattern: new URLPattern({ pathname: "/login" }),
-    handler: handleLoginPage,
-  },
-  {
-    pattern: new URLPattern({ pathname: "/settings" }),
-    handler: handleSettingsPage,
-  },
-  {
-    pattern: new URLPattern({ pathname: "/slices/:id" }),
-    handler: handleSlicePage,
-  },
-  {
-    pattern: new URLPattern({ pathname: "/slices/:id/api-docs" }),
-    handler: handleSliceApiDocsPage,
-  },
-  {
-    pattern: new URLPattern({ pathname: "/slices/:id/sync/logs/:jobId" }),
-    handler: handleSyncJobLogsPage,
-  },
-  {
-    pattern: new URLPattern({ pathname: "/slices/:id/jetstream/logs" }),
-    handler: handleJetstreamLogsPage,
-  },
-  {
-    pattern: new URLPattern({ pathname: "/slices/:id/oauth" }),
-    handler: handleSliceOAuthPage,
-  },
-  {
-    pattern: new URLPattern({ pathname: "/slices/:id/:tab" }),
-    handler: handleSliceTabPage,
-  },
-];

frontend/src/routes/slices.tsx

···
-import type { Route } from "@std/http/unstable-route";
-import { render } from "preact-render-to-string";
-import { withAuth, requireAuth } from "./middleware.ts";
-import { atprotoClient } from "../config.ts";
-import { getSliceClient } from "../utils/client.ts";
-import { buildSliceUri } from "../utils/at-uri.ts";
-import type { SocialSlicesActorProfile } from "../client.ts";
-import { CreateSliceDialog } from "../components/CreateSliceDialog.tsx";
-import { UpdateResult } from "../components/UpdateResult.tsx";
-import { EmptyLexiconState } from "../components/EmptyLexiconState.tsx";
-import { LexiconSuccessMessage } from "../components/LexiconSuccessMessage.tsx";
-import { LexiconErrorMessage } from "../components/LexiconErrorMessage.tsx";
-import { LexiconViewModal } from "../components/LexiconViewModal.tsx";
-import { LexiconListItem } from "../components/LexiconListItem.tsx";
-import { CodegenResult } from "../components/CodegenResult.tsx";
-import { SettingsResult } from "../components/SettingsResult.tsx";
-import { SyncResult } from "../components/SyncResult.tsx";
-import { JobHistory } from "../components/JobHistory.tsx";
-import { JetstreamStatus } from "../components/JetstreamStatus.tsx";
-import { SyncJobLogs } from "../components/SyncJobLogs.tsx";
-import { JetstreamLogs } from "../components/JetstreamLogs.tsx";
-import { buildAtUri } from "../utils/at-uri.ts";
-import { Layout } from "../components/Layout.tsx";
-import { OAuthClientModal } from "../components/OAuthClientModal.tsx";
-import { OAuthRegistrationResult } from "../components/OAuthRegistrationResult.tsx";
-import { OAuthDeleteResult } from "../components/OAuthDeleteResult.tsx";
-
-async function handleCreateSlice(req: Request): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  // Ensure client has tokens before attempting API calls
-  const authInfo = await atprotoClient.oauth?.getAuthenticationInfo();
-  if (!authInfo?.isAuthenticated) {
-    const dialogHtml = render(
-      <CreateSliceDialog error="Session expired. Please log in again." />
-    );
-    return new Response(dialogHtml, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  }
-
-  try {
-    const formData = await req.formData();
-    const name = formData.get("name") as string;
-    const domain = formData.get("domain") as string;
-
-    if (!name || name.trim().length === 0) {
-      const dialogHtml = render(
-        <CreateSliceDialog
-          error="Slice name is required"
-          name={name}
-          domain={domain}
-        />
-      );
-      return new Response(dialogHtml, {
-        status: 200,
-        headers: { "content-type": "text/html" },
-      });
-    }
-
-    if (!domain || domain.trim().length === 0) {
-      const dialogHtml = render(
-        <CreateSliceDialog
-          error="Primary domain is required"
-          name={name}
-          domain={domain}
-        />
-      );
-      return new Response(dialogHtml, {
-        status: 200,
-        headers: { "content-type": "text/html" },
-      });
-    }
-
-    // Create actual slice using AT Protocol
-    try {
-      const recordData = {
-        name: name.trim(),
-        domain: domain.trim(),
-        createdAt: new Date().toISOString(),
-      };
-
-      const result = await atprotoClient.social.slices.slice.createRecord(
-        recordData
-      );
-
-      // Extract record key from URI (format: at://did:plc:example/social.slices.slice/rkey)
-      const uriParts = result.uri.split("/");
-      const sliceId = uriParts[uriParts.length - 1];
-
-      return new Response("", {
-        status: 200,
-        headers: {
-          "HX-Redirect": `/slices/${sliceId}`,
-        },
-      });
-    } catch (_createError) {
-      const dialogHtml = render(
-        <CreateSliceDialog
-          error="Failed to create slice record. Please try again."
-          name={name}
-          domain={domain}
-        />
-      );
-      return new Response(dialogHtml, {
-        status: 200,
-        headers: { "content-type": "text/html" },
-      });
-    }
-  } catch (_error) {
-    const dialogHtml = render(
-      <CreateSliceDialog error="Failed to create slice" />
-    );
-    return new Response(dialogHtml, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  }
-}
-
-async function handleUpdateSliceSettings(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const sliceId = params?.pathname.groups.id;
-  if (!sliceId) {
-    return new Response("Invalid slice ID", { status: 400 });
-  }
-
-  try {
-    const formData = await req.formData();
-    const name = formData.get("name") as string;
-    const domain = formData.get("domain") as string;
-
-    if (!name || name.trim().length === 0) {
-      const resultHtml = render(
-        <UpdateResult type="error" message="Slice name is required" />
-      );
-      return new Response(resultHtml, {
-        status: 200,
-        headers: { "content-type": "text/html" },
-      });
-    }
-
-    if (!domain || domain.trim().length === 0) {
-      const resultHtml = render(
-        <UpdateResult type="error" message="Primary domain is required" />
-      );
-      return new Response(resultHtml, {
-        status: 200,
-        headers: { "content-type": "text/html" },
-      });
-    }
-
-    // Construct the URI for this slice
-    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
-
-    // Get the current record first
-    const currentRecord = await atprotoClient.social.slices.slice.getRecord({
-      uri: sliceUri,
-    });
-
-    // Update the record with new name and domain
-    const updatedRecord = {
-      ...currentRecord.value,
-      name: name.trim(),
-      domain: domain.trim(),
-    };
-
-    await atprotoClient.social.slices.slice.updateRecord(
-      sliceId,
-      updatedRecord
-    );
-
-    return new Response("", {
-      status: 200,
-      headers: {
-        "HX-Redirect": `/slices/${sliceId}/settings?updated=true`,
-      },
-    });
-  } catch (_error) {
-    return new Response("", {
-      status: 200,
-      headers: {
-        "HX-Redirect": `/slices/${sliceId}/settings?error=update_failed`,
-      },
-    });
-  }
-}
-
-async function handleDeleteSlice(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const sliceId = params?.pathname.groups.id;
-  if (!sliceId) {
-    return new Response("Invalid slice ID", { status: 400 });
-  }
-
-  try {
-    // Delete the slice record from AT Protocol
-    await atprotoClient.social.slices.slice.deleteRecord(sliceId);
-
-    // Redirect to home page
-    return new Response("", {
-      status: 200,
-      headers: {
-        "HX-Redirect": "/",
-      },
-    });
-  } catch (_error) {
-    return new Response("Failed to delete slice", { status: 500 });
-  }
-}
-
-async function handleListLexicons(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const sliceId = params?.pathname.groups.id;
-  if (!sliceId) {
-    return new Response("Invalid slice ID", { status: 400 });
-  }
-
-  try {
-    // Get slice-specific client and fetch lexicons
-    const sliceClient = getSliceClient(context, sliceId);
-    const lexiconRecords = await sliceClient.social.slices.lexicon.getRecords();
-
-    if (lexiconRecords.records.length === 0) {
-      const html = render(<EmptyLexiconState />);
-      return new Response(html, {
-        status: 200,
-        headers: { "content-type": "text/html" },
-      });
-    }
-
-    const html = render(
-      <div className="space-y-0">
-        {lexiconRecords.records.map((record) => (
-          <LexiconListItem
-            key={record.uri}
-            nsid={record.value.nsid}
-            uri={record.uri}
-            createdAt={record.value.createdAt}
-            sliceId={sliceId}
-          />
-        ))}
-      </div>
-    );
-
-    return new Response(html, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  } catch (error) {
-    console.error("Failed to fetch lexicons:", error);
-    const html = render(
-      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-        <p>Failed to load lexicons: {error}</p>
-      </div>
-    );
-    return new Response(html, {
-      status: 500,
-      headers: { "content-type": "text/html" },
-    });
-  }
-}
-
-async function handleCreateLexicon(req: Request): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  try {
-    const formData = await req.formData();
-    const lexiconJson = formData.get("lexicon_json") as string;
-
-    if (!lexiconJson || lexiconJson.trim().length === 0) {
-      const html = render(
-        <LexiconErrorMessage error="Lexicon JSON is required" />
-      );
-      return new Response(html, {
-        status: 400,
-        headers: { "content-type": "text/html" },
-      });
-    }
-
-    // Parse the lexicon JSON
-    let lexiconData;
-    try {
-      lexiconData = JSON.parse(lexiconJson);
-    } catch (parseError) {
-      const html = render(
-        <LexiconErrorMessage
-          error={`Failed to parse lexicon JSON: ${parseError}`}
-        />
-      );
-      return new Response(html, {
-        status: 200,
-        headers: { "content-type": "text/html" },
-      });
-    }
-
-    // Basic validation of required fields
-    if (!lexiconData.id && !lexiconData.nsid) {
-      const html = render(
-        <LexiconErrorMessage error="Lexicon must have an 'id' field (e.g., 'com.example.myLexicon')" />
-      );
-      return new Response(html, {
-        status: 200, // Return 200 so HTMX displays the error
-        headers: { "content-type": "text/html" },
-      });
-    }
-
-    if (!lexiconData.defs && !lexiconData.definitions) {
-      const html = render(
-        <LexiconErrorMessage error="Lexicon must have a 'defs' field containing the schema definitions" />
-      );
-      return new Response(html, {
-        status: 200, // Return 200 so HTMX displays the error
-        headers: { "content-type": "text/html" },
-      });
-    }
-
-    // Create the lexicon record
-    try {
-      // Extract slice ID from URL if this is a slice-specific request
-      const url = new URL(req.url);
-      const pathParts = url.pathname.split("/");
-      let sliceId = "example"; // fallback
-
-      // Check if this is a slice-specific request (/api/slices/:id/lexicons)
-      if (
-        pathParts.length >= 4 &&
-        pathParts[1] === "api" &&
-        pathParts[2] === "slices"
-      ) {
-        sliceId = pathParts[3];
-      }
-
-      const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
-
-      const lexiconRecord = {
-        nsid: lexiconData.id,
-        definitions: JSON.stringify(lexiconData.defs || lexiconData),
-        createdAt: new Date().toISOString(),
-        slice: sliceUri,
-      };
-
-      // Use slice-specific client for creating lexicon
-      const sliceClient = getSliceClient(context, sliceId);
-      const result = await sliceClient.social.slices.lexicon.createRecord(
-        lexiconRecord
-      );
-
-      const html = render(
-        <LexiconSuccessMessage
-          nsid={lexiconRecord.nsid}
-          uri={result.uri}
-          sliceId={sliceId}
-        />
-      );
-      return new Response(html, {
-        status: 200,
-        headers: { "content-type": "text/html" },
-      });
-    } catch (createError) {
-      let errorMessage = `Failed to create lexicon: ${createError}`;
-
-      // Check if this is a structured error response from the API
-      if (createError instanceof Error) {
-        try {
-          // Try to parse the error message as JSON (from API response)
-          const errorResponse = JSON.parse(createError.message);
-          if (
-            errorResponse.error === "ValidationError" &&
-            errorResponse.message
-          ) {
-            errorMessage = errorResponse.message;
-          }
-        } catch {
-          // If not JSON, check for common validation error patterns in the string
-          const errorStr = createError.message;
-          if (errorStr.includes("Invalid JSON in definitions field")) {
-            errorMessage =
-              "The lexicon definitions contain invalid JSON. Please check your JSON syntax.";
-          } else if (errorStr.includes("must be camelCase")) {
-            errorMessage =
-              'Definition names must be camelCase (letters and numbers only). Examples: "main", "listView", "aspectRatio"';
-          } else if (errorStr.includes("missing required 'type' field")) {
-            errorMessage =
-              'Each lexicon definition must have a "type" field. Valid types include: "record", "object", "string", "integer", "boolean", "array", "union", "ref", "blob", "bytes", "cid-link", "unknown"';
-          } else if (errorStr.includes("Lexicon validation failed")) {
-            errorMessage = errorStr; // Use the full validation error message
-          }
-        }
-      }
-
-      const html = render(<LexiconErrorMessage error={errorMessage} />);
-      return new Response(html, {
-        status: 200, // Return 200 so HTMX displays the error
-        headers: { "content-type": "text/html" },
-      });
-    }
-  } catch (error) {
-    const html = render(
-      <LexiconErrorMessage error={`Server error: ${error}`} />
-    );
-    return new Response(html, {
-      status: 500,
-      headers: { "content-type": "text/html" },
-    });
-  }
-}
-
-async function handleViewLexicon(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const sliceId = params?.pathname.groups.id;
-  const rkey = params?.pathname.groups.rkey;
-  if (!sliceId || !rkey) {
-    return new Response("Invalid slice ID or lexicon key", { status: 400 });
-  }
-
-  try {
-    // Get slice-specific client and fetch the specific lexicon
-    const sliceClient = getSliceClient(context, sliceId);
-    const lexiconRecords = await sliceClient.social.slices.lexicon.getRecords();
-
-    // Find the lexicon with matching rkey
-    const lexicon = lexiconRecords.records.find((record) =>
-      record.uri.endsWith(`/${rkey}`)
-    );
-
-    if (!lexicon) {
-      return new Response("Lexicon not found", { status: 404 });
-    }
-
-    const component = await LexiconViewModal({
-      nsid: lexicon.value.nsid,
-      definitions: lexicon.value.definitions,
-      uri: lexicon.uri,
-      createdAt: lexicon.indexedAt,
-    });
-    const html = render(component);
-
-    return new Response(html, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  } catch (error) {
-    console.error("Error viewing lexicon:", error);
-    return new Response("Failed to load lexicon", { status: 500 });
-  }
-}
-
-async function handleDeleteLexicon(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const sliceId = params?.pathname.groups.id;
-  const rkey = params?.pathname.groups.rkey;
-  if (!sliceId || !rkey) {
-    return new Response("Invalid slice ID or lexicon ID", { status: 400 });
-  }
-
-  try {
-    // Use slice-specific client for deleting lexicon
-    const sliceClient = getSliceClient(context, sliceId);
-    await sliceClient.social.slices.lexicon.deleteRecord(rkey);
-
-    // Check if there are any remaining lexicons
-    const remainingLexicons =
-      await sliceClient.social.slices.lexicon.getRecords();
-
-    if (remainingLexicons.records.length === 0) {
-      // If no lexicons remain, return the empty state and target the parent list
-      const html = render(<EmptyLexiconState withPadding />);
-
-      return new Response(html, {
-        status: 200,
-        headers: {
-          "content-type": "text/html",
-          "HX-Retarget": "#lexicon-list",
-        },
-      });
-    } else {
-      // Just remove this specific item
-      return new Response("", {
-        status: 200,
-        headers: { "content-type": "text/html" },
-      });
-    }
-  } catch (error) {
-    console.error("Failed to delete lexicon:", error);
-    const html = render(
-      <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-        <p>Failed to delete lexicon: {error}</p>
-      </div>
-    );
-    return new Response(html, {
-      status: 500,
-      headers: { "content-type": "text/html" },
-    });
-  }
-}
-
-async function handleSliceCodegen(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const sliceId = params?.pathname.groups.id;
-  if (!sliceId) {
-    const component = await CodegenResult({
-      success: false,
-      error: "Invalid slice ID",
-    });
-    const html = render(component);
-    return new Response(html, {
-      status: 400,
-      headers: { "content-type": "text/html" },
-    });
-  }
-
-  try {
-    // Parse form data
-    const formData = await req.formData();
-    const target = formData.get("format") || "typescript";
-
-    // Construct the slice URI
-    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
-
-    // Use the slice-specific client
-    const sliceClient = getSliceClient(context, sliceId);
-
-    // Call the codegen XRPC endpoint
-    const result = await sliceClient.social.slices.slice.codegen({
-      target: target as string,
-      slice: sliceUri,
-    });
-
-    const component = await CodegenResult({
-      success: result.success,
-      generatedCode: result.generatedCode,
-      error: result.error,
-    });
-    const html = render(component);
-
-    return new Response(html, {
-      headers: { "content-type": "text/html; charset=utf-8" },
-    });
-  } catch (error) {
-    console.error("Codegen error:", error);
-    const component = await CodegenResult({
-      success: false,
-      error: `Error: ${error instanceof Error ? error.message : String(error)}`,
-    });
-    const html = render(component);
-
-    return new Response(html, {
-      headers: { "content-type": "text/html; charset=utf-8" },
-    });
-  }
-}
-
-async function handleUpdateProfile(req: Request): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  try {
-    const formData = await req.formData();
-    const displayName = formData.get("displayName") as string;
-    const description = formData.get("description") as string;
-    const avatarFile = formData.get("avatar") as File;
-
-    // Build profile record
-    const profileData: Partial<SocialSlicesActorProfile> = {
-      displayName: displayName?.trim() || undefined,
-      description: description?.trim() || undefined,
-      createdAt: new Date().toISOString(),
-    };
-
-    // Handle avatar if provided
-    if (avatarFile && avatarFile.size > 0) {
-      try {
-        // Upload blob with binary data directly
-        const arrayBuffer = await avatarFile.arrayBuffer();
-
-        // Upload blob via the generated client
-        const blobResult = await atprotoClient.uploadBlob({
-          data: arrayBuffer,
-          mimeType: avatarFile.type,
-        });
-
-        // Add blob reference to profile data
-        profileData.avatar = blobResult.blob;
-      } catch (avatarError) {
-        console.error("Failed to upload avatar:", avatarError);
-        // Continue without avatar - don't fail the entire profile update
-      }
-    }
-
-    // Check if profile already exists
-    try {
-      if (!context.currentUser.sub) {
-        throw new Error("User DID (sub) is required for profile operations");
-      }
-
-      const existingProfile =
-        await atprotoClient.social.slices.actor.profile.getRecord({
-          uri: buildAtUri({
-            did: context.currentUser.sub,
-            collection: "social.slices.actor.profile",
-            rkey: "self",
-          }),
-        });
-
-      if (existingProfile) {
-        // Update existing profile
-        await atprotoClient.social.slices.actor.profile.updateRecord("self", {
-          ...profileData,
-          createdAt: existingProfile.value.createdAt, // Keep original creation time
-        });
-      } else {
-        // Create new profile
-        await atprotoClient.social.slices.actor.profile.createRecord(
-          profileData,
-          true
-        );
-      }
-
-      const html = render(
-        <SettingsResult
-          type="success"
-          message="Profile updated successfully!"
-          showRefresh
-        />
-      );
-      return new Response(html, {
-        status: 200,
-        headers: { "content-type": "text/html" },
-      });
-    } catch (profileError) {
-      console.error("Profile update error:", profileError);
-      const errorMessage =
-        profileError instanceof Error
-          ? profileError.message
-          : String(profileError);
-
-      const html = render(
-        <SettingsResult
-          type="error"
-          message={`Failed to update profile: ${errorMessage}`}
-        />
-      );
-      return new Response(html, {
-        status: 500,
-        headers: { "content-type": "text/html" },
-      });
-    }
-  } catch (error) {
-    console.error("Form processing error:", error);
-    const html = render(
-      <SettingsResult type="error" message="Failed to process form data" />
-    );
-    return new Response(html, {
-      status: 400,
-      headers: { "content-type": "text/html" },
-    });
-  }
-}
-
-async function handleJobHistory(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const sliceId = params?.pathname.groups.id;
-  if (!sliceId) {
-    const html = render(
-      <div className="text-red-700 text-sm">❌ Invalid slice ID</div>
-    );
-    return new Response(html, {
-      status: 400,
-      headers: { "content-type": "text/html" },
-    });
-  }
-
-  try {
-    // Construct the slice URI
-    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
-
-    // Use the slice-specific client
-    const sliceClient = getSliceClient(context, sliceId);
-
-    // Get job history
-    const result = await sliceClient.social.slices.slice.getJobHistory({
-      userDid: context.currentUser.sub!,
-      sliceUri: sliceUri,
-      limit: 10,
-    });
-
-    const jobs = result || [];
-    const html = render(<JobHistory jobs={jobs} sliceId={sliceId} />);
-
-    return new Response(html, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  } catch (error) {
-    console.error("Failed to get job history:", error);
-    const html = render(<JobHistory jobs={[]} sliceId={sliceId} />);
-    return new Response(html, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  }
-}
-
-async function handleSyncJobLogs(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const sliceId = params?.pathname.groups.id;
-  const jobId = params?.pathname.groups.jobId;
-
-  if (!sliceId || !jobId) {
-    const html = render(
-      <div className="p-8 text-center text-red-600">
-        ❌ Invalid slice ID or job ID
-      </div>
-    );
-    return new Response(html, {
-      status: 400,
-      headers: { "content-type": "text/html" },
-    });
-  }
-
-  try {
-    // Use the slice-specific client
-    const sliceClient = getSliceClient(context, sliceId);
-
-    // Get job logs
-    const result = await sliceClient.social.slices.slice.getJobLogs({
-      jobId: jobId,
-      limit: 1000,
-    });
-
-    const logs = result?.logs || [];
-    const html = render(<SyncJobLogs logs={logs} jobId={jobId} />);
-
-    return new Response(html, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  } catch (error) {
-    console.error("Failed to get sync job logs:", error);
-    const errorMessage = error instanceof Error ? error.message : String(error);
-    const html = render(
-      <div className="p-8 text-center text-red-600">
-        ❌ Error loading logs: {errorMessage}
-      </div>
-    );
-    return new Response(html, {
-      status: 500,
-      headers: { "content-type": "text/html" },
-    });
-  }
-}
-
-async function handleSliceSync(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const sliceId = params?.pathname.groups.id;
-  if (!sliceId) {
-    const html = render(
-      <SyncResult success={false} error="Invalid slice ID" />
-    );
-    return new Response(html, {
-      status: 400,
-      headers: { "content-type": "text/html" },
-    });
-  }
-
-  try {
-    const formData = await req.formData();
-    const collectionsText = formData.get("collections") as string;
-    const externalCollectionsText = formData.get(
-      "external_collections"
-    ) as string;
-    const reposText = formData.get("repos") as string;
-
-    // Parse primary collections from textarea (newline or comma separated)
-    const collections: string[] = [];
-    if (collectionsText) {
-      collectionsText.split(/[\n,]/).forEach((item) => {
-        const trimmed = item.trim();
-        if (trimmed) collections.push(trimmed);
-      });
-    }
-
-    // Parse external collections from textarea (newline or comma separated)
-    const externalCollections: string[] = [];
-    if (externalCollectionsText) {
-      externalCollectionsText.split(/[\n,]/).forEach((item) => {
-        const trimmed = item.trim();
-        if (trimmed) externalCollections.push(trimmed);
-      });
-    }
-
-    if (collections.length === 0 && externalCollections.length === 0) {
-      const html = render(
-        <SyncResult
-          success={false}
-          error="Please specify at least one collection (primary or external) to sync"
-        />
-      );
-      return new Response(html, {
-        status: 400,
-        headers: { "content-type": "text/html" },
-      });
-    }
-
-    // Parse repos if provided
-    const repos: string[] = [];
-    if (reposText) {
-      reposText.split(/[\n,]/).forEach((item) => {
-        const trimmed = item.trim();
-        if (trimmed) repos.push(trimmed);
-      });
-    }
-
-    // Start sync job using the new job queue
-    // Use slice-specific client to ensure consistent slice URI
-    const sliceClient = getSliceClient(context, sliceId);
-    const syncJobResponse = await sliceClient.social.slices.slice.startSync({
-      collections: collections.length > 0 ? collections : undefined,
-      externalCollections:
-        externalCollections.length > 0 ? externalCollections : undefined,
-      repos: repos.length > 0 ? repos : undefined,
-    });
-
-    const html = render(
-      <SyncResult
-        success={syncJobResponse.success}
-        message={
-          syncJobResponse.success
-            ? `Sync job started successfully. Job ID: ${syncJobResponse.jobId}`
-            : syncJobResponse.message
-        }
-        jobId={syncJobResponse.jobId}
-        collectionsCount={collections.length + externalCollections.length}
-        error={syncJobResponse.success ? undefined : syncJobResponse.message}
-      />
-    );
-
-    return new Response(html, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  } catch (error) {
-    const html = render(
-      <SyncResult
-        success={false}
-        error={`Error: ${
-          error instanceof Error ? error.message : String(error)
-        }`}
-      />
-    );
-    return new Response(html, {
-      status: 500,
-      headers: { "content-type": "text/html" },
-    });
-  }
-}
-
-async function handleOAuthClientNew(req: Request): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const url = new URL(req.url);
-  const sliceId = url.pathname.split("/")[3];
-
-  try {
-    // Build the slice URI
-    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
-
-    const html = render(
-      <OAuthClientModal sliceId={sliceId} sliceUri={sliceUri} mode="new" />
-    );
-
-    return new Response(html, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  } catch (error) {
-    console.error("Error:", error);
-    return new Response("Failed to load modal", { status: 500 });
-  }
-}
-
-async function handleOAuthClientRegister(req: Request): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const url = new URL(req.url);
-  const sliceId = url.pathname.split("/")[3];
-
-  try {
-    const formData = await req.formData();
-    const sliceUri = formData.get("sliceUri") as string;
-    const clientName = formData.get("clientName") as string;
-    const redirectUris = (formData.get("redirectUris") as string)
-      .split("\n")
-      .map((uri) => uri.trim())
-      .filter((uri) => uri.length > 0);
-    const scope = (formData.get("scope") as string) || undefined;
-    const clientUri = (formData.get("clientUri") as string) || undefined;
-    const logoUri = (formData.get("logoUri") as string) || undefined;
-    const tosUri = (formData.get("tosUri") as string) || undefined;
-    const policyUri = (formData.get("policyUri") as string) || undefined;
-
-    // Create OAuth client via backend API
-    const sliceClient = getSliceClient(context, sliceId);
-    const clientDetails =
-      await sliceClient.social.slices.slice.createOAuthClient({
-        clientName,
-        redirectUris,
-        grantTypes: ["authorization_code"],
-        responseTypes: ["code"],
-        ...(scope && { scope }),
-        ...(clientUri && { clientUri }),
-        ...(logoUri && { logoUri }),
-        ...(tosUri && { tosUri }),
-        ...(policyUri && { policyUri }),
-      });
-
-    // Return success response using JSX component
-    const html = render(
-      <OAuthRegistrationResult
-        success
-        sliceId={sliceId}
-        clientId={clientDetails.clientId}
-      />
-    );
-
-    return new Response(html, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  } catch (error) {
-    console.error("Error registering OAuth client:", error);
-    const html = render(
-      <OAuthRegistrationResult
-        success={false}
-        sliceId={sliceId}
-        error={error instanceof Error ? error.message : String(error)}
-      />
-    );
-
-    return new Response(html, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  }
-}
-
-async function handleOAuthClientDelete(req: Request): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const url = new URL(req.url);
-  const pathParts = url.pathname.split("/");
-  const sliceId = pathParts[3];
-  const clientId = decodeURIComponent(pathParts[pathParts.length - 1]);
-
-  try {
-    const sliceClient = getSliceClient(context, sliceId);
-
-    // Delete the OAuth client via backend API
-    await sliceClient.social.slices.slice.deleteOAuthClient(clientId);
-
-    // Return empty response to remove the row
-    const html = render(<OAuthDeleteResult success />);
-    return new Response(html || "", {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  } catch (error) {
-    console.error("Error deleting OAuth client:", error);
-    const html = render(
-      <OAuthDeleteResult
-        success={false}
-        error={error instanceof Error ? error.message : String(error)}
-      />
-    );
-    return new Response(html || "", {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  }
-}
-
-async function handleOAuthClientView(req: Request): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const url = new URL(req.url);
-  const pathParts = url.pathname.split("/");
-  const sliceId = pathParts[3];
-  const clientId = decodeURIComponent(pathParts[5]);
-
-  try {
-    const sliceClient = getSliceClient(context, sliceId);
-
-    // Get OAuth clients to find the specific one
-    const clients = await sliceClient.social.slices.slice.getOAuthClients();
-    const client = clients.clients.find((c) => c.clientId === clientId);
-
-    if (!client) {
-      const html = render(
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
-          <div className="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full">
-            <h2 className="text-xl font-semibold text-gray-800 mb-4">
-              OAuth Client Not Found
-            </h2>
-            <p className="text-gray-600 mb-4">
-              The requested OAuth client could not be found.
-            </p>
-            <button
-              type="button"
-              _="on click set #modal-container's innerHTML to ''"
-              className="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition"
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      );
-      return new Response(html || "", {
-        status: 404,
-        headers: { "content-type": "text/html" },
-      });
-    }
-
-    const sliceUri = `at://did:plc:bcgltzqazw5tb6k2g3ttenbj/social.slices.slice/${sliceId}`;
-    const html = render(
-      <OAuthClientModal
-        sliceId={sliceId}
-        sliceUri={sliceUri}
-        mode="view"
-        clientData={client}
-      />
-    );
-
-    return new Response(html || "", {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  } catch (error) {
-    console.error("Error viewing OAuth client:", error);
-    const html = render(
-      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
-        <div className="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full">
-          <h2 className="text-xl font-semibold text-gray-800 mb-4">Error</h2>
-          <p className="text-gray-600 mb-4">
-            Failed to load OAuth client details:{" "}
-            {error instanceof Error ? error.message : String(error)}
-          </p>
-          <button
-            type="button"
-            _="on click set #modal-container's innerHTML to ''"
-            className="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition"
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    );
-    return new Response(html || "", {
-      status: 500,
-      headers: { "content-type": "text/html" },
-    });
-  }
-}
-
-async function handleOAuthClientUpdate(req: Request): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const url = new URL(req.url);
-  const pathParts = url.pathname.split("/");
-  const sliceId = pathParts[3];
-  const clientId = decodeURIComponent(pathParts[5]);
-
-  try {
-    const formData = await req.formData();
-    const clientName = formData.get("clientName") as string;
-    const redirectUrisText = formData.get("redirectUris") as string;
-    const scope = formData.get("scope") as string;
-    const clientUri = formData.get("clientUri") as string;
-    const logoUri = formData.get("logoUri") as string;
-    const tosUri = formData.get("tosUri") as string;
-    const policyUri = formData.get("policyUri") as string;
-
-    // Parse redirect URIs (split by lines and filter empty)
-    const redirectUris = redirectUrisText
-      .split("\n")
-      .map((uri) => uri.trim())
-      .filter((uri) => uri.length > 0);
-
-    // Update OAuth client via backend API
-    const sliceClient = getSliceClient(context, sliceId);
-    const updatedClient =
-      await sliceClient.social.slices.slice.updateOAuthClient({
-        clientId,
-        clientName: clientName || undefined,
-        redirectUris: redirectUris.length > 0 ? redirectUris : undefined,
-        scope: scope || undefined,
-        clientUri: clientUri || undefined,
-        logoUri: logoUri || undefined,
-        tosUri: tosUri || undefined,
-        policyUri: policyUri || undefined,
-      });
-
-    const sliceUri = `at://did:plc:bcgltzqazw5tb6k2g3ttenbj/social.slices.slice/${sliceId}`;
-    const html = render(
-      <OAuthClientModal
-        sliceId={sliceId}
-        sliceUri={sliceUri}
-        mode="view"
-        clientData={updatedClient}
-      />
-    );
-    return new Response(html, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  } catch (error) {
-    console.error("Error updating OAuth client:", error);
-    const html = render(
-      <OAuthDeleteResult
-        success={false}
-        error={error instanceof Error ? error.message : String(error)}
-      />
-    );
-    return new Response(html, {
-      status: 500,
-      headers: { "content-type": "text/html" },
-    });
-  }
-}
-
-async function handleJetstreamLogs(
-  req: Request,
-  params?: URLPatternResult
-): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
-
-  const sliceId = params?.pathname.groups.id;
-  if (!sliceId) {
-    const html = render(
-      <div className="p-8 text-center text-red-600">❌ Invalid slice ID</div>
-    );
-    return new Response(html, {
-      status: 400,
-      headers: { "content-type": "text/html" },
-    });
-  }
-
-  try {
-    // Use the slice-specific client
-    const sliceClient = getSliceClient(context, sliceId);
-
-    // Get Jetstream logs
-    const result = await sliceClient.social.slices.slice.getJetstreamLogs({
-      limit: 100,
-    });
-
-    const logs = result?.logs || [];
-
-    // Sort logs in descending order (newest first)
-    const sortedLogs = logs.sort(
-      (a, b) =>
-        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-    );
-
-    // Render the log content
-    const html = render(<JetstreamLogs logs={sortedLogs} />);
-
-    return new Response(html, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  } catch (error) {
-    console.error("Failed to get Jetstream logs:", error);
-    const errorMessage = error instanceof Error ? error.message : String(error);
-    const html = render(
-      <Layout title="Error">
-        <div className="max-w-6xl mx-auto">
-          <div className="flex items-center gap-4 mb-6">
-            <a
-              href={`/slices/${sliceId}`}
-              className="text-blue-600 hover:text-blue-800"
-            >
-              ← Back to Slice
-            </a>
-            <h1 className="text-2xl font-semibold text-gray-900">
-              ✈️ Jetstream Logs
-            </h1>
-          </div>
-          <div className="p-8 text-center text-red-600">
-            ❌ Error loading Jetstream logs: {errorMessage}
-          </div>
-        </div>
-      </Layout>
-    );
-    return new Response(html, {
-      status: 500,
-      headers: { "content-type": "text/html" },
-    });
-  }
-}
-
-async function handleJetstreamStatus(
-  req: Request,
-  _params?: URLPatternResult
-): Promise<Response> {
-  try {
-    // Extract parameters from query
-    const url = new URL(req.url);
-    const sliceId = url.searchParams.get("sliceId");
-    const isCompact = url.searchParams.get("compact") === "true";
-
-    // Fetch jetstream status using the atproto client
-    const data = await atprotoClient.social.slices.slice.getJetstreamStatus();
-
-    // Render compact version for logs page
-    if (isCompact) {
-      const html = render(
-        <div className="inline-flex items-center gap-2 text-xs">
-          {data.connected ? (
-            <>
-              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-              <span className="text-green-700">Jetstream Connected</span>
-            </>
-          ) : (
-            <>
-              <div className="w-2 h-2 bg-red-500 rounded-full"></div>
-              <span className="text-red-700">Jetstream Offline</span>
-            </>
-          )}
-        </div>
-      );
-
-      return new Response(html, {
-        status: 200,
-        headers: { "content-type": "text/html" },
-      });
-    }
-
-    // Render full version for main page
-    const html = render(
-      <JetstreamStatus
-        connected={data.connected}
-        status={data.status}
-        error={data.error}
-        sliceId={sliceId || undefined}
-      />
-    );
-
-    return new Response(html, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  } catch (error) {
-    // Extract parameters for error case too
-    const url = new URL(req.url);
-    const sliceId = url.searchParams.get("sliceId");
-    const isCompact = url.searchParams.get("compact") === "true";
-
-    // Render compact error version
-    if (isCompact) {
-      const html = render(
-        <div className="inline-flex items-center gap-2 text-xs">
-          <div className="w-2 h-2 bg-red-500 rounded-full"></div>
-          <span className="text-red-700">Jetstream Offline</span>
-        </div>
-      );
-
-      return new Response(html, {
-        status: 200,
-        headers: { "content-type": "text/html" },
-      });
-    }
-
-    // Fallback to disconnected state on error for full version
-    const html = render(
-      <JetstreamStatus
-        connected={false}
-        status="Connection error"
-        error={error instanceof Error ? error.message : "Unknown error"}
-        sliceId={sliceId || undefined}
-      />
-    );
-
-    return new Response(html, {
-      status: 200,
-      headers: { "content-type": "text/html" },
-    });
-  }
-}
-
-export const sliceRoutes: Route[] = [
-  {
-    method: "POST",
-    pattern: new URLPattern({ pathname: "/slices" }),
-    handler: handleCreateSlice,
-  },
-  {
-    method: "PUT",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/settings" }),
-    handler: handleUpdateSliceSettings,
-  },
-  {
-    method: "DELETE",
-    pattern: new URLPattern({ pathname: "/api/slices/:id" }),
-    handler: handleDeleteSlice,
-  },
-  {
-    method: "POST",
-    pattern: new URLPattern({ pathname: "/api/lexicons" }),
-    handler: handleCreateLexicon,
-  },
-  {
-    method: "GET",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/lexicons/list" }),
-    handler: handleListLexicons,
-  },
-  {
-    method: "GET",
-    pattern: new URLPattern({
-      pathname: "/api/slices/:id/lexicons/:rkey/view",
-    }),
-    handler: handleViewLexicon,
-  },
-  {
-    method: "DELETE",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/lexicons/:rkey" }),
-    handler: handleDeleteLexicon,
-  },
-  {
-    method: "POST",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/codegen" }),
-    handler: handleSliceCodegen,
-  },
-  {
-    method: "POST",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/lexicons" }),
-    handler: handleCreateLexicon,
-  },
-  {
-    method: "PUT",
-    pattern: new URLPattern({ pathname: "/api/profile" }),
-    handler: handleUpdateProfile,
-  },
-  {
-    method: "POST",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/sync" }),
-    handler: handleSliceSync,
-  },
-  {
-    method: "GET",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/job-history" }),
-    handler: handleJobHistory,
-  },
-  {
-    method: "GET",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/sync/logs/:jobId" }),
-    handler: handleSyncJobLogs,
-  },
-  {
-    method: "GET",
-    pattern: new URLPattern({ pathname: "/api/jetstream/status" }),
-    handler: handleJetstreamStatus,
-  },
-  {
-    method: "GET",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/jetstream/logs" }),
-    handler: handleJetstreamLogs,
-  },
-  {
-    method: "GET",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/new" }),
-    handler: handleOAuthClientNew,
-  },
-  {
-    method: "POST",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/register" }),
-    handler: handleOAuthClientRegister,
-  },
-  {
-    method: "GET",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/:uri/view" }),
-    handler: handleOAuthClientView,
-  },
-  {
-    method: "POST",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/:uri/update" }),
-    handler: handleOAuthClientUpdate,
-  },
-  {
-    method: "DELETE",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/:uri" }),
-    handler: handleOAuthClientDelete,
-  },
-];

frontend/src/shared/fragments/Button.tsx

···
+import type { JSX } from "preact";
+import { cn } from "../../utils/cn.ts";
+
+type ButtonVariant = 
+  | "primary"    // blue
+  | "secondary"  // gray  
+  | "danger"     // red
+  | "success"    // green
+  | "warning"    // orange
+  | "purple"     // purple
+  | "indigo"     // indigo
+  | "ghost";     // transparent with hover
+
+type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  children: JSX.Element | JSX.Element[] | string;
+  href?: string; // If provided, renders as a link styled like a button
+}
+
+const variantClasses = {
+  primary: "bg-blue-500 hover:bg-blue-600 text-white",
+  secondary: "bg-gray-500 hover:bg-gray-600 text-white", 
+  danger: "bg-red-600 hover:bg-red-700 text-white",
+  success: "bg-green-500 hover:bg-green-600 text-white",
+  warning: "bg-orange-500 hover:bg-orange-600 text-white",
+  purple: "bg-purple-500 hover:bg-purple-600 text-white",
+  indigo: "bg-indigo-500 hover:bg-indigo-600 text-white",
+  ghost: "bg-transparent hover:bg-gray-100 text-current",
+};
+
+const sizeClasses = {
+  sm: "px-3 py-1 text-sm",
+  md: "px-4 py-2", 
+  lg: "px-6 py-2 font-medium",
+};
+
+export function Button(props: ButtonProps): JSX.Element {
+  const { 
+    variant = "primary", 
+    size = "md", 
+    children, 
+    href,
+    class: classProp,
+    ...rest 
+  } = props;
+  
+  const className = cn(
+    "rounded transition-colors inline-flex items-center",
+    variantClasses[variant],
+    sizeClasses[size],
+    classProp
+  );
+
+  if (href) {
+    return (
+      <a href={href} class={className}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button class={className} {...rest}>
+      {children}
+    </button>
+  );
+}

frontend/src/shared/fragments/FlashMessage.tsx

···
+interface FlashMessageProps {
+  type: "success" | "error";
+  message: string;
+  className?: string;
+}
+
+export function FlashMessage({ type, message, className = "" }: FlashMessageProps) {
+  const baseClasses = "px-4 py-3 rounded mb-4 border";
+  const typeClasses = type === "success" 
+    ? "bg-green-100 border-green-400 text-green-700"
+    : "bg-red-100 border-red-400 text-red-700";
+  const icon = type === "success" ? "✅" : "❌";
+
+  return (
+    <div className={`${baseClasses} ${typeClasses} ${className}`}>
+      {icon} {message}
+    </div>
+  );
+}

frontend/src/shared/fragments/Input.tsx

···
+import type { JSX } from "preact";
+import { cn } from "../../utils/cn.ts";
+
+export interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+export function Input(props: InputProps): JSX.Element {
+  const { class: classProp, label, error, ...rest } = props;
+  const className = cn(
+    "block w-full border border-gray-300 rounded-md px-3 py-2",
+    error ? "border-red-300 focus:border-red-500 focus:ring-red-500" : "focus:border-blue-500 focus:ring-blue-500",
+    classProp,
+  );
+
+  return (
+    <div>
+      {label && (
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          {label}
+        </label>
+      )}
+      <input class={className} {...rest} />
+      {error && (
+        <p className="mt-1 text-sm text-red-600">{error}</p>
+      )}
+    </div>
+  );
+}

frontend/src/shared/fragments/Layout.tsx

···
+import { JSX } from "preact";
+import type { AuthenticatedUser } from "../../routes/middleware.ts";
+
+interface LayoutProps {
+  title?: string;
+  description?: string;
+  children: JSX.Element | JSX.Element[];
+  currentUser?: AuthenticatedUser;
+  showNavigation?: boolean;
+}
+
+export function Layout({
+  title = "Slices",
+  description = "AT Protocol data management platform",
+  children,
+  currentUser,
+  showNavigation = true,
+}: LayoutProps) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        
+        {/* Open Graph / Facebook */}
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+        
+        {/* Twitter */}
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta property="twitter:title" content={title} />
+        <meta property="twitter:description" content={description} />
+        <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+        <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
+        <script src="https://cdn.tailwindcss.com/3.4.1"></script>
+        <script src="https://unpkg.com/lucide@latest"></script>
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+
+          .htmx-indicator {
+            display: none;
+          }
+
+          .htmx-request .htmx-indicator {
+            display: inline;
+          }
+
+          .htmx-request .default-text {
+            display: none;
+          }
+        `,
+          }}
+        />
+      </head>
+      <body className={showNavigation ? "bg-gray-100 min-h-screen" : "min-h-screen"}>
+        {showNavigation && (
+          <nav className="bg-white text-gray-800 py-4 border-b border-gray-200">
+            <div className="max-w-5xl mx-auto px-4 flex justify-between items-center">
+              <a href="/" className="text-xl font-bold hover:text-blue-600">
+                Slices
+              </a>
+              <div className="flex items-center space-x-4">
+                {currentUser?.isAuthenticated ? (
+                  <div className="flex items-center space-x-3">
+                    {currentUser.avatar && (
+                      <img
+                        src={currentUser.avatar}
+                        alt="Profile avatar"
+                        className="w-6 h-6 rounded-full"
+                      />
+                    )}
+                    <span className="text-sm text-gray-600">
+                      {currentUser.handle
+                        ? `@${currentUser.handle}`
+                        : "Authenticated User"}
+                    </span>
+                    <a
+                      href="/settings"
+                      className="text-sm text-gray-600 hover:text-gray-800"
+                    >
+                      Settings
+                    </a>
+                    <form method="post" action="/logout" className="inline">
+                      <button
+                        type="submit"
+                        className="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded"
+                      >
+                        Logout
+                      </button>
+                    </form>
+                  </div>
+                ) : (
+                  <a
+                    href="/login"
+                    className="text-sm bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded"
+                  >
+                    Login
+                  </a>
+                )}
+              </div>
+            </div>
+          </nav>
+        )}
+        {showNavigation ? (
+          <main className="max-w-5xl mx-auto mt-8 px-4 pb-16 min-h-[calc(100vh-200px)]">
+            {children}
+          </main>
+        ) : (
+          <main className="w-full">
+            {children}
+          </main>
+        )}
+      </body>
+    </html>
+  );
+}

frontend/src/shared/fragments/LogLevelBadge.tsx

···
+interface LogLevelBadgeProps {
+  level: string;
+}
+
+export function LogLevelBadge({ level }: LogLevelBadgeProps) {
+  const colors: Record<string, string> = {
+    error: "bg-red-100 text-red-800",
+    warn: "bg-yellow-100 text-yellow-800",
+    info: "bg-blue-100 text-blue-800",
+    debug: "bg-gray-100 text-gray-800",
+  };
+
+  return (
+    <span
+      className={`px-2 py-1 rounded text-xs font-medium ${
+        colors[level] || colors.debug
+      }`}
+    >
+      {level.toUpperCase()}
+    </span>
+  );
+}

frontend/src/shared/fragments/Select.tsx

···
+import type { JSX } from "preact";
+import { cn } from "../../utils/cn.ts";
+
+export interface SelectProps extends JSX.SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: string;
+}
+
+export function Select(props: SelectProps): JSX.Element {
+  const { class: classProp, label, error, children, ...rest } = props;
+  const className = cn(
+    "block w-full border border-gray-300 rounded-md px-3 py-2",
+    error ? "border-red-300 focus:border-red-500 focus:ring-red-500" : "focus:border-blue-500 focus:ring-blue-500",
+    classProp,
+  );
+
+  return (
+    <div>
+      {label && (
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          {label}
+        </label>
+      )}
+      <select class={className} {...rest}>
+        {children}
+      </select>
+      {error && (
+        <p className="mt-1 text-sm text-red-600">{error}</p>
+      )}
+    </div>
+  );
+}

frontend/src/shared/fragments/Textarea.tsx

···
+import type { JSX } from "preact";
+import { cn } from "../../utils/cn.ts";
+
+export interface TextareaProps extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+}
+
+export function Textarea(props: TextareaProps): JSX.Element {
+  const { class: classProp, label, error, ...rest } = props;
+  const className = cn(
+    "block w-full border border-gray-300 rounded-md px-3 py-2",
+    error ? "border-red-300 focus:border-red-500 focus:ring-red-500" : "focus:border-blue-500 focus:ring-blue-500",
+    classProp,
+  );
+
+  return (
+    <div>
+      {label && (
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          {label}
+        </label>
+      )}
+      <textarea class={className} {...rest} />
+      {error && (
+        <p className="mt-1 text-sm text-red-600">{error}</p>
+      )}
+    </div>
+  );
+}

frontend/src/utils/cn.ts

···
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

frontend/src/utils/htmx.ts

···
+/**
+ * Creates an HTMX redirect response
+ * @param url - The URL to redirect to
+ * @param status - HTTP status code (default: 200)
+ * @returns Response with HX-Redirect header
+ */
+export function hxRedirect(url: string, status: number = 200): Response {
+  return new Response("", {
+    status,
+    headers: {
+      "HX-Redirect": url,
+    },
+  });
+}

frontend/src/utils/render.tsx

···
+import { render } from "preact-render-to-string";
+import { VNode } from "preact";
+
+/**
+ * Renders JSX to an HTML Response with proper headers
+ * @param jsx - The JSX element to render
+ * @param options - Optional response configuration
+ * @returns A Response object with rendered HTML
+ */
+export function renderHTML(
+  jsx: VNode,
+  options?: {
+    status?: number;
+    headers?: Record<string, string>;
+    title?: string;
+    description?: string;
+  }
+): Response {
+  const html = render(jsx);
+  
+  const headers: Record<string, string> = {
+    "content-type": "text/html; charset=utf-8",
+    ...options?.headers,
+  };
+
+  return new Response(`<!DOCTYPE html>${html}`, {
+    status: options?.status || 200,
+    headers,
+  });
+}