chore: formatting and lint fixes

Author: nickytonline

.storybook/preview.tsx

@@ -1,5 +1,5 @@
-import type { Preview } from '@storybook/react-vite'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import type { Preview } from '@storybook/react-vite'
 import '../src/styles.css'
 
 const queryClient = new QueryClient({

src/components/BackgroundJobItem.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react'
 import { BackgroundJobItem } from './BackgroundJobItem'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import type { BackgroundJob } from '@/lib/schemas'
 
 const meta: Meta<typeof BackgroundJobItem> = {

src/components/BackgroundJobItem.tsx

@@ -1,8 +1,8 @@
+import { Clock, Play, Trash2, X } from 'lucide-react'
+import { useEffect } from 'react'
 import { Button } from './ui/button'
-import { Clock, Play, X, Trash2 } from 'lucide-react'
-import { useBackgroundJobStatus } from '@/hooks/useBackgroundJobStatus'
 import type { BackgroundJob } from '@/lib/schemas'
-import { useEffect } from 'react'
+import { useBackgroundJobStatus } from '@/hooks/useBackgroundJobStatus'
 
 export function BackgroundJobItem({
   job,

src/components/BackgroundJobsSidebar.tsx

@@ -1,8 +1,8 @@
+import { Clock } from 'lucide-react'
 import { Sidebar } from './ui/sidebar'
+import { BackgroundJobItem } from './BackgroundJobItem'
 import { useHasMounted } from '@/hooks/useHasMounted'
 import { useBackgroundJobs } from '@/hooks/useBackgroundJobs'
-import { Clock } from 'lucide-react'
-import { BackgroundJobItem } from './BackgroundJobItem'
 
 interface BackgroundJobsSidebarProps {
   isOpen: boolean

src/components/BackgroundToggle.stories.tsx

@@ -27,7 +27,9 @@ export default meta
 type Story = StoryObj<typeof BackgroundToggle>
 
 const Template = (args: any) => {
-  const [useBackground, setUseBackground] = useState(args.useBackground ?? false)
+  const [useBackground, setUseBackground] = useState(
+    args.useBackground ?? false,
+  )
   return (
     <BackgroundToggle
       {...args}
@@ -95,4 +97,4 @@ export const UnsupportedModelWithMaxJobs: Story = {
     disabled: false,
     maxJobsReached: true,
   },
-}
+}

src/components/Chat.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useChat } from 'ai/react'
-import { MessageSquarePlus, Clock } from 'lucide-react'
+import { Clock, MessageSquarePlus } from 'lucide-react'
 import { useModel } from '../contexts/ModelContext'
 import { useUser } from '../contexts/UserContext'
 import { generateMessageId } from '../mcp/client'
@@ -206,15 +206,12 @@ export function Chat() {
   useEffect(() => {
     setMessages((prevMessages) =>
       prevMessages.map((message) => {
-        if (message) {
-          const job = backgroundJobs.find(
-            (j) => j.id === message.backgroundJobId,
-          )
-          if (job && job.response && job.response !== message.content) {
-            // Update message content with latest job response
-            return { ...message, content: job.response }
-          }
+        const job = backgroundJobs.find((j) => j.id === message.id)
+        if (job && job.response && job.response !== message.content) {
+          // Update message content with latest job response
+          return { ...message, content: job.response }
         }
+
         return message
       }),
     )

src/components/ui/sidebar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { cn } from '@/lib/utils'
-import { Button } from './button'
 import { X } from 'lucide-react'
+import { Button } from './button'
+import { cn } from '@/lib/utils'
 
 interface SidebarProps {
   children: React.ReactNode
@@ -11,29 +11,26 @@ interface SidebarProps {
   className?: string
 }
 
-export function Sidebar({ 
-  children, 
-  isOpen, 
-  onClose, 
-  title, 
-  className 
+export function Sidebar({
+  children,
+  isOpen,
+  onClose,
+  title,
+  className,
 }: SidebarProps) {
   return (
     <>
       {/* Overlay */}
       {isOpen && (
-        <div 
-          className="fixed inset-0 bg-black/50 z-40"
-          onClick={onClose}
-        />
+        <div className="fixed inset-0 bg-black/50 z-40" onClick={onClose} />
       )}
-      
+
       {/* Sidebar */}
       <div
         className={cn(
           'fixed right-0 top-0 h-full w-80 bg-background border-l shadow-lg transform transition-transform duration-200 ease-in-out z-50',
           isOpen ? 'translate-x-0' : 'translate-x-full',
-          className
+          className,
         )}
       >
         <div className="flex items-center justify-between p-4 border-b">
@@ -53,4 +50,4 @@ export function Sidebar({
       </div>
     </>
   )
-}
+}

src/hooks/useBackgroundJobStatus.test.tsx

@@ -1,5 +1,5 @@
 import { renderHook, waitFor } from '@testing-library/react'
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useBackgroundJobStatus } from './useBackgroundJobStatus'
 import { getTimestamp } from '@/lib/utils/date'
@@ -132,7 +132,11 @@ describe('useBackgroundJobStatus', () => {
 
       mockFetch.mockResolvedValue({
         ok: true,
-        json: async () => ({ status: 'failed', error: 'Job failed', completedAt: getTimestamp() }),
+        json: async () => ({
+          status: 'failed',
+          error: 'Job failed',
+          completedAt: getTimestamp(),
+        }),
       })
 
       const { result } = renderHook(() => useBackgroundJobStatus(job), {

src/hooks/useBackgroundJobStatus.ts

@@ -49,7 +49,10 @@ export const useBackgroundJobStatus = (
       }
       return fetchJobStatus(job.id)
     },
-    enabled: !!job?.id && (job.status === 'running' || (job.status === 'failed' && !job.completedAt)),
+    enabled:
+      !!job?.id &&
+      (job.status === 'running' ||
+        (job.status === 'failed' && !job.completedAt)),
     refetchInterval,
     refetchIntervalInBackground: true,
     retry: (failureCount, error) => {

src/hooks/useBackgroundJobs.test.tsx

@@ -1,5 +1,5 @@
-import { renderHook, act } from '@testing-library/react'
-import { describe, it, expect, beforeEach } from 'vitest'
+import { act, renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
 import { useBackgroundJobs } from './useBackgroundJobs'
 import type { BackgroundJob } from '../lib/schemas'
 
@@ -302,7 +302,7 @@ describe('useBackgroundJobs', () => {
         title: 'Session 2 Job',
       })
 
-      let firstSessionResult = renderHook(() => useBackgroundJobs())
+      const firstSessionResult = renderHook(() => useBackgroundJobs())
 
       expect(firstSessionResult.result.current.jobs).toHaveLength(0)
       expect(localStorage.getItem(STORAGE_KEY)).toBeNull()
@@ -319,7 +319,7 @@ describe('useBackgroundJobs', () => {
       expect(firstSessionResult.result.current.jobs).toHaveLength(2)
       firstSessionResult.unmount()
 
-      let secondSessionResult = renderHook(() => useBackgroundJobs())
+      const secondSessionResult = renderHook(() => useBackgroundJobs())
       expect(secondSessionResult.result.current.jobs).toHaveLength(2)
       expect(
         secondSessionResult.result.current.getJobById('browser-session-alpha'),
@@ -350,7 +350,7 @@ describe('useBackgroundJobs', () => {
 
       secondSessionResult.unmount()
 
-      let thirdSessionResult = renderHook(() => useBackgroundJobs())
+      const thirdSessionResult = renderHook(() => useBackgroundJobs())
       expect(thirdSessionResult.result.current.jobs).toHaveLength(1)
 
       const persistedJob = thirdSessionResult.result.current.getJobById(