UI Functional, next fixing automations

.gitignore

@@ -16,3 +16,8 @@ models/
 *.pt
 *.onnx
 *.engine
+CLAUDE.md
+*.ts
+.claude
+
+design_previews/

app.py

@@ -0,0 +1,1324 @@
+from __future__ import annotations
+
+import json
+import html
+import os
+import shutil
+from pathlib import Path
+from typing import Any
+
+import gradio as gr
+
+from tiny_trigger.actions import dispatch_events
+from tiny_trigger.automation import evaluate_video_detections, load_automation_text
+from tiny_trigger.detector import parse_class_prompt
+from tiny_trigger.llm import compile_automation_with_llamacpp
+from tiny_trigger.store import (
+    EVENTS_PATH,
+    RuntimeState,
+    append_events,
+    load_local_config,
+    load_runtime_state,
+    load_saved_automations,
+    save_automations,
+    save_runtime_state,
+)
+from tiny_trigger.video import process_video, render_automation_video
+
+
+LOCAL_CONFIG = load_local_config()
+DEFAULT_CLASSES = os.getenv(
+    "TINY_TRIGGER_CLASSES",
+    LOCAL_CONFIG.default_classes or "person, wheel, clothes, chair, monitor, steering wheel, bag, sticker",
+)
+DEFAULT_MODEL = os.getenv("TINY_TRIGGER_YOLOE_MODEL", LOCAL_CONFIG.default_detector_model or "yoloe-26s-seg.pt")
+DEFAULT_DEVICE = os.getenv("TINY_TRIGGER_DEVICE", LOCAL_CONFIG.default_device or "auto")
+DEFAULT_IMAGE_SIZE = int(os.getenv("TINY_TRIGGER_IMAGE_SIZE", LOCAL_CONFIG.default_image_size or 960))
+DEFAULT_MAX_DETECTIONS = int(os.getenv("TINY_TRIGGER_MAX_DETECTIONS", LOCAL_CONFIG.default_max_detections or 100))
+DEFAULT_WEBHOOK_URL = os.getenv("TINY_TRIGGER_WEBHOOK_URL", LOCAL_CONFIG.webhook_url or "")
+DEFAULT_LLAMACPP_BASE_URL = os.getenv(
+    "TINY_TRIGGER_LLAMACPP_BASE_URL",
+    LOCAL_CONFIG.llamacpp_base_url or "http://127.0.0.1:8080/v1",
+)
+DEFAULT_LLAMACPP_MODEL = os.getenv(
+    "TINY_TRIGGER_LLAMACPP_MODEL",
+    LOCAL_CONFIG.llamacpp_model or "ggml-org/Qwen3-1.7B-GGUF:Q4_K_M",
+)
+
+
+def _ensure_ffmpeg_available() -> None:
+    if shutil.which("ffmpeg") and shutil.which("ffprobe"):
+        return
+
+    try:
+        import static_ffmpeg
+
+        static_ffmpeg.add_paths()
+    except ImportError:
+        pass
+    if shutil.which("ffmpeg") and shutil.which("ffprobe"):
+        return
+
+    try:
+        import imageio_ffmpeg
+    except ImportError:
+        return
+
+    ffmpeg_exe = Path(imageio_ffmpeg.get_ffmpeg_exe())
+    local_bin = Path(".local") / "bin"
+    local_bin.mkdir(parents=True, exist_ok=True)
+    ffmpeg_link = local_bin / ("ffmpeg.exe" if os.name == "nt" else "ffmpeg")
+    if not ffmpeg_link.exists():
+        try:
+            ffmpeg_link.symlink_to(ffmpeg_exe)
+        except OSError:
+            shutil.copy2(ffmpeg_exe, ffmpeg_link)
+            ffmpeg_link.chmod(0o755)
+    os.environ["PATH"] = f"{local_bin.resolve()}{os.pathsep}{os.environ.get('PATH', '')}"
+
+
+_ensure_ffmpeg_available()
+
+APP_CSS = """
+:root {
+  --tt-bg: #f6f7f8;
+  --tt-surface: #ffffff;
+  --tt-surface-soft: #eef2f5;
+  --tt-text: #17202a;
+  --tt-muted: #687484;
+  --tt-border: #dce1e7;
+  --tt-border-strong: #cbd3dd;
+  --tt-red: #d93a2f;
+  --tt-red-dark: #b92f27;
+  --tt-teal: #109f8f;
+  --tt-blue: #3569d4;
+  --tt-lime: #d5ef4a;
+  --tt-shadow: 0 20px 45px rgba(31, 41, 55, 0.08);
+  --tt-radius: 8px;
+}
+
+body,
+.gradio-container {
+  background:
+    linear-gradient(180deg, rgba(16, 159, 143, 0.08), rgba(246, 247, 248, 0) 310px),
+    var(--tt-bg) !important;
+  color: var(--tt-text) !important;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
+  letter-spacing: 0 !important;
+}
+
+.gradio-container {
+  max-width: 1440px !important;
+  margin: 0 auto !important;
+  padding: 22px 24px 32px !important;
+}
+
+footer {
+  display: none !important;
+}
+
+.tt-hero {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 18px;
+}
+
+.tt-kicker {
+  margin: 0 0 5px;
+  color: var(--tt-muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.tt-title {
+  margin: 0;
+  color: var(--tt-text);
+  font-size: 31px;
+  line-height: 1.05;
+  font-weight: 820;
+}
+
+.tt-subtitle {
+  margin: 8px 0 0;
+  color: var(--tt-muted);
+  font-size: 14px;
+}
+
+.tt-chips {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 9px;
+}
+
+.tt-chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 31px;
+  padding: 0 12px;
+  border: 1px solid var(--tt-border);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.76);
+  color: var(--tt-text);
+  font-size: 12px;
+  font-weight: 800;
+  white-space: nowrap;
+  box-shadow: 0 8px 20px rgba(31, 41, 55, 0.04);
+}
+
+.tt-chip.live {
+  border-color: transparent;
+  background: var(--tt-teal);
+  color: #ffffff;
+}
+
+.tt-grid {
+  gap: 16px !important;
+  align-items: stretch !important;
+}
+
+.tt-panel {
+  border: 1px solid var(--tt-border) !important;
+  border-radius: var(--tt-radius) !important;
+  background: var(--tt-surface) !important;
+  color: var(--tt-text) !important;
+  box-shadow: var(--tt-shadow) !important;
+  overflow: hidden !important;
+}
+
+.tt-panel > div,
+.tt-panel .form,
+.tt-panel .block,
+.tt-panel .wrap,
+.tt-panel .contain,
+.tt-video-panel > div,
+.tt-data-panel > div {
+  background: var(--tt-surface) !important;
+  color: var(--tt-text) !important;
+}
+
+.tt-panel > .form,
+.tt-panel .form {
+  border: 0 !important;
+  background: transparent !important;
+}
+
+.tt-panel-title h2,
+.tt-panel-title h3,
+.tt-section h2,
+.tt-section h3 {
+  margin: 0 !important;
+  color: var(--tt-muted) !important;
+  font-size: 12px !important;
+  font-weight: 850 !important;
+  letter-spacing: 0.08em !important;
+  line-height: 1.2 !important;
+  text-transform: uppercase !important;
+}
+
+.tt-panel-title {
+  margin-bottom: 10px !important;
+}
+
+.tt-panel .block,
+.tt-panel .block.padded {
+  border-color: var(--tt-border) !important;
+  border-radius: 7px !important;
+}
+
+.tt-panel label,
+.tt-panel .label-wrap,
+.tt-panel .wrap label,
+.tt-panel .block-label {
+  color: var(--tt-muted) !important;
+  font-size: 12px !important;
+  font-weight: 780 !important;
+}
+
+.tt-panel textarea,
+.tt-panel input,
+.tt-panel select {
+  color: var(--tt-text) !important;
+  background: #ffffff !important;
+}
+
+.tt-panel textarea,
+.tt-panel input {
+  border-color: var(--tt-border-strong) !important;
+}
+
+.tt-panel .secondary,
+.tt-panel button.secondary {
+  border: 1px solid var(--tt-border) !important;
+  background: var(--tt-surface-soft) !important;
+  color: var(--tt-text) !important;
+}
+
+.tt-primary button,
+.tt-panel button.primary,
+button.primary {
+  border: 0 !important;
+  background: var(--tt-red) !important;
+  color: #ffffff !important;
+  font-weight: 820 !important;
+}
+
+.tt-panel button.primary:hover,
+button.primary:hover {
+  background: var(--tt-red-dark) !important;
+}
+
+.tt-run-row {
+  gap: 10px !important;
+  align-items: stretch !important;
+  flex-wrap: nowrap !important;
+}
+
+.tt-run-row button,
+.tt-panel button {
+  min-height: 40px !important;
+  border-radius: 7px !important;
+  padding: 0 14px !important;
+  font-size: 13px !important;
+  font-weight: 820 !important;
+  line-height: 1.1 !important;
+  white-space: nowrap !important;
+}
+
+.tt-run-row button {
+  width: 100% !important;
+}
+
+.tt-run-row .form,
+.tt-run-row > div {
+  flex: 1 1 0 !important;
+  min-width: 0 !important;
+}
+
+.gradio-container button[role="tab"] {
+  min-height: 36px !important;
+  border: 1px solid var(--tt-border) !important;
+  border-radius: 7px !important;
+  background: rgba(255, 255, 255, 0.78) !important;
+  color: var(--tt-text) !important;
+  font-size: 13px !important;
+  font-weight: 820 !important;
+  box-shadow: none !important;
+}
+
+.gradio-container button[role="tab"][aria-selected="true"] {
+  border-color: transparent !important;
+  background: var(--tt-blue) !important;
+  color: #ffffff !important;
+}
+
+.tt-video-panel {
+  border: 1px solid var(--tt-border) !important;
+  border-radius: var(--tt-radius) !important;
+  background: var(--tt-surface) !important;
+  box-shadow: var(--tt-shadow) !important;
+  overflow: hidden !important;
+}
+
+.tt-video-panel .tabs,
+.tt-data-panel .tabs,
+.tt-automation-panel .tabs {
+  border: 0 !important;
+}
+
+.tt-video-panel .tab-nav,
+.tt-data-panel .tab-nav,
+.tt-automation-panel .tab-nav {
+  gap: 7px !important;
+  padding: 0 !important;
+  border: 0 !important;
+}
+
+.tt-video-panel button[role="tab"],
+.tt-data-panel button[role="tab"],
+.tt-automation-panel button[role="tab"] {
+  min-height: 34px !important;
+  border: 1px solid var(--tt-border) !important;
+  border-radius: 7px !important;
+  background: var(--tt-surface-soft) !important;
+  color: var(--tt-text) !important;
+  font-size: 12px !important;
+  font-weight: 820 !important;
+}
+
+.tt-video-panel button[role="tab"][aria-selected="true"],
+.tt-data-panel button[role="tab"][aria-selected="true"],
+.tt-automation-panel button[role="tab"][aria-selected="true"] {
+  background: var(--tt-blue) !important;
+  color: #ffffff !important;
+}
+
+.tt-result-video {
+  min-height: 430px !important;
+}
+
+.tt-result-video video {
+  border-radius: 8px !important;
+  background:
+    linear-gradient(90deg, rgba(23, 32, 42, 0.07) 1px, transparent 1px),
+    linear-gradient(0deg, rgba(23, 32, 42, 0.07) 1px, transparent 1px),
+    #edf1f5 !important;
+  background-size: 48px 48px, 48px 48px, 100% 100% !important;
+}
+
+.tt-status-grid {
+  gap: 10px !important;
+}
+
+.tt-status-card {
+  min-height: 82px;
+  padding: 13px 14px;
+  border: 1px solid var(--tt-border);
+  border-radius: var(--tt-radius);
+  background: #ffffff;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
+}
+
+.tt-status-card strong {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--tt-text);
+  font-size: 14px;
+  line-height: 1.2;
+}
+
+.tt-status-card span {
+  display: block;
+  color: var(--tt-muted);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.tt-status-card.success {
+  border-color: rgba(16, 159, 143, 0.35);
+  background: rgba(16, 159, 143, 0.08);
+}
+
+.tt-status-card.action {
+  border-color: rgba(217, 58, 47, 0.32);
+  background: rgba(217, 58, 47, 0.09);
+}
+
+.tt-status-card.warning {
+  border-color: rgba(213, 160, 20, 0.38);
+  background: rgba(213, 160, 20, 0.11);
+}
+
+.tt-status-card.idle {
+  background: #f8fafc;
+}
+
+.tt-label-audit {
+  display: grid;
+  gap: 10px;
+  padding: 13px 14px;
+  border: 1px solid rgba(16, 159, 143, 0.28);
+  border-radius: var(--tt-radius);
+  background: rgba(16, 159, 143, 0.07);
+}
+
+.tt-label-audit strong {
+  display: block;
+  color: var(--tt-text);
+  font-size: 14px;
+  line-height: 1.2;
+}
+
+.tt-label-audit span {
+  color: var(--tt-muted);
+  font-size: 12px;
+}
+
+.tt-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.tt-flow-copy {
+  margin: 0 0 12px;
+  color: var(--tt-muted);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.tt-code textarea,
+.tt-code code,
+.tt-code pre {
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
+  font-size: 12px !important;
+  line-height: 1.45 !important;
+}
+
+.tt-data-panel {
+  border: 1px solid var(--tt-border) !important;
+  border-radius: var(--tt-radius) !important;
+  background: var(--tt-surface) !important;
+  box-shadow: var(--tt-shadow) !important;
+  overflow: hidden !important;
+}
+
+.tt-data-panel table {
+  font-size: 13px !important;
+}
+
+.tt-data-panel th {
+  color: var(--tt-muted) !important;
+  font-size: 11px !important;
+  font-weight: 820 !important;
+  text-transform: uppercase !important;
+}
+
+.tt-compact textarea {
+  min-height: 84px !important;
+}
+
+.tt-demo-state {
+  margin-top: 10px;
+}
+
+@media (max-width: 980px) {
+  .gradio-container {
+    padding: 16px !important;
+  }
+
+  .tt-hero {
+    flex-direction: column;
+  }
+
+  .tt-chips {
+    justify-content: flex-start;
+  }
+
+  .tt-result-video {
+    min-height: 300px !important;
+  }
+}
+"""
+
+FALLBACK_RULES = """rules:
+  - name: person-near-steering-wheel
+    when:
+      all:
+        - present: {label: person, min_count: 1}
+        - near: {a: person, b: steering wheel, max_distance: 0.45}
+    gate:
+      enabled: true
+      cooldown: {key: turn-on-pc, minutes: 5}
+    then:
+      - type: webhook
+        name: turn on pc
+"""
+SAVED_AUTOMATIONS = load_saved_automations()
+DEFAULT_RULES = (
+    SAVED_AUTOMATIONS.model_dump_json(by_alias=True, indent=2)
+    if SAVED_AUTOMATIONS
+    else FALLBACK_RULES
+)
+
+
+def _detection_rows(detections: list[Any]) -> list[list[Any]]:
+    return [
+        [
+            det.frame_index,
+            round(det.timestamp_sec, 2),
+            det.label,
+            round(det.confidence, 3),
+            [round(value, 1) for value in det.bbox_xyxy],
+            [round(value, 3) for value in det.bbox_xyxy_norm],
+        ]
+        for det in detections
+    ]
+
+
+def _event_rows(events: list[Any]) -> list[list[Any]]:
+    return [
+        [
+            event.rule,
+            event.action,
+            event.type,
+            event.status,
+            event.frame_index,
+            round(event.timestamp_sec, 2),
+            event.response_status or "",
+            event.error or "",
+        ]
+        for event in events
+    ]
+
+
+def _result_json(result: Any) -> dict[str, Any]:
+    return json.loads(result.model_dump_json())
+
+
+def _status_card(tone: str, title: str, body: str) -> str:
+    return f"""
+<div class="tt-status-card {tone}">
+  <strong>{title}</strong>
+  <span>{body}</span>
+</div>
+"""
+
+
+def _rules_json(document: Any) -> dict[str, Any]:
+    return json.loads(document.model_dump_json(by_alias=True))
+
+
+def _automation_labels_from_document(document: Any) -> list[str]:
+    labels: list[str] = []
+    for rule in document.rules:
+        for condition in [*rule.when.all_conditions, *rule.when.any_conditions]:
+            if condition.present:
+                labels.append(condition.present.label)
+            if condition.count:
+                labels.append(condition.count.label)
+            if condition.near:
+                labels.extend([condition.near.a, condition.near.b])
+    return parse_class_prompt(labels)
+
+
+def _automation_labels_from_text(rules_text: str) -> list[str]:
+    return _automation_labels_from_document(load_automation_text(rules_text))
+
+
+def _automation_labels_from_rule(rule: Any) -> list[str]:
+    labels: list[str] = []
+    for condition in [*rule.when.all_conditions, *rule.when.any_conditions]:
+        if condition.present:
+            labels.append(condition.present.label)
+        if condition.count:
+            labels.append(condition.count.label)
+        if condition.near:
+            labels.extend([condition.near.a, condition.near.b])
+    return parse_class_prompt(labels)
+
+
+def _labels_summary(labels: list[str]) -> str:
+    if not labels:
+        return "No detector labels found in the active automations."
+    return ", ".join(labels)
+
+
+def _labels_card(labels: list[str]) -> str:
+    chips = "".join(f"<span class=\"tt-chip\">{html.escape(label)}</span>" for label in labels)
+    chips = chips or "<span class=\"tt-chip\">No labels</span>"
+    return f"""
+<div class="tt-label-audit">
+  <div>
+    <strong>Detector audit</strong>
+    <span>{len(labels)} label{'s' if len(labels) != 1 else ''} derived from active automations</span>
+  </div>
+  <div class="tt-chip-row">{chips}</div>
+</div>
+"""
+
+
+def _condition_summary(rule: Any) -> str:
+    parts: list[str] = []
+    for condition in [*rule.when.all_conditions, *rule.when.any_conditions]:
+        if condition.present:
+            parts.append(f"present {condition.present.label}")
+        if condition.count:
+            parts.append(f"{condition.count.label} >= {condition.count.minimum}")
+        if condition.near:
+            parts.append(f"{condition.near.a} near {condition.near.b}")
+        if condition.cooldown:
+            duration = condition.cooldown.minutes or condition.cooldown.seconds or 0
+            unit = "min" if condition.cooldown.minutes is not None else "sec"
+            parts.append(f"cooldown {duration:g}{unit}")
+    return " + ".join(parts)
+
+
+def _action_summary(rule: Any) -> str:
+    return ", ".join(f"{action.type}: {action.name}" for action in rule.then)
+
+
+def _rule_rows(document: Any) -> list[list[Any]]:
+    rows: list[list[Any]] = []
+    for rule in document.rules:
+        rows.append(
+            [
+                "on" if rule.gate.enabled else "off",
+                rule.name,
+                _labels_summary(_automation_labels_from_rule(rule)),
+                _condition_summary(rule),
+                _action_summary(rule),
+            ]
+        )
+    return rows
+
+
+def _rule_names(document: Any) -> list[str]:
+    return [rule.name for rule in document.rules]
+
+
+def _rule_enabled(document: Any, rule_name: str | None) -> bool:
+    for rule in document.rules:
+        if rule.name == rule_name:
+            return rule.gate.enabled
+    return False
+
+
+def _rules_text_from_data(data: dict[str, Any]) -> str:
+    document = load_automation_text(json.dumps(data))
+    return document.model_dump_json(by_alias=True, indent=2)
+
+
+def _merge_generated_rules(existing_rules_text: str, generated_document: Any) -> Any:
+    try:
+        existing_data = _rules_json(load_automation_text(existing_rules_text))
+        existing_rules = existing_data["rules"]
+    except Exception:
+        existing_rules = []
+
+    generated_rules = _rules_json(generated_document)["rules"]
+    merged_by_name: dict[str, dict[str, Any]] = {rule["name"]: rule for rule in existing_rules}
+    ordered_names = [rule["name"] for rule in existing_rules]
+    for rule in generated_rules:
+        if rule["name"] not in merged_by_name:
+            ordered_names.append(rule["name"])
+        merged_by_name[rule["name"]] = rule
+
+    merged_rules = [merged_by_name[name] for name in ordered_names]
+    return load_automation_text(json.dumps({"rules": merged_rules}))
+
+
+def refresh_automation_manager(rules_text: str) -> tuple[list[list[Any]], Any, bool, dict[str, Any], str, str, str]:
+    try:
+        document = load_automation_text(rules_text)
+    except Exception as exc:
+        raise gr.Error(f"Rules did not validate: {exc}") from exc
+    names = _rule_names(document)
+    selected = names[0] if names else None
+    labels = _automation_labels_from_document(document)
+    return (
+        _rule_rows(document),
+        gr.update(choices=names, value=selected),
+        _rule_enabled(document, selected),
+        {"status": "valid", "rules": _rules_json(document)["rules"], "labels": labels},
+        _status_card("success", "Manager refreshed", f"{len(names)} automation(s) loaded."),
+        _labels_card(labels),
+        _labels_card(labels),
+    )
+
+
+def select_managed_rule(rules_text: str, rule_name: str | None) -> tuple[bool, str]:
+    document = load_automation_text(rules_text)
+    return (
+        _rule_enabled(document, rule_name),
+        _status_card("idle", "Automation selected", rule_name or "No automation selected."),
+    )
+
+
+def set_rule_enabled(rules_text: str, rule_name: str | None, enabled: bool) -> tuple[
+    str,
+    list[list[Any]],
+    Any,
+    bool,
+    dict[str, Any],
+    str,
+    str,
+    str,
+]:
+    if not rule_name:
+        raise gr.Error("Choose an automation first.")
+
+    document = load_automation_text(rules_text)
+    data = _rules_json(document)
+    changed = False
+    for rule in data["rules"]:
+        if rule["name"] == rule_name:
+            rule.setdefault("gate", {})
+            rule["gate"]["enabled"] = enabled
+            changed = True
+            break
+    if not changed:
+        raise gr.Error(f"Automation not found: {rule_name}")
+
+    updated_text = _rules_text_from_data(data)
+    updated_document = load_automation_text(updated_text)
+    labels = _automation_labels_from_document(updated_document)
+    names = _rule_names(updated_document)
+    return (
+        updated_text,
+        _rule_rows(updated_document),
+        gr.update(choices=names, value=rule_name),
+        enabled,
+        {"status": "updated", "rules": _rules_json(updated_document)["rules"], "labels": labels},
+        _status_card("success", "Automation updated", f"{rule_name} is {'on' if enabled else 'off'}."),
+        _labels_card(labels),
+        _labels_card(labels),
+    )
+
+
+def _video_file_path(value: Any) -> str | None:
+    if value is None:
+        return None
+    if isinstance(value, str):
+        return value
+    if isinstance(value, Path):
+        return str(value)
+    if isinstance(value, dict):
+        return value.get("path") or value.get("name")
+    path = getattr(value, "path", None) or getattr(value, "name", None)
+    return str(path) if path else None
+
+
+def reset_demo_state() -> tuple[str, dict[str, Any]]:
+    save_runtime_state(RuntimeState())
+    if EVENTS_PATH.exists():
+        EVENTS_PATH.unlink()
+    return (
+        _status_card("success", "Demo state reset", "Cooldown memory and action history are clear."),
+        {"status": "reset", "last_fired": {}, "events": "cleared"},
+    )
+
+
+def run_detector(
+    video_path: str | None,
+    class_prompt: str,
+    confidence: float,
+    frame_stride: int,
+    max_frames: int,
+    model_name: str,
+    image_size: int,
+    device: str,
+    max_detections: int,
+) -> tuple[str | None, list[list[Any]], dict[str, Any], str]:
+    if not video_path:
+        raise gr.Error("Upload a video first.")
+    if not parse_class_prompt(class_prompt):
+        raise gr.Error("Enter at least one class prompt.")
+
+    result = process_video(
+        video_path=video_path,
+        class_prompt=class_prompt,
+        confidence=confidence,
+        frame_stride=frame_stride,
+        max_frames=max_frames,
+        model_name=model_name or DEFAULT_MODEL,
+        image_size=image_size,
+        device=None if device == "auto" else device,
+        max_detections=max_detections,
+    )
+    return (
+        result.output_video_path,
+        _detection_rows(result.detections),
+        _result_json(result),
+        _status_card(
+            "success",
+            f"{len(result.detections)} detections",
+            f"Processed {result.processed_frames} frames at {result.output_fps:.1f} FPS output.",
+        ),
+    )
+
+
+def compile_rules(
+    instruction: str,
+    current_rules_text: str,
+    label_hints: str,
+    base_url: str,
+    model: str,
+) -> tuple[str, dict[str, Any], str, str, list[list[Any]], Any, bool, str]:
+    if not instruction.strip():
+        raise gr.Error("Describe the automation first.")
+
+    try:
+        compiled = compile_automation_with_llamacpp(
+            instruction=instruction,
+            class_names=parse_class_prompt(label_hints),
+            base_url=base_url or DEFAULT_LLAMACPP_BASE_URL,
+            model=model or DEFAULT_LLAMACPP_MODEL,
+        )
+    except Exception as exc:
+        raise gr.Error(f"Could not compile automation: {exc}") from exc
+    merged_document = _merge_generated_rules(current_rules_text, compiled.document)
+    rules_json = merged_document.model_dump_json(by_alias=True, indent=2)
+    labels = _automation_labels_from_document(merged_document)
+    names = _rule_names(merged_document)
+    generated_names = _rule_names(compiled.document)
+    selected = generated_names[0] if generated_names else (names[0] if names else None)
+    labels_card = _labels_card(labels)
+    return (
+        rules_json,
+        {
+            "raw_text": compiled.raw_text,
+            "generated": _rules_json(compiled.document)["rules"],
+            "active_rules": json.loads(rules_json)["rules"],
+            "labels": labels,
+        },
+        _status_card(
+            "success",
+            "Generated and added",
+            f"{len(compiled.document.rules)} new rule(s). {len(merged_document.rules)} active automation(s).",
+        ),
+        labels_card,
+        _rule_rows(merged_document),
+        gr.update(choices=names, value=selected),
+        _rule_enabled(merged_document, selected),
+        labels_card,
+    )
+
+
+def validate_rules(rules_text: str) -> tuple[dict[str, Any], str, str, list[list[Any]], Any, bool, str]:
+    try:
+        document = load_automation_text(rules_text)
+    except Exception as exc:
+        raise gr.Error(f"Rules did not validate: {exc}") from exc
+    labels = _automation_labels_from_document(document)
+    names = _rule_names(document)
+    selected = names[0] if names else None
+    labels_card = _labels_card(labels)
+    return (
+        {"status": "valid", "rules": _rules_json(document)["rules"], "labels": labels},
+        _status_card("success", "Validation passed", f"{len(document.rules)} rule(s) checked."),
+        labels_card,
+        _rule_rows(document),
+        gr.update(choices=names, value=selected),
+        _rule_enabled(document, selected),
+        labels_card,
+    )
+
+
+def save_rules(rules_text: str) -> tuple[str, dict[str, Any], str, str, list[list[Any]], Any, bool, str]:
+    document = load_automation_text(rules_text)
+    save_automations(document)
+    rules_json = document.model_dump_json(by_alias=True, indent=2)
+    labels = _automation_labels_from_document(document)
+    names = _rule_names(document)
+    selected = names[0] if names else None
+    labels_card = _labels_card(labels)
+    return (
+        rules_json,
+        {"status": "saved", "rules": json.loads(rules_json), "labels": labels},
+        _status_card(
+            "success",
+            "Saved locally",
+            f"{len(document.rules)} rule(s) stored. Monitor will watch: {_labels_summary(labels)}.",
+        ),
+        labels_card,
+        _rule_rows(document),
+        gr.update(choices=names, value=selected),
+        _rule_enabled(document, selected),
+        labels_card,
+    )
+
+
+def run_monitor_clip(
+    clip_file: Any,
+    rules_text: str,
+    confidence: float,
+    frame_stride: int,
+    max_frames: int,
+    model_name: str,
+    image_size: int,
+    device: str,
+    max_detections: int,
+    enable_webhooks: bool,
+    webhook_url: str,
+) -> tuple[str | None, list[list[Any]], list[list[Any]], dict[str, Any], str, str]:
+    video_path = _video_file_path(clip_file)
+    if not video_path:
+        raise gr.Error("Upload a clip first.")
+
+    rules = load_automation_text(rules_text)
+    labels = _automation_labels_from_document(rules)
+    if not labels:
+        raise gr.Error("The active automations do not mention any detector labels.")
+
+    state = load_runtime_state()
+    result = process_video(
+        video_path=video_path,
+        class_prompt=labels,
+        confidence=confidence,
+        frame_stride=frame_stride,
+        max_frames=max_frames,
+        model_name=model_name or DEFAULT_MODEL,
+        image_size=image_size,
+        device=None if device == "auto" else device,
+        max_detections=max_detections,
+    )
+    events, last_fired = evaluate_video_detections(rules.rules, result.detections, last_fired=state.last_fired)
+    dispatched = dispatch_events(events, enable_webhooks=enable_webhooks, webhook_url=webhook_url or None)
+    state.last_fired = last_fired
+    save_runtime_state(state)
+    append_events(dispatched)
+    automation_video_path = render_automation_video(
+        source_video_path=video_path,
+        detections=result.detections,
+        events=dispatched,
+        frame_stride=frame_stride,
+        max_frames=max_frames,
+    )
+
+    action_count = len(dispatched)
+    status_tone = "action" if action_count else "warning"
+    status_title = f"{action_count} event{'s' if action_count != 1 else ''}"
+    status_body = (
+        "Replay rendered with fired automation overlays."
+        if action_count
+        else f"No automations fired. Watched: {_labels_summary(labels)}."
+    )
+    return (
+        automation_video_path,
+        _event_rows(dispatched),
+        _detection_rows(result.detections),
+        {
+            "watched_labels": labels,
+            "video": _result_json(result),
+            "actions": [event.model_dump(mode="json") for event in dispatched],
+        },
+        _status_card(status_tone, status_title, status_body),
+        _labels_card(labels),
+    )
+
+
+def run_detector_and_automations(
+    video_path: str | None,
+    class_prompt: str,
+    confidence: float,
+    frame_stride: int,
+    max_frames: int,
+    model_name: str,
+    image_size: int,
+    device: str,
+    max_detections: int,
+    rules_text: str,
+    enable_webhooks: bool,
+    webhook_url: str,
+) -> tuple[str | None, list[list[Any]], list[list[Any]], dict[str, Any], str]:
+    if not video_path:
+        raise gr.Error("Upload a video first.")
+
+    rules = load_automation_text(rules_text)
+    state = load_runtime_state()
+    result = process_video(
+        video_path=video_path,
+        class_prompt=class_prompt,
+        confidence=confidence,
+        frame_stride=frame_stride,
+        max_frames=max_frames,
+        model_name=model_name or DEFAULT_MODEL,
+        image_size=image_size,
+        device=None if device == "auto" else device,
+        max_detections=max_detections,
+    )
+    events, last_fired = evaluate_video_detections(rules.rules, result.detections, last_fired=state.last_fired)
+    dispatched = dispatch_events(events, enable_webhooks=enable_webhooks, webhook_url=webhook_url or None)
+    state.last_fired = last_fired
+    save_runtime_state(state)
+    append_events(dispatched)
+    automation_video_path = render_automation_video(
+        source_video_path=video_path,
+        detections=result.detections,
+        events=dispatched,
+        frame_stride=frame_stride,
+        max_frames=max_frames,
+    )
+    action_count = len(dispatched)
+    status_tone = "action" if action_count else "warning"
+    status_title = f"{action_count} action{'s' if action_count != 1 else ''} fired"
+    status_body = (
+        "Automation replay rendered with fired-action overlay."
+        if action_count
+        else "Rules validated, but no frame matched the automation."
+    )
+    return (
+        automation_video_path,
+        _detection_rows(result.detections),
+        _event_rows(dispatched),
+        {
+            "video": _result_json(result),
+            "actions": [event.model_dump(mode="json") for event in dispatched],
+        },
+        _status_card(status_tone, status_title, status_body),
+    )
+
+
+try:
+    INITIAL_RULE_DOCUMENT = load_automation_text(DEFAULT_RULES)
+    INITIAL_RULE_LABELS = _automation_labels_from_document(INITIAL_RULE_DOCUMENT)
+    INITIAL_RULE_ROWS = _rule_rows(INITIAL_RULE_DOCUMENT)
+    INITIAL_RULE_NAMES = _rule_names(INITIAL_RULE_DOCUMENT)
+    INITIAL_SELECTED_RULE = INITIAL_RULE_NAMES[0] if INITIAL_RULE_NAMES else None
+    INITIAL_SELECTED_ENABLED = _rule_enabled(INITIAL_RULE_DOCUMENT, INITIAL_SELECTED_RULE)
+except Exception:
+    INITIAL_RULE_DOCUMENT = None
+    INITIAL_RULE_LABELS = []
+    INITIAL_RULE_ROWS = []
+    INITIAL_RULE_NAMES = []
+    INITIAL_SELECTED_RULE = None
+    INITIAL_SELECTED_ENABLED = False
+
+
+with gr.Blocks(title="Tiny Trigger") as demo:
+    gr.HTML(
+        """
+<header class="tt-hero">
+  <div>
+    <p class="tt-kicker">Hackathon MVP</p>
+    <h1 class="tt-title">Tiny Trigger</h1>
+    <p class="tt-subtitle">Video events from validated automations</p>
+  </div>
+  <div class="tt-chips">
+    <span class="tt-chip live">Validated rules</span>
+    <span class="tt-chip">Open vocabulary</span>
+    <span class="tt-chip">Camera-ready skeleton</span>
+  </div>
+</header>
+"""
+    )
+
+    with gr.Tabs():
+        with gr.Tab("Monitor"):
+            with gr.Row(elem_classes=["tt-grid"]):
+                with gr.Column(scale=4, min_width=320):
+                    with gr.Group(elem_classes=["tt-panel"]):
+                        gr.Markdown("### Clip Intake", elem_classes=["tt-panel-title"])
+                        gr.Markdown(
+                            "Upload a short clip. Tiny Trigger scans for the labels required by the active automations and renders the event replay.",
+                            elem_classes=["tt-flow-copy"],
+                        )
+                        monitor_clip_input = gr.File(
+                            label="Video clip",
+                            file_types=[".mp4", ".mov", ".m4v", ".webm"],
+                            type="filepath",
+                        )
+                        monitor_run_button = gr.Button("Run clip", variant="primary")
+                    with gr.Group(elem_classes=["tt-panel"]):
+                        gr.Markdown("### Active Watch", elem_classes=["tt-panel-title"])
+                        monitor_labels_output = gr.HTML(_labels_card(INITIAL_RULE_LABELS))
+                        monitor_status = gr.HTML(
+                            _status_card("idle", "Waiting for clip", "Upload a clip to run the active automations.")
+                        )
+
+                with gr.Column(scale=7, min_width=520):
+                    with gr.Group(elem_classes=["tt-video-panel"]):
+                        gr.Markdown("### Event Replay", elem_classes=["tt-panel-title"])
+                        automation_video = gr.Video(
+                            label="Automation replay",
+                            format="mp4",
+                            autoplay=True,
+                            elem_classes=["tt-result-video"],
+                        )
+                    with gr.Group(elem_classes=["tt-data-panel"]):
+                        gr.Markdown("### Events", elem_classes=["tt-panel-title"])
+                        actions_table = gr.Dataframe(
+                            headers=["rule", "action", "type", "status", "frame", "time", "response", "error"],
+                            datatype=["str", "str", "str", "str", "number", "number", "str", "str"],
+                            label="Action timeline",
+                        )
+                        with gr.Accordion("Run details", open=False):
+                            automation_detections = gr.Dataframe(
+                                headers=["frame", "time", "label", "confidence", "bbox", "bbox_norm"],
+                                datatype=["number", "number", "str", "number", "str", "str"],
+                                label="Detections",
+                            )
+                            automation_json = gr.JSON(label="Run JSON")
+
+        with gr.Tab("Automations"):
+            with gr.Row(elem_classes=["tt-grid"]):
+                with gr.Column(scale=4, min_width=340):
+                    with gr.Group(elem_classes=["tt-panel", "tt-automation-panel"]):
+                        gr.Markdown("### Generate Automation", elem_classes=["tt-panel-title"])
+                        instruction = gr.Textbox(
+                            label="Intent",
+                            value="If person near steering wheel then you have to turn on pc.",
+                            lines=5,
+                            elem_classes=["tt-compact"],
+                        )
+                        label_hints = gr.Textbox(
+                            label="Label hints for the generator",
+                            value=DEFAULT_CLASSES,
+                            lines=3,
+                            elem_classes=["tt-compact"],
+                        )
+                        with gr.Accordion("Compiler endpoint", open=False):
+                            llama_base_url = gr.Textbox(label="llama.cpp base URL", value=DEFAULT_LLAMACPP_BASE_URL)
+                            llama_model = gr.Textbox(label="llama.cpp model", value=DEFAULT_LLAMACPP_MODEL)
+                        with gr.Row(elem_classes=["tt-run-row"]):
+                            compile_button = gr.Button("Generate", variant="primary")
+                            validate_rules_button = gr.Button("Test", variant="secondary")
+                            save_rules_button = gr.Button("Save", variant="secondary")
+
+                    with gr.Group(elem_classes=["tt-panel"]):
+                        gr.Markdown("### Manage Automations", elem_classes=["tt-panel-title"])
+                        automation_table = gr.Dataframe(
+                            headers=["state", "automation", "labels", "when", "then"],
+                            datatype=["str", "str", "str", "str", "str"],
+                            value=INITIAL_RULE_ROWS,
+                            interactive=False,
+                            label="Active automations",
+                        )
+                        managed_rule = gr.Dropdown(
+                            label="Automation",
+                            choices=INITIAL_RULE_NAMES,
+                            value=INITIAL_SELECTED_RULE,
+                        )
+                        managed_enabled = gr.Checkbox(label="Enabled", value=INITIAL_SELECTED_ENABLED)
+                        with gr.Row(elem_classes=["tt-run-row"]):
+                            apply_rule_button = gr.Button("Apply", variant="primary")
+                            refresh_manager_button = gr.Button("Refresh", variant="secondary")
+                            manager_save_button = gr.Button("Save all", variant="secondary")
+
+                    with gr.Group(elem_classes=["tt-panel"]):
+                        gr.Markdown("### Audit", elem_classes=["tt-panel-title"])
+                        rules_status = gr.HTML(
+                            _status_card("idle", "Rules loaded", "Generate or test rules before running a clip.")
+                        )
+                        rules_labels_output = gr.HTML(_labels_card(INITIAL_RULE_LABELS))
+
+                with gr.Column(scale=7, min_width=520):
+                    with gr.Group(elem_classes=["tt-panel"]):
+                        gr.Markdown("### Active Rules", elem_classes=["tt-panel-title"])
+                        rules_text = gr.Code(
+                            label="Rules JSON/YAML",
+                            language="yaml",
+                            value=DEFAULT_RULES,
+                            lines=22,
+                            elem_classes=["tt-code"],
+                        )
+                    with gr.Group(elem_classes=["tt-data-panel"]):
+                        gr.Markdown("### Compile Test", elem_classes=["tt-panel-title"])
+                        compiled_json = gr.JSON(label="Rule audit")
+
+        with gr.Tab("Settings"):
+            with gr.Row(elem_classes=["tt-grid"]):
+                with gr.Column(scale=4, min_width=320):
+                    with gr.Group(elem_classes=["tt-panel"]):
+                        gr.Markdown("### Detector", elem_classes=["tt-panel-title"])
+                        model_name = gr.Textbox(label="YOLOE model", value=DEFAULT_MODEL)
+                        device = gr.Dropdown(label="Device", choices=["auto", "mps", "cuda:0", "cpu"], value=DEFAULT_DEVICE)
+                        image_size = gr.Slider(label="Image size", minimum=320, maximum=1536, step=32, value=DEFAULT_IMAGE_SIZE)
+                        confidence = gr.Slider(label="Sensitivity", minimum=0.05, maximum=0.95, step=0.05, value=0.25)
+                        frame_stride = gr.Slider(label="Frame stride", minimum=1, maximum=30, step=1, value=5)
+                        max_frames = gr.Slider(label="Max processed frames", minimum=10, maximum=600, step=10, value=120)
+                        max_detections = gr.Slider(
+                            label="Max detections",
+                            minimum=1,
+                            maximum=300,
+                            step=1,
+                            value=DEFAULT_MAX_DETECTIONS,
+                        )
+                with gr.Column(scale=4, min_width=320):
+                    with gr.Group(elem_classes=["tt-panel"]):
+                        gr.Markdown("### Dispatch", elem_classes=["tt-panel-title"])
+                        enable_webhooks = gr.Checkbox(label="Enable webhook POSTs", value=False)
+                        webhook_url = gr.Textbox(label="Fallback webhook URL", value=DEFAULT_WEBHOOK_URL)
+                    with gr.Group(elem_classes=["tt-panel"]):
+                        gr.Markdown("### Demo State", elem_classes=["tt-panel-title"])
+                        demo_state_output = gr.HTML(
+                            _status_card("idle", "Ready for replay", "Cooldown memory is kept between automation runs."),
+                            elem_classes=["tt-demo-state"],
+                        )
+                        reset_state_button = gr.Button("Reset cooldowns and history", variant="secondary")
+                        demo_state_json = gr.JSON(label="State event", visible=False)
+                with gr.Column(scale=4, min_width=320):
+                    with gr.Group(elem_classes=["tt-panel"]):
+                        gr.Markdown("### IP Camera Skeleton", elem_classes=["tt-panel-title"])
+                        gr.Markdown(
+                            "The MVP runs uploaded clips. This section reserves the next product path: a persistent camera feed that runs the same active automations on a schedule.",
+                            elem_classes=["tt-flow-copy"],
+                        )
+                        camera_url = gr.Textbox(label="Camera / RTSP URL", value=LOCAL_CONFIG.camera_url or "")
+                        poll_interval = gr.Slider(label="Polling interval seconds", minimum=1, maximum=60, step=1, value=5)
+                        gr.HTML(_status_card("idle", "Not active in MVP", "Prepared for continuous monitoring after the hackathon demo."))
+
+    monitor_inputs = [
+        monitor_clip_input,
+        rules_text,
+        confidence,
+        frame_stride,
+        max_frames,
+        model_name,
+        image_size,
+        device,
+        max_detections,
+        enable_webhooks,
+        webhook_url,
+    ]
+    monitor_outputs = [
+        automation_video,
+        actions_table,
+        automation_detections,
+        automation_json,
+        monitor_status,
+        monitor_labels_output,
+    ]
+    generated_rule_outputs = [
+        rules_text,
+        compiled_json,
+        rules_status,
+        rules_labels_output,
+        automation_table,
+        managed_rule,
+        managed_enabled,
+        monitor_labels_output,
+    ]
+    tested_rule_outputs = [
+        compiled_json,
+        rules_status,
+        rules_labels_output,
+        automation_table,
+        managed_rule,
+        managed_enabled,
+        monitor_labels_output,
+    ]
+    manager_refresh_outputs = [
+        automation_table,
+        managed_rule,
+        managed_enabled,
+        compiled_json,
+        rules_status,
+        rules_labels_output,
+        monitor_labels_output,
+    ]
+    manager_apply_outputs = [
+        rules_text,
+        automation_table,
+        managed_rule,
+        managed_enabled,
+        compiled_json,
+        rules_status,
+        rules_labels_output,
+        monitor_labels_output,
+    ]
+    monitor_clip_input.change(run_monitor_clip, inputs=monitor_inputs, outputs=monitor_outputs)
+    monitor_run_button.click(run_monitor_clip, inputs=monitor_inputs, outputs=monitor_outputs)
+    compile_button.click(
+        compile_rules,
+        inputs=[instruction, rules_text, label_hints, llama_base_url, llama_model],
+        outputs=generated_rule_outputs,
+    )
+    validate_rules_button.click(
+        validate_rules,
+        inputs=[rules_text],
+        outputs=tested_rule_outputs,
+    )
+    save_rules_button.click(
+        save_rules,
+        inputs=[rules_text],
+        outputs=generated_rule_outputs,
+    )
+    manager_save_button.click(save_rules, inputs=[rules_text], outputs=generated_rule_outputs)
+    refresh_manager_button.click(refresh_automation_manager, inputs=[rules_text], outputs=manager_refresh_outputs)
+    managed_rule.change(select_managed_rule, inputs=[rules_text, managed_rule], outputs=[managed_enabled, rules_status])
+    apply_rule_button.click(
+        set_rule_enabled,
+        inputs=[rules_text, managed_rule, managed_enabled],
+        outputs=manager_apply_outputs,
+    )
+    reset_state_button.click(reset_demo_state, outputs=[demo_state_output, demo_state_json])
+
+
+if __name__ == "__main__":
+    demo.launch(ssr_mode=False, css=APP_CSS)

examples/feed-cat.yaml

@@ -0,0 +1,10 @@
+rules:
+  - name: feed-cat
+    when:
+      all:
+        - present: {label: cat, min_count: 1}
+        - near: {a: cat, b: feeder robot, max_distance: 0.35}
+        - cooldown: {key: feed-cat, minutes: 30}
+    then:
+      - type: webhook
+        name: feed cat

examples/turn-on-pc.yaml

@@ -0,0 +1,12 @@
+rules:
+  - name: person-near-steering-wheel
+    when:
+      all:
+        - present: {label: person, min_count: 1}
+        - near: {a: person, b: steering wheel, max_distance: 0.45}
+    gate:
+      enabled: true
+      cooldown: {key: turn-on-pc, minutes: 5}
+    then:
+      - type: webhook
+        name: turn on pc

frontend/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.vite

frontend/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tiny Trigger — Automation Console</title>
+    <meta name="color-scheme" content="dark" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://api.fontshare.com" crossorigin />
+    <link
+      href="https://api.fontshare.com/v2/css?f[]=clash-display@600,500,700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "tiny-trigger-ui",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc -b --noEmit"
+  },
+  "dependencies": {
+    "@gradio/client": "^1.14.0",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.475.0",
+    "motion": "^12.4.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sonner": "^2.0.0",
+    "tailwind-merge": "^3.0.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.6",
+    "@types/node": "^22.13.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.0.6",
+    "tw-animate-css": "^1.2.4",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0"
+  }
+}

frontend/pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+allowBuilds:
+  bufferutil: false
+  esbuild: true
+  msw: false

frontend/src/App.tsx

@@ -0,0 +1,43 @@
+import { DashboardProvider } from "@/lib/dashboard"
+import { Sidebar } from "@/components/layout/Sidebar"
+import { TopBar } from "@/components/layout/TopBar"
+import { Section } from "@/components/layout/Section"
+import { ModulePanel } from "@/components/layout/ModulePanel"
+import { Toaster } from "@/components/ui/sonner"
+import { SECTIONS, SPAN_CLASS, modulesForSection } from "@/modules/registry"
+
+export default function App() {
+  let delay = 0
+  const nextDelay = () => `${(delay++ * 60).toString()}ms`
+
+  return (
+    <DashboardProvider>
+      <div className="flex min-h-screen">
+        <Sidebar />
+        <div className="flex min-w-0 flex-1 flex-col">
+          <TopBar />
+          <main className="mx-auto w-full max-w-[1500px] flex-1 space-y-10 px-4 py-8 sm:px-6">
+            {SECTIONS.sort((a, b) => a.order - b.order).map((section) => (
+              <Section key={section.id} section={section}>
+                {modulesForSection(section.id).map((m) => (
+                  <ModulePanel
+                    key={m.id}
+                    module={m}
+                    className={SPAN_CLASS[m.span]}
+                    style={{ animationDelay: nextDelay() }}
+                  />
+                ))}
+              </Section>
+            ))}
+
+            <footer className="flex items-center justify-between border-t border-border/60 pt-4 font-mono text-[0.625rem] uppercase tracking-wider text-muted-foreground/50">
+              <span>tiny trigger · gradio.server backend</span>
+              <span>rules are data, never code</span>
+            </footer>
+          </main>
+        </div>
+      </div>
+      <Toaster />
+    </DashboardProvider>
+  )
+}

frontend/src/components/layout/ModulePanel.tsx

@@ -0,0 +1,40 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+import type { DashboardModule } from "@/modules/registry"
+
+export function ModulePanel({
+  module,
+  style,
+  className,
+}: {
+  module: DashboardModule
+  style?: React.CSSProperties
+  className?: string
+}) {
+  const { icon: Icon, Panel } = module
+  return (
+    <Card id={module.id} className={cn("reveal scroll-mt-24", className)} style={style}>
+      <CardHeader className="border-b border-border/60">
+        <div className="flex items-center gap-2.5">
+          <span className="flex size-7 items-center justify-center rounded-md border border-border bg-white/5 text-muted-foreground">
+            <Icon className="size-3.5" />
+          </span>
+          <div className="leading-tight">
+            <div className="font-mono text-[0.625rem] uppercase tracking-[0.18em] text-muted-foreground">
+              {module.eyebrow}
+            </div>
+            <h2 className="font-display text-sm font-semibold tracking-tight text-foreground">
+              {module.title}
+            </h2>
+          </div>
+        </div>
+        <span className="font-mono text-xs tabular-nums text-muted-foreground/50">
+          {module.index}
+        </span>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <Panel />
+      </CardContent>
+    </Card>
+  )
+}

frontend/src/components/layout/Section.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react"
+import type { DashboardSection } from "@/modules/registry"
+
+export function Section({
+  section,
+  children,
+}: {
+  section: DashboardSection
+  children: ReactNode
+}) {
+  return (
+    <section id={section.id} className="scroll-mt-20">
+      {/* labeled horizontal separator */}
+      <div className="mb-5 flex items-center gap-4">
+        <div className="flex items-baseline gap-2.5">
+          <span className="font-mono text-[0.625rem] tabular-nums text-primary/70">
+            {String(section.order).padStart(2, "0")}
+          </span>
+          <h2 className="font-display text-base font-semibold tracking-tight text-foreground">
+            {section.label}
+          </h2>
+          <span className="font-mono text-[0.625rem] uppercase tracking-[0.16em] text-muted-foreground">
+            {section.hint}
+          </span>
+        </div>
+        <div className="h-px flex-1 hairline" />
+      </div>
+
+      <div className="grid grid-cols-1 gap-5 lg:grid-cols-12">{children}</div>
+    </section>
+  )
+}

frontend/src/components/layout/Sidebar.tsx

@@ -0,0 +1,54 @@
+import { ListChecks, SlidersHorizontal, TestTube, Zap } from "lucide-react"
+import type { LucideIcon } from "lucide-react"
+import { SECTIONS, type SectionId } from "@/modules/registry"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SECTION_ICON: Record<SectionId, LucideIcon> = {
+  test: TestTube,
+  automation: ListChecks,
+  settings: SlidersHorizontal,
+}
+
+export function Sidebar() {
+  return (
+    <aside className="sticky top-0 hidden h-screen w-16 shrink-0 flex-col items-center border-r border-border/60 bg-card/40 py-4 backdrop-blur-sm md:flex">
+      <a
+        href="#top"
+        className="flex size-9 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-[0_8px_24px_-12px_oklch(0.885_0.19_122_/_0.8)]"
+        aria-label="Tiny Trigger"
+      >
+        <Zap className="size-5" />
+      </a>
+
+      <nav className="mt-6 flex flex-1 flex-col items-center gap-1.5">
+        <TooltipProvider delayDuration={200}>
+          {SECTIONS.map((s) => {
+            const Icon = SECTION_ICON[s.id]
+            return (
+              <Tooltip key={s.id}>
+                <TooltipTrigger asChild>
+                  <a
+                    href={`#${s.id}`}
+                    className="group flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-white/5 hover:text-foreground"
+                  >
+                    <Icon className="size-4" />
+                  </a>
+                </TooltipTrigger>
+                <TooltipContent side="right">{s.label}</TooltipContent>
+              </Tooltip>
+            )
+          })}
+        </TooltipProvider>
+      </nav>
+
+      <div className="font-mono text-[0.5rem] uppercase tracking-[0.2em] text-muted-foreground/50 [writing-mode:vertical-rl]">
+        local-first
+      </div>
+    </aside>
+  )
+}

frontend/src/components/layout/TopBar.tsx

@@ -0,0 +1,48 @@
+import { useDashboard } from "@/lib/dashboard"
+import { Badge } from "@/components/ui/badge"
+
+export function TopBar() {
+  const { params, result, running } = useDashboard()
+
+  return (
+    <header
+      id="top"
+      className="sticky top-0 z-30 border-b border-border/60 bg-background/70 backdrop-blur-xl"
+    >
+      <div className="flex flex-wrap items-center justify-between gap-3 px-6 py-4">
+        <div>
+          <div className="flex items-center gap-2.5">
+            <h1 className="font-display text-xl font-semibold tracking-tight">
+              Tiny&nbsp;Trigger
+            </h1>
+            <Badge variant={running ? "live" : "default"}>
+              {running ? (
+                <>
+                  <span className="size-1.5 rounded-full bg-primary signal-dot" />
+                  running
+                </>
+              ) : (
+                "idle"
+              )}
+            </Badge>
+          </div>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            Open-vocabulary video automations · detect → validate rules → dispatch
+          </p>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <Badge>{params.modelName}</Badge>
+          <Badge variant={params.enableWebhooks ? "info" : "default"}>
+            webhooks {params.enableWebhooks ? "live" : "off"}
+          </Badge>
+          {result && (
+            <Badge variant={result.status === "fired" ? "live" : "warning"}>
+              {result.status === "fired" ? `${result.stats.actions} fired` : "no match"}
+            </Badge>
+          )}
+        </div>
+      </div>
+    </header>
+  )
+}

frontend/src/components/ui/badge.tsx

@@ -0,0 +1,29 @@
+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 gap-1.5 rounded-full border px-2.5 py-0.5 text-[0.6875rem] font-medium font-mono uppercase tracking-wider transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-white/5 text-muted-foreground",
+        live: "border-primary/40 bg-primary/10 text-primary",
+        warning: "border-warning/40 bg-warning/10 text-warning",
+        info: "border-info/40 bg-info/10 text-info",
+        danger: "border-destructive/40 bg-destructive/10 text-destructive",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+)
+
+function Badge({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

frontend/src/components/ui/button.tsx

@@ -0,0 +1,46 @@
+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 rounded-md text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-4 [&_svg]:shrink-0 active:scale-[0.98] select-none",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground font-semibold shadow-[0_0_0_1px_oklch(0.885_0.19_122_/_0.4),0_8px_24px_-12px_oklch(0.885_0.19_122_/_0.6)] hover:brightness-110",
+        secondary:
+          "bg-secondary text-secondary-foreground border border-border hover:bg-accent hover:border-white/15",
+        ghost: "text-muted-foreground hover:text-foreground hover:bg-white/5",
+        outline:
+          "border border-border bg-transparent hover:bg-white/5 hover:text-foreground",
+        destructive:
+          "bg-destructive/15 text-destructive border border-destructive/40 hover:bg-destructive/25",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-11 rounded-lg px-6 text-[0.95rem]",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  },
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button"
+  return (
+    <Comp className={cn(buttonVariants({ variant, size, className }))} {...props} />
+  )
+}
+
+export { Button, buttonVariants }

frontend/src/components/ui/card.tsx

@@ -0,0 +1,45 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "relative rounded-xl border border-border bg-card/80 backdrop-blur-sm",
+        "shadow-[0_1px_0_0_oklch(1_0_0_/_0.04)_inset,0_24px_48px_-32px_oklch(0_0_0_/_0.8)]",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between gap-3 px-5 pt-4 pb-3",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardEyebrow({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "font-mono text-[0.6875rem] font-medium uppercase tracking-[0.18em] text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("px-5 pb-5", className)} {...props} />
+}
+
+export { Card, CardHeader, CardEyebrow, CardContent }

frontend/src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-black/20 px-3 py-1 text-sm",
+        "transition-colors placeholder:text-muted-foreground/60",
+        "focus-visible:outline-none focus-visible:border-primary/50 focus-visible:ring-2 focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

frontend/src/components/ui/label.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      className={cn(
+        "text-xs font-medium text-muted-foreground select-none",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

frontend/src/components/ui/separator.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

frontend/src/components/ui/slider.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  return (
+    <SliderPrimitive.Root
+      className={cn(
+        "relative flex w-full touch-none select-none items-center py-1.5",
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-white/10">
+        <SliderPrimitive.Range className="absolute h-full bg-primary" />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb
+        className={cn(
+          "block size-3.5 rounded-full border border-primary bg-background shadow-[0_0_0_3px_oklch(0.885_0.19_122_/_0.2)]",
+          "transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        )}
+      />
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

frontend/src/components/ui/sonner.tsx

@@ -0,0 +1,20 @@
+import { Toaster as Sonner } from "sonner"
+
+function Toaster() {
+  return (
+    <Sonner
+      theme="dark"
+      position="bottom-right"
+      toastOptions={{
+        classNames: {
+          toast:
+            "!bg-popover !border-border !text-foreground !rounded-lg !font-sans !shadow-2xl",
+          description: "!text-muted-foreground",
+          actionButton: "!bg-primary !text-primary-foreground",
+        },
+      }}
+    />
+  )
+}
+
+export { Toaster }

frontend/src/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+import { cn } from "@/lib/utils"
+
+export function Switch({
+  checked,
+  onCheckedChange,
+  id,
+}: {
+  checked: boolean
+  onCheckedChange: (v: boolean) => void
+  id?: string
+}) {
+  return (
+    <button
+      id={id}
+      role="switch"
+      aria-checked={checked}
+      onClick={() => onCheckedChange(!checked)}
+      className={cn(
+        "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        checked ? "border-primary/50 bg-primary/30" : "border-border bg-white/5",
+      )}
+    >
+      <span
+        className={cn(
+          "ml-0.5 size-3.5 rounded-full transition-transform",
+          checked ? "translate-x-4 bg-primary" : "translate-x-0 bg-muted-foreground",
+        )}
+      />
+    </button>
+  )
+}

frontend/src/components/ui/table.tsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div className="relative w-full overflow-x-auto">
+      <table className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return <thead className={cn("", className)} {...props} />
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return <tbody className={cn("", className)} {...props} />
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      className={cn(
+        "border-b border-border/60 transition-colors hover:bg-white/[0.025]",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      className={cn(
+        "h-9 px-3 text-left align-middle font-mono text-[0.6875rem] font-medium uppercase tracking-wider text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td className={cn("px-3 py-2.5 align-middle", className)} {...props} />
+  )
+}
+
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell }

frontend/src/components/ui/tabs.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      className={cn(
+        "inline-flex h-9 items-center gap-1 rounded-lg border border-border bg-black/20 p-1",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      className={cn(
+        "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1 text-xs font-medium transition-all",
+        "text-muted-foreground hover:text-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-[state=active]:bg-secondary data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      className={cn("mt-4 focus-visible:outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

frontend/src/components/ui/textarea.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-20 w-full rounded-md border border-input bg-black/20 px-3 py-2 text-sm",
+        "transition-colors placeholder:text-muted-foreground/60 resize-none",
+        "focus-visible:outline-none focus-visible:border-primary/50 focus-visible:ring-2 focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

frontend/src/components/ui/tooltip.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+const Tooltip = TooltipPrimitive.Root
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+function TooltipContent({
+  className,
+  sideOffset = 6,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 overflow-hidden rounded-md border border-border bg-popover px-2.5 py-1 text-xs text-popover-foreground shadow-xl",
+          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+          className,
+        )}
+        {...props}
+      />
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

frontend/src/lib/dashboard.tsx

@@ -0,0 +1,244 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import type { ReactNode } from "react"
+import { toast } from "sonner"
+import * as api from "./api"
+import type {
+  CompileResult,
+  DetectParams,
+  RunResult,
+  ValidationResult,
+} from "./types"
+
+const DEFAULT_CLASSES = "person, steering wheel, monitor, chair, bag, sticker"
+
+const DEFAULT_RULES = `rules:
+  - name: person-near-steering-wheel
+    when:
+      all:
+        - present: {label: person, min_count: 1}
+        - near: {a: person, b: steering wheel, max_distance: 0.45}
+    gate:
+      enabled: true
+      cooldown: {key: turn-on-pc, minutes: 5}
+    then:
+      - type: simulate
+        name: turn on pc
+`
+
+const DEFAULT_PARAMS: DetectParams = {
+  classes: DEFAULT_CLASSES,
+  confidence: 0.25,
+  frameStride: 5,
+  maxFrames: 120,
+  modelName: "yoloe-26s-seg.pt",
+  imageSize: 0,
+  device: "auto",
+  maxDetections: 0,
+  enableWebhooks: false,
+  webhookUrl: "",
+}
+
+interface DashboardState {
+  params: DetectParams
+  setParam: <K extends keyof DetectParams>(key: K, value: DetectParams[K]) => void
+  rulesText: string
+  setRulesText: (text: string) => void
+  videoFile: File | null
+  videoPreviewUrl: string | null
+  setVideo: (file: File | null) => void
+  result: RunResult | null
+  running: boolean
+  error: string | null
+  run: () => Promise<void>
+  validation: ValidationResult | null
+  validate: () => Promise<void>
+  save: () => Promise<void>
+  compile: (instruction: string) => Promise<CompileResult | null>
+  compiling: boolean
+}
+
+const Ctx = createContext<DashboardState | null>(null)
+
+export function DashboardProvider({ children }: { children: ReactNode }) {
+  const [params, setParams] = useState<DetectParams>(DEFAULT_PARAMS)
+  const [rulesText, setRulesText] = useState<string>(DEFAULT_RULES)
+  const [videoFile, setVideoFile] = useState<File | null>(null)
+  const [videoPreviewUrl, setVideoPreviewUrl] = useState<string | null>(null)
+  const [result, setResult] = useState<RunResult | null>(null)
+  const [running, setRunning] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [validation, setValidation] = useState<ValidationResult | null>(null)
+  const [compiling, setCompiling] = useState(false)
+  const previewRef = useRef<string | null>(null)
+
+  // Hydrate defaults from backend config + saved rules on mount.
+  useEffect(() => {
+    api
+      .getConfig()
+      .then((cfg) => {
+        setParams((p) => ({
+          ...p,
+          classes: cfg.default_classes ?? p.classes,
+          modelName: cfg.default_detector_model ?? p.modelName,
+          device: cfg.default_device ?? p.device,
+          imageSize: cfg.default_image_size ?? p.imageSize,
+          maxDetections: cfg.default_max_detections ?? p.maxDetections,
+          webhookUrl: cfg.webhook_url ?? p.webhookUrl,
+        }))
+      })
+      .catch(() => void 0)
+    api
+      .loadRules()
+      .then((r) => r.rules_text && setRulesText(r.rules_text))
+      .catch(() => void 0)
+  }, [])
+
+  const setParam = useCallback(
+    <K extends keyof DetectParams>(key: K, value: DetectParams[K]) => {
+      setParams((p) => ({ ...p, [key]: value }))
+    },
+    [],
+  )
+
+  const setVideo = useCallback((file: File | null) => {
+    if (previewRef.current) URL.revokeObjectURL(previewRef.current)
+    if (file) {
+      const url = URL.createObjectURL(file)
+      previewRef.current = url
+      setVideoPreviewUrl(url)
+    } else {
+      previewRef.current = null
+      setVideoPreviewUrl(null)
+    }
+    setVideoFile(file)
+  }, [])
+
+  const run = useCallback(async () => {
+    if (!videoFile) {
+      toast.error("Upload a video first")
+      return
+    }
+    setRunning(true)
+    setError(null)
+    try {
+      const res = await api.detectAndAutomate(videoFile, rulesText, params)
+      setResult(res)
+      if (res.status === "fired") {
+        toast.success(`${res.stats.actions} action${res.stats.actions === 1 ? "" : "s"} fired`)
+      } else {
+        toast.message("No frame matched the automation", {
+          description: `${res.stats.detections} detections across ${res.stats.processed_frames} frames`,
+        })
+      }
+    } catch (e) {
+      const message = e instanceof Error ? e.message : String(e)
+      setError(message)
+      toast.error("Run failed", { description: message })
+    } finally {
+      setRunning(false)
+    }
+  }, [videoFile, rulesText, params])
+
+  const validate = useCallback(async () => {
+    try {
+      const v = await api.validateRules(rulesText)
+      setValidation(v)
+      if (v.ok) toast.success(`Validated — ${v.rules.length} rule${v.rules.length === 1 ? "" : "s"}`)
+      else toast.error("Validation failed")
+    } catch (e) {
+      toast.error("Validation error", {
+        description: e instanceof Error ? e.message : String(e),
+      })
+    }
+  }, [rulesText])
+
+  const save = useCallback(async () => {
+    try {
+      const r = await api.saveRules(rulesText)
+      toast.success(`Saved ${r.rule_count} rule${r.rule_count === 1 ? "" : "s"}`)
+    } catch (e) {
+      toast.error("Save failed", {
+        description: e instanceof Error ? e.message : String(e),
+      })
+    }
+  }, [rulesText])
+
+  const compile = useCallback(
+    async (instruction: string): Promise<CompileResult | null> => {
+      setCompiling(true)
+      try {
+        const c = await api.compileRules(
+          instruction,
+          params.classes,
+          "http://127.0.0.1:8080/v1",
+          "ggml-org/Qwen3-1.7B-GGUF:Q4_K_M",
+        )
+        setRulesText(c.rules_text)
+        toast.success(`Compiled ${c.rule_count} rule${c.rule_count === 1 ? "" : "s"}`)
+        return c
+      } catch (e) {
+        toast.error("Compile failed", {
+          description: e instanceof Error ? e.message : String(e),
+        })
+        return null
+      } finally {
+        setCompiling(false)
+      }
+    },
+    [params.classes],
+  )
+
+  const value = useMemo<DashboardState>(
+    () => ({
+      params,
+      setParam,
+      rulesText,
+      setRulesText,
+      videoFile,
+      videoPreviewUrl,
+      setVideo,
+      result,
+      running,
+      error,
+      run,
+      validation,
+      validate,
+      save,
+      compile,
+      compiling,
+    }),
+    [
+      params,
+      setParam,
+      rulesText,
+      videoFile,
+      videoPreviewUrl,
+      setVideo,
+      result,
+      running,
+      error,
+      run,
+      validation,
+      validate,
+      save,
+      compile,
+      compiling,
+    ],
+  )
+
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>
+}
+
+export function useDashboard(): DashboardState {
+  const ctx = useContext(Ctx)
+  if (!ctx) throw new Error("useDashboard must be used within DashboardProvider")
+  return ctx
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import "@/styles/index.css"
+import App from "@/App"
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

frontend/src/modules/activity/ActivityPanel.tsx

@@ -0,0 +1,212 @@
+import { useMemo } from "react"
+import { Inbox } from "lucide-react"
+import { useDashboard } from "@/lib/dashboard"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+
+// deterministic label → hue (matches the spirit of the backend's md5 colouring)
+function hueFor(label: string): number {
+  let h = 0
+  for (let i = 0; i < label.length; i++) h = (h * 31 + label.charCodeAt(i)) % 360
+  return h
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const variant = status.includes("fail") || status.includes("missing")
+    ? "danger"
+    : status.includes("posted")
+      ? "info"
+      : status.includes("block")
+        ? "warning"
+        : "live"
+  return <Badge variant={variant}>{status}</Badge>
+}
+
+export function ActivityPanel() {
+  const { result } = useDashboard()
+  const detections = result?.detections ?? []
+  const events = result?.events ?? []
+
+  const maxT = useMemo(
+    () =>
+      Math.max(
+        0.001,
+        ...detections.map((d) => d.timestamp_sec),
+        ...events.map((e) => e.timestamp_sec),
+      ),
+    [detections, events],
+  )
+
+  const labels = useMemo(
+    () => Array.from(new Set(detections.map((d) => d.label))),
+    [detections],
+  )
+
+  if (!result) {
+    return (
+      <div className="flex flex-col items-center gap-2 py-10 text-center text-muted-foreground">
+        <Inbox className="size-7 opacity-40" />
+        <p className="text-sm">Run detection to populate the activity timeline.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-5">
+      {/* timeline track */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between font-mono text-[0.625rem] uppercase tracking-wider text-muted-foreground">
+          <span>0.0s</span>
+          <span>detection timeline</span>
+          <span>{maxT.toFixed(1)}s</span>
+        </div>
+        <div className="relative h-16 overflow-hidden rounded-lg border border-border bg-black/30">
+          {/* gridlines */}
+          {[0.25, 0.5, 0.75].map((f) => (
+            <div
+              key={f}
+              className="absolute inset-y-0 w-px bg-white/5"
+              style={{ left: `${f * 100}%` }}
+            />
+          ))}
+          {/* detection ticks */}
+          {detections.map((d, i) => (
+            <span
+              key={i}
+              className="absolute top-1/2 size-1.5 -translate-y-1/2 rounded-full"
+              style={{
+                left: `${(d.timestamp_sec / maxT) * 100}%`,
+                backgroundColor: `oklch(0.75 0.13 ${hueFor(d.label)})`,
+                opacity: 0.25 + d.confidence * 0.75,
+              }}
+            />
+          ))}
+          {/* event markers */}
+          {events.map((e, i) => (
+            <div
+              key={i}
+              className="absolute inset-y-0 w-0.5 bg-primary"
+              style={{ left: `${(e.timestamp_sec / maxT) * 100}%` }}
+            >
+              <span className="absolute -top-0 left-1/2 size-2 -translate-x-1/2 rounded-full bg-primary signal-dot" />
+            </div>
+          ))}
+        </div>
+        {/* legend */}
+        <div className="flex flex-wrap gap-x-4 gap-y-1">
+          {labels.map((l) => (
+            <div key={l} className="flex items-center gap-1.5 text-[0.6875rem] text-muted-foreground">
+              <span
+                className="size-2 rounded-full"
+                style={{ backgroundColor: `oklch(0.75 0.13 ${hueFor(l)})` }}
+              />
+              {l}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* tables */}
+      <Tabs defaultValue="actions">
+        <TabsList>
+          <TabsTrigger value="actions">
+            Actions
+            <span className="ml-1 font-mono text-[0.625rem] text-muted-foreground">
+              {events.length}
+            </span>
+          </TabsTrigger>
+          <TabsTrigger value="detections">
+            Detections
+            <span className="ml-1 font-mono text-[0.625rem] text-muted-foreground">
+              {detections.length}
+            </span>
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="actions">
+          {events.length ? (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Time</TableHead>
+                  <TableHead>Rule</TableHead>
+                  <TableHead>Action</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="text-right">Frame</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {events.map((e, i) => (
+                  <TableRow key={i}>
+                    <TableCell className="font-mono text-xs tabular-nums text-muted-foreground">
+                      {e.timestamp_sec.toFixed(1)}s
+                    </TableCell>
+                    <TableCell className="font-mono text-xs">{e.rule}</TableCell>
+                    <TableCell className="text-xs">{e.action}</TableCell>
+                    <TableCell>
+                      <StatusBadge status={e.status} />
+                    </TableCell>
+                    <TableCell className="text-right font-mono text-xs tabular-nums text-muted-foreground">
+                      {e.frame_index}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          ) : (
+            <p className="py-6 text-center text-sm text-muted-foreground">
+              No actions fired this run.
+            </p>
+          )}
+        </TabsContent>
+
+        <TabsContent value="detections">
+          <div className="max-h-72 overflow-y-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="text-right">Frame</TableHead>
+                  <TableHead>Label</TableHead>
+                  <TableHead className="text-right">Conf.</TableHead>
+                  <TableHead className="text-right">Time</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {detections.slice(0, 200).map((d, i) => (
+                  <TableRow key={i}>
+                    <TableCell className="text-right font-mono text-xs tabular-nums text-muted-foreground">
+                      {d.frame_index}
+                    </TableCell>
+                    <TableCell>
+                      <span className="flex items-center gap-1.5 text-xs">
+                        <span
+                          className="size-2 rounded-full"
+                          style={{ backgroundColor: `oklch(0.75 0.13 ${hueFor(d.label)})` }}
+                        />
+                        {d.label}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-right font-mono text-xs tabular-nums">
+                      {d.confidence.toFixed(2)}
+                    </TableCell>
+                    <TableCell className="text-right font-mono text-xs tabular-nums text-muted-foreground">
+                      {d.timestamp_sec.toFixed(1)}s
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

frontend/src/modules/detector/DetectorPanel.tsx

@@ -0,0 +1,221 @@
+import { useRef, useState } from "react"
+import { ChevronDown, Play, RotateCcw, Upload, Loader2 } from "lucide-react"
+import { useDashboard } from "@/lib/dashboard"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Slider } from "@/components/ui/slider"
+import { Separator } from "@/components/ui/separator"
+import { cn } from "@/lib/utils"
+
+function SliderRow({
+  label,
+  value,
+  display,
+  min,
+  max,
+  step,
+  onChange,
+}: {
+  label: string
+  value: number
+  display: string
+  min: number
+  max: number
+  step: number
+  onChange: (v: number) => void
+}) {
+  return (
+    <div className="space-y-2">
+      <div className="flex items-baseline justify-between">
+        <Label>{label}</Label>
+        <span className="font-mono text-xs text-foreground tabular-nums">{display}</span>
+      </div>
+      <Slider
+        value={[value]}
+        min={min}
+        max={max}
+        step={step}
+        onValueChange={([v]) => onChange(v)}
+      />
+    </div>
+  )
+}
+
+export function DetectorPanel() {
+  const { params, setParam, videoFile, setVideo, run, running } = useDashboard()
+  const fileRef = useRef<HTMLInputElement>(null)
+  const [dragging, setDragging] = useState(false)
+  const [advanced, setAdvanced] = useState(false)
+
+  return (
+    <div className="space-y-5">
+      {/* dropzone */}
+      <div
+        onClick={() => fileRef.current?.click()}
+        onDragOver={(e) => {
+          e.preventDefault()
+          setDragging(true)
+        }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={(e) => {
+          e.preventDefault()
+          setDragging(false)
+          const f = e.dataTransfer.files?.[0]
+          if (f) setVideo(f)
+        }}
+        className={cn(
+          "group relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed px-4 py-6 text-center transition-colors",
+          dragging
+            ? "border-primary/60 bg-primary/5"
+            : "border-border hover:border-white/20 hover:bg-white/[0.02]",
+        )}
+      >
+        <input
+          ref={fileRef}
+          type="file"
+          accept="video/*"
+          className="hidden"
+          onChange={(e) => e.target.files?.[0] && setVideo(e.target.files[0])}
+        />
+        <div className="flex size-9 items-center justify-center rounded-full border border-border bg-white/5 text-muted-foreground group-hover:text-foreground">
+          <Upload className="size-4" />
+        </div>
+        {videoFile ? (
+          <div className="min-w-0">
+            <p className="truncate font-mono text-xs text-foreground">{videoFile.name}</p>
+            <p className="text-[0.6875rem] text-muted-foreground">
+              {(videoFile.size / 1e6).toFixed(1)} MB · click to replace
+            </p>
+          </div>
+        ) : (
+          <div>
+            <p className="text-sm text-foreground">Drop a clip or click to upload</p>
+            <p className="text-[0.6875rem] text-muted-foreground">mp4 · webm · mov</p>
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="classes">Open-vocabulary classes</Label>
+        <Textarea
+          id="classes"
+          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…"
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="model">Detector model</Label>
+        <Input
+          id="model"
+          value={params.modelName}
+          onChange={(e) => setParam("modelName", e.target.value)}
+          className="font-mono text-xs"
+        />
+      </div>
+
+      <div className="space-y-4">
+        <SliderRow
+          label="Confidence"
+          value={params.confidence}
+          display={params.confidence.toFixed(2)}
+          min={0.05}
+          max={0.9}
+          step={0.05}
+          onChange={(v) => setParam("confidence", Number(v.toFixed(2)))}
+        />
+        <SliderRow
+          label="Frame stride"
+          value={params.frameStride}
+          display={`${params.frameStride}`}
+          min={1}
+          max={30}
+          step={1}
+          onChange={(v) => setParam("frameStride", v)}
+        />
+        <SliderRow
+          label="Max frames"
+          value={params.maxFrames}
+          display={`${params.maxFrames}`}
+          min={10}
+          max={300}
+          step={10}
+          onChange={(v) => setParam("maxFrames", v)}
+        />
+      </div>
+
+      <div>
+        <button
+          onClick={() => setAdvanced((v) => !v)}
+          className="flex w-full items-center justify-between text-xs font-medium text-muted-foreground hover:text-foreground"
+        >
+          Advanced
+          <ChevronDown className={cn("size-3.5 transition-transform", advanced && "rotate-180")} />
+        </button>
+        {advanced && (
+          <div className="mt-3 space-y-3 reveal">
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label htmlFor="device">Device</Label>
+                <Input
+                  id="device"
+                  value={params.device}
+                  onChange={(e) => setParam("device", e.target.value)}
+                  className="font-mono text-xs"
+                  placeholder="auto / cuda:0 / cpu"
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="imgsz">Image size</Label>
+                <Input
+                  id="imgsz"
+                  type="number"
+                  value={params.imageSize || ""}
+                  onChange={(e) => setParam("imageSize", Number(e.target.value) || 0)}
+                  className="font-mono text-xs"
+                  placeholder="auto"
+                />
+              </div>
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="maxdet">Max detections</Label>
+              <Input
+                id="maxdet"
+                type="number"
+                value={params.maxDetections || ""}
+                onChange={(e) => setParam("maxDetections", Number(e.target.value) || 0)}
+                className="font-mono text-xs"
+                placeholder="default"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      <Separator />
+
+      <div className="flex gap-2">
+        <Button
+          variant="secondary"
+          size="default"
+          className="flex-1"
+          onClick={() => {
+            setVideo(null)
+          }}
+          disabled={running}
+        >
+          <RotateCcw className="size-4" />
+          Reset
+        </Button>
+        <Button className="flex-[2]" onClick={run} disabled={running}>
+          {running ? <Loader2 className="size-4 animate-spin" /> : <Play className="size-4" />}
+          {running ? "Detecting…" : "Run detection"}
+        </Button>
+      </div>
+    </div>
+  )
+}

frontend/src/modules/preview/PreviewPanel.tsx

@@ -0,0 +1,135 @@
+import { Activity, Film, Loader2, Zap } from "lucide-react"
+import { useDashboard } from "@/lib/dashboard"
+import { mediaUrl } from "@/lib/api"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+function Stat({
+  label,
+  value,
+  accent,
+}: {
+  label: string
+  value: string
+  accent?: boolean
+}) {
+  return (
+    <div className="rounded-lg border border-border bg-black/20 px-4 py-3">
+      <div className="font-mono text-[0.625rem] uppercase tracking-[0.16em] text-muted-foreground">
+        {label}
+      </div>
+      <div
+        className={cn(
+          "mt-1 font-display text-2xl font-semibold tabular-nums",
+          accent ? "text-primary" : "text-foreground",
+        )}
+      >
+        {value}
+      </div>
+    </div>
+  )
+}
+
+export function PreviewPanel() {
+  const { result, running, videoPreviewUrl } = useDashboard()
+  const fired = result?.status === "fired"
+  const src = result ? mediaUrl(result.video_url) : videoPreviewUrl
+
+  return (
+    <div className="space-y-4">
+      <div className="group relative aspect-video overflow-hidden rounded-lg border border-border bg-black">
+        {/* scanline / grid atmosphere */}
+        <div
+          className="pointer-events-none absolute inset-0 opacity-[0.07]"
+          style={{
+            backgroundImage:
+              "linear-gradient(oklch(1 0 0 / 0.5) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / 0.5) 1px, transparent 1px)",
+            backgroundSize: "32px 32px",
+          }}
+        />
+
+        {src ? (
+          <video
+            key={src}
+            src={src}
+            controls
+            autoPlay
+            loop
+            muted
+            playsInline
+            className="absolute inset-0 size-full object-contain"
+          />
+        ) : (
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 text-muted-foreground">
+            <Film className="size-8 opacity-40" />
+            <p className="text-sm">Upload a clip and run detection to see the annotated replay</p>
+          </div>
+        )}
+
+        {/* top HUD */}
+        <div className="pointer-events-none absolute inset-x-0 top-0 flex items-start justify-between p-3">
+          <div className="flex gap-2">
+            {result?.classes?.slice(0, 4).map((c) => (
+              <span
+                key={c}
+                className="rounded-md border border-white/10 bg-black/50 px-2 py-1 font-mono text-[0.625rem] uppercase tracking-wider text-white/70 backdrop-blur-sm"
+              >
+                {c}
+              </span>
+            ))}
+          </div>
+          {result &&
+            (fired ? (
+              <Badge variant="live">
+                <span className="size-1.5 rounded-full bg-primary signal-dot" />
+                automation fired
+              </Badge>
+            ) : (
+              <Badge variant="warning">no match</Badge>
+            ))}
+        </div>
+
+        {/* running overlay */}
+        {running && (
+          <div className="absolute inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+            <div className="flex flex-col items-center gap-3 text-primary">
+              <Loader2 className="size-7 animate-spin" />
+              <span className="font-mono text-xs uppercase tracking-widest">running inference</span>
+            </div>
+          </div>
+        )}
+
+        {/* fired banner */}
+        {fired && result && (
+          <div className="absolute inset-x-0 bottom-0 flex items-center justify-between gap-3 bg-gradient-to-t from-primary/90 to-primary/70 px-4 py-2.5 text-primary-foreground">
+            <div className="flex items-center gap-2 text-sm font-semibold">
+              <Zap className="size-4" />
+              {result.events[0]?.rule} → {result.events[0]?.action}
+            </div>
+            <span className="font-mono text-xs tabular-nums">
+              {result.events[0]?.timestamp_sec.toFixed(1)}s
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* stat strip */}
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        <Stat label="Detections" value={result ? `${result.stats.detections}` : "—"} />
+        <Stat label="Rules" value={result ? `${result.stats.rules}` : "—"} />
+        <Stat label="Actions" value={result ? `${result.stats.actions}` : "—"} accent={fired} />
+        <Stat
+          label="Frames"
+          value={result ? `${result.stats.processed_frames}` : "—"}
+        />
+      </div>
+
+      {!result && (
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <Activity className="size-3.5" />
+          Engine idle — awaiting first run.
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/modules/rules/RuleStudioPanel.tsx

@@ -0,0 +1,158 @@
+import { useState } from "react"
+import {
+  CheckCircle2,
+  CircleSlash,
+  Loader2,
+  Save,
+  ShieldCheck,
+  Sparkles,
+  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 { cn } from "@/lib/utils"
+
+export function RuleStudioPanel() {
+  const {
+    rulesText,
+    setRulesText,
+    validate,
+    validation,
+    save,
+    compile,
+    compiling,
+  } = useDashboard()
+  const [instruction, setInstruction] = useState(
+    "If a person is near the steering wheel, turn on the PC. Don't repeat for five minutes.",
+  )
+
+  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 via llama.cpp */}
+      <TabsContent value="compose">
+        <div className="space-y-3">
+          <p className="text-xs text-muted-foreground">
+            Describe the automation in plain language. It compiles to validated rules through
+            llama.cpp — never executable code.
+          </p>
+          <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 to rules"}
+          </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 items-center justify-between rounded-lg border border-border bg-black/20 px-4 py-3"
+              >
+                <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>
+                  </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>
+                </div>
+                <Badge variant={r.enabled ? "live" : "default"}>
+                  {r.enabled ? "enabled" : "disabled"}
+                </Badge>
+              </div>
+            ))}
+          </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>
+  )
+}

frontend/src/modules/settings/SettingsPanel.tsx

@@ -0,0 +1,70 @@
+import { AlertTriangle } from "lucide-react"
+import { useDashboard } from "@/lib/dashboard"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Switch } from "@/components/ui/switch"
+import { Separator } from "@/components/ui/separator"
+import { cn } from "@/lib/utils"
+
+export function SettingsPanel() {
+  const { params, setParam } = useDashboard()
+
+  return (
+    <div className="space-y-5">
+      {/* webhook dispatch */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <Label className="text-foreground">Webhook dispatch</Label>
+            <p className="mt-0.5 text-[0.6875rem] text-muted-foreground">
+              Off by default — actions only simulate.
+            </p>
+          </div>
+          <Switch
+            checked={params.enableWebhooks}
+            onCheckedChange={(v) => setParam("enableWebhooks", v)}
+          />
+        </div>
+
+        <div
+          className={cn(
+            "transition-opacity",
+            params.enableWebhooks ? "opacity-100" : "pointer-events-none opacity-40",
+          )}
+        >
+          <Label htmlFor="webhook">Webhook URL</Label>
+          <Input
+            id="webhook"
+            value={params.webhookUrl}
+            onChange={(e) => setParam("webhookUrl", e.target.value)}
+            className="mt-1.5 font-mono text-xs"
+            placeholder="http://127.0.0.1:8123/api/webhook/example"
+          />
+        </div>
+
+        {params.enableWebhooks && (
+          <div className="flex items-start gap-2 rounded-md border border-warning/30 bg-warning/5 px-3 py-2 text-[0.6875rem] text-warning reveal">
+            <AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
+            Live POSTs are enabled. Matching rules will hit the URL above for real.
+          </div>
+        )}
+      </div>
+
+      <Separator />
+
+      <div className="space-y-1.5">
+        <div className="font-mono text-[0.625rem] uppercase tracking-[0.16em] text-muted-foreground">
+          rule compiler
+        </div>
+        <p className="text-xs text-muted-foreground">
+          llama.cpp endpoint:{" "}
+          <span className="font-mono text-foreground">127.0.0.1:8080/v1</span>
+        </p>
+        <p className="text-[0.6875rem] text-muted-foreground">
+          Start with{" "}
+          <span className="font-mono">llama-server -hf ggml-org/Qwen3-1.7B-GGUF:Q4_K_M</span>
+        </p>
+      </div>
+    </div>
+  )
+}

frontend/src/styles/index.css

@@ -0,0 +1,173 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* ───────────────────────────────────────────────────────────────
+   Tiny Trigger — "Dark Ops Console" design system
+   Neutral cool-black surfaces · one electric live-signal accent ·
+   distinctive type (Clash Display / Hanken Grotesk / JetBrains Mono)
+   ─────────────────────────────────────────────────────────────── */
+
+:root {
+  --radius: 0.625rem;
+
+  /* surfaces — cool near-black, layered by elevation */
+  --background: oklch(0.145 0.006 264);
+  --foreground: oklch(0.93 0.004 264);
+  --card: oklch(0.185 0.007 264);
+  --card-foreground: oklch(0.93 0.004 264);
+  --popover: oklch(0.205 0.008 264);
+  --popover-foreground: oklch(0.93 0.004 264);
+
+  /* the single confident accent — electric "live signal" chartreuse */
+  --primary: oklch(0.885 0.19 122);
+  --primary-foreground: oklch(0.18 0.03 130);
+
+  --secondary: oklch(0.235 0.008 264);
+  --secondary-foreground: oklch(0.93 0.004 264);
+  --muted: oklch(0.235 0.008 264);
+  --muted-foreground: oklch(0.64 0.012 264);
+  --accent: oklch(0.235 0.008 264);
+  --accent-foreground: oklch(0.93 0.004 264);
+
+  /* semantic */
+  --destructive: oklch(0.637 0.21 25.3);
+  --destructive-foreground: oklch(0.97 0.01 20);
+  --warning: oklch(0.79 0.15 78);
+  --warning-foreground: oklch(0.2 0.03 78);
+  --info: oklch(0.78 0.12 222);
+  --info-foreground: oklch(0.18 0.03 240);
+
+  --border: oklch(1 0 0 / 8%);
+  --input: oklch(1 0 0 / 12%);
+  --ring: oklch(0.885 0.19 122 / 55%);
+
+  /* fonts */
+  --font-display: "Clash Display", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --font-display: var(--font-display);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+  * {
+    border-color: var(--color-border);
+  }
+
+  html {
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    margin: 0;
+    min-height: 100vh;
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+    font-feature-settings: "ss01", "cv01", "tnum";
+    /* atmospheric depth: dual radial glows + faint engineering grid */
+    background-image:
+      radial-gradient(
+        90rem 60rem at 82% -10%,
+        oklch(0.885 0.19 122 / 0.07),
+        transparent 60%
+      ),
+      radial-gradient(
+        70rem 50rem at -10% 110%,
+        oklch(0.78 0.12 222 / 0.06),
+        transparent 55%
+      ),
+      linear-gradient(
+        to right,
+        oklch(1 0 0 / 0.018) 1px,
+        transparent 1px
+      ),
+      linear-gradient(
+        to bottom,
+        oklch(1 0 0 / 0.018) 1px,
+        transparent 1px
+      );
+    background-size: 100% 100%, 100% 100%, 56px 56px, 56px 56px;
+    background-attachment: fixed;
+  }
+
+  ::selection {
+    background: oklch(0.885 0.19 122 / 0.28);
+  }
+
+  /* refined dark scrollbars */
+  ::-webkit-scrollbar { width: 10px; height: 10px; }
+  ::-webkit-scrollbar-thumb {
+    background: oklch(1 0 0 / 0.1);
+    border-radius: 999px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+  ::-webkit-scrollbar-thumb:hover { background: oklch(1 0 0 / 0.18); background-clip: content-box; }
+}
+
+@layer utilities {
+  .font-display { font-family: var(--font-display); }
+  .text-balance { text-wrap: balance; }
+
+  /* the live-signal pulse used for "fired / active" states */
+  .signal-dot {
+    box-shadow: 0 0 0 0 var(--color-primary);
+    animation: signal-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+  @keyframes signal-pulse {
+    0% { box-shadow: 0 0 0 0 oklch(0.885 0.19 122 / 0.5); }
+    70% { box-shadow: 0 0 0 8px oklch(0.885 0.19 122 / 0); }
+    100% { box-shadow: 0 0 0 0 oklch(0.885 0.19 122 / 0); }
+  }
+
+  /* staggered entrance for panels */
+  .reveal {
+    opacity: 0;
+    animation: reveal-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  }
+  @keyframes reveal-up {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .hairline {
+    background-image: linear-gradient(to right, transparent, var(--color-border), transparent);
+  }
+}

frontend/tsconfig.app.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["src"]
+}

frontend/tsconfig.app.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/layout/modulepanel.tsx","./src/components/layout/section.tsx","./src/components/layout/sidebar.tsx","./src/components/layout/topbar.tsx","./src/components/ui/badge.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/separator.tsx","./src/components/ui/slider.tsx","./src/components/ui/sonner.tsx","./src/components/ui/switch.tsx","./src/components/ui/table.tsx","./src/components/ui/tabs.tsx","./src/components/ui/textarea.tsx","./src/components/ui/tooltip.tsx","./src/lib/api.ts","./src/lib/dashboard.tsx","./src/lib/types.ts","./src/lib/utils.ts","./src/modules/registry.ts","./src/modules/activity/activitypanel.tsx","./src/modules/detector/detectorpanel.tsx","./src/modules/preview/previewpanel.tsx","./src/modules/rules/rulestudiopanel.tsx","./src/modules/settings/settingspanel.tsx"],"version":"5.9.3"}

frontend/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": { "@/*": ["./src/*"] }
+  }
+}

frontend/tsconfig.node.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts"]
+}

frontend/tsconfig.node.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.9.3"}

pyproject.toml

@@ -0,0 +1,31 @@
+[project]
+name = "tiny-trigger"
+version = "0.1.0"
+description = "Open-vocabulary video automations with YOLOE and llama.cpp"
+authors = [
+    {name = "Javier Montalvo",email = "jmrgua@gmail.com"}
+]
+readme = "README.md"
+requires-python = ">=3.10,!=3.14.1,<3.15"
+dependencies = [
+    "gradio>=5.0",
+    "ultralytics>=8.3.0",
+    "opencv-python-headless>=4.10",
+    "pydantic>=2.8",
+    "PyYAML>=6.0",
+    "requests>=2.32",
+    "numpy>=1.26",
+    "imageio-ffmpeg>=0.6.0",
+    "static-ffmpeg>=2.13",
+    "torch (>=2.11.0,<3.0.0)",
+    "torchvision (>=0.26.0,<0.27.0)",
+    "torchaudio (>=2.11.0,<3.0.0)",
+    "llama-cpp-python[server] (>=0.3.28,<0.4.0)",
+]
+
+[tool.poetry.group.dev.dependencies]
+pytest = ">=9.0"
+
+[build-system]
+requires = ["poetry-core>=2.0.0,<3.0.0"]
+build-backend = "poetry.core.masonry.api"

pytest.ini

@@ -0,0 +1,3 @@
+[pytest]
+testpaths = tests
+pythonpath = .

requirements-dev.txt

@@ -0,0 +1,2 @@
+-r requirements.txt
+pytest>=9.0

requirements.txt

@@ -0,0 +1,7 @@
+gradio>=5.0
+ultralytics>=8.3.0
+opencv-python-headless>=4.10
+pydantic>=2.8
+PyYAML>=6.0
+requests>=2.32
+numpy>=1.26

server.py

@@ -0,0 +1,262 @@
+"""gradio.Server backend for the custom Tiny Trigger dashboard.
+
+Runs independently of ``app.py`` (the legacy Gradio Blocks UI). It serves the
+built React frontend (``frontend/dist``) and exposes the Tiny Trigger engine as
+``@app.api`` endpoints that keep Gradio's queuing / SSE / gradio_client
+compatibility. The frontend talks to these via the ``@gradio/client`` JS library.
+
+    poetry run python server.py        # serves the dashboard on :7860
+
+The heavy ML imports stay lazy (inside ``tiny_trigger``); importing this module
+does not require torch/ultralytics.
+"""
+
+from __future__ import annotations
+
+from pathlib import Path
+from typing import Any
+
+from gradio import FileData, Server
+from fastapi.responses import FileResponse, HTMLResponse, JSONResponse
+
+from tiny_trigger import (
+    compile_automation_with_llamacpp,
+    evaluate_video_detections,
+    load_automation_text,
+    parse_class_prompt,
+    process_video,
+)
+from tiny_trigger.actions import dispatch_events
+from tiny_trigger.store import (
+    load_local_config,
+    load_runtime_state,
+    load_saved_automations,
+    save_automations,
+    save_runtime_state,
+    append_events,
+)
+from tiny_trigger.video import render_automation_video
+
+# ── paths ──────────────────────────────────────────────────────────────────
+ROOT = Path(__file__).parent
+DIST = ROOT / "frontend" / "dist"
+ASSETS = DIST / "assets"
+RENDERS = ROOT / ".local" / "renders"
+RENDERS.mkdir(parents=True, exist_ok=True)
+
+DEFAULT_MODEL = "yoloe-26s-seg.pt"
+
+
+# ── serialization helpers (JSON-shaped, for the custom frontend) ─────────────
+def _detection_dict(d: Any) -> dict[str, Any]:
+    return {
+        "frame_index": d.frame_index,
+        "timestamp_sec": round(d.timestamp_sec, 3),
+        "label": d.label,
+        "confidence": round(d.confidence, 4),
+        "bbox_xyxy": [round(v, 1) for v in d.bbox_xyxy],
+        "bbox_xyxy_norm": [round(v, 4) for v in d.bbox_xyxy_norm],
+    }
+
+
+def _event_dict(e: Any) -> dict[str, Any]:
+    return {
+        "rule": e.rule,
+        "action": e.action,
+        "type": e.type,
+        "frame_index": e.frame_index,
+        "timestamp_sec": round(e.timestamp_sec, 3),
+        "status": e.status,
+        "url": e.url,
+        "response_status": e.response_status,
+        "error": e.error,
+    }
+
+
+def _media_url(path_str: str) -> str:
+    """Map a rendered file path under RENDERS to a served /media URL."""
+    return f"/media/{Path(path_str).name}"
+
+
+def _file_path(video: Any) -> str | None:
+    """FileData arrives as a dict over the wire; tolerate the object form too."""
+    if video is None:
+        return None
+    if isinstance(video, dict):
+        return video.get("path")
+    return getattr(video, "path", None)
+
+
+# ── the server ───────────────────────────────────────────────────────────────
+app = Server(title="Tiny Trigger", description="Open-vocabulary video automations")
+
+
+@app.api(name="detect_and_automate")
+def detect_and_automate(
+    video: FileData,
+    classes: str,
+    rules_text: str,
+    confidence: float = 0.25,
+    frame_stride: int = 5,
+    max_frames: int = 120,
+    model_name: str = DEFAULT_MODEL,
+    image_size: int = 0,
+    device: str = "auto",
+    max_detections: int = 0,
+    enable_webhooks: bool = False,
+    webhook_url: str = "",
+) -> dict:
+    """Detect once, evaluate rules, dispatch actions, render an overlay clip."""
+    video_path = _file_path(video)
+    if not video_path:
+        raise ValueError("A video file is required.")
+
+    rules = load_automation_text(rules_text)
+    state = load_runtime_state()
+
+    result = process_video(
+        video_path=video_path,
+        class_prompt=classes,
+        confidence=confidence,
+        frame_stride=frame_stride,
+        max_frames=max_frames,
+        model_name=model_name or DEFAULT_MODEL,
+        image_size=image_size or None,
+        device=None if device in ("", "auto") else device,
+        max_detections=max_detections or None,
+        output_dir=str(RENDERS),
+    )
+
+    events, last_fired = evaluate_video_detections(
+        rules.rules, result.detections, last_fired=state.last_fired
+    )
+    dispatched = dispatch_events(
+        events, enable_webhooks=enable_webhooks, webhook_url=webhook_url or None
+    )
+    state.last_fired = last_fired
+    save_runtime_state(state)
+    append_events(dispatched)
+
+    automation_path = render_automation_video(
+        source_video_path=video_path,
+        detections=result.detections,
+        events=dispatched,
+        frame_stride=frame_stride,
+        max_frames=max_frames,
+        output_dir=str(RENDERS),
+    )
+
+    fired = len(dispatched)
+    return {
+        "status": "fired" if fired else "no_match",
+        "video_url": _media_url(automation_path),
+        "annotated_url": _media_url(result.output_video_path),
+        "classes": result.classes,
+        "stats": {
+            "detections": len(result.detections),
+            "rules": len(rules.rules),
+            "actions": fired,
+            "processed_frames": result.processed_frames,
+            "source_fps": round(result.source_fps, 2),
+            "output_fps": round(result.output_fps, 2),
+        },
+        "detections": [_detection_dict(d) for d in result.detections],
+        "events": [_event_dict(e) for e in dispatched],
+    }
+
+
+@app.api(name="compile_rules")
+def compile_rules(
+    instruction: str,
+    classes: str = "",
+    base_url: str = "http://127.0.0.1:8080/v1",
+    model: str = "ggml-org/Qwen3-1.7B-GGUF:Q4_K_M",
+) -> dict:
+    """Compile a natural-language request into validated automation rules."""
+    class_names = parse_class_prompt(classes) if classes else []
+    compiled = compile_automation_with_llamacpp(
+        instruction=instruction,
+        class_names=class_names,
+        base_url=base_url,
+        model=model,
+    )
+    return {
+        "rules_text": compiled.document.model_dump_json(by_alias=True, indent=2),
+        "raw_text": compiled.raw_text,
+        "rule_count": len(compiled.document.rules),
+    }
+
+
+@app.api(name="validate_rules")
+def validate_rules(rules_text: str) -> dict:
+    """Validate JSON/YAML rules; return a structured summary or the error."""
+    try:
+        document = load_automation_text(rules_text)
+    except Exception as exc:  # noqa: BLE001 — surface any validation error to the UI
+        return {"ok": False, "error": str(exc), "rules": []}
+    return {
+        "ok": True,
+        "error": None,
+        "rules": [
+            {
+                "name": r.name,
+                "enabled": r.gate.enabled,
+                "conditions": len(r.when.all_conditions) + len(r.when.any_conditions),
+                "actions": [{"type": a.type, "name": a.name} for a in r.then],
+            }
+            for r in document.rules
+        ],
+    }
+
+
+@app.api(name="save_rules")
+def save_rules(rules_text: str) -> dict:
+    document = load_automation_text(rules_text)
+    save_automations(document)
+    return {"ok": True, "rule_count": len(document.rules)}
+
+
+@app.api(name="load_rules")
+def load_rules() -> dict:
+    document = load_saved_automations()
+    if document is None:
+        return {"rules_text": None}
+    return {"rules_text": document.model_dump_json(by_alias=True, indent=2)}
+
+
+@app.api(name="get_config")
+def get_config() -> dict:
+    cfg = load_local_config()
+    return cfg.model_dump()
+
+
+# ── static frontend + media (custom routes take priority over gradio's) ──────
+@app.get("/", response_class=HTMLResponse)
+def index() -> Any:
+    index_html = DIST / "index.html"
+    if not index_html.exists():
+        return HTMLResponse(
+            "<h1>Frontend not built</h1><p>Run <code>pnpm --dir frontend build</code>.</p>",
+            status_code=503,
+        )
+    return FileResponse(index_html)
+
+
+@app.get("/assets/{file_path:path}")
+def assets(file_path: str) -> Any:
+    target = (ASSETS / file_path).resolve()
+    if not str(target).startswith(str(ASSETS.resolve())) or not target.is_file():
+        return JSONResponse({"error": "not found"}, status_code=404)
+    return FileResponse(target)
+
+
+@app.get("/media/{file_path:path}")
+def media(file_path: str) -> Any:
+    target = (RENDERS / file_path).resolve()
+    if not str(target).startswith(str(RENDERS.resolve())) or not target.is_file():
+        return JSONResponse({"error": "not found"}, status_code=404)
+    return FileResponse(target, media_type="video/mp4")
+
+
+if __name__ == "__main__":
+    app.launch(server_name="127.0.0.1", server_port=7860, show_error=True)

tests/test_automation.py

@@ -0,0 +1,172 @@
+from __future__ import annotations
+
+import json
+
+import pytest
+from pydantic import ValidationError
+
+from tiny_trigger.automation import RuleEngine, evaluate_video_detections, load_automation_text
+from tiny_trigger.models import Detection
+
+
+def detection(label: str, box: tuple[float, float, float, float], frame: int = 0, time: float = 0.0) -> Detection:
+    return Detection(
+        frame_index=frame,
+        timestamp_sec=time,
+        label=label,
+        confidence=0.9,
+        bbox_xyxy=(0.0, 0.0, 10.0, 10.0),
+        bbox_xyxy_norm=box,
+    )
+
+
+def test_presence_near_and_cooldown_fire_once_per_window() -> None:
+    document = load_automation_text(
+        json.dumps(
+            {
+                "rules": [
+                    {
+                        "name": "feed-cat",
+                        "when": {
+                            "all": [
+                                {"present": {"label": "cat", "min_count": 1}},
+                                {"near": {"a": "cat", "b": "feeder robot", "max_distance": 0.35}},
+                                {"cooldown": {"key": "feed-cat", "seconds": 60}},
+                            ]
+                        },
+                        "then": [{"type": "simulate", "name": "feed cat"}],
+                    }
+                ]
+            }
+        )
+    )
+    engine = RuleEngine(document.rules)
+    frame = [
+        detection("cat", (0.10, 0.10, 0.20, 0.20), time=0.0),
+        detection("feeder robot", (0.25, 0.12, 0.35, 0.22), time=0.0),
+    ]
+
+    assert len(engine.evaluate_frame(frame, frame_index=0, timestamp_sec=0.0)) == 1
+    assert engine.evaluate_frame(frame, frame_index=1, timestamp_sec=30.0) == []
+    assert len(engine.evaluate_frame(frame, frame_index=2, timestamp_sec=61.0)) == 1
+
+
+def test_count_condition() -> None:
+    document = load_automation_text(
+        json.dumps(
+            {
+                "rules": [
+                    {
+                        "name": "two-packages",
+                        "when": {"all": [{"count": {"label": "package", "min": 2}}]},
+                        "then": [{"type": "simulate", "name": "notify"}],
+                    }
+                ]
+            }
+        )
+    )
+    engine = RuleEngine(document.rules)
+    one = [detection("package", (0.1, 0.1, 0.2, 0.2))]
+    two = [*one, detection("package", (0.4, 0.4, 0.5, 0.5))]
+
+    assert engine.evaluate_frame(one, frame_index=0, timestamp_sec=0.0) == []
+    assert len(engine.evaluate_frame(two, frame_index=1, timestamp_sec=1.0)) == 1
+
+
+def test_gate_cooldown_fire_once_per_window() -> None:
+    document = load_automation_text(
+        json.dumps(
+            {
+                "rules": [
+                    {
+                        "name": "turn-on-pc",
+                        "when": {
+                            "all": [
+                                {"present": {"label": "person"}},
+                                {"near": {"a": "person", "b": "steering wheel", "max_distance": 0.45}},
+                            ]
+                        },
+                        "gate": {"enabled": True, "cooldown": {"key": "turn-on-pc", "seconds": 60}},
+                        "then": [{"type": "simulate", "name": "turn on pc"}],
+                    }
+                ]
+            }
+        )
+    )
+    engine = RuleEngine(document.rules)
+    frame = [
+        detection("person", (0.10, 0.10, 0.20, 0.20), time=0.0),
+        detection("steering wheel", (0.25, 0.12, 0.35, 0.22), time=0.0),
+    ]
+
+    assert len(engine.evaluate_frame(frame, frame_index=0, timestamp_sec=0.0)) == 1
+    assert engine.evaluate_frame(frame, frame_index=1, timestamp_sec=30.0) == []
+    assert len(engine.evaluate_frame(frame, frame_index=2, timestamp_sec=61.0)) == 1
+
+
+def test_disabled_gate_blocks_rule() -> None:
+    document = load_automation_text(
+        json.dumps(
+            {
+                "rules": [
+                    {
+                        "name": "disabled",
+                        "when": {"all": [{"present": {"label": "person"}}]},
+                        "gate": {"enabled": False},
+                        "then": [{"type": "simulate", "name": "turn on pc"}],
+                    }
+                ]
+            }
+        )
+    )
+    engine = RuleEngine(document.rules)
+
+    assert engine.evaluate_frame([detection("person", (0.1, 0.1, 0.2, 0.2))], frame_index=0, timestamp_sec=0.0) == []
+
+
+def test_evaluate_video_detections_returns_updated_last_fired() -> None:
+    document = load_automation_text(
+        json.dumps(
+            {
+                "rules": [
+                    {
+                        "name": "turn-on-pc",
+                        "when": {"all": [{"present": {"label": "person"}}]},
+                        "gate": {"cooldown": {"key": "turn-on-pc", "seconds": 60}},
+                        "then": [{"type": "simulate", "name": "turn on pc"}],
+                    }
+                ]
+            }
+        )
+    )
+    events, last_fired = evaluate_video_detections(
+        document.rules,
+        [detection("person", (0.1, 0.1, 0.2, 0.2), frame=2, time=12.0)],
+    )
+    blocked_events, unchanged_last_fired = evaluate_video_detections(
+        document.rules,
+        [detection("person", (0.1, 0.1, 0.2, 0.2), frame=3, time=30.0)],
+        last_fired=last_fired,
+    )
+
+    assert len(events) == 1
+    assert last_fired == {"turn-on-pc": 12.0}
+    assert blocked_events == []
+    assert unchanged_last_fired == last_fired
+
+
+def test_invalid_rule_rejected() -> None:
+    with pytest.raises(ValidationError):
+        load_automation_text(
+            json.dumps(
+                {
+                    "rules": [
+                        {
+                            "name": "bad",
+                            "when": {"all": [{"present": {"label": "cat"}, "near": {"a": "cat", "b": "bowl"}}]},
+                            "then": [{"type": "simulate", "name": "bad"}],
+                        }
+                    ]
+                }
+            )
+        )

tests/test_detector.py

@@ -0,0 +1,7 @@
+from __future__ import annotations
+
+from tiny_trigger.detector import parse_class_prompt
+
+
+def test_parse_class_prompt_splits_and_dedupes() -> None:
+    assert parse_class_prompt(" cat, feeder robot\npackage; cat ") == ["cat", "feeder robot", "package"]

tests/test_llm.py

@@ -0,0 +1,126 @@
+from __future__ import annotations
+
+import json
+import sys
+
+from tiny_trigger.automation import AutomationDocument
+from tiny_trigger.llm import (
+    SYSTEM_PROMPT,
+    _build_user_prompt,
+    _chat_payload,
+    compile_automation_with_llamacpp,
+    _post_chat_completion,
+    _validate_compile_result,
+    extract_json_object,
+)
+
+
+def test_extract_json_object_from_fenced_response() -> None:
+    raw = """```json
+{"rules": [{"name": "notify", "when": {"all": [{"present": {"label": "package"}}]}, "then": [{"type": "simulate", "name": "notify"}]}]}
+```"""
+    data = json.loads(extract_json_object(raw))
+    document = AutomationDocument.model_validate(data)
+
+    assert document.rules[0].name == "notify"
+
+
+def test_llamacpp_payload_uses_json_object() -> None:
+    payload = _chat_payload(model="qwen", user_prompt="compile this", response_format="json_object")
+
+    assert payload["response_format"] == {"type": "json_object"}
+
+
+def test_prompt_includes_validation_schema() -> None:
+    prompt = _build_user_prompt(instruction="if package at door notify me", class_names=["package", "door"])
+
+    assert "Available detection labels: package, door" in prompt
+    assert "Full validation schema" in prompt
+    assert "AutomationDocument" in prompt
+
+
+def test_prompt_teaches_near_relations() -> None:
+    prompt = _build_user_prompt(
+        instruction="If person near steering wheel then turn on pc.",
+        class_names=["person", "steering wheel"],
+    )
+
+    assert '"near": {"a": "person", "b": "steering wheel", "max_distance": 0.45}' in prompt
+    assert "Do not replace a near relation with two present conditions." in SYSTEM_PROMPT
+    assert "Use state gates in gate: enabled, cooldown." in SYSTEM_PROMPT
+    assert '"gate": {"enabled": true}' in prompt
+    assert '"gate": {"enabled": true, "cooldown": {"key": "package-at-door", "minutes": 15}}' in prompt
+
+
+def test_invalid_empty_object_fails_validation() -> None:
+    try:
+        _validate_compile_result("{}")
+    except Exception as exc:
+        assert "rules" in str(exc)
+    else:
+        raise AssertionError("{} should not validate as an automation document")
+
+
+def test_post_chat_completion_extracts_content() -> None:
+    class Response:
+        def raise_for_status(self) -> None:
+            return None
+
+        def json(self):
+            return {"choices": [{"message": {"content": "{\"rules\": []}"}}]}
+
+    class Requests:
+        def post(self, endpoint, json, timeout):
+            assert endpoint == "http://localhost/v1/chat/completions"
+            assert json["response_format"] == {"type": "json_object"}
+            assert timeout == 1
+            return Response()
+
+    assert (
+        _post_chat_completion(
+            endpoint="http://localhost/v1/chat/completions",
+            model="qwen",
+            user_prompt="compile",
+            timeout=1,
+            requests_module=Requests(),
+        )
+        == "{\"rules\": []}"
+    )
+
+
+def test_compile_retries_after_invalid_response(monkeypatch) -> None:
+    class Response:
+        def __init__(self, content: str) -> None:
+            self.content = content
+
+        def raise_for_status(self) -> None:
+            return None
+
+        def json(self):
+            return {"choices": [{"message": {"content": self.content}}]}
+
+    class Requests:
+        calls = 0
+
+        @classmethod
+        def post(cls, endpoint, json, timeout):
+            cls.calls += 1
+            if cls.calls == 1:
+                return Response("{}")
+            return Response(
+                '{"rules":[{"name":"notify","when":{"all":[{"present":{"label":"person"}}]},'
+                '"then":[{"type":"simulate","name":"notify"}]}]}'
+            )
+
+    monkeypatch.setitem(sys.modules, "requests", Requests)
+
+    result = compile_automation_with_llamacpp(
+        instruction="if person present notify",
+        class_names=["person"],
+        base_url="http://localhost/v1",
+        model="qwen",
+        timeout=1,
+    )
+
+    assert Requests.calls == 2
+    assert result.document.rules[0].name == "notify"

tests/test_store.py

@@ -0,0 +1,75 @@
+from __future__ import annotations
+
+import json
+
+from tiny_trigger.automation import load_automation_text
+from tiny_trigger.models import ActionEvent
+from tiny_trigger.store import (
+    RuntimeState,
+    append_events,
+    load_local_config,
+    load_runtime_state,
+    load_saved_automations,
+    save_automations,
+    save_runtime_state,
+)
+
+
+def test_local_config_yaml(tmp_path) -> None:
+    path = tmp_path / "config.yaml"
+    path.write_text("default_device: cuda:0\nwebhook_url: http://example.test\n", encoding="utf-8")
+
+    config = load_local_config(path)
+
+    assert config.default_device == "cuda:0"
+    assert config.webhook_url == "http://example.test"
+
+
+def test_save_and_load_automations(tmp_path) -> None:
+    path = tmp_path / "automations.json"
+    document = load_automation_text(
+        json.dumps(
+            {
+                "rules": [
+                    {
+                        "name": "notify",
+                        "when": {"all": [{"present": {"label": "person"}}]},
+                        "then": [{"type": "simulate", "name": "notify"}],
+                    }
+                ]
+            }
+        )
+    )
+
+    save_automations(document, path)
+    loaded = load_saved_automations(path)
+
+    assert loaded is not None
+    assert loaded.rules[0].name == "notify"
+
+
+def test_runtime_state_roundtrip(tmp_path) -> None:
+    path = tmp_path / "state.json"
+    save_runtime_state(RuntimeState(last_fired={"turn-on-pc": 12.0}), path)
+
+    assert load_runtime_state(path).last_fired == {"turn-on-pc": 12.0}
+
+
+def test_append_events_jsonl(tmp_path) -> None:
+    path = tmp_path / "events.jsonl"
+    append_events(
+        [
+            ActionEvent(
+                rule="turn-on-pc",
+                action="turn on pc",
+                type="simulate",
+                frame_index=0,
+                timestamp_sec=0.0,
+            )
+        ],
+        path,
+    )
+
+    rows = path.read_text(encoding="utf-8").splitlines()
+    assert len(rows) == 1
+    assert json.loads(rows[0])["rule"] == "turn-on-pc"