@hot-updater/console 0.36.7 → 1.0.0-rc.1

package/src/components/features/insights/InstallationMatchesCard.tsx

@@ -0,0 +1,132 @@
+import { Check, TriangleAlert } from "lucide-react";
+
+import { BundleIdDisplay } from "@/components/BundleIdDisplay";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type {
+  InstallationSearchResult,
+  InstallationSearchRow,
+} from "@/lib/api";
+
+import { InstallationPagination } from "./InstallationPagination";
+
+const getLastKnownBundleId = (event: InstallationSearchRow) =>
+  event.lastKnownBundleId;
+
+const getUserLabel = (event: InstallationSearchRow) =>
+  event.userId ?? event.username ?? "—";
+
+export function InstallationMatchesCard({
+  error,
+  limit,
+  offset,
+  onOffsetChange,
+  onSelect,
+  results,
+  selectedInstallId,
+}: {
+  readonly error: unknown;
+  readonly limit: number;
+  readonly offset: number;
+  readonly onOffsetChange: (offset: number) => void;
+  readonly onSelect: (installId: string) => void;
+  readonly results: InstallationSearchResult | undefined;
+  readonly selectedInstallId: string;
+}) {
+  return (
+    <Card className="min-h-0 min-w-0">
+      <CardHeader className="p-6 pb-5">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex min-w-0 flex-col gap-1.5">
+            <CardTitle className="text-sm font-medium">
+              <h2>Matching installations</h2>
+            </CardTitle>
+            <CardDescription>
+              Select a row to review its bundle history.
+            </CardDescription>
+          </div>
+          <Badge variant="outline">{results?.pagination.total ?? 0}</Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="min-h-0 p-0">
+        {results && results.data.length > 0 ? (
+          <ul aria-label="Matching installations" className="divide-y">
+            {results.data.map((event) => {
+              const currentBundleId = getLastKnownBundleId(event);
+              const isSelected = event.installId === selectedInstallId;
+              return (
+                <li key={event.installId}>
+                  <button
+                    aria-pressed={isSelected}
+                    className="group flex w-full min-w-0 flex-col gap-4 border-l-2 border-transparent px-6 py-5 text-left outline-none transition-colors hover:bg-muted/40 focus-visible:border-ring focus-visible:bg-muted/40 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/30 aria-pressed:border-primary aria-pressed:bg-muted/60"
+                    onClick={() => onSelect(event.installId)}
+                    type="button"
+                  >
+                    <span className="flex w-full min-w-0 items-center justify-between gap-3">
+                      <span className="min-w-0 truncate text-sm font-medium">
+                        {getUserLabel(event)}
+                      </span>
+                      {isSelected ? (
+                        <span className="flex shrink-0 items-center gap-1 text-xs font-medium text-primary">
+                          <Check aria-hidden="true" className="size-3.5" />
+                          Selected
+                        </span>
+                      ) : null}
+                    </span>
+                    <BundleIdDisplay
+                      bundleId={event.installId}
+                      className="block text-muted-foreground"
+                    />
+                    <span className="min-w-0">
+                      <span className="mb-1 block text-xs text-muted-foreground">
+                        Last known bundle
+                      </span>
+                      {currentBundleId ? (
+                        <BundleIdDisplay bundleId={currentBundleId} />
+                      ) : (
+                        <span className="text-sm text-muted-foreground">—</span>
+                      )}
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        ) : error ? (
+          <div className="p-5">
+            <Alert variant="destructive">
+              <TriangleAlert aria-hidden="true" />
+              <AlertTitle>Installation search unavailable</AlertTitle>
+              <AlertDescription>
+                {error instanceof Error
+                  ? error.message
+                  : "Failed to load installations."}
+              </AlertDescription>
+            </Alert>
+          </div>
+        ) : (
+          <div className="p-5 text-sm text-muted-foreground">
+            No installations matched that query.
+          </div>
+        )}
+        {results && results.pagination.total > 0 ? (
+          <InstallationPagination
+            label="Installation results"
+            limit={limit}
+            offset={offset}
+            pageLength={results.data.length}
+            total={results.pagination.total}
+            onOffsetChange={onOffsetChange}
+          />
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/features/insights/InstallationPageHeader.tsx

@@ -0,0 +1,138 @@
+import { Link } from "@tanstack/react-router";
+import { ArrowLeft, Search, X } from "lucide-react";
+
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import { Separator } from "@/components/ui/separator";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function InstallationPageHeader() {
+  return (
+    <header className="sticky top-0 z-10 flex shrink-0 flex-wrap items-center gap-x-2 gap-y-1 border-b bg-background px-3 py-3 sm:min-h-12 sm:flex-nowrap sm:bg-card/70 sm:px-4 sm:backdrop-blur-sm">
+      <SidebarTrigger className="-ml-1" />
+      <Link
+        className={buttonVariants({ size: "sm", variant: "ghost" })}
+        to="/insights"
+      >
+        <ArrowLeft aria-hidden="true" data-icon="inline-start" />
+        Back to Insights
+      </Link>
+      <Separator className="mx-1 hidden h-4 sm:block" orientation="vertical" />
+      <div className="basis-full pl-9 sm:basis-auto sm:pl-0">
+        <h1 className="text-sm font-medium">Installation history</h1>
+        <p className="text-xs text-muted-foreground">
+          Review the last known bundle and recorded changes.
+        </p>
+      </div>
+    </header>
+  );
+}
+
+export function InstallationSearchPanel({
+  draftQuery,
+  onDraftQueryChange,
+  onSubmit,
+  onClear,
+  hasQuery,
+}: {
+  readonly draftQuery: string;
+  readonly onDraftQueryChange: (value: string) => void;
+  readonly onSubmit: () => void;
+  readonly onClear: () => void;
+  readonly hasQuery: boolean;
+}) {
+  return (
+    <Card>
+      <CardContent className="grid gap-4 p-4 lg:grid-cols-[minmax(12rem,0.45fr)_minmax(0,1.55fr)] lg:items-start">
+        <div className="flex min-w-0 flex-col gap-1.5">
+          <CardTitle className="text-sm font-medium">
+            <h2>Find an installation</h2>
+          </CardTitle>
+          <CardDescription>
+            Search by either identifier to inspect its bundle history.
+          </CardDescription>
+        </div>
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            onSubmit();
+          }}
+          role="search"
+        >
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="installation-history-search">
+                User ID or install ID
+              </FieldLabel>
+              <div className="flex flex-col gap-2 sm:flex-row">
+                <InputGroup className="h-8">
+                  <InputGroupAddon>
+                    <Search aria-hidden="true" />
+                  </InputGroupAddon>
+                  <InputGroupInput
+                    id="installation-history-search"
+                    onChange={(event) => onDraftQueryChange(event.target.value)}
+                    placeholder="Enter a user ID or install ID"
+                    type="search"
+                    value={draftQuery}
+                  />
+                  {draftQuery.length > 0 || hasQuery ? (
+                    <InputGroupAddon align="inline-end">
+                      <InputGroupButton
+                        aria-label="Clear search"
+                        onClick={onClear}
+                        size="icon-xs"
+                      >
+                        <X aria-hidden="true" />
+                      </InputGroupButton>
+                    </InputGroupAddon>
+                  ) : null}
+                </InputGroup>
+                <Button
+                  className="w-full sm:w-auto"
+                  disabled={draftQuery.trim().length === 0}
+                  size="lg"
+                  type="submit"
+                >
+                  <Search aria-hidden="true" data-icon="inline-start" />
+                  Search history
+                </Button>
+              </div>
+              <FieldDescription>
+                A user ID may return more than one installation. An install ID
+                opens one installation directly.
+              </FieldDescription>
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function InstallationResultsSkeleton() {
+  return (
+    <div className="grid items-stretch gap-6 lg:min-h-96 lg:grid-cols-[minmax(18rem,20rem)_minmax(0,1fr)]">
+      <Skeleton className="h-64 w-full lg:h-full" />
+      <Skeleton className="h-64 w-full lg:h-full" />
+    </div>
+  );
+}

package/src/components/features/insights/InstallationPagination.tsx

@@ -0,0 +1,48 @@
+import { Button } from "@/components/ui/button";
+
+export function InstallationPagination({
+  label,
+  limit,
+  offset,
+  pageLength,
+  total,
+  onOffsetChange,
+}: {
+  readonly label: string;
+  readonly limit: number;
+  readonly offset: number;
+  readonly pageLength: number;
+  readonly total: number;
+  readonly onOffsetChange: (offset: number) => void;
+}) {
+  return (
+    <nav
+      aria-label={`${label} pagination`}
+      className="flex items-center justify-between gap-4 border-t px-5 py-5"
+    >
+      <span className="text-xs text-muted-foreground">
+        {offset + 1}–{Math.min(offset + pageLength, total)} of {total}
+      </span>
+      <div className="flex gap-2">
+        <Button
+          disabled={offset === 0}
+          onClick={() => onOffsetChange(Math.max(0, offset - limit))}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          Previous
+        </Button>
+        <Button
+          disabled={offset + pageLength >= total}
+          onClick={() => onOffsetChange(offset + limit)}
+          size="sm"
+          type="button"
+          variant="outline"
+        >
+          Next
+        </Button>
+      </div>
+    </nav>
+  );
+}

package/src/components/features/insights/InstallationSearch.tsx

@@ -0,0 +1,230 @@
+import { Link } from "@tanstack/react-router";
+import { Search, TriangleAlert } from "lucide-react";
+import { useState } from "react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  type InstallationSearchRow,
+  useInstallationSearchQuery,
+} from "@/lib/api";
+import { isInsightsQueryEnabled } from "@/lib/insights-api";
+
+import { useInsightsCapability } from "./InsightsCapabilityContext";
+
+const SEARCH_LIMIT = 20;
+
+const identityLabel = (row: InstallationSearchRow): string =>
+  row.userId ?? row.installId;
+
+const platformLabel = (platform: InstallationSearchRow["platform"]): string =>
+  platform === "ios" ? "iOS" : "Android";
+
+export function InstallationSearch({
+  initialQuery = "",
+}: {
+  readonly initialQuery?: string;
+}) {
+  const capability = useInsightsCapability();
+  const normalizedInitialQuery = initialQuery.trim();
+  const [draftQuery, setDraftQuery] = useState(normalizedInitialQuery);
+  const [submittedQuery, setSubmittedQuery] = useState(normalizedInitialQuery);
+  const [offset, setOffset] = useState(0);
+  const queryEnabled =
+    isInsightsQueryEnabled(capability) && submittedQuery.length > 0;
+  const { data, error, isLoading } = useInstallationSearchQuery(
+    { query: submittedQuery, limit: SEARCH_LIMIT, offset },
+    queryEnabled,
+  );
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-sm font-medium">
+          <h2>Installation inspector</h2>
+        </CardTitle>
+        <CardDescription>
+          Search by user ID or install ID to inspect its last known bundle.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-5">
+        <form
+          className="max-w-2xl"
+          onSubmit={(event) => {
+            event.preventDefault();
+            setSubmittedQuery(draftQuery.trim());
+            setOffset(0);
+          }}
+          role="search"
+        >
+          <label className="sr-only" htmlFor="insights-installation-search">
+            User ID or install ID
+          </label>
+          <InputGroup className="h-9">
+            <InputGroupAddon>
+              <Search aria-hidden="true" />
+            </InputGroupAddon>
+            <InputGroupInput
+              id="insights-installation-search"
+              aria-label="User ID or install ID"
+              disabled={isLoading}
+              onChange={(event) => setDraftQuery(event.target.value)}
+              placeholder="Enter a user ID or install ID"
+              type="search"
+              value={draftQuery}
+            />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton
+                disabled={isLoading}
+                type="submit"
+                variant="default"
+              >
+                Search
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+        </form>
+
+        {!queryEnabled ? (
+          <p className="text-sm text-muted-foreground">
+            Enter a user ID or install ID to search received reports.
+          </p>
+        ) : isLoading ? (
+          <div
+            aria-label="Searching installations"
+            className="flex flex-col gap-2"
+          >
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+        ) : error ? (
+          <Alert variant="destructive">
+            <TriangleAlert aria-hidden="true" />
+            <AlertTitle>Installation search unavailable</AlertTitle>
+            <AlertDescription>{error.message}</AlertDescription>
+          </Alert>
+        ) : data && data.data.length > 0 ? (
+          <div className="flex flex-col gap-3">
+            <Table>
+              <TableHeader>
+                <TableRow className="hover:bg-transparent">
+                  <TableHead>Installation</TableHead>
+                  <TableHead>Last known bundle</TableHead>
+                  <TableHead>Reported context</TableHead>
+                  <TableHead className="text-right">Details</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {data.data.map((row) => (
+                  <InstallationResultRow
+                    key={row.installId}
+                    query={submittedQuery}
+                    row={row}
+                  />
+                ))}
+              </TableBody>
+            </Table>
+            <div className="flex items-center justify-between gap-3">
+              <p className="text-xs text-muted-foreground">
+                {offset + 1}–
+                {Math.min(offset + data.data.length, data.pagination.total)} of{" "}
+                {data.pagination.total}
+              </p>
+              <div className="flex gap-2">
+                <Button
+                  disabled={offset === 0}
+                  onClick={() => setOffset(Math.max(0, offset - SEARCH_LIMIT))}
+                  size="sm"
+                  type="button"
+                  variant="outline"
+                >
+                  Previous
+                </Button>
+                <Button
+                  disabled={offset + data.data.length >= data.pagination.total}
+                  onClick={() => setOffset(offset + SEARCH_LIMIT)}
+                  size="sm"
+                  type="button"
+                  variant="outline"
+                >
+                  Next
+                </Button>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            No installations matched that search.
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+function InstallationResultRow({
+  query,
+  row,
+}: {
+  readonly query: string;
+  readonly row: InstallationSearchRow;
+}) {
+  return (
+    <TableRow>
+      <TableCell className="max-w-64 whitespace-normal">
+        <div className="flex flex-col gap-1">
+          <span className="font-medium">{identityLabel(row)}</span>
+          <code className="break-all text-muted-foreground">
+            {row.installId}
+          </code>
+        </div>
+      </TableCell>
+      <TableCell className="max-w-64 whitespace-normal">
+        <div className="flex flex-col gap-1">
+          <span className="text-muted-foreground">Last known bundle</span>
+          <code className="break-all">{row.lastKnownBundleId ?? "—"}</code>
+        </div>
+      </TableCell>
+      <TableCell>
+        {platformLabel(row.platform)} · {row.channel} · {row.appVersion}
+      </TableCell>
+      <TableCell className="text-right">
+        <Link
+          aria-label={`Open ${row.installId}`}
+          className="font-medium text-primary underline-offset-4 hover:underline focus-visible:rounded-sm focus-visible:outline-2"
+          search={{
+            query,
+            installId: row.installId,
+            searchOffset: 0,
+            historyOffset: 0,
+          }}
+          to="/installations"
+        >
+          Open
+        </Link>
+      </TableCell>
+    </TableRow>
+  );
+}

package/src/components/features/insights/UpdateOutcomes.tsx

@@ -0,0 +1,147 @@
+import type { ActiveInstallationWindow } from "@hot-updater/server";
+import type { ReactNode } from "react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { BundleEventInsights } from "@/lib/api";
+
+import { BundleActivityChart } from "../bundles/BundleActivityChart";
+import { InsightsErrorAlert } from "./InsightsErrorAlert";
+
+export type UpdateOutcomeState =
+  | { readonly status: "idle" }
+  | { readonly status: "loading"; readonly bundleId: string }
+  | {
+      readonly status: "error";
+      readonly bundleId: string;
+      readonly error: Error;
+    }
+  | {
+      readonly status: "success";
+      readonly bundleId: string;
+      readonly data: BundleEventInsights;
+    };
+
+export function UpdateOutcomes({
+  bundleSelector,
+  configuredPercentage,
+  latestBundleInstallations,
+  reportingInstallations,
+  state,
+  window,
+}: {
+  readonly bundleSelector: ReactNode;
+  readonly configuredPercentage: number | null;
+  readonly latestBundleInstallations: number;
+  readonly reportingInstallations: number;
+  readonly state: UpdateOutcomeState;
+  readonly window: ActiveInstallationWindow;
+}) {
+  const latestBundleShare =
+    reportingInstallations === 0
+      ? 0
+      : (latestBundleInstallations / reportingInstallations) * 100;
+
+  return (
+    <Card className="min-w-0 overflow-hidden shadow-sm">
+      <CardHeader className="gap-4 space-y-0 lg:flex-row lg:items-start lg:justify-between">
+        <div className="flex min-w-0 flex-col gap-1.5">
+          <CardTitle className="text-sm font-medium">
+            <h2 id="bundle-detail-heading">Selected bundle activity</h2>
+          </CardTitle>
+          <CardDescription>
+            Select a bundle to inspect its latest presence, applies, and
+            recoveries during this period.
+          </CardDescription>
+        </div>
+        {bundleSelector}
+      </CardHeader>
+      <CardContent className="pt-10">
+        {state.status === "idle" ? (
+          <p className="text-sm text-muted-foreground">
+            No active bundle is available.
+          </p>
+        ) : state.status === "loading" ? (
+          <div
+            aria-label="Loading update outcomes"
+            className="flex flex-col gap-4"
+          >
+            <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
+            </div>
+            <Skeleton className="h-32 w-full" />
+          </div>
+        ) : state.status === "error" ? (
+          <InsightsErrorAlert
+            error={state.error}
+            fallbackTitle="Bundle movement unavailable"
+          />
+        ) : (
+          <div className="flex min-w-0 flex-col gap-5">
+            <dl className="grid sm:grid-cols-2 lg:grid-cols-4 lg:divide-x lg:divide-border/70">
+              <div className="border-b pb-4 sm:pr-4 lg:border-b-0">
+                <dt className="text-xs text-muted-foreground">
+                  Latest bundle share
+                </dt>
+                <dd className="mt-1 text-2xl font-semibold tracking-tight tabular-nums">
+                  {Math.round(latestBundleShare)}%
+                </dd>
+                <dd className="mt-1 text-xs text-muted-foreground tabular-nums">
+                  {latestBundleInstallations.toLocaleString()} of{" "}
+                  {reportingInstallations.toLocaleString()} reporting installs
+                </dd>
+              </div>
+              <div className="border-b py-4 sm:pl-4 lg:border-b-0 lg:py-0 lg:pr-4">
+                <dt className="text-xs text-muted-foreground">Newly applied</dt>
+                <dd className="mt-1 text-2xl font-semibold tracking-tight tabular-nums">
+                  {state.data.summary.installed.toLocaleString()}
+                </dd>
+                <dd className="mt-1 text-xs text-muted-foreground">
+                  Distinct installations
+                </dd>
+              </div>
+              <div className="border-b py-4 sm:pr-4 lg:border-b-0 lg:py-0 lg:pl-4">
+                <dt className="text-xs text-muted-foreground">
+                  Recovered away
+                </dt>
+                <dd className="mt-1 text-2xl font-semibold tracking-tight tabular-nums">
+                  {state.data.summary.recovered.toLocaleString()}
+                </dd>
+                <dd className="mt-1 text-xs text-muted-foreground">
+                  Distinct installations
+                </dd>
+              </div>
+              <div className="pt-4 sm:pl-4 lg:py-0">
+                <dt className="text-xs text-muted-foreground">
+                  Configured rollout
+                </dt>
+                <dd className="mt-1 text-2xl font-semibold tracking-tight tabular-nums">
+                  {configuredPercentage === null
+                    ? "—"
+                    : `${configuredPercentage}%`}
+                </dd>
+                <dd className="mt-1 text-xs text-muted-foreground">
+                  Eligibility setting
+                </dd>
+              </div>
+            </dl>
+            <BundleActivityChart
+              installed={state.data.series.installed}
+              recovered={state.data.series.recovered}
+              window={window}
+            />
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}