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

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

@@ -0,0 +1,250 @@
+import { RefreshCw } from "lucide-react";
+
+import { HashValueDisplay } from "@/components/HashValueDisplay";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, 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 {
+  InsightsEventRow,
+  InsightsInstallationViewRow,
+  InsightsViewPage,
+} from "@/lib/insights-view";
+
+import {
+  EventBundleTransition,
+  EventTimestamp,
+  EventTypeBadge,
+  useInsightsTimeFormat,
+} from "./EventDetails";
+import { EventHistoryList } from "./EventHistoryList";
+import { InsightsErrorAlert } from "./InsightsErrorAlert";
+import { InsightsPagination } from "./InsightsPagination";
+
+const getUserLabel = (event: {
+  readonly username: string | null;
+  readonly userId: string | null;
+}) => event.userId ?? event.username ?? "—";
+
+const getLastKnownBundleId = (
+  event: InsightsEventRow | InsightsInstallationViewRow,
+) =>
+  "lastKnownBundleId" in event
+    ? event.lastKnownBundleId
+    : (event.toBundleId ?? event.fromBundleId);
+
+export function InstallationHistoryCard({
+  error,
+  history,
+  isLoading,
+  onNext,
+  onPrevious,
+  onRefresh,
+  pageNumber,
+  selectedEvent,
+  selectedInstallId,
+}: {
+  readonly error: unknown;
+  readonly history: InsightsViewPage<InsightsEventRow> | undefined;
+  readonly isLoading: boolean;
+  readonly onRefresh?: () => void;
+  readonly onNext: () => void;
+  readonly onPrevious: () => void;
+  readonly pageNumber: number;
+  readonly selectedEvent:
+    | InsightsEventRow
+    | InsightsInstallationViewRow
+    | undefined;
+  readonly selectedInstallId: string | undefined;
+}) {
+  const dateTimeFormat = useInsightsTimeFormat();
+  const lastKnownBundleId = selectedEvent
+    ? getLastKnownBundleId(selectedEvent)
+    : undefined;
+
+  return (
+    <Card className="@container min-h-0 min-w-0 shadow-sm">
+      <CardHeader className="p-4 sm:p-6">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex min-w-0 flex-col gap-1.5">
+            <CardTitle className="text-sm font-medium">
+              <h2>
+                {selectedInstallId !== undefined
+                  ? "Installation history"
+                  : "Select an installation"}
+              </h2>
+            </CardTitle>
+          </div>
+          {onRefresh && selectedInstallId !== undefined ? (
+            <Button
+              className="h-11 lg:h-8"
+              size="lg"
+              variant="outline"
+              onClick={onRefresh}
+              disabled={isLoading}
+            >
+              <RefreshCw aria-hidden="true" data-icon="inline-start" />
+              Refresh
+            </Button>
+          ) : null}
+        </div>
+      </CardHeader>
+      <CardContent className="min-h-0 p-0">
+        {selectedInstallId !== undefined && selectedEvent ? (
+          <>
+            <section
+              aria-labelledby="latest-installation-state"
+              className="px-4 pb-4 sm:px-6 sm:pb-6"
+            >
+              <h3 className="sr-only" id="latest-installation-state">
+                Latest reported state
+              </h3>
+              <dl className="grid grid-cols-2 gap-4 @[36rem]:grid-cols-3">
+                <div className="col-span-2 min-w-0 @[36rem]:col-span-1">
+                  <dt className="text-xs text-muted-foreground">User ID</dt>
+                  <dd className="mt-1 text-sm font-medium wrap-anywhere">
+                    {getUserLabel(selectedEvent)}
+                  </dd>
+                </div>
+                <div className="min-w-0">
+                  <dt className="text-xs text-muted-foreground">Install ID</dt>
+                  <dd className="mt-1 font-mono text-xs">
+                    <HashValueDisplay
+                      value={selectedInstallId}
+                      buttonClassName="min-h-11 px-3 lg:min-h-0 lg:px-1.5"
+                    />
+                  </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 ? (
+                      <HashValueDisplay
+                        value={lastKnownBundleId}
+                        buttonClassName="min-h-11 px-3 lg:min-h-0 lg:px-1.5"
+                      />
+                    ) : (
+                      "—"
+                    )}
+                  </dd>
+                </div>
+              </dl>
+            </section>
+            <Separator />
+          </>
+        ) : null}
+        {selectedInstallId !== undefined ? (
+          isLoading ? (
+            <div
+              className="flex flex-col gap-3 p-6"
+              role="status"
+              aria-label="Loading installation history"
+            >
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          ) : error ? (
+            <div className="p-6">
+              <InsightsErrorAlert
+                error={error instanceof Error ? error : new Error()}
+                fallbackTitle="Installation history unavailable"
+              />
+            </div>
+          ) : history && history.data.length > 0 ? (
+            <>
+              <div className="@[48rem]:hidden">
+                <EventHistoryList
+                  events={history.data}
+                  formatter={dateTimeFormat}
+                />
+              </div>
+              <div className="hidden @[48rem]:block">
+                <Table className="min-w-3xl table-fixed">
+                  <TableHeader>
+                    <TableRow className="[&>th]:px-4 sm:[&>th]:px-6">
+                      <TableHead className="w-64">Time</TableHead>
+                      <TableHead className="w-48">Event</TableHead>
+                      <TableHead className="w-32">App</TableHead>
+                      <TableHead className="w-52">Bundle</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {history.data.map((event) => (
+                      <TableRow
+                        className="[&>td]:px-4 [&>td]:py-4 [&>td]:align-top sm:[&>td]:px-6"
+                        key={event.id}
+                      >
+                        <TableCell className="whitespace-normal text-xs tabular-nums">
+                          <EventTimestamp
+                            value={event.receivedAtMs}
+                            formatter={dateTimeFormat}
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <EventTypeBadge type={event.type} />
+                        </TableCell>
+                        <TableCell className="whitespace-normal text-xs">
+                          <div className="flex flex-col gap-2">
+                            <span>
+                              {event.platform === "ios" ? "iOS" : "Android"}{" "}
+                              {event.appVersion}
+                            </span>
+                            <span className="text-muted-foreground">
+                              {event.channel}
+                            </span>
+                          </div>
+                        </TableCell>
+                        <TableCell className="whitespace-normal text-xs">
+                          <EventBundleTransition event={event} />
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+              <InsightsPagination
+                hasPrevious={pageNumber > 1}
+                label="Installation history"
+                nextCursor={history.nextCursor}
+                onNext={onNext}
+                onPrevious={onPrevious}
+                pageLength={history.data.length}
+                pageNumber={pageNumber}
+              />
+            </>
+          ) : (
+            <>
+              <div className="p-6 text-sm text-muted-foreground">
+                {pageNumber > 1 || history?.nextCursor
+                  ? "No bundle changes on this page."
+                  : "No bundle changes recorded yet."}
+              </div>
+              {history && (pageNumber > 1 || history.nextCursor) ? (
+                <InsightsPagination
+                  hasPrevious={pageNumber > 1}
+                  label="Installation history"
+                  nextCursor={history.nextCursor}
+                  onNext={onNext}
+                  onPrevious={onPrevious}
+                  pageLength={0}
+                  pageNumber={pageNumber}
+                />
+              ) : null}
+            </>
+          )
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,178 @@
+import { Check, ChevronDown } from "lucide-react";
+import { useId, useRef, useState } from "react";
+
+import { shortenIdentifier } from "@/components/HashValueDisplay";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type {
+  InsightsInstallationViewRow,
+  InsightsViewPage,
+} from "@/lib/insights-view";
+import { cn } from "@/lib/utils";
+
+import { InsightsErrorAlert } from "./InsightsErrorAlert";
+import { InsightsPagination } from "./InsightsPagination";
+
+const getLastKnownBundleId = (event: InsightsInstallationViewRow) =>
+  event.lastKnownBundleId;
+
+const getUserLabel = (event: InsightsInstallationViewRow) =>
+  event.userId ?? event.username ?? "—";
+
+export function InstallationMatchesCard({
+  error,
+  onNext,
+  onPrevious,
+  onSelect,
+  pageNumber,
+  results,
+  selectedInstallId,
+}: {
+  readonly error: unknown;
+  readonly onNext: () => void;
+  readonly onPrevious: () => void;
+  readonly onSelect: (installId: string) => void;
+  readonly pageNumber: number;
+  readonly results: InsightsViewPage<InsightsInstallationViewRow> | undefined;
+  readonly selectedInstallId: string | undefined;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const contentId = useId();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const canCollapse = !error && results && results.data.length > 0;
+
+  return (
+    <Card className="min-h-0 min-w-0 shadow-sm">
+      <CardHeader className="p-4 sm:px-6">
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex min-w-0 flex-col gap-1.5">
+            <CardTitle className="text-sm font-medium">
+              <h2>Matching installations</h2>
+            </CardTitle>
+          </div>
+          <div className="flex shrink-0 items-center gap-2">
+            {canCollapse ? (
+              <Button
+                aria-controls={contentId}
+                aria-expanded={expanded}
+                aria-label={
+                  expanded
+                    ? "Hide matching installations"
+                    : "Show matching installations"
+                }
+                className="size-11 lg:hidden"
+                onClick={() => setExpanded(!expanded)}
+                ref={triggerRef}
+                size="icon-lg"
+                variant="ghost"
+              >
+                <ChevronDown
+                  aria-hidden="true"
+                  className={cn(expanded && "rotate-180")}
+                />
+              </Button>
+            ) : null}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent
+        className={cn(
+          "min-h-0 p-0",
+          canCollapse && !expanded && "hidden lg:block",
+        )}
+        id={contentId}
+      >
+        {error ? (
+          <div className="p-6">
+            <InsightsErrorAlert
+              error={error instanceof Error ? error : new Error()}
+              fallbackTitle="Installation search unavailable"
+            />
+          </div>
+        ) : 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-label={`${getUserLabel(event)}, install ID ${event.installId}`}
+                    aria-pressed={isSelected}
+                    className="group flex w-full min-w-0 flex-col gap-2 border-l-2 border-transparent px-4 py-4 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 motion-reduce:transition-none sm:px-6"
+                    onClick={() => {
+                      onSelect(event.installId);
+                      setExpanded(false);
+                      triggerRef.current?.focus();
+                    }}
+                    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" />
+                          <span className="sr-only">Selected</span>
+                        </span>
+                      ) : null}
+                    </span>
+                    <span className="flex flex-wrap items-center gap-2">
+                      <span
+                        className="font-mono text-xs"
+                        title={event.installId}
+                      >
+                        {shortenIdentifier(event.installId)}
+                      </span>
+                    </span>
+                    <span className="flex min-w-0 flex-wrap items-center gap-2">
+                      <span className="text-xs text-muted-foreground">
+                        Bundle
+                      </span>
+                      {currentBundleId ? (
+                        <span
+                          className="font-mono text-xs"
+                          title={currentBundleId}
+                        >
+                          {shortenIdentifier(currentBundleId)}
+                        </span>
+                      ) : (
+                        <span className="text-sm text-muted-foreground">—</span>
+                      )}
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        ) : (
+          <div className="flex flex-wrap items-center justify-between gap-3 p-4 sm:px-6">
+            <p className="text-sm text-muted-foreground">No matches</p>
+            <a
+              className={buttonVariants({
+                variant: "outline",
+                className: "h-11 px-3 lg:h-8",
+              })}
+              href="#installation-history-search"
+            >
+              Edit search
+            </a>
+          </div>
+        )}
+        {results &&
+        (results.data.length > 0 || pageNumber > 1 || results.nextCursor) ? (
+          <InsightsPagination
+            hasPrevious={pageNumber > 1}
+            label="Installation results"
+            nextCursor={results.nextCursor}
+            onNext={onNext}
+            onPrevious={onPrevious}
+            pageLength={results.data.length}
+            pageNumber={pageNumber}
+          />
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,90 @@
+import { Search, X } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Field, FieldLabel } from "@/components/ui/field";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function InstallationSearchPanel({
+  draftQuery,
+  onDraftQueryChange,
+  onSubmit,
+  onClear,
+}: {
+  readonly draftQuery: string;
+  readonly onDraftQueryChange: (value: string) => void;
+  readonly onSubmit: () => void;
+  readonly onClear: () => void;
+}) {
+  return (
+    <form
+      aria-label="Find installation"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (draftQuery.trim()) onSubmit();
+      }}
+      role="search"
+    >
+      <Field className="gap-2">
+        <FieldLabel className="sr-only" htmlFor="installation-history-search">
+          User ID or installation ID
+        </FieldLabel>
+        <div className="flex flex-wrap gap-2">
+          <InputGroup className="h-11 w-auto min-w-0 flex-1 basis-44 lg:h-8">
+            <InputGroupAddon>
+              <Search aria-hidden="true" />
+            </InputGroupAddon>
+            <InputGroupInput
+              autoComplete="off"
+              className="h-11 text-base md:text-base lg:h-8 lg:text-xs"
+              id="installation-history-search"
+              maxLength={1024}
+              name="installation"
+              onChange={(event) => onDraftQueryChange(event.target.value)}
+              placeholder="User ID or installation ID"
+              spellCheck={false}
+              type="search"
+              value={draftQuery}
+            />
+            {draftQuery.length > 0 ? (
+              <InputGroupAddon align="inline-end">
+                <InputGroupButton
+                  aria-label="Clear installation lookup"
+                  className="size-11 lg:size-5"
+                  onClick={onClear}
+                  size="icon-xs"
+                >
+                  <X aria-hidden="true" />
+                </InputGroupButton>
+              </InputGroupAddon>
+            ) : null}
+          </InputGroup>
+          <Button
+            aria-label="Find installation"
+            className="h-11 px-3 lg:h-8"
+            disabled={draftQuery.trim().length === 0}
+            size="lg"
+            type="submit"
+            variant="outline"
+          >
+            Find
+          </Button>
+        </div>
+      </Field>
+    </form>
+  );
+}
+
+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/releases/ReleaseEditorSheet.tsx

@@ -1,4 +1,5 @@
 import {
+  getPatchBaseBundleId,
   INVALID_COHORT_ERROR_MESSAGE,
   isValidCohort,
   normalizeCohortValue,
@@ -14,7 +15,6 @@ import { toast } from "sonner";
 import { normalizeRange } from "verkit";
 
 import { BundleIdDisplay } from "@/components/BundleIdDisplay";
-import { BundleAnalyticsSummary } from "@/components/features/bundles/BundleAnalyticsSummary";
 import { BundleMetadata } from "@/components/features/bundles/BundleMetadata";
 import { RolloutCohortsDialog } from "@/components/features/bundles/RolloutCohortsDialog";
 import { PlatformIcon } from "@/components/PlatformIcon";
@@ -215,6 +215,7 @@ export function ReleaseEditorSheet({
   const release = releaseQuery.data;
   const bundleQuery = useBundleQuery(release?.bundle_id ?? "");
   const bundle = bundleQuery.data;
+  const patchBaseBundleId = bundle ? getPatchBaseBundleId(bundle) : null;
   const diagnostics = useReleaseCatalogDiagnosticsQuery(
     release?.scope_key ?? "",
   );
@@ -295,6 +296,7 @@ export function ReleaseEditorSheet({
       await preflight.mutateAsync(input);
       await update.mutateAsync(input);
       toast.success("Bundle settings saved");
+      onOpenChange(false);
     } catch (caught) {
       setError(
         caught instanceof Error
@@ -357,21 +359,18 @@ export function ReleaseEditorSheet({
                   </div>
                 </div>
                 <div className="flex flex-wrap items-start gap-2">
-                  <span className="font-medium text-muted-foreground">
-                    Bundle
-                  </span>
+                  <span className="font-medium text-muted-foreground">ID</span>
                   <span className="min-w-0 basis-full sm:basis-auto">
-                    {release.bundle_id ? (
-                      <BundleIdDisplay
-                        bundleId={release.bundle_id}
-                        fullOnMobile
-                        maxLength={18}
-                      />
-                    ) : (
+                    <BundleIdDisplay
+                      bundleId={release.id}
+                      fullOnMobile
+                      maxLength={18}
+                    />
+                    {!release.bundle_id ? (
                       <span className="text-xs text-foreground">
                         Built-in app
                       </span>
-                    )}
+                    ) : null}
                   </span>
                 </div>
                 <div className="flex flex-wrap items-center gap-2">
@@ -409,10 +408,6 @@ export function ReleaseEditorSheet({
 
             {release && draft ? (
               <div className="flex flex-col gap-6 px-4 pb-4 sm:px-6 sm:pb-6">
-                {release.bundle_id ? (
-                  <BundleAnalyticsSummary bundleId={release.bundle_id} />
-                ) : null}
-
                 <section
                   aria-labelledby="delivery-settings-heading"
                   className="flex flex-col gap-4"
@@ -478,7 +473,7 @@ export function ReleaseEditorSheet({
                       </div>
                       <FieldDescription>
                         Disabling rolls devices back to the previous enabled
-                        Release on their next check, or to the built-in app when
+                        bundle on their next check, or to the built-in app when
                         none remains.
                       </FieldDescription>
                     </Field>
@@ -655,9 +650,9 @@ export function ReleaseEditorSheet({
                   </summary>
                   <dl className="mt-4 grid gap-3 text-muted-foreground sm:grid-cols-2">
                     <div className="sm:col-span-2">
-                      <dt>Release ID</dt>
+                      <dt>Artifact ID</dt>
                       <dd className="mt-1 break-all font-mono text-foreground">
-                        {release.id}
+                        {release.bundle_id ?? "Built-in app"}
                       </dd>
                     </div>
                     <div>
@@ -666,6 +661,14 @@ export function ReleaseEditorSheet({
                         {release.revision}
                       </dd>
                     </div>
+                    {patchBaseBundleId ? (
+                      <div className="sm:col-span-2">
+                        <dt>Patch base artifact ID</dt>
+                        <dd className="mt-1 break-all font-mono text-foreground">
+                          {patchBaseBundleId}
+                        </dd>
+                      </div>
+                    ) : null}
                     <div>
                       <dt>Catalog generation</dt>
                       <dd className="mt-1 font-mono text-foreground">
@@ -730,8 +733,8 @@ export function ReleaseEditorSheet({
               Remove this Bundle from {channelName ?? "the channel"}?
             </AlertDialogTitle>
             <AlertDialogDescription>
-              The Bundle file stays available. This only removes it from the
-              channel.
+              The uploaded artifact stays available. This only removes the
+              Bundle from the channel.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
@@ -850,9 +853,6 @@ export function ReleaseEditorSheet({
                     isCopyPromotion
                       ? `Bundle copied to ${normalizedTargetChannel}`
                       : `Bundle moved to ${normalizedTargetChannel}`,
-                    release.bundle_id
-                      ? { description: `bundleId: ${release.bundle_id}` }
-                      : undefined,
                   );
                 } catch (caught) {
                   toast.error(