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

package/src/components/features/analytics/BundleSelector.tsx

@@ -0,0 +1,114 @@
+import { Button } from "@/components/ui/button";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+} from "@/components/ui/combobox";
+import { Field, FieldLabel } from "@/components/ui/field";
+
+type BundleOption = {
+  readonly bundleId: string;
+  readonly description: string;
+};
+
+export function BundleSelector({
+  bundleId,
+  bundles,
+  onBundleChange,
+}: {
+  readonly bundleId: string;
+  readonly bundles: readonly BundleOption[];
+  readonly onBundleChange: (bundleId: string) => void;
+}) {
+  const selectedBundle =
+    bundles.find((bundle) => bundle.bundleId === bundleId) ?? null;
+
+  return (
+    <Field
+      className="w-full min-w-0 sm:max-w-md"
+      data-disabled={!bundles.length}
+    >
+      <FieldLabel htmlFor="analytics-bundle-selector">
+        Bundle to inspect
+      </FieldLabel>
+      <Combobox
+        autoHighlight
+        disabled={!bundles.length}
+        filter={(bundle, query) => {
+          const normalizedQuery = query.trim().toLowerCase();
+          return (
+            bundle.bundleId.toLowerCase().includes(normalizedQuery) ||
+            bundle.description.toLowerCase().includes(normalizedQuery)
+          );
+        }}
+        isItemEqualToValue={(bundle, value) =>
+          bundle.bundleId === value.bundleId
+        }
+        items={bundles}
+        itemToStringLabel={(bundle) => bundle.bundleId}
+        onValueChange={(bundle) => {
+          if (bundle) onBundleChange(bundle.bundleId);
+        }}
+        value={selectedBundle}
+      >
+        <ComboboxTrigger
+          aria-label="Bundle to inspect"
+          id="analytics-bundle-selector"
+          render={
+            <Button
+              className="h-auto min-h-12 w-full min-w-0 justify-between px-3 py-2 text-left"
+              size="lg"
+              variant="outline"
+            />
+          }
+        >
+          {selectedBundle ? (
+            <span className="flex min-w-0 flex-1 flex-col items-start gap-1">
+              <code className="max-w-full truncate text-xs/4">
+                {selectedBundle.bundleId}
+              </code>
+              <span className="max-w-full truncate text-xs/4 text-muted-foreground">
+                {selectedBundle.description}
+              </span>
+            </span>
+          ) : (
+            <span className="truncate text-muted-foreground">
+              No bundles available
+            </span>
+          )}
+        </ComboboxTrigger>
+        <ComboboxContent className="min-w-(--anchor-width)">
+          <ComboboxInput
+            aria-label="Search bundles"
+            placeholder="Search by bundle ID or description"
+            showClear
+            showTrigger={false}
+          />
+          <ComboboxEmpty>No bundles found.</ComboboxEmpty>
+          <ComboboxList>
+            {(bundle) => (
+              <ComboboxItem
+                className="min-h-12 px-3 py-2"
+                key={bundle.bundleId}
+                value={bundle}
+              >
+                <span className="flex min-w-0 flex-col gap-1 pr-5">
+                  <code className="max-w-72 truncate text-xs/4">
+                    {bundle.bundleId}
+                  </code>
+                  <span className="truncate text-xs/4 text-muted-foreground">
+                    {bundle.description}
+                  </span>
+                </span>
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    </Field>
+  );
+}

package/src/components/features/analytics/InstallationHistoryCard.tsx

@@ -0,0 +1,248 @@
+import { 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 { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type {
+  InstallationHistoryResult,
+  InstallationHistoryRow,
+  InstallationSearchRow,
+} from "@/lib/api";
+
+import { InstallationPagination } from "./InstallationPagination";
+
+const formatDateTime = (value: string | number | Date | null | undefined) => {
+  if (!value) return "—";
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return "—";
+  return new Intl.DateTimeFormat(undefined, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+    timeZone: "UTC",
+  }).format(date);
+};
+
+const getUserLabel = (event: {
+  readonly username: string | null;
+  readonly userId: string | null;
+}) => event.userId ?? event.username ?? "—";
+
+const getLastKnownBundleId = (
+  event: InstallationHistoryRow | InstallationSearchRow,
+) =>
+  "lastKnownBundleId" in event
+    ? event.lastKnownBundleId
+    : (event.toBundleId ?? event.fromBundleId);
+
+export function InstallationHistoryCard({
+  error,
+  history,
+  isLoading,
+  limit,
+  offset,
+  onOffsetChange,
+  selectedEvent,
+  selectedInstallId,
+}: {
+  readonly error: unknown;
+  readonly history: InstallationHistoryResult | undefined;
+  readonly isLoading: boolean;
+  readonly limit: number;
+  readonly offset: number;
+  readonly onOffsetChange: (offset: number) => void;
+  readonly selectedEvent:
+    | InstallationHistoryRow
+    | InstallationSearchRow
+    | undefined;
+  readonly selectedInstallId: string;
+}) {
+  const lastKnownBundleId = selectedEvent
+    ? getLastKnownBundleId(selectedEvent)
+    : undefined;
+
+  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>
+                {selectedInstallId
+                  ? "Installation history"
+                  : "Select an installation"}
+              </h2>
+            </CardTitle>
+            <CardDescription>
+              {selectedInstallId
+                ? "Recorded bundle changes for this installation."
+                : "Choose a match to view its recorded bundle changes."}
+            </CardDescription>
+          </div>
+          {history && history.pagination.total > 0 ? (
+            <Badge variant="outline">{history.pagination.total} events</Badge>
+          ) : null}
+        </div>
+      </CardHeader>
+      <CardContent className="min-h-0 p-0">
+        {selectedInstallId ? (
+          isLoading ? (
+            <div className="flex flex-col gap-3 p-5">
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          ) : history && history.data.length > 0 ? (
+            <>
+              <section
+                aria-labelledby="latest-installation-state"
+                className="px-6 pb-6"
+              >
+                <h3
+                  className="text-xs font-medium"
+                  id="latest-installation-state"
+                >
+                  Latest reported state
+                </h3>
+                <dl className="mt-4 grid gap-6 xl:grid-cols-3">
+                  <div className="min-w-0">
+                    <dt className="text-xs text-muted-foreground">
+                      Installation
+                    </dt>
+                    <dd className="mt-1 font-mono text-xs">
+                      <BundleIdDisplay bundleId={selectedInstallId} />
+                    </dd>
+                  </div>
+                  <div className="min-w-0">
+                    <dt className="text-xs text-muted-foreground">User ID</dt>
+                    <dd className="mt-1 truncate text-xs font-medium">
+                      {selectedEvent ? getUserLabel(selectedEvent) : "—"}
+                    </dd>
+                  </div>
+                  <div className="min-w-0">
+                    <dt className="text-xs text-muted-foreground">
+                      Last known bundle
+                    </dt>
+                    <dd className="mt-1 font-mono text-xs">
+                      {lastKnownBundleId ? (
+                        <BundleIdDisplay bundleId={lastKnownBundleId} />
+                      ) : (
+                        "—"
+                      )}
+                    </dd>
+                  </div>
+                </dl>
+              </section>
+              <Separator />
+              <Table className="min-w-3xl table-fixed">
+                <TableHeader>
+                  <TableRow className="hover:bg-transparent [&>th]:h-12 [&>th]:px-5">
+                    <TableHead className="w-1/5 whitespace-normal">
+                      Reported (UTC)
+                    </TableHead>
+                    <TableHead className="w-1/6 whitespace-normal">
+                      App version
+                    </TableHead>
+                    <TableHead className="w-1/5 whitespace-normal">
+                      Change
+                    </TableHead>
+                    <TableHead className="whitespace-normal">
+                      Bundle transition
+                    </TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {history.data.map((event) => (
+                    <TableRow
+                      className="[&>td]:px-5 [&>td]:py-4"
+                      key={event.id}
+                    >
+                      <TableCell className="whitespace-normal align-top text-sm text-muted-foreground">
+                        {formatDateTime(event.receivedAtMs)}
+                      </TableCell>
+                      <TableCell className="whitespace-normal align-top font-mono text-xs">
+                        {event.appVersion}
+                      </TableCell>
+                      <TableCell className="whitespace-normal align-top">
+                        <Badge variant="secondary">
+                          {event.type === "UPDATE_APPLIED"
+                            ? "Bundle applied"
+                            : "Recovered"}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="whitespace-normal align-top">
+                        <div className="grid grid-cols-[2rem_minmax(0,1fr)] gap-x-3 gap-y-3">
+                          <span className="text-muted-foreground">From</span>
+                          {event.fromBundleId ? (
+                            <BundleIdDisplay bundleId={event.fromBundleId} />
+                          ) : (
+                            "—"
+                          )}
+                          <span className="text-muted-foreground">To</span>
+                          {event.toBundleId ? (
+                            <BundleIdDisplay bundleId={event.toBundleId} />
+                          ) : (
+                            "—"
+                          )}
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+              <InstallationPagination
+                label="Installation history"
+                limit={limit}
+                offset={offset}
+                pageLength={history.data.length}
+                total={history.pagination.total}
+                onOffsetChange={onOffsetChange}
+              />
+            </>
+          ) : error ? (
+            <div className="p-5 pt-0">
+              <Alert variant="destructive">
+                <TriangleAlert aria-hidden="true" />
+                <AlertTitle>Installation history unavailable</AlertTitle>
+                <AlertDescription>
+                  {error instanceof Error
+                    ? error.message
+                    : "Failed to load installation history."}
+                </AlertDescription>
+              </Alert>
+            </div>
+          ) : (
+            <div className="p-5 pt-0 text-sm text-muted-foreground">
+              No history is available for this installation.
+            </div>
+          )
+        ) : (
+          <div className="p-5 pt-0 text-sm text-muted-foreground">
+            Choose an installation to inspect its update history.
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/features/analytics/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/analytics/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="/analytics"
+      >
+        <ArrowLeft aria-hidden="true" data-icon="inline-start" />
+        Back to Analytics
+      </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/analytics/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>
+  );
+}