Spaces:
Sleeping
Sleeping
| import { useState } from "react" | |
| import { | |
| CheckCircle2, | |
| CircleSlash, | |
| Loader2, | |
| Save, | |
| ShieldCheck, | |
| Sparkles, | |
| Trash2, | |
| Wand2, | |
| } from "lucide-react" | |
| import { useDashboard } from "@/lib/dashboard" | |
| import { Button } from "@/components/ui/button" | |
| import { Textarea } from "@/components/ui/textarea" | |
| import { Badge } from "@/components/ui/badge" | |
| import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" | |
| import { Label } from "@/components/ui/label" | |
| import { Switch } from "@/components/ui/switch" | |
| import { cn } from "@/lib/utils" | |
| export function RuleStudioPanel() { | |
| const { | |
| rulesText, | |
| setRulesText, | |
| validate, | |
| validation, | |
| save, | |
| setRuleEnabled, | |
| deleteRule, | |
| compiler, | |
| compile, | |
| compiling, | |
| } = useDashboard() | |
| const [instruction, setInstruction] = useState( | |
| "When a cat appears in the image, notify me.", | |
| ) | |
| const [armedDelete, setArmedDelete] = useState<string | null>(null) | |
| return ( | |
| <Tabs defaultValue="compose"> | |
| <div className="flex items-center justify-between"> | |
| <TabsList> | |
| <TabsTrigger value="compose"> | |
| <Sparkles className="size-3.5" /> | |
| Compose | |
| </TabsTrigger> | |
| <TabsTrigger value="source">Source</TabsTrigger> | |
| <TabsTrigger value="rules"> | |
| Rules | |
| {validation?.ok && ( | |
| <span className="ml-1 font-mono text-[0.625rem] text-muted-foreground"> | |
| {validation.rules.length} | |
| </span> | |
| )} | |
| </TabsTrigger> | |
| </TabsList> | |
| {validation && | |
| (validation.ok ? ( | |
| <Badge variant="live"> | |
| <CheckCircle2 className="size-3" /> | |
| valid | |
| </Badge> | |
| ) : ( | |
| <Badge variant="danger"> | |
| <CircleSlash className="size-3" /> | |
| invalid | |
| </Badge> | |
| ))} | |
| </div> | |
| {/* Compose: NL → rules */} | |
| <TabsContent value="compose"> | |
| <div className="space-y-3"> | |
| <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> | |
| <p className="text-xs text-muted-foreground"> | |
| Describe the automation in plain language. It compiles to validated rules through{" "} | |
| {compiler.provider} — never executable code. | |
| </p> | |
| <Badge variant="default">{compiler.provider}</Badge> | |
| </div> | |
| <Textarea | |
| value={instruction} | |
| onChange={(e) => setInstruction(e.target.value)} | |
| className="min-h-24" | |
| placeholder="When a cat is near the feeder, dispense food once every 30 minutes…" | |
| /> | |
| <Button onClick={() => compile(instruction)} disabled={compiling || !instruction.trim()}> | |
| {compiling ? <Loader2 className="size-4 animate-spin" /> : <Wand2 className="size-4" />} | |
| {compiling | |
| ? "Compiling…" | |
| : `Compile with ${compiler.provider}`} | |
| </Button> | |
| </div> | |
| </TabsContent> | |
| {/* Source: raw editor */} | |
| <TabsContent value="source"> | |
| <div className="space-y-3"> | |
| <div className="relative"> | |
| <div className="absolute left-0 top-0 z-10 rounded-br-md rounded-tl-md border-b border-r border-border bg-black/40 px-2 py-0.5 font-mono text-[0.625rem] uppercase tracking-wider text-muted-foreground"> | |
| yaml · json | |
| </div> | |
| <Textarea | |
| value={rulesText} | |
| onChange={(e) => setRulesText(e.target.value)} | |
| spellCheck={false} | |
| className="min-h-64 bg-black/40 pt-7 font-mono text-xs leading-relaxed" | |
| /> | |
| </div> | |
| {validation && !validation.ok && validation.error && ( | |
| <pre className="max-h-28 overflow-auto rounded-md border border-destructive/30 bg-destructive/5 p-3 font-mono text-[0.6875rem] text-destructive/90 whitespace-pre-wrap"> | |
| {validation.error} | |
| </pre> | |
| )} | |
| <div className="flex gap-2"> | |
| <Button variant="secondary" onClick={validate}> | |
| <ShieldCheck className="size-4" /> | |
| Validate | |
| </Button> | |
| <Button variant="secondary" onClick={save}> | |
| <Save className="size-4" /> | |
| Save | |
| </Button> | |
| </div> | |
| </div> | |
| </TabsContent> | |
| {/* Rules: parsed view */} | |
| <TabsContent value="rules"> | |
| {validation?.ok && validation.rules.length > 0 ? ( | |
| <div className="space-y-2"> | |
| {validation.rules.map((r) => ( | |
| <div | |
| key={r.name} | |
| className="flex flex-col gap-3 rounded-lg border border-border bg-black/20 px-4 py-3 sm:flex-row sm:items-center sm:justify-between" | |
| > | |
| <div className="min-w-0"> | |
| <div className="flex items-center gap-2"> | |
| <span | |
| className={cn( | |
| "size-1.5 rounded-full", | |
| r.enabled ? "bg-primary" : "bg-muted-foreground/40", | |
| )} | |
| /> | |
| <span className="truncate font-mono text-sm text-foreground">{r.name}</span> | |
| {r.name.startsWith("example-") && <Badge variant="default">example</Badge>} | |
| <Badge variant="default">{r.trigger}</Badge> | |
| </div> | |
| <div className="mt-1 pl-3.5 text-xs text-muted-foreground"> | |
| {r.conditions} condition{r.conditions === 1 ? "" : "s"} →{" "} | |
| {r.actions.map((a) => `${a.type}:${a.name}`).join(", ")} | |
| </div> | |
| {r.labels.length > 0 && ( | |
| <div className="mt-2 flex flex-wrap gap-1 pl-3.5"> | |
| {r.labels.map((label) => ( | |
| <span | |
| key={label} | |
| className="rounded border border-border bg-black/30 px-1.5 py-0.5 font-mono text-[0.625rem] text-muted-foreground" | |
| > | |
| {label} | |
| </span> | |
| ))} | |
| </div> | |
| )} | |
| </div> | |
| <div className="flex shrink-0 items-center gap-2"> | |
| <Label htmlFor={`enabled-${r.name}`} className="text-xs text-muted-foreground"> | |
| {r.enabled ? "enabled" : "disabled"} | |
| </Label> | |
| <Switch | |
| id={`enabled-${r.name}`} | |
| checked={r.enabled} | |
| onCheckedChange={(checked) => setRuleEnabled(r.name, checked)} | |
| /> | |
| <Button | |
| variant={armedDelete === r.name ? "destructive" : "secondary"} | |
| size="sm" | |
| onClick={() => { | |
| if (armedDelete === r.name) { | |
| void deleteRule(r.name) | |
| setArmedDelete(null) | |
| } else { | |
| setArmedDelete(r.name) | |
| } | |
| }} | |
| > | |
| <Trash2 className="size-4" /> | |
| {armedDelete === r.name ? "Confirm" : "Delete"} | |
| </Button> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| ) : validation?.ok ? ( | |
| <div className="flex flex-col items-center gap-2 py-8 text-center text-muted-foreground"> | |
| <ShieldCheck className="size-7 opacity-40" /> | |
| <p className="text-sm">No rules saved.</p> | |
| </div> | |
| ) : ( | |
| <div className="flex flex-col items-center gap-2 py-8 text-center text-muted-foreground"> | |
| <ShieldCheck className="size-7 opacity-40" /> | |
| <p className="text-sm">Validate the source to see parsed rules.</p> | |
| <Button variant="secondary" size="sm" onClick={validate}> | |
| Validate now | |
| </Button> | |
| </div> | |
| )} | |
| </TabsContent> | |
| </Tabs> | |
| ) | |
| } | |