Updated example

frontend/dist/index.html

@@ -16,7 +16,7 @@
       href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-o2IMYFSK.js"></script>
+    <script type="module" crossorigin src="/assets/index-BNhsKA1b.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DpGaJEG3.css">
   </head>
   <body>

frontend/src/lib/dashboard.tsx

@@ -19,20 +19,20 @@ import type {
   ValidationResult,
 } from "./types"
 
-const DEFAULT_CLASSES = "person, steering wheel, monitor, chair, bag, sticker"
+const DEFAULT_CLASSES = "person, cat, dog, car, chair, cup"
 
 const DEFAULT_RULES = `rules:
-  - name: person-near-steering-wheel
+  - name: example-person-enters-lights
     when:
       all:
         - present: {label: person, min_count: 1}
-        - near: {a: person, b: steering wheel, max_gap_percent: 16}
+    trigger:
+      on: enter
     gate:
       enabled: true
-      cooldown: {key: turn-on-pc, minutes: 5}
     then:
       - type: simulate
-        name: turn on pc
+        name: turn on lights
 `
 
 const DEFAULT_PARAMS: DetectParams = {
@@ -140,9 +140,11 @@ export function DashboardProvider({ children }: { children: ReactNode }) {
     api
       .loadRules()
       .then((r) => {
-        if (r.rules_text) void applyRulesText(r.rules_text)
+        void applyRulesText(r.rules_text || DEFAULT_RULES)
+      })
+      .catch(() => {
+        void applyRulesText(DEFAULT_RULES)
       })
-      .catch(() => void 0)
   }, [applyRulesText])
 
   const setParam = useCallback(

frontend/src/modules/detector/DetectorPanel.tsx

@@ -104,7 +104,7 @@ export function DetectorPanel() {
           value={params.classes}
           onChange={(e) => setParam("classes", e.target.value)}
           className="min-h-16 font-mono text-xs leading-relaxed"
-          placeholder="person, steering wheel, monitor…"
+          placeholder="person, cat, dog, car, chair, cup…"
         />
       </div>
 

frontend/src/modules/rules/RuleStudioPanel.tsx

@@ -32,7 +32,7 @@ export function RuleStudioPanel() {
     compiling,
   } = useDashboard()
   const [instruction, setInstruction] = useState(
-    "If a person is near the steering wheel, turn on the PC. Don't repeat for five minutes.",
+    "When a cat appears in the image, notify me.",
   )
   const [armedDelete, setArmedDelete] = useState<string | null>(null)
 
@@ -143,6 +143,7 @@ export function RuleStudioPanel() {
                       )}
                     />
                     <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">