fix(webapp): server logs pagination and twitch not-configured ux

packages/backend/src/routes/management.ts

@@ -224,12 +224,17 @@ export function setupManagementRoutes(app: Express): void {
                     type as LogType,
                     limit,
                 )
-                res.json({ logs })
+                const total = await serverLogService.countLogsByType(
+                    guildId,
+                    type as LogType,
+                )
+                res.json({ logs, total })
                 return
             }
 
             const logs = await serverLogService.getRecentLogs(guildId, limit)
-            res.json({ logs })
+            const total = await serverLogService.countRecentLogs(guildId)
+            res.json({ logs, total })
         }),
     )
 

packages/backend/src/routes/twitch.ts

@@ -107,6 +107,14 @@ async function lookupTwitchUser(
 }
 
 export function setupTwitchRoutes(app: Express): void {
+    app.get(
+        '/api/twitch/status',
+        asyncHandler(async (_req: Request, res: Response) => {
+            const configured = !!process.env.TWITCH_CLIENT_ID
+            res.json({ configured })
+        }),
+    )
+
     app.get(
         '/api/twitch/users',
         requireAuth,

packages/backend/tests/integration/routes/management.test.ts

@@ -40,6 +40,8 @@ jest.mock('@lucky/shared/services', () => ({
         searchLogs: jest.fn(),
         getUserLogs: jest.fn(),
         getStats: jest.fn(),
+        countRecentLogs: jest.fn(),
+        countLogsByType: jest.fn(),
         logAutoModSettingsChange: jest.fn(),
         logCustomCommandChange: jest.fn(),
     },
@@ -337,7 +339,9 @@ describe('Management Routes Integration', () => {
             )
 
             const response = await request(app)
-                .post('/api/guilds/111111111111111111/automod/templates/unknown/apply')
+                .post(
+                    '/api/guilds/111111111111111111/automod/templates/unknown/apply',
+                )
                 .set('Cookie', ['sessionId=valid_session_id'])
                 .expect(404)
 
@@ -718,13 +722,14 @@ describe('Management Routes Integration', () => {
                 typeof serverLogService
             >
             mockServerLogService.getRecentLogs.mockResolvedValue(mockLogs)
+            mockServerLogService.countRecentLogs.mockResolvedValue(10)
 
             const response = await request(app)
                 .get('/api/guilds/111111111111111111/logs')
                 .set('Cookie', ['sessionId=valid_session_id'])
                 .expect(200)
 
-            expect(response.body).toEqual({ logs: mockLogs })
+            expect(response.body).toEqual({ logs: mockLogs, total: 10 })
             expect(mockServerLogService.getRecentLogs).toHaveBeenCalledWith(
                 '111111111111111111',
                 50,
@@ -743,13 +748,14 @@ describe('Management Routes Integration', () => {
                 typeof serverLogService
             >
             mockServerLogService.getLogsByType.mockResolvedValue(mockLogs)
+            mockServerLogService.countLogsByType.mockResolvedValue(5)
 
             const response = await request(app)
                 .get('/api/guilds/111111111111111111/logs?type=error')
                 .set('Cookie', ['sessionId=valid_session_id'])
                 .expect(200)
 
-            expect(response.body).toEqual({ logs: mockLogs })
+            expect(response.body).toEqual({ logs: mockLogs, total: 5 })
             expect(mockServerLogService.getLogsByType).toHaveBeenCalledWith(
                 '111111111111111111',
                 'error',

packages/backend/tests/integration/routes/twitch.test.ts

@@ -25,6 +25,32 @@ jest.mock('@lucky/shared/services', () => ({
     },
 }))
 
+describe('GET /api/twitch/status', () => {
+    let app: express.Express
+
+    beforeEach(() => {
+        app = express()
+        app.use(express.json())
+        setupTwitchRoutes(app)
+        app.use(errorHandler)
+    })
+
+    test('returns configured=true when TWITCH_CLIENT_ID is set', async () => {
+        process.env.TWITCH_CLIENT_ID = 'test-client-id'
+        const res = await request(app).get('/api/twitch/status')
+        delete process.env.TWITCH_CLIENT_ID
+        expect(res.status).toBe(200)
+        expect(res.body.configured).toBe(true)
+    })
+
+    test('returns configured=false when TWITCH_CLIENT_ID is not set', async () => {
+        delete process.env.TWITCH_CLIENT_ID
+        const res = await request(app).get('/api/twitch/status')
+        expect(res.status).toBe(200)
+        expect(res.body.configured).toBe(false)
+    })
+})
+
 describe('Twitch Routes', () => {
     let app: express.Express
 

packages/frontend/src/pages/ServerLogs.tsx

@@ -172,10 +172,13 @@ export default function ServerLogsPage() {
                           levelFilter,
                           pageLimit,
                       )
-                    : await api.serverLogs.getRecent(selectedGuild.id, pageLimit)
+                    : await api.serverLogs.getRecent(
+                          selectedGuild.id,
+                          pageLimit,
+                      )
             const allLogs = res.data.logs
             setLogs(allLogs.slice((page - 1) * limit, page * limit))
-            setTotal(allLogs.length)
+            setTotal(res.data.total)
         } catch {
             setLogs([])
             setTotal(0)

packages/frontend/src/pages/TwitchNotifications.test.tsx

@@ -94,6 +94,9 @@ describe('TwitchNotificationsPage', () => {
                 value: vi.fn(),
             },
         )
+        vi.mocked(api.twitch.status).mockResolvedValue({
+            data: { configured: true },
+        } as any)
         vi.mocked(api.guilds.getChannels).mockResolvedValue({
             data: {
                 channels: [{ id: '67890', name: '#general' }],
@@ -371,4 +374,22 @@ describe('TwitchNotificationsPage', () => {
             await screen.findByText('Twitch user not found'),
         ).toBeInTheDocument()
     })
+
+    test('shows not-configured banner when twitch api is not set up', async () => {
+        mockGuildSelection(mockGuild)
+        vi.mocked(api.twitch.status).mockResolvedValue({
+            data: { configured: false },
+        } as any)
+
+        renderPage()
+
+        await waitFor(() => {
+            expect(screen.getByText('Not Configured')).toBeInTheDocument()
+        })
+
+        expect(
+            screen.getByText(/Twitch API is not configured/),
+        ).toBeInTheDocument()
+        expect(screen.queryByText('Add')).not.toBeInTheDocument()
+    })
 })

packages/frontend/src/pages/TwitchNotifications.tsx

@@ -41,6 +41,9 @@ export default function TwitchNotificationsPage() {
     const [showAdd, setShowAdd] = useState(false)
     const [newTwitchInput, setNewTwitchInput] = useState('')
     const [newChannelId, setNewChannelId] = useState('')
+    const [twitchConfigured, setTwitchConfigured] = useState<boolean | null>(
+        null,
+    )
     const notificationsRequestIdRef = useRef(0)
     const channelsRequestIdRef = useRef(0)
     const selectedGuildIdRef = useRef<string | undefined>(guildId)
@@ -49,6 +52,18 @@ export default function TwitchNotificationsPage() {
         selectedGuildIdRef.current = guildId
     }, [guildId])
 
+    useEffect(() => {
+        const checkTwitchStatus = async () => {
+            try {
+                const res = await api.twitch.status()
+                setTwitchConfigured(res.data.configured)
+            } catch {
+                setTwitchConfigured(false)
+            }
+        }
+        checkTwitchStatus()
+    }, [])
+
     const channelNameById = useMemo(
         () => new Map(channels.map((channel) => [channel.id, channel.name])),
         [channels],
@@ -272,6 +287,26 @@ export default function TwitchNotificationsPage() {
         )
     }
 
+    if (twitchConfigured === false) {
+        return (
+            <div className='space-y-6 px-1 sm:px-0'>
+                <header className='flex items-center gap-3'>
+                    <Tv className='h-6 w-6 text-purple-500' />
+                    <h1 className='text-xl font-bold text-white'>
+                        Twitch Notifications
+                    </h1>
+                </header>
+                <div className='p-4 rounded-lg bg-lucky-error/10 border border-lucky-error text-lucky-error'>
+                    <p className='font-semibold mb-1'>Not Configured</p>
+                    <p className='text-sm'>
+                        Twitch API is not configured on this server. Contact the
+                        server administrator to set up Twitch credentials.
+                    </p>
+                </div>
+            </div>
+        )
+    }
+
     return (
         <div className='space-y-6 px-1 sm:px-0'>
             <header className='flex items-center justify-between'>
@@ -286,7 +321,8 @@ export default function TwitchNotificationsPage() {
                 </div>
                 <button
                     onClick={() => setShowAdd(!showAdd)}
-                    className='flex cursor-pointer items-center gap-2 rounded-lg bg-purple-600/10 px-3 py-1.5 text-sm text-purple-400 transition-colors hover:bg-purple-600/20'
+                    disabled={!twitchConfigured}
+                    className='flex cursor-pointer items-center gap-2 rounded-lg bg-purple-600/10 px-3 py-1.5 text-sm text-purple-400 transition-colors hover:bg-purple-600/20 disabled:opacity-50 disabled:cursor-not-allowed'
                 >
                     <Plus className='w-4 h-4' />
                     Add

packages/frontend/src/services/api.ts

@@ -343,6 +343,7 @@ export const api = {
     },
 
     twitch: {
+        status: () => apiClient.get<{ configured: boolean }>('/twitch/status'),
         lookupUser: (login: string) =>
             apiClient.get<{
                 id: string

packages/frontend/src/services/logsApi.ts

@@ -4,13 +4,19 @@ import type { ServerLog } from '@/types'
 export function createLogsApi(apiClient: AxiosInstance) {
     return {
         getRecent: (guildId: string, limit?: number) =>
-            apiClient.get<{ logs: ServerLog[] }>(`/guilds/${guildId}/logs`, {
-                params: limit ? { limit } : {},
-            }),
+            apiClient.get<{ logs: ServerLog[]; total: number }>(
+                `/guilds/${guildId}/logs`,
+                {
+                    params: limit ? { limit } : {},
+                },
+            ),
         getByType: (guildId: string, type: string, limit?: number) =>
-            apiClient.get<{ logs: ServerLog[] }>(`/guilds/${guildId}/logs`, {
-                params: { type, ...(limit ? { limit } : {}) },
-            }),
+            apiClient.get<{ logs: ServerLog[]; total: number }>(
+                `/guilds/${guildId}/logs`,
+                {
+                    params: { type, ...(limit ? { limit } : {}) },
+                },
+            ),
         search: (
             guildId: string,
             filters: { type?: string; userId?: string },

packages/shared/src/services/ServerLogService.ts

@@ -81,6 +81,16 @@ export class ServerLogService {
         })
     }
 
+    async countRecentLogs(guildId: string) {
+        return await prisma.serverLog.count({ where: { guildId } })
+    }
+
+    async countLogsByType(guildId: string, type: LogType) {
+        return await prisma.serverLog.count({
+            where: { guildId, type },
+        })
+    }
+
     async searchLogs(
         guildId: string,
         filters: {