Add frontend app and redesign prototype for rule management UI.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/App.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react"
+import { ThemeProvider } from "next-themes"
+import { MatchTester } from "@/components/MatchTester"
+import { RuleEditor } from "@/components/RuleEditor"
+import { Toaster } from "@/components/ui/sonner"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+export default function App() {
+  const [version, setVersion] = useState<number | null>(null)
+  const [tab, setTab] = useState("rules")
+
+  return (
+    <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
+      <div className="bg-background min-h-svh">
+        <header className="border-b">
+          <div className="mx-auto flex w-full max-w-5xl items-center justify-between gap-4 px-6 py-4">
+            <div>
+              <h1 className="text-xl font-semibold tracking-tight">
+                ASR 事件监控配置
+              </h1>
+              <p className="text-muted-foreground text-sm">
+                编辑潜在转接规则并立即生效
+              </p>
+            </div>
+            <div className="text-muted-foreground text-sm">
+              {version == null ? "版本加载中…" : `当前生效版本 V${version}`}
+            </div>
+          </div>
+        </header>
+
+        <main className="mx-auto w-full max-w-5xl px-6 py-6">
+          <Tabs value={tab} onValueChange={setTab}>
+            <TabsList>
+              <TabsTrigger value="rules">规则配置</TabsTrigger>
+              <TabsTrigger value="demo">匹配验证</TabsTrigger>
+            </TabsList>
+            <TabsContent value="rules" className="mt-6">
+              <RuleEditor
+                onVersionChange={setVersion}
+                onSaved={() => setTab("demo")}
+              />
+            </TabsContent>
+            <TabsContent value="demo" className="mt-6">
+              <MatchTester activeVersion={version} />
+            </TabsContent>
+          </Tabs>
+        </main>
+      </div>
+      <Toaster richColors position="top-center" />
+    </ThemeProvider>
+  )
+}