@brainfish-ai/devdoc 0.1.21

package/renderer/components/ui/select.tsx

@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, CaretDown, CaretUp } from "@phosphor-icons/react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-sm border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <CaretDown className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-sm border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <Check className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <CaretUp className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <CaretDown className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

package/renderer/components/ui/spinner.tsx

@@ -0,0 +1,114 @@
+import { cn } from "@/lib/utils"
+import { CircleNotch } from "@phosphor-icons/react"
+import { useEffect, useState } from "react"
+
+interface SpinnerProps {
+  size?: "sm" | "md" | "lg"
+  className?: string
+}
+
+export function Spinner({ size = "md", className }: SpinnerProps) {
+  const sizeClasses = {
+    sm: "h-4 w-4",
+    md: "h-6 w-6", 
+    lg: "h-8 w-8"
+  }
+
+  return (
+    <CircleNotch 
+      className={cn(
+        "animate-spin text-primary",
+        sizeClasses[size],
+        className
+      )} 
+    />
+  )
+}
+
+interface LoadingSpinnerProps {
+  message?: string
+  className?: string
+  dynamicText?: boolean
+}
+
+const loadingMessages = [
+  "Loading API documentation...",
+  "Fetching endpoint specifications...",
+  "Preparing interactive documentation...",
+  "Compiling API reference...",
+  "Initializing documentation viewer...",
+  "Loading schema definitions...",
+  "Rendering API endpoints...",
+  "Setting up interactive examples...",
+  "Organizing API methods...",
+  "Building comprehensive docs...",
+  "Configuring API explorer...",
+  "Loading request/response models...",
+]
+
+export function LoadingSpinner({ 
+  message = "Loading...", 
+  className, 
+  dynamicText = false
+}: LoadingSpinnerProps) {
+  const [currentMessage, setCurrentMessage] = useState(message)
+
+  useEffect(() => {
+    if (!dynamicText) {
+      setCurrentMessage(message)
+      return
+    }
+
+    // Initialize with a random message
+    const initialIndex = Math.floor(Math.random() * loadingMessages.length)
+    setCurrentMessage(loadingMessages[initialIndex])
+
+    const messageInterval = setInterval(() => {
+      setCurrentMessage(prevMessage => {
+        const currentIndex = loadingMessages.indexOf(prevMessage)
+        const nextIndex = (currentIndex + 1) % loadingMessages.length
+        return loadingMessages[nextIndex]
+      })
+    }, 2000) // Change message every 2 seconds
+
+    return () => {
+      clearInterval(messageInterval)
+    }
+  }, [dynamicText, message])
+
+  return (
+    <div className={cn("flex flex-col items-center justify-center space-y-6", className)}>
+      <div className="relative">
+        <Spinner 
+          size="lg" 
+          className="drop-shadow-sm"
+        />
+        {/* Subtle glow effect */}
+        <div className="absolute inset-0 bg-primary/10 rounded-full blur-lg scale-150 animate-pulse" />
+      </div>
+      
+      <div className="text-center max-w-xs">
+        <p 
+          key={currentMessage}
+          className="text-sm text-muted-foreground animate-in fade-in-0 duration-500 font-medium"
+        >
+          {currentMessage}
+        </p>
+        {dynamicText && (
+          <div className="flex justify-center mt-3 space-x-1">
+            {[...Array(3)].map((_, i) => (
+              <div
+                key={i}
+                className="w-1 h-1 bg-primary/60 rounded-full animate-pulse"
+                style={{
+                  animationDelay: `${i * 0.3}s`,
+                  animationDuration: '1.8s'
+                }}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/renderer/components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-sm p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-sm border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/renderer/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-sm px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/renderer/hooks/use-code-copy.ts

@@ -0,0 +1,88 @@
+'use client'
+
+import { useEffect } from 'react'
+
+/**
+ * Hook to add copy buttons to rehype-pretty-code figures
+ * This enhances static code blocks with interactive copy functionality
+ */
+export function useCodeCopy(containerRef: React.RefObject<HTMLElement | null>, deps: unknown[] = []) {
+  useEffect(() => {
+    if (!containerRef.current) return
+    
+    // Small delay to ensure content is rendered
+    const timeoutId = setTimeout(() => {
+      if (!containerRef.current) return
+
+      const figures = containerRef.current.querySelectorAll('[data-rehype-pretty-code-figure]')
+      
+      figures.forEach((figure) => {
+        // Skip if already has a copy button
+        if (figure.querySelector('.code-copy-button')) return
+        
+        const title = figure.querySelector('[data-rehype-pretty-code-title]')
+        const pre = figure.querySelector('pre')
+        const code = pre?.querySelector('code')
+        
+        if (!pre || !code) return
+        
+        // Create copy button
+        const button = document.createElement('button')
+        button.type = 'button'
+        button.className = 'code-copy-button'
+        button.title = 'Copy code'
+        button.innerHTML = `
+          <svg class="copy-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256">
+            <path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"></path>
+          </svg>
+          <svg class="check-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" style="display:none;">
+            <path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path>
+          </svg>
+        `
+        
+        button.addEventListener('click', async () => {
+          const text = code.textContent || ''
+          try {
+            await navigator.clipboard.writeText(text)
+            
+            // Show check icon
+            const copyIcon = button.querySelector('.copy-icon') as HTMLElement
+            const checkIcon = button.querySelector('.check-icon') as HTMLElement
+            if (copyIcon && checkIcon) {
+              copyIcon.style.display = 'none'
+              checkIcon.style.display = 'block'
+              checkIcon.style.color = 'rgb(16, 185, 129)'
+              
+              setTimeout(() => {
+                copyIcon.style.display = 'block'
+                checkIcon.style.display = 'none'
+              }, 2000)
+            }
+          } catch (err) {
+            console.error('Failed to copy:', err)
+          }
+        })
+        
+        // If there's a title, add button to header area
+        if (title) {
+          // Create a wrapper for the header content
+          const headerWrapper = document.createElement('div')
+          headerWrapper.className = 'code-header-wrapper'
+          
+          // Move title into wrapper
+          title.parentNode?.insertBefore(headerWrapper, title)
+          headerWrapper.appendChild(title)
+          headerWrapper.appendChild(button)
+        } else {
+          // For code blocks without title, add button to pre
+          pre.style.position = 'relative'
+          button.classList.add('code-copy-button-floating')
+          pre.appendChild(button)
+        }
+      })
+    }, 100)
+    
+    return () => clearTimeout(timeoutId)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerRef, ...deps])
+}

package/renderer/hooks/use-openapi-title.ts

@@ -0,0 +1,44 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+interface OpenApiSpec {
+  info: {
+    title: string
+    version: string
+    description?: string
+  }
+}
+
+export function useOpenApiTitle() {
+  const [title, setTitle] = useState<string>('API Documentation')
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function fetchTitle() {
+      try {
+        setLoading(true)
+        const response = await fetch('/api/openapi-spec')
+        
+        if (!response.ok) {
+          throw new Error(`Failed to fetch OpenAPI spec: ${response.status}`)
+        }
+
+        const spec: OpenApiSpec = await response.json()
+        setTitle(spec.info.title || 'API Documentation')
+        setError(null)
+      } catch (err) {
+        console.error('Error fetching OpenAPI title:', err)
+        setError(err instanceof Error ? err.message : 'Unknown error')
+        setTitle('API Documentation') // Fallback title
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchTitle()
+  }, [])
+
+  return { title, loading, error }
+}

package/renderer/lib/api-docs/agent/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Agent Module Exports
+ */
+
+export * from './types'
+export * from './indexer'