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

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

@@ -1,138 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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/analytics/InstallationSearch.tsx

@@ -1,230 +0,0 @@
-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 { isAnalyticsQueryEnabled } from "@/lib/analytics-api";
-import {
-  type InstallationSearchRow,
-  useInstallationSearchQuery,
-} from "@/lib/api";
-
-import { useAnalyticsCapability } from "./AnalyticsCapabilityContext";
-
-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 = useAnalyticsCapability();
-  const normalizedInitialQuery = initialQuery.trim();
-  const [draftQuery, setDraftQuery] = useState(normalizedInitialQuery);
-  const [submittedQuery, setSubmittedQuery] = useState(normalizedInitialQuery);
-  const [offset, setOffset] = useState(0);
-  const queryEnabled =
-    isAnalyticsQueryEnabled(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="analytics-installation-search">
-            User ID or install ID
-          </label>
-          <InputGroup className="h-9">
-            <InputGroupAddon>
-              <Search aria-hidden="true" />
-            </InputGroupAddon>
-            <InputGroupInput
-              id="analytics-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/analytics/UpdateOutcomes.tsx

@@ -1,147 +0,0 @@
-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 { BundleEventAnalytics } from "@/lib/api";
-
-import { BundleActivityChart } from "../bundles/BundleActivityChart";
-import { AnalyticsErrorAlert } from "./AnalyticsErrorAlert";
-
-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: BundleEventAnalytics;
-    };
-
-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" ? (
-          <AnalyticsErrorAlert
-            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>
-  );
-}