@agent-native/core 0.90.11 → 0.91.0

package/corpus/templates/analytics/app/components/layout/Sidebar.tsx

@@ -15,6 +15,7 @@ import {
   IconSearch,
   IconArchive,
   IconActivity,
+  IconHeartbeat,
   IconPin,
   IconPlus,
   IconLock,
@@ -136,6 +137,7 @@ import { NewDashboardDialog } from "./NewDashboardDialog";
 type AnalysisHiddenFilter = "visible" | "hidden";
 
 const SIDEBAR_PREVIEW_COUNT = 5;
+const ASK_OPEN_KEY = "analytics-sidebar-ask-open";
 const DASHBOARD_SORT_MODE_KEY = "dashboard-sort-mode";
 const ANALYSIS_SORT_MODE_KEY = "analysis-sort-mode";
 const DASHBOARDS_OPEN_KEY = "analytics-sidebar-dashboards-open";
@@ -169,12 +171,16 @@ const bottomItems = [
   { icon: IconSettings, labelKey: "navigation.settings", href: "/settings" },
 ];
 
-function getStoredBoolean(key: string, fallback: boolean): boolean {
-  if (typeof window === "undefined") return fallback;
-  const raw = window.localStorage.getItem(key);
-  if (raw === "true") return true;
-  if (raw === "false") return false;
-  return fallback;
+function getStoredBooleanPreference(key: string): boolean | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (raw === "true") return true;
+    if (raw === "false") return false;
+  } catch {
+    // localStorage unavailable — ignore, section state is best-effort.
+  }
+  return null;
 }
 
 function setStoredBoolean(key: string, value: boolean): void {
@@ -1476,7 +1482,15 @@ function AnalyticsChatsSection() {
                       onClick={() => openThread(thread.id)}
                       className="min-w-0 flex-1 px-2 py-1.5 pe-12 text-start text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
                     >
-                      <span className="block truncate">{title}</span>
+                      <span className="flex min-w-0 items-center gap-1.5">
+                        {thread.pinnedAt ? (
+                          <IconPin
+                            aria-hidden="true"
+                            className="size-3 shrink-0 text-current opacity-60"
+                          />
+                        ) : null}
+                        <span className="block min-w-0 truncate">{title}</span>
+                      </span>
                     </button>
                   </TooltipTrigger>
                   <TooltipContent side="right">{title}</TooltipContent>
@@ -1573,13 +1587,30 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
   const queryClient = useQueryClient();
   const { setTheme } = useTheme();
 
-  const [dashOpen, setDashOpen] = useState(() =>
-    getStoredBoolean(DASHBOARDS_OPEN_KEY, true),
+  const isAskRoute = location.pathname === "/ask";
+  const activeDashboardId = useMemo(() => {
+    const match = location.pathname.match(/^\/(?:adhoc|dashboards)\/([^/]+)/);
+    if (!match?.[1]) return null;
+    return new URLSearchParams(location.search).get("id") || match[1];
+  }, [location.pathname, location.search]);
+  const activeAnalysisId = useMemo(() => {
+    const match = location.pathname.match(/^\/analyses\/([^/]+)/);
+    return match?.[1] ?? null;
+  }, [location.pathname]);
+  const [askOpen, setAskOpen] = useState(
+    () => getStoredBooleanPreference(ASK_OPEN_KEY) ?? isAskRoute,
+  );
+  const [dashOpen, setDashOpen] = useState(
+    () =>
+      getStoredBooleanPreference(DASHBOARDS_OPEN_KEY) ??
+      activeDashboardId !== null,
   );
   const [dashShowAll, setDashShowAll] = useState(false);
   const [dashFilter, setDashFilter] = useState<SidebarVisibilityFilter>("all");
-  const [analysesOpen, setAnalysesOpen] = useState(() =>
-    getStoredBoolean(ANALYSES_OPEN_KEY, true),
+  const [analysesOpen, setAnalysesOpen] = useState(
+    () =>
+      getStoredBooleanPreference(ANALYSES_OPEN_KEY) ??
+      activeAnalysisId !== null,
   );
   const [analysesShowAll, setAnalysesShowAll] = useState(false);
   const [analysisFilter, setAnalysisFilter] =
@@ -1681,6 +1712,32 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
     setAnalysisSortModeState(mode);
   }, []);
 
+  useEffect(() => {
+    if (getStoredBooleanPreference(ASK_OPEN_KEY) === null) {
+      setAskOpen(isAskRoute);
+    }
+  }, [isAskRoute]);
+
+  useEffect(() => {
+    if (getStoredBooleanPreference(DASHBOARDS_OPEN_KEY) === null) {
+      setDashOpen(activeDashboardId !== null);
+    }
+  }, [activeDashboardId]);
+
+  useEffect(() => {
+    if (getStoredBooleanPreference(ANALYSES_OPEN_KEY) === null) {
+      setAnalysesOpen(activeAnalysisId !== null);
+    }
+  }, [activeAnalysisId]);
+
+  const toggleAskOpen = useCallback(() => {
+    setAskOpen((current) => {
+      const next = !current;
+      setStoredBoolean(ASK_OPEN_KEY, next);
+      return next;
+    });
+  }, []);
+
   const toggleDashOpen = useCallback(() => {
     setDashOpen((current) => {
       const next = !current;
@@ -1765,12 +1822,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
     [filteredAnalyses, analysesShowAll],
   );
 
-  const activeDashboardId = useMemo(() => {
-    const match = location.pathname.match(/^\/(?:adhoc|dashboards)\/([^/]+)/);
-    if (!match?.[1]) return null;
-    return new URLSearchParams(location.search).get("id") || match[1];
-  }, [location.pathname, location.search]);
-
   // Only the active dashboard can display saved views in the sidebar, so avoid
   // issuing one request per dashboard on every sidebar mount.
   const { views: activeDashboardViews = [] } = useDashboardViews(
@@ -2340,6 +2391,12 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
       href: "/sessions",
       active: location.pathname.startsWith("/sessions"),
     },
+    {
+      icon: IconHeartbeat,
+      label: t("navigation.monitoring"),
+      href: "/monitoring",
+      active: location.pathname.startsWith("/monitoring"),
+    },
     {
       icon: IconActivity,
       label: t("navigation.agents"),
@@ -2480,33 +2537,57 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
           </div>
           <div className="flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden py-2">
             <nav className="grid min-w-0 items-start px-2 text-sm font-medium lg:px-4 space-y-1">
-              {/* Ask link */}
-              <div className="min-w-0 space-y-1">
-                <Link
-                  to="/ask"
-                  onClick={(event) => {
-                    if (
-                      location.pathname !== "/ask" &&
-                      !event.metaKey &&
-                      !event.ctrlKey &&
-                      !event.shiftKey &&
-                      !event.altKey
-                    ) {
-                      event.preventDefault();
-                      navigateWithAgentChatViewTransition(navigate, "/ask");
-                    }
-                  }}
+              {/* Ask section */}
+              <div className="group/section min-w-0 space-y-1">
+                <div
                   className={cn(
-                    "flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary",
-                    location.pathname === "/ask"
+                    "flex w-full min-w-0 items-center rounded-lg transition-all hover:text-primary",
+                    isAskRoute
                       ? "bg-sidebar-accent text-sidebar-accent-foreground"
                       : "text-muted-foreground hover:bg-sidebar-accent/50",
                   )}
                 >
-                  <IconMessageCircle className="h-4 w-4" />
-                  {t("navigation.ask")}
-                </Link>
-                {location.pathname === "/ask" && <AnalyticsChatsSection />}
+                  <Link
+                    to="/ask"
+                    onClick={(event) => {
+                      if (
+                        !isAskRoute &&
+                        !event.metaKey &&
+                        !event.ctrlKey &&
+                        !event.shiftKey &&
+                        !event.altKey
+                      ) {
+                        event.preventDefault();
+                        navigateWithAgentChatViewTransition(navigate, "/ask");
+                      }
+                    }}
+                    className="flex min-w-0 flex-1 items-center gap-3 px-3 py-2"
+                  >
+                    <IconMessageCircle className="h-4 w-4 shrink-0" />
+                    <span className="min-w-0 flex-1 truncate">
+                      {t("navigation.ask")}
+                    </span>
+                  </Link>
+                  <button
+                    type="button"
+                    onClick={toggleAskOpen}
+                    className="me-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground/70 hover:bg-sidebar-accent hover:text-foreground"
+                    aria-label={
+                      askOpen
+                        ? t("sidebar.collapseAsk")
+                        : t("sidebar.expandAsk")
+                    }
+                    aria-expanded={askOpen}
+                  >
+                    <IconChevronDown
+                      className={cn(
+                        "h-3.5 w-3.5 shrink-0 transition-transform",
+                        !askOpen && "-rotate-90",
+                      )}
+                    />
+                  </button>
+                </div>
+                {askOpen && <AnalyticsChatsSection />}
               </div>
 
               {/* Sessions link */}
@@ -2523,6 +2604,20 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                 {t("navigation.sessions")}
               </Link>
 
+              {/* Monitoring link */}
+              <Link
+                to="/monitoring"
+                className={cn(
+                  "flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary",
+                  location.pathname.startsWith("/monitoring")
+                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                    : "text-muted-foreground hover:bg-sidebar-accent/50",
+                )}
+              >
+                <IconHeartbeat className="h-4 w-4" />
+                {t("navigation.monitoring")}
+              </Link>
+
               {/* Agents link */}
               <Link
                 to="/agents"

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

@@ -0,0 +1,351 @@
+/**
+ * Presentational public status page. Pure/client-safe: it takes an already-
+ * resolved, sanitized `PublicStatusPage` payload (from the
+ * `get-public-status-page` action / SSR loader) and renders the branded status
+ * banner, overall uptime cards, per-monitor colored uptime timelines, optional
+ * response-time charts, and an incidents section.
+ */
+import {
+  IconActivity,
+  IconAlertCircle,
+  IconAlertTriangle,
+  IconCircleCheck,
+  IconRefresh,
+} from "@tabler/icons-react";
+
+import { cn } from "@/lib/utils";
+
+import type { PublicStatusPage } from "../../../server/lib/status-pages";
+import { formatLatencyMs, formatUptimePct } from "./chart-utils";
+import { ResponseTimeChart } from "./ResponseTimeChart";
+import { UptimeStatCards } from "./UptimeStatCards";
+import { UptimeTimelineBars } from "./UptimeTimelineBars";
+
+type OverallStatus = PublicStatusPage["overall"];
+type PublicMonitor = PublicStatusPage["monitors"][number];
+type MonitorStatus = PublicMonitor["status"];
+
+function monitorTone(
+  status: MonitorStatus,
+): "up" | "down" | "degraded" | "neutral" {
+  switch (status) {
+    case "up":
+      return "up";
+    case "down":
+    case "error":
+      return "down";
+    case "degraded":
+      return "degraded";
+    default:
+      return "neutral";
+  }
+}
+
+function toneDotClass(tone: ReturnType<typeof monitorTone>): string {
+  switch (tone) {
+    case "up":
+      return "bg-emerald-500";
+    case "down":
+      return "bg-red-500";
+    case "degraded":
+      return "bg-amber-500";
+    default:
+      return "bg-muted-foreground/40";
+  }
+}
+
+function toneTextClass(tone: ReturnType<typeof monitorTone>): string {
+  switch (tone) {
+    case "up":
+      return "text-emerald-500";
+    case "down":
+      return "text-red-500";
+    case "degraded":
+      return "text-amber-500";
+    default:
+      return "text-muted-foreground";
+  }
+}
+
+function monitorStatusLabel(status: MonitorStatus): string {
+  switch (status) {
+    case "up":
+      return "Operational";
+    case "down":
+      return "Down";
+    case "degraded":
+      return "Degraded";
+    case "error":
+      return "Error";
+    case "running":
+      return "Checking";
+    default:
+      return "Unknown";
+  }
+}
+
+const BANNER: Record<
+  OverallStatus,
+  {
+    icon: typeof IconCircleCheck;
+    accent: string;
+    ring: string;
+    iconClass: string;
+    title: string;
+  }
+> = {
+  operational: {
+    icon: IconCircleCheck,
+    accent: "bg-emerald-500/10",
+    ring: "border-emerald-500/30",
+    iconClass: "text-emerald-500",
+    title: "All systems operational", // i18n-ignore public status page fixed copy
+  },
+  degraded: {
+    icon: IconAlertTriangle,
+    accent: "bg-amber-500/10",
+    ring: "border-amber-500/30",
+    iconClass: "text-amber-500",
+    title: "Some systems degraded", // i18n-ignore public status page fixed copy
+  },
+  down: {
+    icon: IconAlertCircle,
+    accent: "bg-red-500/10",
+    ring: "border-red-500/30",
+    iconClass: "text-red-500",
+    title: "System outage in progress", // i18n-ignore public status page fixed copy
+  },
+  unknown: {
+    icon: IconActivity,
+    accent: "bg-muted",
+    ring: "border-border/60",
+    iconClass: "text-muted-foreground",
+    title: "Status unknown", // i18n-ignore public status page fixed copy
+  },
+};
+
+function bannerSubtitle(page: PublicStatusPage): string {
+  const { up, down, degraded, total } = page.counts;
+  if (total === 0) return "No monitors are being tracked on this page yet.";
+  if (page.overall === "operational") {
+    return `${total} ${total === 1 ? "monitor" : "monitors"} reporting healthy.`;
+  }
+  const parts: string[] = [];
+  if (down > 0) parts.push(`${down} down`);
+  if (degraded > 0) parts.push(`${degraded} degraded`);
+  if (up > 0) parts.push(`${up} operational`);
+  return parts.join(" · ");
+}
+
+function formatUpdatedAt(value: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "just now";
+  return date.toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+}
+
+export function PublicStatusView({
+  page,
+  refreshing = false,
+}: {
+  page: PublicStatusPage;
+  refreshing?: boolean;
+}) {
+  const banner = BANNER[page.overall];
+  const BannerIcon = banner.icon;
+  const centered = page.layout.alignment === "center";
+  const compact = page.layout.density === "compact";
+
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div
+        className={cn(
+          "mx-auto w-full max-w-4xl px-5 py-10 sm:px-8 sm:py-14",
+          centered && "text-center",
+        )}
+      >
+        {/* Brand + title */}
+        <header
+          className={cn("flex flex-col gap-1", centered && "items-center")}
+        >
+          <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+            <span className="inline-flex size-5 items-center justify-center rounded-md bg-[var(--brand-amber,#F59E0B)]/15 text-[var(--brand-amber,#F59E0B)]">
+              <IconActivity className="size-3.5" />
+            </span>
+            Status
+          </div>
+          <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">
+            {page.title}
+          </h1>
+          {page.description ? (
+            <p className="max-w-2xl text-sm text-muted-foreground">
+              {page.description}
+            </p>
+          ) : null}
+        </header>
+
+        {/* Overall banner */}
+        <section
+          className={cn(
+            "mt-6 flex items-center gap-4 rounded-xl border px-5 py-4",
+            banner.ring,
+            banner.accent,
+            centered && "justify-center text-left",
+          )}
+        >
+          <span
+            className={cn(
+              "inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-background/60",
+              banner.iconClass,
+            )}
+          >
+            <BannerIcon className="size-6" />
+          </span>
+          <div className="min-w-0">
+            <div className="text-lg font-semibold">{banner.title}</div>
+            <div className="text-sm text-muted-foreground">
+              {bannerSubtitle(page)}
+            </div>
+          </div>
+        </section>
+
+        {/* Overall uptime cards */}
+        {page.layout.showOverallUptime && page.monitors.length > 0 ? (
+          <section className="mt-6">
+            <h2 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              Overall uptime{/* i18n-ignore public status page fixed copy */}
+            </h2>
+            <UptimeStatCards windows={page.overallWindows} compact={compact} />
+          </section>
+        ) : null}
+
+        {/* Per-monitor list */}
+        <section className="mt-8 space-y-3">
+          <h2 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Monitors
+          </h2>
+          {page.monitors.length === 0 ? (
+            <div className="rounded-lg border border-dashed border-border/60 bg-muted/20 px-5 py-10 text-center text-sm text-muted-foreground">
+              No monitors have been added to this status page yet.
+              {/* i18n-ignore public status page fixed copy */}
+            </div>
+          ) : (
+            page.monitors.map((monitor) => {
+              const tone = monitorTone(monitor.status);
+              return (
+                <article
+                  key={monitor.id}
+                  className={cn(
+                    "rounded-xl border border-border/50 bg-card",
+                    compact ? "p-4" : "p-5",
+                  )}
+                >
+                  <div className="flex flex-wrap items-center justify-between gap-2">
+                    <div className="flex min-w-0 items-center gap-2.5">
+                      <span
+                        className={cn(
+                          "size-2.5 shrink-0 rounded-full",
+                          toneDotClass(tone),
+                        )}
+                      />
+                      <div className="min-w-0">
+                        <div className="truncate font-medium">
+                          {monitor.name}
+                        </div>
+                        {monitor.host ? (
+                          <div className="truncate text-xs text-muted-foreground">
+                            {monitor.url ? (
+                              <a
+                                href={monitor.url}
+                                target="_blank"
+                                rel="noreferrer noopener nofollow"
+                                className="hover:text-foreground"
+                              >
+                                {monitor.host}
+                              </a>
+                            ) : (
+                              monitor.host
+                            )}
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-3 text-sm">
+                      <span className={cn("font-medium", toneTextClass(tone))}>
+                        {monitorStatusLabel(monitor.status)}
+                      </span>
+                      <span className="tabular-nums text-muted-foreground">
+                        {formatUptimePct(monitor.windows.uptime90d)} (90d)
+                      </span>
+                    </div>
+                  </div>
+
+                  {page.layout.showUptimeBars ? (
+                    <div className="mt-3">
+                      <UptimeTimelineBars
+                        buckets={monitor.timeline}
+                        heightClassName={compact ? "h-6" : "h-8"}
+                        ariaLabel={`${monitor.name} uptime over the last 90 days`}
+                      />
+                      <div className="mt-1 flex justify-between text-[10px] text-muted-foreground">
+                        <span>90 days ago</span>
+                        <span>Today</span>
+                      </div>
+                    </div>
+                  ) : null}
+
+                  {page.layout.showResponseTime &&
+                  monitor.responseSeries.length > 0 ? (
+                    <div className="mt-4">
+                      <div className="mb-1 flex items-center justify-between">
+                        <span className="text-xs font-medium">
+                          Response time
+                          {/* i18n-ignore public status page fixed copy */}
+                        </span>
+                        <span className="text-[10px] text-muted-foreground">
+                          avg {formatLatencyMs(monitor.avgResponseMs)}
+                        </span>
+                      </div>
+                      <ResponseTimeChart
+                        series={monitor.responseSeries}
+                        heightClassName="h-[140px]"
+                      />
+                    </div>
+                  ) : null}
+                </article>
+              );
+            })
+          )}
+        </section>
+
+        {/* Incidents / status updates */}
+        <section className="mt-8">
+          <h2 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            Past incidents{/* i18n-ignore public status page fixed copy */}
+          </h2>
+          <div className="rounded-lg border border-border/50 bg-card px-5 py-8 text-center text-sm text-muted-foreground">
+            No incidents reported.
+            {/* i18n-ignore public status page fixed copy */}
+          </div>
+        </section>
+
+        {/* Footer: last updated + auto-refresh */}
+        <footer
+          className={cn(
+            "mt-8 flex items-center gap-1.5 text-xs text-muted-foreground",
+            centered && "justify-center",
+          )}
+        >
+          <IconRefresh
+            className={cn("size-3.5", refreshing && "animate-spin")}
+          />
+          <span>Last updated {formatUpdatedAt(page.generatedAt)}</span>
+        </footer>
+      </div>
+    </main>
+  );
+}