@friggframework/devtools 2.0.0-next.3 → 2.0.0-next.30

package/management-ui/src/components/monitoring/monitoring.css

@@ -0,0 +1,218 @@
+/* Monitoring Dashboard Styles */
+.monitoring-dashboard {
+    @apply p-6 max-w-7xl mx-auto;
+}
+
+/* Status indicators */
+.status-indicator {
+    @apply inline-block w-3 h-3 rounded-full;
+}
+
+.status-indicator.success {
+    @apply bg-green-500;
+}
+
+.status-indicator.warning {
+    @apply bg-yellow-500;
+}
+
+.status-indicator.error {
+    @apply bg-red-500;
+}
+
+.status-indicator.inactive {
+    @apply bg-gray-400;
+}
+
+/* Metric cards */
+.metric-card {
+    @apply border rounded-lg p-4 bg-white shadow-sm hover:shadow-md transition-shadow;
+}
+
+.metric-value {
+    @apply text-2xl font-mono font-bold;
+}
+
+.metric-label {
+    @apply text-sm text-gray-600 mb-1;
+}
+
+/* Progress bars for charts */
+.progress-bar {
+    @apply w-full bg-gray-200 rounded-full overflow-hidden;
+}
+
+.progress-fill {
+    @apply h-full transition-all duration-300 ease-in-out;
+}
+
+/* Health indicators */
+.health-good {
+    @apply text-green-600;
+}
+
+.health-warning {
+    @apply text-yellow-600;
+}
+
+.health-critical {
+    @apply text-red-600;
+}
+
+/* Responsive grid layouts */
+.metrics-grid {
+    @apply grid gap-4;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+
+.metrics-grid-2 {
+    @apply grid grid-cols-1 md:grid-cols-2 gap-4;
+}
+
+.metrics-grid-3 {
+    @apply grid grid-cols-1 md:grid-cols-3 gap-4;
+}
+
+.metrics-grid-4 {
+    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4;
+}
+
+/* Animation for real-time updates */
+@keyframes pulse-update {
+    0% { background-color: rgba(59, 130, 246, 0.1); }
+    50% { background-color: rgba(59, 130, 246, 0.2); }
+    100% { background-color: transparent; }
+}
+
+.metric-updated {
+    animation: pulse-update 1s ease-in-out;
+}
+
+/* Loading states */
+.metric-loading {
+    @apply animate-pulse bg-gray-200 rounded;
+}
+
+/* Error states */
+.metric-error {
+    @apply border-red-300 bg-red-50 text-red-700;
+}
+
+/* Success states */
+.metric-success {
+    @apply border-green-300 bg-green-50 text-green-700;
+}
+
+/* Warning states */
+.metric-warning {
+    @apply border-yellow-300 bg-yellow-50 text-yellow-700;
+}
+
+/* Chart containers */
+.chart-container {
+    @apply w-full h-64 flex items-center justify-center;
+}
+
+.chart-placeholder {
+    @apply text-gray-400 text-center;
+}
+
+/* Real-time indicators */
+.real-time-indicator {
+    @apply inline-flex items-center gap-1 text-xs text-green-600;
+}
+
+.real-time-indicator::before {
+    content: '';
+    @apply w-2 h-2 bg-green-500 rounded-full animate-pulse;
+}
+
+/* Latency visualization */
+.latency-bar {
+    @apply flex h-6 rounded overflow-hidden;
+}
+
+.latency-segment {
+    @apply flex items-center justify-center text-xs text-white font-mono;
+}
+
+/* Connection status */
+.connection-status {
+    @apply flex items-center gap-2 text-sm;
+}
+
+.connection-dot {
+    @apply w-2 h-2 rounded-full;
+}
+
+.connection-dot.connected {
+    @apply bg-green-500 animate-pulse;
+}
+
+.connection-dot.disconnected {
+    @apply bg-red-500;
+}
+
+.connection-dot.connecting {
+    @apply bg-yellow-500 animate-spin;
+}
+
+/* Monitoring dashboard specific overrides */
+.monitoring-dashboard .card {
+    @apply border border-gray-200 rounded-lg bg-white shadow-sm;
+}
+
+.monitoring-dashboard .card:hover {
+    @apply shadow-md;
+}
+
+/* Navigation tabs */
+.monitoring-nav {
+    @apply flex gap-2 mb-6;
+}
+
+.monitoring-nav button {
+    @apply px-4 py-2 rounded text-sm font-medium transition-colors;
+}
+
+.monitoring-nav button.active {
+    @apply bg-blue-600 text-white;
+}
+
+.monitoring-nav button:not(.active) {
+    @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
+}
+
+/* Responsive breakpoints */
+@media (max-width: 768px) {
+    .monitoring-dashboard {
+        @apply p-4;
+    }
+    
+    .metrics-grid-4 {
+        @apply grid-cols-1;
+    }
+    
+    .metrics-grid-3 {
+        @apply grid-cols-1;
+    }
+    
+    .metrics-grid-2 {
+        @apply grid-cols-1;
+    }
+}
+
+/* Dark mode support (future enhancement) */
+@media (prefers-color-scheme: dark) {
+    .monitoring-dashboard {
+        @apply text-gray-100;
+    }
+    
+    .monitoring-dashboard .card {
+        @apply bg-gray-800 border-gray-700;
+    }
+    
+    .metric-label {
+        @apply text-gray-400;
+    }
+}

package/management-ui/src/components/theme-provider.jsx

@@ -0,0 +1,52 @@
+import React, { createContext, useContext, useEffect, useState } from 'react'
+
+const ThemeContext = createContext({
+  theme: 'system',
+  setTheme: () => null,
+})
+
+export function ThemeProvider({ children, defaultTheme = 'system', storageKey = 'frigg-ui-theme', ...props }) {
+  const [theme, setTheme] = useState(
+    () => localStorage.getItem(storageKey) || defaultTheme
+  )
+
+  useEffect(() => {
+    const root = window.document.documentElement
+
+    root.classList.remove('light', 'dark')
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
+
+      root.classList.add(systemTheme)
+      return
+    }
+
+    root.classList.add(theme)
+  }, [theme])
+
+  const value = {
+    theme,
+    setTheme: (theme) => {
+      localStorage.setItem(storageKey, theme)
+      setTheme(theme)
+    },
+  }
+
+  return (
+    <ThemeContext.Provider {...props} value={value}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext)
+
+  if (context === undefined)
+    throw new Error('useTheme must be used within a ThemeProvider')
+
+  return context
+}

package/management-ui/src/components/theme-toggle.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Moon, Sun, Monitor } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu'
+import { useTheme } from './theme-provider'
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>
+          <Sun className="mr-2 h-4 w-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
+          <Moon className="mr-2 h-4 w-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>
+          <Monitor className="mr-2 h-4 w-4" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/management-ui/src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center border px-2.5 py-0.5 text-xs font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0 rounded-sm",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-primary/20 bg-primary text-primary-foreground shadow-sm hover:bg-primary/80",
+        secondary:
+          "border-secondary/20 bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-destructive/20 bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
+        outline: "text-foreground border-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

package/management-ui/src/components/ui/button.test.jsx

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Button } from './button'
+
+describe('Button Component', () => {
+  it('renders button with text', () => {
+    render(<Button>Click me</Button>)
+    
+    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument()
+  })
+
+  it('handles click events', async () => {
+    const user = userEvent.setup()
+    const handleClick = vi.fn()
+    
+    render(<Button onClick={handleClick}>Click me</Button>)
+    
+    await user.click(screen.getByRole('button'))
+    
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('applies variant classes correctly', () => {
+    render(<Button variant="destructive">Delete</Button>)
+    
+    const button = screen.getByRole('button')
+    expect(button).toHaveClass('bg-destructive')
+  })
+
+  it('applies size classes correctly', () => {
+    render(<Button size="sm">Small</Button>)
+    
+    const button = screen.getByRole('button')
+    expect(button).toHaveClass('h-8') // sm size uses h-8, not h-9
+  })
+
+  it('can be disabled', () => {
+    render(<Button disabled>Disabled</Button>)
+    
+    const button = screen.getByRole('button')
+    expect(button).toBeDisabled()
+    expect(button).toHaveClass('disabled:pointer-events-none')
+  })
+
+  it('renders as child component when asChild is true', () => {
+    render(
+      <Button asChild>
+        <a href="/test">Link Button</a>
+      </Button>
+    )
+    
+    expect(screen.getByRole('link')).toBeInTheDocument()
+    expect(screen.getByText('Link Button')).toBeInTheDocument()
+  })
+})

package/management-ui/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 rounded-sm",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-md hover:bg-primary/90 border border-primary/20",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 border border-destructive/20",
+        outline:
+          "border-2 border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground hover:border-accent",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 border border-secondary/20",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 px-3 text-xs",
+        lg: "h-10 px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/management-ui/src/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "border-2 bg-card text-card-foreground shadow-lg rounded-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }