rework frontend for unauthenticated access to slices, refector lexicons list ui, other styling updates

api/src/jobs.rs

···
     limit: Option<i64>,
 ) -> Result<Vec<JobStatus>, sqlx::Error> {
     let limit = limit.unwrap_or(10);
-    
+
     info!(
         "Querying job history: user_did={}, slice_uri={}, limit={}",
         user_did, slice_uri, limit
     );
-    
+
+    // Get both completed jobs and pending jobs
     let rows = sqlx::query!(
         r#"
-        SELECT 
+        -- Completed jobs from job_results
+        SELECT
             job_id, user_did, slice_uri, status, success, total_records,
             collections_synced, repos_processed, message, error_message,
-            created_at, completed_at
-        FROM job_results 
+            created_at, completed_at,
+            'completed' as job_type
+        FROM job_results
         WHERE user_did = $1 AND slice_uri = $2
+
+        UNION ALL
+
+        -- Pending jobs from message queue
+        SELECT
+            (p.payload_json->>'job_id')::uuid as job_id,
+            p.payload_json->>'user_did' as user_did,
+            p.payload_json->>'slice_uri' as slice_uri,
+            'running' as status,
+            NULL::boolean as success,
+            NULL::bigint as total_records,
+            '[]'::jsonb as collections_synced,
+            NULL::bigint as repos_processed,
+            'Job in progress...' as message,
+            NULL::text as error_message,
+            m.created_at,
+            NULL::timestamptz as completed_at,
+            'pending' as job_type
+        FROM mq_msgs m
+        JOIN mq_payloads p ON m.id = p.id
+        WHERE m.channel_name = 'sync_queue'
+        AND m.id != '00000000-0000-0000-0000-000000000000'
+        AND p.payload_json->>'user_did' = $1
+        AND p.payload_json->>'slice_uri' = $2
+        AND NOT EXISTS (
+            SELECT 1 FROM job_results jr
+            WHERE jr.job_id = (p.payload_json->>'job_id')::uuid
+        )
+
         ORDER BY created_at DESC
         LIMIT $3
         "#,
···
 
     let mut results = Vec::new();
     for row in rows {
-        let collections_synced: Vec<String> = serde_json::from_value(row.collections_synced)
-            .unwrap_or_default();
+        let collections_synced: Vec<String> = serde_json::from_value(
+            row.collections_synced.unwrap_or_else(|| serde_json::json!([]))
+        ).unwrap_or_default();
 
-        results.push(JobStatus {
-            job_id: row.job_id,
-            status: row.status,
-            created_at: row.created_at,
-            started_at: Some(row.created_at),
-            completed_at: Some(row.completed_at),
-            result: Some(SyncJobResult {
-                success: row.success,
-                total_records: row.total_records,
+        // Handle both completed and pending jobs
+        let result = if row.job_type.as_deref() == Some("pending") || row.success.is_none() {
+            // This is a pending job - no result data available
+            None
+        } else {
+            // This is a completed job - include result data
+            Some(SyncJobResult {
+                success: row.success.unwrap_or(false),
+                total_records: row.total_records.unwrap_or(0),
                 collections_synced,
-                repos_processed: row.repos_processed,
-                message: row.message,
-            }),
+                repos_processed: row.repos_processed.unwrap_or(0),
+                message: row.message.clone().unwrap_or_default(),
+            })
+        };
+
+        results.push(JobStatus {
+            job_id: row.job_id.unwrap_or_else(Uuid::new_v4),
+            status: row.status.unwrap_or_default(),
+            created_at: row.created_at.unwrap_or_else(chrono::Utc::now),
+            started_at: row.created_at,
+            completed_at: row.completed_at,
+            result,
             error: row.error_message,
             retry_count: 0,
         });

frontend/CLAUDE.md

···
 # CLAUDE.md
 
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+This file provides guidance to Claude Code (claude.ai/code) when working with
+code in this repository.
 
 ## Development Commands
 
···
 
 ## 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.
+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  
+- **Frontend**: Preact with server-side rendering
 - **Styling**: Tailwind CSS (via CDN)
 - **Interactivity**: HTMX + Hyperscript
 - **Routing**: Deno's standard HTTP routing
···
 ### Core Architecture Patterns
 
 #### Feature-Based Organization
+
 The codebase is organized by features rather than technical layers:
 
 ```
···
 ```
 
 #### 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` 
+- 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  
+#### 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`
-- Optional variables: `DOCS_PATH` (path to markdown documentation files, defaults to "../docs")
+- Environment variables required: `OAUTH_CLIENT_ID`, `OAUTH_CLIENT_SECRET`,
+  `OAUTH_REDIRECT_URI`, `OAUTH_AIP_BASE_URL`, `API_URL`, `SLICE_URI`
+- Optional variables: `DOCS_PATH` (path to markdown documentation files,
+  defaults to "../docs")
 
 #### Rendering System
+
 - `src/utils/render.tsx` - Unified HTML rendering with proper headers
 - Server-side rendering with Preact
 - HTMX for dynamic interactions without page reloads
···
 ### 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
···
 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.
+
+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
+5. HTMX handles partial page updates on client-side interactions

frontend/src/client.test.ts

···
   private callCount = 0;
 
   constructor(
-    initialState: "valid" | "expired" | "refresh_fails" | "no_tokens"
+    initialState: "valid" | "expired" | "refresh_fails" | "no_tokens",
   ) {
     this.tokenState = initialState;
   }
···
   async ensureValidToken() {
     this.callCount++;
     console.log(
-      `MockOAuth.ensureValidToken() called (attempt ${this.callCount})`
+      `MockOAuth.ensureValidToken() called (attempt ${this.callCount})`,
     );
 
     switch (this.tokenState) {
···
 function createMockFetch() {
   return async (
     url: string | URL | Request,
-    init?: RequestInit
+    init?: RequestInit,
   ): Promise<Response> => {
     const requestUrl = url.toString();
     const method = init?.method || "GET";
···
     console.log(`Authorization header: ${headers["Authorization"] || "none"}`);
 
     // Check if request has valid authorization
-    const hasAuth =
-      headers["Authorization"]?.startsWith("Bearer valid") ||
+    const hasAuth = headers["Authorization"]?.startsWith("Bearer valid") ||
       headers["Authorization"]?.startsWith("Bearer refreshed");
 
     if (method === "GET") {
···
         {
           status: 200,
           headers: { "Content-Type": "application/json" },
-        }
+        },
       );
     } else {
       // POST/PUT/DELETE require valid auth
···
           {
             status: 200,
             headers: { "Content-Type": "application/json" },
-          }
+          },
         );
       } else {
         return new Response(
···
           {
             status: 401,
             headers: { "Content-Type": "application/json" },
-          }
+          },
         );
       }
     }
···
 }
 
 function createTestClient(
-  tokenState: "valid" | "expired" | "refresh_fails" | "no_tokens"
+  tokenState: "valid" | "expired" | "refresh_fails" | "no_tokens",
 ) {
   const mockOAuth = new MockOAuthClient(tokenState);
   return new AtProtoClient(
     "https://test-api.example.com",
     "at://did:plc:test/network.slices.slice/test",
-    mockOAuth as any
+    mockOAuth as any,
   );
 }
 
···
       console.log("Read operation succeeded after token refresh");
     } catch (error) {
       throw new Error(
-        `Read operation should have succeeded after refresh: ${error}`
+        `Read operation should have succeeded after refresh: ${error}`,
       );
     } finally {
       // Restore original fetch
       globalThis.fetch = originalFetch;
     }
-  }
+  },
 );
 
 Deno.test(
···
       console.log("Write operation succeeded after token refresh");
     } catch (error) {
       throw new Error(
-        `Write operation should have succeeded after refresh: ${error}`
+        `Write operation should have succeeded after refresh: ${error}`,
       );
     } finally {
       // Restore original fetch
       globalThis.fetch = originalFetch;
     }
-  }
+  },
 );
 
 Deno.test("Token refresh fails - read operation should succeed", async () => {
···
     console.log("Read operation succeeded without auth (as expected)");
   } catch (error) {
     throw new Error(
-      `Read operation should succeed even without auth: ${error}`
+      `Read operation should succeed even without auth: ${error}`,
     );
   } finally {
     // Restore original fetch
···
         },
         Error,
         "Authentication required",
-        "Write operation should fail with authentication error when tokens can't be refreshed"
+        "Write operation should fail with authentication error when tokens can't be refreshed",
       );
     } finally {
       // Restore original fetch
       globalThis.fetch = originalFetch;
     }
-  }
+  },
 );
 
 Deno.test("No tokens - read operation should succeed", async () => {
···
     console.log("Read operation succeeded without tokens (as expected)");
   } catch (error) {
     throw new Error(
-      `Read operation should succeed even without tokens: ${error}`
+      `Read operation should succeed even without tokens: ${error}`,
     );
   } finally {
     // Restore original fetch
···
         },
         Error,
         "Authentication required",
-        "Write operation should fail with authentication error when no tokens available"
+        "Write operation should fail with authentication error when no tokens available",
       );
     } finally {
       // Restore original fetch
       globalThis.fetch = originalFetch;
     }
-  }
+  },
 );
 
 Deno.test("401 response triggers token refresh and retry", async () => {
···
   let callCount = 0;
   const mockFetch = (
     url: string | URL | Request,
-    init?: RequestInit
+    init?: RequestInit,
   ): Promise<Response> => {
     callCount++;
     const requestUrl = url.toString();
···
           new Response(JSON.stringify({ error: "Unauthorized" }), {
             status: 401,
             headers: { "Content-Type": "application/json" },
-          })
+          }),
         );
       } else {
         // Second call should succeed (with refreshed token)
···
             {
               status: 200,
               headers: { "Content-Type": "application/json" },
-            }
-          )
+            },
+          ),
         );
       }
     }
···
     }
 
     console.log(
-      "401 retry test passed - request was retried after token refresh"
+      "401 retry test passed - request was retried after token refresh",
     );
   } finally {
     // Restore original fetch

frontend/src/client.ts

···
   labels?:
     | ComAtprotoLabelDefs["SelfLabels"]
     | {
-        $type: string;
-        [key: string]: unknown;
-      };
+      $type: string;
+      [key: string]: unknown;
+    };
   createdAt?: string;
   pinnedPost?: ComAtprotoRepoStrongRef;
   /** Free-form profile description text. */
···
   readonly SelfLabel: ComAtprotoLabelDefsSelfLabel;
   readonly SelfLabels: ComAtprotoLabelDefsSelfLabels;
   readonly LabelValueDefinition: ComAtprotoLabelDefsLabelValueDefinition;
-  readonly LabelValueDefinitionStrings: ComAtprotoLabelDefsLabelValueDefinitionStrings;
+  readonly LabelValueDefinitionStrings:
+    ComAtprotoLabelDefsLabelValueDefinitionStrings;
 }
 
 class ProfileActorBskyAppClient {
···
     limit?: number;
     cursor?: string;
     where?: {
-      [K in
-        | AppBskyActorProfileSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | AppBskyActorProfileSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     orWhere?: {
-      [K in
-        | AppBskyActorProfileSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | AppBskyActorProfileSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     sortBy?: SortField<AppBskyActorProfileSortFields>[];
   }): Promise<GetRecordsResponse<AppBskyActorProfile>> {
···
   }
 
   async getRecord(
-    params: GetRecordParams
+    params: GetRecordParams,
   ): Promise<RecordResponse<AppBskyActorProfile>> {
     return await this.client.getRecord("app.bsky.actor.profile", params);
   }
···
     limit?: number;
     cursor?: string;
     where?: {
-      [K in
-        | AppBskyActorProfileSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | AppBskyActorProfileSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     orWhere?: {
-      [K in
-        | AppBskyActorProfileSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | AppBskyActorProfileSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     sortBy?: SortField<AppBskyActorProfileSortFields>[];
   }): Promise<CountRecordsResponse> {
···
 
   async createRecord(
     record: AppBskyActorProfile,
-    useSelfRkey?: boolean
+    useSelfRkey?: boolean,
   ): Promise<{ uri: string; cid: string }> {
     return await this.client.createRecord(
       "app.bsky.actor.profile",
       record,
-      useSelfRkey
+      useSelfRkey,
     );
   }
 
   async updateRecord(
     rkey: string,
-    record: AppBskyActorProfile
+    record: AppBskyActorProfile,
   ): Promise<{ uri: string; cid: string }> {
     return await this.client.updateRecord(
       "app.bsky.actor.profile",
       rkey,
-      record
+      record,
     );
   }
 
···
     limit?: number;
     cursor?: string;
     where?: {
-      [K in
-        | NetworkSlicesSliceSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesSliceSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     orWhere?: {
-      [K in
-        | NetworkSlicesSliceSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesSliceSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     sortBy?: SortField<NetworkSlicesSliceSortFields>[];
   }): Promise<GetRecordsResponse<NetworkSlicesSlice>> {
···
   }
 
   async getRecord(
-    params: GetRecordParams
+    params: GetRecordParams,
   ): Promise<RecordResponse<NetworkSlicesSlice>> {
     return await this.client.getRecord("network.slices.slice", params);
   }
···
     limit?: number;
     cursor?: string;
     where?: {
-      [K in
-        | NetworkSlicesSliceSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesSliceSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     orWhere?: {
-      [K in
-        | NetworkSlicesSliceSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesSliceSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     sortBy?: SortField<NetworkSlicesSliceSortFields>[];
   }): Promise<CountRecordsResponse> {
···
 
   async createRecord(
     record: NetworkSlicesSlice,
-    useSelfRkey?: boolean
+    useSelfRkey?: boolean,
   ): Promise<{ uri: string; cid: string }> {
     return await this.client.createRecord(
       "network.slices.slice",
       record,
-      useSelfRkey
+      useSelfRkey,
     );
   }
 
   async updateRecord(
     rkey: string,
-    record: NetworkSlicesSlice
+    record: NetworkSlicesSlice,
   ): Promise<{ uri: string; cid: string }> {
     return await this.client.updateRecord("network.slices.slice", rkey, record);
   }
···
     return await this.client.makeRequest<CodegenXrpcResponse>(
       "network.slices.slice.codegen",
       "POST",
-      request
+      request,
     );
   }
 
···
     return await this.client.makeRequest<SliceStatsOutput>(
       "network.slices.slice.stats",
       "POST",
-      params
+      params,
     );
   }
 
   async getSliceRecords<T = Record<string, unknown>>(
-    params: Omit<SliceLevelRecordsParams<T>, "slice">
+    params: Omit<SliceLevelRecordsParams<T>, "slice">,
   ): Promise<SliceRecordsOutput<T>> {
     // Combine where and orWhere into the expected backend format
     const whereClause: any = params?.where ? { ...params.where } : {};
···
     return await this.client.makeRequest<SliceRecordsOutput<T>>(
       "network.slices.slice.getSliceRecords",
       "POST",
-      requestParams
+      requestParams,
     );
   }
 
···
     return await this.client.makeRequest<GetActorsResponse>(
       "network.slices.slice.getActors",
       "POST",
-      requestParams
+      requestParams,
     );
   }
 
···
     return await this.client.makeRequest<SyncJobResponse>(
       "network.slices.slice.startSync",
       "POST",
-      requestParams
+      requestParams,
     );
   }
 
···
     return await this.client.makeRequest<JobStatus>(
       "network.slices.slice.getJobStatus",
       "GET",
-      params
+      params,
     );
   }
 
   async getJobHistory(
-    params: GetJobHistoryParams
+    params: GetJobHistoryParams,
   ): Promise<GetJobHistoryResponse> {
     return await this.client.makeRequest<GetJobHistoryResponse>(
       "network.slices.slice.getJobHistory",
       "GET",
-      params
+      params,
     );
   }
 
···
     return await this.client.makeRequest<GetJobLogsResponse>(
       "network.slices.slice.getJobLogs",
       "GET",
-      params
+      params,
     );
   }
 
   async getJetstreamStatus(): Promise<JetstreamStatusResponse> {
     return await this.client.makeRequest<JetstreamStatusResponse>(
       "network.slices.slice.getJetstreamStatus",
-      "GET"
+      "GET",
     );
   }
 
   async getJetstreamLogs(
-    params: GetJetstreamLogsParams
+    params: GetJetstreamLogsParams,
   ): Promise<GetJetstreamLogsResponse> {
     return await this.client.makeRequest<GetJetstreamLogsResponse>(
       "network.slices.slice.getJetstreamLogs",
       "GET",
-      params
+      params,
     );
   }
 
   async syncUserCollections(
-    params?: SyncUserCollectionsRequest
+    params?: SyncUserCollectionsRequest,
   ): Promise<SyncUserCollectionsResult> {
     const requestParams = { slice: this.client.sliceUri, ...params };
     return await this.client.makeRequest<SyncUserCollectionsResult>(
       "network.slices.slice.syncUserCollections",
       "POST",
-      requestParams
+      requestParams,
     );
   }
 
   async createOAuthClient(
-    params: CreateOAuthClientRequest
+    params: CreateOAuthClientRequest,
   ): Promise<OAuthClientDetails> {
     const requestParams = { ...params, sliceUri: this.client.sliceUri };
     return await this.client.makeRequest<OAuthClientDetails>(
       "network.slices.slice.createOAuthClient",
       "POST",
-      requestParams
+      requestParams,
     );
   }
 
···
     return await this.client.makeRequest<ListOAuthClientsResponse>(
       "network.slices.slice.getOAuthClients",
       "GET",
-      requestParams
+      requestParams,
     );
   }
 
   async updateOAuthClient(
-    params: UpdateOAuthClientRequest
+    params: UpdateOAuthClientRequest,
   ): Promise<OAuthClientDetails> {
     const requestParams = { ...params, sliceUri: this.client.sliceUri };
     return await this.client.makeRequest<OAuthClientDetails>(
       "network.slices.slice.updateOAuthClient",
       "POST",
-      requestParams
+      requestParams,
     );
   }
 
   async deleteOAuthClient(
-    clientId: string
+    clientId: string,
   ): Promise<DeleteOAuthClientResponse> {
     return await this.client.makeRequest<DeleteOAuthClientResponse>(
       "network.slices.slice.deleteOAuthClient",
       "POST",
-      { clientId }
+      { clientId },
     );
   }
 }
···
     limit?: number;
     cursor?: string;
     where?: {
-      [K in
-        | NetworkSlicesWaitingSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesWaitingSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     orWhere?: {
-      [K in
-        | NetworkSlicesWaitingSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesWaitingSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     sortBy?: SortField<NetworkSlicesWaitingSortFields>[];
   }): Promise<GetRecordsResponse<NetworkSlicesWaiting>> {
···
   }
 
   async getRecord(
-    params: GetRecordParams
+    params: GetRecordParams,
   ): Promise<RecordResponse<NetworkSlicesWaiting>> {
     return await this.client.getRecord("network.slices.waiting", params);
   }
···
     limit?: number;
     cursor?: string;
     where?: {
-      [K in
-        | NetworkSlicesWaitingSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesWaitingSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     orWhere?: {
-      [K in
-        | NetworkSlicesWaitingSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesWaitingSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     sortBy?: SortField<NetworkSlicesWaitingSortFields>[];
   }): Promise<CountRecordsResponse> {
···
 
   async createRecord(
     record: NetworkSlicesWaiting,
-    useSelfRkey?: boolean
+    useSelfRkey?: boolean,
   ): Promise<{ uri: string; cid: string }> {
     return await this.client.createRecord(
       "network.slices.waiting",
       record,
-      useSelfRkey
+      useSelfRkey,
     );
   }
 
   async updateRecord(
     rkey: string,
-    record: NetworkSlicesWaiting
+    record: NetworkSlicesWaiting,
   ): Promise<{ uri: string; cid: string }> {
     return await this.client.updateRecord(
       "network.slices.waiting",
       rkey,
-      record
+      record,
     );
   }
 
···
     limit?: number;
     cursor?: string;
     where?: {
-      [K in
-        | NetworkSlicesLexiconSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesLexiconSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     orWhere?: {
-      [K in
-        | NetworkSlicesLexiconSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesLexiconSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     sortBy?: SortField<NetworkSlicesLexiconSortFields>[];
   }): Promise<GetRecordsResponse<NetworkSlicesLexicon>> {
···
   }
 
   async getRecord(
-    params: GetRecordParams
+    params: GetRecordParams,
   ): Promise<RecordResponse<NetworkSlicesLexicon>> {
     return await this.client.getRecord("network.slices.lexicon", params);
   }
···
     limit?: number;
     cursor?: string;
     where?: {
-      [K in
-        | NetworkSlicesLexiconSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesLexiconSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     orWhere?: {
-      [K in
-        | NetworkSlicesLexiconSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesLexiconSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     sortBy?: SortField<NetworkSlicesLexiconSortFields>[];
   }): Promise<CountRecordsResponse> {
···
 
   async createRecord(
     record: NetworkSlicesLexicon,
-    useSelfRkey?: boolean
+    useSelfRkey?: boolean,
   ): Promise<{ uri: string; cid: string }> {
     return await this.client.createRecord(
       "network.slices.lexicon",
       record,
-      useSelfRkey
+      useSelfRkey,
     );
   }
 
   async updateRecord(
     rkey: string,
-    record: NetworkSlicesLexicon
+    record: NetworkSlicesLexicon,
   ): Promise<{ uri: string; cid: string }> {
     return await this.client.updateRecord(
       "network.slices.lexicon",
       rkey,
-      record
+      record,
     );
   }
 
···
     limit?: number;
     cursor?: string;
     where?: {
-      [K in
-        | NetworkSlicesActorProfileSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesActorProfileSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     orWhere?: {
-      [K in
-        | NetworkSlicesActorProfileSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesActorProfileSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     sortBy?: SortField<NetworkSlicesActorProfileSortFields>[];
   }): Promise<GetRecordsResponse<NetworkSlicesActorProfile>> {
···
   }
 
   async getRecord(
-    params: GetRecordParams
+    params: GetRecordParams,
   ): Promise<RecordResponse<NetworkSlicesActorProfile>> {
     return await this.client.getRecord("network.slices.actor.profile", params);
   }
···
     limit?: number;
     cursor?: string;
     where?: {
-      [K in
-        | NetworkSlicesActorProfileSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesActorProfileSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     orWhere?: {
-      [K in
-        | NetworkSlicesActorProfileSortFields
-        | IndexedRecordFields]?: WhereCondition;
+      [
+        K in
+          | NetworkSlicesActorProfileSortFields
+          | IndexedRecordFields
+      ]?: WhereCondition;
     };
     sortBy?: SortField<NetworkSlicesActorProfileSortFields>[];
   }): Promise<CountRecordsResponse> {
     return await this.client.countRecords(
       "network.slices.actor.profile",
-      params
+      params,
     );
   }
 
   async createRecord(
     record: NetworkSlicesActorProfile,
-    useSelfRkey?: boolean
+    useSelfRkey?: boolean,
   ): Promise<{ uri: string; cid: string }> {
     return await this.client.createRecord(
       "network.slices.actor.profile",
       record,
-      useSelfRkey
+      useSelfRkey,
     );
   }
 
   async updateRecord(
     rkey: string,
-    record: NetworkSlicesActorProfile
+    record: NetworkSlicesActorProfile,
   ): Promise<{ uri: string; cid: string }> {
     return await this.client.updateRecord(
       "network.slices.actor.profile",
       rkey,
-      record
+      record,
     );
   }
 

frontend/src/config.ts

···
 ) {
   throw new Error(
     "Missing OAuth configuration. Please ensure .env file contains:\n" +
-      "OAUTH_CLIENT_ID, OAUTH_CLIENT_SECRET, OAUTH_REDIRECT_URI, OAUTH_AIP_BASE_URL, API_URL, SLICE_URI"
+      "OAUTH_CLIENT_ID, OAUTH_CLIENT_SECRET, OAUTH_REDIRECT_URI, OAUTH_AIP_BASE_URL, API_URL, SLICE_URI",
   );
 }
 
···
       // "repo:network.slices.waiting",
     ],
   },
-  oauthStorage
+  oauthStorage,
 );
 
 // Session setup (shared database)
···
 });
 
 export const atprotoClient = new AtProtoClient(API_URL, SLICE_URI, oauthClient);
+
+// Public client for unauthenticated requests
+export const publicClient = new AtProtoClient(API_URL, SLICE_URI);

frontend/src/features/auth/handlers.tsx

···
 
   const error = url.searchParams.get("error");
   return renderHTML(
-    <LoginPage error={error || undefined} currentUser={context.currentUser} />
+    <LoginPage error={error || undefined} currentUser={context.currentUser} />,
   );
 }
 
···
     return Response.redirect(
       new URL(
         "/login?error=" + encodeURIComponent("OAuth initialization failed"),
-        req.url
+        req.url,
       ),
-      302
+      302,
     );
   }
 }
···
       return Response.redirect(
         new URL(
           "/login?error=" + encodeURIComponent("Invalid OAuth callback"),
-          req.url
+          req.url,
         ),
-        302
+        302,
       );
     }
 
···
       return Response.redirect(
         new URL(
           "/login?error=" + encodeURIComponent("OAuth client not configured"),
-          req.url
+          req.url,
         ),
-        302
+        302,
       );
     }
 
···
       return Response.redirect(
         new URL(
           "/login?error=" + encodeURIComponent("Failed to create session"),
-          req.url
+          req.url,
         ),
-        302
+        302,
       );
     }
 
···
     try {
       if (!userInfo?.sub) {
         console.log(
-          "No user DID available, skipping external collections sync"
+          "No user DID available, skipping external collections sync",
         );
       } else {
         // Check if user already has bsky profile synced
         try {
-          const profileCheck =
-            await atprotoClient.app.bsky.actor.profile.getRecords({
+          const profileCheck = await atprotoClient.app.bsky.actor.profile
+            .getRecords({
               where: {
                 did: { eq: userInfo.sub },
               },
···
         } catch (_profileError) {
           // If we can't check existing records, skip sync to be safe
           console.log(
-            "Could not check existing external collections, skipping sync"
+            "Could not check existing external collections, skipping sync",
           );
         }
       }
     } catch (error) {
       console.log(
         "Error during sync check, skipping external collections sync:",
-        error
+        error,
       );
     }
 
···
     return Response.redirect(
       new URL(
         "/login?error=" + encodeURIComponent("Authentication failed"),
-        req.url
+        req.url,
       ),
-      302
+      302,
     );
   }
 }
···
         isWaitlistFlow: true,
         handle,
         redirectUri: "/auth/waitlist/callback",
-      })
+      }),
     );
 
     // Initiate OAuth with minimal scope for waitlist, passing state directly
···
     if (!code || !state) {
       return Response.redirect(
         new URL("/?error=invalid_callback", req.url),
-        302
+        302,
       );
     }
 
···
     if (!atprotoClient.oauth) {
       return Response.redirect(
         new URL("/?error=oauth_not_configured", req.url),
-        302
+        302,
       );
     }
 
···
         {
           createdAt: new Date().toISOString(),
         },
-        true
+        true,
       );
     } catch (error) {
       console.error("Failed to create waitlist record:", error);

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

···
 
 export function LoginPage({ error, currentUser }: LoginPageProps) {
   return (
-    <Layout 
-      title="Login - Slice" 
+    <Layout
+      title="Login - Slice"
       currentUser={currentUser}
       backgroundStyle="background-image: url('https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:bcgltzqazw5tb6k2g3ttenbj/bafkreidhffhdfqpxw6hxigkgbamn2kltohplzlepepxuogl7oh2bzoajwi@jpeg'); background-size: cover; background-position: center;"
     >
···
             e.g., user.bsky.social, pds.example.com
           </div>
         </div>
-        
+
         <div className="absolute bottom-2 left-2 right-2 flex flex-col sm:flex-row justify-between items-start sm:items-end text-white text-sm gap-1 sm:gap-0">
           <div className="flex flex-col sm:flex-row">
             <span>
···
       </div>
     </Layout>
   );
-}
+}

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

···
       <p className="text-red-700 text-sm">{message}</p>
     </div>
   );
-}
+}

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

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

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

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

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 { requireAuth, withAuth } from "../../routes/middleware.ts";
+import { atprotoClient, publicClient } from "../../config.ts";
 import { DashboardPage } from "./templates/DashboardPage.tsx";
 import { CreateSliceDialog } from "./templates/fragments/CreateSliceDialog.tsx";
-import { getSlicesForActor, getSliceActor } from "../../lib/api.ts";
+import { getSliceActor, getSlicesForActor } from "../../lib/api.ts";
+import { buildSliceUrl } from "../../utils/slice-params.ts";
 
 async function handleProfilePage(
   req: Request,
-  params?: URLPatternResult
+  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({
+    const actors = await publicClient.getActors({
       where: { handle: { eq: handle } },
     });
 
···
 
   // Use hydrated functions to get profile and slices
   const [profile, slices] = await Promise.all([
-    getSliceActor(atprotoClient, profileDid),
-    getSlicesForActor(atprotoClient, profileDid),
+    getSliceActor(publicClient, profileDid),
+    getSlicesForActor(publicClient, profileDid),
   ]);
 
   if (!profile) {
···
       slices={slices}
       currentUser={context.currentUser}
       profile={profile}
-    />
+    />,
   );
 }
 
···
   const authInfo = await atprotoClient.oauth?.getAuthenticationInfo();
   if (!authInfo?.isAuthenticated) {
     return renderHTML(
-      <CreateSliceDialog error="Session expired. Please log in again." />
+      <CreateSliceDialog error="Session expired. Please log in again." />,
     );
   }
 
···
           error="Slice name is required"
           name={name}
           domain={domain}
-        />
+        />,
       );
     }
 
···
           error="Primary domain is required"
           name={name}
           domain={domain}
-        />
+        />,
       );
     }
 
···
       };
 
       const result = await atprotoClient.network.slices.slice.createRecord(
-        recordData
+        recordData,
       );
 
       const uriParts = result.uri.split("/");
-      const sliceId = uriParts[uriParts.length - 1];
+      const sliceRkey = uriParts[uriParts.length - 1];
 
-      return hxRedirect(`/slices/${sliceId}`);
+      // Get the user's handle from the auth context
+      const handle = context.currentUser?.handle;
+      if (!handle) {
+        throw new Error("Unable to determine user handle");
+      }
+
+      const redirectUrl = buildSliceUrl(handle, sliceRkey);
+      return hxRedirect(redirectUrl);
     } catch (_createError) {
       return renderHTML(
         <CreateSliceDialog
           error="Failed to create slice record. Please try again."
           name={name}
           domain={domain}
-        />
+        />,
       );
     }
   } catch (_error) {

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

···
 import { Layout } from "../../../shared/fragments/Layout.tsx";
 import { Button } from "../../../shared/fragments/Button.tsx";
 import { EmptyState } from "../../../shared/fragments/EmptyState.tsx";
-import { SlicesList } from "./fragments/SlicesList.tsx";
+import { SliceCard } from "../../../shared/fragments/SliceCard.tsx";
 import { ActorAvatar } from "../../../shared/fragments/ActorAvatar.tsx";
 import { FileText } from "lucide-preact";
 import type { AuthenticatedUser } from "../../../routes/middleware.ts";
 import type {
+  NetworkSlicesActorDefsProfileViewBasic,
   NetworkSlicesSliceDefsSliceView,
-  NetworkSlicesActorDefsProfileViewBasic
 } from "../../../client.ts";
 
 interface DashboardPageProps {
···
 }: DashboardPageProps) {
   const displayName = profile?.displayName || profile?.handle || "User";
 
+  // Check if current user is viewing their own profile
+  const isOwnProfile = currentUser?.isAuthenticated &&
+    currentUser?.handle === profile?.handle;
+
   return (
     <Layout title="Slices" currentUser={currentUser}>
       <div className="px-4 py-8">
···
         {profile && (
           <div className="flex flex-col mb-8">
             <ActorAvatar profile={profile} size={64} />
-            <p className="text-2xl font-bold text-zinc-900 mt-2">{displayName}</p>
+            <p className="text-2xl font-bold text-zinc-900 mt-2">
+              {displayName}
+            </p>
             <p className="text-zinc-600">@{profile.handle}</p>
             {profile.description && (
-              <p className="text-zinc-600 mt-2 max-w-lg">{profile.description}</p>
+              <p className="text-zinc-600 mt-2 max-w-lg">
+                {profile.description}
+              </p>
             )}
           </div>
         )}
 
         <div className="flex justify-between items-center mb-8">
           <h1 className="text-3xl font-bold text-zinc-900">Slices</h1>
-          <Button
-            type="button"
-            variant="primary"
-            hx-get="/dialogs/create-slice"
-            hx-target="body"
-            hx-swap="beforeend"
-          >
-            + Create Slice
-          </Button>
+          {isOwnProfile && (
+            <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} />
-        ) : (
-          <div className="bg-white border border-zinc-200">
-            <EmptyState
-              icon={<FileText size={64} strokeWidth={1} />}
-              title="No slices yet"
-              description="Create your first slice to get started organizing your AT Protocol data."
-            >
-              <Button
-                type="button"
-                variant="primary"
-                hx-get="/dialogs/create-slice"
-                hx-target="body"
-                hx-swap="beforeend"
+        {slices.length > 0
+          ? (
+            <div className="space-y-4">
+              {slices.map((slice) => (
+                <SliceCard
+                  key={slice.uri}
+                  slice={slice}
+                />
+              ))}
+            </div>
+          )
+          : (
+            <div className="bg-white border border-zinc-200">
+              <EmptyState
+                icon={<FileText size={64} strokeWidth={1} />}
+                title="No slices yet"
+                description={isOwnProfile
+                  ? "Create your first slice to get started organizing your AT Protocol data."
+                  : "This user hasn't created any slices yet."}
               >
-                Create Your First Slice
-              </Button>
-            </EmptyState>
-          </div>
-        )}
+                {isOwnProfile && (
+                  <Button
+                    type="button"
+                    variant="primary"
+                    hx-get="/dialogs/create-slice"
+                    hx-target="body"
+                    hx-swap="beforeend"
+                  >
+                    Create Your First Slice
+                  </Button>
+                )}
+              </EmptyState>
+            </div>
+          )}
       </div>
     </Layout>
   );

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

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

frontend/src/features/docs/handlers.tsx

···
 
 // List of available docs
 const AVAILABLE_DOCS = [
-  { slug: "getting-started", title: "Getting Started", description: "Learn how to set up and use Slices" },
-  { slug: "concepts", title: "Core Concepts", description: "Understand slices, lexicons, and collections" },
-  { slug: "api-reference", title: "API Reference", description: "Complete endpoint documentation" },
-  { slug: "sdk-usage", title: "SDK Usage", description: "Advanced client patterns and examples" },
+  {
+    slug: "getting-started",
+    title: "Getting Started",
+    description: "Learn how to set up and use Slices",
+  },
+  {
+    slug: "concepts",
+    title: "Core Concepts",
+    description: "Understand slices, lexicons, and collections",
+  },
+  {
+    slug: "api-reference",
+    title: "API Reference",
+    description: "Complete endpoint documentation",
+  },
+  {
+    slug: "sdk-usage",
+    title: "SDK Usage",
+    description: "Advanced client patterns and examples",
+  },
 ];
 
 const DOCS_PATH = Deno.env.get("DOCS_PATH") || "../docs";
···
       });
 
       // Wrap in a container with proper styling
-      const styledCode = `<div class="my-4 [&_pre]:p-4 [&_pre]:rounded-md [&_pre]:overflow-x-auto [&_pre]:text-sm">${highlightedCode}</div>`;
+      const styledCode =
+        `<div class="my-4 [&_pre]:p-4 [&_pre]:rounded-md [&_pre]:overflow-x-auto [&_pre]:text-sm">${highlightedCode}</div>`;
 
       codeBlocks.push({
         placeholder,
···
     } catch (error) {
       // Fallback to simple code block if Shiki fails
       console.warn("Shiki highlighting failed:", error);
-      const fallback = `<pre class="bg-zinc-100 border border-zinc-200 rounded-md p-4 overflow-x-auto my-4"><code class="text-sm">${code.trim()}</code></pre>`;
+      const fallback =
+        `<pre class="bg-zinc-100 border border-zinc-200 rounded-md p-4 overflow-x-auto my-4"><code class="text-sm">${code.trim()}</code></pre>`;
       codeBlocks.push({
         placeholder,
         replacement: fallback,
···
   // Process other markdown elements
   html = html
     // Headers with inline code (process these first to handle backticks in headers)
-    .replace(/^#### `([^`]+)`$/gm, '<h4 class="text-base font-semibold text-zinc-900 mt-6 mb-3"><code class="bg-zinc-100 px-2 py-1 rounded text-sm font-mono font-normal">$1</code></h4>')
-    .replace(/^### `([^`]+)`$/gm, '<h3 class="text-lg font-semibold text-zinc-900 mt-8 mb-4"><code class="bg-zinc-100 px-2 py-1 rounded font-mono font-normal">$1</code></h3>')
-    .replace(/^## `([^`]+)`$/gm, '<h2 class="text-xl font-bold text-zinc-900 mt-10 mb-4"><code class="bg-zinc-100 px-2 py-1 rounded font-mono font-normal">$1</code></h2>')
+    .replace(
+      /^#### `([^`]+)`$/gm,
+      '<h4 class="text-base font-semibold text-zinc-900 mt-6 mb-3"><code class="bg-zinc-100 px-2 py-1 rounded text-sm font-mono font-normal">$1</code></h4>',
+    )
+    .replace(
+      /^### `([^`]+)`$/gm,
+      '<h3 class="text-lg font-semibold text-zinc-900 mt-8 mb-4"><code class="bg-zinc-100 px-2 py-1 rounded font-mono font-normal">$1</code></h3>',
+    )
+    .replace(
+      /^## `([^`]+)`$/gm,
+      '<h2 class="text-xl font-bold text-zinc-900 mt-10 mb-4"><code class="bg-zinc-100 px-2 py-1 rounded font-mono font-normal">$1</code></h2>',
+    )
     // Regular headers (without backticks)
-    .replace(/^#### (.*$)/gm, '<h4 class="text-base font-semibold text-zinc-900 mt-6 mb-3">$1</h4>')
-    .replace(/^### (.*$)/gm, '<h3 class="text-lg font-semibold text-zinc-900 mt-8 mb-4">$1</h3>')
-    .replace(/^## (.*$)/gm, '<h2 class="text-xl font-bold text-zinc-900 mt-10 mb-4">$1</h2>')
-    .replace(/^# (.*$)/gm, '<h1 class="text-2xl font-bold text-zinc-900 mt-10 mb-6">$1</h1>')
+    .replace(
+      /^#### (.*$)/gm,
+      '<h4 class="text-base font-semibold text-zinc-900 mt-6 mb-3">$1</h4>',
+    )
+    .replace(
+      /^### (.*$)/gm,
+      '<h3 class="text-lg font-semibold text-zinc-900 mt-8 mb-4">$1</h3>',
+    )
+    .replace(
+      /^## (.*$)/gm,
+      '<h2 class="text-xl font-bold text-zinc-900 mt-10 mb-4">$1</h2>',
+    )
+    .replace(
+      /^# (.*$)/gm,
+      '<h1 class="text-2xl font-bold text-zinc-900 mt-10 mb-6">$1</h1>',
+    )
     // Inline code (for non-header text)
-    .replace(/`([^`]+)`/g, '<code class="bg-zinc-100 px-1.5 py-0.5 rounded text-sm font-mono font-normal">$1</code>')
+    .replace(
+      /`([^`]+)`/g,
+      '<code class="bg-zinc-100 px-1.5 py-0.5 rounded text-sm font-mono font-normal">$1</code>',
+    )
     // Bold
     .replace(/\*\*(.*?)\*\*/g, '<strong class="font-semibold">$1</strong>')
     // Lists (handle both - and * syntax, process before italic to avoid conflicts)
-    .replace(/^[\-\*] (.*$)/gm, '<li class="mb-1" data-type="unordered">$1</li>')
+    .replace(
+      /^[\-\*] (.*$)/gm,
+      '<li class="mb-1" data-type="unordered">$1</li>',
+    )
     // Numbered lists
     .replace(/^\d+\. (.*$)/gm, '<li class="mb-1" data-type="ordered">$1</li>')
     // Italic (use word boundaries to avoid matching list items)
···
     // Links (convert .md links to docs routes)
     .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, url) => {
       // Convert relative .md links to docs routes
-      if (url.endsWith('.md') && !url.startsWith('http')) {
-        const slug = url.replace(/^\.\//, '').replace(/\.md$/, '');
+      if (url.endsWith(".md") && !url.startsWith("http")) {
+        const slug = url.replace(/^\.\//, "").replace(/\.md$/, "");
         return `<a href="/docs/${slug}" class="text-blue-600 hover:text-blue-800 underline">${text}</a>`;
       }
       return `<a href="${url}" class="text-blue-600 hover:text-blue-800 underline">${text}</a>`;
     });
 
   // Group consecutive list items into ul/ol elements
-  html = html.replace(/(<li[^>]*data-type="unordered"[^>]*>.*?<\/li>\s*)+/gs, (match) => {
-    const cleanedMatch = match.replace(/data-type="unordered"/g, '');
-    return `<ul class="list-disc list-inside my-4">${cleanedMatch}</ul>`;
-  });
+  html = html.replace(
+    /(<li[^>]*data-type="unordered"[^>]*>.*?<\/li>\s*)+/gs,
+    (match) => {
+      const cleanedMatch = match.replace(/data-type="unordered"/g, "");
+      return `<ul class="list-disc list-inside my-4">${cleanedMatch}</ul>`;
+    },
+  );
 
-  html = html.replace(/(<li[^>]*data-type="ordered"[^>]*>.*?<\/li>\s*)+/gs, (match) => {
-    const cleanedMatch = match.replace(/data-type="ordered"/g, '');
-    return `<ol class="list-decimal list-inside my-4">${cleanedMatch}</ol>`;
-  });
+  html = html.replace(
+    /(<li[^>]*data-type="ordered"[^>]*>.*?<\/li>\s*)+/gs,
+    (match) => {
+      const cleanedMatch = match.replace(/data-type="ordered"/g, "");
+      return `<ol class="list-decimal list-inside my-4">${cleanedMatch}</ol>`;
+    },
+  );
 
   // Process paragraphs
-  html = html.split('\n\n')
-    .map(paragraph => {
+  html = html.split("\n\n")
+    .map((paragraph) => {
       const trimmed = paragraph.trim();
-      if (!trimmed) return '';
-      if (trimmed.startsWith('<') || trimmed.startsWith('__CODE_BLOCK_')) return trimmed; // Already HTML or placeholder
+      if (!trimmed) return "";
+      if (trimmed.startsWith("<") || trimmed.startsWith("__CODE_BLOCK_")) {
+        return trimmed; // Already HTML or placeholder
+      }
       return `<p class="mb-4 leading-relaxed">${trimmed}</p>`;
     })
-    .join('\n');
+    .join("\n");
 
   // Finally, restore code blocks from placeholders
   for (const { placeholder, replacement } of codeBlocks) {
···
     <DocsIndexPage
       docs={AVAILABLE_DOCS}
       currentUser={currentUser}
-    />
+    />,
   );
 }
 
 async function handleDocsPage(request: Request): Promise<Response> {
   const { currentUser } = await withAuth(request);
   const url = new URL(request.url);
-  const slug = url.pathname.split('/')[2]; // /docs/{slug}
+  const slug = url.pathname.split("/")[2]; // /docs/{slug}
 
   if (!slug) {
     // Redirect to docs index
     return new Response(null, {
       status: 302,
-      headers: { Location: '/docs' }
+      headers: { Location: "/docs" },
     });
   }
 
   // Check if slug is valid
-  const docInfo = AVAILABLE_DOCS.find(doc => doc.slug === slug);
+  const docInfo = AVAILABLE_DOCS.find((doc) => doc.slug === slug);
   if (!docInfo) {
-    return new Response('Documentation page not found', { status: 404 });
+    return new Response("Documentation page not found", { status: 404 });
   }
 
   // Read markdown content
   const markdownContent = await readMarkdownFile(slug);
   if (!markdownContent) {
-    return new Response('Documentation content not found', { status: 404 });
+    return new Response("Documentation content not found", { status: 404 });
   }
 
   // Convert to HTML with Shiki syntax highlighting
···
       docs={AVAILABLE_DOCS}
       currentSlug={slug}
       currentUser={currentUser}
-    />
+    />,
   );
 }
 
···
     pattern: new URLPattern({ pathname: "/docs/:slug" }),
     handler: handleDocsPage,
   },
-];
+];

frontend/src/features/docs/templates/DocsIndexPage.tsx

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

frontend/src/features/docs/templates/DocsPage.tsx

···
   currentUser?: AuthenticatedUser;
 }
 
-export function DocsPage({ title, content, docs, currentSlug, currentUser }: DocsPageProps) {
+export function DocsPage(
+  { title, content, docs, currentSlug, currentUser }: DocsPageProps,
+) {
   return (
     <Layout title={`${title} - Slices`} currentUser={currentUser}>
       <div className="py-4 sm:py-8 px-4">
         {/* Mobile navigation dropdown */}
         <div className="sm:hidden mb-6">
-          <label htmlFor="docs-nav" className="block text-sm font-medium text-zinc-700 mb-2">
+          <label
+            htmlFor="docs-nav"
+            className="block text-sm font-medium text-zinc-700 mb-2"
+          >
             Navigate to
           </label>
           <select
···
             _="on change set window.location to `/docs/${me.value}`"
           >
             {docs.map((doc) => (
-              <option key={doc.slug} value={doc.slug} selected={doc.slug === currentSlug}>
+              <option
+                key={doc.slug}
+                value={doc.slug}
+                selected={doc.slug === currentSlug}
+              >
                 {doc.title}
               </option>
             ))}
···
       </div>
     </Layout>
   );
-}
+}

frontend/src/features/landing/handlers.tsx

···
 import { renderHTML } from "../../utils/render.tsx";
 import { withAuth } from "../../routes/middleware.ts";
 import { LandingPage } from "./templates/LandingPage.tsx";
+import { publicClient } from "../../config.ts";
+import { getTimeline } from "../../lib/api.ts";
 
 async function handleLandingPage(req: Request): Promise<Response> {
   const context = await withAuth(req);
-  
+
   // Check for waitlist success parameters
   const url = new URL(req.url);
   const waitlistSuccess = url.searchParams.get("waitlist") === "success";
   const handle = url.searchParams.get("handle");
-  
+
+  // Fetch timeline slices
+  const slices = await getTimeline(publicClient, 20);
+
   return renderHTML(
-    <LandingPage 
-      waitlistSuccess={waitlistSuccess} 
+    <LandingPage
+      waitlistSuccess={waitlistSuccess}
       handle={handle || undefined}
       currentUser={context.currentUser}
-    />, 
+      slices={slices}
+    />,
     {
       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.",
-    }
+    },
   );
 }
 

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

···
 import { Layout } from "../../../shared/fragments/Layout.tsx";
-import { Button } from "../../../shared/fragments/Button.tsx";
 import { WaitlistFormModal } from "./fragments/WaitlistFormModal.tsx";
 import { WaitlistSuccessModal } from "./fragments/WaitlistSuccessModal.tsx";
+import { SliceCard } from "../../../shared/fragments/SliceCard.tsx";
 import type { AuthenticatedUser } from "../../../routes/middleware.ts";
+import type { NetworkSlicesSliceDefsSliceView } from "../../../client.ts";
 
 interface LandingPageProps {
   waitlistSuccess?: boolean;
   handle?: string;
   currentUser?: AuthenticatedUser;
+  slices?: NetworkSlicesSliceDefsSliceView[];
 }
 
 export function LandingPage({
   waitlistSuccess,
   handle,
   currentUser,
+  slices = [],
 }: LandingPageProps = {}) {
   return (
     <Layout
···
           <h1 className="text-3xl font-bold text-zinc-900">Timeline</h1>
         </div>
 
-        <div className="flex justify-center items-center min-h-[60vh]">
-          <div className="text-center">
-            <p className="text-zinc-600 mb-6">
-              Join the waitlist for early access to Slices
-            </p>
-            <Button
-              type="button"
-              variant="primary"
-              _="on click call #waitlist-modal.showModal()"
-            >
-              Join the Waitlist
-            </Button>
-          </div>
-        </div>
+        {slices.length > 0
+          ? (
+            <div className="space-y-4">
+              {slices.map((slice) => (
+                <SliceCard
+                  key={slice.uri}
+                  slice={slice}
+                />
+              ))}
+            </div>
+          )
+          : (
+            <div className="flex justify-center items-center min-h-[60vh]">
+              <div className="text-center">
+                <p className="text-zinc-600 mb-6">
+                  No slices yet. Create your first slice to get started!
+                </p>
+                {!currentUser?.isAuthenticated && (
+                  <p className="text-zinc-500 text-sm">
+                    Join the waitlist for early access to Slices
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
 
         {/* Modals */}
         <WaitlistFormModal />
···
       </div>
     </Layout>
   );
-}
+}

frontend/src/features/landing/templates/fragments/WaitlistFormModal.tsx

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

frontend/src/features/landing/templates/fragments/WaitlistSuccessModal.tsx

···
   show?: boolean;
 }
 
-export function WaitlistSuccessModal({ handle, show }: WaitlistSuccessModalProps) {
+export function WaitlistSuccessModal(
+  { handle, show }: WaitlistSuccessModalProps,
+) {
   return (
     <dialog
       id="waitlist-success-modal"
···
           </h2>
           <p class="font-mono text-sm text-gray-600 mb-6">
             Thanks for joining,{" "}
-            <span class="font-bold">{handle || "there"}</span>!
-            We'll notify you when Slices is ready for you to try.
+            <span class="font-bold">{handle || "there"}</span>! We'll notify you
+            when Slices is ready for you to try.
           </p>
           <button
             type="button"
···
       </div>
     </dialog>
   );
-}
+}

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 { requireAuth, withAuth } from "../../routes/middleware.ts";
 import { atprotoClient } from "../../config.ts";
 import { buildAtUri } from "../../utils/at-uri.ts";
 import type { SocialSlicesActorProfile } from "../../client.ts";
···
 
   let profile:
     | {
-        displayName?: string;
-        description?: string;
-        avatar?: string;
-      }
+      displayName?: string;
+      description?: string;
+      avatar?: string;
+    }
     | undefined;
 
   try {
-    const profileRecord =
-      await atprotoClient.network.slices.actor.profile.getRecord({
+    const profileRecord = await atprotoClient.network.slices.actor.profile
+      .getRecord({
         uri: buildAtUri({
           did: context.currentUser.sub!,
           collection: "network.slices.actor.profile",
···
         displayName: profileRecord.value.displayName,
         description: profileRecord.value.description,
         avatar: profileRecord.value.avatar
-          ? recordBlobToCdnUrl(profileRecord, profileRecord.value.avatar, "avatar")
+          ? recordBlobToCdnUrl(
+            profileRecord,
+            profileRecord.value.avatar,
+            "avatar",
+          )
           : undefined,
       };
     }
···
       currentUser={context.currentUser}
       updated={updated === "true"}
       error={error}
-    />
+    />,
   );
 }
 
···
         throw new Error("User DID (sub) is required for profile operations");
       }
 
-      const existingProfile =
-        await atprotoClient.network.slices.actor.profile.getRecord({
+      const existingProfile = await atprotoClient.network.slices.actor.profile
+        .getRecord({
           uri: buildAtUri({
             did: context.currentUser.sub,
             collection: "network.slices.actor.profile",
···
         });
 
       if (existingProfile) {
-        await atprotoClient.network.slices.actor.profile.updateRecord("self", {
+        // Preserve existing avatar if no new avatar was uploaded
+        const updatedProfile = {
           ...profileData,
           createdAt: existingProfile.value.createdAt,
-        });
+        };
+
+        // Only update avatar if a new one was uploaded
+        if (!profileData.avatar) {
+          updatedProfile.avatar = existingProfile.value.avatar;
+        }
+
+        await atprotoClient.network.slices.actor.profile.updateRecord(
+          "self",
+          updatedProfile,
+        );
       } else {
         await atprotoClient.network.slices.actor.profile.createRecord(
           profileData,
-          true
+          true,
         );
       }
 

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

···
 
         {/* Flash Messages */}
         {updated && (
-          <FlashMessage 
-            type="success" 
-            message="Profile updated successfully!" 
+          <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."
-            }
+          <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."}
           />
         )}
 
···
       </div>
     </Layout>
   );
-}
+}

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

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

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

···
   message,
   showRefresh,
 }: SettingsResultProps) {
-  const bgColor =
-    type === "success"
-      ? "bg-green-50 border-green-200 text-green-700"
-      : "bg-red-50 border-red-200 text-red-700";
+  const bgColor = type === "success"
+    ? "bg-green-50 border-green-200 text-green-700"
+    : "bg-red-50 border-red-200 text-red-700";
   const icon = type === "success" ? "✅" : "❌";
 
   return (
···
       )}
     </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 { withSliceAccess, requireSliceAccess } from "../../../routes/slice-middleware.ts";
+import {
+  requireSliceAccess,
+  withSliceAccess,
+} from "../../../routes/slice-middleware.ts";
 import { extractSliceParams } from "../../../utils/slice-params.ts";
 import { atprotoClient } from "../../../config.ts";
 import { SliceApiDocsPage } from "./templates/SliceApiDocsPage.tsx";
 
 async function handleSliceApiDocsPage(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const authContext = await withAuth(req);
   const sliceParams = extractSliceParams(params);
···
     return Response.redirect(new URL("/", req.url), 302);
   }
 
-  const context = await withSliceAccess(authContext, sliceParams.handle, sliceParams.sliceId);
+  const context = await withSliceAccess(
+    authContext,
+    sliceParams.handle,
+    sliceParams.sliceId,
+  );
   const accessError = requireSliceAccess(context);
   if (accessError) return accessError;
 
···
       sliceId={sliceParams.sliceId}
       accessToken={accessToken}
       currentUser={authContext.currentUser}
-    />
+    />,
   );
 }
 
 export const apiDocsRoutes: Route[] = [
   {
     method: "GET",
-    pattern: new URLPattern({ pathname: "/profile/:handle/slice/:rkey/api-docs" }),
+    pattern: new URLPattern({
+      pathname: "/profile/:handle/slice/:rkey/api-docs",
+    }),
     handler: handleSliceApiDocsPage,
   },
 ];

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

···
 import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
 import type { NetworkSlicesSliceDefsSliceView } from "../../../../client.ts";
+import { buildSliceUrlFromView } from "../../../../utils/slice-params.ts";
 
 interface SliceApiDocsPageProps {
   slice: NetworkSlicesSliceDefsSliceView;
···
 
   // Build the slice URI
   const sliceUri = `at://${currentUser.sub}/network.slices.slice/${sliceId}`;
-  const openApiUrl = `${baseUrl}/xrpc/network.slices.slice.openapi?slice=${encodeURIComponent(
-    sliceUri
-  )}`;
+  const openApiUrl = `${baseUrl}/xrpc/network.slices.slice.openapi?slice=${
+    encodeURIComponent(
+      sliceUri,
+    )
+  }`;
 
   return (
     <html lang="en">
···
           <div class="max-w-7xl mx-auto flex items-center justify-between">
             <div class="flex items-center">
               <a
-                href={`/slices/${sliceId}`}
+                href={buildSliceUrlFromView(slice, sliceId)}
                 class="text-blue-600 hover:text-blue-800 mr-4 flex items-center"
               >
                 <svg
···
           <div id="scalar-api-reference" class="w-full min-h-screen">
             <div class="flex items-center justify-center h-96">
               <div class="text-center">
-                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
+                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4">
+                </div>
                 <p class="text-gray-500">Loading API documentation...</p>
               </div>
             </div>
···
         <script
           src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"
           async
-        ></script>
+        >
+        </script>
 
         {/* Initialize Scalar when the script loads */}
         <script
···
                       defaultParameters: {
                         slice: '${sliceUri}'
                       },${
-                        accessToken
-                          ? `
+              accessToken
+                ? `
                       authentication: {
                         preferredSecurityScheme: 'bearerAuth',
                         http: {
···
                           }
                         }
                       },`
-                          : ""
-                      }
+                : ""
+            }
                       customCss: \`
                         .scalar-api-reference {
                           width: 100% !important;

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

···
 import type { Route } from "@std/http/unstable-route";
-import { withAuth, requireAuth } from "../../../routes/middleware.ts";
+import { withAuth } from "../../../routes/middleware.ts";
 import { getSliceClient } from "../../../utils/client.ts";
-import { buildSliceUri } from "../../../utils/at-uri.ts";
 import { renderHTML } from "../../../utils/render.tsx";
-import { withSliceAccess, requireSliceAccess } from "../../../routes/slice-middleware.ts";
+import { withSliceAccess } from "../../../routes/slice-middleware.ts";
 import { extractSliceParams } from "../../../utils/slice-params.ts";
 import { SliceCodegenPage } from "./templates/SliceCodegenPage.tsx";
 import { CodegenResult } from "./templates/fragments/CodegenResult.tsx";
 
 async function handleSliceCodegenPage(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const authContext = await withAuth(req);
   const sliceParams = extractSliceParams(params);
···
     return Response.redirect(new URL("/", req.url), 302);
   }
 
-  const context = await withSliceAccess(authContext, sliceParams.handle, sliceParams.sliceId);
-  const accessError = requireSliceAccess(context);
-  if (accessError) return accessError;
+  const context = await withSliceAccess(
+    authContext,
+    sliceParams.handle,
+    sliceParams.sliceId,
+  );
+
+  // Check if slice exists (codegen page is public)
+  if (!context.sliceContext?.slice) {
+    return new Response("Slice not found", { status: 404 });
+  }
 
   return renderHTML(
     <SliceCodegenPage
       slice={context.sliceContext!.slice!}
       sliceId={sliceParams.sliceId}
       currentUser={authContext.currentUser}
-    />
+      hasSliceAccess={context.sliceContext?.hasAccess}
+    />,
   );
 }
 
 async function handleSliceCodegen(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
+  const authContext = await withAuth(req);
 
   const sliceId = params?.pathname.groups.id;
   if (!sliceId) {
···
     return renderHTML(component, { status: 400 });
   }
 
+  // Extract handle from form data
+  const formData = await req.formData();
+  const handle = formData.get("handle") as string;
+
+  if (!handle) {
+    const component = await CodegenResult({
+      success: false,
+      error: "Handle parameter required",
+    });
+    return renderHTML(component, { status: 400 });
+  }
+
+  const context = await withSliceAccess(
+    authContext,
+    handle,
+    sliceId,
+  );
+
+  // Check if slice exists (codegen is public)
+  if (!context.sliceContext?.slice) {
+    const component = await CodegenResult({
+      success: false,
+      error: "Slice not found",
+    });
+    return renderHTML(component, { status: 404 });
+  }
+
   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);
+    // Use the slice-specific client with owner DID
+    const sliceClient = getSliceClient(authContext, sliceId, context.sliceContext.profileDid);
 
     // Call the codegen XRPC endpoint
     const result = await sliceClient.network.slices.slice.codegen({
       target: target as string,
-      slice: sliceUri,
+      slice: context.sliceContext!.sliceUri,
     });
 
     const component = await CodegenResult({
···
 export const codegenRoutes: Route[] = [
   {
     method: "GET",
-    pattern: new URLPattern({ pathname: "/profile/:handle/slice/:rkey/codegen" }),
+    pattern: new URLPattern({
+      pathname: "/profile/:handle/slice/:rkey/codegen",
+    }),
     handler: handleSliceCodegenPage,
   },
   {

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

···
   slice: NetworkSlicesSliceDefsSliceView;
   sliceId: string;
   currentUser?: AuthenticatedUser;
+  hasSliceAccess?: boolean;
 }
 
 export function SliceCodegenPage({
   slice,
   sliceId,
   currentUser,
+  hasSliceAccess,
 }: SliceCodegenPageProps) {
   return (
     <SlicePage
···
       sliceId={sliceId}
       currentTab="codegen"
       currentUser={currentUser}
+      hasSliceAccess={hasSliceAccess}
       title={`${slice.name} - Code Generation`}
     >
-      <CodegenForm sliceId={sliceId} />
-      
+      <CodegenForm sliceId={sliceId} handle={slice.creator.handle} />
+
       <div className="bg-white border border-zinc-200">
         <div className="px-6 py-4 border-b border-zinc-200">
-          <h2 className="text-lg font-semibold text-zinc-900">Generated Client</h2>
+          <h2 className="text-lg font-semibold text-zinc-900">
+            Generated Client
+          </h2>
         </div>
         <div id="codegen-results">
           <div className="p-6 text-center text-zinc-500">
···
       </div>
     </SlicePage>
   );
-}
+}

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

···
 
 interface CodegenFormProps {
   sliceId: string;
+  handle: string;
 }
 
-export function CodegenForm({ sliceId }: CodegenFormProps) {
+export function CodegenForm({ sliceId, handle }: CodegenFormProps) {
   return (
     <div className="bg-white border border-zinc-200 p-6 mb-6">
       <h2 className="text-xl font-semibold text-zinc-900 mb-4">
···
         hx-on="htmx:afterRequest: if(event.detail.successful) document.getElementById('copy-button').style.display = 'block'"
         className="space-y-4"
       >
+        <input type="hidden" name="handle" value={handle} />
         <Select label="Output Format" name="format">
           <option value="typescript">TypeScript</option>
         </Select>
···
               data-lucide="loader-2"
               className="htmx-indicator animate-spin mr-2 h-4 w-4"
               _="on load js lucide.createIcons() end"
-            ></i>
+            >
+            </i>
             <span className="htmx-indicator">Generating Client...</span>
             <span className="default-text">Generate Client</span>
           </Button>
-          
+
           <Button
             type="button"
             variant="success"
···
       </form>
     </div>
   );
-}
+}

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

···
   if (success && generatedCode) {
     const highlightedCode = await codeToHtml(generatedCode, {
       lang: "typescript",
-      theme: "catppuccin-latte",
+      theme: "tokyo-night",
     });
 
     return (

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

···
 import type { Route } from "@std/http/unstable-route";
-import { withAuth, requireAuth } from "../../../routes/middleware.ts";
-import { withSliceAccess, requireSliceAccess } from "../../../routes/slice-middleware.ts";
+import { requireAuth, withAuth } from "../../../routes/middleware.ts";
+import {
+  requireSliceAccess,
+  withSliceAccess,
+} from "../../../routes/slice-middleware.ts";
 import { getSliceClient } from "../../../utils/client.ts";
 import { atprotoClient } from "../../../config.ts";
 import { renderHTML } from "../../../utils/render.tsx";
···
 
 async function handleJetstreamLogs(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const context = await withAuth(req);
   const authResponse = requireAuth(context);
···
   if (!sliceId) {
     return renderHTML(
       <div className="p-8 text-center text-red-600">❌ Invalid slice ID</div>,
-      { status: 400 }
+      { status: 400 },
     );
   }
 
···
     // Sort logs in descending order (newest first)
     const sortedLogs = logs.sort(
       (a, b) =>
-        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
     );
 
     // Render the log content
···
           </div>
         </div>
       </Layout>,
-      { status: 500 }
+      { status: 500 },
     );
   }
 }
 
 async function handleJetstreamStatus(
   req: Request,
-  _params?: URLPatternResult
+  _params?: URLPatternResult,
 ): Promise<Response> {
   try {
     // Extract parameters from query
···
     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>
+          {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>,
       );
     }
 
···
         status={data.status}
         error={data.error}
         jetstreamUrl={jetstreamUrl}
-      />
+      />,
     );
   } catch (error) {
     // Extract parameters for error case too
···
         <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>
+        </div>,
       );
     }
 
···
         status="Connection error"
         error={error instanceof Error ? error.message : "Unknown error"}
         jetstreamUrl={jetstreamUrl}
-      />
+      />,
     );
   }
 }
 
 async function handleJetstreamLogsPage(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const authContext = await withAuth(req);
   const sliceParams = extractSliceParams(params);
···
     return Response.redirect(new URL("/", req.url), 302);
   }
 
-  const context = await withSliceAccess(authContext, sliceParams.handle, sliceParams.sliceId);
+  const context = await withSliceAccess(
+    authContext,
+    sliceParams.handle,
+    sliceParams.sliceId,
+  );
   const accessError = requireSliceAccess(context);
   if (accessError) return accessError;
 
···
     });
     logs = logsResult.logs.sort(
       (a, b) =>
-        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
     );
   } catch (error) {
     console.error("Failed to fetch Jetstream logs:", error);
···
       logs={logs}
       sliceId={sliceParams.sliceId}
       currentUser={authContext.currentUser}
-    />
+    />,
   );
 }
 
 export const jetstreamRoutes: Route[] = [
   {
     method: "GET",
-    pattern: new URLPattern({ pathname: "/profile/:handle/slice/:rkey/jetstream" }),
+    pattern: new URLPattern({
+      pathname: "/profile/:handle/slice/:rkey/jetstream",
+    }),
     handler: handleJetstreamLogsPage,
   },
   {

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

···
-import type { LogEntry, NetworkSlicesSliceDefsSliceView } from "../../../../client.ts";
+import type {
+  LogEntry,
+  NetworkSlicesSliceDefsSliceView,
+} from "../../../../client.ts";
 import { SliceLogPage } from "../../shared/fragments/SliceLogPage.tsx";
 import { JetstreamLogs } from "./fragments/JetstreamLogs.tsx";
 import { JetstreamStatusCompact } from "./fragments/JetstreamStatusCompact.tsx";
···
       title="Jetstream Logs"
       headerActions={<JetstreamStatusCompact sliceId={sliceId} />}
     >
-      <div 
+      <div
         className="bg-white border border-zinc-200"
         hx-get={`/api/slices/${sliceId}/jetstream/logs`}
         hx-trigger="load, every 20s"
···
       </div>
     </SliceLogPage>
   );
-}
+}

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

···
 
 export function JetstreamLogs({ logs }: JetstreamLogsProps) {
   return (
-    <LogViewer 
-      logs={logs} 
+    <LogViewer
+      logs={logs}
       emptyMessage="No Jetstream logs available for this slice."
       formatTimestamp={formatTimestamp}
     />
   );
-}
+}

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

···
       <div className="bg-green-50 border border-green-200 p-4 mb-6">
         <div className="flex items-center justify-between">
           <div className="flex items-center">
-            <div className="w-3 h-3 bg-green-500 rounded-full mr-3 animate-pulse"></div>
+            <div className="w-3 h-3 bg-green-500 rounded-full mr-3 animate-pulse">
+            </div>
             <div>
               <h3 className="text-sm font-semibold text-green-800">
                 ✈️ Jetstream Connected
···
       </div>
     );
   }
-}
+}

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

···
       <span className="text-zinc-500">Checking status...</span>
     </div>
   );
-}
+}

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 { requireAuth, withAuth } from "../../../routes/middleware.ts";
 import { getSliceClient } from "../../../utils/client.ts";
-import { buildSliceUri, buildAtUri } from "../../../utils/at-uri.ts";
+import { buildAtUri, buildSliceUri } from "../../../utils/at-uri.ts";
 import { atprotoClient } from "../../../config.ts";
 import {
+  requireSliceAccess,
   withSliceAccess,
-  requireSliceAccess,
 } from "../../../routes/slice-middleware.ts";
 import { extractSliceParams } from "../../../utils/slice-params.ts";
 import { SliceLexiconPage } from "./templates/SliceLexiconPage.tsx";
···
 import { LexiconSuccessMessage } from "./templates/fragments/LexiconSuccessMessage.tsx";
 import { LexiconErrorMessage } from "./templates/fragments/LexiconErrorMessage.tsx";
 import { LexiconsList } from "./templates/fragments/LexiconsList.tsx";
+import { LexiconFormModal } from "./templates/fragments/LexiconFormModal.tsx";
 import { FileCode } from "lucide-preact";
+import { buildSliceUrl } from "../../../utils/slice-params.ts";
 
 async function handleListLexicons(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
-  if (authResponse) return authResponse;
+  const authContext = await withAuth(req);
 
   const sliceId = params?.pathname.groups.id;
   if (!sliceId) {
···
   const url = new URL(req.url);
   const handle = url.searchParams.get("handle");
 
+  if (!handle) {
+    return new Response("Handle parameter required", { status: 400 });
+  }
+
+  const context = await withSliceAccess(
+    authContext,
+    handle,
+    sliceId,
+  );
+
+  // Check if slice exists (lexicons list is public)
+  if (!context.sliceContext?.slice) {
+    return new Response("Slice not found", { status: 404 });
+  }
+
   try {
-    const sliceClient = getSliceClient(context, sliceId);
-    const lexiconRecords =
-      await sliceClient.network.slices.lexicon.getRecords();
+    const sliceClient = getSliceClient(authContext, sliceId, context.sliceContext.profileDid);
+    const lexiconRecords = await sliceClient.network.slices.lexicon
+      .getRecords();
 
     if (lexiconRecords.records.length === 0) {
+      const isOwner = context.sliceContext?.hasAccess;
       return renderHTML(
         <EmptyState
           icon={<FileCode size={64} strokeWidth={1} />}
-          title="No lexicons uploaded"
-          description="Upload lexicon definitions to define custom schemas for this slice."
+          title={isOwner ? "No lexicons uploaded" : "No lexicons defined"}
+          description={isOwner
+            ? "Upload lexicon definitions to define custom schemas for this slice."
+            : "This slice hasn't defined any lexicon schemas yet."
+          }
           withPadding
-        />
+        />,
       );
     }
 
+    // Get slice info for domain comparison
+    const sliceDomain = context.sliceContext!.slice!.domain;
+
     return renderHTML(
       <LexiconsList
         records={lexiconRecords.records}
         sliceId={sliceId}
         handle={handle || undefined}
-      />
+        sliceDomain={sliceDomain}
+        hasSliceAccess={context.sliceContext?.hasAccess}
+      />,
     );
   } catch (error) {
     console.error("Failed to fetch lexicons:", error);
···
       <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 }
+      { status: 500 },
     );
   }
 }
···
     if (!lexiconJson || lexiconJson.trim().length === 0) {
       return renderHTML(
         <LexiconErrorMessage error="Lexicon JSON is required" />,
-        { status: 400 }
       );
     }
 
···
       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')" />
+        <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" />
+        <LexiconErrorMessage error="Lexicon must have a 'defs' field containing the schema definitions" />,
       );
     }
 
···
       };
 
       const sliceClient = getSliceClient(context, sliceId);
-      const result = await sliceClient.network.slices.lexicon.createRecord(
-        lexiconRecord
+      await sliceClient.network.slices.lexicon.createRecord(
+        lexiconRecord,
       );
 
-      return renderHTML(
-        <LexiconSuccessMessage
-          nsid={lexiconRecord.nsid}
-          uri={result.uri}
-          sliceId={sliceId}
-        />
-      );
+      // Get the user's handle for the redirect
+      const handle = context.currentUser?.handle;
+      if (!handle) {
+        throw new Error("Unable to determine user handle");
+      }
+
+      // Redirect to the lexicons page using the utility
+      const redirectUrl = buildSliceUrl(handle, sliceId, "lexicon");
+      return new Response("", {
+        status: 200,
+        headers: {
+          "HX-Redirect": redirectUrl,
+        },
+      });
     } catch (createError) {
       let errorMessage = `Failed to create lexicon: ${createError}`;
 
···
   } catch (error) {
     return renderHTML(
       <LexiconErrorMessage error={`Server error: ${error}`} />,
-      { status: 500 }
     );
   }
 }
 
 async function handleViewLexicon(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const authContext = await withAuth(req);
   const sliceParams = extractSliceParams(params);
···
   const context = await withSliceAccess(
     authContext,
     sliceParams.handle,
-    sliceParams.sliceId
+    sliceParams.sliceId,
   );
-  const accessError = requireSliceAccess(context);
-  if (accessError) return accessError;
+
+  // Check if slice exists (lexicon detail page is public)
+  if (!context.sliceContext?.slice) {
+    return new Response("Slice not found", { status: 404 });
+  }
 
   try {
-    const sliceClient = getSliceClient(authContext, sliceParams.sliceId);
+    const sliceClient = getSliceClient(authContext, sliceParams.sliceId, context.sliceContext.profileDid);
 
-    const lexiconRecords =
-      await sliceClient.network.slices.lexicon.getRecords();
+    const lexiconRecords = await sliceClient.network.slices.lexicon
+      .getRecords();
 
     const lexicon = lexiconRecords.records.find((record) =>
       record.uri.endsWith(`/${lexiconRkey}`)
···
     }
 
     return renderHTML(
-      <LexiconDetailPage
-        slice={context.sliceContext!.slice!}
-        sliceId={sliceParams.sliceId}
-        nsid={lexicon.value.nsid}
-        definitions={lexicon.value.definitions}
-        uri={lexicon.uri}
-        createdAt={lexicon.value.createdAt}
-        currentUser={authContext.currentUser}
-      />
+      await LexiconDetailPage({
+        slice: context.sliceContext!.slice!,
+        sliceId: sliceParams.sliceId,
+        nsid: lexicon.value.nsid,
+        definitions: lexicon.value.definitions,
+        uri: lexicon.uri,
+        createdAt: lexicon.value.createdAt,
+        currentUser: authContext.currentUser,
+        hasSliceAccess: context.sliceContext?.hasAccess,
+      }),
     );
   } catch (error) {
     console.error("Error viewing lexicon:", error);
···
 
 async function handleDeleteLexicon(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const context = await withAuth(req);
   const authResponse = requireAuth(context);
···
     const sliceClient = getSliceClient(context, sliceId);
     await sliceClient.network.slices.lexicon.deleteRecord(rkey);
 
-    const remainingLexicons =
-      await sliceClient.network.slices.lexicon.getRecords();
+    const remainingLexicons = await sliceClient.network.slices.lexicon
+      .getRecords();
 
     if (remainingLexicons.records.length === 0) {
       return renderHTML(
···
           headers: {
             "HX-Retarget": "#lexicon-list",
           },
-        }
+        },
       );
     } else {
       return new Response("", {
···
       <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 }
+      { status: 500 },
     );
   }
 }
 
 async function handleToggleAllLexicons(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const context = await withAuth(req);
   const authResponse = requireAuth(context);
···
 
   try {
     const sliceClient = getSliceClient(context, sliceId);
-    const lexiconRecords =
-      await sliceClient.network.slices.lexicon.getRecords();
+    const lexiconRecords = await sliceClient.network.slices.lexicon
+      .getRecords();
 
     if (lexiconRecords.records.length === 0) {
       return renderHTML(
···
           title="No lexicons uploaded"
           description="Upload lexicon definitions to define custom schemas for this slice."
           withPadding
-        />
+        />,
       );
     }
 
+    // Get slice info for domain comparison
+    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
+    const sliceResponse = await sliceClient.network.slices.slice.getRecord({
+      uri: sliceUri,
+    });
+    const sliceDomain = sliceResponse.value.domain;
+
     return renderHTML(
       <LexiconsList
         records={lexiconRecords.records}
         sliceId={sliceId}
         handle={handle || undefined}
-      />
+        sliceDomain={sliceDomain}
+        hasSliceAccess
+      />,
     );
   } catch (error) {
     console.error("Failed to toggle lexicons:", error);
···
       <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 }
+      { status: 500 },
     );
   }
 }
 
 async function handleBulkDeleteLexicons(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const context = await withAuth(req);
   const authResponse = requireAuth(context);
···
     }
 
     // Get remaining lexicons
-    const remainingLexicons =
-      await sliceClient.network.slices.lexicon.getRecords();
+    const remainingLexicons = await sliceClient.network.slices.lexicon
+      .getRecords();
 
     if (remainingLexicons.records.length === 0) {
       return renderHTML(
···
           title="No lexicons uploaded"
           description="Upload lexicon definitions to define custom schemas for this slice."
           withPadding
-        />
+        />,
       );
     } else {
+      // Get slice info for domain comparison
+      const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
+      const sliceResponse = await sliceClient.network.slices.slice.getRecord({
+        uri: sliceUri,
+      });
+      const sliceDomain = sliceResponse.value.domain;
+
       return renderHTML(
         <LexiconsList
           records={remainingLexicons.records}
           sliceId={sliceId}
           handle={handle || undefined}
-        />
+          sliceDomain={sliceDomain}
+          hasSliceAccess
+        />,
       );
     }
   } catch (error) {
···
       <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
         <p>Failed to delete lexicons: {error}</p>
       </div>,
-      { status: 500 }
+      { status: 500 },
     );
   }
 }
 
 async function handleSliceLexiconPage(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const authContext = await withAuth(req);
   const sliceParams = extractSliceParams(params);
···
   const context = await withSliceAccess(
     authContext,
     sliceParams.handle,
-    sliceParams.sliceId
+    sliceParams.sliceId,
   );
-  const accessError = requireSliceAccess(context);
-  if (accessError) return accessError;
+
+  // Check if slice exists (lexicons page is public)
+  if (!context.sliceContext?.slice) {
+    return new Response("Slice not found", { status: 404 });
+  }
 
   return renderHTML(
     <SliceLexiconPage
       slice={context.sliceContext!.slice!}
       sliceId={sliceParams.sliceId}
       currentUser={authContext.currentUser}
-    />
+      hasSliceAccess={context.sliceContext?.hasAccess}
+    />,
   );
 }
 
+async function handleShowLexiconModal(
+  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 });
+  }
+
+  return renderHTML(<LexiconFormModal sliceId={sliceId} />);
+}
+
 export const lexiconRoutes: Route[] = [
   {
     method: "GET",
···
     method: "GET",
     pattern: new URLPattern({ pathname: "/api/slices/:id/lexicons/list" }),
     handler: handleListLexicons,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/lexicons/modal" }),
+    handler: handleShowLexiconModal,
   },
   {
     method: "POST",

frontend/src/features/slices/lexicon/templates/LexiconDetailPage.tsx

···
 import { Layout } from "../../../../shared/fragments/Layout.tsx";
 import { Breadcrumb } from "../../../../shared/fragments/Breadcrumb.tsx";
 import { PageHeader } from "../../../../shared/fragments/PageHeader.tsx";
+import { Button } from "../../../../shared/fragments/Button.tsx";
+import { Copy } from "lucide-preact";
 import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
 import type { NetworkSlicesSliceDefsSliceView } from "../../../../client.ts";
 import { buildSliceUrlFromView } from "../../../../utils/slice-params.ts";
+import { codeToHtml } from "jsr:@shikijs/shiki";
 
 interface LexiconDetailPageProps {
   slice: NetworkSlicesSliceDefsSliceView;
···
   uri: string;
   createdAt: string;
   currentUser?: AuthenticatedUser;
+  hasSliceAccess?: boolean;
 }
 
-export function LexiconDetailPage({
+export async function LexiconDetailPage({
   slice,
   sliceId,
   nsid,
   definitions,
   currentUser,
+  hasSliceAccess,
 }: LexiconDetailPageProps) {
   let parsedDefinitions;
   try {
···
     parsedDefinitions = definitions;
   }
 
+  // Build the complete lexicon object
+  const completeLexicon = {
+    lexicon: 1,
+    id: nsid,
+    defs: parsedDefinitions,
+  };
+
+  // Generate syntax highlighted HTML
+  const lexiconJson = JSON.stringify(completeLexicon, null, 2);
+  const highlightedCode = await codeToHtml(lexiconJson, {
+    lang: "json",
+    theme: "tokyo-night",
+  });
+
   return (
     <Layout title={`${nsid} - ${slice.name}`} currentUser={currentUser}>
       <div className="max-w-6xl mx-auto px-4 py-8">
···
           label="Back to Lexicons"
         />
 
-        <PageHeader title={nsid} />
+        <div className="flex items-center justify-between mb-6">
+          <h1 className="text-3xl font-bold text-zinc-900">{nsid}</h1>
+          <Button
+            variant="secondary"
+            onClick={`navigator.clipboard.writeText(${
+              JSON.stringify(lexiconJson)
+            })`}
+          >
+            <span className="flex items-center gap-2">
+              <Copy size={16} />
+              Copy JSON
+            </span>
+          </Button>
+        </div>
 
         <div className="bg-white border border-zinc-200">
           <div className="px-6 py-4 border-b border-zinc-200">
···
             </h2>
           </div>
 
-          <div className="bg-zinc-50 p-4 overflow-auto">
-            <pre className="text-sm font-mono whitespace-pre-wrap">
-              {JSON.stringify(parsedDefinitions, null, 2)}
-            </pre>
-          </div>
+          <div
+            className="text-sm overflow-x-auto [&_pre]:p-4"
+            dangerouslySetInnerHTML={{ __html: highlightedCode }}
+          />
         </div>
       </div>
     </Layout>

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

···
 import { SlicePage } from "../../shared/fragments/SlicePage.tsx";
 import { EmptyState } from "../../../../shared/fragments/EmptyState.tsx";
 import { Button } from "../../../../shared/fragments/Button.tsx";
-import { Textarea } from "../../../../shared/fragments/Textarea.tsx";
-import { FileCode } from "lucide-preact";
+import { FileCode, Plus } from "lucide-preact";
 import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
 import type { NetworkSlicesSliceDefsSliceView } from "../../../../client.ts";
 
···
   slice: NetworkSlicesSliceDefsSliceView;
   sliceId: string;
   currentUser?: AuthenticatedUser;
+  hasSliceAccess?: boolean;
 }
 
 export function SliceLexiconPage({
   slice,
   sliceId,
   currentUser,
+  hasSliceAccess,
 }: SliceLexiconPageProps) {
   return (
     <SlicePage
···
       sliceId={sliceId}
       currentTab="lexicon"
       currentUser={currentUser}
+      hasSliceAccess={hasSliceAccess}
       title={`${slice.name} - Lexicons`}
     >
-
-        <div className="bg-white border border-zinc-200 p-6 mb-6">
-          <h2 className="text-xl font-semibold text-zinc-900 mb-4">
-            Add Lexicon Definition
+      <div className="bg-white border border-zinc-200">
+        <div className="px-6 py-4 border-b border-zinc-200 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-zinc-900">
+            Slice Lexicons
           </h2>
-          <p className="text-zinc-600 mb-6">
-            Paste lexicon JSON to define custom record types for this slice.
-          </p>
-
-          <form
-            hx-post={`/api/slices/${sliceId}/lexicons`}
-            hx-target="#lexicon-result"
-            hx-swap="innerHTML"
-            hx-on="htmx:afterRequest: if(event.detail.successful) this.reset()"
-            className="space-y-4"
-          >
-            <div>
-              <Textarea
-                label="Lexicon JSON"
-                name="lexicon_json"
-                rows={12}
-                class="font-mono text-sm"
-                placeholder={`{
-  "lexicon": 1,
-  "id": "network.slices.example",
-  "description": "Example record type",
-  "defs": {
-    "main": {
-      "type": "record",
-      "key": "tid",
-      "record": {
-        "type": "object",
-        "required": ["text", "createdAt"],
-        "properties": {
-          "text": {
-            "type": "string",
-            "maxLength": 300
-          },
-          "createdAt": {
-            "type": "string",
-            "format": "datetime"
-          }
-        }
-      }
-    }
-  }
-}`}
-                required
-              />
-              <p className="text-sm text-zinc-500 mt-1">
-                Paste a valid AT Protocol lexicon definition in JSON format
-              </p>
-            </div>
-
-            <Button 
-              type="submit" 
+          {hasSliceAccess && (
+            <Button
               variant="purple"
-              hx-indicator="#lexicon-loading"
+              hx-get={`/api/slices/${sliceId}/lexicons/modal`}
+              hx-target="#modal-container"
+              hx-swap="innerHTML"
             >
-              <span id="lexicon-loading" class="htmx-indicator">Adding...</span>
-              <span class="default-text">Add Lexicon</span>
+              <span className="flex items-center">
+                <Plus size={16} className="mr-1" />
+                Add Lexicon
+              </span>
             </Button>
-          </form>
-
-          <div id="lexicon-result" className="mt-4"></div>
+          )}
+        </div>
+        <div
+          id="lexicon-list"
+          hx-get={`/api/slices/${sliceId}/lexicons/list?handle=${slice.creator?.handle}`}
+          hx-trigger="load, refresh-lexicons from:body"
+        >
+          <EmptyState
+            icon={<FileCode size={64} strokeWidth={1} />}
+            title="No lexicons uploaded"
+            description="Upload lexicon definitions to define custom schemas for this slice."
+            withPadding
+          />
         </div>
+      </div>
 
-        <div className="bg-white border border-zinc-200">
-          <div className="px-6 py-4 border-b border-zinc-200">
-            <h2 className="text-lg font-semibold text-zinc-900">
-              Slice Lexicons
-            </h2>
-          </div>
-          <div
-            id="lexicon-list"
-            hx-get={`/api/slices/${sliceId}/lexicons/list?handle=${slice.creator?.handle}`}
-            hx-trigger="load"
-          >
-            <EmptyState
-              icon={<FileCode size={64} strokeWidth={1} />}
-              title="No lexicons uploaded"
-              description="Upload lexicon definitions to define custom schemas for this slice."
-              withPadding
-            />
-          </div>
-        </div>
+      <div id="modal-container"></div>
     </SlicePage>
   );
 }

frontend/src/features/slices/lexicon/templates/fragments/LexiconErrorMessage.tsx

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

frontend/src/features/slices/lexicon/templates/fragments/LexiconFormModal.tsx

···
+import { Button } from "../../../../../shared/fragments/Button.tsx";
+import { Textarea } from "../../../../../shared/fragments/Textarea.tsx";
+import { Modal } from "../../../../../shared/fragments/Modal.tsx";
+
+interface LexiconFormModalProps {
+  sliceId: string;
+}
+
+export function LexiconFormModal({ sliceId }: LexiconFormModalProps) {
+  return (
+    <Modal
+      title="Add Lexicon Definition"
+      description="Paste lexicon JSON to define custom record types for this slice."
+    >
+      <form
+        hx-post={`/api/slices/${sliceId}/lexicons`}
+        hx-target="#lexicon-result"
+        hx-swap="innerHTML"
+      >
+        <div className="space-y-4">
+          <div>
+            <Textarea
+              label="Lexicon JSON"
+              name="lexicon_json"
+              rows={16}
+              class="font-mono text-sm"
+              placeholder={`{
+  "lexicon": 1,
+  "id": "network.slices.example",
+  "description": "Example record type",
+  "defs": {
+    "main": {
+      "type": "record",
+      "key": "tid",
+      "record": {
+        "type": "object",
+        "required": ["text", "createdAt"],
+        "properties": {
+          "text": {
+            "type": "string",
+            "maxLength": 300
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
+        }
+      }
+    }
+  }
+}`}
+              required
+            />
+            <p className="text-sm text-zinc-500 mt-1">
+              Paste a valid AT Protocol lexicon definition in JSON format
+            </p>
+          </div>
+
+          <div id="lexicon-result"></div>
+
+          <div className="flex justify-end gap-3">
+            <Button
+              type="button"
+              variant="secondary"
+              _="on click set #modal-container's innerHTML to ''"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              variant="purple"
+              hx-indicator="#lexicon-loading"
+            >
+              <span id="lexicon-loading" class="htmx-indicator">Adding...</span>
+              <span class="default-text">Add Lexicon</span>
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Modal>
+  );
+}

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

···
 import { getRkeyFromUri } from "../../../../../utils/at-uri.ts";
 import { ChevronRight } from "lucide-preact";
 import { buildSliceUrl } from "../../../../../utils/slice-params.ts";
+import { cn } from "../../../../../utils/cn.ts";
 
 export function LexiconListItem({
   nsid,
   uri,
   sliceId,
   handle,
+  isPrimary,
+  hasSliceAccess,
 }: {
   nsid: string;
   uri: string;
   sliceId: string;
   handle?: string;
+  isPrimary?: boolean;
+  hasSliceAccess?: boolean;
 }) {
   const rkey = getRkeyFromUri(uri);
 
   return (
-    <div className="flex items-center hover:bg-zinc-50 transition-colors" id={`lexicon-${rkey}`}>
-      <div className="px-6 py-4">
-        <input
-          type="checkbox"
-          name="lexicon_rkey"
-          value={rkey}
-        />
-      </div>
+    <div
+      className="flex items-center hover:bg-zinc-50 transition-colors"
+      id={`lexicon-${rkey}`}
+    >
+      {hasSliceAccess && (
+        <div className="px-6 py-4">
+          <input
+            type="checkbox"
+            name="lexicon_rkey"
+            value={rkey}
+          />
+        </div>
+      )}
       <a
-        href={handle ? buildSliceUrl(handle, sliceId, `lexicons/${rkey}`) : `/slices/${sliceId}/lexicons/${rkey}`}
-        className="flex-1 block pr-6 py-4"
+        href={handle
+          ? buildSliceUrl(handle, sliceId, `lexicons/${rkey}`)
+          : `/slices/${sliceId}/lexicons/${rkey}`}
+        className={cn("flex-1 block pr-6 py-4", !hasSliceAccess && "pl-6")}
       >
         <div className="flex justify-between items-center">
           <div>
-            <h3 className="text-lg font-medium text-zinc-900">
-              {nsid}
-            </h3>
+            <div className="flex items-center gap-2">
+              <h3 className="text-lg font-medium text-zinc-900">
+                {nsid}
+              </h3>
+              {isPrimary !== undefined && (
+                <span
+                  className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
+                    isPrimary
+                      ? "bg-green-100 text-green-800"
+                      : "bg-blue-100 text-blue-800"
+                  }`}
+                >
+                  {isPrimary ? "Primary" : "External"}
+                </span>
+              )}
+            </div>
           </div>
           <div className="text-zinc-400">
             <ChevronRight size={20} />
···
       </a>
     </div>
   );
-}
+}

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

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

frontend/src/features/slices/lexicon/templates/fragments/LexiconsList.tsx

···
   records: LexiconRecord[];
   sliceId: string;
   handle?: string;
+  sliceDomain?: string;
+  hasSliceAccess?: boolean;
+}
+
+function organizeLexicons(records: LexiconRecord[], sliceDomain?: string) {
+  const primaryLexicons: LexiconRecord[] = [];
+  const externalLexicons: LexiconRecord[] = [];
+
+  records.forEach((record) => {
+    if (sliceDomain && record.value.nsid.startsWith(sliceDomain)) {
+      primaryLexicons.push(record);
+    } else {
+      externalLexicons.push(record);
+    }
+  });
+
+  return { primaryLexicons, externalLexicons };
 }
 
-export function LexiconsList({ records, sliceId, handle }: LexiconsListProps) {
+export function LexiconsList(
+  { records, sliceId, handle, sliceDomain, hasSliceAccess }: LexiconsListProps,
+) {
+  const { primaryLexicons, externalLexicons } = organizeLexicons(
+    records,
+    sliceDomain,
+  );
+
   return (
     <div>
-      {/* Bulk actions bar */}
-      <div className="px-6 py-3 border-b border-zinc-200 flex items-center justify-between">
-        <div className="flex items-center">
-          <input
-            type="checkbox"
-            id="select-all"
-            className="mr-3"
-            _="on change 
-              set checkboxes to document.querySelectorAll('input[name=lexicon_rkey]')
-              for cb in checkboxes
-                set cb.checked to my.checked
-              end
-            "
-          />
-          <label htmlFor="select-all" className="text-sm font-medium text-zinc-700">
-            Select All
-          </label>
+      {/* Bulk actions bar - only show for slice owners */}
+      {hasSliceAccess && (
+        <div className="px-6 py-3 border-b border-zinc-200 flex items-center justify-between">
+          <div className="flex items-center">
+            <input
+              type="checkbox"
+              id="select-all"
+              className="mr-3"
+              _="on change
+                set checkboxes to document.querySelectorAll('input[name=lexicon_rkey]')
+                for cb in checkboxes
+                  set cb.checked to my.checked
+                end
+              "
+            />
+            <label
+              htmlFor="select-all"
+              className="text-sm font-medium text-zinc-700"
+            >
+              Select All
+            </label>
+          </div>
+          <button
+            type="button"
+            className="inline-flex items-center px-3 py-1.5 border border-zinc-300 text-xs font-medium rounded text-zinc-700 bg-white hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+            hx-delete={`/api/slices/${sliceId}/lexicons/bulk`}
+            hx-target="#lexicon-list"
+            hx-swap="outerHTML"
+            hx-include="input[name='lexicon_rkey']:checked"
+            hx-confirm="Are you sure you want to delete the selected lexicons?"
+          >
+            <Trash2 size={14} className="mr-1" /> Delete Selected
+          </button>
         </div>
-        <button
-          type="button"
-          className="inline-flex items-center px-3 py-1.5 border border-zinc-300 text-xs font-medium rounded text-zinc-700 bg-white hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
-          hx-delete={`/api/slices/${sliceId}/lexicons/bulk`}
-          hx-target="#lexicon-list"
-          hx-swap="outerHTML"
-          hx-include="input[name='lexicon_rkey']:checked"
-          hx-confirm="Are you sure you want to delete the selected lexicons?"
-        >
-          <Trash2 size={14} className="mr-1" /> Delete Selected
-        </button>
-      </div>
+      )}
 
       {/* List of lexicons */}
       <div id="lexicon-list" className="divide-y divide-zinc-200">
-        {records.map((record) => (
-          <LexiconListItem
-            key={record.uri}
-            nsid={record.value.nsid}
-            uri={record.uri}
-            sliceId={sliceId}
-            handle={handle}
-          />
-        ))}
+        {primaryLexicons.length > 0 && (
+          <>
+            {primaryLexicons.map((record) => (
+              <LexiconListItem
+                key={record.uri}
+                nsid={record.value.nsid}
+                uri={record.uri}
+                sliceId={sliceId}
+                handle={handle}
+                isPrimary
+                hasSliceAccess={hasSliceAccess}
+              />
+            ))}
+          </>
+        )}
+        {externalLexicons.length > 0 && (
+          <>
+            {externalLexicons.map((record) => (
+              <LexiconListItem
+                key={record.uri}
+                nsid={record.value.nsid}
+                uri={record.uri}
+                sliceId={sliceId}
+                handle={handle}
+                isPrimary={false}
+                hasSliceAccess={hasSliceAccess}
+              />
+            ))}
+          </>
+        )}
       </div>
     </div>
   );
-}
+}

frontend/src/features/slices/mod.ts

···
 import { jetstreamRoutes } from "./jetstream/handlers.tsx";
 
 // Export individual route groups
-export { overviewRoutes, settingsRoutes, lexiconRoutes, recordsRoutes, codegenRoutes, oauthRoutes, apiDocsRoutes, syncRoutes, syncLogsRoutes, jetstreamRoutes };
+export {
+  apiDocsRoutes,
+  codegenRoutes,
+  jetstreamRoutes,
+  lexiconRoutes,
+  oauthRoutes,
+  overviewRoutes,
+  recordsRoutes,
+  settingsRoutes,
+  syncLogsRoutes,
+  syncRoutes,
+};
 
 // Export consolidated routes array for easy import
 export const sliceRoutes: Route[] = [
···
   ...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 { requireAuth, withAuth } from "../../../routes/middleware.ts";
 import { getSliceClient } from "../../../utils/client.ts";
-import { buildSliceUri, buildAtUri } from "../../../utils/at-uri.ts";
-import { withSliceAccess, requireSliceAccess } from "../../../routes/slice-middleware.ts";
-import { extractSliceParams } from "../../../utils/slice-params.ts";
+import { buildAtUri, buildSliceUri } from "../../../utils/at-uri.ts";
+import {
+  requireSliceAccess,
+  withSliceAccess,
+} from "../../../routes/slice-middleware.ts";
+import {
+  buildSliceUrl,
+  extractSliceParams,
+} from "../../../utils/slice-params.ts";
 import { renderHTML } from "../../../utils/render.tsx";
+import { hxRedirect } from "../../../utils/htmx.ts";
 import { SliceOAuthPage } from "./templates/SliceOAuthPage.tsx";
 import { OAuthClientModal } from "./templates/fragments/OAuthClientModal.tsx";
 import { OAuthRegistrationResult } from "./templates/fragments/OAuthRegistrationResult.tsx";
···
         sliceUri={sliceUri}
         mode="new"
         clientData={undefined}
-      />
+      />,
     );
   } catch (error) {
     console.error("Error showing new OAuth client modal:", error);
···
           Close
         </button>
       </div>,
-      { status: 500 }
+      { status: 500 },
     );
   }
 }
···
 
     // Register new OAuth client via backend API
     const sliceClient = getSliceClient(context, sliceId);
-    const newClient = await sliceClient.network.slices.slice.createOAuthClient({
+    await sliceClient.network.slices.slice.createOAuthClient({
       clientName,
       redirectUris,
       scope: scope || undefined,
···
       policyUri: policyUri || undefined,
     });
 
-    return renderHTML(
-      <OAuthRegistrationResult
-        success
-        sliceId={sliceId}
-        clientId={newClient.clientId}
-      />
-    );
+    // Get the user's handle for the redirect
+    const handle = context.currentUser?.handle;
+    if (!handle) {
+      throw new Error("Unable to determine user handle");
+    }
+
+    // Redirect to the OAuth page to show the new client
+    const redirectUrl = buildSliceUrl(handle, sliceId, "oauth");
+    return hxRedirect(redirectUrl);
   } catch (error) {
     console.error("Error registering OAuth client:", error);
     return renderHTML(
···
         error={error instanceof Error ? error.message : String(error)}
         sliceId={sliceId}
       />,
-      { status: 500 }
+      { status: 500 },
     );
   }
 }
···
         success={false}
         error={error instanceof Error ? error.message : String(error)}
       />,
-      { status: 500 }
+      { status: 500 },
     );
   }
 }
···
   try {
     // Fetch OAuth client details via backend API
     const sliceClient = getSliceClient(context, sliceId);
-    const clientsResponse =
-      await sliceClient.network.slices.slice.getOAuthClients();
+    const clientsResponse = await sliceClient.network.slices.slice
+      .getOAuthClients();
     const clientData = clientsResponse.clients.find(
-      (c) => c.clientId === clientId
+      (c) => c.clientId === clientId,
     );
 
     const sliceUri = buildAtUri({
···
         sliceUri={sliceUri}
         mode="view"
         clientData={clientData}
-      />
+      />,
     );
   } catch (error) {
     console.error("Error fetching OAuth client:", error);
···
           Close
         </button>
       </div>,
-      { status: 500 }
+      { status: 500 },
     );
   }
 }
···
 
     // Update OAuth client via backend API
     const sliceClient = getSliceClient(context, sliceId);
-    const updatedClient =
-      await sliceClient.network.slices.slice.updateOAuthClient({
+    const updatedClient = await sliceClient.network.slices.slice
+      .updateOAuthClient({
         clientId,
         clientName: clientName || undefined,
         redirectUris: redirectUris.length > 0 ? redirectUris : undefined,
···
         sliceUri={sliceUri}
         mode="view"
         clientData={updatedClient}
-      />
+      />,
     );
   } catch (error) {
     console.error("Error updating OAuth client:", error);
···
         success={false}
         error={error instanceof Error ? error.message : String(error)}
       />,
-      { status: 500 }
+      { status: 500 },
     );
   }
 }
 
 async function handleSliceOAuthPage(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const authContext = await withAuth(req);
   const sliceParams = extractSliceParams(params);
···
     return new Response("Invalid slice ID", { status: 400 });
   }
 
-  const context = await withSliceAccess(authContext, sliceParams.handle, sliceParams.sliceId);
+  const context = await withSliceAccess(
+    authContext,
+    sliceParams.handle,
+    sliceParams.sliceId,
+  );
   const accessError = requireSliceAccess(context);
   if (accessError) return accessError;
 
···
   let errorMessage = null;
 
   try {
-    const oauthClientsResponse =
-      await sliceClient.network.slices.slice.getOAuthClients();
+    const oauthClientsResponse = await sliceClient.network.slices.slice
+      .getOAuthClients();
     clientsWithDetails = oauthClientsResponse.clients.map((client) => ({
       clientId: client.clientId,
       createdAt: new Date().toISOString(), // Backend should provide this
···
       clients={clientsWithDetails}
       currentUser={authContext.currentUser}
       error={errorMessage}
-    />
+    />,
   );
 }
 

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

···
           </div>
         </div>
 
-        {clients.length === 0 ? (
-          <EmptyState
-            icon={<Key size={64} strokeWidth={1} />}
-            title="No OAuth clients registered"
-            description="Register OAuth clients to allow applications to access your slice data."
-            withPadding
-          >
-            <Button
-              type="button"
-              variant="primary"
-              hx-get={`/api/slices/${sliceId}/oauth/new`}
-              hx-target="#modal-container"
-              hx-swap="innerHTML"
+        {clients.length === 0
+          ? (
+            <EmptyState
+              icon={<Key size={64} strokeWidth={1} />}
+              title="No OAuth clients registered"
+              description="Register OAuth clients to allow applications to access your slice data."
+              withPadding
             >
-              Register Your First Client
-            </Button>
-          </EmptyState>
-        ) : (
-          <OAuthClientsList clients={clients} sliceId={sliceId} />
-        )}
+              <Button
+                type="button"
+                variant="primary"
+                hx-get={`/api/slices/${sliceId}/oauth/new`}
+                hx-target="#modal-container"
+                hx-swap="innerHTML"
+              >
+                Register Your First Client
+              </Button>
+            </EmptyState>
+          )
+          : <OAuthClientsList clients={clients} sliceId={sliceId} />}
       </div>
 
       <div id="modal-container"></div>
     </SlicePage>
   );
-}
+}

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

···
 import { Button } from "../../../../../shared/fragments/Button.tsx";
 import { Input } from "../../../../../shared/fragments/Input.tsx";
 import { Textarea } from "../../../../../shared/fragments/Textarea.tsx";
+import { Modal } from "../../../../../shared/fragments/Modal.tsx";
 
 interface OAuthClientModalProps {
   sliceId: string;
···
 }: 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>
+      <Modal title="OAuth Client Details">
+        <form
+          hx-post={`/api/slices/${sliceId}/oauth/${
+            encodeURIComponent(clientData.clientId)
+          }/update`}
+          hx-target="#modal-container"
+          hx-swap="outerHTML"
+        >
+          <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>
 
-            <div className="space-y-4">
+            {clientData.clientSecret && (
               <div>
                 <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Client ID
+                  Client Secret
                 </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 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>
-              )}
-
-              <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"
+              defaultValue={clientData.clientName}
             />
 
             <div>
···
                 label="Redirect URIs"
                 required
                 rows={3}
-                placeholder="https://example.com/callback&#10;https://localhost:3000/callback"
+                defaultValue={clientData.redirectUris.join("\n")}
               />
               <p className="text-sm text-gray-500 mt-1">
                 Enter one redirect URI per line
···
               id="scope"
               name="scope"
               label="Scope"
+              defaultValue={clientData.scope || ""}
               placeholder="atproto:atproto"
             />
 
···
               id="clientUri"
               name="clientUri"
               label="Client URI"
+              defaultValue={clientData.clientUri || ""}
               placeholder="https://example.com"
             />
 
···
               id="logoUri"
               name="logoUri"
               label="Logo URI"
+              defaultValue={clientData.logoUri || ""}
               placeholder="https://example.com/logo.png"
             />
 
···
               id="tosUri"
               name="tosUri"
               label="Terms of Service URI"
+              defaultValue={clientData.tosUri || ""}
               placeholder="https://example.com/terms"
             />
 
···
               id="policyUri"
               name="policyUri"
               label="Privacy Policy URI"
+              defaultValue={clientData.policyUri || ""}
               placeholder="https://example.com/privacy"
             />
 
···
                 Cancel
               </Button>
               <Button type="submit" variant="primary">
-                Register Client
+                Update Client
               </Button>
             </div>
           </div>
         </form>
-      </div>
-    </div>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal title="Register OAuth Client">
+      <form
+        hx-post={`/api/slices/${sliceId}/oauth/register`}
+        hx-target="#modal-container"
+        hx-swap="outerHTML"
+      >
+        <input type="hidden" name="sliceUri" value={sliceUri} />
+
+        <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>
+    </Modal>
   );
-}
+}

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

···
   return (
     <div className="divide-y divide-zinc-200">
       {clients.map((client) => (
-        <div key={client.clientId} className="oauth-client-item px-6 py-4 hover:bg-zinc-50 transition-colors">
+        <div
+          key={client.clientId}
+          className="oauth-client-item px-6 py-4 hover:bg-zinc-50 transition-colors"
+        >
           <div className="flex justify-between items-start">
             <div className="flex-1">
               <div className="flex items-center gap-3 mb-2">
···
                 type="button"
                 variant="ghost"
                 size="sm"
-                hx-get={`/api/slices/${sliceId}/oauth/${encodeURIComponent(
-                  client.clientId
-                )}/view`}
+                hx-get={`/api/slices/${sliceId}/oauth/${
+                  encodeURIComponent(
+                    client.clientId,
+                  )
+                }/view`}
                 hx-target="#modal-container"
                 hx-swap="innerHTML"
                 className="text-purple-600 hover:text-purple-800"
···
                 type="button"
                 variant="ghost"
                 size="sm"
-                hx-delete={`/api/slices/${sliceId}/oauth/${encodeURIComponent(
-                  client.clientId
-                )}`}
+                hx-delete={`/api/slices/${sliceId}/oauth/${
+                  encodeURIComponent(
+                    client.clientId,
+                  )
+                }`}
                 hx-confirm="Are you sure you want to delete this OAuth client?"
                 hx-target="closest .oauth-client-item"
                 hx-swap="outerHTML"
···
       ))}
     </div>
   );
-}
+}

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

···
       </td>
     </tr>
   );
-}
+}

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

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

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

···
 import { withAuth } from "../../../routes/middleware.ts";
 import { renderHTML } from "../../../utils/render.tsx";
 import { SliceOverview } from "./templates/SliceOverview.tsx";
-import { withSliceAccess, getSliceStats, requireSliceAccess } from "../../../routes/slice-middleware.ts";
+import {
+  getSliceStats,
+  withSliceAccess,
+} from "../../../routes/slice-middleware.ts";
 import { extractSliceParams } from "../../../utils/slice-params.ts";
 
 async function handleSliceOverview(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const authContext = await withAuth(req);
   const sliceParams = extractSliceParams(params);
···
     return Response.redirect(new URL("/", req.url), 302);
   }
 
-  const context = await withSliceAccess(authContext, sliceParams.handle, sliceParams.sliceId);
-  const accessError = requireSliceAccess(context);
-  if (accessError) return accessError;
+  const context = await withSliceAccess(
+    authContext,
+    sliceParams.handle,
+    sliceParams.sliceId,
+  );
+
+  // Check if slice exists (not if user has access - overview is public)
+  if (!context.sliceContext?.slice) {
+    return new Response("Slice not found", { status: 404 });
+  }
 
   const stats = await getSliceStats(context.sliceContext!.sliceUri);
 
···
       collections={stats.collections}
       currentTab="overview"
       currentUser={authContext.currentUser}
-    />
+      hasSliceAccess={context.sliceContext?.hasAccess}
+    />,
   );
 }
 

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

···
   collections?: Collection[];
   currentTab?: string;
   currentUser?: AuthenticatedUser;
+  hasSliceAccess?: boolean;
 }
 
 export function SliceOverview({
···
   collections = [],
   currentTab = "overview",
   currentUser,
+  hasSliceAccess,
 }: SliceOverviewProps) {
   return (
     <SlicePage
···
       sliceId={sliceId}
       currentTab={currentTab}
       currentUser={currentUser}
+      hasSliceAccess={hasSliceAccess}
     >
       <div
         hx-get={`/api/jetstream/status?sliceId=${sliceId}&handle=${slice.creator?.handle}`}
···
             </div>
             <div>
               <span className="text-2xl font-bold">{totalActors}</span>
-              <p className="text-sm">Unique Actors</p>
+              <p className="text-sm">Actors</p>
             </div>
           </div>
         </div>
···
           <p className="text-zinc-600 mb-4">
             View lexicon definitions and schemas that define your slice.
           </p>
-          <Button href={buildSliceUrlFromView(slice, sliceId, "lexicon")} variant="purple">
+          <Button
+            href={buildSliceUrlFromView(slice, sliceId, "lexicon")}
+            variant="purple"
+          >
             View Lexicons
           </Button>
         </div>
···
           <p className="text-zinc-600 mb-4">
             Browse indexed AT Protocol records by collection.
           </p>
-          {collections.length > 0 ? (
-            <Button href={buildSliceUrlFromView(slice, sliceId, "records")} variant="primary">
-              Browse Records
-            </Button>
-          ) : (
-            <p className="text-zinc-500 text-sm">
-              No records synced yet. Start by syncing some records!
-            </p>
-          )}
+          {collections.length > 0
+            ? (
+              <Button
+                href={buildSliceUrlFromView(slice, sliceId, "records")}
+                variant="primary"
+              >
+                Browse Records
+              </Button>
+            )
+            : (
+              <p className="text-zinc-500 text-sm">
+                No records synced yet. Start by syncing some records!
+              </p>
+            )}
         </div>
 
         <div className="bg-white border border-zinc-200 p-6">
···
           <p className="text-zinc-600 mb-4">
             Generate TypeScript client from your lexicon definitions.
           </p>
-          <Button href={buildSliceUrlFromView(slice, sliceId, "codegen")} variant="warning">
+          <Button
+            href={buildSliceUrlFromView(slice, sliceId, "codegen")}
+            variant="warning"
+          >
             Generate Client
           </Button>
         </div>
···
           <p className="text-zinc-600 mb-4">
             Interactive OpenAPI documentation for your slice's XRPC endpoints.
           </p>
-          <Button href={buildSliceUrlFromView(slice, sliceId, "api-docs")} variant="indigo">
+          <Button
+            href={buildSliceUrlFromView(slice, sliceId, "api-docs")}
+            variant="indigo"
+          >
             View API Docs
           </Button>
         </div>
 
-        <div className="bg-white border border-zinc-200 p-6">
-          <h2 className="text-xl font-semibold text-zinc-900 mb-4">🔄 Sync</h2>
-          <p className="text-zinc-600 mb-4">
-            Sync entire collections from AT Protocol network.
-          </p>
-          <Button href={buildSliceUrlFromView(slice, sliceId, "sync")} variant="success">
-            Start Sync
-          </Button>
-        </div>
-
-        {collections.length > 0 ? (
+        {hasSliceAccess && (
           <div className="bg-white border border-zinc-200 p-6">
             <h2 className="text-xl font-semibold text-zinc-900 mb-4">
-              📊 Synced Collections
+              🔄 Sync
             </h2>
             <p className="text-zinc-600 mb-4">
-              Collections currently indexed in the database.
+              Sync entire collections from AT Protocol network.
             </p>
-            <div className="space-y-3 max-h-40 overflow-y-auto">
-              {collections.map((collection) => (
-                <div
-                  key={collection.name}
-                  className="border-b border-zinc-100 pb-2"
-                >
-                  <a
-                    href={`${buildSliceUrlFromView(slice, sliceId, "records")}?collection=${collection.name}`}
-                    className="text-zinc-700 hover:text-zinc-900 hover:underline text-sm font-medium"
+            <Button
+              href={buildSliceUrlFromView(slice, sliceId, "sync")}
+              variant="success"
+            >
+              Start Sync
+            </Button>
+          </div>
+        )}
+
+        {collections.length > 0
+          ? (
+            <div className="bg-white border border-zinc-200 p-6">
+              <h2 className="text-xl font-semibold text-zinc-900 mb-4">
+                📊 Synced Collections
+              </h2>
+              <p className="text-zinc-600 mb-4">
+                Collections currently indexed in the database.
+              </p>
+              <div className="space-y-3 max-h-40 overflow-y-auto">
+                {collections.map((collection) => (
+                  <div
+                    key={collection.name}
+                    className="border-b border-zinc-100 pb-2"
                   >
-                    {collection.name}
-                  </a>
-                  <div className="flex justify-between text-xs text-zinc-500 mt-1">
-                    <span>{collection.count} records</span>
-                    {collection.actors && (
-                      <span>{collection.actors} actors</span>
-                    )}
+                    <a
+                      href={`${
+                        buildSliceUrlFromView(
+                          slice,
+                          sliceId,
+                          "records",
+                        )
+                      }?collection=${collection.name}`}
+                      className="text-zinc-700 hover:text-zinc-900 hover:underline text-sm font-medium"
+                    >
+                      {collection.name}
+                    </a>
+                    <div className="flex justify-between text-xs text-zinc-500 mt-1">
+                      <span>{collection.count} records</span>
+                      {collection.actors && (
+                        <span>{collection.actors} actors</span>
+                      )}
+                    </div>
                   </div>
-                </div>
-              ))}
+                ))}
+              </div>
             </div>
-          </div>
-        ) : (
-          <div className="bg-white border border-zinc-200 p-6">
-            <h2 className="text-xl font-semibold text-zinc-900 mb-4">
-              🌟 Get Started
-            </h2>
-            <p className="text-zinc-600 mb-4">
-              No records indexed yet. Start by syncing some AT Protocol
-              collections!
-            </p>
-            <div className="space-y-2 text-sm">
-              <p className="text-zinc-500">Try syncing collections like:</p>
-              <code className="block bg-zinc-100 p-2 rounded text-xs">
-                app.bsky.feed.post
-              </code>
-              <code className="block bg-zinc-100 p-2 rounded text-xs">
-                app.bsky.actor.profile
-              </code>
+          )
+          : (
+            <div className="bg-white border border-zinc-200 p-6">
+              <h2 className="text-xl font-semibold text-zinc-900 mb-4">
+                🌟 Get Started
+              </h2>
+              <p className="text-zinc-600 mb-4">
+                No records indexed yet. Start by syncing some AT Protocol
+                collections!
+              </p>
+              <div className="space-y-2 text-sm">
+                <p className="text-zinc-500">Try syncing collections like:</p>
+                <code className="block bg-zinc-100 p-2 rounded text-xs">
+                  app.bsky.feed.post
+                </code>
+                <code className="block bg-zinc-100 p-2 rounded text-xs">
+                  app.bsky.actor.profile
+                </code>
+              </div>
             </div>
-          </div>
-        )}
+          )}
       </div>
     </SlicePage>
   );

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

···
 import { getSliceClient } from "../../../utils/client.ts";
 import { renderHTML } from "../../../utils/render.tsx";
 import { SliceRecordsPage } from "./templates/SliceRecordsPage.tsx";
-import { withSliceAccess, getSliceStats, requireSliceAccess } from "../../../routes/slice-middleware.ts";
+import {
+  getSliceStats,
+  withSliceAccess,
+} from "../../../routes/slice-middleware.ts";
 import { extractSliceParams } from "../../../utils/slice-params.ts";
 import type { IndexedRecord } from "../../../client.ts";
 
 async function handleSliceRecordsPage(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const authContext = await withAuth(req);
   const sliceParams = extractSliceParams(params);
···
     return Response.redirect(new URL("/", req.url), 302);
   }
 
-  const context = await withSliceAccess(authContext, sliceParams.handle, sliceParams.sliceId);
-  const accessError = requireSliceAccess(context);
-  if (accessError) return accessError;
+  const context = await withSliceAccess(
+    authContext,
+    sliceParams.handle,
+    sliceParams.sliceId,
+  );
+
+  // Check if slice exists (records page is public)
+  if (!context.sliceContext?.slice) {
+    return new Response("Slice not found", { status: 404 });
+  }
 
   const stats = await getSliceStats(context.sliceContext!.sliceUri);
   const collections = stats.collections.map((stat) => ({
···
 
   if ((selectedCollection || searchQuery) && collections.length > 0) {
     try {
-      const sliceClient = getSliceClient(authContext, sliceParams.sliceId);
-      const recordsResult =
-        await sliceClient.network.slices.slice.getSliceRecords({
+      const sliceClient = getSliceClient(authContext, sliceParams.sliceId, context.sliceContext.profileDid);
+      const recordsResult = await sliceClient.network.slices.slice
+        .getSliceRecords({
           where: {
             ...(selectedCollection && {
               collection: { eq: selectedCollection },
···
       search={searchQuery}
       availableCollections={collections}
       currentUser={authContext.currentUser}
-    />
+      hasSliceAccess={context.sliceContext?.hasAccess}
+    />,
   );
 }
 
 export const recordsRoutes: Route[] = [
   {
     method: "GET",
-    pattern: new URLPattern({ pathname: "/profile/:handle/slice/:rkey/records" }),
+    pattern: new URLPattern({
+      pathname: "/profile/:handle/slice/:rkey/records",
+    }),
     handler: handleSliceRecordsPage,
   },
 ];

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

···
 import { FileText } from "lucide-preact";
 import { buildSliceUrlFromView } from "../../../../utils/slice-params.ts";
 import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
-import type { IndexedRecord, NetworkSlicesSliceDefsSliceView } from "../../../../client.ts";
+import type {
+  IndexedRecord,
+  NetworkSlicesSliceDefsSliceView,
+} from "../../../../client.ts";
 
 interface Record extends IndexedRecord {
   pretty_value?: string;
···
   author?: string;
   search?: string;
   currentUser?: AuthenticatedUser;
+  hasSliceAccess?: boolean;
 }
 
 export function SliceRecordsPage({
···
   author = "",
   search = "",
   currentUser,
+  hasSliceAccess,
 }: SliceRecordsPageProps) {
   return (
     <SlicePage
···
       sliceId={sliceId}
       currentTab="records"
       currentUser={currentUser}
+      hasSliceAccess={hasSliceAccess}
       title={`${slice.name} - Records`}
     >
       <RecordFilterForm
···
         search={search}
       />
 
-      {records.length > 0 ? (
-        <RecordsList records={records} />
-      ) : (
-        <div className="bg-white border border-zinc-200">
-          <EmptyState
-            icon={<FileText size={64} strokeWidth={1} />}
-            title="No records found"
-            description={
-              collection || author || search
-                ? "Try adjusting your filters or search terms, or sync some data first."
-                : "Start by syncing some AT Protocol collections."
-            }
-            withPadding
-          >
-            <Button href={buildSliceUrlFromView(slice, sliceId, "sync")} variant="primary">
-              Go to Sync
-            </Button>
-          </EmptyState>
-        </div>
-      )}
+      {records.length > 0
+        ? <RecordsList records={records} />
+        : (
+          <div className="bg-white border border-zinc-200">
+            <EmptyState
+              icon={<FileText size={64} strokeWidth={1} />}
+              title="No records found"
+              description={collection || author || search
+                ? "Try adjusting your filters or search terms."
+                : hasSliceAccess
+                  ? "Start by syncing some AT Protocol collections."
+                  : "This slice hasn't indexed any records yet."}
+              withPadding
+            >
+              {hasSliceAccess && (
+                <Button
+                  href={buildSliceUrlFromView(slice, sliceId, "sync")}
+                  variant="primary"
+                >
+                  Go to Sync
+                </Button>
+              )}
+            </EmptyState>
+          </div>
+        )}
     </SlicePage>
   );
-}
+}

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

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

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

···
 import { buildSliceUri } from "../../../utils/at-uri.ts";
 import { renderHTML } from "../../../utils/render.tsx";
 import { hxRedirect } from "../../../utils/htmx.ts";
-import { withSliceAccess, requireSliceAccess } from "../../../routes/slice-middleware.ts";
+import {
+  requireSliceAccess,
+  withSliceAccess,
+} from "../../../routes/slice-middleware.ts";
 import { extractSliceParams } from "../../../utils/slice-params.ts";
 import { SliceSettings } from "./templates/SliceSettings.tsx";
 
 async function handleSliceSettingsPage(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const authContext = await withAuth(req);
   const sliceParams = extractSliceParams(params);
···
     return Response.redirect(new URL("/", req.url), 302);
   }
 
-  const context = await withSliceAccess(authContext, sliceParams.handle, sliceParams.sliceId);
+  const context = await withSliceAccess(
+    authContext,
+    sliceParams.handle,
+    sliceParams.sliceId,
+  );
   const accessError = requireSliceAccess(context);
   if (accessError) return accessError;
 
···
       updated={updated === "true"}
       error={error}
       currentUser={authContext.currentUser}
-    />
+    />,
   );
 }
 
 async function handleUpdateSliceSettings(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const context = await withAuth(req);
   const sliceId = params?.pathname.groups.id;
···
       domain: domain.trim(),
     });
 
-    return hxRedirect(`/profile/${context.currentUser.handle}/slice/${sliceId}/settings?updated=true`);
+    return hxRedirect(
+      `/profile/${context.currentUser.handle}/slice/${sliceId}/settings?updated=true`,
+    );
   } catch (_error) {
-    return hxRedirect(`/profile/${context.currentUser.handle}/slice/${sliceId}/settings?error=update_failed`);
+    return hxRedirect(
+      `/profile/${context.currentUser.handle}/slice/${sliceId}/settings?error=update_failed`,
+    );
   }
 }
 
 async function handleDeleteSlice(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const context = await withAuth(req);
   const sliceId = params?.pathname.groups.id;
···
     // Delete the slice record from AT Protocol
     await atprotoClient.network.slices.slice.deleteRecord(sliceId);
 
-    return hxRedirect("/");
+    return hxRedirect(`/profile/${context.currentUser.handle}`);
   } catch (_error) {
     return new Response("Failed to delete slice", { status: 500 });
   }
···
 export const settingsRoutes: Route[] = [
   {
     method: "GET",
-    pattern: new URLPattern({ pathname: "/profile/:handle/slice/:rkey/settings" }),
+    pattern: new URLPattern({
+      pathname: "/profile/:handle/slice/:rkey/settings",
+    }),
     handler: handleSliceSettingsPage,
   },
   {

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

···
       {/* Error Message */}
       {error && (
         <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 mb-4">
-          ❌ {error === "update_failed" ? "Failed to update slice settings. Please try again." : "An error occurred."}
+          ❌ {error === "update_failed"
+            ? "Failed to update slice settings. Please try again."
+            : "An error occurred."}
         </div>
       )}
 
···
           <p className="text-zinc-600 mb-4">
             Update your slice name and primary domain.
           </p>
-            <form
-              hx-put={`/api/slices/${sliceId}/settings`}
-              hx-target="#settings-form-result"
-              hx-swap="innerHTML"
-              className="space-y-4"
-            >
+          <form
+            hx-put={`/api/slices/${sliceId}/settings`}
+            hx-target="#settings-form-result"
+            hx-swap="innerHTML"
+            className="space-y-4"
+          >
+            <Input
+              label="Slice Name"
+              type="text"
+              id="slice-name"
+              name="name"
+              value={slice.name}
+              required
+              placeholder="Enter slice name..."
+            />
+
+            <div>
               <Input
-                label="Slice Name"
+                label="Primary Domain"
                 type="text"
-                id="slice-name"
-                name="name"
-                value={slice.name}
+                id="slice-domain"
+                name="domain"
+                value={slice.domain || ""}
                 required
-                placeholder="Enter slice name..."
+                placeholder="e.g. social.grain"
               />
-
-              <div>
-                <Input
-                  label="Primary Domain"
-                  type="text"
-                  id="slice-domain"
-                  name="domain"
-                  value={slice.domain || ""}
-                  required
-                  placeholder="e.g. social.grain"
-                />
-                <p className="mt-1 text-xs text-zinc-500">
-                  Primary namespace for this slice's collections
-                </p>
-              </div>
+              <p className="mt-1 text-xs text-zinc-500">
+                Primary namespace for this slice's collections
+              </p>
+            </div>
 
-              <div className="flex justify-start">
-                <Button
-                  type="submit"
-                  variant="primary"
-                  size="lg"
-                >
-                  Update Settings
-                </Button>
-              </div>
-              <div id="settings-form-result" className="mt-4"></div>
-            </form>
+            <div className="flex justify-start">
+              <Button
+                type="submit"
+                variant="primary"
+                size="lg"
+              >
+                Update Settings
+              </Button>
+            </div>
+            <div id="settings-form-result" className="mt-4"></div>
+          </form>
         </div>
 
         {/* Danger Zone */}
···
       </div>
     </SlicePage>
   );
-}
+}

frontend/src/features/slices/shared/fragments/SliceLogPage.tsx

···
 import { PageHeader } from "../../../../shared/fragments/PageHeader.tsx";
 import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
 import type { NetworkSlicesSliceDefsSliceView } from "../../../../client.ts";
+import { buildSliceUrlFromView } from "../../../../utils/slice-params.ts";
 
 interface SliceLogPageProps {
   slice: NetworkSlicesSliceDefsSliceView;
···
   breadcrumbLabel,
   children,
 }: SliceLogPageProps) {
-  const defaultBreadcrumbHref = `/slices/${sliceId}`;
+  const defaultBreadcrumbHref = buildSliceUrlFromView(slice, sliceId);
   const defaultBreadcrumbLabel = `Back to ${slice.name}`;
 
   return (
···
       </div>
     </Layout>
   );
-}
+}

frontend/src/features/slices/shared/fragments/SlicePage.tsx

···
   sliceId: string;
   currentTab?: string;
   currentUser?: AuthenticatedUser;
+  hasSliceAccess?: boolean;
   title?: string;
   headerActions?: preact.ComponentChildren;
   breadcrumbHref?: string;
···
   sliceId,
   currentTab,
   currentUser,
+  hasSliceAccess,
   title,
   headerActions,
   breadcrumbHref,
···
   children,
 }: SlicePageProps) {
   const pageTitle = title || slice.name;
-  const defaultBreadcrumbHref = slice.creator?.handle ? `/profile/${slice.creator.handle}` : "/";
+  const defaultBreadcrumbHref = slice.creator?.handle
+    ? `/profile/${slice.creator.handle}`
+    : "/";
   const defaultBreadcrumbLabel = "Back to Profile";
 
   return (
···
           {headerActions}
         </PageHeader>
 
-        {currentTab && <SliceTabs slice={slice} sliceId={sliceId} currentTab={currentTab} />}
+        {currentTab && (
+          <SliceTabs
+            slice={slice}
+            sliceId={sliceId}
+            currentTab={currentTab}
+            currentUser={currentUser}
+            hasSliceAccess={hasSliceAccess}
+          />
+        )}
 
         {children}
       </div>
     </Layout>
   );
-}
+}

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

···
 import type { NetworkSlicesSliceDefsSliceView } from "../../../../client.ts";
+import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
 import { buildSliceUrlFromView } from "../../../../utils/slice-params.ts";
 
 export interface SliceTab {
···
   href: string;
 }
 
-export function getSliceTabs(slice: NetworkSlicesSliceDefsSliceView, sliceId: string): SliceTab[] {
-  return [
-    { id: "overview", name: "Overview", href: buildSliceUrlFromView(slice, sliceId) },
-    { id: "lexicon", name: "Lexicons", href: buildSliceUrlFromView(slice, sliceId, "lexicon") },
-    { id: "sync", name: "Sync", href: buildSliceUrlFromView(slice, sliceId, "sync") },
-    { id: "records", name: "Records", href: buildSliceUrlFromView(slice, sliceId, "records") },
-    { id: "codegen", name: "Code Gen", href: buildSliceUrlFromView(slice, sliceId, "codegen") },
-    { id: "oauth", name: "OAuth Clients", href: buildSliceUrlFromView(slice, sliceId, "oauth") },
-    { id: "settings", name: "Settings", href: buildSliceUrlFromView(slice, sliceId, "settings") },
+export function getSliceTabs(
+  slice: NetworkSlicesSliceDefsSliceView,
+  sliceId: string,
+  currentUser?: AuthenticatedUser,
+  hasSliceAccess?: boolean,
+): SliceTab[] {
+  const tabs = [
+    {
+      id: "overview",
+      name: "Overview",
+      href: buildSliceUrlFromView(slice, sliceId),
+    },
+    {
+      id: "lexicon",
+      name: "Lexicons",
+      href: buildSliceUrlFromView(slice, sliceId, "lexicon"),
+    },
   ];
+
+  // Add sync tab only if user owns the slice
+  if (hasSliceAccess) {
+    tabs.push({
+      id: "sync",
+      name: "Sync",
+      href: buildSliceUrlFromView(slice, sliceId, "sync"),
+    });
+  }
+
+  tabs.push(
+    {
+      id: "records",
+      name: "Records",
+      href: buildSliceUrlFromView(slice, sliceId, "records"),
+    },
+    {
+      id: "codegen",
+      name: "Code Gen",
+      href: buildSliceUrlFromView(slice, sliceId, "codegen"),
+    },
+  );
+
+  // Add oauth and settings tabs only if user owns the slice
+  if (hasSliceAccess) {
+    tabs.push(
+      {
+        id: "oauth",
+        name: "OAuth Clients",
+        href: buildSliceUrlFromView(slice, sliceId, "oauth"),
+      },
+      {
+        id: "settings",
+        name: "Settings",
+        href: buildSliceUrlFromView(slice, sliceId, "settings"),
+      },
+    );
+  }
+
+  return tabs;
 }
 
 interface SliceTabsProps {
   slice: NetworkSlicesSliceDefsSliceView;
   sliceId: string;
   currentTab: string;
+  currentUser?: AuthenticatedUser;
+  hasSliceAccess?: boolean;
 }
 
-export function SliceTabs({ slice, sliceId, currentTab }: SliceTabsProps) {
-  const tabs = getSliceTabs(slice, sliceId);
+export function SliceTabs(
+  { slice, sliceId, currentTab, currentUser, hasSliceAccess }: SliceTabsProps,
+) {
+  const tabs = getSliceTabs(slice, sliceId, currentUser, hasSliceAccess);
 
   return (
     <nav className="border-b border-gray-200 mb-6">

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 { requireAuth, withAuth } from "../../../routes/middleware.ts";
 import { getSliceClient } from "../../../utils/client.ts";
-import { withSliceAccess, requireSliceAccess } from "../../../routes/slice-middleware.ts";
+import {
+  requireSliceAccess,
+  withSliceAccess,
+} from "../../../routes/slice-middleware.ts";
 import { extractSliceParams } from "../../../utils/slice-params.ts";
 import { SyncJobLogsPage } from "./templates/SyncJobLogsPage.tsx";
 import { SyncJobLogs } from "./templates/SyncJobLogs.tsx";
 
 async function handleSyncJobLogsPage(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const authContext = await withAuth(req);
   const sliceParams = extractSliceParams(params);
···
     return new Response("Invalid slice ID or job ID", { status: 400 });
   }
 
-  const context = await withSliceAccess(authContext, sliceParams.handle, sliceParams.sliceId);
+  const context = await withSliceAccess(
+    authContext,
+    sliceParams.handle,
+    sliceParams.sliceId,
+  );
   const accessError = requireSliceAccess(context);
   if (accessError) return accessError;
 
···
       sliceId={sliceParams.sliceId}
       jobId={jobId}
       currentUser={authContext.currentUser}
-    />
+    />,
   );
 }
 
 async function handleSyncJobLogs(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const context = await withAuth(req);
   const authResponse = requireAuth(context);
···
       <div className="p-8 text-center text-red-600">
         Invalid slice ID or job ID
       </div>,
-      { status: 400 }
+      { status: 400 },
     );
   }
 
···
     }
 
     return renderHTML(
-      <div className="p-8 text-center text-gray-600">No logs available</div>
+      <div className="p-8 text-center text-gray-600">No logs available</div>,
     );
   } catch (error) {
     console.error("Failed to get sync job logs:", error);
···
     return renderHTML(
       <div className="p-8 text-center text-red-600">
         Failed to load logs: {errorMessage}
-      </div>
+      </div>,
     );
   }
 }
···
 export const syncLogsRoutes: Route[] = [
   {
     method: "GET",
-    pattern: new URLPattern({ pathname: "/profile/:handle/slice/:rkey/sync/:jobId" }),
+    pattern: new URLPattern({
+      pathname: "/profile/:handle/slice/:rkey/sync/:jobId",
+    }),
     handler: handleSyncJobLogsPage,
   },
   {

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

···
 
 export function SyncJobLogs({ logs }: SyncJobLogsProps) {
   return (
-    <LogViewer 
-      logs={logs} 
+    <LogViewer
+      logs={logs}
       emptyMessage="No logs available for this sync job."
     />
   );
-}
+}

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

···
         </div>
       }
     >
-      <div 
+      <div
         className="bg-white border border-zinc-200"
         hx-get={`/api/slices/${sliceId}/sync/${jobId}`}
         hx-trigger="load"
···
       </div>
     </SliceLogPage>
   );
-}
+}

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 { requireAuth, withAuth } from "../../../routes/middleware.ts";
 import { getSliceClient } from "../../../utils/client.ts";
 import { buildSliceUri } from "../../../utils/at-uri.ts";
-import { withSliceAccess, requireSliceAccess } from "../../../routes/slice-middleware.ts";
-import { extractSliceParams } from "../../../utils/slice-params.ts";
+import { atprotoClient } from "../../../config.ts";
+import {
+  requireSliceAccess,
+  withSliceAccess,
+} from "../../../routes/slice-middleware.ts";
+import {
+  buildSliceUrl,
+  extractSliceParams,
+} from "../../../utils/slice-params.ts";
 import { SliceSyncPage } from "./templates/SliceSyncPage.tsx";
+import { hxRedirect } from "../../../utils/htmx.ts";
+import { SyncFormModal } from "./templates/fragments/SyncFormModal.tsx";
 import { SyncResult } from "./templates/fragments/SyncResult.tsx";
 import { JobHistory } from "./templates/fragments/JobHistory.tsx";
 
 async function handleSliceSync(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const context = await withAuth(req);
   const authResponse = requireAuth(context);
···
         <SyncResult
           success={false}
           error="Please specify at least one collection (primary or external) to sync"
-        />
+        />,
       );
     }
 
     const sliceClient = getSliceClient(context, sliceId);
     const syncJobResponse = await sliceClient.network.slices.slice.startSync({
       collections: collections.length > 0 ? collections : undefined,
-      externalCollections:
-        externalCollections.length > 0 ? externalCollections : 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}
-      />
-    );
+    if (syncJobResponse.success) {
+      // Get the user's handle for the redirect
+      const handle = context.currentUser?.handle;
+      if (!handle) {
+        throw new Error("Unable to determine user handle");
+      }
+
+      // Redirect to the sync page to show the job started
+      const redirectUrl = buildSliceUrl(handle, sliceId, "sync");
+      return hxRedirect(redirectUrl);
+    } else {
+      return renderHTML(
+        <SyncResult
+          success={false}
+          message={syncJobResponse.message}
+          error={syncJobResponse.message}
+        />,
+      );
+    }
   } catch (error) {
     console.error("Failed to start sync:", error);
     const errorMessage = error instanceof Error ? error.message : String(error);
···
 
 async function handleJobHistory(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const context = await withAuth(req);
   const authResponse = requireAuth(context);
···
   if (!sliceId) {
     return renderHTML(
       <div className="p-8 text-center text-red-600">Invalid slice ID</div>,
-      { status: 400 }
+      { status: 400 },
     );
   }
 
···
         jobs={jobsResponse || []}
         sliceId={sliceId}
         handle={handle || undefined}
-      />
+      />,
     );
   } 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>
+      </div>,
     );
   }
 }
 
 async function handleSliceSyncPage(
   req: Request,
-  params?: URLPatternResult
+  params?: URLPatternResult,
 ): Promise<Response> {
   const authContext = await withAuth(req);
   const sliceParams = extractSliceParams(params);
···
     return new Response("Invalid slice ID", { status: 400 });
   }
 
-  const context = await withSliceAccess(authContext, sliceParams.handle, sliceParams.sliceId);
+  const context = await withSliceAccess(
+    authContext,
+    sliceParams.handle,
+    sliceParams.sliceId,
+  );
   const accessError = requireSliceAccess(context);
   if (accessError) return accessError;
 
···
 
   // Get all lexicons and filter by record types
   try {
-    const lexiconsResponse =
-      await sliceClient.network.slices.lexicon.getRecords();
+    const lexiconsResponse = await sliceClient.network.slices.lexicon
+      .getRecords();
     const recordLexicons = lexiconsResponse.records.filter((lexicon) => {
       try {
         const definitions = JSON.parse(lexicon.value.definitions);
···
       currentUser={authContext.currentUser}
       collections={collections}
       externalCollections={externalCollections}
-    />
+    />,
   );
 }
 
+async function handleShowSyncModal(
+  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 collections: string[] = [];
+    const externalCollections: string[] = [];
+
+    // Get slice info for domain comparison
+    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
+    const sliceRecord = await atprotoClient.network.slices.slice.getRecord({
+      uri: sliceUri,
+    });
+    const sliceDomain = sliceRecord.value.domain;
+
+    // Get all lexicons and filter by record types
+    try {
+      const lexiconsResponse = await sliceClient.network.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
+      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);
+    }
+
+    return renderHTML(
+      <SyncFormModal
+        sliceId={sliceId}
+        collections={collections}
+        externalCollections={externalCollections}
+      />,
+    );
+  } catch (error) {
+    console.error("Error loading sync modal:", error);
+    return renderHTML(<SyncFormModal sliceId={sliceId} />);
+  }
+}
+
 export const syncRoutes: Route[] = [
   {
     method: "GET",
     pattern: new URLPattern({ pathname: "/profile/:handle/slice/:rkey/sync" }),
     handler: handleSliceSyncPage,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/sync/modal" }),
+    handler: handleShowSyncModal,
   },
   {
     method: "POST",

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

···
 import { SlicePage } from "../../shared/fragments/SlicePage.tsx";
 import { Button } from "../../../../shared/fragments/Button.tsx";
-import { Textarea } from "../../../../shared/fragments/Textarea.tsx";
 import { JobHistory } from "./fragments/JobHistory.tsx";
+import { RefreshCw } from "lucide-preact";
 import type { AuthenticatedUser } from "../../../../routes/middleware.ts";
 import type { NetworkSlicesSliceDefsSliceView } from "../../../../client.ts";
 
···
       currentUser={currentUser}
       title={`${slice.name} - Sync`}
     >
-        <div className="bg-white border border-zinc-200 p-6 mb-6">
-          <h2 className="text-xl font-semibold text-zinc-900 mb-4">
-            Sync Collections
+      <div className="bg-white border border-zinc-200">
+        <div className="px-6 py-4 border-b border-zinc-200 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-zinc-900">
+            Recent Sync History
           </h2>
-          <p className="text-zinc-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"
+          <Button
+            variant="success"
+            hx-get={`/api/slices/${sliceId}/sync/modal`}
+            hx-target="#modal-container"
             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-zinc-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-zinc-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>
+            <span className="flex items-center gap-2">
+              <RefreshCw size={16} />
+              Start Sync
+            </span>
+          </Button>
         </div>
-
         <div
           hx-get={`/api/slices/${sliceId}/job-history?handle=${slice.creator?.handle}`}
           hx-trigger="load, every 10s"
···
         >
           <JobHistory jobs={[]} sliceId={sliceId} />
         </div>
+      </div>
+
+      <div id="modal-container"></div>
     </SlicePage>
   );
-}
+}

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

···
 export function JobHistory({ jobs, sliceId, handle }: JobHistoryProps) {
   if (jobs.length === 0) {
     return (
-      <div className="bg-white border border-zinc-200">
-        <div className="px-6 py-4 border-b border-zinc-200">
-          <h3 className="text-lg font-semibold text-zinc-900">Recent Sync History</h3>
-        </div>
-        <EmptyState
-          icon={<Clock size={64} strokeWidth={1} />}
-          title="No sync history yet"
-          description="Sync jobs will appear here once completed."
-          withPadding
-        />
-      </div>
+      <EmptyState
+        icon={<Clock size={64} strokeWidth={1} />}
+        title="No sync history yet"
+        description="Sync jobs will appear here once completed."
+        withPadding
+      />
     );
   }
 
   return (
-    <div className="bg-white border border-zinc-200">
-      <div className="px-6 py-4 border-b border-zinc-200">
-        <h3 className="text-lg font-semibold text-zinc-900">Recent Sync History</h3>
-      </div>
-      <div className="divide-y divide-zinc-200">
-        {jobs.map((job) => (
-          <div key={job.jobId} className="group">
-            <a
-              href={handle ? buildSliceUrl(handle, sliceId, `sync/${job.jobId}`) : `/slices/${sliceId}/sync/${job.jobId}`}
-              className="block px-6 py-4 hover:bg-zinc-50 transition-colors"
-            >
-              <div className="flex justify-between items-center">
-                <div>
-                  <div className="flex items-center gap-2 mb-1">
-                    {job.result?.success ? (
+    <div className="divide-y divide-zinc-200">
+      {jobs.map((job) => (
+        <div key={job.jobId} className="group">
+          <a
+            href={handle
+              ? buildSliceUrl(handle, sliceId, `sync/${job.jobId}`)
+              : `/slices/${sliceId}/sync/${job.jobId}`}
+            className="block px-6 py-4 hover:bg-zinc-50 transition-colors"
+          >
+            <div className="flex justify-between items-center">
+              <div>
+                <div className="flex items-center gap-2 mb-1">
+                  {!job.result
+                    ? (
+                      <span className="text-blue-600 font-medium">
+                        🔄 Running
+                      </span>
+                    )
+                    : job.result.success
+                    ? (
                       <span className="text-green-600 font-medium">
                         ✅ Success
                       </span>
-                    ) : (
-                      <span className="text-red-600 font-medium">❌ Failed</span>
-                    )}
-                    {job.result?.message && (
-                      <span className="text-zinc-400 text-xs">
-                        ({extractDurationFromMessage(job.result.message)})
+                    )
+                    : (
+                      <span className="text-red-600 font-medium">
+                        ❌ Failed
                       </span>
                     )}
-                  </div>
-                  <p className="text-sm text-zinc-500">
-                    {formatDate(job.createdAt)}
+                  {job.result?.message && (
+                    <span className="text-zinc-400 text-xs">
+                      ({extractDurationFromMessage(job.result.message)})
+                    </span>
+                  )}
+                </div>
+                <p className="text-sm text-zinc-500">
+                  {job.completedAt
+                    ? `Completed ${formatDate(job.completedAt)}`
+                    : `Started ${formatDate(job.createdAt)}`}
+                </p>
+                {job.result && (
+                  <p className="text-xs text-zinc-400 mt-1">
+                    {job.result.totalRecords} records •{" "}
+                    {job.result.reposProcessed} repos
                   </p>
-                  {job.result && (
-                    <p className="text-xs text-zinc-400 mt-1">
-                      {job.result.totalRecords} records • {job.result.reposProcessed} repos
-                    </p>
-                  )}
+                )}
+                {!job.result && (
+                  <p className="text-xs text-zinc-400 mt-1">
+                    Job in progress...
+                  </p>
+                )}
+              </div>
+              <div className="flex items-center space-x-2">
+                <div className="text-xs text-zinc-400 font-mono">
+                  {job.jobId.split("-")[0]}...
                 </div>
-                <div className="flex items-center space-x-2">
-                  <div className="text-xs text-zinc-400 font-mono">
-                    {job.jobId.split("-")[0]}...
-                  </div>
-                  <div className="text-zinc-400">
-                    <ChevronRight size={20} />
-                  </div>
+                <div className="text-zinc-400">
+                  <ChevronRight size={20} />
                 </div>
               </div>
-            </a>
-          </div>
-        ))}
-      </div>
+            </div>
+          </a>
+        </div>
+      ))}
     </div>
   );
-}
+}

frontend/src/features/slices/sync/templates/fragments/SyncFormModal.tsx

···
+import { Button } from "../../../../../shared/fragments/Button.tsx";
+import { Textarea } from "../../../../../shared/fragments/Textarea.tsx";
+import { Modal } from "../../../../../shared/fragments/Modal.tsx";
+
+interface SyncFormModalProps {
+  sliceId: string;
+  collections?: string[];
+  externalCollections?: string[];
+}
+
+export function SyncFormModal({
+  sliceId,
+  collections = [],
+  externalCollections = [],
+}: SyncFormModalProps) {
+  return (
+    <Modal
+      title="Sync Collections"
+      description="Sync entire collections from AT Protocol network to this slice."
+    >
+      <form
+        hx-post={`/api/slices/${sliceId}/sync`}
+        hx-target="#sync-result"
+        hx-swap="innerHTML"
+        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-zinc-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-zinc-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 id="sync-result" className="mt-4"></div>
+
+        <div className="flex justify-end gap-3">
+          <Button
+            type="button"
+            variant="secondary"
+            _="on click set #modal-container's innerHTML to ''"
+          >
+            Cancel
+          </Button>
+          <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>
+    </Modal>
+  );
+}

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

···
             </div>
           )}
         </div>
-        {message && <div className="text-green-600 text-xs mt-2">{message}</div>}
+        {message && (
+          <div className="text-green-600 text-xs mt-2">{message}</div>
+        )}
       </div>
     );
   }
···
       </div>
     </div>
   );
-}
+}

frontend/src/lib/api.ts

···
 import {
   AtProtoClient,
+  NetworkSlicesActorDefsProfileViewBasic,
+  NetworkSlicesActorProfile,
   NetworkSlicesSlice,
   NetworkSlicesSliceDefsSliceView,
-  NetworkSlicesActorProfile,
-  NetworkSlicesActorDefsProfileViewBasic,
 } from "../client.ts";
-import { RecordResponse, recordBlobToCdnUrl } from "@slices/client";
+import { recordBlobToCdnUrl, RecordResponse } from "@slices/client";
 
 export async function getSlice(
   client: AtProtoClient,
-  uri: string
+  uri: string,
 ): Promise<NetworkSlicesSliceDefsSliceView | null> {
   try {
     const sliceRecord = await client.network.slices.slice.getRecord({ uri });
···
 
 export async function getSliceActor(
   client: AtProtoClient,
-  did: string
+  did: string,
 ): Promise<NetworkSlicesActorDefsProfileViewBasic | null> {
   try {
     const profileUri = `at://${did}/network.slices.actor.profile/self`;
···
       limit: 1,
     });
 
-    const handle =
-      actorsResponse.actors.length > 0
-        ? actorsResponse.actors[0].handle ?? did
-        : did; // fallback to DID if no handle found
+    const handle = actorsResponse.actors.length > 0
+      ? actorsResponse.actors[0].handle ?? did
+      : did; // fallback to DID if no handle found
 
     return actorToView(profileRecord, handle);
   } catch (error) {
···
 
 export function sliceToView(
   sliceRecord: RecordResponse<NetworkSlicesSlice>,
-  creator: NetworkSlicesActorDefsProfileViewBasic
+  creator: NetworkSlicesActorDefsProfileViewBasic,
 ): NetworkSlicesSliceDefsSliceView {
   return {
     uri: sliceRecord.uri,
···
 
 export function actorToView(
   profileRecord: RecordResponse<NetworkSlicesActorProfile>,
-  handle: string
+  handle: string,
 ): NetworkSlicesActorDefsProfileViewBasic {
   return {
     did: profileRecord.did,
···
 
 export async function getSlicesForActor(
   client: AtProtoClient,
-  did: string
+  did: string,
 ): Promise<NetworkSlicesSliceDefsSliceView[]> {
   try {
     const slicesResponse = await client.network.slices.slice.getRecords({
···
 export async function searchSlices(
   client: AtProtoClient,
   query: string,
-  limit = 20
+  limit = 20,
 ): Promise<NetworkSlicesSliceDefsSliceView[]> {
   try {
     const slicesResponse = await client.network.slices.slice.getRecords({
···
     return [];
   }
 }
+
+export async function getTimeline(
+  client: AtProtoClient,
+  limit = 50,
+): Promise<NetworkSlicesSliceDefsSliceView[]> {
+  try {
+    const slicesResponse = await client.network.slices.slice.getRecords({
+      limit,
+      sortBy: [{ field: "createdAt", direction: "desc" }],
+    });
+
+    const sliceViews: NetworkSlicesSliceDefsSliceView[] = [];
+    for (const sliceRecord of slicesResponse.records) {
+      const creator = await getSliceActor(client, sliceRecord.did);
+      if (creator) {
+        sliceViews.push(sliceToView(sliceRecord, creator));
+      }
+    }
+
+    return sliceViews;
+  } catch (error) {
+    console.error("Failed to get timeline:", error);
+    return [];
+  }
+}

frontend/src/lib/request_logger.ts

···
 
 // ANSI color codes
 const colors = {
-  reset: '\x1b[0m',
-  bright: '\x1b[1m',
-  dim: '\x1b[2m',
-  red: '\x1b[31m',
-  green: '\x1b[32m',
-  yellow: '\x1b[33m',
-  blue: '\x1b[34m',
-  magenta: '\x1b[35m',
-  cyan: '\x1b[36m',
-  gray: '\x1b[90m',
+  reset: "\x1b[0m",
+  bright: "\x1b[1m",
+  dim: "\x1b[2m",
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[34m",
+  magenta: "\x1b[35m",
+  cyan: "\x1b[36m",
+  gray: "\x1b[90m",
 };
 
 function getStatusColor(status: number): string {
···
 
 function getMethodColor(method: string): string {
   switch (method) {
-    case 'GET': return colors.blue;
-    case 'POST': return colors.green;
-    case 'PUT': return colors.yellow;
-    case 'DELETE': return colors.red;
-    case 'PATCH': return colors.magenta;
-    default: return colors.gray;
+    case "GET":
+      return colors.blue;
+    case "POST":
+      return colors.green;
+    case "PUT":
+      return colors.yellow;
+    case "DELETE":
+      return colors.red;
+    case "PATCH":
+      return colors.magenta;
+    default:
+      return colors.gray;
   }
 }
 
-export function logRequest(req: Request, start: number, response: Response): void {
+export function logRequest(
+  req: Request,
+  start: number,
+  response: Response,
+): void {
   const duration = Date.now() - start;
   const url = new URL(req.url);
   const method = req.method;
   const status = response.status;
   const userAgent = req.headers.get("user-agent") || "-";
   const referer = req.headers.get("referer") || "-";
-  
+
   const methodColored = `${getMethodColor(method)}${method}${colors.reset}`;
   const statusColored = `${getStatusColor(status)}${status}${colors.reset}`;
-  const pathColored = `${colors.bright}${url.pathname}${url.search}${colors.reset}`;
-  const durationColored = duration > 1000 ? 
-    `${colors.red}${duration}ms${colors.reset}` : 
-    duration > 500 ? 
-      `${colors.yellow}${duration}ms${colors.reset}` : 
-      `${colors.dim}${duration}ms${colors.reset}`;
-  
+  const pathColored =
+    `${colors.bright}${url.pathname}${url.search}${colors.reset}`;
+  const durationColored = duration > 1000
+    ? `${colors.red}${duration}ms${colors.reset}`
+    : duration > 500
+    ? `${colors.yellow}${duration}ms${colors.reset}`
+    : `${colors.dim}${duration}ms${colors.reset}`;
+
   console.log(
-    `${methodColored} ${pathColored} ${statusColored} ${durationColored} ${colors.gray}- ${userAgent} - ${referer}${colors.reset}`
+    `${methodColored} ${pathColored} ${statusColored} ${durationColored} ${colors.gray}- ${userAgent} - ${referer}${colors.reset}`,
   );
 }
 
-export function createLoggingHandler(handler: (req: Request) => Response | Promise<Response>) {
+export function createLoggingHandler(
+  handler: (req: Request) => Response | Promise<Response>,
+) {
   return async function loggingHandler(req: Request): Promise<Response> {
     const start = Date.now();
-    
+
     try {
       const response = await handler(req);
       logRequest(req, start, response);
···
       const duration = Date.now() - start;
       const url = new URL(req.url);
       const message = error instanceof Error ? error.message : String(error);
-      const methodColored = `${getMethodColor(req.method)}${req.method}${colors.reset}`;
-      const pathColored = `${colors.bright}${url.pathname}${url.search}${colors.reset}`;
+      const methodColored = `${
+        getMethodColor(req.method)
+      }${req.method}${colors.reset}`;
+      const pathColored =
+        `${colors.bright}${url.pathname}${url.search}${colors.reset}`;
       const errorColored = `${colors.red}ERROR${colors.reset}`;
       const durationColored = `${colors.red}${duration}ms${colors.reset}`;
-      
-      console.error(`${methodColored} ${pathColored} ${errorColored} ${durationColored} ${colors.red}- ${message}${colors.reset}`);
-      
+
+      console.error(
+        `${methodColored} ${pathColored} ${errorColored} ${durationColored} ${colors.red}- ${message}${colors.reset}`,
+      );
+
       // Return a generic 500 error
       const response = new Response("Internal Server Error", { status: 500 });
       logRequest(req, start, response);
       return response;
     }
   };
-}
+}

frontend/src/main.ts

···
     onListen: ({ port, hostname }) =>
       console.log(`Frontend server running on http://${hostname}:${port}`),
   },
-  handler
+  handler,
 );

frontend/src/routes/middleware.ts

···
-import { sessionStore, atprotoClient } from "../config.ts";
+import { atprotoClient, sessionStore } from "../config.ts";
 import { recordBlobToCdnUrl } from "@slices/client";
 import { getSliceActor } from "../lib/api.ts";
 
···
     // Fallback to Bluesky profile for avatar if not found in slices profile
     if (!currentUser.avatar) {
       try {
-        const profileRecords =
-          await atprotoClient.app.bsky.actor.profile.getRecords({
+        const profileRecords = await atprotoClient.app.bsky.actor.profile
+          .getRecords({
             where: {
               did: { eq: currentUser.sub },
             },
···
             currentUser.avatar = recordBlobToCdnUrl(
               profileRecord,
               profileRecord.value.avatar,
-              "avatar"
+              "avatar",
             );
           }
         }

frontend/src/routes/mod.ts

···
 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 {
+  apiDocsRoutes,
+  codegenRoutes,
+  jetstreamRoutes,
+  lexiconRoutes,
+  oauthRoutes,
+  overviewRoutes,
+  recordsRoutes,
+  settingsRoutes as sliceSettingsRoutes,
+  syncLogsRoutes,
+  syncRoutes,
+} from "../features/slices/mod.ts";
 import { settingsRoutes } from "../features/settings/handlers.tsx";
 import { docsRoutes } from "../features/docs/handlers.tsx";
 
···
   ...syncRoutes,
   ...syncLogsRoutes,
   ...jetstreamRoutes,
-];
+];

frontend/src/routes/slice-middleware.ts

···
-import { atprotoClient } from "../config.ts";
+import { publicClient } from "../config.ts";
 import { buildAtUri } from "../utils/at-uri.ts";
 import { getSlice } from "../lib/api.ts";
 import type { AuthenticatedUser } from "./middleware.ts";
···
 export async function withSliceAccess(
   context: AuthContext,
   handle: string,
-  sliceId: string
+  sliceId: string,
 ): Promise<SliceRequestContext> {
   // First resolve the handle to a DID
   let profileDid: string;
   try {
-    const actors = await atprotoClient.getActors({
+    const actors = await publicClient.getActors({
       where: { handle: { eq: handle } },
     });
 
···
         sliceContext: {
           slice: null,
           sliceId,
-          sliceUri: '',
+          sliceUri: "",
           handle,
-          profileDid: '',
+          profileDid: "",
           hasAccess: false,
         },
       };
···
       sliceContext: {
         slice: null,
         sliceId,
-        sliceUri: '',
+        sliceUri: "",
         handle,
-        profileDid: '',
+        profileDid: "",
         hasAccess: false,
       },
     };
···
   });
 
   try {
-    const slice = await getSlice(atprotoClient, sliceUri);
+    const slice = await getSlice(publicClient, sliceUri);
 
     // User has access if they own the slice
     const hasAccess = context.currentUser.isAuthenticated &&
-                     context.currentUser.sub === profileDid;
+      context.currentUser.sub === profileDid;
 
     return {
       ...context,
···
   };
 
   try {
-    const stats = await atprotoClient.network.slices.slice.stats({ slice: sliceUri });
+    const stats = await publicClient.network.slices.slice.stats({
+      slice: sliceUri,
+    });
 
     if (!stats.success) {
       return defaultStats;
···
   }
 }
 
-export function requireSliceAccess(context: SliceRequestContext): Response | null {
+export function requireSliceAccess(
+  context: SliceRequestContext,
+): Response | null {
   if (!context.sliceContext) {
-    return new Response("Internal error: slice context not initialized", { status: 500 });
+    return new Response("Internal error: slice context not initialized", {
+      status: 500,
+    });
   }
 
   // If profile DID is empty, the handle wasn't found
···
   }
 
   return null;
-}
+}

frontend/src/shared/fragments/ActivitySparkline.tsx

···
+interface ActivitySparklineProps {
+  data?: number[];
+  width?: number;
+  height?: number;
+  className?: string;
+}
+
+export function ActivitySparkline({
+  data = [],
+  width = 100,
+  height = 30,
+  className = "",
+}: ActivitySparklineProps) {
+  // Generate mock data if none provided (for demo purposes)
+  const sparklineData = data.length > 0 ? data : generateMockData();
+
+  // Calculate the path for the sparkline
+  const max = Math.max(...sparklineData, 1);
+  const min = Math.min(...sparklineData, 0);
+  const range = max - min || 1;
+
+  // Create SVG path points
+  const points = sparklineData.map((value, index) => {
+    const x = (index / (sparklineData.length - 1)) * width;
+    const y = height - ((value - min) / range) * height;
+    return `${x},${y}`;
+  }).join(" ");
+
+  // Create area path for gradient fill
+  const areaPath = `M 0,${height} L ${points} L ${width},${height} Z`;
+
+  return (
+    <div className={`inline-flex items-center ${className}`}>
+      <svg
+        width={width}
+        height={height}
+        className="overflow-visible"
+        viewBox={`0 0 ${width} ${height}`}
+      >
+        {/* Gradient definition */}
+        <defs>
+          <linearGradient
+            id="sparklineGradient"
+            x1="0%"
+            y1="0%"
+            x2="0%"
+            y2="100%"
+          >
+            <stop
+              offset="0%"
+              style={{ stopColor: "#3b82f6", stopOpacity: 0.3 }}
+            />
+            <stop
+              offset="100%"
+              style={{ stopColor: "#3b82f6", stopOpacity: 0.05 }}
+            />
+          </linearGradient>
+        </defs>
+
+        {/* Area fill */}
+        <path
+          d={areaPath}
+          fill="url(#sparklineGradient)"
+          strokeWidth="0"
+        />
+
+        {/* Line */}
+        <polyline
+          points={points}
+          fill="none"
+          stroke="#3b82f6"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+
+        {/* Dot at the end */}
+        <circle
+          cx={width}
+          cy={height -
+            ((sparklineData[sparklineData.length - 1] - min) / range) * height}
+          r="2"
+          fill="#3b82f6"
+        />
+      </svg>
+
+      {/* Activity label */}
+      <div className="ml-2 text-xs text-zinc-500">
+        {sparklineData[sparklineData.length - 1]} ops/min
+      </div>
+    </div>
+  );
+}
+
+// Generate mock data for demonstration
+function generateMockData(): number[] {
+  const points = 20;
+  const data: number[] = [];
+  let lastValue = Math.random() * 50 + 10;
+
+  for (let i = 0; i < points; i++) {
+    // Random walk with some smoothing
+    const change = (Math.random() - 0.5) * 20;
+    lastValue = Math.max(0, Math.min(100, lastValue + change));
+    data.push(Math.round(lastValue));
+  }
+
+  return data;
+}

frontend/src/shared/fragments/ActorAvatar.tsx

···
       )
       : <DefaultAvatar size={size} className={className} />
   );
-}
+}

frontend/src/shared/fragments/AvatarInput.tsx

···
         Avatar
       </label>
       <label htmlFor="avatar" className="cursor-pointer">
-        <div className="border rounded-full border-zinc-300 w-16 h-16 mx-auto mb-2 relative hover:border-zinc-400 transition-colors">
+        <div className="border rounded-full border-zinc-300 w-16 h-16 mb-2 relative hover:border-zinc-400 transition-colors">
           <div className="absolute bottom-0 right-0 bg-zinc-800 rounded-full w-5 h-5 flex items-center justify-center z-10">
-            <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
+            <svg
+              className="w-3 h-3 text-white"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fillRule="evenodd"
+                d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z"
+                clipRule="evenodd"
+              />
             </svg>
           </div>
-          <div id="image-preview" className="w-full h-full rounded-full overflow-hidden">
-            {profile ? (
-              <ActorAvatar profile={profile} size={64} className="w-full h-full" />
-            ) : (
-              <div className="w-full h-full bg-zinc-100 flex items-center justify-center">
-                <svg className="w-8 h-8 text-zinc-400" fill="currentColor" viewBox="0 0 20 20">
-                  <path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" />
-                </svg>
-              </div>
-            )}
+          <div
+            id="image-preview"
+            className="w-full h-full rounded-full overflow-hidden"
+          >
+            {profile
+              ? (
+                <ActorAvatar
+                  profile={profile}
+                  size={64}
+                  className="w-full h-full"
+                />
+              )
+              : (
+                <div className="w-full h-full bg-zinc-100 flex items-center justify-center">
+                  <svg
+                    className="w-8 h-8 text-zinc-400"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+              )}
           </div>
         </div>
       </label>
···
       />
     </div>
   );
-}
+}

frontend/src/shared/fragments/Breadcrumb.tsx

···
   label?: string;
 }
 
-export function Breadcrumb({ href, label = "Back to Slices" }: BreadcrumbProps) {
+export function Breadcrumb(
+  { href, label = "Back to Slices" }: BreadcrumbProps,
+) {
   return (
     <div className="mb-2">
       <a
···
       </a>
     </div>
   );
-}
+}

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 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> {
+export interface ButtonProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
   size?: ButtonSize;
   children: JSX.Element | JSX.Element[] | string;
···
 
 const variantClasses = {
   primary: "bg-blue-500 hover:bg-blue-600 text-white",
-  secondary: "bg-gray-500 hover:bg-gray-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",
···
 
 const sizeClasses = {
   sm: "px-3 py-1 text-sm",
-  md: "px-4 py-2", 
+  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, 
+  const {
+    variant = "primary",
+    size = "md",
+    children,
     href,
     class: classProp,
-    ...rest 
+    ...rest
   } = props;
-  
+
   const className = cn(
     "rounded transition-colors inline-flex items-center",
     variantClasses[variant],
     sizeClasses[size],
-    classProp
+    classProp,
   );
 
   if (href) {
···
       {children}
     </button>
   );
-}
+}

frontend/src/shared/fragments/DefaultAvatar.tsx

···
       </g>
     </svg>
   );
-}
+}

frontend/src/shared/fragments/EmptyState.tsx

···
   }
 
   return content;
-}
+}

frontend/src/shared/fragments/FlashMessage.tsx

···
   className?: string;
 }
 
-export function FlashMessage({ type, message, className = "" }: FlashMessageProps) {
+export function FlashMessage(
+  { type, message, className = "" }: FlashMessageProps,
+) {
   const baseClasses = "px-4 py-3 mb-4 border";
-  const typeClasses = type === "success" 
+  const typeClasses = type === "success"
     ? "bg-green-50 border-green-200 text-green-700"
     : "bg-red-50 border-red-200 text-red-700";
   const icon = type === "success" ? "✅" : "❌";
···
       {icon} {message}
     </div>
   );
-}
+}

frontend/src/shared/fragments/Input.tsx

···
   const { class: classProp, label, error, ...rest } = props;
   const className = cn(
     "block w-full border border-zinc-300 rounded-md px-3 py-2",
-    error ? "border-red-300 focus:border-red-500 focus:ring-red-500" : "focus:border-zinc-500 focus:ring-zinc-500",
+    error
+      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
+      : "focus:border-zinc-500 focus:ring-zinc-500",
     classProp,
   );
 
···
         </label>
       )}
       <input class={className} {...rest} />
-      {error && (
-        <p className="mt-1 text-sm text-red-600">{error}</p>
-      )}
+      {error && <p className="mt-1 text-sm text-red-600">{error}</p>}
     </div>
   );
-}
+}

frontend/src/shared/fragments/Layout.tsx

···
         <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} />
···
           <nav className="sm:fixed sm:top-0 sm:left-0 sm:right-0 h-14 z-50 bg-white border-b border-zinc-200">
             <div className="mx-auto max-w-5xl h-full flex items-center justify-between px-4">
               <div className="flex items-center space-x-4">
-                <a href="/" className="text-xl font-bold text-zinc-900 hover:text-zinc-700">
+                <a
+                  href="/"
+                  className="text-xl font-bold text-zinc-900 hover:text-zinc-700"
+                >
                   Slices
                 </a>
                 <a
···
                 </a>
               </div>
               <div className="flex items-center space-x-2">
-                {currentUser?.isAuthenticated ? (
-                  <div className="flex items-center space-x-2">
-                    <a
-                      href={`/profile/${currentUser.handle}`}
-                      className="px-3 py-1.5 text-sm text-zinc-600 hover:text-zinc-900 hover:bg-zinc-100 rounded-md transition-colors"
-                    >
-                      Dashboard
-                    </a>
-                    <div className="relative">
-                    <button
-                      type="button"
-                      className="flex items-center p-1 rounded-full hover:bg-zinc-100 transition-colors"
-                      _="on click toggle .hidden on #avatar-dropdown
+                {currentUser?.isAuthenticated
+                  ? (
+                    <div className="flex items-center space-x-2">
+                      <a
+                        href={`/profile/${currentUser.handle}`}
+                        className="px-3 py-1.5 text-sm text-zinc-600 hover:text-zinc-900 hover:bg-zinc-100 rounded-md transition-colors"
+                      >
+                        Dashboard
+                      </a>
+                      <div className="relative">
+                        <button
+                          type="button"
+                          className="flex items-center p-1 rounded-full hover:bg-zinc-100 transition-colors"
+                          _="on click toggle .hidden on #avatar-dropdown
                          on click from document
                          if not me.contains(event.target) and not #avatar-dropdown.contains(event.target)
                          add .hidden to #avatar-dropdown"
-                    >
-                      {currentUser.avatar ? (
-                        <img
-                          src={currentUser.avatar}
-                          alt="Profile avatar"
-                          className="w-8 h-8 rounded-full"
-                        />
-                      ) : (
-                        <div className="w-8 h-8 bg-zinc-300 rounded-full flex items-center justify-center">
-                          <span className="text-sm text-zinc-600 font-medium">
-                            {currentUser.handle?.charAt(0).toUpperCase() || "U"}
-                          </span>
-                        </div>
-                      )}
-                    </button>
+                        >
+                          {currentUser.avatar
+                            ? (
+                              <img
+                                src={currentUser.avatar}
+                                alt="Profile avatar"
+                                className="w-8 h-8 rounded-full"
+                              />
+                            )
+                            : (
+                              <div className="w-8 h-8 bg-zinc-300 rounded-full flex items-center justify-center">
+                                <span className="text-sm text-zinc-600 font-medium">
+                                  {currentUser.handle?.charAt(0)
+                                    .toUpperCase() || "U"}
+                                </span>
+                              </div>
+                            )}
+                        </button>
 
-                    <div id="avatar-dropdown" className="hidden absolute right-0 mt-2 w-64 bg-white border border-zinc-200 rounded-md shadow-lg z-50">
-                      <div className="py-1">
-                        <div className="px-4 py-3 border-b border-zinc-100">
-                          <div className="text-sm font-medium text-zinc-900">
-                            {currentUser.displayName || currentUser.handle || "User"}
-                          </div>
-                          <div className="text-sm text-zinc-500">
-                            {currentUser.handle ? `@${currentUser.handle}` : ""}
+                        <div
+                          id="avatar-dropdown"
+                          className="hidden absolute right-0 mt-2 w-64 bg-white border border-zinc-200 rounded-md shadow-lg z-50"
+                        >
+                          <div className="py-1">
+                            <div className="px-4 py-3 border-b border-zinc-100">
+                              <div className="text-sm font-medium text-zinc-900">
+                                {currentUser.displayName ||
+                                  currentUser.handle || "User"}
+                              </div>
+                              <div className="text-sm text-zinc-500">
+                                {currentUser.handle
+                                  ? `@${currentUser.handle}`
+                                  : ""}
+                              </div>
+                            </div>
+                            <a
+                              href="/settings"
+                              className="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
+                            >
+                              Settings
+                            </a>
+                            <form
+                              method="post"
+                              action="/logout"
+                              className="block"
+                            >
+                              <button
+                                type="submit"
+                                className="w-full text-left px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
+                              >
+                                Sign out
+                              </button>
+                            </form>
                           </div>
                         </div>
-                        <a
-                          href="/settings"
-                          className="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
-                        >
-                          Settings
-                        </a>
-                        <form method="post" action="/logout" className="block">
-                          <button
-                            type="submit"
-                            className="w-full text-left px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 transition-colors"
-                          >
-                            Sign out
-                          </button>
-                        </form>
                       </div>
                     </div>
+                  )
+                  : (
+                    <div className="flex items-center space-x-2">
+                      <button
+                        type="button"
+                        className="px-3 py-1.5 text-sm text-zinc-600 hover:text-zinc-900 hover:bg-zinc-100 rounded-md transition-colors"
+                        _="on click call #waitlist-modal.showModal()"
+                      >
+                        Join Waitlist
+                      </button>
+                      <a
+                        href="/login"
+                        className="px-4 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors"
+                      >
+                        Sign in
+                      </a>
                     </div>
-                  </div>
-                ) : (
-                  <div className="flex items-center space-x-2">
-                    <a
-                      href="/login"
-                      className="px-4 py-1.5 text-sm bg-zinc-900 hover:bg-zinc-800 text-white rounded-md transition-colors"
-                    >
-                      Sign in
-                    </a>
-                  </div>
-                )}
+                  )}
               </div>
             </div>
           </nav>
         )}
-        <div 
-          className={`min-h-screen flex flex-col ${fullWidth ? '' : 'max-w-5xl mx-auto sm:border-x border-zinc-200'}`}
+        <div
+          className={`min-h-screen flex flex-col ${
+            fullWidth ? "" : "max-w-5xl mx-auto sm:border-x border-zinc-200"
+          }`}
           style={backgroundStyle}
         >
-          {showNavigation ? (
-            <main className="flex-1 sm:pt-14">
-              {children}
-            </main>
-          ) : (
-            <main className="flex-1">
-              {children}
-            </main>
-          )}
+          {showNavigation
+            ? (
+              <main className="flex-1 sm:pt-14">
+                {children}
+              </main>
+            )
+            : (
+              <main className="flex-1">
+                {children}
+              </main>
+            )}
         </div>
       </body>
     </html>

frontend/src/shared/fragments/LogLevelBadge.tsx

···
       {level.toUpperCase()}
     </span>
   );
-}
+}

frontend/src/shared/fragments/LogViewer.tsx

···
   formatTimestamp?: (timestamp: string) => string;
 }
 
-export function LogViewer({ 
-  logs, 
+export function LogViewer({
+  logs,
   emptyMessage = "No logs available.",
-  formatTimestamp = (timestamp) => new Date(timestamp).toLocaleString()
+  formatTimestamp = (timestamp) => new Date(timestamp).toLocaleString(),
 }: LogViewerProps) {
   if (logs.length === 0) {
     return (
···
       </div>
     </div>
   );
-}
+}

frontend/src/shared/fragments/Modal.tsx

···
+import { ComponentChildren } from "preact";
+
+interface ModalProps {
+  title: string;
+  description?: string;
+  children: ComponentChildren;
+  onClose?: string; // Hyperscript for close action, defaults to clearing modal-container
+}
+
+export function Modal({
+  title,
+  description,
+  children,
+  onClose = "on click set #modal-container's innerHTML to ''",
+}: ModalProps) {
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+      _={`on click if event.target === me then ${
+        onClose.replace("on click ", "")
+      }`}
+    >
+      <div className="bg-white rounded-lg p-6 max-w-3xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="flex justify-between items-start mb-4">
+          <div>
+            <h2 className="text-2xl font-semibold">{title}</h2>
+            {description && <p className="text-zinc-600 mt-2">{description}</p>}
+          </div>
+          <button
+            type="button"
+            _={onClose}
+            className="text-gray-400 hover:text-gray-600 text-2xl leading-none"
+          >
+            ✕
+          </button>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}

frontend/src/shared/fragments/PageHeader.tsx

···
       {children && <div className="flex items-center gap-4">{children}</div>}
     </div>
   );
-}
+}

frontend/src/shared/fragments/Select.tsx

···
 import type { JSX } from "preact";
 import { cn } from "../../utils/cn.ts";
 
-export interface SelectProps extends JSX.SelectHTMLAttributes<HTMLSelectElement> {
+export interface SelectProps
+  extends JSX.SelectHTMLAttributes<HTMLSelectElement> {
   label?: string;
   error?: string;
 }
···
   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",
+    error
+      ? "border-red-300 focus:border-red-500 focus:ring-red-500"
+      : "focus:border-blue-500 focus:ring-blue-500",
     classProp,
   );
 
···
       <select class={className} {...rest}>
         {children}
       </select>
-      {error && (
-        <p className="mt-1 text-sm text-red-600">{error}</p>
-      )}
+      {error && <p className="mt-1 text-sm text-red-600">{error}</p>}
     </div>
   );
-}
+}

frontend/src/shared/fragments/SliceCard.tsx

···
+import { ActorAvatar } from "./ActorAvatar.tsx";
+import { ActivitySparkline } from "./ActivitySparkline.tsx";
+import { timeAgo } from "../../utils/time.ts";
+import { buildSliceUrlFromView } from "../../utils/slice-params.ts";
+import type { NetworkSlicesSliceDefsSliceView } from "../../client.ts";
+
+interface SliceCardProps {
+  slice: NetworkSlicesSliceDefsSliceView;
+}
+
+export function SliceCard({ slice }: SliceCardProps) {
+  const rkey = slice.uri.split("/").pop() || "";
+  const sliceUrl = buildSliceUrlFromView(slice, rkey);
+
+  return (
+    <a href={sliceUrl} className="block">
+      <div className="bg-white border border-zinc-200 rounded-lg p-4 hover:border-zinc-300 hover:shadow-sm transition-all cursor-pointer">
+        <div className="flex items-start justify-between">
+          {/* Left side - avatar and content */}
+          <div className="flex items-start space-x-3 flex-1">
+            <ActorAvatar profile={slice.creator} size={40} />
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center space-x-2 mb-1">
+                <span className="text-sm font-medium text-zinc-900">
+                  {slice.creator.displayName || slice.creator.handle}
+                </span>
+                <span className="text-sm text-zinc-500">
+                  @{slice.creator.handle}
+                </span>
+                <time
+                  className="text-sm text-zinc-400"
+                  dateTime={slice.createdAt}
+                >
+                  {timeAgo(slice.createdAt)}
+                </time>
+              </div>
+              <div className="group">
+                <h3 className="text-lg font-semibold text-zinc-900 group-hover:text-zinc-700 mb-1">
+                  {slice.name}
+                </h3>
+                <p className="text-sm text-zinc-600 mb-2">{slice.domain}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Right side - activity sparkline */}
+          {
+            /* <div className="flex items-center ml-4 self-center">
+            <ActivitySparkline />
+          </div> */
+          }
+        </div>
+      </div>
+    </a>
+  );
+}

frontend/src/shared/fragments/Textarea.tsx

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

frontend/src/utils/client.ts

···
 // Helper function to get a slice-specific AT Protocol client
 export function getSliceClient(
   context: AuthContext,
-  sliceId: string
+  sliceId: string,
+  sliceOwnerDid?: string,
 ): AtProtoClient {
   const API_URL = Deno.env.get("API_URL")!;
 
-  if (!context.currentUser.sub) {
-    throw new Error("User DID is required to create slice client");
+  // Use provided sliceOwnerDid or fall back to current user's DID
+  const ownerDid = sliceOwnerDid || context.currentUser.sub;
+
+  if (!ownerDid) {
+    throw new Error("Owner DID is required to create slice client");
   }
 
   const sliceUri = buildAtUri({
-    did: context.currentUser.sub,
+    did: ownerDid,
     collection: "network.slices.slice",
     rkey: sliceId,
   });
-  return new AtProtoClient(API_URL, sliceUri, atprotoClient.oauth);
+
+  // Use authenticated client if user is authenticated, otherwise public client
+  return context.currentUser.sub
+    ? new AtProtoClient(API_URL, sliceUri, atprotoClient.oauth)
+    : new AtProtoClient(API_URL, sliceUri);
 }

frontend/src/utils/cn.ts

···
 
 export function cn(...inputs: ClassValue[]): string {
   return twMerge(clsx(inputs));
-}
+}

frontend/src/utils/htmx.ts

···
       "HX-Redirect": url,
     },
   });
-}
+}

frontend/src/utils/render.tsx

···
     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,
···
     status: options?.status || 200,
     headers,
   });
-}
+}

frontend/src/utils/slice-params.ts

···
   sliceId: string;
 }
 
-export function extractSliceParams(params?: URLPatternResult): SliceParams | null {
+export function extractSliceParams(
+  params?: URLPatternResult,
+): SliceParams | null {
   const handle = params?.pathname.groups.handle;
   const sliceId = params?.pathname.groups.rkey;
 
···
   return { handle, sliceId };
 }
 
-export function buildSliceUrl(handle: string, sliceId: string, path?: string): string {
+export function buildSliceUrl(
+  handle: string,
+  sliceId: string,
+  path?: string,
+): string {
   const basePath = `/profile/${handle}/slice/${sliceId}`;
   return path ? `${basePath}/${path}` : basePath;
 }
 
 // Helper to build slice URLs from slice view
-export function buildSliceUrlFromView(slice: NetworkSlicesSliceDefsSliceView, sliceId: string, path?: string): string {
-  const handle = slice.creator?.handle || 'unknown';
+export function buildSliceUrlFromView(
+  slice: NetworkSlicesSliceDefsSliceView,
+  sliceId: string,
+  path?: string,
+): string {
+  const handle = slice.creator?.handle || "unknown";
   return buildSliceUrl(handle, sliceId, path);
-}
+}

frontend/src/utils/time.ts

···
     second: "2-digit",
     fractionalSecondDigits: 3,
   });
-}
+}
+
+export function timeAgo(dateString: string): string {
+  const now = new Date();
+  const date = new Date(dateString);
+  const diffInMs = now.getTime() - date.getTime();
+  const diffInMinutes = Math.floor(diffInMs / (1000 * 60));
+  const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60));
+  const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
+
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes}m ago`;
+  } else if (diffInHours < 24) {
+    return `${diffInHours}h ago`;
+  } else {
+    return `${diffInDays}d ago`;
+  }
+}