frontend

.gitignore

@@ -17,7 +17,7 @@ models/
 *.onnx
 *.engine
 CLAUDE.md
-*.ts
+mobileclip2_b.ts
 .claude
 
-design_previews/
+design_previews/

frontend/src/lib/api.ts

@@ -0,0 +1,87 @@
+import { Client, handle_file } from "@gradio/client"
+import type {
+  CompileResult,
+  DetectParams,
+  LocalConfig,
+  RunResult,
+  ValidationResult,
+} from "./types"
+
+// Single shared connection to the gradio.Server backend.
+let clientPromise: Promise<Client> | null = null
+function getClient(): Promise<Client> {
+  if (!clientPromise) {
+    const origin =
+      import.meta.env.DEV && import.meta.env.VITE_API_ORIGIN
+        ? import.meta.env.VITE_API_ORIGIN
+        : window.location.origin
+    clientPromise = Client.connect(origin)
+  }
+  return clientPromise
+}
+
+async function call<T>(endpoint: string, payload: Record<string, unknown>): Promise<T> {
+  const client = await getClient()
+  const result = await client.predict(endpoint, payload)
+  return (result.data as unknown[])[0] as T
+}
+
+export async function detectAndAutomate(
+  video: File,
+  rulesText: string,
+  params: DetectParams,
+): Promise<RunResult> {
+  return call<RunResult>("/detect_and_automate", {
+    video: handle_file(video),
+    classes: params.classes,
+    rules_text: rulesText,
+    confidence: params.confidence,
+    frame_stride: params.frameStride,
+    max_frames: params.maxFrames,
+    model_name: params.modelName,
+    image_size: params.imageSize,
+    device: params.device,
+    max_detections: params.maxDetections,
+    enable_webhooks: params.enableWebhooks,
+    webhook_url: params.webhookUrl,
+  })
+}
+
+export async function compileRules(
+  instruction: string,
+  classes: string,
+  baseUrl: string,
+  model: string,
+): Promise<CompileResult> {
+  return call<CompileResult>("/compile_rules", {
+    instruction,
+    classes,
+    base_url: baseUrl,
+    model,
+  })
+}
+
+export async function validateRules(rulesText: string): Promise<ValidationResult> {
+  return call<ValidationResult>("/validate_rules", { rules_text: rulesText })
+}
+
+export async function saveRules(rulesText: string): Promise<{ ok: boolean; rule_count: number }> {
+  return call("/save_rules", { rules_text: rulesText })
+}
+
+export async function loadRules(): Promise<{ rules_text: string | null }> {
+  return call("/load_rules", {})
+}
+
+export async function getConfig(): Promise<LocalConfig> {
+  return call<LocalConfig>("/get_config", {})
+}
+
+// Resolve a backend media path (e.g. "/media/foo.mp4") to a fully-qualified URL.
+export function mediaUrl(path: string): string {
+  const origin =
+    import.meta.env.DEV && import.meta.env.VITE_API_ORIGIN
+      ? import.meta.env.VITE_API_ORIGIN
+      : window.location.origin
+  return path.startsWith("http") ? path : `${origin}${path}`
+}

frontend/src/lib/types.ts

@@ -0,0 +1,83 @@
+export interface Detection {
+  frame_index: number
+  timestamp_sec: number
+  label: string
+  confidence: number
+  bbox_xyxy: [number, number, number, number]
+  bbox_xyxy_norm: [number, number, number, number]
+}
+
+export interface ActionEvent {
+  rule: string
+  action: string
+  type: "simulate" | "webhook"
+  frame_index: number
+  timestamp_sec: number
+  status: string
+  url: string | null
+  response_status: number | null
+  error: string | null
+}
+
+export interface RunStats {
+  detections: number
+  rules: number
+  actions: number
+  processed_frames: number
+  source_fps: number
+  output_fps: number
+}
+
+export interface RunResult {
+  status: "fired" | "no_match"
+  video_url: string
+  annotated_url: string
+  classes: string[]
+  stats: RunStats
+  detections: Detection[]
+  events: ActionEvent[]
+}
+
+export interface RuleSummary {
+  name: string
+  enabled: boolean
+  conditions: number
+  actions: { type: string; name: string }[]
+}
+
+export interface ValidationResult {
+  ok: boolean
+  error: string | null
+  rules: RuleSummary[]
+}
+
+export interface CompileResult {
+  rules_text: string
+  raw_text: string
+  rule_count: number
+}
+
+export interface LocalConfig {
+  camera_url: string | null
+  webhook_url: string | null
+  default_classes: string | null
+  default_detector_model: string | null
+  default_device: string | null
+  default_image_size: number | null
+  default_max_detections: number | null
+  llamacpp_base_url: string | null
+  llamacpp_model: string | null
+}
+
+export interface DetectParams {
+  classes: string
+  confidence: number
+  frameStride: number
+  maxFrames: number
+  modelName: string
+  imageSize: number
+  device: string
+  maxDetections: number
+  enableWebhooks: boolean
+  webhookUrl: string
+}

frontend/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

frontend/src/modules/registry.ts

@@ -0,0 +1,113 @@
+import type { ComponentType } from "react"
+import type { LucideIcon } from "lucide-react"
+import { Crosshair, Film, ListChecks, Radio, SlidersHorizontal } from "lucide-react"
+import { DetectorPanel } from "./detector/DetectorPanel"
+import { PreviewPanel } from "./preview/PreviewPanel"
+import { RuleStudioPanel } from "./rules/RuleStudioPanel"
+import { ActivityPanel } from "./activity/ActivityPanel"
+import { SettingsPanel } from "./settings/SettingsPanel"
+
+export type SectionId = "test" | "automation" | "settings"
+
+/** Top-level horizontal bands, each separated by a rule. */
+export interface DashboardSection {
+  id: SectionId
+  label: string
+  hint: string
+  order: number
+}
+
+export const SECTIONS: DashboardSection[] = [
+  { id: "test", label: "Test", hint: "detect · replay · fired actions", order: 1 },
+  { id: "automation", label: "Automations & Firings", hint: "compile · validate · log", order: 2 },
+  { id: "settings", label: "Settings", hint: "dispatch · compiler", order: 3 },
+]
+
+/**
+ * A dashboard module. Add functionality by dropping a new folder under
+ * `modules/<name>/` that exports a Panel, then registering it here with the
+ * `section` it belongs to and its `span` (out of a 12-column section grid).
+ */
+export interface DashboardModule {
+  id: string
+  index: string
+  eyebrow: string
+  title: string
+  icon: LucideIcon
+  section: SectionId
+  order: number
+  span: number
+  Panel: ComponentType
+}
+
+export const MODULES: DashboardModule[] = [
+  {
+    id: "detector",
+    index: "01",
+    eyebrow: "input",
+    title: "Detector",
+    icon: Crosshair,
+    section: "test",
+    order: 1,
+    span: 4,
+    Panel: DetectorPanel,
+  },
+  {
+    id: "replay",
+    index: "02",
+    eyebrow: "output",
+    title: "Annotated Replay",
+    icon: Film,
+    section: "test",
+    order: 2,
+    span: 8,
+    Panel: PreviewPanel,
+  },
+  {
+    id: "rules",
+    index: "03",
+    eyebrow: "automation",
+    title: "Rule Studio",
+    icon: ListChecks,
+    section: "automation",
+    order: 1,
+    span: 5,
+    Panel: RuleStudioPanel,
+  },
+  {
+    id: "activity",
+    index: "04",
+    eyebrow: "telemetry",
+    title: "Activity & Firings",
+    icon: Radio,
+    section: "automation",
+    order: 2,
+    span: 7,
+    Panel: ActivityPanel,
+  },
+  {
+    id: "dispatch",
+    index: "05",
+    eyebrow: "config",
+    title: "Dispatch & Compiler",
+    icon: SlidersHorizontal,
+    section: "settings",
+    order: 1,
+    span: 6,
+    Panel: SettingsPanel,
+  },
+]
+
+export function modulesForSection(section: SectionId): DashboardModule[] {
+  return MODULES.filter((m) => m.section === section).sort((a, b) => a.order - b.order)
+}
+
+// Static map so Tailwind keeps the col-span classes (no dynamic interpolation).
+export const SPAN_CLASS: Record<number, string> = {
+  4: "lg:col-span-4",
+  5: "lg:col-span-5",
+  6: "lg:col-span-6",
+  7: "lg:col-span-7",
+  8: "lg:col-span-8",
+  12: "lg:col-span-12",
+}

frontend/src/styles/index.css

@@ -1,6 +1,8 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
+@source inline("lg:col-span-4 lg:col-span-5 lg:col-span-6 lg:col-span-7 lg:col-span-8 lg:col-span-12");
+
 @custom-variant dark (&:is(.dark *));
 
 /* ───────────────────────────────────────────────────────────────

frontend/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_ORIGIN?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

frontend/vite.config.ts

@@ -0,0 +1,26 @@
+import path from "node:path"
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import tailwindcss from "@tailwindcss/vite"
+
+// The dashboard is served by gradio.Server in production (built assets in dist/).
+// In dev, Vite proxies API + media calls to the running gradio.Server on :7860.
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: { "@": path.resolve(__dirname, "./src") },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      "/gradio_api": { target: "http://127.0.0.1:7860", changeOrigin: true, ws: true },
+      "/media": { target: "http://127.0.0.1:7860", changeOrigin: true },
+      "/config": { target: "http://127.0.0.1:7860", changeOrigin: true },
+      "/upload": { target: "http://127.0.0.1:7860", changeOrigin: true },
+    },
+  },
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+  },
+})