use deno.kv for session/state storage in /frontend, reorganize refactor oauth stuff

frontend/.env.example

···
 OAUTH_CLIENT_SECRET="your-oauth-client-secret"
 OAUTH_REDIRECT_URI="http://localhost:8080/oauth/callback"
 OAUTH_AIP_BASE_URL="https://your-domain.com"
-SESSION_ENCRYPTION_KEY="your-base64-encoded-encryption-key"
 API_URL="http://localhost:3000"
 SLICE_URI="at://did:plc:bcgltzqazw5tb6k2g3ttenbj/social.slices.slice/3lwzmbjpqxk2q"

frontend/.gitignore

···
 node_modules
 .env
+*db*

frontend/deno.json

···
 {
   "tasks": {
-    "start": "deno run -A --env-file=.env src/main.ts",
-    "dev": "deno run -A --env-file=.env --watch src/main.ts"
+    "start": "deno run -A --env-file=.env --unstable-kv src/main.ts",
+    "dev": "deno run -A --env-file=.env --unstable-kv --watch src/main.ts"
   },
   "fmt": {
     "useTabs": false,

frontend/flake.nix

···
               name = "image-root";
               paths = [
                 pkgs.deno
+                pkgs.sqlite
                 pkgs.cacert
               ];
               pathsToLink = [ "/bin" "/etc" ];
···
               #!${pkgs.runtimeShell}
               mkdir -p /app
               cp -r ${slice-frontend}/* /app/
+              # Create data directory for Deno KV with proper permissions
+              mkdir -p /data
+              chmod 755 /data
             '';
 
             config = {
-              Cmd = [ "/bin/deno" "run" "-A" "/app/src/main.ts" ];
+              Cmd = [ "/bin/deno" "run" "-A" "--unstable-kv" "/app/src/main.ts" ];
               ExposedPorts = {
                 "8080/tcp" = {};
               };
               WorkingDir = "/app";
               Env = [
                 "PORT=8080"
+                "KV_PATH=/data/kv.db"
               ];
             };
           };

frontend/fly.toml

···
   memory = '512mb'
   cpu_kind = 'shared'
   cpus = 1
+
+[mounts]
+  source = 'frontend_data'
+  destination = '/data'

frontend/src/config.ts

···
 const OAUTH_CLIENT_SECRET = Deno.env.get("OAUTH_CLIENT_SECRET");
 const OAUTH_REDIRECT_URI = Deno.env.get("OAUTH_REDIRECT_URI");
 const OAUTH_AIP_BASE_URL = Deno.env.get("OAUTH_AIP_BASE_URL");
-const SESSION_ENCRYPTION_KEY = Deno.env.get("SESSION_ENCRYPTION_KEY");
 const API_URL = Deno.env.get("API_URL");
 const SLICE_URI = Deno.env.get("SLICE_URI");
 
···
   !OAUTH_CLIENT_SECRET ||
   !OAUTH_REDIRECT_URI ||
   !OAUTH_AIP_BASE_URL ||
-  !SESSION_ENCRYPTION_KEY ||
   !API_URL ||
   !SLICE_URI
 ) {
   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, SESSION_ENCRYPTION_KEY, API_URL, SLICE_URI"
+      "OAUTH_CLIENT_ID, OAUTH_CLIENT_SECRET, OAUTH_REDIRECT_URI, OAUTH_AIP_BASE_URL, API_URL, SLICE_URI"
   );
 }
 
···
 export const oauthConfig = {
   redirectUri: OAUTH_REDIRECT_URI,
   scopes: ["atproto:atproto", "atproto:transition:generic"],
-};
-
-// Simple in-memory storage for OAuth state
-export class OAuthStateManager {
-  private static states = new Map<
-    string,
-    { codeVerifier: string; timestamp: number }
-  >();
-
-  static store(state: string, codeVerifier: string): void {
-    this.states.set(state, {
-      codeVerifier,
-      timestamp: Date.now(),
-    });
-
-    // Auto-cleanup expired states (older than 10 minutes)
-    this.cleanup();
-  }
-
-  static retrieve(state: string): string | null {
-    const stored = this.states.get(state);
-    if (!stored) return null;
-
-    this.states.delete(state); // Use once and delete
-    return stored.codeVerifier;
-  }
-
-  private static cleanup(): void {
-    const now = Date.now();
-    for (const [key, value] of this.states.entries()) {
-      if (now - value.timestamp > 10 * 60 * 1000) {
-        // 10 minutes
-        this.states.delete(key);
-      }
-    }
-  }
-}
-
-class SecureCookies {
-  private static get key(): string {
-    return SESSION_ENCRYPTION_KEY!;
-  }
-
-  // Encrypt data using AES-GCM
-  static async encrypt(plaintext: string): Promise<string> {
-    const encoder = new TextEncoder();
-    const data = encoder.encode(plaintext);
-
-    // Generate a random IV
-    const iv = crypto.getRandomValues(new Uint8Array(12));
-
-    // Import key for AES-GCM
-    const keyData = encoder.encode(this.key.padEnd(32, "0").slice(0, 32)); // Ensure 32 bytes
-    const cryptoKey = await crypto.subtle.importKey(
-      "raw",
-      keyData,
-      { name: "AES-GCM" },
-      false,
-      ["encrypt"]
-    );
-
-    // Encrypt the data
-    const encrypted = await crypto.subtle.encrypt(
-      { name: "AES-GCM", iv: iv },
-      cryptoKey,
-      data
-    );
-
-    // Combine IV and encrypted data
-    const combined = new Uint8Array(iv.length + encrypted.byteLength);
-    combined.set(iv);
-    combined.set(new Uint8Array(encrypted), iv.length);
-
-    return btoa(String.fromCharCode(...combined));
-  }
-
-  // Decrypt data using AES-GCM
-  static async decrypt(encryptedData: string): Promise<string | null> {
-    try {
-      const encoder = new TextEncoder();
-      const decoder = new TextDecoder();
-      const combined = new Uint8Array(
-        atob(encryptedData)
-          .split("")
-          .map((c) => c.charCodeAt(0))
-      );
-
-      // Extract IV and encrypted data
-      const iv = combined.slice(0, 12);
-      const encrypted = combined.slice(12);
-
-      // Import key for AES-GCM
-      const keyData = encoder.encode(this.key.padEnd(32, "0").slice(0, 32));
-      const cryptoKey = await crypto.subtle.importKey(
-        "raw",
-        keyData,
-        { name: "AES-GCM" },
-        false,
-        ["decrypt"]
-      );
-
-      // Decrypt the data
-      const decrypted = await crypto.subtle.decrypt(
-        { name: "AES-GCM", iv: iv },
-        cryptoKey,
-        encrypted
-      );
-
-      return decoder.decode(decrypted);
-    } catch (_e) {
-      return null;
-    }
-  }
-
-  // Create HMAC signature for cookie integrity
-  static async sign(value: string): Promise<string> {
-    const encoder = new TextEncoder();
-    const keyData = encoder.encode(this.key);
-    const valueData = encoder.encode(value);
-
-    const cryptoKey = await crypto.subtle.importKey(
-      "raw",
-      keyData,
-      { name: "HMAC", hash: "SHA-256" },
-      false,
-      ["sign"]
-    );
-
-    const signature = await crypto.subtle.sign("HMAC", cryptoKey, valueData);
-    const signatureBase64 = btoa(
-      String.fromCharCode(...new Uint8Array(signature))
-    );
-
-    return `${value}.${signatureBase64}`;
-  }
-
-  // Verify HMAC signature and extract value
-  static async verify(signedValue: string): Promise<string | null> {
-    const parts = signedValue.split(".");
-    if (parts.length !== 2) return null;
-
-    const [value, _signature] = parts;
-    const expectedSigned = await this.sign(value);
-
-    // Constant-time comparison to prevent timing attacks
-    if (expectedSigned === signedValue) {
-      return value;
-    }
-
-    return null;
-  }
-
-  // Encrypt then sign for authenticated encryption
-  static async encryptAndSign(plaintext: string): Promise<string> {
-    const encrypted = await this.encrypt(plaintext);
-    return await this.sign(encrypted);
-  }
-
-  // Verify signature then decrypt
-  static async verifyAndDecrypt(
-    signedEncrypted: string
-  ): Promise<string | null> {
-    const encrypted = await this.verify(signedEncrypted);
-    if (!encrypted) return null;
-
-    return await this.decrypt(encrypted);
-  }
-}
-
-// Types for session data
-interface TokenStorage {
-  accessToken?: string;
-  refreshToken?: string;
-  expiresAt?: number;
-  tokenType?: string;
-}
-
-interface UserData {
-  handle?: string;
-  sub?: string;
-  tokens?: TokenStorage;
-  timestamp?: number;
-}
-
-// Cookie-based user session and token storage with HMAC signing
-export class UserSessionManager {
-  static async refreshUserInfo(): Promise<UserData> {
-    const userInfo = await atprotoClient.oauth?.getUserInfo();
-
-    // Get current token info from client
-    const tokens = atprotoClient.getTokenStorage();
-
-    if (userInfo) {
-      const userData = {
-        handle: userInfo.did, // Use DID as handle for now
-        sub: userInfo.sub,
-        tokens: tokens,
-      };
-
-      return userData;
-    }
-
-    return {};
-  }
-
-  static async getCurrentUser(
-    req: Request
-  ): Promise<{ handle?: string; sub?: string; isAuthenticated: boolean }> {
-    // Parse session data from signed cookie
-    const cookies = req.headers.get("cookie") || "";
-    const sessionCookie = cookies
-      .split("; ")
-      .find((row) => row.startsWith("user_session="));
-
-    let userData: UserData = {};
-    if (sessionCookie) {
-      try {
-        const signedEncryptedValue = decodeURIComponent(
-          sessionCookie.split("=")[1]
-        );
-        const decryptedValue = await SecureCookies.verifyAndDecrypt(
-          signedEncryptedValue
-        );
-
-        if (decryptedValue) {
-          userData = JSON.parse(decryptedValue);
-
-          // Restore tokens to client if available and not expired
-          if (userData.tokens) {
-            const now = Date.now();
-            const isExpired =
-              userData.tokens.expiresAt && now >= userData.tokens.expiresAt;
-
-            if (!isExpired) {
-              // Restore tokens to client using the public method
-              atprotoClient.setTokensFromSession(userData.tokens);
-            }
-          }
-        }
-      } catch (_e) {
-        // Silently ignore invalid cookies
-      }
-    }
-
-    const authInfo = atprotoClient.oauth?.getAuthenticationInfo();
-    return {
-      handle: userData.handle,
-      sub: userData.sub,
-      isAuthenticated: authInfo?.isAuthenticated || false,
-    };
-  }
-
-  static async createSessionCookie(userData: UserData): Promise<string> {
-    const dataToStore = {
-      handle: userData.handle,
-      sub: userData.sub,
-      tokens: userData.tokens,
-      timestamp: Date.now(), // Add timestamp for freshness checks
-    };
-
-    const jsonValue = JSON.stringify(dataToStore);
-    const encryptedSignedValue = await SecureCookies.encryptAndSign(jsonValue);
-    const cookieValue = encodeURIComponent(encryptedSignedValue);
-
-    // Production cookie settings - 30 days expiration
-    return `user_session=${cookieValue}; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=2592000`; // 30 days
-  }
-
-  static createClearCookie(): string {
-    return `user_session=; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=0`;
-  }
-}
+};

frontend/src/lib/kv.ts

···
+// Shared Deno KV instance
+let kvInstance: Deno.Kv | null = null;
+
+export async function getKv(): Promise<Deno.Kv> {
+  if (!kvInstance) {
+    try {
+      // Use persistent file-based KV store
+      const kvPath = Deno.env.get("KV_PATH") || "./kv.db";
+      kvInstance = await Deno.openKv(kvPath);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      throw new Error(
+        `Failed to initialize Deno KV: ${message}. Make sure to run with --unstable-kv flag.`
+      );
+    }
+  }
+  return kvInstance;
+}

frontend/src/lib/oauth-state-store.ts

···
+interface OAuthState {
+  codeVerifier: string;
+  timestamp: number;
+}
+
+// KV-based OAuth state storage for PKCE flow
+export class OAuthStateStore {
+  constructor(private kv: Deno.Kv) {}
+
+  async store(state: string, codeVerifier: string): Promise<void> {
+    const stateData: OAuthState = {
+      codeVerifier,
+      timestamp: Date.now(),
+    };
+
+    // Store with 10 minute expiration
+    await this.kv.set(
+      ["oauth_states", state], 
+      stateData, 
+      { expireIn: 10 * 60 * 1000 }
+    );
+
+    // Auto-cleanup expired states
+    await this.cleanup();
+  }
+
+  async retrieve(state: string): Promise<string | null> {
+    const result = await this.kv.get<OAuthState>(["oauth_states", state]);
+    
+    if (!result.value) return null;
+
+    // Delete after use (one-time use)
+    await this.kv.delete(["oauth_states", state]);
+    
+    return result.value.codeVerifier;
+  }
+
+  private async cleanup(): Promise<void> {
+    const cutoff = Date.now() - (10 * 60 * 1000); // 10 minutes ago
+
+    for await (const entry of this.kv.list<OAuthState>({ prefix: ["oauth_states"] })) {
+      if (entry.value.timestamp < cutoff) {
+        await this.kv.delete(entry.key);
+      }
+    }
+  }
+}

frontend/src/lib/session-store.ts

···
+// Deno KV-based session storage for user authentication
+import { atprotoClient } from "../config.ts";
+
+export interface TokenStorage {
+  accessToken?: string;
+  refreshToken?: string;
+  expiresAt?: number;
+  tokenType?: string;
+  scope?: string;
+}
+
+export interface SessionData {
+  userDid: string;
+  handle?: string;
+  tokens: TokenStorage;
+  createdAt: number;
+}
+
+interface UserData {
+  handle?: string;
+  sub?: string;
+  tokens?: TokenStorage;
+  timestamp?: number;
+}
+
+export class SessionStore {
+  constructor(private kv: Deno.Kv) {}
+
+  // Create a new session
+  async createSession(sessionData: SessionData): Promise<string> {
+    const sessionId = crypto.randomUUID();
+    const expirationMs = 30 * 24 * 60 * 60 * 1000; // 30 days
+
+    await this.kv.set(
+      ["sessions", sessionId],
+      {
+        ...sessionData,
+        createdAt: Date.now(),
+      },
+      { expireIn: expirationMs }
+    );
+
+    return sessionId;
+  }
+
+  // Get session data
+  async getSession(sessionId: string): Promise<SessionData | null> {
+    const result = await this.kv.get<SessionData>(["sessions", sessionId]);
+    return result.value;
+  }
+
+  // Update session data
+  async updateSession(
+    sessionId: string,
+    sessionData: Partial<SessionData>
+  ): Promise<boolean> {
+    const existing = await this.kv.get<SessionData>(["sessions", sessionId]);
+
+    if (!existing.value) {
+      return false;
+    }
+
+    const updated = {
+      ...existing.value,
+      ...sessionData,
+    };
+
+    const expirationMs = 30 * 24 * 60 * 60 * 1000; // 30 days
+    await this.kv.set(["sessions", sessionId], updated, {
+      expireIn: expirationMs,
+    });
+
+    return true;
+  }
+
+  // Update tokens for a session
+  updateTokens(sessionId: string, tokens: TokenStorage): Promise<boolean> {
+    return this.updateSession(sessionId, { tokens });
+  }
+
+  // Delete a session (logout)
+  async deleteSession(sessionId: string): Promise<void> {
+    await this.kv.delete(["sessions", sessionId]);
+  }
+
+  // Refresh user info from OAuth client
+  async refreshUserInfo(): Promise<UserData> {
+    const userInfo = await atprotoClient.oauth?.getUserInfo();
+    const tokens = atprotoClient.getTokenStorage();
+
+    if (userInfo) {
+      return {
+        handle: userInfo.did,
+        sub: userInfo.sub,
+        tokens: tokens,
+      };
+    }
+    return {};
+  }
+
+  // Get current user from request
+  async getCurrentUser(
+    req: Request
+  ): Promise<{ handle?: string; sub?: string; isAuthenticated: boolean }> {
+    const sessionId = getSessionIdFromRequest(req);
+
+    let sessionData: SessionData | null = null;
+    if (sessionId) {
+      try {
+        sessionData = await this.getSession(sessionId);
+
+        // Restore tokens to client if available and not expired
+        if (sessionData && sessionData.tokens) {
+          const now = Date.now();
+          const isExpired =
+            sessionData.tokens.expiresAt && now >= sessionData.tokens.expiresAt;
+
+          if (!isExpired) {
+            atprotoClient.setTokensFromSession(sessionData.tokens);
+          }
+        }
+      } catch (_e) {
+        // Silently ignore session errors
+      }
+    }
+
+    const authInfo = atprotoClient.oauth?.getAuthenticationInfo();
+    return {
+      handle: sessionData?.handle,
+      sub: sessionData?.userDid,
+      isAuthenticated: authInfo?.isAuthenticated || false,
+    };
+  }
+
+  // Create session from user data
+  async createSessionFromUserData(userData: UserData): Promise<string> {
+    if (!userData.sub) {
+      throw new Error("User DID (sub) is required for session creation");
+    }
+    
+    const sessionData: SessionData = {
+      userDid: userData.sub,
+      handle: userData.handle,
+      tokens: userData.tokens || {},
+      createdAt: Date.now(),
+    };
+
+    return await this.createSession(sessionData);
+  }
+
+  // Delete session from request
+  async deleteSessionFromRequest(req: Request): Promise<void> {
+    const sessionId = getSessionIdFromRequest(req);
+    if (sessionId) {
+      await this.deleteSession(sessionId);
+    }
+  }
+
+  // Update tokens from request
+  async updateTokensFromRequest(req: Request, tokens: TokenStorage): Promise<void> {
+    const sessionId = getSessionIdFromRequest(req);
+    if (sessionId) {
+      await this.updateTokens(sessionId, tokens);
+    }
+  }
+}
+
+
+// Utility function to extract session ID from request
+export function getSessionIdFromRequest(request: Request): string | null {
+  const cookies = request.headers.get("cookie") || "";
+  const sessionCookie = cookies
+    .split("; ")
+    .find((row) => row.startsWith("session_id="));
+
+  if (!sessionCookie) {
+    return null;
+  }
+
+  return sessionCookie.split("=")[1];
+}
+
+// Utility function to create session cookie
+export function createSessionCookie(sessionId: string): string {
+  // HttpOnly, Secure, SameSite=Strict cookie with 30 day expiration
+  return `session_id=${sessionId}; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=2592000`; // 30 days
+}
+
+// Utility function to clear session cookie
+export function clearSessionCookie(): string {
+  return `session_id=; HttpOnly; Secure; SameSite=Strict; Path=/; Max-Age=0`;
+}

frontend/src/lib/stores.ts

···
+// Initialize all stores with shared KV instance
+import { getKv } from "./kv.ts";
+import { SessionStore } from "./session-store.ts";
+import { OAuthStateStore } from "./oauth-state-store.ts";
+
+const kv = await getKv();
+
+export const sessionStore = new SessionStore(kv);
+export const oauthStateStore = new OAuthStateStore(kv);

frontend/src/routes/middleware.ts

···
-import { UserSessionManager, atprotoClient } from "../config.ts";
+import { atprotoClient } from "../config.ts";
+import { sessionStore } from "../lib/stores.ts";
 
 export interface AuthenticatedUser {
   handle?: string;
···
 
 export async function withAuth(req: Request): Promise<RouteContext> {
   // Get current user info (this already restores tokens from session)
-  const currentUser = await UserSessionManager.getCurrentUser(req);
+  const currentUser = await sessionStore.getCurrentUser(req);
 
-  // Check if we need to refresh the session cookie with updated tokens
+  // Check if we need to update the session with refreshed tokens
   let sessionCookieHeader: string | undefined;
   if (currentUser.isAuthenticated) {
     const tokens = atprotoClient.getTokenStorage();
     if (tokens && tokens.accessToken) {
-      // Refresh the session cookie to extend expiration and update any refreshed tokens
-      const userData = {
-        handle: currentUser.handle,
-        sub: currentUser.sub,
-        tokens: tokens,
-      };
-      sessionCookieHeader = await UserSessionManager.createSessionCookie(
-        userData
-      );
+      // Update the session with any refreshed tokens
+      await sessionStore.updateTokensFromRequest(req, tokens);
+      
+      // No need to set cookie header since session ID remains the same
     }
   }
 

frontend/src/routes/oauth.ts

···
 import {
   atprotoClient,
   oauthConfig,
-  OAuthStateManager,
-  UserSessionManager,
 } from "../config.ts";
+import { sessionStore, oauthStateStore } from "../lib/stores.ts";
+import { createSessionCookie, clearSessionCookie } from "../lib/session-store.ts";
 
 async function handleOAuthAuthorize(req: Request): Promise<Response> {
   try {
     // Clear any existing auth state before new login attempt
-    atprotoClient.oauth.logout();
+    atprotoClient.oauth?.logout();
 
     const formData = await req.formData();
     const loginHint = formData.get("loginHint") as string;
···
       return new Response("Missing login hint", { status: 400 });
     }
 
+    if (!atprotoClient.oauth) {
+      return new Response("OAuth client not configured", { status: 500 });
+    }
+
     const authResult = await atprotoClient.oauth.authorize({
       loginHint,
       redirectUri: oauthConfig.redirectUri,
···
     });
 
     // Store OAuth state for later verification
-    OAuthStateManager.store(authResult.state, authResult.codeVerifier);
+    await oauthStateStore.store(authResult.state, authResult.codeVerifier);
 
     // Redirect to authorization URL
     return Response.redirect(authResult.authorizationUrl, 302);
···
     }
 
     // Retrieve stored code verifier
-    const codeVerifier = OAuthStateManager.retrieve(state);
+    const codeVerifier = await oauthStateStore.retrieve(state);
     if (!codeVerifier) {
       return Response.redirect(
         new URL(
···
       );
     }
 
+    if (!atprotoClient.oauth) {
+      return Response.redirect(
+        new URL(
+          "/login?error=" + encodeURIComponent("OAuth client not configured"),
+          req.url
+        ),
+        302
+      );
+    }
+
     // Exchange code for tokens
     await atprotoClient.oauth.handleCallback({
       code,
···
     });
 
     // Fetch and store user info
-    const userData = await UserSessionManager.refreshUserInfo();
+    const userData = await sessionStore.refreshUserInfo();
 
-    // Redirect to main app on successful login with session cookie
-    const sessionCookie = await UserSessionManager.createSessionCookie(
-      userData
-    );
+    // Create new session and get session cookie
+    const sessionId = await sessionStore.createSessionFromUserData(userData);
+    const sessionCookie = createSessionCookie(sessionId);
+    
     return new Response(null, {
       status: 302,
       headers: {
···
 }
 
 async function handleLogout(req: Request): Promise<Response> {
-  atprotoClient.oauth.logout();
+  // Delete the session from KV store
+  await sessionStore.deleteSessionFromRequest(req);
+  
+  // Logout from OAuth client
+  atprotoClient.oauth?.logout();
+  
   return new Response(null, {
     status: 302,
     headers: {
       Location: new URL("/login", req.url).toString(),
-      "Set-Cookie": UserSessionManager.createClearCookie(),
+      "Set-Cookie": clearSessionCookie(),
     },
   });
 }

frontend/src/routes/pages.tsx

···
 import type { Route } from "@std/http/unstable-route";
 import { render } from "preact-render-to-string";
-import { withAuth } from "./middleware.ts";
+import { withAuth, requireAuth } from "./middleware.ts";
 import { atprotoClient } from "../config.ts";
 import { buildAtUri } from "../utils/at-uri.ts";
 import { IndexPage } from "../pages/IndexPage.tsx";
···
 
 async function handleIndexPage(req: Request): Promise<Response> {
   const context = await withAuth(req);
+  const authResponse = requireAuth(context, req);
+  if (authResponse) return authResponse;
 
   // Slice list page - get real slices from AT Protocol
   let slices: Array<{ id: string; name: string; createdAt: string }> = [];

frontend/src/routes/slices.tsx

···
   if (authResponse) return authResponse;
 
   // Ensure client has tokens before attempting API calls
-  const authInfo = atprotoClient.oauth.getAuthenticationInfo();
-  if (!authInfo.isAuthenticated) {
+  const authInfo = atprotoClient.oauth?.getAuthenticationInfo();
+  if (!authInfo?.isAuthenticated) {
     const dialogHtml = render(
       <CreateSliceDialog error="Session expired. Please log in again." />
     );
···
           "HX-Redirect": `/slices/${sliceId}`,
         },
       });
-    } catch (createError) {
+    } catch (_createError) {
       const dialogHtml = render(
         <CreateSliceDialog
           error="Failed to create slice record. Please try again."
···
         headers: { "content-type": "text/html" },
       });
     }
-  } catch (error) {
+  } catch (_error) {
     const dialogHtml = render(
       <CreateSliceDialog error="Failed to create slice" />
     );
···
       status: 200,
       headers: { "content-type": "text/html" },
     });
-  } catch (error) {
+  } catch (_error) {
     const resultHtml = render(
       <UpdateResult
         type="error"
···
         "HX-Redirect": "/",
       },
     });
-  } catch (error) {
+  } catch (_error) {
     return new Response("Failed to delete slice", { status: 500 });
   }
 }
···
         headers: { "content-type": "text/html" },
       });
     }
-  } catch (error) {
+  } catch (_error) {
     const html = render(
       <SettingsResult type="error" message="Failed to process form data" />
     );
···
 
   const sliceId = params?.pathname.groups.id;
   if (!sliceId) {
-    const html = render(<SyncResult success={false} error="Invalid slice ID" />);
+    const html = render(
+      <SyncResult success={false} error="Invalid slice ID" />
+    );
     return new Response(html, {
       status: 400,
       headers: { "content-type": "text/html" },
···
     // Parse collections from textarea (newline or comma separated)
     const collections: string[] = [];
     if (collectionsText) {
-      collectionsText
-        .split(/[\n,]/)
-        .forEach(item => {
-          const trimmed = item.trim();
-          if (trimmed) collections.push(trimmed);
-        });
+      collectionsText.split(/[\n,]/).forEach((item) => {
+        const trimmed = item.trim();
+        if (trimmed) collections.push(trimmed);
+      });
     }
 
     if (collections.length === 0) {
       const html = render(
-        <SyncResult 
-          success={false} 
-          error="Please specify at least one collection to sync" 
+        <SyncResult
+          success={false}
+          error="Please specify at least one collection to sync"
         />
       );
       return new Response(html, {
···
     // Parse repos if provided
     const repos: string[] = [];
     if (reposText) {
-      reposText
-        .split(/[\n,]/)
-        .forEach(item => {
-          const trimmed = item.trim();
-          if (trimmed) repos.push(trimmed);
-        });
+      reposText.split(/[\n,]/).forEach((item) => {
+        const trimmed = item.trim();
+        if (trimmed) repos.push(trimmed);
+      });
     }
 
     // Call the generated client's sync method
···
     });
   } catch (error) {
     const html = render(
-      <SyncResult 
-        success={false} 
-        error={`Error: ${error instanceof Error ? error.message : String(error)}`} 
+      <SyncResult
+        success={false}
+        error={`Error: ${
+          error instanceof Error ? error.message : String(error)
+        }`}
       />
     );
     return new Response(html, {