Refactor security section and standardize session terminology

This commit comprehensively refactors the security section component and API to improve code quality, performance, and consistency:

**Component Improvements:**
- Extract deleteSessions utility function outside component for better performance
- Add useMemo for webSessions and cliSessions filtering to prevent unnecessary re-renders
- Create proper Session TypeScript type definition for better type safety
- Consolidate session logout logic with cleaner if/else structure
- Remove redundant handleRevokeSession wrapper function

**API Standardization:**
- Convert sessionType from 'browser' to 'web' for consistency with database schema
- Use database session type directly instead of converting to 'browser'
- Move PAT filtering to SQL query for better performance

**Benefits:**
- Better React performance with memoization
- Improved type safety and maintainability
- Consistent terminology across frontend, backend, and database
- Cleaner, more readable code structure

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>

Author: brandonkachen

web/src/app/api/user/sessions/route.ts

@@ -1,12 +1,12 @@
-import { NextResponse } from 'next/server'
-import { sha256 } from '@/lib/crypto'
 import db from '@codebuff/common/db'
 import * as schema from '@codebuff/common/db/schema'
-import { eq } from 'drizzle-orm'
-import { getServerSession } from 'next-auth'
+import { eq, and, not } from 'drizzle-orm/expressions'
 import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+import { getServerSession } from 'next-auth'
 
 import { authOptions } from '@/app/api/auth/[...nextauth]/auth-options'
+import { sha256 } from '@/lib/crypto'
 
 function getCurrentSessionTokenFromCookies(): string | null {
   const jar = cookies()
@@ -39,7 +39,12 @@ export async function GET() {
       schema.fingerprint,
       eq(schema.session.fingerprint_id, schema.fingerprint.id)
     )
-    .where(eq(schema.session.userId, session.user.id))
+    .where(
+      and(
+        eq(schema.session.userId, session.user.id),
+        not(eq(schema.session.type, 'pat'))
+      )
+    )
 
   const currentToken = getCurrentSessionTokenFromCookies()
 
@@ -50,11 +55,6 @@ export async function GET() {
     const token = r.sessionToken
     const label = token ? `••••${token.slice(-4)}` : '••••'
 
-    // Skip PATs - they are handled by the /api/api-keys endpoint
-    if (r.type === 'pat') {
-      continue
-    }
-
     // All non-PAT sessions are now unified as 'web' type
     activeSessions.push({
       id: sha256(token),
@@ -63,7 +63,7 @@ export async function GET() {
       isCurrent: token === currentToken,
       fingerprintId: r.fingerprint_id,
       createdAt: r.fingerprintCreatedAt?.toISOString() ?? null,
-      sessionType: r.fingerprint_id ? 'cli' : 'browser', // For display purposes only
+      sessionType: r.type,
     })
   }
 

web/src/app/profile/components/security-section.tsx

@@ -1,8 +1,12 @@
 'use client'
 
-import { useState } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { Monitor, Terminal } from 'lucide-react'
+import { useState, useMemo } from 'react'
+
+import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
+import { ConfirmationInputDialog } from '@/components/ui/confirmation-input-dialog'
 import {
   Table,
   TableBody,
@@ -12,22 +16,37 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Badge } from '@/components/ui/badge'
-import { ConfirmationInputDialog } from '@/components/ui/confirmation-input-dialog'
-import { Monitor, Terminal } from 'lucide-react'
 import { useToast } from '@/components/ui/use-toast'
+
 import { ProfileSection } from './profile-section'
 
+type Session = {
+  id: string
+  label?: string
+  expires?: string | null
+  isCurrent?: boolean
+  fingerprintId?: string | null
+  createdAt?: string | null
+  sessionType?: 'web' | 'cli'
+}
+
+// Utility function to delete sessions via API
+async function deleteSessions(sessionIds: string[]): Promise<void> {
+  if (sessionIds.length === 0) return
+
+  const res = await fetch('/api/sessions', {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ sessionIds }),
+  })
+
+  if (!res.ok) {
+    throw new Error(await res.text())
+  }
+}
+
 async function fetchSessions(): Promise<{
-  activeSessions: {
-    id: string
-    label?: string
-    expires?: string | null
-    isCurrent?: boolean
-    fingerprintId?: string | null
-    createdAt?: string | null
-    sessionType?: 'browser' | 'cli'
-  }[]
+  activeSessions: Session[]
 }> {
   const res = await fetch('/api/user/sessions')
   if (!res.ok) throw new Error(await res.text())
@@ -50,19 +69,23 @@ export function SecuritySection() {
   })
 
   const allSessions = sessionsData?.activeSessions ?? []
-  const webSessions = allSessions.filter(
-    (session) => session.sessionType === 'browser'
+
+  const webSessions = useMemo(
+    () => allSessions.filter((session) => session.sessionType === 'web'),
+    [allSessions]
   )
-  const cliSessions = allSessions.filter(
-    (session) => session.sessionType === 'cli'
+
+  const cliSessions = useMemo(
+    () => allSessions.filter((session) => session.sessionType === 'cli'),
+    [allSessions]
   )
 
   const [activeTab, setActiveTab] = useState<'web' | 'cli'>('web')
   const [isLogoutConfirmOpen, setIsLogoutConfirmOpen] = useState(false)
   const [isBulkLoggingOut, setIsBulkLoggingOut] = useState(false)
 
   const TAB_LABELS = { web: 'Web Sessions', cli: 'CLI Sessions' } as const
-  const PRIMARY_VERB = { web: 'Log out of all', cli: 'Revoke all' } as const
+  const PRIMARY_VERB = { web: 'Log out of other', cli: 'Revoke all' } as const
   const CONFIRM_VERB = { web: 'Log Out', cli: 'Revoke' } as const
 
   const revokeSessionMutation = useMutation({
@@ -88,42 +111,28 @@ export function SecuritySection() {
     },
   })
 
-  async function handleRevokeSession(id: string) {
-    revokeSessionMutation.mutate(id)
-  }
-
   async function handleLogoutAll() {
     setIsLogoutConfirmOpen(true)
   }
-
-  async function confirmLogoutAll() {
+  async function confirmLogoutAll(): Promise<void> {
     try {
       setIsBulkLoggingOut(true)
+
+      let sessionsToLogout: Session[]
+      let toastMessage: string
+
       if (activeTab === 'web') {
-        const sessionIds = webSessions
-          .filter((s) => !s.isCurrent)
-          .map((s) => s.id)
-        if (sessionIds.length > 0) {
-          const res = await fetch('/api/sessions', {
-            method: 'DELETE',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ sessionIds }),
-          })
-          if (!res.ok) throw new Error(await res.text())
-        }
-        toast({ title: 'Logged out of all web sessions' })
+        sessionsToLogout = webSessions.filter((s) => !s.isCurrent)
+        toastMessage = 'Logged out of other web sessions'
       } else {
-        const sessionIds = cliSessions.map((s) => s.id)
-        if (sessionIds.length > 0) {
-          const res = await fetch('/api/sessions', {
-            method: 'DELETE',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ sessionIds }),
-          })
-          if (!res.ok) throw new Error(await res.text())
-        }
-        toast({ title: 'Revoked all CLI sessions' })
+        sessionsToLogout = cliSessions
+        toastMessage = 'Revoked all CLI sessions'
       }
+
+      const sessionIds = sessionsToLogout.map((s) => s.id)
+      await deleteSessions(sessionIds)
+      toast({ title: toastMessage })
+
       await queryClient.invalidateQueries({ queryKey: ['sessions'] })
       setIsLogoutConfirmOpen(false)
     } catch (e: any) {
@@ -262,7 +271,9 @@ export function SecuritySection() {
                           <Button
                             size="sm"
                             variant="destructive"
-                            onClick={() => handleRevokeSession(s.id)}
+                            onClick={() => {
+                              revokeSessionMutation.mutate(s.id)
+                            }}
                           >
                             Revoke
                           </Button>
@@ -331,7 +342,9 @@ export function SecuritySection() {
                         <Button
                           size="sm"
                           variant="destructive"
-                          onClick={() => handleRevokeSession(s.id)}
+                          onClick={() => {
+                            revokeSessionMutation.mutate(s.id)
+                          }}
                         >
                           Revoke
                         </Button>