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

package/src/components/AppSidebar.tsx

@@ -8,7 +8,6 @@ import {
   Sun,
 } from "lucide-react";
 
-import { useAnalyticsCapability } from "@/components/features/analytics/AnalyticsCapabilityContext";
 import { HotUpdaterLogo } from "@/components/HotUpdaterLogo";
 import { useTheme } from "@/components/ThemeProvider";
 import {
@@ -26,15 +25,14 @@ import {
 import { useApiKeyCapabilityQuery } from "@/lib/api-keys-api";
 
 export function AppSidebar() {
-  const analyticsCapability = useAnalyticsCapability();
   const apiKeyCapability = useApiKeyCapabilityQuery();
   const { theme, setTheme } = useTheme();
   const routerState = useRouterState();
   const currentPath = routerState.location.pathname;
 
   const isBundlesActive = currentPath === "/";
-  const isAnalyticsActive =
-    currentPath === "/analytics" || currentPath === "/installations";
+  const isInsightsActive =
+    currentPath === "/insights" || currentPath === "/installations";
   const isApiKeysActive = currentPath === "/api-keys";
   const isSigningActive = currentPath === "/signing";
 
@@ -98,18 +96,16 @@ export function AppSidebar() {
                   <span>Bundles</span>
                 </SidebarMenuButton>
               </SidebarMenuItem>
-              {analyticsCapability.status === "supported" ? (
-                <SidebarMenuItem>
-                  <SidebarMenuButton
-                    isActive={isAnalyticsActive}
-                    render={<Link to="/analytics" />}
-                    tooltip="Analytics"
-                  >
-                    <ChartNoAxesCombined />
-                    <span>Analytics</span>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              ) : null}
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  isActive={isInsightsActive}
+                  render={<Link to="/insights" />}
+                  tooltip="Insights"
+                >
+                  <ChartNoAxesCombined />
+                  <span>Insights</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
               {apiKeyCapability.data?.apiKeys ? (
                 <SidebarMenuItem>
                   <SidebarMenuButton

package/src/components/ConsoleAccessPage.tsx

@@ -67,7 +67,7 @@ export function ConsoleAccessPage({
           <div>
             <h1 className="text-lg font-semibold">Hot Updater Console</h1>
             <p className="text-muted-foreground text-sm">
-              Sign in to manage OTA releases.
+              Sign in to manage OTA bundles.
             </p>
           </div>
         </div>

package/src/components/HashValueDisplay.tsx

@@ -8,15 +8,22 @@ interface HashValueDisplayProps {
   value: string;
   maxLength?: number;
   className?: string;
+  buttonClassName?: string;
 }
 
+export const shortenIdentifier = (value: string, maxLength = 12) =>
+  value.length > maxLength
+    ? `${value.slice(0, Math.max(1, maxLength - 4))}…${value.slice(-4)}`
+    : value;
+
 export function HashValueDisplay({
   value,
   maxLength = 12,
   className,
+  buttonClassName,
 }: HashValueDisplayProps) {
   const isTruncated = value.length > maxLength;
-  const truncated = isTruncated ? value.slice(0, maxLength) : value;
+  const truncated = shortenIdentifier(value, maxLength);
 
   const copyValue = async () => {
     try {
@@ -61,12 +68,14 @@ export function HashValueDisplay({
         render={
           <button
             type="button"
+            aria-label={`Copy full value: ${value}`}
             translate="no"
             className={cn(
               "ring-ring/30 bg-muted/40 border-border/70 inline-flex min-w-0 max-w-full cursor-pointer items-center rounded-md border px-1.5 py-0.5 align-top shadow-xs outline-none transition-[background-color,border-color,transform,box-shadow]",
               "hover:bg-muted/70 active:scale-[0.98] active:bg-muted/85 focus-visible:ring-[2px]",
-              "touch-manipulation select-none",
+              "touch-manipulation select-none motion-reduce:transition-none motion-reduce:active:scale-100",
               !isTruncated && "cursor-copy",
+              buttonClassName,
             )}
             onClick={handleClick}
             onKeyDown={handleKeyDown}

package/src/components/features/api-keys/ApiKeysPage.tsx

@@ -236,7 +236,7 @@ function RevokeApiKeyDialog({ record }: { record: ApiKeyView }) {
           <AlertDialogTitle>Revoke {record.name}?</AlertDialogTitle>
           <AlertDialogDescription>
             Apps using {record.prefix}… will immediately lose OTA update and
-            analytics access. This action cannot be undone.
+            insights access. This action cannot be undone.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>

package/src/components/features/bundles/BundleChildrenPanel.tsx

@@ -40,9 +40,10 @@ export function BundleChildrenPanel({
       id={panelId}
     >
       <div className="flex flex-col gap-4">
+        <h3 className="text-sm font-medium">Advanced artifact diagnostics</h3>
         <div className="flex flex-wrap items-center justify-between gap-3">
           <div className="flex min-w-0 items-start gap-2 text-sm sm:items-center">
-            <span className="text-muted-foreground">Base bundle</span>
+            <span className="text-muted-foreground">Base artifact ID</span>
             <BundleIdDisplay bundleId={bundle.id} fullOnMobile maxLength={18} />
           </div>
           <Badge variant="outline">
@@ -58,7 +59,7 @@ export function BundleChildrenPanel({
         ) : bundles.length > 0 ? (
           <div className="flex flex-col gap-2">
             <div className="text-xs font-semibold uppercase text-muted-foreground/70">
-              Patch bundles from this base
+              Patch artifacts from this base
             </div>
             {isMobile ? (
               <div className="flex flex-col gap-2">
@@ -70,7 +71,7 @@ export function BundleChildrenPanel({
                     <div className="flex flex-col gap-3">
                       <div className="space-y-1">
                         <div className="text-[11px] font-medium uppercase text-muted-foreground/70">
-                          Patch Bundle
+                          Target artifact ID
                         </div>
                         <BundleIdDisplay
                           bundleId={childBundle.id}
@@ -130,7 +131,7 @@ export function BundleChildrenPanel({
                 <Table className="min-w-max">
                   <TableHeader>
                     <TableRow className="hover:bg-transparent">
-                      <TableHead>Patch Bundle</TableHead>
+                      <TableHead>Target artifact ID</TableHead>
                       <TableHead>Relation</TableHead>
                       <TableHead>Artifact</TableHead>
                       <TableHead>Created</TableHead>
@@ -188,10 +189,10 @@ export function BundleChildrenPanel({
         ) : (
           <div className="flex flex-col gap-2">
             <div className="text-xs font-semibold uppercase text-muted-foreground/70">
-              Patch bundles from this base
+              Patch artifacts from this base
             </div>
             <div className="rounded-md border bg-background p-3 text-sm text-muted-foreground">
-              No direct patch bundles.
+              No direct patch artifacts.
             </div>
           </div>
         )}

package/src/components/features/bundles/BundleMetadata.tsx

@@ -1,12 +1,7 @@
-import {
-  getPatchBaseBundleId,
-  getPatchBaseFileHash,
-  getPatchFileHash,
-} from "@hot-updater/core";
+import { getPatchBaseFileHash, getPatchFileHash } from "@hot-updater/core";
 import type { Bundle, ReleaseRow } from "@hot-updater/plugin-core";
 import { ExternalLink } from "lucide-react";
 
-import { BundleIdDisplay } from "@/components/BundleIdDisplay";
 import { HashValueDisplay } from "@/components/HashValueDisplay";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useConfigQuery } from "@/lib/api";
@@ -28,7 +23,6 @@ function Row({ label, value }: { label: string; value: React.ReactNode }) {
 
 export function BundleMetadata({ bundle, release }: BundleMetadataProps) {
   const { data: configData, isFetched } = useConfigQuery();
-  const patchBaseBundleId = bundle ? getPatchBaseBundleId(bundle) : null;
   const hbcPatchFileHash = bundle ? getPatchFileHash(bundle) : null;
   const hbcPatchBaseFileHash = bundle ? getPatchBaseFileHash(bundle) : null;
   const gitCommitUrl =
@@ -43,7 +37,6 @@ export function BundleMetadata({ bundle, release }: BundleMetadataProps) {
     target ||
     bundle?.gitCommitHash ||
     bundle?.fileHash ||
-    patchBaseBundleId ||
     hbcPatchBaseFileHash ||
     hbcPatchFileHash;
 
@@ -101,18 +94,6 @@ export function BundleMetadata({ bundle, release }: BundleMetadataProps) {
               }
             />
           ) : null}
-          {patchBaseBundleId ? (
-            <Row
-              label="Patch base"
-              value={
-                <BundleIdDisplay
-                  bundleId={patchBaseBundleId}
-                  fullOnMobile
-                  maxLength={18}
-                />
-              }
-            />
-          ) : null}
           {hbcPatchBaseFileHash ? (
             <Row
               label="Base hash"

package/src/components/features/channels/ChannelManagementDialog.tsx

@@ -107,7 +107,7 @@ export function ChannelManagementDialog({
               Channels
             </DialogTitle>
             <DialogDescription>
-              Create deployment channels and remove them when no Release uses
+              Create deployment channels and remove them when no bundle uses
               them. Empty channels remain available until you delete them.
             </DialogDescription>
           </DialogHeader>

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

@@ -0,0 +1,151 @@
+import {
+  Activity,
+  Check,
+  ChevronDown,
+  PackageCheck,
+  RotateCcw,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { HashValueDisplay } from "@/components/HashValueDisplay";
+import { Badge } from "@/components/ui/badge";
+import type { InsightsEventRow } from "@/lib/insights-view";
+
+type EventHistoryRow = InsightsEventRow;
+
+const eventTypes = {
+  UPDATE_APPLIED: { label: "Bundle applied", variant: "success", icon: Check },
+  RECOVERED: { label: "Recovered", variant: "warning", icon: RotateCcw },
+  RELEASE_ADOPTED: {
+    label: "Bundle adopted",
+    variant: "success",
+    icon: PackageCheck,
+  },
+  UNCHANGED: {
+    label: "Activity reported",
+    variant: "secondary",
+    icon: Activity,
+  },
+} as const;
+
+export function useInsightsTimeFormat() {
+  const [timeZone, setTimeZone] = useState("UTC");
+  useEffect(() => {
+    setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone);
+  }, []);
+  return new Intl.DateTimeFormat("en", {
+    timeZone,
+    timeZoneName: "shortOffset",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hourCycle: "h23",
+  });
+}
+
+export function formatInsightsTimestamp(
+  value: number,
+  formatter: Intl.DateTimeFormat,
+) {
+  const parts = Object.fromEntries(
+    formatter
+      .formatToParts(new Date(value))
+      .map(({ type, value }) => [type, value]),
+  );
+  const offset = parts.timeZoneName === "GMT" ? "GMT+0" : parts.timeZoneName;
+  return `${parts.year}/${parts.month}/${parts.day} ${parts.hour}:${parts.minute}:${parts.second} ${offset}`;
+}
+
+export function EventTimestamp({
+  value,
+  formatter,
+  touch = false,
+}: {
+  readonly value: number;
+  readonly formatter: Intl.DateTimeFormat;
+  readonly touch?: boolean;
+}) {
+  const date = new Date(value);
+  const localTime = formatInsightsTimestamp(value, formatter);
+  return (
+    <details className="group/time">
+      <summary
+        className={`cursor-pointer list-none rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/30 [&::-webkit-details-marker]:hidden ${touch ? "flex min-h-11 items-center" : ""}`}
+      >
+        <span className="flex items-center gap-1">
+          <time dateTime={date.toISOString()} className="whitespace-nowrap">
+            {localTime}
+          </time>
+          <ChevronDown
+            aria-hidden="true"
+            className="size-3 text-muted-foreground group-open/time:rotate-180"
+          />
+        </span>
+      </summary>
+      <p className="mt-2 text-muted-foreground">
+        {date.toISOString().replace("T", " ").replace("Z", " UTC")}
+      </p>
+    </details>
+  );
+}
+
+export function EventTypeBadge({
+  type,
+}: {
+  readonly type: EventHistoryRow["type"];
+}) {
+  const eventType = eventTypes[type];
+  const Icon = eventType.icon;
+  return (
+    <Badge
+      variant={eventType.variant}
+      className="gap-1 whitespace-nowrap [&_svg]:size-3"
+      title={
+        type === "UNCHANGED"
+          ? "App activity reported on the current bundle without a bundle transition."
+          : type === "RELEASE_ADOPTED"
+            ? "A different release was adopted without changing the bundle."
+            : undefined
+      }
+    >
+      <Icon aria-hidden="true" />
+      {eventType.label}
+    </Badge>
+  );
+}
+
+export function EventBundleTransition({
+  event,
+  touch = false,
+}: {
+  readonly event: Pick<EventHistoryRow, "type" | "fromBundleId" | "toBundleId">;
+  readonly touch?: boolean;
+}) {
+  return (
+    <dl className="grid grid-cols-[auto_minmax(0,1fr)] items-center gap-x-2 gap-y-2">
+      {event.fromBundleId ? (
+        <>
+          <dt className="text-muted-foreground">From</dt>
+          <dd>
+            <HashValueDisplay
+              value={event.fromBundleId}
+              buttonClassName={touch ? "min-h-11 px-3" : undefined}
+            />
+          </dd>
+        </>
+      ) : null}
+      <dt className="text-muted-foreground">
+        {event.type === "UNCHANGED" ? "Current" : "To"}
+      </dt>
+      <dd>
+        <HashValueDisplay
+          value={event.toBundleId}
+          buttonClassName={touch ? "min-h-11 px-3" : undefined}
+        />
+      </dd>
+    </dl>
+  );
+}

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

@@ -0,0 +1,245 @@
+import { Link } from "@tanstack/react-router";
+import { ArrowUpRight, RefreshCw } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { HashValueDisplay } from "@/components/HashValueDisplay";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { InsightsEventRow, InsightsViewPage } from "@/lib/insights-view";
+
+import {
+  EventBundleTransition,
+  EventTimestamp,
+  EventTypeBadge,
+  useInsightsTimeFormat,
+} from "./EventDetails";
+import { EventHistoryList } from "./EventHistoryList";
+import { InsightsErrorAlert } from "./InsightsErrorAlert";
+import { InsightsPagination } from "./InsightsPagination";
+
+type EventsLocationState = {
+  readonly eventsBefore: number;
+  readonly eventsCursor?: string;
+};
+
+function EventIdentity({
+  event,
+  eventsLocation,
+  touch = false,
+}: {
+  readonly event: InsightsEventRow;
+  readonly eventsLocation: EventsLocationState;
+  readonly touch?: boolean;
+}) {
+  return (
+    <div
+      className={
+        touch
+          ? "flex min-w-0 flex-wrap items-center justify-between gap-2"
+          : "flex min-w-0 flex-col items-start gap-2"
+      }
+    >
+      <Link
+        className={buttonVariants({
+          className: touch
+            ? "-ml-2 h-auto min-h-11 min-w-0 flex-1 justify-start gap-2 whitespace-normal text-sm"
+            : "-ml-2 max-w-full justify-start",
+          size: "sm",
+          variant: "ghost",
+        })}
+        to="/installations"
+        search={{
+          ...eventsLocation,
+          query: event.installId || undefined,
+          installId: event.installId,
+        }}
+        aria-label={`View history for ${event.userId ?? event.username ?? "anonymous installation"} (${event.installId})`}
+      >
+        <span
+          className={touch ? "min-w-0 text-left wrap-anywhere" : "truncate"}
+        >
+          {event.userId ?? event.username ?? "Anonymous installation"}
+        </span>
+        <ArrowUpRight aria-hidden="true" data-icon="inline-end" />
+      </Link>
+      <HashValueDisplay
+        value={event.installId}
+        maxLength={13}
+        buttonClassName={touch ? "min-h-11 px-3" : undefined}
+      />
+    </div>
+  );
+}
+
+export function EventHistoryCard({
+  children,
+  error,
+  eventsLocation,
+  history,
+  isFetching,
+  isLoading,
+  onNext,
+  onPrevious,
+  onRefresh,
+  pageNumber,
+  title = "All events",
+}: {
+  readonly children?: ReactNode;
+  readonly error: Error | null;
+  readonly eventsLocation: EventsLocationState;
+  readonly history: InsightsViewPage<InsightsEventRow> | undefined;
+  readonly isFetching: boolean;
+  readonly isLoading: boolean;
+  readonly onNext: () => void;
+  readonly onPrevious: () => void;
+  readonly onRefresh: () => void;
+  readonly pageNumber: number;
+  readonly title?: string;
+}) {
+  const dateTimeFormat = useInsightsTimeFormat();
+  const hasPrevious = pageNumber > 1;
+
+  return (
+    <Card className="@container min-w-0 shadow-sm" aria-busy={isFetching}>
+      <CardHeader className="gap-4 p-4 sm:p-6">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <CardTitle>
+            <h2>{title}</h2>
+          </CardTitle>
+          <Button
+            className="h-11 lg:h-8"
+            disabled={isFetching}
+            onClick={onRefresh}
+            size="lg"
+            variant="outline"
+          >
+            <RefreshCw aria-hidden="true" data-icon="inline-start" />
+            Refresh
+          </Button>
+        </div>
+        {children}
+      </CardHeader>
+      <CardContent className="min-w-0 p-0">
+        {isLoading ? (
+          <div
+            className="flex flex-col gap-4 p-6"
+            role="status"
+            aria-label="Loading events"
+          >
+            <Skeleton className="h-12 w-full" />
+            <Skeleton className="h-12 w-full" />
+            <Skeleton className="h-12 w-full" />
+          </div>
+        ) : error ? (
+          <div className="px-6 pb-6">
+            <InsightsErrorAlert
+              error={error}
+              fallbackTitle="Event history unavailable"
+            />
+          </div>
+        ) : history ? (
+          <>
+            {history.data.length > 0 ? (
+              <>
+                <div className="@[58rem]:hidden">
+                  <EventHistoryList
+                    events={history.data}
+                    formatter={dateTimeFormat}
+                    renderIdentity={(event) => (
+                      <EventIdentity
+                        event={event}
+                        eventsLocation={eventsLocation}
+                        touch
+                      />
+                    )}
+                  />
+                </div>
+                <div className="hidden @[58rem]:block">
+                  <Table className="min-w-4xl 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-48">
+                          User / installation
+                        </TableHead>
+                        <TableHead className="w-32">App</TableHead>
+                        <TableHead className="w-52">Bundle</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {history.data.map((event) => (
+                        <TableRow
+                          key={event.id}
+                          className="[&>td]:px-4 [&>td]:py-4 [&>td]:align-top sm:[&>td]:px-6"
+                        >
+                          <TableCell className="whitespace-normal text-xs tabular-nums">
+                            <EventTimestamp
+                              value={event.receivedAtMs}
+                              formatter={dateTimeFormat}
+                            />
+                          </TableCell>
+                          <TableCell>
+                            <EventTypeBadge type={event.type} />
+                          </TableCell>
+                          <TableCell>
+                            <EventIdentity
+                              event={event}
+                              eventsLocation={eventsLocation}
+                            />
+                          </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>
+              </>
+            ) : (
+              <div className="px-6 pb-6 text-sm text-muted-foreground">
+                {hasPrevious || history.nextCursor
+                  ? "No events on this page"
+                  : title === "All events"
+                    ? "No events recorded yet"
+                    : "No matching reports in this period"}
+              </div>
+            )}
+            {history.data.length > 0 || hasPrevious || history.nextCursor ? (
+              <InsightsPagination
+                hasPrevious={hasPrevious}
+                label={title}
+                nextCursor={history.nextCursor}
+                onNext={onNext}
+                onPrevious={onPrevious}
+                pageLength={history.data.length}
+                pageNumber={pageNumber}
+              />
+            ) : null}
+          </>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,63 @@
+import type { ReactNode } from "react";
+
+import type { InsightsEventRow } from "@/lib/insights-view";
+
+import {
+  EventBundleTransition,
+  EventTimestamp,
+  EventTypeBadge,
+} from "./EventDetails";
+
+export function EventHistoryList<T extends InsightsEventRow>({
+  events,
+  formatter,
+  renderIdentity,
+}: {
+  readonly events: readonly T[];
+  readonly formatter: Intl.DateTimeFormat;
+  readonly renderIdentity?: (event: T) => ReactNode;
+}) {
+  return (
+    <>
+      <p className="px-4 pb-2 text-xs text-muted-foreground sm:px-6">
+        Time in your browser zone
+      </p>
+      <ol aria-label="Events" className="divide-y border-y">
+        {events.map((event) => (
+          <li
+            key={event.id}
+            className="flex min-w-0 flex-col gap-3 px-4 py-4 sm:px-6"
+          >
+            <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1">
+              <EventTypeBadge type={event.type} />
+              <div className="text-xs tabular-nums">
+                <EventTimestamp
+                  value={event.receivedAtMs}
+                  formatter={formatter}
+                  touch
+                />
+              </div>
+            </div>
+            {renderIdentity?.(event)}
+            <dl className="flex flex-wrap gap-x-2 gap-y-1 text-sm">
+              <div>
+                <dt className="sr-only">App</dt>
+                <dd>
+                  {event.platform === "ios" ? "iOS" : "Android"}{" "}
+                  {event.appVersion}
+                </dd>
+              </div>
+              <div className="min-w-0 text-muted-foreground">
+                <dt className="sr-only">Channel</dt>
+                <dd className="wrap-anywhere">{event.channel}</dd>
+              </div>
+            </dl>
+            <div className="text-xs" aria-label="Bundle">
+              <EventBundleTransition event={event} touch />
+            </div>
+          </li>
+        ))}
+      </ol>
+    </>
+  );
+}