From cb30287fbd333661afaa428a7b119cb766db5bc2 Mon Sep 17 00:00:00 2001
From: Syahdan <syahdanhafizzz@gmail.com>
Date: Wed, 7 Jan 2026 18:35:39 +0700
Subject: [PATCH] refactor: rename app crate and binary names to addmon for
 consistency

---
 apps/web/src-tauri/tauri.conf.json            |   2 +-
 .../components/monitor/incident-manager.tsx   |  14 +-
 .../src/components/monitor/kpi-dashboard.tsx  | 134 ++++++++++++------
 apps/web/src/lib/types/alerts.ts              |  13 ++
 apps/web/src/routes/index.tsx                 |  26 ++--
 5 files changed, 127 insertions(+), 62 deletions(-)

diff --git a/apps/web/src-tauri/tauri.conf.json b/apps/web/src-tauri/tauri.conf.json
index 3506011..bf9f9dd 100644
--- a/apps/web/src-tauri/tauri.conf.json
+++ b/apps/web/src-tauri/tauri.conf.json
@@ -2,7 +2,7 @@
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "addmon",
   "version": "0.1.0",
-  "identifier": "com.tauri.dev",
+  "identifier": "com.littlequartz.addmon",
   "build": {
     "frontendDist": "../dist",
     "devUrl": "http://localhost:3001",
diff --git a/apps/web/src/components/monitor/incident-manager.tsx b/apps/web/src/components/monitor/incident-manager.tsx
index ab8ae36..00528d2 100644
--- a/apps/web/src/components/monitor/incident-manager.tsx
+++ b/apps/web/src/components/monitor/incident-manager.tsx
@@ -1,9 +1,7 @@
-import * as React from "react";
 import { format } from "date-fns";
-import { Plus, Link, Link2Off } from "lucide-react";
+import { Link, Link2Off, Plus } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "@/lib/utils";
-import type { Incident, ProcessedAlert } from "@/lib/types/alerts";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -15,6 +13,8 @@ import {
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import type { Incident, ProcessedAlert } from "@/lib/types/alerts";
+import { cn } from "@/lib/utils";
 
 interface IncidentManagerProps {
   incidents: Incident[];
@@ -137,7 +137,7 @@ export function IncidentManager({
                     className={cn(
                       "relative transition-colors",
                       isCurrentAlertAttached &&
-                        "border-primary/50 bg-primary/5",
+                      "border-primary/50 bg-primary/5",
                     )}
                   >
                     <CardHeader className="pb-2">
@@ -166,7 +166,7 @@ export function IncidentManager({
                             className={cn(
                               "shrink-0",
                               isCurrentAlertAttached &&
-                                "bg-destructive/10 text-destructive hover:bg-destructive/20",
+                              "bg-destructive/10 text-destructive hover:bg-destructive/20",
                             )}
                           >
                             {isCurrentAlertAttached ? (
@@ -199,7 +199,7 @@ export function IncidentManager({
                         </div>
                       </div>
                     </CardContent>
-                    <CardFooter className="pt-0 pb-3 text-[10px] text-muted-foreground">
+                    <CardFooter className="pt-3 pb-3 text-[10px] text-muted-foreground">
                       <div className="flex items-center gap-1.5 w-full">
                         <div
                           className={cn(
diff --git a/apps/web/src/components/monitor/kpi-dashboard.tsx b/apps/web/src/components/monitor/kpi-dashboard.tsx
index 28da693..251fac0 100644
--- a/apps/web/src/components/monitor/kpi-dashboard.tsx
+++ b/apps/web/src/components/monitor/kpi-dashboard.tsx
@@ -1,6 +1,7 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import type { KpiMetrics } from "@/lib/types/alerts";
+import { KPI_THRESHOLDS } from "@/lib/types/alerts";
 import { cn } from "@/lib/utils";
 
 interface KpiDashboardProps {
@@ -11,11 +12,11 @@ interface KpiDashboardProps {
 export function KpiDashboard({ kpis, isLoading = false }: KpiDashboardProps) {
   if (isLoading) {
     return (
-      <div className="grid gap-4 md:grid-cols-3">
+      <div className="grid gap-4 md:grid-cols-4">
         <Card className="rounded-none">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">
-              Error Coverage
+              Alert Coverage Ratio
             </CardTitle>
           </CardHeader>
           <CardContent>
@@ -26,17 +27,7 @@ export function KpiDashboard({ kpis, isLoading = false }: KpiDashboardProps) {
         <Card className="rounded-none">
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle className="text-sm font-medium">
-              Total Downtime
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Skeleton className="h-7 w-20 rounded-none" />
-          </CardContent>
-        </Card>
-        <Card className="rounded-none">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              Invalid Alerts
+              False Positive Rate
             </CardTitle>
           </CardHeader>
           <CardContent>
@@ -44,6 +35,23 @@ export function KpiDashboard({ kpis, isLoading = false }: KpiDashboardProps) {
             <Skeleton className="mt-1 h-4 w-32 rounded-none" />
           </CardContent>
         </Card>
+        <Card className="rounded-none">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Uptime Ratio</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Skeleton className="h-7 w-20 rounded-none" />
+            <Skeleton className="mt-1 h-4 w-32 rounded-none" />
+          </CardContent>
+        </Card>
+        <Card className="rounded-none">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">Verdict</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Skeleton className="h-7 w-20 rounded-none" />
+          </CardContent>
+        </Card>
       </div>
     );
   }
@@ -58,29 +66,35 @@ export function KpiDashboard({ kpis, isLoading = false }: KpiDashboardProps) {
     );
   }
 
-  const coverageColor =
-    kpis.errorCoverageRatio > 80
-      ? "text-green-500"
-      : kpis.errorCoverageRatio > 50
-        ? "text-yellow-500"
-        : "text-destructive";
+  const alertCoverageRatio = kpis.errorCoverageRatio;
+  const falsePositiveRate = kpis.invalidAlertRatio;
+  const MONTHS_MS = 30 * 24 * 60 * 60 * 1000 * 3; // 3 months
+  const uptimeRatio = ((MONTHS_MS - kpis.overallDowntimeMs) / MONTHS_MS) * 100;
 
-  const invalidColor =
-    kpis.invalidAlertRatio < 10
-      ? "text-green-500"
-      : kpis.invalidAlertRatio < 25
-        ? "text-yellow-500"
-        : "text-destructive";
+  const coveragePassed =
+    alertCoverageRatio >= KPI_THRESHOLDS.alertCoverageRatio;
+  const fpPassed = falsePositiveRate <= KPI_THRESHOLDS.falsePositiveRate;
+  const uptimePassed = uptimeRatio >= KPI_THRESHOLDS.uptimeRatio;
+  const isEffective = coveragePassed && fpPassed && uptimePassed;
+
+  const coverageColor = coveragePassed ? "text-green-500" : "text-destructive";
+  const fpColor = fpPassed ? "text-green-500" : "text-destructive";
+  const uptimeColor = uptimePassed ? "text-green-500" : "text-destructive";
 
   return (
-    <div className="grid gap-4 md:grid-cols-3">
+    <div className="grid gap-4 md:grid-cols-4">
       <Card className="rounded-none">
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Error Coverage</CardTitle>
+          <CardTitle className="text-sm font-medium">
+            Alert Coverage Ratio
+          </CardTitle>
+          <span className="text-[10px] text-muted-foreground">
+            ≥{KPI_THRESHOLDS.alertCoverageRatio}%
+          </span>
         </CardHeader>
         <CardContent>
           <div className={cn("text-2xl font-bold", coverageColor)}>
-            {kpis.errorCoverageRatio.toFixed(1)}%
+            {alertCoverageRatio.toFixed(1)}%
           </div>
           <p className="text-xs text-muted-foreground">
             {kpis.coveredIncidents} of {kpis.totalIncidents} incidents
@@ -90,28 +104,64 @@ export function KpiDashboard({ kpis, isLoading = false }: KpiDashboardProps) {
 
       <Card className="rounded-none">
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Total Downtime</CardTitle>
+          <CardTitle className="text-sm font-medium">
+            False Positive Rate
+          </CardTitle>
+          <span className="text-[10px] text-muted-foreground">
+            ≤{KPI_THRESHOLDS.falsePositiveRate}%
+          </span>
         </CardHeader>
         <CardContent>
-          <div className="text-2xl font-bold">
-            {kpis.overallDowntimeFormatted}
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card className="rounded-none">
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Invalid Alerts</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className={cn("text-2xl font-bold", invalidColor)}>
-            {kpis.invalidAlertRatio.toFixed(1)}%
+          <div className={cn("text-2xl font-bold", fpColor)}>
+            {falsePositiveRate.toFixed(1)}%
           </div>
           <p className="text-xs text-muted-foreground">
             {kpis.invalidAlerts} of {kpis.totalFiringAlerts} alerts
           </p>
         </CardContent>
       </Card>
+
+      <Card className="rounded-none">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Uptime Ratio</CardTitle>
+          <span className="text-[10px] text-muted-foreground">
+            ≥{KPI_THRESHOLDS.uptimeRatio}%
+          </span>
+        </CardHeader>
+        <CardContent>
+          <div className={cn("text-2xl font-bold", uptimeColor)}>
+            {uptimeRatio.toFixed(2)}%
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Downtime: {kpis.overallDowntimeFormatted}
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card
+        className={cn(
+          "rounded-none border-2",
+          isEffective ? "border-green-500/50" : "border-destructive/50",
+        )}
+      >
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Verdict</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div
+            className={cn(
+              "text-xl font-bold",
+              isEffective ? "text-green-500" : "text-destructive",
+            )}
+          >
+            {isEffective ? "EFFECTIVE" : "NOT EFFECTIVE"}
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {[coveragePassed, fpPassed, uptimePassed].filter(Boolean).length}/3
+            KPIs passed
+          </p>
+        </CardContent>
+      </Card>
     </div>
   );
 }
diff --git a/apps/web/src/lib/types/alerts.ts b/apps/web/src/lib/types/alerts.ts
index 0c923ab..64776ad 100644
--- a/apps/web/src/lib/types/alerts.ts
+++ b/apps/web/src/lib/types/alerts.ts
@@ -33,6 +33,19 @@ export interface KpiMetrics {
   invalidAlerts: number;
 }
 
+export const KPI_THRESHOLDS = {
+  alertCoverageRatio: 99,
+  falsePositiveRate: 20,
+  uptimeRatio: 99.9,
+} as const;
+
+export interface EffectivenessVerdict {
+  isEffective: boolean;
+  alertCoveragePassed: boolean;
+  falsePositivePassed: boolean;
+  uptimePassed: boolean;
+}
+
 export interface MonitorState {
   alerts: ProcessedAlert[];
   incidents: Incident[];
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 9aeaaa3..9e335bb 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -2,6 +2,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { ArrowDownWideNarrow, FileUp, Filter, Search } from "lucide-react";
 import * as React from "react";
 
+import { ModeToggle } from "@/components/mode-toggle";
 import { AlertList } from "@/components/monitor/alert-list";
 import { IncidentManager } from "@/components/monitor/incident-manager";
 import { KpiDashboard } from "@/components/monitor/kpi-dashboard";
@@ -218,15 +219,15 @@ function MonitorPage() {
     );
     const updatedIncidents = incidentId
       ? incidents.map((i) =>
-          i.id === incidentId
-            ? {
-                ...i,
-                attachedAlertIds: i.attachedAlertIds.filter(
-                  (aid) => aid !== alertId,
-                ),
-              }
-            : i,
-        )
+        i.id === incidentId
+          ? {
+            ...i,
+            attachedAlertIds: i.attachedAlertIds.filter(
+              (aid) => aid !== alertId,
+            ),
+          }
+          : i,
+      )
       : incidents;
 
     setAlerts(updatedAlerts);
@@ -249,9 +250,10 @@ function MonitorPage() {
         onChange={handleFileInputChange}
         className="hidden"
       />
-      <header className="flex shrink-0 items-center justify-between border-b px-4 py-3">
-        <h1 className="text-sm font-semibold">Alert Monitor</h1>
-        <Button onClick={handleLoadFile} disabled={isLoading} size="sm">
+      <header className="flex shrink-0 items-center border-b px-4 py-3">
+        <h1 className="text-sm font-semibold mr-auto">Alert Monitor</h1>
+        <ModeToggle />
+        <Button className="ml-2" onClick={handleLoadFile} disabled={isLoading}>
           <FileUp className="mr-2 size-4" />
           {isLoading ? "Loading..." : "Load Alerts JSON"}
         </Button>