fix: follow code rabbit ai suggestions

src/components/cardinal/sidebar/index.tsx

@@ -12,9 +12,9 @@ import {
   worldQueryOptions,
 } from '@/lib/query-options'
 
-import { SidebarMessages } from './messages'
+import { CardinalSidebarMessages } from './messages'
 import { CreatePersona } from './persona'
-import { SidebarQueries } from './queries'
+import { CardinalSidebarQueries } from './queries'
 
 const builtinMessages = new Set([routeMsgCreatePersona, routeMsgAuthorizePersonaAddress])
 const builtinQueries = new Set([routeQryPersonaSigner, routeQryReceiptsList])
@@ -41,8 +41,8 @@ export function CardinalSidebar() {
     <aside className="flex flex-col justify-between px-3 pt-4 pb-2 min-w-64 w-64 overflow-y-auto border-r text-sm">
       <div className="space-y-2">
         <CreatePersona namespace={namespace} />
-        <SidebarMessages messages={messages} namespace={namespace} />
-        <SidebarQueries queries={queries} />
+        <CardinalSidebarMessages messages={messages} namespace={namespace} />
+        <CardinalSidebarQueries queries={queries} />
       </div>
       <ThemeToggle className="self-end" />
     </aside>

src/components/cardinal/sidebar/messages.tsx

@@ -34,12 +34,12 @@ import { errorToast } from '@/lib/utils'
 
 import { defaultValues, formSchema, formatName, goTypeToInputComponent } from './utils'
 
-interface SidebarMessagesProps {
+interface CardinalSidebarMessagesProps {
   messages: WorldField[]
   namespace: string
 }
 
-export function SidebarMessages({ messages, namespace }: SidebarMessagesProps) {
+export function CardinalSidebarMessages({ messages, namespace }: CardinalSidebarMessagesProps) {
   return (
     <Accordion collapsible type="single" defaultValue="default">
       <AccordionItem value="default" className="border-0">

src/components/cardinal/sidebar/queries.tsx

@@ -26,11 +26,11 @@ import { errorToast } from '@/lib/utils'
 
 import { defaultValues, formSchema, formatName, goTypeToInputComponent } from './utils'
 
-interface SidebarQueriesProps {
+interface CardinalSidebarQueriesProps {
   queries: WorldField[]
 }
 
-export function SidebarQueries({ queries }: SidebarQueriesProps) {
+export function CardinalSidebarQueries({ queries }: CardinalSidebarQueriesProps) {
   const cql: WorldField = {
     name: 'CQL',
     fields: {

src/components/header.tsx

@@ -92,11 +92,11 @@ function CardinalUrl() {
           isCardinalConnected ? 'bg-green-500' : 'bg-red-500',
         )}
       />
-      <label htmlFor="host" className="flex-shrink-0 text-xs text-muted-foreground">
+      <label htmlFor="cardinal-host" className="flex-shrink-0 text-xs text-muted-foreground">
         Cardinal URL
       </label>
       <Input
-        id="host"
+        id="cardinal-host"
         placeholder="localhost:4040"
         value={cardinalUrl}
         onChange={(e) => setCardinalUrl(e.target.value)}
@@ -129,11 +129,11 @@ function JaegerUrl() {
 
   return (
     <div className="flex items-center gap-2">
-      <label htmlFor="host" className="flex-shrink-0 text-xs text-muted-foreground">
+      <label htmlFor="jaeger-host" className="flex-shrink-0 text-xs text-muted-foreground">
         Jaeger URL
       </label>
       <Input
-        id="host"
+        id="jaeger-host"
         placeholder="localhost:16686"
         value={jaegerUrl}
         onChange={(e) => setJaegerUrl(e.target.value)}
@@ -144,7 +144,7 @@ function JaegerUrl() {
         target="_blank"
         className={cn(buttonVariants({ variant: 'outline', size: 'icon' }), 'size-8 flex-shrink-0')}
         title="Open full Jaeger UI"
-        rel="noreferrer"
+        rel="noopener noreferrer"
       >
         <ExternalLink size={17} />
       </a>

src/components/jaeger/sidebar.tsx

@@ -128,7 +128,6 @@ export function JaegerSidebar() {
                       ))}
                     </SelectContent>
                   </Select>
-                  <FormControl></FormControl>
                   <FormMessage className="text-xs break-words" />
                 </FormItem>
               )}
@@ -140,7 +139,6 @@ export function JaegerSidebar() {
                 <FormItem>
                   <FormLabel>Operation</FormLabel>
                   <Select
-                    required
                     disabled={!selectedService}
                     defaultValue={field.value}
                     onValueChange={field.onChange}
@@ -166,7 +164,6 @@ export function JaegerSidebar() {
                         ))}
                     </SelectContent>
                   </Select>
-                  <FormControl></FormControl>
                   <FormMessage className="text-xs break-words" />
                 </FormItem>
               )}
@@ -208,7 +205,6 @@ export function JaegerSidebar() {
                       ))}
                     </SelectContent>
                   </Select>
-                  <FormControl></FormControl>
                   <FormMessage className="text-xs break-words" />
                 </FormItem>
               )}

src/lib/query-options.ts

@@ -232,21 +232,19 @@ export const jaegerServicesQueryOptions = ({ jaegerUrl }: JaegerQueryOptionProps
   },
 })
 
-// TODO: validations && clean up
-function getDuration(lookback: string) {
+function getDurationMicroSeconds(lookback: string) {
   const lookupSeconds: { [k: string]: number } = {
     m: 60,
     h: 60 * 60,
     d: 60 * 60 * 24,
   }
-  const unit = lookback[lookback.length - 1]
-  const ns = lookupSeconds[unit] * 1_000_000
-  return ns
+  const seconds = lookback[lookback.length - 1]
+  return lookupSeconds[seconds] * 1_000_000
 }
 
 // since we're embedding an iframe, instead of fetching the page here, we're just
 // returning the url with the search params. we're effectively using tanstack query
-// as a state managemnt tool instead of putting it in a react context
+// as a state management tool instead of putting it in a react context
 export const jaegerSearchQueryOptions = ({ jaegerUrl, options }: JaegerQueryOptionProps) => ({
   queryKey: ['jaegerSearch'],
   queryFn: () => {
@@ -258,8 +256,8 @@ export const jaegerSearchQueryOptions = ({ jaegerUrl, options }: JaegerQueryOpti
     url.searchParams.append('limit', options.limit.toString())
     url.searchParams.append('uiEmbed', 'v0')
 
-    const now = Date.now() * 1000 // convert to ns
-    url.searchParams.append('start', (now - getDuration(options.lookback)).toString())
+    const now = Date.now() * 1000 // convert to microseconds
+    url.searchParams.append('start', (now - getDurationMicroSeconds(options.lookback)).toString())
     url.searchParams.append('end', now.toString())
 
     if (options.operation && options.operation.length > 0) {

src/routes/_cardinal.tsx

@@ -90,6 +90,9 @@ function CardinalLayout() {
       }
     }
     if (isCardinalConnected) sync().catch((e) => console.log(e))
+    // NOTE: take caution when adding dependencies here. you shouldn't add `personas` to this
+    // dependency array as it will result in a weird bug. Linters will always ask for
+    // exhaustive deps, be sure to test first before autofixing.
   }, [isCardinalConnected, cardinalUrl, toast, queryClient])
 
   // setup websocket connection to receive events

src/routes/_jaeger.jaeger.tsx

@@ -15,8 +15,12 @@ function Jaeger() {
 
   useEffect(() => {
     const ping = async () => {
-      const res = await fetch(jaegerUrl)
-      setIsJaegerRunning(res.ok)
+      try {
+        const res = await fetch(jaegerUrl)
+        setIsJaegerRunning(res.ok)
+      } catch (_error) {
+        // no need to do anything as isJaegerRunning false by default
+      }
     }
     ping().then()
   }, [jaegerUrl])
@@ -35,7 +39,7 @@ function Jaeger() {
         </div>
       ) : (
         <div className="p-2 bg-white h-full border border-border rounded-md">
-          <iframe src={(url as string) ?? defaultUrl} className="w-full h-full" />
+          <iframe src={url && typeof url === 'string' ? url : defaultUrl} className="w-full h-full" />
         </div>
       )}
     </>