feat: embed jaeger ui in cardinal editor

package.json

@@ -25,7 +25,7 @@
     "@sentry/react": "^8.28.0",
     "@sentry/vite-plugin": "^2.22.4",
     "@tanstack/react-query": "^5.28.14",
-    "@tanstack/react-router": "^1.26.9",
+    "@tanstack/react-router": "^1.70.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "lucide-react": "^0.334.0",
@@ -41,7 +41,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.3",
-    "@tanstack/router-vite-plugin": "^1.26.8",
+    "@tanstack/router-vite-plugin": "^1.69.1",
     "@types/node": "^20.12.4",
     "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.24",

src/components/sheets/sample-entities.tsx → src/components/cardinal/sheets/sample-entities.tsx

@@ -1,4 +1,4 @@
-import { EntityCard } from '@/components/entity-views'
+import { EntityCard } from '@/components/cardinal/entity-views'
 import {
   Accordion,
   AccordionContent,

src/components/sidebar/index.tsx → src/components/cardinal/sidebar/index.tsx

@@ -12,14 +12,14 @@ 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])
 
-export function Sidebar() {
+export function CardinalSidebar() {
   const cardinal = useCardinal()
   const { data, isError, error } = useQuery(worldQueryOptions(cardinal))
   const { toast } = useToast()
@@ -41,8 +41,8 @@ export function Sidebar() {
     <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/sidebar/messages.tsx → 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/sidebar/queries.tsx → 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

@@ -1,30 +1,79 @@
 import * as Sentry from '@sentry/react'
 import { useQueryClient } from '@tanstack/react-query'
-import { Bell, BellOff, RefreshCw } from 'lucide-react'
+import { Bell, BellOff, ExternalLink, RefreshCw } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
 import logoDark from '@/assets/world-dark.svg'
 import logoLight from '@/assets/world-light.svg'
-import { Button } from '@/components/ui/button'
+import { Button, buttonVariants } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { useToast } from '@/components/ui/use-toast'
 import { useCardinal } from '@/lib/cardinal-provider'
 import { worldQueryOptions } from '@/lib/query-options'
 import { cn, errorToast } from '@/lib/utils'
+import { Link, useRouterState } from '@tanstack/react-router'
+
+const links = [
+  { title: 'Cardinal', href: '/cardinal' },
+  { title: 'Jaeger', href: '/jaeger' },
+]
 
 export function Header() {
-  const { cardinalUrl, setCardinalUrl, isCardinalConnected, notifications, setNotifications } =
-    useCardinal()
-  const [fetching, setFetching] = useState(false)
-  const queryClient = useQueryClient()
-  const { toast } = useToast()
+  const routerState = useRouterState({
+    select: (state) => state.location,
+  })
+  const location = routerState.pathname
 
   useEffect(() => {
     const feedback = Sentry.getFeedback()
     const unsubscribe = feedback?.attachTo('#feedback-btn')
     return unsubscribe
   }, [])
 
+  return (
+    <header className="border-b">
+      <nav className="flex items-center justify-between px-3 h-12">
+        <div className="flex items-center gap-6">
+          <img src={logoLight} width={32} height={32} className="dark:hidden" />
+          <img src={logoDark} width={32} height={32} className="hidden dark:block" />
+          {links.map((link) => (
+            <Link
+              key={link.href}
+              to={link.href}
+              className={cn(
+                'text-sm font-medium transition-colors hover:text-primary',
+                location === link.href ? 'text-primary' : 'text-muted-foreground',
+              )}
+            >
+              {link.title}
+            </Link>
+          ))}
+        </div>
+        <div className="flex items-center gap-2">
+          {location === '/cardinal' ? (
+            <CardinalUrl />
+          ) : location === '/jaeger' ? (
+            <JaegerUrl />
+          ) : (
+            // unreachable or 404
+            <></>
+          )}
+          <Button id="feedback-btn" variant="outline" className="h-8 gap-2">
+            Give Feedback
+          </Button>
+        </div>
+      </nav>
+    </header>
+  )
+}
+
+function CardinalUrl() {
+  const { cardinalUrl, setCardinalUrl, isCardinalConnected, notifications, setNotifications } =
+    useCardinal()
+  const [fetching, setFetching] = useState(false)
+  const queryClient = useQueryClient()
+  const { toast } = useToast()
+
   const refetchWorld = async () => {
     setFetching(true)
     try {
@@ -36,50 +85,69 @@ export function Header() {
   }
 
   return (
-    <header className="border-b">
-      <nav className="flex items-center justify-between px-3 h-12">
-        <img src={logoLight} width={32} height={32} className="dark:hidden" />
-        <img src={logoDark} width={32} height={32} className="hidden dark:block" />
-        <div className="flex items-center gap-2">
-          <div
-            className={cn(
-              'size-2 rounded-full flex-shrink-0',
-              isCardinalConnected ? 'bg-green-500' : 'bg-red-500',
-            )}
-          />
-          <label htmlFor="host" className="flex-shrink-0 text-xs text-muted-foreground">
-            Cardinal URL
-          </label>
-          <Input
-            id="host"
-            placeholder="localhost:4040"
-            value={cardinalUrl}
-            onChange={(e) => setCardinalUrl(e.target.value)}
-            className="h-8"
-          />
-          <Button
-            variant="outline"
-            size="icon"
-            className="size-8 flex-shrink-0"
-            title="Refresh world"
-            onClick={() => void refetchWorld()}
-          >
-            <RefreshCw size={16} className={cn(fetching && 'animate-spin')} />
-          </Button>
-          <Button
-            variant="outline"
-            size="icon"
-            className="size-8 flex-shrink-0"
-            title="Toggle notifications"
-            onClick={() => setNotifications(!notifications)}
-          >
-            {notifications ? <Bell size={17} /> : <BellOff size={17} />}
-          </Button>
-          <Button id="feedback-btn" variant="outline" className="h-8 gap-2">
-            Give Feedback
-          </Button>
-        </div>
-      </nav>
-    </header>
+    <div className="flex items-center gap-2">
+      <div
+        className={cn(
+          'size-2 rounded-full flex-shrink-0',
+          isCardinalConnected ? 'bg-green-500' : 'bg-red-500',
+        )}
+      />
+      <label htmlFor="cardinal-host" className="flex-shrink-0 text-xs text-muted-foreground">
+        Cardinal URL
+      </label>
+      <Input
+        id="cardinal-host"
+        placeholder="localhost:4040"
+        value={cardinalUrl}
+        onChange={(e) => setCardinalUrl(e.target.value)}
+        className="h-8"
+      />
+      <Button
+        variant="outline"
+        size="icon"
+        className="size-8 flex-shrink-0"
+        title="Refresh world"
+        onClick={() => void refetchWorld()}
+      >
+        <RefreshCw size={16} className={cn(fetching && 'animate-spin')} />
+      </Button>
+      <Button
+        variant="outline"
+        size="icon"
+        className="size-8 flex-shrink-0"
+        title="Toggle notifications"
+        onClick={() => setNotifications(!notifications)}
+      >
+        {notifications ? <Bell size={17} /> : <BellOff size={17} />}
+      </Button>
+    </div>
+  )
+}
+
+function JaegerUrl() {
+  const { jaegerUrl, setJaegerUrl } = useCardinal()
+
+  return (
+    <div className="flex items-center gap-2">
+      <label htmlFor="jaeger-host" className="flex-shrink-0 text-xs text-muted-foreground">
+        Jaeger URL
+      </label>
+      <Input
+        id="jaeger-host"
+        placeholder="localhost:16686"
+        value={jaegerUrl}
+        onChange={(e) => setJaegerUrl(e.target.value)}
+        className="h-8"
+      />
+      <a
+        href={jaegerUrl}
+        target="_blank"
+        className={cn(buttonVariants({ variant: 'outline', size: 'icon' }), 'size-8 flex-shrink-0')}
+        title="Open full Jaeger UI"
+        rel="noopener noreferrer"
+      >
+        <ExternalLink size={17} />
+      </a>
+    </div>
   )
 }