@agent-native/core 0.90.11 → 0.91.0

package/corpus/templates/analytics/app/components/monitoring/ResponseTimeChart.tsx

@@ -0,0 +1,174 @@
+/**
+ * Response-time (latency) chart over a window: an avg area with optional
+ * min/max band lines, rendered with the app's charting library (recharts) and
+ * themed with the shared chart tokens. Takes a pre-built response-time series.
+ *
+ * Reusable by the authenticated monitor detail view and the public status page.
+ */
+import { useId, useMemo } from "react";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+import {
+  chartAxisStroke,
+  chartGridStroke,
+  chartTooltipContentStyle,
+  chartTooltipCursorStroke,
+} from "@/lib/chart-theme";
+import { cn } from "@/lib/utils";
+
+import { formatBucketTime, formatLatencyMs } from "./chart-utils";
+import type { ResponseTimePoint } from "./types";
+
+export interface ResponseTimeChartProps {
+  series: ResponseTimePoint[];
+  /** Also draw min & max lines around the avg area. Default false. */
+  showMinMax?: boolean;
+  /** Tailwind height for the chart. Default `h-[200px]`. */
+  heightClassName?: string;
+  className?: string;
+  /** Message shown when the series is empty. */
+  emptyText?: string;
+}
+
+interface ChartRow {
+  label: string;
+  avg: number | null;
+  min: number | null;
+  max: number | null;
+}
+
+export function ResponseTimeChart({
+  series,
+  showMinMax = false,
+  heightClassName = "h-[200px]",
+  className,
+  emptyText = "No response-time data yet",
+}: ResponseTimeChartProps) {
+  const gradientId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const rows = useMemo<ChartRow[]>(
+    () =>
+      series.map((point) => ({
+        label: formatBucketTime(point.bucketStart),
+        avg: point.avg,
+        min: point.min,
+        max: point.max,
+      })),
+    [series],
+  );
+
+  const hasData = rows.some((row) => row.avg != null);
+
+  if (!hasData) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center rounded-md border border-dashed border-border/60 text-sm text-muted-foreground",
+          heightClassName,
+          className,
+        )}
+      >
+        {emptyText}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("w-full", heightClassName, className)}>
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart data={rows}>
+          <defs>
+            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+              <stop
+                offset="5%"
+                stopColor="var(--brand-blue)"
+                stopOpacity={0.3}
+              />
+              <stop
+                offset="95%"
+                stopColor="var(--brand-blue)"
+                stopOpacity={0}
+              />
+            </linearGradient>
+          </defs>
+          <CartesianGrid
+            strokeDasharray="3 3"
+            stroke={chartGridStroke}
+            vertical={false}
+          />
+          <XAxis
+            dataKey="label"
+            stroke={chartAxisStroke}
+            fontSize={10}
+            tickLine={false}
+            axisLine={false}
+            hide
+          />
+          <YAxis
+            stroke={chartAxisStroke}
+            fontSize={11}
+            tickLine={false}
+            axisLine={false}
+            width={48}
+            tickFormatter={(v: number) => `${Math.round(v)}ms`}
+          />
+          <Tooltip
+            cursor={{ stroke: chartTooltipCursorStroke }}
+            contentStyle={{ ...chartTooltipContentStyle, fontSize: "12px" }}
+            formatter={(value: any, name: any) => [
+              formatLatencyMs(typeof value === "number" ? value : null),
+              name,
+            ]}
+          />
+          {showMinMax ? (
+            <Line
+              type="monotone"
+              dataKey="max"
+              name="Max"
+              stroke="var(--muted-foreground)"
+              strokeWidth={1}
+              strokeOpacity={0.4}
+              strokeDasharray="2 3"
+              dot={false}
+              connectNulls
+              isAnimationActive={false}
+            />
+          ) : null}
+          <Area
+            type="monotone"
+            dataKey="avg"
+            name="Avg"
+            stroke="var(--brand-blue)"
+            strokeWidth={2}
+            fillOpacity={1}
+            fill={`url(#${gradientId})`}
+            connectNulls
+            isAnimationActive={false}
+          />
+          {showMinMax ? (
+            <Line
+              type="monotone"
+              dataKey="min"
+              name="Min"
+              stroke="var(--muted-foreground)"
+              strokeWidth={1}
+              strokeOpacity={0.4}
+              strokeDasharray="2 3"
+              dot={false}
+              connectNulls
+              isAnimationActive={false}
+            />
+          ) : null}
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/corpus/templates/analytics/app/components/monitoring/UptimeStatCards.tsx

@@ -0,0 +1,85 @@
+/**
+ * Overall uptime cards for the standard windows (24h / 7d / 30d / 90d),
+ * UptimeRobot-style. Takes a pre-computed `UptimeWindows` object.
+ *
+ * Reusable by the authenticated monitor detail view and the public status page.
+ */
+import { cn } from "@/lib/utils";
+
+import { formatUptimePct } from "./chart-utils";
+import type { UptimeWindowKey, UptimeWindows } from "./types";
+
+const DEFAULT_WINDOWS: { key: UptimeWindowKey; label: string }[] = [
+  { key: "uptime24h", label: "24 hours" },
+  { key: "uptime7d", label: "7 days" },
+  { key: "uptime30d", label: "30 days" },
+  { key: "uptime90d", label: "90 days" },
+];
+
+/** Color the percentage by health: >=99.9 green, >=95 amber, else red. */
+function uptimeToneClass(pct: number | null): string {
+  if (pct == null) return "text-muted-foreground";
+  if (pct >= 99.9) return "text-emerald-500";
+  if (pct >= 95) return "text-amber-500";
+  return "text-red-500";
+}
+
+export interface UptimeStatCardsProps {
+  windows: UptimeWindows;
+  /** Override which windows/labels render, in order. */
+  items?: { key: UptimeWindowKey; label: string }[];
+  className?: string;
+  cardClassName?: string;
+  /** Compact spacing/type for dense in-app layouts. */
+  compact?: boolean;
+}
+
+export function UptimeStatCards({
+  windows,
+  items = DEFAULT_WINDOWS,
+  className,
+  cardClassName,
+  compact = false,
+}: UptimeStatCardsProps) {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-2 gap-3 lg:grid-cols-4",
+        compact && "gap-2",
+        className,
+      )}
+    >
+      {items.map(({ key, label }) => {
+        const pct = windows[key];
+        return (
+          <div
+            key={key}
+            className={cn(
+              "flex flex-col gap-0.5 rounded-lg border border-border/50 bg-card",
+              compact ? "px-3 py-2" : "px-4 py-3",
+              cardClassName,
+            )}
+          >
+            <span
+              className={cn(
+                "uppercase tracking-wide text-muted-foreground",
+                compact ? "text-[10px]" : "text-[11px]",
+              )}
+            >
+              {label}
+            </span>
+            <span
+              className={cn(
+                "font-semibold tabular-nums",
+                compact ? "text-lg" : "text-2xl",
+                uptimeToneClass(pct),
+              )}
+            >
+              {formatUptimePct(pct)}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/corpus/templates/analytics/app/components/monitoring/UptimeTimelineBars.tsx

@@ -0,0 +1,106 @@
+/**
+ * A strip of colored uptime buckets over a window (UptimeRobot-style), one bar
+ * per pre-bucketed period: green up / red down / amber degraded / muted
+ * no-data. Each bar has a tooltip with its time range, uptime %, and downtime.
+ *
+ * Reusable by the authenticated monitor detail view and the public status page.
+ * It takes ALREADY-bucketed data (`buckets`) — it does no fetching or
+ * aggregation itself.
+ */
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+import {
+  bucketFillClass,
+  bucketStatusLabel,
+  formatRange,
+  formatUptimePct,
+} from "./chart-utils";
+import type { UptimeBucket } from "./types";
+
+export interface UptimeTimelineBarsProps {
+  buckets: UptimeBucket[];
+  /** Tailwind height for the strip. Default `h-8`. */
+  heightClassName?: string;
+  /** Rounded corners on each bar. Default `rounded-sm`. */
+  barRadiusClassName?: string;
+  className?: string;
+  /** Accessible label describing the timeline. */
+  ariaLabel?: string;
+  /** Render nothing (instead of an empty strip) when there are no buckets. */
+  hideWhenEmpty?: boolean;
+}
+
+export function UptimeTimelineBars({
+  buckets,
+  heightClassName = "h-8",
+  barRadiusClassName = "rounded-sm",
+  className,
+  ariaLabel = "Uptime timeline",
+  hideWhenEmpty = false,
+}: UptimeTimelineBarsProps) {
+  if (buckets.length === 0) {
+    if (hideWhenEmpty) return null;
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center rounded-md border border-dashed border-border/60 text-xs text-muted-foreground",
+          heightClassName,
+          className,
+        )}
+      >
+        No data yet{/* i18n-ignore public status page fixed copy */}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn("flex items-stretch gap-0.5", heightClassName, className)}
+      role="img"
+      aria-label={ariaLabel}
+    >
+      {buckets.map((bucket, index) => (
+        <Tooltip key={`${bucket.start}-${index}`}>
+          <TooltipTrigger asChild>
+            <div
+              className={cn(
+                "min-w-0 flex-1 opacity-90 transition-opacity hover:opacity-100",
+                barRadiusClassName,
+                bucketFillClass(bucket.status),
+              )}
+              data-status={bucket.status}
+            />
+          </TooltipTrigger>
+          <TooltipContent className="text-xs">
+            <div className="font-medium">
+              {bucketStatusLabel(bucket.status)}
+            </div>
+            <div className="text-muted-foreground">
+              {formatRange(bucket.start, bucket.end)}
+            </div>
+            {bucket.total > 0 ? (
+              <div className="text-muted-foreground">
+                {formatUptimePct(bucket.uptimePct)} uptime · {bucket.total}{" "}
+                {bucket.total === 1 ? "check" : "checks"}
+                {bucket.downCount > 0 ? ` · ${bucket.downCount} down` : ""}
+                {bucket.degradedCount > 0
+                  ? ` · ${bucket.degradedCount} degraded`
+                  : ""}
+              </div>
+            ) : (
+              <div className="text-muted-foreground">
+                No checks recorded
+                {/* i18n-ignore public status page fixed copy */}
+              </div>
+            )}
+          </TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+  );
+}

package/corpus/templates/analytics/app/components/monitoring/chart-utils.ts

@@ -0,0 +1,101 @@
+/**
+ * Pure presentation helpers for the reusable uptime charts. Self-contained (no
+ * dependency on the in-app monitoring page utils) so these components stay
+ * importable from both the authenticated detail view and the public,
+ * unauthenticated status page.
+ */
+import type { BucketStatus } from "./types";
+
+/** Solid fill for a timeline bucket / status dot. Matches the app health palette. */
+export function bucketFillClass(status: BucketStatus): string {
+  switch (status) {
+    case "up":
+      return "bg-emerald-500";
+    case "down":
+      return "bg-red-500";
+    case "degraded":
+      return "bg-amber-500";
+    default:
+      return "bg-muted-foreground/25";
+  }
+}
+
+export function bucketTextClass(status: BucketStatus): string {
+  switch (status) {
+    case "up":
+      return "text-emerald-500";
+    case "down":
+      return "text-red-500";
+    case "degraded":
+      return "text-amber-500";
+    default:
+      return "text-muted-foreground";
+  }
+}
+
+/** Format an uptime percentage with UptimeRobot-style precision. */
+export function formatUptimePct(pct: number | null | undefined): string {
+  if (pct == null || !Number.isFinite(pct)) return "—";
+  if (pct >= 99.995) return "100%";
+  return `${pct.toFixed(pct >= 99.9 ? 3 : pct >= 99 ? 2 : 1)}%`;
+}
+
+export function formatLatencyMs(ms: number | null | undefined): string {
+  if (ms == null || !Number.isFinite(ms)) return "—";
+  const rounded = Math.round(ms);
+  if (rounded < 1000) return `${rounded} ms`;
+  return `${(rounded / 1000).toFixed(2)} s`;
+}
+
+/** Compact date-time label for tooltips/axes (locale-aware, no year). */
+export function formatBucketTime(value: string | null | undefined): string {
+  if (!value) return "—";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "—";
+  return date.toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+/** Day-only label (used for wide daily uptime timelines). */
+export function formatBucketDay(value: string | null | undefined): string {
+  if (!value) return "—";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "—";
+  return date.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+  });
+}
+
+/** Human range like "Feb 3, 2:00 PM – 3:00 PM". */
+export function formatRange(
+  start: string | null | undefined,
+  end: string | null | undefined,
+): string {
+  const startLabel = formatBucketTime(start);
+  if (!end) return startLabel;
+  const endDate = new Date(end);
+  if (Number.isNaN(endDate.getTime())) return startLabel;
+  const endLabel = endDate.toLocaleString(undefined, {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+  return `${startLabel} – ${endLabel}`;
+}
+
+export function bucketStatusLabel(status: BucketStatus): string {
+  switch (status) {
+    case "up":
+      return "Operational";
+    case "down":
+      return "Down";
+    case "degraded":
+      return "Degraded";
+    default:
+      return "No data";
+  }
+}

package/corpus/templates/analytics/app/components/monitoring/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Reusable, themeable uptime chart components. Feed them the aggregates from
+ * the `get-monitor-stats` action (in-app) or the `get-public-status-page`
+ * action (public status page).
+ */
+export { UptimeTimelineBars } from "./UptimeTimelineBars";
+export type { UptimeTimelineBarsProps } from "./UptimeTimelineBars";
+export { ResponseTimeChart } from "./ResponseTimeChart";
+export type { ResponseTimeChartProps } from "./ResponseTimeChart";
+export { UptimeStatCards } from "./UptimeStatCards";
+export type { UptimeStatCardsProps } from "./UptimeStatCards";
+export type {
+  BucketStatus,
+  ResponseTimePoint,
+  UptimeBucket,
+  UptimeWindowKey,
+  UptimeWindows,
+} from "./types";
+export {
+  bucketFillClass,
+  bucketStatusLabel,
+  bucketTextClass,
+  formatBucketDay,
+  formatBucketTime,
+  formatLatencyMs,
+  formatRange,
+  formatUptimePct,
+} from "./chart-utils";

package/corpus/templates/analytics/app/components/monitoring/types.ts

@@ -0,0 +1,42 @@
+/**
+ * Client-side shapes for the reusable uptime charts. These MIRROR the server
+ * aggregates in server/lib/monitor-stats.ts (`UptimeBucket`, `ResponseTimePoint`,
+ * `UptimeWindows`) so the chart components can be fed directly from the
+ * `get-monitor-stats` / `get-public-status-page` action payloads without any
+ * remapping. Keep them structurally in sync with the server types.
+ */
+
+/** Coarse health of a single timeline bucket. */
+export type BucketStatus = "up" | "down" | "degraded" | "no-data";
+
+export interface UptimeWindows {
+  uptime24h: number | null;
+  uptime7d: number | null;
+  uptime30d: number | null;
+  uptime90d: number | null;
+}
+
+export interface UptimeBucket {
+  /** ISO timestamp for the inclusive start of the bucket. */
+  start: string;
+  /** ISO timestamp for the exclusive end of the bucket. */
+  end: string;
+  status: BucketStatus;
+  /** Uptime percentage in the bucket (null when there were no checks). */
+  uptimePct: number | null;
+  total: number;
+  downCount: number;
+  degradedCount: number;
+}
+
+export interface ResponseTimePoint {
+  /** ISO timestamp for the start of the bucket. */
+  bucketStart: string;
+  avg: number | null;
+  min: number | null;
+  max: number | null;
+  count: number;
+}
+
+/** Which uptime windows the stat cards render, in order. */
+export type UptimeWindowKey = keyof UptimeWindows;

package/corpus/templates/analytics/app/hooks/use-navigation-state.ts

@@ -19,6 +19,10 @@ interface NavigationState {
   recordingId?: string;
   agentsView?: string;
   dbAdminConnectionId?: string;
+  monitoringView?: string;
+  monitorId?: string;
+  statusPageId?: string;
+  errorIssueId?: string;
   filters?: Record<string, string>;
 }
 
@@ -82,6 +86,23 @@ export function useNavigationState() {
           if (dbAdminConnectionId)
             state.dbAdminConnectionId = dbAdminConnectionId;
         }
+      } else if (pathname === "/monitoring") {
+        state.view = "monitoring";
+        state.monitoringView =
+          searchParams.get("view") === "errors" ? "errors" : "uptime";
+        if (state.monitoringView === "errors") {
+          const issue = searchParams.get("issue");
+          if (issue) state.errorIssueId = issue;
+        } else {
+          const statusPage = searchParams.get("statuspage");
+          if (statusPage) {
+            // "list" | "new" | <id> - the status-pages config sub-view.
+            state.statusPageId = statusPage;
+          } else {
+            const monitor = searchParams.get("monitor");
+            if (monitor) state.monitorId = monitor;
+          }
+        }
       } else if (pathname === "/data-sources") {
         state.view = "data-sources";
       } else if (pathname === "/data-dictionary") {
@@ -112,6 +133,19 @@ export function useNavigationState() {
         return `/agents?${params.toString()}`;
       }
       if (cmd.view === "agents") return "/agents";
+      if (cmd.view === "monitoring") {
+        const params = new URLSearchParams();
+        if (cmd.monitoringView === "errors") {
+          params.set("view", "errors");
+          if (cmd.errorIssueId) params.set("issue", cmd.errorIssueId);
+        } else if (cmd.statusPageId) {
+          params.set("statuspage", cmd.statusPageId);
+        } else if (cmd.monitorId) {
+          params.set("monitor", cmd.monitorId);
+        }
+        const qs = params.toString();
+        return qs ? `/monitoring?${qs}` : "/monitoring";
+      }
       if (cmd.view === "data-sources") return "/data-sources";
       if (cmd.view === "data-dictionary") return "/data-dictionary";
       if (cmd.view === "catalog") return "/catalog";

package/corpus/templates/analytics/app/i18n/zh-TW.ts

@@ -10,6 +10,9 @@ const messages = {
     dataSources: "資料來源",
     dataDictionary: "資料字典",
     sessions: "工作階段",
+    monitoring: "監控",
+    monitoringUptime: "正常運作時間",
+    monitoringErrors: "錯誤",
     agents: "代理",
     templateCatalog: "目錄",
     dashboards: "儀表板",
@@ -28,6 +31,8 @@ const messages = {
   sidebar: {
     collapseSidebar: "收合側邊欄",
     expandSidebar: "展開側邊欄",
+    collapseAsk: "收起提問",
+    expandAsk: "展開提問",
     collapseDashboards: "收起儀表板",
     expandDashboards: "展開儀表板",
     collapseAnalyses: "收起分析",
@@ -591,6 +596,7 @@ const messages = {
     dataDictionary: "資料字典 - Analytics",
     dataSources: "資料來源 - Analytics",
     sessions: "工作階段 - Analytics",
+    monitoring: "監控 - Analytics",
     agents: "代理 - Analytics",
     session: "工作階段回放 - Analytics",
     tool: "工具 - Analytics",