@friggframework/devtools 2.0.0-next.61 → 2.0.0-next.62

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

@@ -1,218 +0,0 @@
-/* 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

@@ -1,52 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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 }