@agent-native/core 0.90.10 → 0.91.0

package/corpus/templates/analytics/app/pages/monitoring/uptime/MonitorList.tsx

@@ -0,0 +1,311 @@
+/**
+ * Monitor list: a "current status" overview summary on top, then one row per
+ * monitor with status, a compact colorful 90-day uptime bar, latency, uptime,
+ * last-checked, an enable/disable switch, and a run-now action. Rows select into
+ * the detail view. Includes loading + empty states.
+ */
+import {
+  IconChevronRight,
+  IconLoader2,
+  IconPlayerPlay,
+  IconPlus,
+  IconWorldPin,
+} from "@tabler/icons-react";
+
+import { UptimeTimelineBars } from "@/components/monitoring";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+import { fmt, useUptimeT } from "./i18n";
+import {
+  summarizeMonitors,
+  type MonitorHealthTone,
+  type MonitorStatusSummary,
+} from "./status-summary";
+import type { MonitorStats, MonitorSummary } from "./types";
+import {
+  formatLatency,
+  formatRelativeTime,
+  formatUptime,
+  hostFromUrl,
+  statusLabel,
+  statusTone,
+  toneDotClass,
+  toneTextClass,
+} from "./utils";
+
+export function MonitorList({
+  monitors,
+  statsById,
+  isLoading,
+  hasSearch,
+  runningId,
+  onSelect,
+  onToggle,
+  onRunCheck,
+  onCreate,
+}: {
+  monitors: MonitorSummary[];
+  statsById?: Map<string, MonitorStats>;
+  isLoading: boolean;
+  hasSearch: boolean;
+  runningId: string | null;
+  onSelect: (monitor: MonitorSummary) => void;
+  onToggle: (monitor: MonitorSummary, enabled: boolean) => void;
+  onRunCheck: (monitor: MonitorSummary) => void;
+  onCreate: () => void;
+}) {
+  const t = useUptimeT();
+
+  if (isLoading) {
+    return (
+      <div className="space-y-2">
+        {[0, 1, 2].map((i) => (
+          <Skeleton key={i} className="h-16 w-full rounded-lg" />
+        ))}
+      </div>
+    );
+  }
+
+  if (monitors.length === 0) {
+    if (hasSearch) {
+      return (
+        <div className="rounded-lg border border-dashed px-4 py-10 text-center text-sm text-muted-foreground">
+          {t.noSearchResults}
+        </div>
+      );
+    }
+    return (
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed px-6 py-16 text-center">
+        <div className="mb-4 flex size-14 items-center justify-center rounded-2xl bg-primary/10">
+          <IconWorldPin className="size-7 text-primary" />
+        </div>
+        <h3 className="text-lg font-semibold">{t.emptyTitle}</h3>
+        <p className="mx-auto mt-1.5 max-w-md text-sm text-muted-foreground">
+          {t.emptyDescription}
+        </p>
+        <Button className="mt-5" size="sm" onClick={onCreate}>
+          <IconPlus className="size-3.5" />
+          {t.emptyCta}
+        </Button>
+      </div>
+    );
+  }
+
+  const summary = summarizeMonitors(monitors, statsById);
+
+  return (
+    <div className="space-y-3">
+      <StatusOverview summary={summary} />
+
+      <div className="space-y-2">
+        {monitors.map((monitor) => {
+          const tone = statusTone(monitor.lastStatus);
+          const lastChecked = formatRelativeTime(monitor.lastCheckedAt);
+          const isRunning =
+            runningId === monitor.id || monitor.lastStatus === "running";
+          const timeline = statsById?.get(monitor.id)?.timeline ?? [];
+          return (
+            <div
+              key={monitor.id}
+              role="button"
+              tabIndex={0}
+              onClick={() => onSelect(monitor)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onSelect(monitor);
+                }
+              }}
+              className={cn(
+                "group flex cursor-pointer items-center gap-4 rounded-lg border border-border/50 bg-card px-4 py-3 transition-colors hover:border-border hover:bg-muted/30",
+                !monitor.enabled && "opacity-60",
+              )}
+            >
+              {/* Status + identity */}
+              <div className="flex min-w-0 flex-1 items-center gap-3">
+                <span
+                  className={cn(
+                    "size-2.5 shrink-0 rounded-full",
+                    toneDotClass(tone),
+                    isRunning && "animate-pulse",
+                  )}
+                />
+                <div className="min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="truncate text-sm font-medium">
+                      {monitor.name}
+                    </span>
+                    <span
+                      className={cn(
+                        "shrink-0 text-[11px] font-medium",
+                        toneTextClass(tone),
+                      )}
+                    >
+                      {statusLabel(monitor.lastStatus, t)}
+                    </span>
+                  </div>
+                  <div className="truncate text-xs text-muted-foreground">
+                    {hostFromUrl(monitor.url)}
+                    {lastChecked ? (
+                      <span className="text-muted-foreground/70">
+                        {" · "}
+                        {fmt(t.lastChecked, { time: lastChecked })}
+                      </span>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+
+              {/* Compact 90-day uptime bar */}
+              <div className="hidden w-40 shrink-0 lg:block">
+                <UptimeTimelineBars
+                  buckets={timeline}
+                  heightClassName="h-5"
+                  barRadiusClassName="rounded-[1px]"
+                  hideWhenEmpty
+                  ariaLabel={fmt(t.uptimeTimelineAria, { name: monitor.name })}
+                />
+              </div>
+
+              {/* Metrics */}
+              <div className="hidden shrink-0 items-center gap-6 sm:flex">
+                <Metric
+                  label={t.latency}
+                  value={formatLatency(monitor.lastLatencyMs)}
+                />
+                <Metric
+                  label={t.uptime24h}
+                  value={formatUptime(monitor.uptime24h)}
+                />
+                <Metric
+                  label={t.uptime7d}
+                  value={formatUptime(monitor.uptime7d)}
+                />
+              </div>
+
+              {/* Actions */}
+              <div
+                className="flex shrink-0 items-center gap-1.5"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="size-8 text-muted-foreground"
+                      onClick={() => onRunCheck(monitor)}
+                      disabled={isRunning}
+                      aria-label={t.checkNow}
+                    >
+                      {isRunning ? (
+                        <IconLoader2 className="size-3.5 animate-spin" />
+                      ) : (
+                        <IconPlayerPlay className="size-3.5" />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>{t.checkNow}</TooltipContent>
+                </Tooltip>
+                <Switch
+                  checked={monitor.enabled}
+                  onCheckedChange={(enabled) => onToggle(monitor, enabled)}
+                  aria-label={fmt(t.enableLabel, { name: monitor.name })}
+                />
+                <IconChevronRight className="size-4 text-muted-foreground/40 group-hover:text-muted-foreground" />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const OVERVIEW_DOT: Record<MonitorHealthTone, string> = {
+  up: "bg-emerald-500",
+  down: "bg-red-500",
+  degraded: "bg-amber-500",
+  neutral: "bg-muted-foreground/40",
+};
+
+function StatusOverview({ summary }: { summary: MonitorStatusSummary }) {
+  const t = useUptimeT();
+  const headline =
+    summary.total === 0
+      ? t.overviewNone
+      : summary.overall === "up"
+        ? t.overviewOperational
+        : summary.overall === "degraded"
+          ? t.overviewDegraded
+          : summary.overall === "down"
+            ? t.overviewDown
+            : t.overviewPending;
+
+  return (
+    <div className="flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border border-border/50 bg-card px-4 py-3">
+      <div className="flex min-w-0 items-center gap-2">
+        <span
+          className={cn(
+            "size-2.5 shrink-0 rounded-full",
+            OVERVIEW_DOT[summary.overall],
+            summary.overall === "down" && "animate-pulse",
+          )}
+        />
+        <span className="truncate text-sm font-medium">{headline}</span>
+        <span className="shrink-0 text-xs text-muted-foreground">
+          {fmt(
+            summary.total === 1 ? t.overviewOneMonitor : t.overviewMonitors,
+            { count: summary.total },
+          )}
+        </span>
+      </div>
+
+      <div className="ml-auto flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+        <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+          <span className="size-2 rounded-full bg-emerald-500" />
+          {fmt(t.upCount, { count: summary.up })}
+        </span>
+        <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+          <span className="size-2 rounded-full bg-amber-500" />
+          {fmt(t.degradedCount, { count: summary.degraded })}
+        </span>
+        <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+          <span className="size-2 rounded-full bg-red-500" />
+          {fmt(t.downCount, { count: summary.down })}
+        </span>
+        {summary.overallUptimePct != null ? (
+          <span className="tabular-nums text-muted-foreground">
+            {fmt(t.overviewUptime24h, {
+              pct: formatUptime(summary.overallUptimePct),
+            })}
+          </span>
+        ) : null}
+        {summary.openIncidents > 0 ? (
+          <span className="inline-flex items-center gap-1 font-medium text-red-500">
+            {fmt(t.overviewOpenIncidents, { count: summary.openIncidents })}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function Metric({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex flex-col items-end">
+      <span className="text-sm font-medium tabular-nums">{value}</span>
+      <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
+        {label}
+      </span>
+    </div>
+  );
+}

package/corpus/templates/analytics/app/pages/monitoring/uptime/i18n.ts

@@ -0,0 +1,235 @@
+/**
+ * Self-contained i18n for the uptime monitoring feature. English is the source
+ * of truth; other locales fall back to English per key. Do NOT move these into
+ * the shared app i18n — this feature owns its copy.
+ */
+import { useLocale } from "@agent-native/core/client";
+
+const MESSAGES = {
+  "en-US": {
+    // Toolbar / list
+    searchPlaceholder: "Search monitors…", // i18n-ignore feature-local i18n source
+    addMonitor: "Add monitor",
+    refresh: "Refresh",
+    emptyTitle: "No monitors yet", // i18n-ignore feature-local i18n source
+    emptyDescription: // i18n-ignore feature-local i18n source
+      "Create a monitor to ping a URL on a schedule and get alerted when it goes down, is too slow, or returns the wrong content.", // i18n-ignore feature-local i18n source
+    emptyCta: "Create your first monitor",
+    noSearchResults: "No monitors match your search.",
+    upCount: "{count} up",
+    downCount: "{count} down",
+    degradedCount: "{count} degraded",
+    checkNow: "Check now",
+    lastChecked: "Checked {time}",
+    neverChecked: "Never checked",
+    latency: "Latency",
+    uptime24h: "24h",
+    uptime7d: "7d",
+    uptime30d: "30d",
+    uptime90d: "90d",
+    enableLabel: "Toggle {name}",
+    ms: "{value} ms",
+    // List "current status" overview
+    overviewOperational: "All systems operational",
+    overviewDegraded: "Some systems degraded",
+    overviewDown: "System issues detected",
+    overviewPending: "Awaiting first checks",
+    overviewNone: "No monitors yet",
+    overviewMonitors: "{count} monitors",
+    overviewOneMonitor: "1 monitor",
+    overviewUptime24h: "{pct} uptime · 24h",
+    overviewOpenIncidents: "{count} open",
+    statusPagesButton: "Status pages",
+    // Status labels
+    statusUp: "Up",
+    statusDown: "Down",
+    statusDegraded: "Degraded",
+    statusError: "Error",
+    statusRunning: "Checking",
+    statusUnknown: "Pending",
+    // Detail
+    back: "Back to monitors",
+    edit: "Edit",
+    delete: "Delete",
+    open: "Open URL",
+    runningCheck: "Running check…",
+    detailOverview: "Overview",
+    currentStatus: "Current status",
+    responseTime: "Response time",
+    responseTimeSubtitle: "Average latency with min/max band",
+    uptimeTimeline: "Uptime",
+    uptimeTimelineSubtitle: "Most recent checks (newest on the right)",
+    uptimeTimeline90d: "90-day uptime",
+    uptimeTimelineDaily: "One bar per day",
+    uptimeTimelineAria: "{name} uptime over the last 90 days",
+    timelineNinetyDaysAgo: "90 days ago",
+    timelineToday: "Today",
+    statIncidents: "Incidents",
+    statLast90d: "Last 90 days",
+    statMtbf: "MTBF",
+    statMtbfHint: "Mean time between failures",
+    recentChecks: "Recent checks",
+    incidents: "Incidents",
+    noIncidents: "No incidents recorded. ",
+    noChecks: "No checks recorded yet. Run a check to get started.",
+    ongoing: "Ongoing",
+    resolved: "Resolved",
+    duration: "Duration",
+    cause: "Cause",
+    started: "Started",
+    checksFailedLabel: "{count} failed checks",
+    configTitle: "Check configuration",
+    configInterval: "Interval",
+    configTimeout: "Timeout",
+    configMethod: "Method",
+    configExpected: "Expected status",
+    configAssertions: "Assertions",
+    configRedirects: "Follow redirects",
+    configChannels: "Alert channels",
+    configSeverity: "Severity",
+    configCooldown: "Cooldown",
+    yes: "Yes",
+    no: "No",
+    noAssertions: "None",
+    // Result table
+    colTime: "Time",
+    colStatus: "Status",
+    colCode: "Code",
+    colLatency: "Latency",
+    colDetails: "Details",
+    ok: "OK",
+    // Assertion / matcher summaries
+    matcherClass: "{classes} responses",
+    matcherList: "Status in {codes}",
+    matcherRange: "Status {min}–{max}",
+    assertBodyContains: "Body contains “{value}”",
+    assertBodyAbsent: "Body must not contain “{value}”",
+    assertHeaderContains: "Header {header} contains “{value}”",
+    assertHeaderEquals: "Header {header} equals “{value}”",
+    assertMaxLatency: "Response under {value} ms",
+    // Form page
+    formCreateTitle: "New monitor",
+    formEditTitle: "Edit monitor",
+    formCreateSubtitle:
+      "Paste a URL to get started — everything else has smart defaults you can tweak.",
+    formEditSubtitle: "Adjust how this monitor checks and who it alerts.",
+    sectionResponseChecks: "Response checks",
+    sectionResponseChecksHint:
+      "Choose which responses count as healthy and add body, header, or latency assertions.",
+    sectionAlerting: "Alerting",
+    sectionAlertingHint: "Pick the severity and where alerts are delivered.",
+    sectionAdvanced: "Advanced",
+    sectionAdvancedHint:
+      "Request method, timeout, cooldown, redirects, and pause.",
+    assertionsCountSummary: "{count} assertions",
+    oneAssertionSummary: "1 assertion",
+    noAssertionsSummary: "No assertions",
+    channelsNoneSummary: "No channels",
+    pausedBadge: "Paused",
+    fieldName: "Name",
+    fieldNamePlaceholder: "Marketing site",
+    fieldNameHint: "Optional — defaults to the site's domain.",
+    fieldUrl: "URL",
+    fieldUrlPlaceholder: "https://example.com/health",
+    fieldMethod: "Method",
+    fieldInterval: "Check interval",
+    fieldTimeout: "Timeout (seconds)",
+    fieldExpectedStatus: "Expected status",
+    matcherModeClass: "Status class",
+    matcherModeList: "Exact codes",
+    matcherModeRange: "Range",
+    classLabel2xx: "2xx Success",
+    classLabel3xx: "3xx Redirect",
+    classLabel4xx: "4xx Client error",
+    classLabel5xx: "5xx Server error",
+    fieldCodes: "Accepted codes",
+    fieldCodesPlaceholder: "200, 204",
+    fieldRangeMin: "Min",
+    fieldRangeMax: "Max",
+    fieldAssertions: "Assertions",
+    addAssertion: "Add assertion",
+    assertionType: "Type",
+    assertionValue: "Value",
+    assertionHeader: "Header",
+    removeAssertion: "Remove assertion",
+    assertionsHint:
+      "All assertions must pass. Text checks read up to the first 512 KB of the response body.",
+    typeBodyContains: "Body contains",
+    typeBodyAbsent: "Body absent",
+    typeHeaderContains: "Header contains",
+    typeHeaderEquals: "Header equals",
+    typeMaxLatency: "Max latency (ms)",
+    fieldFollowRedirects: "Follow redirects",
+    fieldFollowRedirectsHint: "Follow 3xx redirects to allowed hosts.",
+    fieldSeverity: "Alert severity",
+    severityWarning: "Warning",
+    severityCritical: "Critical",
+    fieldChannels: "Notify via",
+    channelInbox: "Inbox",
+    channelEmail: "Email",
+    channelSlack: "Slack",
+    channelWebhook: "Webhook",
+    fieldEmailRecipients: "Email recipients",
+    fieldEmailRecipientsPlaceholder: "alerts@example.com, oncall@example.com",
+    fieldCooldown: "Alert cooldown (minutes)",
+    fieldEnabled: "Enabled",
+    fieldEnabledHint: "Run this monitor on its schedule.",
+    cancel: "Cancel",
+    save: "Save monitor",
+    create: "Create monitor",
+    saving: "Saving…",
+    // Delete dialog
+    deleteTitle: "Delete monitor?",
+    deleteDescription:
+      "This permanently removes “{name}”, its check history, and incident records.",
+    deleteConfirm: "Delete",
+    // Toasts / validation
+    nameRequired: "Give the monitor a name.",
+    urlRequired: "Enter an absolute http(s) URL.",
+    urlInvalid: "Enter a valid http(s) URL (e.g. https://example.com).",
+    channelRequired: "Select at least one alert channel.",
+    classRequired: "Select at least one status class.",
+    codesRequired: "Enter at least one status code.",
+    saved: "Monitor saved.",
+    saveFailed: "Could not save monitor: {message}",
+    deleted: "Monitor deleted.",
+    deleteFailed: "Could not delete monitor: {message}",
+    checkStarted: "Running check…",
+    checkOk: "{name} is up ({latency} ms).",
+    checkDown: "{name} is {status}.",
+    checkFailed: "Check failed: {message}",
+    enabledToast: "Monitor enabled.",
+    disabledToast: "Monitor paused.",
+    intervals: {
+      "30": "Every 30 seconds",
+      "60": "Every minute",
+      "300": "Every 5 minutes",
+      "600": "Every 10 minutes",
+      "900": "Every 15 minutes",
+      "1800": "Every 30 minutes",
+      "3600": "Every hour",
+      "21600": "Every 6 hours",
+      "86400": "Daily",
+    } as Record<string, string>,
+  },
+} as const;
+
+type UptimeMessages = (typeof MESSAGES)["en-US"];
+
+export function useUptimeT(): UptimeMessages {
+  const { locale } = useLocale();
+  return {
+    ...MESSAGES["en-US"],
+    ...((MESSAGES as Record<string, Partial<UptimeMessages>>)[locale] ?? {}),
+  };
+}
+
+/** Interpolate {placeholders} in a message template. */
+export function fmt(
+  template: string,
+  vars: Record<string, string | number> = {},
+): string {
+  return template.replace(/\{(\w+)\}/g, (match, key) =>
+    key in vars ? String(vars[key]) : match,
+  );
+}