-
+
{title}
{description ? (
-
+
{description}
) : null}
diff --git a/src/frontend/src/components/shared/PagePlaceholder.tsx b/src/frontend/src/components/shared/PagePlaceholder.tsx
index 73476a2..703f8fc 100644
--- a/src/frontend/src/components/shared/PagePlaceholder.tsx
+++ b/src/frontend/src/components/shared/PagePlaceholder.tsx
@@ -28,7 +28,7 @@ export function PagePlaceholder({
description="Shared placeholder so every route lives inside the same application shell."
icon={
}
>
-
+
Replace only the page content without rebuilding layout, navigation,
or chrome. This helps the team work in parallel without fragmenting
the app structure.
@@ -38,7 +38,7 @@ export function PagePlaceholder({
}
+ icon={}
>
-
+
+
{icon ? (
-
+
{icon}
) : null}
-
{title}
+
{title}
{description ? (
-
{description}
+
{description}
) : null}
{actions ?
{actions}
: null}
-
{children}
-
+ {children}
+
);
}
diff --git a/src/frontend/src/components/shared/StatCard.tsx b/src/frontend/src/components/shared/StatCard.tsx
index 442c877..460860c 100644
--- a/src/frontend/src/components/shared/StatCard.tsx
+++ b/src/frontend/src/components/shared/StatCard.tsx
@@ -1,5 +1,8 @@
import type { ReactNode } from "react";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+
type StatCardProps = {
label: string;
value: string;
@@ -10,11 +13,11 @@ type StatCardProps = {
};
const toneClassMap = {
- neutral: "bg-surface-hover text-fg-muted",
- success: "bg-success-soft text-success",
- warning: "bg-warning-soft text-warning",
- error: "bg-error-soft text-error",
- info: "bg-info-soft text-info",
+ neutral: "bg-muted text-muted-foreground",
+ success: "bg-success/10 text-success",
+ warning: "bg-warning/10 text-warning",
+ error: "bg-destructive/10 text-destructive",
+ info: "bg-info/10 text-info",
} as const;
export function StatCard({
@@ -26,18 +29,18 @@ export function StatCard({
isLoading = false,
}: StatCardProps) {
return (
-
+
-
{label}
+
{label}
{isLoading ? (
) : (
-
+
{value}
)}
@@ -45,14 +48,17 @@ export function StatCard({
{icon ? (
{icon}
) : null}
- {hint ?
{hint}
: null}
-
+ {hint ?
{hint}
: null}
+
);
}
diff --git a/src/frontend/src/components/shared/StatusBadge.tsx b/src/frontend/src/components/shared/StatusBadge.tsx
index e5f3c70..4ae3b67 100644
--- a/src/frontend/src/components/shared/StatusBadge.tsx
+++ b/src/frontend/src/components/shared/StatusBadge.tsx
@@ -1,3 +1,5 @@
+import { Badge } from "@/components/ui/badge";
+
type StatusBadgeTone = "success" | "warning" | "error" | "info" | "neutral";
type StatusBadgeProps = {
@@ -5,12 +7,12 @@ type StatusBadgeProps = {
tone?: StatusBadgeTone;
};
-const toneClassMap = {
- success: "bg-success-soft text-success",
- warning: "bg-warning-soft text-warning",
- error: "bg-error-soft text-error",
- info: "bg-info-soft text-info",
- neutral: "bg-surface-hover text-fg-muted",
+const toneVariantMap = {
+ success: "success",
+ warning: "warning",
+ error: "destructive",
+ info: "default",
+ neutral: "outline",
} as const;
export function StatusBadge({
@@ -18,11 +20,9 @@ export function StatusBadge({
tone = "neutral",
}: StatusBadgeProps) {
return (
-
+
{label}
-
+
);
}
diff --git a/src/frontend/src/components/ui/alert.tsx b/src/frontend/src/components/ui/alert.tsx
new file mode 100644
index 0000000..84b42c0
--- /dev/null
+++ b/src/frontend/src/components/ui/alert.tsx
@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva("rounded-lg border p-4 text-sm", {
+ variants: {
+ variant: {
+ default: "border-border bg-card text-card-foreground",
+ success: "border-success/30 bg-success/10 text-success",
+ destructive: "border-destructive/30 bg-destructive/10 text-destructive",
+ warning: "border-warning/30 bg-warning/10 text-warning",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+});
+
+export interface AlertProps
+ extends React.HTMLAttributes
,
+ VariantProps {}
+
+const Alert = React.forwardRef(
+ ({ className, variant, ...props }, ref) => (
+
+ ),
+);
+Alert.displayName = "Alert";
+
+export { Alert };
diff --git a/src/frontend/src/components/ui/badge.tsx b/src/frontend/src/components/ui/badge.tsx
new file mode 100644
index 0000000..1e19eae
--- /dev/null
+++ b/src/frontend/src/components/ui/badge.tsx
@@ -0,0 +1,33 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+ "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors",
+ {
+ variants: {
+ variant: {
+ default: "border-primary/30 bg-primary/10 text-primary",
+ secondary: "border-border bg-secondary text-secondary-foreground",
+ success: "border-success/30 bg-success/10 text-success",
+ warning: "border-warning/30 bg-warning/10 text-warning",
+ destructive: "border-destructive/30 bg-destructive/10 text-destructive",
+ outline: "border-border text-muted-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+);
+
+export interface BadgeProps
+ extends React.HTMLAttributes,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return ;
+}
+
+export { Badge };
diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
new file mode 100644
index 0000000..748bd7e
--- /dev/null
+++ b/src/frontend/src/components/ui/button.tsx
@@ -0,0 +1,58 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+ "inline-flex h-9 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+ {
+ variants: {
+ variant: {
+ default:
+ "border border-primary/80 bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+ destructive:
+ "border border-destructive/50 bg-destructive/10 text-destructive hover:bg-destructive/15",
+ outline:
+ "border border-border bg-background text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "border border-border bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ ghost: "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+ link: "h-auto p-0 text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-10 rounded-md px-5",
+ icon: "h-9 w-9 p-0",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean;
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+
+ );
+ },
+);
+Button.displayName = "Button";
+
+export { Button };
diff --git a/src/frontend/src/components/ui/card.tsx b/src/frontend/src/components/ui/card.tsx
new file mode 100644
index 0000000..6aee981
--- /dev/null
+++ b/src/frontend/src/components/ui/card.tsx
@@ -0,0 +1,71 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+type CardProps = React.ComponentProps<"div"> & {
+ as?: "article" | "div" | "section";
+};
+
+const Card = React.forwardRef(
+ ({ as: Comp = "div", className, ...props }, ref) => (
+
+ ),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.ComponentProps<"p">
+>(({ className, ...props }, ref) => (
+
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ ),
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
diff --git a/src/frontend/src/components/ui/checkbox.tsx b/src/frontend/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..fce6105
--- /dev/null
+++ b/src/frontend/src/components/ui/checkbox.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+ HTMLInputElement,
+ Omit, "type">
+>(({ className, ...props }, ref) => (
+
+));
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..6b1dd2c
--- /dev/null
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -0,0 +1,93 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+
+
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+export {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+};
diff --git a/src/frontend/src/components/ui/input.tsx b/src/frontend/src/components/ui/input.tsx
new file mode 100644
index 0000000..3a3e450
--- /dev/null
+++ b/src/frontend/src/components/ui/input.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef>(
+ ({ className, type, ...props }, ref) => (
+
+ ),
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/src/frontend/src/components/ui/label.tsx b/src/frontend/src/components/ui/label.tsx
new file mode 100644
index 0000000..b444249
--- /dev/null
+++ b/src/frontend/src/components/ui/label.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Label = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ ),
+);
+Label.displayName = "Label";
+
+export { Label };
diff --git a/src/frontend/src/components/ui/select.tsx b/src/frontend/src/components/ui/select.tsx
new file mode 100644
index 0000000..e1e06fb
--- /dev/null
+++ b/src/frontend/src/components/ui/select.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Select = React.forwardRef<
+ HTMLSelectElement,
+ React.ComponentProps<"select">
+>(({ className, children, ...props }, ref) => (
+
+));
+Select.displayName = "Select";
+
+export { Select };
diff --git a/src/frontend/src/components/ui/table.tsx b/src/frontend/src/components/ui/table.tsx
new file mode 100644
index 0000000..986fad5
--- /dev/null
+++ b/src/frontend/src/components/ui/table.tsx
@@ -0,0 +1,73 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<
+ HTMLTableElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+TableBody.displayName = "TableBody";
+
+const TableRow = React.forwardRef<
+ HTMLTableRowElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+ |
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+ HTMLTableCellElement,
+ React.ThHTMLAttributes
+>(({ className, ...props }, ref) => (
+ |
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+ HTMLTableCellElement,
+ React.TdHTMLAttributes
+>(({ className, ...props }, ref) => (
+ |
+));
+TableCell.displayName = "TableCell";
+
+export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow };
diff --git a/src/frontend/src/features/auth/AuthPendingState.tsx b/src/frontend/src/features/auth/AuthPendingState.tsx
index 7a4f7bc..4409ae0 100644
--- a/src/frontend/src/features/auth/AuthPendingState.tsx
+++ b/src/frontend/src/features/auth/AuthPendingState.tsx
@@ -1,9 +1,11 @@
+import { Card } from "@/components/ui/card";
+
export function AuthPendingState() {
return (
-
-
+
+
Checking session...
-
+
);
}
diff --git a/src/frontend/src/features/logs/LogDetailModal.tsx b/src/frontend/src/features/logs/LogDetailModal.tsx
index c016d8c..bcd9f18 100644
--- a/src/frontend/src/features/logs/LogDetailModal.tsx
+++ b/src/frontend/src/features/logs/LogDetailModal.tsx
@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
import { Modal } from "@/components/shared/Modal";
import { StatusBadge } from "@/components/shared/StatusBadge";
+import { Button } from "@/components/ui/button";
import type { Log, LogAction, LogSeverity } from "./types";
@@ -24,15 +25,15 @@ function severityTone(severity: LogSeverity) {
function Field({ label, children }: { label: string; children: ReactNode }) {
return (
-
-
{label}
-
{children}
+
+
{label}
+ {children}
);
}
function Nullable({ value }: { value: string | number | null | undefined }) {
- return value !== null && value !== undefined ? <>{value} :
—;
+ return value !== null && value !== undefined ? <>{value} :
—;
}
export function LogDetailModal({ log, onClose }: LogDetailModalProps) {
@@ -41,9 +42,9 @@ export function LogDetailModal({ log, onClose }: LogDetailModalProps) {
title="Event details"
onClose={onClose}
footer={
-
}
>
@@ -92,7 +93,7 @@ export function LogDetailModal({ log, onClose }: LogDetailModalProps) {
{log.raw_context !== null && (
-
+
{JSON.stringify(log.raw_context, null, 2)}
diff --git a/src/frontend/src/features/policies/DeletePolicyDialog.tsx b/src/frontend/src/features/policies/DeletePolicyDialog.tsx
index 50acede..42699dd 100644
--- a/src/frontend/src/features/policies/DeletePolicyDialog.tsx
+++ b/src/frontend/src/features/policies/DeletePolicyDialog.tsx
@@ -1,6 +1,8 @@
import { useState } from "react";
import { Modal } from "@/components/shared/Modal";
+import { Alert } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
import { useAuth } from "@/hooks/use-auth";
import { ApiError } from "@/lib/api-client";
@@ -39,32 +41,31 @@ export function DeletePolicyDialog({ policy, onSuccess, onClose }: DeletePolicyD
onClose={onClose}
footer={
<>
-