feat(admin): show integration health-history trends in detail view

Wire the existing GET /admin/integrations/:id/health/history endpoint into
IntegrationDetail with a recharts LineChart of hourly uptime % (fixed
0-100 axis), avgResponseTime in the tooltip, and a 24h/7d toggle. Reuses
the already-present recharts dependency; no API changes.

Author: Medformatik

apps/web/src/components/admin/integrations/HealthHistoryChart.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import Box from "@mui/material/Box";
+import Skeleton from "@mui/material/Skeleton";
+import Stack from "@mui/material/Stack";
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import Typography from "@mui/material/Typography";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { useEnv } from "@/lib/EnvProvider";
+
+interface HealthBucket {
+  hour: string;
+  total: number;
+  healthy: number;
+  uptimePercent: number;
+  avgResponseTime: number | null;
+}
+
+interface HealthHistoryResponse {
+  integrationId: string;
+  hours: number;
+  timeline: HealthBucket[];
+}
+
+type HoursWindow = 24 | 168;
+
+/** Format an ISO-ish bucket timestamp for the X axis: HH:00 for 24h, weekday for 7d. */
+function formatBucketLabel(hour: string, hours: HoursWindow): string {
+  const d = new Date(hour);
+  if (Number.isNaN(d.getTime())) return hour;
+  if (hours === 24) {
+    return `${String(d.getHours()).padStart(2, "0")}:00`;
+  }
+  return d.toLocaleDateString(undefined, { weekday: "short" });
+}
+
+function HealthTooltip({
+  active,
+  payload,
+  hours,
+}: {
+  active?: boolean;
+  payload?: Array<{ payload: HealthBucket }>;
+  hours: HoursWindow;
+}) {
+  if (!active || !payload?.[0]) return null;
+  const bucket = payload[0].payload;
+  const responseTime = bucket.avgResponseTime != null ? `${bucket.avgResponseTime} ms` : "—";
+
+  return (
+    <Box
+      sx={{
+        bgcolor: "background.paper",
+        border: "1px solid",
+        borderColor: "divider",
+        borderRadius: "6px",
+        px: 1.25,
+        py: 0.75,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.12)",
+      }}
+    >
+      <Typography variant="caption" sx={{ fontWeight: 600, display: "block" }}>
+        {formatBucketLabel(bucket.hour, hours)}
+      </Typography>
+      <Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
+        Uptime: {bucket.uptimePercent}%
+      </Typography>
+      <Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
+        Avg response: {responseTime}
+      </Typography>
+      <Typography variant="caption" sx={{ color: "text.secondary", display: "block" }}>
+        Checks: {bucket.healthy}/{bucket.total}
+      </Typography>
+    </Box>
+  );
+}
+
+interface HealthHistoryChartProps {
+  integrationId: string;
+}
+
+export function HealthHistoryChart({ integrationId }: HealthHistoryChartProps) {
+  const env = useEnv();
+  const apiUrl = env.apiUrl;
+  const [hours, setHours] = useState<HoursWindow>(24);
+
+  const { data, isLoading } = useQuery<HealthBucket[]>({
+    queryKey: ["admin", "integrations", integrationId, "health-history", hours],
+    queryFn: async () => {
+      const res = await fetch(
+        `${apiUrl}/api/admin/integrations/${integrationId}/health/history?hours=${hours}`,
+        { credentials: "include" },
+      );
+      if (!res.ok) throw new Error("Failed to load health history");
+      const body: HealthHistoryResponse = await res.json();
+      return body.timeline ?? [];
+    },
+  });
+
+  const buckets = data ?? [];
+
+  return (
+    <Stack sx={{ gap: 1.5 }}>
+      <Stack
+        direction="row"
+        sx={{ alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 1 }}
+      >
+        <Typography variant="subtitle2" sx={{ color: "text.secondary" }}>
+          Uptime over time
+        </Typography>
+        <ToggleButtonGroup
+          size="small"
+          exclusive
+          value={hours}
+          onChange={(_, value: HoursWindow | null) => {
+            if (value != null) setHours(value);
+          }}
+          aria-label="Health history time window"
+        >
+          <ToggleButton value={24} aria-label="Last 24 hours">
+            24h
+          </ToggleButton>
+          <ToggleButton value={168} aria-label="Last 7 days">
+            7d
+          </ToggleButton>
+        </ToggleButtonGroup>
+      </Stack>
+      {isLoading ? (
+        <Skeleton variant="rounded" height={220} />
+      ) : buckets.length === 0 ? (
+        <Typography variant="body2" sx={{ color: "text.secondary", py: 4, textAlign: "center" }}>
+          No health history yet
+        </Typography>
+      ) : (
+        <Box sx={{ width: "100%", height: 220, minWidth: 0 }}>
+          <ResponsiveContainer width="100%" height={220}>
+            <LineChart data={buckets} margin={{ top: 8, right: 8, bottom: 0, left: -12 }}>
+              <CartesianGrid horizontal vertical={false} strokeDasharray="3 3" stroke="#E0E0E0" />
+              <XAxis
+                dataKey="hour"
+                tickFormatter={(value: string) => formatBucketLabel(value, hours)}
+                tick={{ fontSize: 10, fill: "#999" }}
+                axisLine={false}
+                tickLine={false}
+                minTickGap={24}
+              />
+              <YAxis
+                domain={[0, 100]}
+                tickFormatter={(value: number) => `${value}`}
+                tick={{ fontSize: 10, fill: "#999" }}
+                axisLine={false}
+                tickLine={false}
+                width={36}
+                unit="%"
+              />
+              <Tooltip
+                content={<HealthTooltip hours={hours} />}
+                cursor={{ stroke: "#999", strokeDasharray: "3 3" }}
+              />
+              <Line
+                type="monotone"
+                dataKey="uptimePercent"
+                stroke="var(--omx-teal, #1A73E8)"
+                strokeWidth={2}
+                dot={false}
+                activeDot={{
+                  r: 4,
+                  fill: "var(--omx-teal, #1A73E8)",
+                  stroke: "#fff",
+                  strokeWidth: 2,
+                }}
+                isAnimationActive={false}
+              />
+            </LineChart>
+          </ResponsiveContainer>
+        </Box>
+      )}
+    </Stack>
+  );
+}

apps/web/src/components/admin/integrations/IntegrationDetail.tsx

@@ -38,6 +38,7 @@ import { useAdminToast } from "../shared/AdminToast";
 import { MetaRow } from "../shared/MetaRow";
 import { ConfigSchemaForm } from "./ConfigSchemaForm";
 import { DomainChip } from "./DomainChip";
+import { HealthHistoryChart } from "./HealthHistoryChart";
 import { IntegrationStatusDot } from "./IntegrationStatusDot";
 import { RequiredServicesPanel } from "./RequiredServicesPanel";
 import { SetCredentialDialog } from "./SetCredentialDialog";
@@ -975,6 +976,22 @@ function HealthTab({
           </CardContent>
         </Card>
       )}
+      {data.hasHealthCheck && (
+        <Card variant="outlined">
+          <CardContent>
+            <Typography
+              variant="subtitle2"
+              gutterBottom
+              sx={{
+                color: "text.secondary",
+              }}
+            >
+              Health History
+            </Typography>
+            <HealthHistoryChart integrationId={integrationId} />
+          </CardContent>
+        </Card>
+      )}
     </Stack>
   );
 }

apps/web/src/components/admin/integrations/__tests__/HealthHistoryChart.test.tsx

@@ -0,0 +1,104 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createQueryWrapper, render, screen, userEvent, waitFor } from "@/test";
+
+vi.mock("@/lib/EnvProvider", () => ({
+  useEnv: () => ({ apiUrl: "http://test.local" }),
+}));
+
+// recharts' ResponsiveContainer measures its parent with ResizeObserver, which
+// reports 0x0 in jsdom — the chart then renders nothing. Force a fixed size so
+// the chart mounts and data-driven labels (tooltip, ticks) are assertable.
+vi.mock("recharts", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("recharts")>();
+  return {
+    ...actual,
+    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+      <div style={{ width: 600, height: 220 }} data-testid="chart-container">
+        <actual.ResponsiveContainer width={600} height={220}>
+          {children}
+        </actual.ResponsiveContainer>
+      </div>
+    ),
+  };
+});
+
+const fetchMock = vi.fn();
+vi.stubGlobal("fetch", fetchMock);
+
+import { HealthHistoryChart } from "../HealthHistoryChart";
+
+const TIMELINE = [
+  {
+    hour: "2026-06-17T08:00:00.000Z",
+    total: 6,
+    healthy: 6,
+    uptimePercent: 100,
+    avgResponseTime: 120,
+  },
+  {
+    hour: "2026-06-17T09:00:00.000Z",
+    total: 6,
+    healthy: 3,
+    uptimePercent: 50,
+    avgResponseTime: null,
+  },
+];
+
+/** Build a response body matching the route shape: { integrationId, hours, timeline }. */
+function bodyFor(url: string) {
+  const hours = new URL(url).searchParams.get("hours") ?? "24";
+  return { integrationId: "demo", hours: Number(hours), timeline: TIMELINE };
+}
+
+/** Query-string `hours` values across all fetch calls. */
+function requestedHours(): string[] {
+  return fetchMock.mock.calls.map((c) => new URL(String(c[0])).searchParams.get("hours") ?? "");
+}
+
+afterEach(() => {
+  fetchMock.mockReset();
+});
+
+describe("HealthHistoryChart", () => {
+  it("renders the chart for a populated timeline", async () => {
+    fetchMock.mockImplementation((...args: unknown[]) =>
+      Promise.resolve({ ok: true, json: async () => bodyFor(String(args[0])) }),
+    );
+
+    render(<HealthHistoryChart integrationId="demo" />, { wrapper: createQueryWrapper() });
+
+    // The chart container mounts once data arrives (no skeleton, no empty state).
+    await screen.findByTestId("chart-container");
+    expect(screen.queryByText("No health history yet")).toBeNull();
+    // Default window queries 24 hours.
+    expect(requestedHours()).toContain("24");
+  });
+
+  it("re-queries with hours=168 when the 7d toggle is clicked", async () => {
+    const user = userEvent.setup();
+    fetchMock.mockImplementation((...args: unknown[]) =>
+      Promise.resolve({ ok: true, json: async () => bodyFor(String(args[0])) }),
+    );
+
+    render(<HealthHistoryChart integrationId="demo" />, { wrapper: createQueryWrapper() });
+    await screen.findByTestId("chart-container");
+
+    await user.click(screen.getByRole("button", { name: "Last 7 days" }));
+
+    await waitFor(() => expect(requestedHours()).toContain("168"));
+  });
+
+  it("shows an empty state when the timeline is empty", async () => {
+    fetchMock.mockResolvedValue({
+      ok: true,
+      json: async () => ({ integrationId: "demo", hours: 24, timeline: [] }),
+    });
+
+    render(<HealthHistoryChart integrationId="demo" />, { wrapper: createQueryWrapper() });
+
+    await screen.findByText("No health history yet");
+    expect(screen.queryByTestId("chart-container")).toBeNull();
+  });
+});