oauth client management almost there, still some tidying up to do

api/migrations/010_oauth_clients.sql

···
+-- Create oauth_clients table
+CREATE TABLE oauth_clients (
+    id SERIAL PRIMARY KEY,
+    slice_uri TEXT NOT NULL,
+    client_id TEXT UNIQUE NOT NULL,
+    registration_access_token TEXT,
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    created_by_did TEXT NOT NULL
+);
+
+-- Create indexes for efficient lookups
+CREATE INDEX idx_oauth_clients_slice_uri ON oauth_clients (slice_uri);
+CREATE INDEX idx_oauth_clients_client_id ON oauth_clients (client_id);

api/scripts/generate_typescript.ts

···
       },
     ],
   });
+
+  // OAuth client interfaces
+  sourceFile.addInterface({
+    name: "CreateOAuthClientRequest",
+    isExported: true,
+    properties: [
+      { name: "clientName", type: "string" },
+      { name: "redirectUris", type: "string[]" },
+      { name: "grantTypes", type: "string[]", hasQuestionToken: true },
+      { name: "responseTypes", type: "string[]", hasQuestionToken: true },
+      { name: "scope", type: "string", hasQuestionToken: true },
+      { name: "clientUri", type: "string", hasQuestionToken: true },
+      { name: "logoUri", type: "string", hasQuestionToken: true },
+      { name: "tosUri", type: "string", hasQuestionToken: true },
+      { name: "policyUri", type: "string", hasQuestionToken: true },
+    ],
+  });
+
+  sourceFile.addInterface({
+    name: "OAuthClientDetails",
+    isExported: true,
+    properties: [
+      { name: "clientId", type: "string" },
+      { name: "clientSecret", type: "string", hasQuestionToken: true },
+      { name: "clientName", type: "string" },
+      { name: "redirectUris", type: "string[]" },
+      { name: "grantTypes", type: "string[]" },
+      { name: "responseTypes", type: "string[]" },
+      { name: "scope", type: "string", hasQuestionToken: true },
+      { name: "clientUri", type: "string", hasQuestionToken: true },
+      { name: "logoUri", type: "string", hasQuestionToken: true },
+      { name: "tosUri", type: "string", hasQuestionToken: true },
+      { name: "policyUri", type: "string", hasQuestionToken: true },
+      { name: "createdAt", type: "string" },
+      { name: "createdByDid", type: "string" },
+    ],
+  });
+
+  sourceFile.addInterface({
+    name: "ListOAuthClientsResponse",
+    isExported: true,
+    properties: [
+      { name: "clients", type: "OAuthClientDetails[]" },
+    ],
+  });
+
+  sourceFile.addInterface({
+    name: "UpdateOAuthClientRequest",
+    isExported: true,
+    properties: [
+      { name: "clientId", type: "string" },
+      { name: "clientName", type: "string", hasQuestionToken: true },
+      { name: "redirectUris", type: "string[]", hasQuestionToken: true },
+      { name: "scope", type: "string", hasQuestionToken: true },
+      { name: "clientUri", type: "string", hasQuestionToken: true },
+      { name: "logoUri", type: "string", hasQuestionToken: true },
+      { name: "tosUri", type: "string", hasQuestionToken: true },
+      { name: "policyUri", type: "string", hasQuestionToken: true },
+    ],
+  });
+
+  sourceFile.addInterface({
+    name: "DeleteOAuthClientResponse",
+    isExported: true,
+    properties: [
+      { name: "success", type: "boolean" },
+      { name: "message", type: "string" },
+    ],
+  });
 }
 
 // Convert lexicon type to TypeScript type
···
           statements: [
             `const requestParams = { slice: this.sliceUri, ...params };`,
             `return await this.makeRequest<SyncUserCollectionsResult>('social.slices.slice.syncUserCollections', 'POST', requestParams);`,
+          ],
+        });
+
+        // Add OAuth client management methods
+        classDeclaration.addMethod({
+          name: "createOAuthClient",
+          parameters: [{ name: "params", type: "CreateOAuthClientRequest" }],
+          returnType: "Promise<OAuthClientDetails>",
+          isAsync: true,
+          statements: [
+            `const requestParams = { ...params, sliceUri: this.sliceUri };`,
+            `return await this.makeRequest<OAuthClientDetails>('social.slices.slice.createOAuthClient', 'POST', requestParams);`,
+          ],
+        });
+
+        classDeclaration.addMethod({
+          name: "getOAuthClients",
+          returnType: "Promise<ListOAuthClientsResponse>",
+          isAsync: true,
+          statements: [
+            `const requestParams = { slice: this.sliceUri };`,
+            `return await this.makeRequest<ListOAuthClientsResponse>('social.slices.slice.getOAuthClients', 'GET', requestParams);`,
+          ],
+        });
+
+        classDeclaration.addMethod({
+          name: "updateOAuthClient",
+          parameters: [{ name: "params", type: "UpdateOAuthClientRequest" }],
+          returnType: "Promise<OAuthClientDetails>",
+          isAsync: true,
+          statements: [
+            `const requestParams = { ...params, sliceUri: this.sliceUri };`,
+            `return await this.makeRequest<OAuthClientDetails>('social.slices.slice.updateOAuthClient', 'POST', requestParams);`,
+          ],
+        });
+
+        classDeclaration.addMethod({
+          name: "deleteOAuthClient",
+          parameters: [{ name: "clientId", type: "string" }],
+          returnType: "Promise<DeleteOAuthClientResponse>",
+          isAsync: true,
+          statements: [
+            `return await this.makeRequest<DeleteOAuthClientResponse>('social.slices.slice.deleteOAuthClient', 'POST', { clientId });`,
           ],
         });
       }

api/src/database.rs

···
 use base64::{Engine as _, engine::general_purpose};
 
 use crate::errors::DatabaseError;
-use crate::models::{Actor, CollectionStats, IndexedRecord, Record, WhereCondition, WhereClause, SortField};
+use crate::models::{Actor, CollectionStats, IndexedRecord, Record, WhereCondition, WhereClause, SortField, OAuthClient};
 use std::collections::HashMap;
 
 
···
         .await?;
 
         Ok(row.and_then(|r| r.domain))
+    }
+
+    pub async fn create_oauth_client(
+        &self,
+        slice_uri: &str,
+        client_id: &str,
+        registration_access_token: Option<&str>,
+        created_by_did: &str,
+    ) -> Result<OAuthClient, DatabaseError> {
+        let client = sqlx::query_as!(
+            OAuthClient,
+            r#"
+            INSERT INTO oauth_clients (slice_uri, client_id, registration_access_token, created_by_did)
+            VALUES ($1, $2, $3, $4)
+            RETURNING id, slice_uri, client_id, registration_access_token, created_at as "created_at!", created_by_did
+            "#,
+            slice_uri,
+            client_id,
+            registration_access_token,
+            created_by_did
+        )
+        .fetch_one(&self.pool)
+        .await?;
+
+        Ok(client)
+    }
+
+    pub async fn get_oauth_clients_for_slice(&self, slice_uri: &str) -> Result<Vec<OAuthClient>, DatabaseError> {
+        let clients = sqlx::query_as!(
+            OAuthClient,
+            r#"
+            SELECT id, slice_uri, client_id, registration_access_token, created_at as "created_at!", created_by_did
+            FROM oauth_clients
+            WHERE slice_uri = $1
+            ORDER BY created_at DESC
+            "#,
+            slice_uri
+        )
+        .fetch_all(&self.pool)
+        .await?;
+
+        Ok(clients)
+    }
+
+    pub async fn get_oauth_client_by_id(&self, client_id: &str) -> Result<Option<OAuthClient>, DatabaseError> {
+        let client = sqlx::query_as!(
+            OAuthClient,
+            r#"
+            SELECT id, slice_uri, client_id, registration_access_token, created_at as "created_at!", created_by_did
+            FROM oauth_clients
+            WHERE client_id = $1
+            "#,
+            client_id
+        )
+        .fetch_optional(&self.pool)
+        .await?;
+
+        Ok(client)
+    }
+
+    pub async fn delete_oauth_client(&self, client_id: &str) -> Result<(), DatabaseError> {
+        let result = sqlx::query!(
+            r#"
+            DELETE FROM oauth_clients
+            WHERE client_id = $1
+            "#,
+            client_id
+        )
+        .execute(&self.pool)
+        .await?;
+
+        if result.rows_affected() == 0 {
+            return Err(DatabaseError::RecordNotFound { uri: client_id.to_string() });
+        }
+
+        Ok(())
     }
 
 }

api/src/errors.rs

···
 use thiserror::Error;
+use axum::{
+    http::StatusCode,
+    response::{IntoResponse, Response},
+    Json,
+};
 
 
 #[derive(Error, Debug)]
···
 
     #[error("error-slice-app-3 Server bind failed: {0}")]
     ServerBind(#[from] std::io::Error),
+
+    #[error("error-slice-app-4 Internal server error: {0}")]
+    Internal(String),
+
+    #[error("error-slice-app-5 Resource not found: {0}")]
+    NotFound(String),
+
+    #[error("error-slice-app-6 Bad request: {0}")]
+    BadRequest(String),
 }
 
 #[derive(Error, Debug)]
···
     
 }
 
+impl IntoResponse for AppError {
+    fn into_response(self) -> Response {
+        let (status, error_message) = match self {
+            AppError::BadRequest(msg) => (StatusCode::BAD_REQUEST, msg),
+            AppError::NotFound(msg) => (StatusCode::NOT_FOUND, msg),
+            AppError::Internal(msg) => (StatusCode::INTERNAL_SERVER_ERROR, msg),
+            AppError::DatabaseConnection(e) => (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()),
+            AppError::Migration(e) => (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()),
+            AppError::ServerBind(e) => (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()),
+        };
+
+        let body = Json(serde_json::json!({
+            "error": error_message
+        }));
+
+        (status, body).into_response()
+    }
+}
+

api/src/handler_oauth_clients.rs

···
+use axum::{
+    extract::{Query, State},
+    http::HeaderMap,
+    response::Json,
+    Json as ExtractJson,
+};
+use serde::{Deserialize, Serialize};
+use reqwest::Client;
+
+use crate::{
+    AppState,
+    auth,
+    errors::AppError,
+    models::{
+        CreateOAuthClientRequest, OAuthClientDetails, ListOAuthClientsResponse,
+        UpdateOAuthClientRequest, DeleteOAuthClientResponse
+    },
+};
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct GetOAuthClientsQuery {
+    pub slice: String,
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct DeleteOAuthClientRequest {
+    pub client_id: String,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(rename_all = "snake_case")]
+struct AipClientRegistrationRequest {
+    pub client_name: String,
+    pub redirect_uris: Vec<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub grant_types: Option<Vec<String>>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub response_types: Option<Vec<String>>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub scope: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub client_uri: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub logo_uri: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub tos_uri: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub policy_uri: Option<String>,
+}
+
+#[derive(Serialize, Deserialize)]
+#[serde(rename_all = "snake_case")]
+struct AipClientRegistrationResponse {
+    pub client_id: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub client_secret: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub registration_access_token: Option<String>,
+    pub client_name: String,
+    pub redirect_uris: Vec<String>,
+    pub grant_types: Vec<String>,
+    pub response_types: Vec<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub scope: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub client_uri: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub logo_uri: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub tos_uri: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub policy_uri: Option<String>,
+    // Additional fields that AIP returns but we don't need to send
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub token_endpoint_auth_method: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub registration_client_uri: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub client_id_issued_at: Option<i64>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub client_secret_expires_at: Option<i64>,
+}
+
+pub async fn create_oauth_client(
+    State(state): State<AppState>,
+    headers: HeaderMap,
+    ExtractJson(request): ExtractJson<CreateOAuthClientRequest>,
+) -> Result<Json<OAuthClientDetails>, AppError> {
+    // Debug log the incoming request
+    tracing::debug!("Incoming OAuth client registration request: {:?}", request);
+
+    // Validate request
+    if request.client_name.trim().is_empty() {
+        return Err(AppError::BadRequest("Client name cannot be empty".to_string()));
+    }
+
+    if request.redirect_uris.is_empty() {
+        return Err(AppError::BadRequest("At least one redirect URI is required".to_string()));
+    }
+
+    // Validate redirect URIs have basic URL format
+    for uri in &request.redirect_uris {
+        if !uri.starts_with("http://") && !uri.starts_with("https://") {
+            return Err(AppError::BadRequest(format!("Redirect URI must use HTTP or HTTPS: {}", uri)));
+        }
+        if uri.trim().is_empty() {
+            return Err(AppError::BadRequest("Redirect URI cannot be empty".to_string()));
+        }
+    }
+
+    // Extract and verify authentication
+    let token = auth::extract_bearer_token(&headers)
+        .map_err(|_| AppError::BadRequest("Missing or invalid Authorization header".to_string()))?;
+    let user_info = auth::verify_oauth_token(&token, &state.config.auth_base_url).await
+        .map_err(|_| AppError::BadRequest("Invalid or expired access token".to_string()))?;
+
+    let user_did = user_info.sub;
+
+    // Register client with AIP
+    let aip_base_url = &state.config.auth_base_url;
+
+    let client = Client::new();
+    let aip_request = AipClientRegistrationRequest {
+        client_name: request.client_name.clone(),
+        redirect_uris: request.redirect_uris.clone(),
+        grant_types: request.grant_types.clone(),
+        response_types: request.response_types.clone(),
+        scope: request.scope.clone(),
+        client_uri: request.client_uri.clone(),
+        logo_uri: request.logo_uri.clone(),
+        tos_uri: request.tos_uri.clone(),
+        policy_uri: request.policy_uri.clone(),
+    };
+
+    let registration_url = format!("{}/oauth/clients/register", aip_base_url);
+    tracing::debug!("Attempting to register OAuth client at: {}", registration_url);
+    tracing::debug!("Sending AIP request: {:?}", aip_request);
+
+    let aip_response = client
+        .post(&registration_url)
+        .json(&aip_request)
+        .send()
+        .await
+        .map_err(|e| AppError::Internal(format!("Failed to register client with AIP: {}", e)))?;
+
+    let status = aip_response.status();
+    tracing::debug!("AIP registration response status: {}", status);
+
+    if !status.is_success() {
+        let error_text = aip_response.text().await.unwrap_or_else(|_| "Unknown error".to_string());
+        tracing::error!("AIP registration failed with status {}: {}", status, error_text);
+        return Err(AppError::Internal(format!("AIP registration failed with status {}: {}", status, error_text)));
+    }
+
+    tracing::debug!("Parsing AIP response JSON...");
+
+    // Get the response body as text first to debug what we're receiving
+    let response_body = aip_response
+        .text()
+        .await
+        .map_err(|e| AppError::Internal(format!("Failed to get response body: {}", e)))?;
+
+    tracing::debug!("AIP response body: {}", response_body);
+
+    // Try to parse the JSON from the text
+    let aip_client: AipClientRegistrationResponse = serde_json::from_str(&response_body)
+        .map_err(|e| {
+            tracing::error!("Failed to parse AIP response JSON: {}", e);
+            tracing::error!("Raw response was: {}", response_body);
+            AppError::Internal(format!("Failed to parse AIP response: {}", e))
+        })?;
+
+    tracing::debug!("Successfully parsed AIP response, client_id: {}", aip_client.client_id);
+
+    // Store the client info in our database
+    tracing::debug!("Storing OAuth client in database...");
+    let oauth_client = state.database
+        .create_oauth_client(
+            &request.slice_uri,
+            &aip_client.client_id,
+            aip_client.registration_access_token.as_deref(),
+            &user_did,
+        )
+        .await
+        .map_err(|e| {
+            tracing::error!("Failed to store OAuth client in database: {}", e);
+            AppError::Internal(format!("Failed to store OAuth client: {}", e))
+        })?;
+
+    tracing::debug!("Successfully stored OAuth client in database");
+
+    // Return the full client details from AIP
+    let response = OAuthClientDetails {
+        client_id: aip_client.client_id,
+        client_secret: aip_client.client_secret,
+        client_name: aip_client.client_name,
+        redirect_uris: aip_client.redirect_uris,
+        grant_types: aip_client.grant_types,
+        response_types: aip_client.response_types,
+        scope: aip_client.scope,
+        client_uri: aip_client.client_uri,
+        logo_uri: aip_client.logo_uri,
+        tos_uri: aip_client.tos_uri,
+        policy_uri: aip_client.policy_uri,
+        created_at: oauth_client.created_at,
+        created_by_did: oauth_client.created_by_did,
+    };
+
+    Ok(Json(response))
+}
+
+pub async fn get_oauth_clients(
+    State(state): State<AppState>,
+    headers: HeaderMap,
+    Query(params): Query<GetOAuthClientsQuery>,
+) -> Result<Json<ListOAuthClientsResponse>, AppError> {
+    tracing::debug!("get_oauth_clients called with slice parameter: {}", params.slice);
+
+    // Log all headers for debugging
+    tracing::debug!("Request headers: {:?}", headers);
+
+    // Extract and verify authentication
+    let token = auth::extract_bearer_token(&headers)
+        .map_err(|e| {
+            tracing::error!("Failed to extract bearer token: {:?}", e);
+            AppError::BadRequest("Missing or invalid Authorization header".to_string())
+        })?;
+
+    tracing::debug!("Extracted bearer token (first 20 chars): {}...",
+        if token.len() > 20 { &token[..20] } else { &token });
+
+    auth::verify_oauth_token(&token, &state.config.auth_base_url).await
+        .map_err(|e| {
+            tracing::error!("OAuth token verification failed: {:?}", e);
+            AppError::BadRequest("Invalid or expired access token".to_string())
+        })?;
+
+    tracing::debug!("OAuth token verification successful");
+
+    // Get clients from our database
+    let clients = state.database
+        .get_oauth_clients_for_slice(&params.slice)
+        .await
+        .map_err(|e| AppError::Internal(format!("Failed to fetch OAuth clients: {}", e)))?;
+
+    tracing::debug!("Found {} OAuth clients in database for slice: {}", clients.len(), params.slice);
+
+    if clients.is_empty() {
+        return Ok(Json(ListOAuthClientsResponse { clients: vec![] }));
+    }
+
+    // Fetch detailed info from AIP for each client
+    let aip_base_url = &state.config.auth_base_url;
+    let client = Client::new();
+    let mut client_details = Vec::new();
+
+    for oauth_client in clients {
+        // Fetch client details from AIP
+        let aip_url = format!("{}/oauth/clients/{}", aip_base_url, oauth_client.client_id);
+        tracing::debug!("Fetching client details from AIP: {}", aip_url);
+
+        // Use registration access token if available for authentication
+        let mut request_builder = client.get(&aip_url);
+        if let Some(token) = &oauth_client.registration_access_token {
+            request_builder = request_builder.bearer_auth(token);
+            tracing::debug!("Using registration access token for authentication");
+        } else {
+            tracing::debug!("No registration access token available");
+        }
+
+        let aip_response = request_builder.send().await;
+
+        match aip_response {
+            Ok(response) => {
+                let status = response.status();
+                tracing::debug!("AIP response status for {}: {}", oauth_client.client_id, status);
+
+                if status.is_success() {
+                    // Get the response body as text first to log it
+                    match response.text().await {
+                        Ok(response_text) => {
+                            tracing::debug!("AIP response body for {}: {}", oauth_client.client_id, response_text);
+
+                            // Try to parse the JSON
+                            match serde_json::from_str::<AipClientRegistrationResponse>(&response_text) {
+                                Ok(aip_client) => {
+                                    tracing::debug!("Successfully parsed AIP client details for {}", oauth_client.client_id);
+                                    client_details.push(OAuthClientDetails {
+                                        client_id: aip_client.client_id,
+                                        client_secret: aip_client.client_secret,
+                                        client_name: aip_client.client_name,
+                                        redirect_uris: aip_client.redirect_uris,
+                                        grant_types: aip_client.grant_types,
+                                        response_types: aip_client.response_types,
+                                        scope: aip_client.scope,
+                                        client_uri: aip_client.client_uri,
+                                        logo_uri: aip_client.logo_uri,
+                                        tos_uri: aip_client.tos_uri,
+                                        policy_uri: aip_client.policy_uri,
+                                        created_at: oauth_client.created_at,
+                                        created_by_did: oauth_client.created_by_did,
+                                    });
+                                }
+                                Err(parse_error) => {
+                                    tracing::error!("Failed to parse AIP client JSON for {}: {}", oauth_client.client_id, parse_error);
+                                }
+                            }
+                        }
+                        Err(text_error) => {
+                            tracing::error!("Failed to get AIP response text for {}: {}", oauth_client.client_id, text_error);
+                        }
+                    }
+                } else {
+                    // Handle non-success status codes
+                    match response.text().await {
+                        Ok(error_text) => {
+                            tracing::error!("AIP client fetch failed with status {} for {}: {}", status, oauth_client.client_id, error_text);
+                        }
+                        Err(_) => {
+                            tracing::error!("AIP client fetch failed with status {} for {}", status, oauth_client.client_id);
+                        }
+                    }
+                }
+            }
+            Err(e) => {
+                tracing::error!("AIP client fetch error for {}: {}", oauth_client.client_id, e);
+                // If we can't fetch from AIP, create a minimal response
+                client_details.push(OAuthClientDetails {
+                    client_id: oauth_client.client_id.clone(),
+                    client_secret: None,
+                    client_name: "Unknown".to_string(),
+                    redirect_uris: vec![],
+                    grant_types: vec!["authorization_code".to_string()],
+                    response_types: vec!["code".to_string()],
+                    scope: None,
+                    client_uri: None,
+                    logo_uri: None,
+                    tos_uri: None,
+                    policy_uri: None,
+                    created_at: oauth_client.created_at,
+                    created_by_did: oauth_client.created_by_did,
+                });
+            }
+        }
+    }
+
+    Ok(Json(ListOAuthClientsResponse { clients: client_details }))
+}
+
+pub async fn update_oauth_client(
+    State(state): State<AppState>,
+    headers: HeaderMap,
+    ExtractJson(request): ExtractJson<UpdateOAuthClientRequest>,
+) -> Result<Json<OAuthClientDetails>, AppError> {
+    let client_id = request.client_id.clone();
+    
+    // Extract and verify authentication
+    let token = auth::extract_bearer_token(&headers)
+        .map_err(|_| AppError::BadRequest("Missing or invalid Authorization header".to_string()))?;
+    auth::verify_oauth_token(&token, &state.config.auth_base_url).await
+        .map_err(|_| AppError::BadRequest("Invalid or expired access token".to_string()))?;
+
+    // Get the client from our database to get the registration access token
+    let oauth_client = state.database
+        .get_oauth_client_by_id(&client_id)
+        .await
+        .map_err(|e| AppError::Internal(format!("Failed to fetch OAuth client: {}", e)))?
+        .ok_or_else(|| AppError::NotFound("OAuth client not found".to_string()))?;
+
+    let registration_token = oauth_client.registration_access_token
+        .ok_or_else(|| AppError::Internal("Client missing registration access token".to_string()))?;
+
+    // Build AIP update request
+    let aip_request = AipClientRegistrationRequest {
+        client_name: request.client_name.unwrap_or_default(),
+        redirect_uris: request.redirect_uris.unwrap_or_default(),
+        grant_types: None, // Keep existing
+        response_types: None, // Keep existing
+        scope: request.scope,
+        client_uri: request.client_uri,
+        logo_uri: request.logo_uri,
+        tos_uri: request.tos_uri,
+        policy_uri: request.policy_uri,
+    };
+
+    let aip_base_url = &state.config.auth_base_url;
+    let client = Client::new();
+    let update_url = format!("{}/oauth/clients/{}", aip_base_url, client_id);
+    
+    tracing::debug!("Updating OAuth client at: {}", update_url);
+    tracing::debug!("Sending AIP update request: {:?}", aip_request);
+
+    let aip_response = client
+        .put(&update_url)
+        .bearer_auth(&registration_token)
+        .json(&aip_request)
+        .send()
+        .await
+        .map_err(|e| AppError::Internal(format!("Failed to update client with AIP: {}", e)))?;
+
+    let status = aip_response.status();
+    tracing::debug!("AIP update response status: {}", status);
+
+    if !status.is_success() {
+        let error_text = aip_response.text().await.unwrap_or_else(|_| "Unknown error".to_string());
+        tracing::error!("AIP update failed with status {}: {}", status, error_text);
+        return Err(AppError::Internal(format!("AIP update failed with status {}: {}", status, error_text)));
+    }
+
+    // Parse the response
+    let response_body = aip_response
+        .text()
+        .await
+        .map_err(|e| AppError::Internal(format!("Failed to get response body: {}", e)))?;
+
+    tracing::debug!("AIP update response body: {}", response_body);
+
+    let aip_client: AipClientRegistrationResponse = serde_json::from_str(&response_body)
+        .map_err(|e| {
+            tracing::error!("Failed to parse AIP response JSON: {}", e);
+            AppError::Internal(format!("Failed to parse AIP response: {}", e))
+        })?;
+
+    // Return the updated client details
+    let response = OAuthClientDetails {
+        client_id: aip_client.client_id,
+        client_secret: aip_client.client_secret,
+        client_name: aip_client.client_name,
+        redirect_uris: aip_client.redirect_uris,
+        grant_types: aip_client.grant_types,
+        response_types: aip_client.response_types,
+        scope: aip_client.scope,
+        client_uri: aip_client.client_uri,
+        logo_uri: aip_client.logo_uri,
+        tos_uri: aip_client.tos_uri,
+        policy_uri: aip_client.policy_uri,
+        created_at: oauth_client.created_at,
+        created_by_did: oauth_client.created_by_did,
+    };
+
+    Ok(Json(response))
+}
+
+pub async fn delete_oauth_client(
+    State(state): State<AppState>,
+    headers: HeaderMap,
+    ExtractJson(request): ExtractJson<DeleteOAuthClientRequest>,
+) -> Result<Json<DeleteOAuthClientResponse>, AppError> {
+    let client_id = request.client_id;
+    // Extract and verify authentication
+    let token = auth::extract_bearer_token(&headers)
+        .map_err(|_| AppError::BadRequest("Missing or invalid Authorization header".to_string()))?;
+    auth::verify_oauth_token(&token, &state.config.auth_base_url).await
+        .map_err(|_| AppError::BadRequest("Invalid or expired access token".to_string()))?;
+
+    // Get the client from our database first
+    let oauth_client = state.database
+        .get_oauth_client_by_id(&client_id)
+        .await
+        .map_err(|e| AppError::Internal(format!("Failed to fetch OAuth client: {}", e)))?
+        .ok_or_else(|| AppError::NotFound("OAuth client not found".to_string()))?;
+
+    // Delete from AIP if we have a registration access token
+    if let Some(registration_token) = &oauth_client.registration_access_token {
+        let aip_base_url = &state.config.auth_base_url;
+
+        let client = Client::new();
+        let _aip_response = client
+            .delete(&format!("{}/oauth/clients/{}", aip_base_url, client_id))
+            .bearer_auth(registration_token)
+            .send()
+            .await;
+        // We continue even if AIP deletion fails, as we want to clean up our database
+    }
+
+    // Delete from our database
+    state.database
+        .delete_oauth_client(&client_id)
+        .await
+        .map_err(|e| AppError::Internal(format!("Failed to delete OAuth client: {}", e)))?;
+
+    Ok(Json(DeleteOAuthClientResponse {
+        success: true,
+        message: format!("OAuth client {} deleted successfully", client_id),
+    }))
+}

api/src/main.rs

···
 mod handler_jetstream_status;
 mod handler_jobs;
 mod handler_logs;
+mod handler_oauth_clients;
 mod handler_openapi_spec;
 mod handler_stats;
 mod handler_sync;
···
         .route(
             "/xrpc/social.slices.slice.getActors",
             post(handler_get_actors::get_actors),
+        )
+        // OAuth client management endpoints
+        .route(
+            "/xrpc/social.slices.slice.createOAuthClient",
+            post(handler_oauth_clients::create_oauth_client),
+        )
+        .route(
+            "/xrpc/social.slices.slice.getOAuthClients",
+            get(handler_oauth_clients::get_oauth_clients),
+        )
+        .route(
+            "/xrpc/social.slices.slice.updateOAuthClient",
+            post(handler_oauth_clients::update_oauth_client),
+        )
+        .route(
+            "/xrpc/social.slices.slice.deleteOAuthClient",
+            post(handler_oauth_clients::delete_oauth_client),
         )
         // Dynamic collection-specific XRPC endpoints (wildcard routes must come last)
         .route(

api/src/models.rs

···
     pub cursor: Option<String>,
     pub message: Option<String>,
 }
+
+#[derive(Debug, Clone, Serialize, Deserialize, sqlx::FromRow)]
+#[serde(rename_all = "camelCase")]
+pub struct OAuthClient {
+    pub id: i32,
+    pub slice_uri: String,
+    pub client_id: String,
+    pub registration_access_token: Option<String>,
+    pub created_at: DateTime<Utc>,
+    pub created_by_did: String,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct CreateOAuthClientRequest {
+    pub slice_uri: String,
+    pub client_name: String,
+    pub redirect_uris: Vec<String>,
+    pub grant_types: Option<Vec<String>>,
+    pub response_types: Option<Vec<String>>,
+    pub scope: Option<String>,
+    pub client_uri: Option<String>,
+    pub logo_uri: Option<String>,
+    pub tos_uri: Option<String>,
+    pub policy_uri: Option<String>,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct OAuthClientDetails {
+    pub client_id: String,
+    pub client_secret: Option<String>,
+    pub client_name: String,
+    pub redirect_uris: Vec<String>,
+    pub grant_types: Vec<String>,
+    pub response_types: Vec<String>,
+    pub scope: Option<String>,
+    pub client_uri: Option<String>,
+    pub logo_uri: Option<String>,
+    pub tos_uri: Option<String>,
+    pub policy_uri: Option<String>,
+    pub created_at: DateTime<Utc>,
+    pub created_by_did: String,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ListOAuthClientsResponse {
+    pub clients: Vec<OAuthClientDetails>,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct UpdateOAuthClientRequest {
+    pub client_id: String,
+    pub client_name: Option<String>,
+    pub redirect_uris: Option<Vec<String>>,
+    pub scope: Option<String>,
+    pub client_uri: Option<String>,
+    pub logo_uri: Option<String>,
+    pub tos_uri: Option<String>,
+    pub policy_uri: Option<String>,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct DeleteOAuthClientResponse {
+    pub success: bool,
+    pub message: String,
+}

docker-compose.yml

···
       - default
 
   aip:
-    image: ghcr.io/bigmoves/aip/aip-sqlite:main-7b2c1ee
+    image: ghcr.io/bigmoves/aip/aip-sqlite:main-5bbc55c
     environment:
       EXTERNAL_BASE: "${AIP_EXTERNAL_BASE:-http://localhost:8081}"
       HTTP_PORT: "8081"
···
       ADMIN_DIDS: "did:plc:bcgltzqazw5tb6k2g3ttenbj"
       DPOP_NONCE_SEED: "local-dev-nonce-seed"
       RUST_LOG: "aip=trace,sqlx=debug,tower_http=debug,atproto_identity=debug,atproto_oauth=debug"
+      ATPROTO_OAUTH_SIGNING_KEYS: "z42tzC26Phdvnzmm7mVgLVgH6cDy3i1A2UcH8m6XbgKVJ4zk"
+      OAUTH_SIGNING_KEYS: "z42tzC26Phdvnzmm7mVgLVgH6cDy3i1A2UcH8m6XbgKVJ4zk"
     ports:
       - "8081:8081"
     volumes:

frontend/deno.lock

···
       "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="
     }
   },
+  "redirects": {
+    "https://esm.sh/@atproto/crypto": "https://esm.sh/@atproto/crypto@0.4.4",
+    "https://esm.sh/@noble/curves@^1.7.0/p256?target=denonext": "https://esm.sh/@noble/curves@1.9.7/p256?target=denonext",
+    "https://esm.sh/@noble/curves@^1.7.0/secp256k1?target=denonext": "https://esm.sh/@noble/curves@1.9.7/secp256k1?target=denonext",
+    "https://esm.sh/@noble/hashes@^1.6.1/sha256?target=denonext": "https://esm.sh/@noble/hashes@1.8.0/sha256?target=denonext",
+    "https://esm.sh/@noble/hashes@^1.6.1/utils?target=denonext": "https://esm.sh/@noble/hashes@1.8.0/utils?target=denonext",
+    "https://esm.sh/multiformats@^9.4.2/basics?target=denonext": "https://esm.sh/multiformats@9.9.0/basics?target=denonext"
+  },
+  "remote": {
+    "https://deno.land/std@0.208.0/encoding/_util.ts": "f368920189c4fe6592ab2e93bd7ded8f3065b84f95cd3e036a4a10a75649dcba",
+    "https://deno.land/std@0.208.0/encoding/base64.ts": "81c0ecff5ccb402def58ca03d8bd245bd01da15a077d3362b568e991aa10f4d9",
+    "https://deno.land/std@0.208.0/encoding/base64url.ts": "b15a4c8c988362536334a31dbb75a2429346f8c0f9e2662f961567c5dd2f58e1",
+    "https://esm.sh/@atproto/crypto@0.4.4": "1baac5a764fe567bb3d4e9e96c24a48d3f53f50c27cb49d379aa438d1025bed1",
+    "https://esm.sh/@atproto/crypto@0.4.4/denonext/crypto.mjs": "aabf92bb5f30066fe9c6f8c57fe3bd34ef36fd8a5c0c241232898d9cffb505ca",
+    "https://esm.sh/@noble/curves@1.9.7/denonext/_shortw_utils.mjs": "d62ddfbe9cb2215269d9b56447c5aecc342999419cb9f6bd66e991ee7bc28d35",
+    "https://esm.sh/@noble/curves@1.9.7/denonext/abstract/curve.mjs": "ca7c724c2cf4e0cd5f9d0c3eed4b3081cdb8c017e12638a2722fd76922ff9c44",
+    "https://esm.sh/@noble/curves@1.9.7/denonext/abstract/hash-to-curve.mjs": "bac93e692bd50bb338d104a59b841acb2a6246d131122914b9e78e029abb0d63",
+    "https://esm.sh/@noble/curves@1.9.7/denonext/abstract/modular.mjs": "cfa09121cbd673d611b9f696ed8119c10df4fa0fbaecbca19233909f7c6f504d",
+    "https://esm.sh/@noble/curves@1.9.7/denonext/abstract/weierstrass.mjs": "28c5cbd946e5dfed647201f66148c1c383c26185c35434872c2b9b512c7e3957",
+    "https://esm.sh/@noble/curves@1.9.7/denonext/nist.mjs": "235e7e9002fda632292709284783e3265444c90b19fedb1a9a48d121d979bd08",
+    "https://esm.sh/@noble/curves@1.9.7/denonext/p256.mjs": "7840b9d0fd088d3a4e9727883b57a8db59f4815662b9b589c19555fde2580eea",
+    "https://esm.sh/@noble/curves@1.9.7/denonext/secp256k1.mjs": "942283ed893724ae84fb8d3764f79695ca0883d7575afd718c889a09d446b173",
+    "https://esm.sh/@noble/curves@1.9.7/denonext/utils.mjs": "78800caea02fb59f99fe68775bcde329357138874dcdb4e6d2f56e76b4eeeaf0",
+    "https://esm.sh/@noble/curves@1.9.7/p256?target=denonext": "4719247c47798f580549d2f852f28adddfa599056bb7b0166e58ada5bf038aec",
+    "https://esm.sh/@noble/curves@1.9.7/secp256k1?target=denonext": "3e69e23e4c33f1c76f0066344fc77682c059ec53959aa4c03b5d48b4b63ccd2b",
+    "https://esm.sh/@noble/hashes@1.8.0/denonext/_md.mjs": "e30debbd8e964d8bd4ae9c807c75601e3ef7ec73eaed005f703709f64a4b2257",
+    "https://esm.sh/@noble/hashes@1.8.0/denonext/crypto.mjs": "cabc4468470c6f6d15891c4a6037aebed19289e1a12eb9905c5579c26767a721",
+    "https://esm.sh/@noble/hashes@1.8.0/denonext/hmac.mjs": "f6e5f679509f87084ebfc0e0334a8ce28788cf94868a61807420618dfc392325",
+    "https://esm.sh/@noble/hashes@1.8.0/denonext/sha2.mjs": "1bf8c30d97f7fe1546e2fed6777a0da85e78d6e961eeae0e0b4437dabf016b7a",
+    "https://esm.sh/@noble/hashes@1.8.0/denonext/sha256.mjs": "43f16ee7a29cabde4a66d24226da441240f587dc34c568661a1b3f392fda177a",
+    "https://esm.sh/@noble/hashes@1.8.0/denonext/utils.mjs": "18b15a49e98c9e136e4bfcdce69b9461630b7dc3389ba932f535ad4a47221b08",
+    "https://esm.sh/@noble/hashes@1.8.0/sha256?target=denonext": "1804d21efec0beea92617d60ab84cd45d16d58bc709830df4da1be95a8fc69fc",
+    "https://esm.sh/@noble/hashes@1.8.0/utils?target=denonext": "18820d033cf3fe7481337101dd51a7bb50bd4a0d9ee8fe97fe9b9e5af8bfd5ee",
+    "https://esm.sh/multiformats@9.9.0/basics?target=denonext": "97fa53d99c2a3aa56367e5e2a34ab3d1b3dc496e4a4fe490460d2955de707361",
+    "https://esm.sh/multiformats@9.9.0/denonext/bases/base10.mjs": "07ac037675bfbbf0621e7f8fd3cfeb242d1ab0955d7e965f4f3a2daa1c369b85",
+    "https://esm.sh/multiformats@9.9.0/denonext/bases/base16.mjs": "7f0c9b5860c52b54170cbc8b058fe46eee1b81f52d0908055d38d2a63ec8b721",
+    "https://esm.sh/multiformats@9.9.0/denonext/bases/base2.mjs": "46527ded4d9b868600b2fd8902398a31226655790bd3c5f61ffa0bd8737b0698",
+    "https://esm.sh/multiformats@9.9.0/denonext/bases/base256emoji.mjs": "7c16b9576b295024837fe5d192f0b854951ac3a7c0be1be8a3c91d5f62505066",
+    "https://esm.sh/multiformats@9.9.0/denonext/bases/base32.mjs": "2c42d149c299e8b8934e51ccb284b01b113d3fe432177a55b7a781d10cfbe5b2",
+    "https://esm.sh/multiformats@9.9.0/denonext/bases/base36.mjs": "52dfe773e2d2650ed87c7c353e909a0d710ed83cb01eb553858eae4879a6664d",
+    "https://esm.sh/multiformats@9.9.0/denonext/bases/base58.mjs": "d45f93c89f6f8a05c7ddc132c99a2bc866d1de2e8475747b6722f6322482feab",
+    "https://esm.sh/multiformats@9.9.0/denonext/bases/base64.mjs": "1365d8ab96a8998be1663e7277eebc58d3207f785c9ab53533966626f153461b",
+    "https://esm.sh/multiformats@9.9.0/denonext/bases/base8.mjs": "9336d2259eb06c31fd0d1e7e5ae36e0826f39b2f73639849a403933348c7526c",
+    "https://esm.sh/multiformats@9.9.0/denonext/bases/identity.mjs": "28acc5f7d4dfe7d5647e1c8d250540a50ba6397ff4f375bc41dc37fc5d5de510",
+    "https://esm.sh/multiformats@9.9.0/denonext/basics.mjs": "edd1f5f7171a026940535586a6682c88f036b972a0158d10db2a5936239182ec",
+    "https://esm.sh/multiformats@9.9.0/denonext/cid.mjs": "1945384d570468b0bb5bd0f394184835038d5778d701b50b6b7eb7273748d288",
+    "https://esm.sh/multiformats@9.9.0/denonext/codecs/json.mjs": "a31ef601f2480daa1ed34393e91f937cef522517ca7d934b86939f8d761fe077",
+    "https://esm.sh/multiformats@9.9.0/denonext/codecs/raw.mjs": "6d6b44e3bea526dd9930d61631709f45e9f10bf2e190dc19168e9b0297fb30dd",
+    "https://esm.sh/multiformats@9.9.0/denonext/esm/src/bases/base.mjs": "f0057681c3f918b72d77de38d89d1f532ae4fc78b86f35db7f617c81e7ac504f",
+    "https://esm.sh/multiformats@9.9.0/denonext/esm/src/bytes.mjs": "d2fa273fd87212f525dcd3863af8a3d2ca1e3ee42aca3eaee5ddd4ad6e43ba04",
+    "https://esm.sh/multiformats@9.9.0/denonext/esm/src/varint.mjs": "5ea3af2ab0109f1e9f4f56fe35883f593f6b047899ada90095a5ed518d635899",
+    "https://esm.sh/multiformats@9.9.0/denonext/hashes/digest.mjs": "fc07873514b182ae0897159ebdcad3dd3ceced04740aa76caf4b2e796ff6ca25",
+    "https://esm.sh/multiformats@9.9.0/denonext/hashes/hasher.mjs": "44bfd064461927c2e8f161db65053d711e59e3df4b55b76bb3f9bf4c316492ad",
+    "https://esm.sh/multiformats@9.9.0/denonext/hashes/identity.mjs": "43eaf0a3160c8344e2f70387d0a124f3f21363d82d3e246a7a7df4053c6199e4",
+    "https://esm.sh/multiformats@9.9.0/denonext/hashes/sha2.mjs": "a0fd2e20d8753f6ca30db815bb7f20a57e2a23dd691384b11d07b5a52dbec74f",
+    "https://esm.sh/multiformats@9.9.0/denonext/multiformats.mjs": "7449f492d80b1dcffcbbfb5599707e5f9c0e5a54694532f330b0f64defe27809",
+    "https://esm.sh/uint8arrays@3.0.0/denonext/compare.mjs": "2b8ed67b92836546e504b87733eacd3f0569050ea645920d3f2503e8e335cd01",
+    "https://esm.sh/uint8arrays@3.0.0/denonext/concat.mjs": "ce3cfbcdd3cc6d1d9fa75f13963c7398a377d8a1dbd6302820f2058f42545fc7",
+    "https://esm.sh/uint8arrays@3.0.0/denonext/equals.mjs": "2c9a9504f97abc172b755fb5069cb9b69aac2e177ad4bc2cf9afdd6a4a322694",
+    "https://esm.sh/uint8arrays@3.0.0/denonext/esm/src/util/bases.mjs": "03de06f47b410a6ed09da73d6e58696ca34ac4e51bce4a0bcfac5cf88c23b8da",
+    "https://esm.sh/uint8arrays@3.0.0/denonext/from-string.mjs": "6df06b3ed43db82fa33500d4ab01a97ae4ecef234f76e06c1774b915d913bbe3",
+    "https://esm.sh/uint8arrays@3.0.0/denonext/to-string.mjs": "bafce61afad1706118c9c6bd08d6d2f53dada2c0892b8fe14da8124e5951390c",
+    "https://esm.sh/uint8arrays@3.0.0/denonext/uint8arrays.mjs": "2627bbf05b4b496ffe067a4f090dd91d4aa7bc8c815d36f1e543531fb0d9342f",
+    "https://esm.sh/uint8arrays@3.0.0/denonext/xor.mjs": "cc93f46198dca299adc26ae5344768914923bbc88e78eefd28699d0ec28c8e71"
+  },
   "workspace": {
     "dependencies": [
       "jsr:@slices/oauth@~0.3.2",

frontend/src/client.ts

···
 // Generated TypeScript client for AT Protocol records
-// Generated at: 2025-09-04 05:32:23 UTC
+// Generated at: 2025-09-07 23:17:29 UTC
 // Lexicons: 6
 
 /**
···
     params?: Omit<SliceRecordsParams<TSortField>, "slice">
   ): Promise<GetRecordsResponse<T>>;
   getRecord(params: GetRecordParams): Promise<RecordResponse<T>>;
+}
+
+export interface CreateOAuthClientRequest {
+  clientName: string;
+  redirectUris: string[];
+  grantTypes?: string[];
+  responseTypes?: string[];
+  scope?: string;
+  clientUri?: string;
+  logoUri?: string;
+  tosUri?: string;
+  policyUri?: string;
+}
+
+export interface OAuthClientDetails {
+  clientId: string;
+  clientSecret?: string;
+  clientName: string;
+  redirectUris: string[];
+  grantTypes: string[];
+  responseTypes: string[];
+  scope?: string;
+  clientUri?: string;
+  logoUri?: string;
+  tosUri?: string;
+  policyUri?: string;
+  createdAt: string;
+  createdByDid: string;
+}
+
+export interface ListOAuthClientsResponse {
+  clients: OAuthClientDetails[];
+}
+
+export interface UpdateOAuthClientRequest {
+  clientId: string;
+  clientName?: string;
+  redirectUris?: string[];
+  scope?: string;
+  clientUri?: string;
+  logoUri?: string;
+  tosUri?: string;
+  policyUri?: string;
+}
+
+export interface DeleteOAuthClientResponse {
+  success: boolean;
+  message: string;
 }
 
 export interface AppBskyActorProfile {
···
       "social.slices.slice.syncUserCollections",
       "POST",
       requestParams
+    );
+  }
+
+  async createOAuthClient(
+    params: CreateOAuthClientRequest
+  ): Promise<OAuthClientDetails> {
+    const requestParams = { ...params, sliceUri: this.sliceUri };
+    return await this.makeRequest<OAuthClientDetails>(
+      "social.slices.slice.createOAuthClient",
+      "POST",
+      requestParams
+    );
+  }
+
+  async getOAuthClients(): Promise<ListOAuthClientsResponse> {
+    const requestParams = { slice: this.sliceUri };
+    return await this.makeRequest<ListOAuthClientsResponse>(
+      "social.slices.slice.getOAuthClients",
+      "GET",
+      requestParams
+    );
+  }
+
+  async updateOAuthClient(
+    params: UpdateOAuthClientRequest
+  ): Promise<OAuthClientDetails> {
+    const requestParams = { ...params, sliceUri: this.sliceUri };
+    return await this.makeRequest<OAuthClientDetails>(
+      "social.slices.slice.updateOAuthClient",
+      "POST",
+      requestParams
+    );
+  }
+
+  async deleteOAuthClient(
+    clientId: string
+  ): Promise<DeleteOAuthClientResponse> {
+    return await this.makeRequest<DeleteOAuthClientResponse>(
+      "social.slices.slice.deleteOAuthClient",
+      "POST",
+      { clientId }
     );
   }
 }

frontend/src/components/OAuthClientModal.tsx

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

frontend/src/components/OAuthDeleteResult.tsx

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

frontend/src/components/OAuthRegistrationResult.tsx

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

frontend/src/components/SliceTabs.tsx

···
     { id: "records", name: "Records", href: `/slices/${sliceId}/records` },
     { id: "sync", name: "Sync", href: `/slices/${sliceId}/sync` },
     { id: "codegen", name: "Code Gen", href: `/slices/${sliceId}/codegen` },
+    { id: "oauth", name: "OAuth Clients", href: `/slices/${sliceId}/oauth` },
     { id: "settings", name: "Settings", href: `/slices/${sliceId}/settings` },
   ];
 }

frontend/src/pages/SliceOAuthPage.tsx

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

frontend/src/routes/pages.tsx

···
 import { SliceCodegenPage } from "../pages/SliceCodegenPage.tsx";
 import { SliceApiDocsPage } from "../pages/SliceApiDocsPage.tsx";
 import { SliceSettingsPage } from "../pages/SliceSettingsPage.tsx";
+import { SliceOAuthPage } from "../pages/SliceOAuthPage.tsx";
 import { SyncJobLogsPage } from "../pages/SyncJobLogsPage.tsx";
 import { JetstreamLogsPage } from "../pages/JetstreamLogsPage.tsx";
 import { SettingsPage } from "../pages/SettingsPage.tsx";
···
 async function handleIndexPage(req: Request): Promise<Response> {
   const context = await withAuth(req);
 
-  // Slice list page - get real slices from AT Protocol
   let slices: Array<{ id: string; name: string; createdAt: string }> = [];
 
   if (context.currentUser.isAuthenticated) {
···
     return Response.redirect(new URL("/", req.url), 302);
   }
 
-  // Get real slice data from AT Protocol
   let sliceData = {
     sliceId,
     sliceName: "Unknown Slice",
···
 
   if (context.currentUser.isAuthenticated) {
     try {
-      // Construct the full URI for this slice using AT Protocol helpers
       const sliceUri = buildAtUri({
         did: context.currentUser.sub || "unknown",
         collection: "social.slices.slice",
···
         atprotoClient.social.slices.slice.stats({ slice: sliceUri }),
       ]);
 
-      // Transform collection stats to match the interface
       const collections = stats.success
         ? stats.collectionStats.map((stat) => ({
             name: stat.collection,
···
       const selectedCollection = url.searchParams.get("collection") || "";
       const selectedAuthor = url.searchParams.get("author") || "";
       const searchQuery = url.searchParams.get("search") || "";
-
 
       // Fetch real records if a collection is selected
       let records: Array<{
···
 
   try {
     const sliceClient = getSliceClient(context, sliceId);
-    
-    const logsResult = await sliceClient.social.slices.slice.getJetstreamLogs({ limit: 100 });
-    logs = logsResult.logs.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+
+    const logsResult = await sliceClient.social.slices.slice.getJetstreamLogs({
+      limit: 100,
+    });
+    logs = logsResult.logs.sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
   } catch (error) {
     console.error("Failed to fetch Jetstream logs:", error);
   }
···
   });
 }
 
+async function handleSliceOAuthPage(
+  req: Request,
+  params?: URLPatternResult
+): Promise<Response> {
+  const context = await withAuth(req);
+  if (!context.currentUser.isAuthenticated) {
+    return new Response("", {
+      status: 302,
+      headers: { location: "/login" },
+    });
+  }
+
+  const sliceId = params?.pathname.groups.id;
+  if (!sliceId) {
+    return new Response("Invalid slice ID", { status: 400 });
+  }
+
+  // Get the slice record first (separate from OAuth clients)
+  const sliceUri = buildAtUri({
+    did: context.currentUser.sub!,
+    collection: "social.slices.slice",
+    rkey: sliceId,
+  });
+
+  const sliceClient = getSliceClient(context, sliceId);
+
+  let slice;
+  try {
+    slice = await atprotoClient.social.slices.slice.getRecord({
+      uri: sliceUri,
+    });
+  } catch (error) {
+    console.error("Error fetching slice:", error);
+    return new Response("Slice not found", { status: 404 });
+  }
+
+  // Try to fetch OAuth clients
+  let clientsWithDetails: {
+    clientId: string;
+    createdAt: string;
+    clientName?: string;
+    redirectUris?: string[];
+  }[] = [];
+  let errorMessage = null;
+
+  try {
+    const oauthClientsResponse =
+      await sliceClient.social.slices.slice.getOAuthClients();
+    console.log("Fetched OAuth clients:", oauthClientsResponse.clients);
+    clientsWithDetails = oauthClientsResponse.clients.map((client) => ({
+      clientId: client.clientId,
+      createdAt: new Date().toISOString(), // Backend should provide this
+      clientName: client.clientName,
+      redirectUris: client.redirectUris,
+    }));
+  } catch (oauthError) {
+    console.error("Error fetching OAuth clients:", oauthError);
+    errorMessage = "Failed to fetch OAuth clients";
+  }
+
+  const html = render(
+    <SliceOAuthPage
+      sliceName={slice.value.name}
+      sliceId={sliceId}
+      clients={clientsWithDetails}
+      currentUser={context.currentUser}
+      error={errorMessage}
+    />
+  );
+
+  const responseHeaders: Record<string, string> = {
+    "content-type": "text/html",
+  };
+
+  return new Response(`<!DOCTYPE html>${html}`, {
+    status: 200,
+    headers: responseHeaders,
+  });
+}
+
 export const pageRoutes: Route[] = [
   {
     pattern: new URLPattern({ pathname: "/" }),
···
   {
     pattern: new URLPattern({ pathname: "/slices/:id/jetstream/logs" }),
     handler: handleJetstreamLogsPage,
+  },
+  {
+    pattern: new URLPattern({ pathname: "/slices/:id/oauth" }),
+    handler: handleSliceOAuthPage,
   },
   {
     pattern: new URLPattern({ pathname: "/slices/:id/:tab" }),

frontend/src/routes/slices.tsx

···
 import { JetstreamLogs } from "../components/JetstreamLogs.tsx";
 import { buildAtUri } from "../utils/at-uri.ts";
 import { Layout } from "../components/Layout.tsx";
+import { OAuthClientModal } from "../components/OAuthClientModal.tsx";
+import { OAuthRegistrationResult } from "../components/OAuthRegistrationResult.tsx";
+import { OAuthDeleteResult } from "../components/OAuthDeleteResult.tsx";
 
 async function handleCreateSlice(req: Request): Promise<Response> {
   const context = await withAuth(req);
···
 
   const sliceId = params?.pathname.groups.id;
   const jobId = params?.pathname.groups.jobId;
-  
+
   if (!sliceId || !jobId) {
     const html = render(
       <div className="p-8 text-center text-red-600">
···
   }
 }
 
-export const sliceRoutes: Route[] = [
-  {
-    method: "POST",
-    pattern: new URLPattern({ pathname: "/slices" }),
-    handler: handleCreateSlice,
-  },
-  {
-    method: "PUT",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/settings" }),
-    handler: handleUpdateSliceSettings,
-  },
-  {
-    method: "DELETE",
-    pattern: new URLPattern({ pathname: "/api/slices/:id" }),
-    handler: handleDeleteSlice,
-  },
-  {
-    method: "POST",
-    pattern: new URLPattern({ pathname: "/api/lexicons" }),
-    handler: handleCreateLexicon,
-  },
-  {
-    method: "GET",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/lexicons/list" }),
-    handler: handleListLexicons,
-  },
-  {
-    method: "GET",
-    pattern: new URLPattern({
-      pathname: "/api/slices/:id/lexicons/:rkey/view",
-    }),
-    handler: handleViewLexicon,
-  },
-  {
-    method: "DELETE",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/lexicons/:rkey" }),
-    handler: handleDeleteLexicon,
-  },
-  {
-    method: "POST",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/codegen" }),
-    handler: handleSliceCodegen,
-  },
-  {
-    method: "POST",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/lexicons" }),
-    handler: handleCreateLexicon,
-  },
-  {
-    method: "PUT",
-    pattern: new URLPattern({ pathname: "/api/profile" }),
-    handler: handleUpdateProfile,
-  },
-  {
-    method: "POST",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/sync" }),
-    handler: handleSliceSync,
-  },
-  {
-    method: "GET",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/job-history" }),
-    handler: handleJobHistory,
-  },
-  {
-    method: "GET",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/sync/logs/:jobId" }),
-    handler: handleSyncJobLogs,
-  },
-  {
-    method: "GET",
-    pattern: new URLPattern({ pathname: "/api/jetstream/status" }),
-    handler: handleJetstreamStatus,
-  },
-  {
-    method: "GET",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/jetstream/logs" }),
-    handler: handleJetstreamLogs,
-  },
-];
+async function handleOAuthClientNew(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const url = new URL(req.url);
+  const sliceId = url.pathname.split("/")[3];
+
+  try {
+    // Build the slice URI
+    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
+
+    const html = render(
+      <OAuthClientModal sliceId={sliceId} sliceUri={sliceUri} mode="new" />
+    );
+
+    return new Response(html, {
+      status: 200,
+      headers: { "content-type": "text/html" },
+    });
+  } catch (error) {
+    console.error("Error:", error);
+    return new Response("Failed to load modal", { status: 500 });
+  }
+}
+
+async function handleOAuthClientRegister(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const url = new URL(req.url);
+  const sliceId = url.pathname.split("/")[3];
+
+  try {
+    const formData = await req.formData();
+    const sliceUri = formData.get("sliceUri") as string;
+    const clientName = formData.get("clientName") as string;
+    const redirectUris = (formData.get("redirectUris") as string)
+      .split("\n")
+      .map((uri) => uri.trim())
+      .filter((uri) => uri.length > 0);
+    const scope = (formData.get("scope") as string) || undefined;
+    const clientUri = (formData.get("clientUri") as string) || undefined;
+    const logoUri = (formData.get("logoUri") as string) || undefined;
+    const tosUri = (formData.get("tosUri") as string) || undefined;
+    const policyUri = (formData.get("policyUri") as string) || undefined;
+
+    // Create OAuth client via backend API
+    const sliceClient = getSliceClient(context, sliceId);
+    const clientDetails =
+      await sliceClient.social.slices.slice.createOAuthClient({
+        clientName,
+        redirectUris,
+        grantTypes: ["authorization_code"],
+        responseTypes: ["code"],
+        ...(scope && { scope }),
+        ...(clientUri && { clientUri }),
+        ...(logoUri && { logoUri }),
+        ...(tosUri && { tosUri }),
+        ...(policyUri && { policyUri }),
+      });
+
+    // Return success response using JSX component
+    const html = render(
+      <OAuthRegistrationResult
+        success
+        sliceId={sliceId}
+        clientId={clientDetails.clientId}
+      />
+    );
+
+    return new Response(html, {
+      status: 200,
+      headers: { "content-type": "text/html" },
+    });
+  } catch (error) {
+    console.error("Error registering OAuth client:", error);
+    const html = render(
+      <OAuthRegistrationResult
+        success={false}
+        sliceId={sliceId}
+        error={error instanceof Error ? error.message : String(error)}
+      />
+    );
+
+    return new Response(html, {
+      status: 200,
+      headers: { "content-type": "text/html" },
+    });
+  }
+}
+
+async function handleOAuthClientDelete(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const url = new URL(req.url);
+  const pathParts = url.pathname.split("/");
+  const sliceId = pathParts[3];
+  const clientId = decodeURIComponent(pathParts[pathParts.length - 1]);
+
+  try {
+    const sliceClient = getSliceClient(context, sliceId);
+
+    // Delete the OAuth client via backend API
+    await sliceClient.social.slices.slice.deleteOAuthClient(clientId);
+
+    // Return empty response to remove the row
+    const html = render(<OAuthDeleteResult success />);
+    return new Response(html || "", {
+      status: 200,
+      headers: { "content-type": "text/html" },
+    });
+  } catch (error) {
+    console.error("Error deleting OAuth client:", error);
+    const html = render(
+      <OAuthDeleteResult
+        success={false}
+        error={error instanceof Error ? error.message : String(error)}
+      />
+    );
+    return new Response(html || "", {
+      status: 200,
+      headers: { "content-type": "text/html" },
+    });
+  }
+}
+
+async function handleOAuthClientView(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const url = new URL(req.url);
+  const pathParts = url.pathname.split("/");
+  const sliceId = pathParts[3];
+  const clientId = decodeURIComponent(pathParts[5]);
+
+  try {
+    const sliceClient = getSliceClient(context, sliceId);
+
+    // Get OAuth clients to find the specific one
+    const clients = await sliceClient.social.slices.slice.getOAuthClients();
+    const client = clients.clients.find((c) => c.clientId === clientId);
+
+    if (!client) {
+      const html = render(
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
+          <div className="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full">
+            <h2 className="text-xl font-semibold text-gray-800 mb-4">
+              OAuth Client Not Found
+            </h2>
+            <p className="text-gray-600 mb-4">
+              The requested OAuth client could not be found.
+            </p>
+            <button
+              type="button"
+              _="on click set #modal-container's innerHTML to ''"
+              className="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      );
+      return new Response(html || "", {
+        status: 404,
+        headers: { "content-type": "text/html" },
+      });
+    }
+
+    const sliceUri = `at://did:plc:bcgltzqazw5tb6k2g3ttenbj/social.slices.slice/${sliceId}`;
+    const html = render(
+      <OAuthClientModal
+        sliceId={sliceId}
+        sliceUri={sliceUri}
+        mode="view"
+        clientData={client}
+      />
+    );
+
+    return new Response(html || "", {
+      status: 200,
+      headers: { "content-type": "text/html" },
+    });
+  } catch (error) {
+    console.error("Error viewing OAuth client:", error);
+    const html = render(
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
+        <div className="bg-white rounded-lg shadow-lg p-6 max-w-lg w-full">
+          <h2 className="text-xl font-semibold text-gray-800 mb-4">Error</h2>
+          <p className="text-gray-600 mb-4">
+            Failed to load OAuth client details:{" "}
+            {error instanceof Error ? error.message : String(error)}
+          </p>
+          <button
+            type="button"
+            _="on click set #modal-container's innerHTML to ''"
+            className="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    );
+    return new Response(html || "", {
+      status: 500,
+      headers: { "content-type": "text/html" },
+    });
+  }
+}
+
+async function handleOAuthClientUpdate(req: Request): Promise<Response> {
+  const context = await withAuth(req);
+  const authResponse = requireAuth(context);
+  if (authResponse) return authResponse;
+
+  const url = new URL(req.url);
+  const pathParts = url.pathname.split("/");
+  const sliceId = pathParts[3];
+  const clientId = decodeURIComponent(pathParts[5]);
+
+  try {
+    const formData = await req.formData();
+    const clientName = formData.get("clientName") as string;
+    const redirectUrisText = formData.get("redirectUris") as string;
+    const scope = formData.get("scope") as string;
+    const clientUri = formData.get("clientUri") as string;
+    const logoUri = formData.get("logoUri") as string;
+    const tosUri = formData.get("tosUri") as string;
+    const policyUri = formData.get("policyUri") as string;
+
+    // Parse redirect URIs (split by lines and filter empty)
+    const redirectUris = redirectUrisText
+      .split("\n")
+      .map((uri) => uri.trim())
+      .filter((uri) => uri.length > 0);
+
+    // Update OAuth client via backend API
+    const sliceClient = getSliceClient(context, sliceId);
+    const updatedClient =
+      await sliceClient.social.slices.slice.updateOAuthClient({
+        clientId,
+        clientName: clientName || undefined,
+        redirectUris: redirectUris.length > 0 ? redirectUris : undefined,
+        scope: scope || undefined,
+        clientUri: clientUri || undefined,
+        logoUri: logoUri || undefined,
+        tosUri: tosUri || undefined,
+        policyUri: policyUri || undefined,
+      });
+
+    const sliceUri = `at://did:plc:bcgltzqazw5tb6k2g3ttenbj/social.slices.slice/${sliceId}`;
+    const html = render(
+      <OAuthClientModal
+        sliceId={sliceId}
+        sliceUri={sliceUri}
+        mode="view"
+        clientData={updatedClient}
+      />
+    );
+    return new Response(html, {
+      status: 200,
+      headers: { "content-type": "text/html" },
+    });
+  } catch (error) {
+    console.error("Error updating OAuth client:", error);
+    const html = render(
+      <OAuthDeleteResult
+        success={false}
+        error={error instanceof Error ? error.message : String(error)}
+      />
+    );
+    return new Response(html, {
+      status: 500,
+      headers: { "content-type": "text/html" },
+    });
+  }
+}
 
 async function handleJetstreamLogs(
   req: Request,
···
   const sliceId = params?.pathname.groups.id;
   if (!sliceId) {
     const html = render(
-      <div className="p-8 text-center text-red-600">
-        ❌ Invalid slice ID
-      </div>
+      <div className="p-8 text-center text-red-600">❌ Invalid slice ID</div>
     );
     return new Response(html, {
       status: 400,
···
     });
 
     const logs = result?.logs || [];
-    
-    // Sort logs in descending order (newest first) 
-    const sortedLogs = logs.sort((a, b) => 
-      new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+
+    // Sort logs in descending order (newest first)
+    const sortedLogs = logs.sort(
+      (a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
     );
 
     // Render the log content
···
   }
 }
 
-
 async function handleJetstreamStatus(
   req: Request,
   _params?: URLPatternResult
···
     const url = new URL(req.url);
     const sliceId = url.searchParams.get("sliceId");
     const isCompact = url.searchParams.get("compact") === "true";
-    
+
     // Fetch jetstream status using the atproto client
     const data = await atprotoClient.social.slices.slice.getJetstreamStatus();
 
···
           )}
         </div>
       );
-      
+
       return new Response(html, {
         status: 200,
         headers: { "content-type": "text/html" },
···
     const url = new URL(req.url);
     const sliceId = url.searchParams.get("sliceId");
     const isCompact = url.searchParams.get("compact") === "true";
-    
+
     // Render compact error version
     if (isCompact) {
       const html = render(
···
           <span className="text-red-700">Jetstream Offline</span>
         </div>
       );
-      
+
       return new Response(html, {
         status: 200,
         headers: { "content-type": "text/html" },
       });
     }
-    
+
     // Fallback to disconnected state on error for full version
     const html = render(
       <JetstreamStatus
···
     });
   }
 }
+
+export const sliceRoutes: Route[] = [
+  {
+    method: "POST",
+    pattern: new URLPattern({ pathname: "/slices" }),
+    handler: handleCreateSlice,
+  },
+  {
+    method: "PUT",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/settings" }),
+    handler: handleUpdateSliceSettings,
+  },
+  {
+    method: "DELETE",
+    pattern: new URLPattern({ pathname: "/api/slices/:id" }),
+    handler: handleDeleteSlice,
+  },
+  {
+    method: "POST",
+    pattern: new URLPattern({ pathname: "/api/lexicons" }),
+    handler: handleCreateLexicon,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/lexicons/list" }),
+    handler: handleListLexicons,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({
+      pathname: "/api/slices/:id/lexicons/:rkey/view",
+    }),
+    handler: handleViewLexicon,
+  },
+  {
+    method: "DELETE",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/lexicons/:rkey" }),
+    handler: handleDeleteLexicon,
+  },
+  {
+    method: "POST",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/codegen" }),
+    handler: handleSliceCodegen,
+  },
+  {
+    method: "POST",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/lexicons" }),
+    handler: handleCreateLexicon,
+  },
+  {
+    method: "PUT",
+    pattern: new URLPattern({ pathname: "/api/profile" }),
+    handler: handleUpdateProfile,
+  },
+  {
+    method: "POST",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/sync" }),
+    handler: handleSliceSync,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/job-history" }),
+    handler: handleJobHistory,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/sync/logs/:jobId" }),
+    handler: handleSyncJobLogs,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/jetstream/status" }),
+    handler: handleJetstreamStatus,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/jetstream/logs" }),
+    handler: handleJetstreamLogs,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/new" }),
+    handler: handleOAuthClientNew,
+  },
+  {
+    method: "POST",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/register" }),
+    handler: handleOAuthClientRegister,
+  },
+  {
+    method: "GET",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/:uri/view" }),
+    handler: handleOAuthClientView,
+  },
+  {
+    method: "POST",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/:uri/update" }),
+    handler: handleOAuthClientUpdate,
+  },
+  {
+    method: "DELETE",
+    pattern: new URLPattern({ pathname: "/api/slices/:id/oauth/:uri" }),
+    handler: handleOAuthClientDelete,
+  },
+];