@agent-native/core 0.90.11 → 0.91.1

package/corpus/templates/analytics/app/pages/monitoring/uptime/status-pages/StatusPagesView.tsx

@@ -0,0 +1,355 @@
+/**
+ * Status-pages config sub-view. Query-param driven, consistent with the monitor
+ * sub-views:
+ *   - index:  ?view=uptime&statuspage=list
+ *   - create: ?view=uptime&statuspage=new
+ *   - edit:   ?view=uptime&statuspage=<id>
+ * The index lists existing pages (with copy-link / open / edit / delete); the
+ * editor (StatusPageEditor) handles create + edit with a live preview.
+ */
+import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import {
+  IconArrowLeft,
+  IconCheck,
+  IconCopy,
+  IconExternalLink,
+  IconLink,
+  IconPencil,
+  IconPlus,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { useSearchParams } from "react-router";
+import { toast } from "sonner";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+import { fmt, useStatusPagesT } from "./i18n";
+import { StatusPageEditor } from "./StatusPageEditor";
+import type { StatusPage } from "./types";
+
+function statusPageOrigin(): string {
+  if (typeof window === "undefined") return "";
+  return window.location.origin;
+}
+
+export function StatusPagesView() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const param = searchParams.get("statuspage");
+
+  const updateParams = (
+    mutate: (params: URLSearchParams) => void,
+    options?: { replace?: boolean },
+  ) => {
+    setSearchParams(
+      (prev) => {
+        const params = new URLSearchParams(prev);
+        mutate(params);
+        return params;
+      },
+      { replace: options?.replace ?? false },
+    );
+  };
+
+  const goToMonitors = () =>
+    updateParams((params) => {
+      params.delete("statuspage");
+      params.delete("monitor");
+      params.delete("edit");
+    });
+  const goToIndex = (options?: { replace?: boolean }) =>
+    updateParams((params) => params.set("statuspage", "list"), options);
+  const goToNew = () =>
+    updateParams((params) => params.set("statuspage", "new"));
+  const goToEdit = (id: string, options?: { replace?: boolean }) =>
+    updateParams((params) => params.set("statuspage", id), options);
+
+  if (param && param !== "list") {
+    return (
+      <StatusPageEditor
+        pageId={param === "new" ? null : param}
+        onBack={goToIndex}
+        onCreated={(id) => goToEdit(id, { replace: true })}
+      />
+    );
+  }
+
+  return (
+    <StatusPagesIndex onBack={goToMonitors} onNew={goToNew} onEdit={goToEdit} />
+  );
+}
+
+function StatusPagesIndex({
+  onBack,
+  onNew,
+  onEdit,
+}: {
+  onBack: () => void;
+  onNew: () => void;
+  onEdit: (id: string) => void;
+}) {
+  const t = useStatusPagesT();
+  const { data, isLoading } = useActionQuery<StatusPage[]>(
+    "list-status-pages",
+    undefined,
+    { staleTime: 15_000 },
+  );
+  const deletePage = useActionMutation<{ id: string }, { id: string }>(
+    "delete-status-page",
+    { method: "DELETE" },
+  );
+  const [toDelete, setToDelete] = useState<StatusPage | null>(null);
+  const pages = Array.isArray(data) ? data : [];
+
+  const confirmDelete = async () => {
+    if (!toDelete) return;
+    const target = toDelete;
+    setToDelete(null);
+    try {
+      await deletePage.mutateAsync({ id: target.id });
+      toast.success(t.deletedToast);
+    } catch (err) {
+      toast.error(
+        fmt(t.deleteFailed, {
+          message: err instanceof Error ? err.message : String(err),
+        }),
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-5">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="-ms-2 w-fit text-muted-foreground"
+        onClick={onBack}
+      >
+        <IconArrowLeft className="size-3.5" />
+        {t.back}
+      </Button>
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="min-w-0">
+          <h2 className="text-lg font-semibold">{t.title}</h2>
+          <p className="max-w-xl text-sm text-muted-foreground">{t.subtitle}</p>
+        </div>
+        <Button size="sm" onClick={onNew} className="shrink-0">
+          <IconPlus className="size-3.5" />
+          {t.newPage}
+        </Button>
+      </div>
+
+      {isLoading ? (
+        <div className="space-y-2">
+          {[0, 1].map((i) => (
+            <Skeleton key={i} className="h-16 w-full rounded-lg" />
+          ))}
+        </div>
+      ) : pages.length === 0 ? (
+        <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">
+            <IconLink 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={onNew}>
+            <IconPlus className="size-3.5" />
+            {t.emptyCta}
+          </Button>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {pages.map((page) => (
+            <StatusPageRow
+              key={page.id}
+              page={page}
+              onEdit={() => onEdit(page.id)}
+              onDelete={() => setToDelete(page)}
+            />
+          ))}
+        </div>
+      )}
+
+      <AlertDialog
+        open={!!toDelete}
+        onOpenChange={(open) => !open && setToDelete(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t.deleteTitle}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {fmt(t.deleteDescription, {
+                title: toDelete?.title ?? "",
+                slug: toDelete?.slug ?? "",
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t.cancel}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={confirmDelete}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {t.deleteConfirm}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
+
+function StatusPageRow({
+  page,
+  onEdit,
+  onDelete,
+}: {
+  page: StatusPage;
+  onEdit: () => void;
+  onDelete: () => void;
+}) {
+  const t = useStatusPagesT();
+  const [copied, setCopied] = useState(false);
+  const publicUrl = `${statusPageOrigin()}/status/${page.slug}`;
+  const count = page.monitors.length;
+
+  const copyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(publicUrl);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      toast.error(t.copyFailed);
+    }
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onEdit}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onEdit();
+        }
+      }}
+      className="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"
+    >
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span className="truncate text-sm font-medium">{page.title}</span>
+          <Badge
+            variant={page.published ? "default" : "secondary"}
+            className="shrink-0 text-[10px]"
+          >
+            {page.published ? t.publishedBadge : t.draftBadge}
+          </Badge>
+        </div>
+        <div className="truncate text-xs text-muted-foreground">
+          /status/{page.slug}
+          <span className="text-muted-foreground/70">
+            {" · "}
+            {count === 0
+              ? t.noMonitorsOnPage
+              : fmt(count === 1 ? t.oneMonitor : t.monitorsCount, { count })}
+          </span>
+        </div>
+      </div>
+
+      <div
+        className="flex shrink-0 items-center gap-1"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8 text-muted-foreground"
+              onClick={copyLink}
+              aria-label={t.copyLink}
+            >
+              {copied ? (
+                <IconCheck className="size-3.5" />
+              ) : (
+                <IconCopy className="size-3.5" />
+              )}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{copied ? t.copied : t.copyLink}</TooltipContent>
+        </Tooltip>
+        {page.published ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-8 text-muted-foreground"
+                asChild
+              >
+                <a
+                  href={publicUrl}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                  aria-label={t.openPage}
+                >
+                  <IconExternalLink className="size-3.5" />
+                </a>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t.openPage}</TooltipContent>
+          </Tooltip>
+        ) : null}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8 text-muted-foreground"
+              onClick={onEdit}
+              aria-label={t.edit}
+            >
+              <IconPencil className="size-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{t.edit}</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8 text-muted-foreground hover:text-destructive"
+              onClick={onDelete}
+              aria-label={t.delete}
+            >
+              <IconTrash className="size-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{t.delete}</TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,106 @@
+/**
+ * Self-contained i18n for the status-pages config sub-view. English is the
+ * source of truth; other locales fall back per key. Reuses the uptime feature's
+ * `fmt` interpolation helper.
+ */
+import { useLocale } from "@agent-native/core/client";
+
+export { fmt } from "../i18n";
+
+const MESSAGES = {
+  "en-US": {
+    // Entry / index
+    title: "Status pages", // i18n-ignore feature-local i18n source
+    subtitle: // i18n-ignore feature-local i18n source
+      "Publish a public page that shows the live health of the monitors you choose.",
+    back: "Back to monitors",
+    backToPages: "Back to status pages",
+    newPage: "New status page",
+    emptyTitle: "No status pages yet", // i18n-ignore feature-local i18n source
+    emptyDescription: // i18n-ignore feature-local i18n source
+      "Create a public status page to share the live health of your monitors with customers or teammates.",
+    emptyCta: "Create a status page",
+    monitorsCount: "{count} monitors",
+    oneMonitor: "1 monitor",
+    noMonitorsOnPage: "No monitors yet",
+    publishedBadge: "Published",
+    draftBadge: "Draft",
+    copyLink: "Copy link",
+    copied: "Copied",
+    openPage: "Open",
+    edit: "Edit",
+    delete: "Delete",
+    // Delete dialog
+    deleteTitle: "Delete status page?",
+    deleteDescription:
+      "This permanently deletes “{title}” and its public link at /status/{slug}.",
+    deleteConfirm: "Delete",
+    cancel: "Cancel",
+    // Editor
+    createTitle: "New status page",
+    editTitle: "Edit status page",
+    createSubtitle:
+      "Give it a title and choose which monitors to show. Publish when you're ready to share.",
+    editSubtitle: "Update what this page shows and who can see it.",
+    save: "Save status page",
+    saving: "Saving…",
+    sectionBasics: "Basics",
+    fieldTitle: "Title",
+    fieldTitlePlaceholder: "Acme Status",
+    fieldSlug: "Public URL",
+    fieldSlugHint: "Lowercase letters, numbers, and dashes.",
+    fieldDescription: "Description",
+    fieldDescriptionPlaceholder: "Live status of Acme's services.",
+    fieldPublished: "Published",
+    fieldPublishedHint: "When on, anyone with the link can view this page.",
+    linkLiveHint: "Live at {url} once published.",
+    linkLive: "Live at {url}",
+    sectionLayout: "Layout",
+    fieldShowUptimeBars: "Uptime bars",
+    fieldShowOverallUptime: "Overall uptime",
+    fieldShowResponseTime: "Response time",
+    fieldDensity: "Density",
+    densityComfortable: "Comfortable",
+    densityCompact: "Compact",
+    fieldAlignment: "Alignment",
+    alignmentLeft: "Left",
+    alignmentCenter: "Center",
+    sectionMonitors: "Monitors",
+    sectionMonitorsHint: "Choose which monitors appear and in what order.",
+    addMonitor: "Add a monitor",
+    addMonitorPlaceholder: "Add a monitor…", // i18n-ignore feature-local i18n source
+    noMonitorsSelected: "No monitors added yet.",
+    noMonitorsAvailable: "All your monitors are already on this page.",
+    createMonitorsFirst: "Create a monitor first, then add it here.",
+    displayNamePlaceholder: "Display name (optional)",
+    showUrl: "Show URL",
+    moveUp: "Move up",
+    moveDown: "Move down",
+    remove: "Remove",
+    // Preview
+    sectionPreview: "Live preview",
+    previewHint: "Reflects your last save.",
+    previewSaveFirst: "Save the page to see a live preview.",
+    previewDraftNote:
+      "This page is a draft — publish it to make the link live.",
+    // Validation / toasts
+    titleRequired: "Give the page a title.",
+    slugInvalid: "Use lowercase letters, numbers, and dashes.",
+    savedToast: "Status page saved.",
+    saveFailed: "Could not save status page: {message}",
+    deletedToast: "Status page deleted.",
+    deleteFailed: "Could not delete status page: {message}",
+    copyFailed: "Could not copy the link.",
+  },
+} as const;
+
+type StatusPagesMessages = (typeof MESSAGES)["en-US"];
+
+export function useStatusPagesT(): StatusPagesMessages {
+  const { locale } = useLocale();
+  return {
+    ...MESSAGES["en-US"],
+    ...((MESSAGES as Record<string, Partial<StatusPagesMessages>>)[locale] ??
+      {}),
+  };
+}

package/corpus/templates/analytics/app/pages/monitoring/uptime/status-pages/slug.ts

@@ -0,0 +1,24 @@
+/**
+ * Client-side slug helpers for status pages. Mirror the server `normalizeSlug`
+ * (server/lib/status-pages.ts) so the in-app editor derives + validates the
+ * public `/status/<slug>` value the same way the server will store it. Pure so
+ * they are trivially unit-tested.
+ */
+export const MAX_SLUG_LENGTH = 64;
+
+/** Lowercase, `[a-z0-9-]`, collapsed/trimmed dashes, capped at 64 chars. */
+export function slugify(raw: string): string {
+  return String(raw ?? "")
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, MAX_SLUG_LENGTH)
+    .replace(/^-+|-+$/g, "");
+}
+
+/** A slug is valid when it is non-empty, `[a-z0-9-]`, no leading/trailing/double dashes. */
+export function isValidSlug(slug: string): boolean {
+  if (!slug || slug.length > MAX_SLUG_LENGTH) return false;
+  return /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(slug);
+}

package/corpus/templates/analytics/app/pages/monitoring/uptime/status-pages/types.ts

@@ -0,0 +1,20 @@
+/**
+ * Client-facing status-page contract. We re-export the server library's
+ * type-only shapes (erased at build time) from a single place so the editor and
+ * list components share one source of truth with the actions they call.
+ */
+export type {
+  PublicStatusPage,
+  StatusPage,
+  StatusPageAlignment,
+  StatusPageDensity,
+  StatusPageInput,
+  StatusPageMonitorInput,
+  StatusPageMonitorRef,
+} from "../../../../../server/lib/status-pages";
+
+/** Response shape of the `get-status-page` action: config + live preview view. */
+export interface StatusPagePreview {
+  page: import("../../../../../server/lib/status-pages").StatusPage;
+  view: import("../../../../../server/lib/status-pages").PublicStatusPage;
+}

package/corpus/templates/analytics/app/pages/monitoring/uptime/status-summary.ts

@@ -0,0 +1,87 @@
+/**
+ * Pure aggregate math for the monitor list "current status" overview. Kept free
+ * of React / i18n imports so it can be unit-tested in isolation and reused by
+ * the list summary without pulling in the whole panel.
+ */
+import type { MonitorStatus } from "./types";
+
+export type MonitorHealthTone = "up" | "down" | "degraded" | "neutral";
+
+/** Coarse tone for a monitor's current status (mirrors utils.statusTone). */
+export function statusToneOf(status: MonitorStatus | null): MonitorHealthTone {
+  switch (status) {
+    case "up":
+      return "up";
+    case "down":
+    case "error":
+      return "down";
+    case "degraded":
+      return "degraded";
+    default:
+      return "neutral";
+  }
+}
+
+export interface MonitorStatusSummary {
+  total: number;
+  up: number;
+  down: number;
+  degraded: number;
+  /** Monitors with no conclusive status yet (pending / running / unknown). */
+  pending: number;
+  /** Mean of available 24h uptime across monitors, or null when none report. */
+  overallUptimePct: number | null;
+  /** Monitors currently failing — each has an open incident by the incident model. */
+  openIncidents: number;
+  /** Worst tone across the set, for the headline badge. */
+  overall: MonitorHealthTone;
+}
+
+interface MonitorLike {
+  id: string;
+  lastStatus: MonitorStatus | null;
+}
+
+interface StatsLike {
+  windows: { uptime24h: number | null };
+}
+
+/**
+ * Roll a set of monitors (plus their optional stats) into the "current status"
+ * summary shown atop the list: counts by health, an overall uptime average, and
+ * the open-incident count (monitors currently down or degraded).
+ */
+export function summarizeMonitors(
+  monitors: MonitorLike[],
+  statsById?: Map<string, StatsLike>,
+): MonitorStatusSummary {
+  let up = 0;
+  let down = 0;
+  let degraded = 0;
+  let pending = 0;
+  const pcts: number[] = [];
+  for (const monitor of monitors) {
+    const tone = statusToneOf(monitor.lastStatus);
+    if (tone === "up") up++;
+    else if (tone === "down") down++;
+    else if (tone === "degraded") degraded++;
+    else pending++;
+    const pct = statsById?.get(monitor.id)?.windows.uptime24h;
+    if (pct != null && Number.isFinite(pct)) pcts.push(pct);
+  }
+  const overallUptimePct = pcts.length
+    ? pcts.reduce((sum, value) => sum + value, 0) / pcts.length
+    : null;
+  const overall: MonitorHealthTone =
+    down > 0 ? "down" : degraded > 0 ? "degraded" : up > 0 ? "up" : "neutral";
+  return {
+    total: monitors.length,
+    up,
+    down,
+    degraded,
+    pending,
+    overallUptimePct,
+    openIncidents: down + degraded,
+    overall,
+  };
+}