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

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

@@ -1,114 +0,0 @@
-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="insights-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="insights-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/insights/InsightsCapabilityContext.tsx

@@ -1,24 +0,0 @@
-import { createContext, useContext, type ReactNode } from "react";
-
-import type { InsightsCapabilityState } from "@/lib/insights-api";
-
-const InsightsCapabilityContext = createContext<InsightsCapabilityState>({
-  status: "unresolved",
-});
-
-export function InsightsCapabilityProvider({
-  children,
-  value,
-}: {
-  readonly children: ReactNode;
-  readonly value: InsightsCapabilityState;
-}) {
-  return (
-    <InsightsCapabilityContext.Provider value={value}>
-      {children}
-    </InsightsCapabilityContext.Provider>
-  );
-}
-
-export const useInsightsCapability = (): InsightsCapabilityState =>
-  useContext(InsightsCapabilityContext);

package/src/components/features/insights/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/insights/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 {
-  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

@@ -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 { 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>
-  );
-}

package/src/lib/insights-error.ts

@@ -1,19 +0,0 @@
-export type InsightsErrorCopy = {
-  readonly title: string;
-  readonly description: string;
-};
-
-export const getInsightsErrorCopy = (
-  error: Error,
-  fallbackTitle: string,
-): InsightsErrorCopy => {
-  const match = /^Bundle event scan exceeded (\d+) rows\.$/.exec(error.message);
-  if (!match) {
-    return { title: fallbackTitle, description: error.message };
-  }
-  const limit = Number(match[1]);
-  return {
-    title: "Insights report limit reached",
-    description: `This query matched more than ${limit.toLocaleString()} reports. Narrow the query and try again.`,
-  };
-};