7d6e248a14
- dashboard/: Vite 5 + React 18 + TypeScript strict SPA
- Auth: sessionStorage credentials, TokenManager validation, AuthProvider context
- Pages: Login, Agents (search + filter), AgentDetail (suspend/reactivate),
Credentials (generate/rotate/revoke, new secret shown once),
AuditLog (filters + pagination), Health (PG + Redis status, 30s refresh)
- Components: Button, Badge, ConfirmDialog, AppShell, RequireAuth
- All destructive actions gated by ConfirmDialog
- Zero dangerouslySetInnerHTML; sessionStorage only (OWASP compliant)
- src/routes/health.ts: unauthenticated GET /health — PG + Redis connectivity
- src/app.ts: health route + dashboard/dist/ served at /dashboard with SPA fallback
- 6 new health route tests; 308/308 unit tests passing
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type Variant = 'default' | 'destructive' | 'outline' | 'ghost';
|
|
type Size = 'sm' | 'md' | 'lg';
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: Variant;
|
|
size?: Size;
|
|
loading?: boolean;
|
|
}
|
|
|
|
const variantClasses: Record<Variant, string> = {
|
|
default: 'bg-brand-600 text-white hover:bg-brand-700 focus:ring-brand-500',
|
|
destructive: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
|
|
outline: 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 focus:ring-brand-500',
|
|
ghost: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900 focus:ring-brand-500',
|
|
};
|
|
|
|
const sizeClasses: Record<Size, string> = {
|
|
sm: 'px-3 py-1.5 text-sm',
|
|
md: 'px-4 py-2 text-sm',
|
|
lg: 'px-6 py-3 text-base',
|
|
};
|
|
|
|
/**
|
|
* Reusable button component with variant and size support.
|
|
*
|
|
* @param variant - Visual style: default | destructive | outline | ghost
|
|
* @param size - Size: sm | md | lg
|
|
* @param loading - When true, shows a spinner and disables the button
|
|
*/
|
|
export function Button({
|
|
variant = 'default',
|
|
size = 'md',
|
|
loading = false,
|
|
className,
|
|
children,
|
|
disabled,
|
|
...props
|
|
}: ButtonProps): React.JSX.Element {
|
|
return (
|
|
<button
|
|
className={cn(
|
|
'inline-flex items-center justify-center gap-2 rounded-md font-medium',
|
|
'focus:outline-none focus:ring-2 focus:ring-offset-2',
|
|
'disabled:pointer-events-none disabled:opacity-50',
|
|
'transition-colors duration-150',
|
|
variantClasses[variant],
|
|
sizeClasses[size],
|
|
className,
|
|
)}
|
|
disabled={disabled ?? loading}
|
|
{...props}
|
|
>
|
|
{loading && (
|
|
<svg className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
|
|
</svg>
|
|
)}
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|