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

package/src/components/ConsoleAccessPage.tsx

@@ -48,7 +48,11 @@ export function ConsoleAccessPage({
     setSigningOut(true);
     setError(null);
     try {
-      const response = await fetch("/api/auth/sign-out", { method: "POST" });
+      const response = await fetch("/api/auth/sign-out", {
+        body: "{}",
+        headers: { "content-type": "application/json" },
+        method: "POST",
+      });
       if (!response.ok) {
         throw new Error("Sign-out failed.");
       }

package/src/components/ConsoleFeatureUnavailable.tsx

@@ -0,0 +1,80 @@
+import { ArrowUpRight } from "lucide-react";
+
+import { NotFoundPage } from "@/components/NotFoundPage";
+import { buttonVariants } from "@/components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { consoleFeatures, unavailableReason } from "@/lib/console-features";
+import {
+  notFoundFeature,
+  useConsoleFeatures,
+} from "@/lib/console-features-api";
+
+export const CONSOLE_DEPLOYMENT_GUIDE_URL =
+  "https://hot-updater.dev/docs/guides/console-deployment";
+
+/**
+ * A feature route's not-found state: the plugin to add, or, for a feature a
+ * self-hosted server does not serve, the database config it needs.
+ */
+export function ConsoleFeatureUnavailable({
+  data,
+}: {
+  readonly data?: unknown;
+}) {
+  const feature = notFoundFeature(data);
+  const remote = useConsoleFeatures().data?.remote === true;
+  if (feature === undefined) return <NotFoundPage />;
+
+  const { label, plugin } = consoleFeatures[feature];
+  const pluginCall = <code className="font-mono">{`${plugin}()`}</code>;
+  return (
+    <div className="flex h-svh min-h-0 flex-col">
+      <header className="sticky top-0 z-10 flex shrink-0 items-center gap-3 border-b bg-background px-3 py-3 sm:min-h-12 sm:bg-card/70 sm:px-4 sm:backdrop-blur-sm">
+        <SidebarTrigger className="-ml-1" />
+        <h1 className="text-sm font-medium">{label}</h1>
+      </header>
+      <div className="flex min-h-0 min-w-0 flex-1 overflow-y-auto bg-muted/5 p-3 sm:p-6">
+        <Empty>
+          <EmptyHeader>
+            {unavailableReason(feature, { remote }) === "remote" ? (
+              <>
+                <EmptyTitle>Needs the server's database</EmptyTitle>
+                <EmptyDescription>
+                  This console reaches a self-hosted server through its admin
+                  API, which does not serve this page. Configure the console
+                  with the database the server uses.
+                </EmptyDescription>
+              </>
+            ) : (
+              <>
+                <EmptyTitle>{label} not installed</EmptyTitle>
+                <EmptyDescription>
+                  Add {pluginCall} to <code className="font-mono">plugins</code>{" "}
+                  where you create the server and in the console config.
+                </EmptyDescription>
+              </>
+            )}
+          </EmptyHeader>
+          <EmptyContent>
+            <a
+              className={buttonVariants({ variant: "outline" })}
+              href={CONSOLE_DEPLOYMENT_GUIDE_URL}
+              rel="noreferrer"
+              target="_blank"
+            >
+              Console setup guide
+              <ArrowUpRight aria-hidden="true" data-icon="inline-end" />
+            </a>
+          </EmptyContent>
+        </Empty>
+      </div>
+    </div>
+  );
+}

package/src/components/NotFoundPage.tsx

@@ -3,14 +3,14 @@ import { Link } from "@tanstack/react-router";
 import { buttonVariants } from "@/components/ui/button";
 
 const homeSearch = {
-  channel: undefined,
-  platform: undefined,
-  targetAppVersion: undefined,
-  page: undefined,
-  after: undefined,
-  before: undefined,
+  afterReleaseId: undefined,
+  beforeReleaseId: undefined,
   bundleId: undefined,
-  expandedBundleId: undefined,
+  channelId: undefined,
+  enabled: undefined,
+  platform: undefined,
+  releaseId: undefined,
+  scopeKey: undefined,
 } as const;
 
 export function NotFoundPage() {

package/src/components/features/FeatureSlots.tsx

@@ -0,0 +1,99 @@
+import type { ComponentType, ReactElement, ReactNode } from "react";
+
+import {
+  type ConsoleFeature,
+  type ConsoleFeatures,
+  consoleFeatures,
+} from "@/lib/console-features";
+import { useConsoleFeatures } from "@/lib/console-features-api";
+
+import { apiKeysFeatureUi } from "./api-keys/apiKeysFeatureUi";
+import { insightsFeatureUi } from "./insights/insightsFeatureUi";
+
+/** A release, as the Bundles page and the release editor hand it to slots. */
+export interface ReleaseSlotInput {
+  readonly releaseId: string;
+  readonly platform: "ios" | "android";
+  readonly channel: string;
+}
+
+/**
+ * A column a feature adds to the Bundles page's release list. `Cell` renders
+ * one release, and gets the page's releases too, so a feature can read them
+ * all in one request that every cell shares.
+ */
+export interface ReleaseColumn {
+  readonly Cell: ComponentType<{
+    readonly releaseId: string;
+    readonly releases: readonly ReleaseSlotInput[];
+  }>;
+}
+
+/** A navigation item a feature adds below Bundles. */
+export interface FeatureNavigation {
+  readonly icon: ReactNode;
+  /** The pathnames where the item shows as active. */
+  readonly paths: readonly string[];
+  readonly link: (props: {
+    readonly features: ConsoleFeatures;
+    readonly onClick: () => void;
+  }) => ReactElement;
+}
+
+/** What a feature adds to the console's pages while it is on. */
+export interface ConsoleFeatureUi {
+  readonly navigation?: FeatureNavigation;
+  readonly releaseColumn?: ReleaseColumn;
+  /** A section of the release editor, above its settings. */
+  readonly releaseSection?: ComponentType<{
+    readonly release: ReleaseSlotInput;
+  }>;
+}
+
+/** What each feature adds, keyed like `consoleFeatures`. */
+export type ConsoleFeatureUiRegistry = {
+  readonly [F in ConsoleFeature]?: ConsoleFeatureUi;
+};
+
+const consoleFeatureUi: ConsoleFeatureUiRegistry = {
+  ...insightsFeatureUi,
+  ...apiKeysFeatureUi,
+};
+
+const featureIds = Object.keys(consoleFeatures) as ConsoleFeature[];
+
+/**
+ * What the features that are on add, in the registry's order, with each
+ * feature's label; nothing until the features load.
+ */
+export const useFeatureUi = (): readonly (ConsoleFeatureUi & {
+  readonly feature: ConsoleFeature;
+  readonly label: string;
+  readonly features: ConsoleFeatures;
+})[] => {
+  const features = useConsoleFeatures().data?.features;
+  if (features === undefined) return [];
+  return featureIds.flatMap((feature) => {
+    const ui = consoleFeatureUi[feature];
+    return ui !== undefined && features[feature]
+      ? [{ ...ui, feature, label: consoleFeatures[feature].label, features }]
+      : [];
+  });
+};
+
+/** The release list's feature columns, with their headers. */
+export const useReleaseColumns = () =>
+  useFeatureUi().flatMap(({ feature, label, releaseColumn }) =>
+    releaseColumn === undefined ? [] : [{ ...releaseColumn, feature, label }],
+  );
+
+/** The release editor's feature sections, for one release. */
+export function ReleaseSections({
+  release,
+}: {
+  readonly release: ReleaseSlotInput;
+}) {
+  return useFeatureUi().map(({ feature, releaseSection: Section }) =>
+    Section === undefined ? null : <Section key={feature} release={release} />,
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Link } from "@tanstack/react-router";
+import { KeyRound } from "lucide-react";
+
+import type { ConsoleFeatureUiRegistry } from "../FeatureSlots";
+
+/** What API key management adds: its navigation item. */
+export const apiKeysFeatureUi = {
+  apiKeys: {
+    navigation: {
+      icon: <KeyRound />,
+      paths: ["/api-keys"],
+      link: ({ onClick }) => <Link to="/api-keys" onClick={onClick} />,
+    },
+  },
+} satisfies ConsoleFeatureUiRegistry;

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

@@ -1,5 +1,5 @@
-import { getPatchBaseFileHash, getPatchFileHash } from "@hot-updater/core";
 import type { Bundle, ReleaseRow } from "@hot-updater/plugin-core";
+import { getPatchBaseFileHash, getPatchFileHash } from "@hot-updater/protocol";
 import { ExternalLink } from "lucide-react";
 
 import { HashValueDisplay } from "@/components/HashValueDisplay";
@@ -36,7 +36,7 @@ export function BundleMetadata({ bundle, release }: BundleMetadataProps) {
   const hasMetadata =
     target ||
     bundle?.gitCommitHash ||
-    bundle?.fileHash ||
+    bundle?.manifestFileHash ||
     hbcPatchBaseFileHash ||
     hbcPatchFileHash;
 
@@ -86,11 +86,14 @@ export function BundleMetadata({ bundle, release }: BundleMetadataProps) {
               }
             />
           ) : null}
-          {bundle?.fileHash ? (
+          {bundle?.manifestFileHash ? (
             <Row
-              label="Bundle hash"
+              label="Manifest hash"
               value={
-                <HashValueDisplay maxLength={16} value={bundle.fileHash} />
+                <HashValueDisplay
+                  maxLength={16}
+                  value={bundle.manifestFileHash}
+                />
               }
             />
           ) : null}

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

@@ -2,7 +2,7 @@ import {
   getNumericCohortRolloutPosition,
   NUMERIC_COHORT_SIZE,
   normalizeRolloutCohortCount,
-} from "@hot-updater/core";
+} from "@hot-updater/protocol";
 import { List } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";

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

@@ -1,4 +1,4 @@
-import { createUUIDv7, type ChannelRow } from "@hot-updater/plugin-core";
+import type { ChannelRow } from "@hot-updater/plugin-core";
 import { Loader2, Plus, Tag, Trash2 } from "lucide-react";
 import { type FormEvent, useState } from "react";
 import { toast } from "sonner";
@@ -55,10 +55,7 @@ export function ChannelManagementDialog({
     }
 
     try {
-      const result = await createChannel.mutateAsync({
-        row: { id: createUUIDv7(), name: normalizedName },
-        onConflict: "returnExisting",
-      });
+      const result = await createChannel.mutateAsync({ name: normalizedName });
       setChannelName("");
       if (result.inserted) {
         toast.success(`Channel ${result.row.name} created`);

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

@@ -0,0 +1,370 @@
+import type { UseQueryResult } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { ArrowRight, ChevronRight } from "lucide-react";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+
+import { PlatformIcon } from "@/components/PlatformIcon";
+import { Badge } from "@/components/ui/badge";
+import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Progress } from "@/components/ui/progress";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  DEFAULT_INSIGHTS_RETENTION,
+  type InsightsRetentionDays,
+  keepsTwelveMonths,
+} from "@/lib/insights-retention";
+import type { InsightsSearch } from "@/lib/insights-search";
+import type { AppUsageReport, UsageWindow } from "@/lib/insights-usage";
+
+import { EstimatedCount } from "./EstimatedCount";
+import { InsightsErrorAlert } from "./InsightsErrorAlert";
+import { InsightsInfo } from "./InsightsInfo";
+import { UsagePeriodSelector } from "./InsightsPeriodSelector";
+import { ReportingDevicesSummary } from "./ReportingDevicesSummary";
+
+const dates = new Intl.DateTimeFormat("en", {
+  month: "short",
+  day: "numeric",
+  timeZone: "UTC",
+});
+const times = new Intl.DateTimeFormat("en", {
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  timeZone: "UTC",
+});
+
+export function AppUsage({
+  query,
+  search,
+  window,
+  onWindowChange,
+  retention = DEFAULT_INSIGHTS_RETENTION,
+}: {
+  readonly query: UseQueryResult<AppUsageReport>;
+  /** How long the server keeps Insights rows. */
+  readonly retention?: InsightsRetentionDays;
+  readonly search: InsightsSearch;
+  readonly window: UsageWindow;
+  readonly onWindowChange: (window: UsageWindow) => void;
+}) {
+  const report = query.error ? undefined : query.data;
+  const formatTime = (ms: number) =>
+    (window === "30d" || window === "12m" ? dates : times).format(ms);
+  const distributionPeriod = report
+    ? `since ${dates.format(report.distributionSinceMs)}, 00:00 UTC`
+    : "in the selected period";
+  const distributionTotals = report
+    ? {
+        versions: report.versions.reduce(
+          (sum, row) => sum + row.installations,
+          0,
+        ),
+        platforms: report.platforms.reduce(
+          (sum, row) => sum + row.installations,
+          0,
+        ),
+      }
+    : undefined;
+  return (
+    <div className="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(16rem,1fr)]">
+      <Card aria-label="App usage" role="region" className="min-w-0 shadow-sm">
+        <CardHeader className="flex-row flex-wrap items-center justify-between gap-4">
+          <CardTitle>App usage</CardTitle>
+          <UsagePeriodSelector
+            window={window}
+            onWindowChange={onWindowChange}
+            twelveMonths={keepsTwelveMonths(retention)}
+          />
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <ReportingDevicesSummary
+            window={window}
+            count={report?.activeInstallations}
+            isPending={query.isPending}
+            partial={report?.truncated ?? false}
+            retention={retention}
+          />
+          {query.isPending ? (
+            <Skeleton aria-label="Loading app usage" className="h-48" />
+          ) : query.error ? (
+            <div className="flex flex-col items-start gap-4">
+              <InsightsErrorAlert
+                error={query.error}
+                fallbackTitle="App usage unavailable"
+              />
+              <Button variant="outline" onClick={() => void query.refetch()}>
+                Retry app usage
+              </Button>
+            </div>
+          ) : report?.activeInstallations === 0 ? (
+            <Empty className="h-48">
+              <EmptyHeader>
+                <EmptyTitle>No activity reported</EmptyTitle>
+                <EmptyDescription>
+                  Try another period, platform, channel, or app version.
+                </EmptyDescription>
+              </EmptyHeader>
+            </Empty>
+          ) : report ? (
+            <>
+              <div>
+                <p className="mb-2 text-right text-xs text-muted-foreground">
+                  Reporting installations · UTC
+                </p>
+                <ChartContainer
+                  aria-label="Active users per interval"
+                  className="h-48 w-full aspect-auto"
+                  config={{
+                    installations: {
+                      label: "Active users",
+                      color: "var(--chart-2)",
+                    },
+                  }}
+                >
+                  <LineChart
+                    accessibilityLayer
+                    data={report.points}
+                    margin={{ right: 8, top: 8 }}
+                  >
+                    <CartesianGrid vertical={false} />
+                    <XAxis
+                      dataKey="startMs"
+                      tick={{ fill: "var(--muted-foreground)" }}
+                      tickFormatter={formatTime}
+                      axisLine={false}
+                      tickLine={false}
+                      minTickGap={45}
+                    />
+                    <YAxis
+                      tick={{ fill: "var(--muted-foreground)" }}
+                      allowDecimals={false}
+                      axisLine={false}
+                      tickLine={false}
+                      width="auto"
+                    />
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          labelFormatter={(_, payload) =>
+                            `${times.format(payload[0]?.payload.startMs)} · UTC`
+                          }
+                        />
+                      }
+                    />
+                    <Line
+                      dataKey="installations"
+                      type="linear"
+                      stroke="var(--color-installations)"
+                      strokeWidth={2}
+                      dot={{ r: 2 }}
+                      activeDot={{ r: 4 }}
+                      isAnimationActive={false}
+                    />
+                  </LineChart>
+                </ChartContainer>
+              </div>
+              <details className="text-xs text-muted-foreground">
+                <summary className="cursor-pointer py-2">
+                  View usage data
+                </summary>
+                <Table aria-label="App usage by interval">
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Interval · UTC</TableHead>
+                      <TableHead className="text-right">Active users</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {report.points.map((point) => (
+                      <TableRow key={point.startMs}>
+                        <TableCell>{times.format(point.startMs)}</TableCell>
+                        <TableCell className="text-right tabular-nums">
+                          {point.installations === null ? (
+                            "Unknown"
+                          ) : (
+                            <EstimatedCount value={point.installations} />
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </details>
+            </>
+          ) : null}
+        </CardContent>
+      </Card>
+      <Card
+        aria-label="Usage distribution"
+        role="region"
+        className="flex min-w-0 flex-col shadow-sm"
+      >
+        <CardHeader className="flex-row items-center justify-between gap-3">
+          <CardTitle className="flex min-h-9 items-center">
+            Distribution
+          </CardTitle>
+          <InsightsInfo label="How distribution is counted">
+            Each reporting installation is counted once, using the app version
+            and platform of its latest matching report {distributionPeriod}.
+            Latest reports are counted by UTC day.
+            {report?.truncated
+              ? " Shares reflect only the available history."
+              : ""}
+          </InsightsInfo>
+        </CardHeader>
+        <CardContent className="flex-1">
+          {query.isPending ? (
+            <Skeleton aria-label="Loading distribution" className="h-48" />
+          ) : query.error ? (
+            <InsightsErrorAlert
+              error={query.error}
+              fallbackTitle="Distribution unavailable"
+            />
+          ) : !report?.activeInstallations ? (
+            <Empty className="h-40">
+              <EmptyHeader>
+                <EmptyTitle>No reporting installations</EmptyTitle>
+                <EmptyDescription>
+                  Try a different filter or period.
+                </EmptyDescription>
+              </EmptyHeader>
+            </Empty>
+          ) : (
+            <div className="flex flex-col gap-6">
+              {(["versions", "platforms"] as const).map((dimension) => (
+                <section
+                  key={dimension}
+                  aria-label={
+                    dimension === "versions"
+                      ? "App version distribution"
+                      : "Platform distribution"
+                  }
+                  className="flex flex-col gap-4"
+                >
+                  {dimension === "platforms" ? <Separator /> : null}
+                  <h3 className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                    {dimension === "versions" ? "App versions" : "Platforms"}
+                    {dimension === "versions" ? (
+                      <Badge variant="secondary">
+                        {report.versions.length}
+                      </Badge>
+                    ) : null}
+                  </h3>
+                  <ScrollArea className="min-w-0 [&_[data-slot=scroll-area-viewport]]:max-h-40">
+                    <dl className="flex flex-col gap-4 pr-4">
+                      {report[dimension].map((row) => {
+                        const name =
+                          dimension === "platforms"
+                            ? row.name === "ios"
+                              ? "iOS"
+                              : "Android"
+                            : row.name;
+                        const share =
+                          (row.installations /
+                            (distributionTotals?.[dimension] ?? 1)) *
+                          100;
+                        return (
+                          <div
+                            key={row.name}
+                            className="group relative flex min-h-11 flex-col gap-2 rounded-sm focus-within:ring-2 focus-within:ring-ring sm:min-h-0"
+                          >
+                            <div className="flex min-w-0 items-baseline justify-between gap-3">
+                              <dt
+                                className="flex min-w-0 items-center gap-2 text-sm"
+                                title={name}
+                              >
+                                {dimension === "platforms" &&
+                                (row.name === "ios" ||
+                                  row.name === "android") ? (
+                                  <PlatformIcon
+                                    platform={row.name}
+                                    className="size-4 shrink-0"
+                                  />
+                                ) : null}
+                                {dimension === "versions" ? (
+                                  <Link
+                                    to="/insights/distribution"
+                                    search={{ ...search, version: row.name }}
+                                    aria-label={`View bundles for app version ${row.name}`}
+                                    className="flex min-w-0 items-center gap-1 after:absolute after:inset-0 group-hover:underline"
+                                  >
+                                    <span className="truncate">{name}</span>
+                                    <ChevronRight
+                                      aria-hidden="true"
+                                      className="size-3 shrink-0 text-muted-foreground"
+                                    />
+                                  </Link>
+                                ) : (
+                                  <span className="truncate">{name}</span>
+                                )}
+                              </dt>
+                              <dd className="flex shrink-0 gap-3 text-sm tabular-nums">
+                                <span>
+                                  {row.installations.toLocaleString()}
+                                </span>
+                                <span className="min-w-10 text-right text-muted-foreground">
+                                  {share.toFixed(1)}%
+                                </span>
+                              </dd>
+                            </div>
+                            <Progress
+                              aria-label={`${name} share`}
+                              aria-valuetext={`${row.installations} installations, ${share.toFixed(1)}%`}
+                              value={share}
+                            />
+                          </div>
+                        );
+                      })}
+                    </dl>
+                  </ScrollArea>
+                </section>
+              ))}
+            </div>
+          )}
+        </CardContent>
+        <CardFooter className="border-t pt-4">
+          <Link
+            to="/insights/distribution"
+            search={search}
+            className={buttonVariants({
+              variant: "outline",
+              className: "h-11 w-full sm:h-9",
+            })}
+          >
+            View distribution
+            <ArrowRight aria-hidden="true" data-icon="inline-end" />
+          </Link>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+/**
+ * A unique count the server estimates from a HyperLogLog sketch, typically
+ * within about 3% of the true count. It shows as approximate, as analytics
+ * consoles mark estimates, and says so to screen readers. Zero is exact: no
+ * report reached the sketch.
+ */
+export function EstimatedCount({ value }: { readonly value: number }) {
+  if (value === 0) return "0";
+  return (
+    <span title="Estimated">
+      <span aria-hidden="true" className="mr-1 text-muted-foreground">
+        ≈
+      </span>
+      <span className="sr-only">Estimated </span>
+      {value.toLocaleString()}
+    </span>
+  );
+}