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

package/src/routes/insights.tsx

@@ -0,0 +1,139 @@
+import type { ActiveInstallationWindow } from "@hot-updater/server";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { ChartNoAxesCombined } from "lucide-react";
+import { useState } from "react";
+
+import { useInsightsCapability } from "@/components/features/insights/InsightsCapabilityContext";
+import { InsightsControls } from "@/components/features/insights/InsightsControls";
+import { InsightsOverview } from "@/components/features/insights/InsightsOverview";
+import type { UpdateOutcomeState } from "@/components/features/insights/UpdateOutcomes";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { useBundleEventInsightsQuery } from "@/lib/api";
+import {
+  ensureInsightsRouteAccess,
+  useActiveInstallationQuery,
+  useInsightsOverviewQuery,
+} from "@/lib/insights-api";
+
+export const Route = createFileRoute("/insights")({
+  beforeLoad: ({ context }) => ensureInsightsRouteAccess(context.queryClient),
+  component: InsightsPage,
+});
+
+function InsightsPage() {
+  const capability = useInsightsCapability();
+  const navigate = useNavigate();
+  const [window, setWindow] = useState<ActiveInstallationWindow>("30d");
+  const [selectedBundleId, setSelectedBundleId] = useState("");
+  const catalog = useInsightsOverviewQuery(capability);
+  const active = useActiveInstallationQuery(capability, { window });
+  const configuredById = new Map(
+    catalog.data?.configuredRollouts.map((rollout) => [
+      rollout.bundleId,
+      rollout,
+    ]) ?? [],
+  );
+  const bundleIds = new Set([
+    ...(active.data?.bundles.map(({ bundleId }) => bundleId) ?? []),
+    ...(catalog.data?.configuredRollouts.map(({ bundleId }) => bundleId) ?? []),
+  ]);
+  const bundleOptions = [...bundleIds].map((bundleId) => {
+    const configured = configuredById.get(bundleId);
+    const appVersion = configured?.bundle.targetAppVersion ?? "all versions";
+    return {
+      bundleId,
+      description: configured
+        ? `${configured.bundle.platform === "ios" ? "iOS" : "Android"} · ${configured.bundle.channel} · ${appVersion}`
+        : "Metadata unavailable",
+    };
+  });
+  const bundleId = bundleIds.has(selectedBundleId)
+    ? selectedBundleId
+    : (bundleOptions[0]?.bundleId ?? "");
+  const outcomes = useBundleEventInsightsQuery(
+    {
+      bundleId,
+      window,
+      limit: 1,
+      offset: 0,
+    },
+    capability.status === "supported" && bundleId.length > 0,
+  );
+  const outcomeState: UpdateOutcomeState = !bundleId
+    ? { status: "idle" }
+    : outcomes.isLoading
+      ? { status: "loading", bundleId }
+      : outcomes.error
+        ? { status: "error", bundleId, error: outcomes.error }
+        : outcomes.data
+          ? {
+              status: "success",
+              bundleId,
+              data: outcomes.data,
+            }
+          : { status: "loading", bundleId };
+  const insightsError = active.error ?? catalog.error;
+
+  return (
+    <div className="flex h-svh min-h-0 flex-col">
+      <header className="sticky top-0 z-10 flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 border-b bg-background px-3 py-3 sm:min-h-12 sm:flex-nowrap sm:bg-card/70 sm:px-4 sm:backdrop-blur-sm">
+        <SidebarTrigger className="-ml-1" />
+        <div className="flex items-center gap-1.5">
+          <ChartNoAxesCombined
+            aria-hidden="true"
+            className="size-3.5 text-muted-foreground"
+          />
+          <h1 className="text-sm font-medium">Insights</h1>
+        </div>
+        <p className="basis-full pl-9 text-xs text-muted-foreground sm:basis-auto sm:pl-0">
+          Bundle adoption and movement over time.
+        </p>
+      </header>
+
+      <div className="min-h-0 min-w-0 flex-1 overflow-y-auto bg-muted/5 p-3 sm:p-6">
+        <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
+          {capability.status === "supported" &&
+          capability.mode === "bounded" ? (
+            <p className="text-xs text-muted-foreground">
+              This database scans up to{" "}
+              {capability.maxMatchingRows.toLocaleString()} matching insights
+              records per query.
+            </p>
+          ) : null}
+          <InsightsControls
+            onInstallationSearch={(query) => {
+              void navigate({
+                to: "/installations",
+                search: {
+                  query,
+                  installId: undefined,
+                  searchOffset: 0,
+                  historyOffset: 0,
+                },
+              });
+            }}
+            onWindowChange={setWindow}
+            window={window}
+          />
+          {active.isLoading || catalog.isLoading ? (
+            <InsightsOverview status="loading" />
+          ) : insightsError ? (
+            <InsightsOverview status="error" error={insightsError} />
+          ) : active.data && catalog.data ? (
+            <InsightsOverview
+              active={active.data}
+              bundleId={bundleId}
+              bundles={bundleOptions}
+              catalog={catalog.data}
+              onBundleChange={setSelectedBundleId}
+              outcomes={outcomeState}
+              status="success"
+            />
+          ) : (
+            <InsightsOverview status="loading" />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/routes/installations.tsx

@@ -0,0 +1,194 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useMemo, useState } from "react";
+
+import { useInsightsCapability } from "@/components/features/insights/InsightsCapabilityContext";
+import { InstallationHistoryCard } from "@/components/features/insights/InstallationHistoryCard";
+import { InstallationMatchesCard } from "@/components/features/insights/InstallationMatchesCard";
+import {
+  InstallationPageHeader,
+  InstallationResultsSkeleton,
+  InstallationSearchPanel,
+} from "@/components/features/insights/InstallationPageHeader";
+import {
+  type InstallationSearchRow,
+  useInstallationHistoryQuery,
+  useInstallationSearchQuery,
+} from "@/lib/api";
+import {
+  ensureInsightsRouteAccess,
+  isInsightsQueryEnabled,
+} from "@/lib/insights-api";
+
+import { validateInstallationsSearch } from "./-installations-search";
+
+const SEARCH_LIMIT = 20;
+const HISTORY_LIMIT = 50;
+
+export const Route = createFileRoute("/installations")({
+  beforeLoad: ({ context }) => ensureInsightsRouteAccess(context.queryClient),
+  component: InstallationsPage,
+  validateSearch: validateInstallationsSearch,
+});
+
+function InstallationsPage() {
+  const capability = useInsightsCapability();
+  const insightsQueriesEnabled = isInsightsQueryEnabled(capability);
+  const search = Route.useSearch();
+  const navigate = Route.useNavigate();
+  const [draftQuery, setDraftQuery] = useState(search.query ?? "");
+
+  useEffect(() => {
+    setDraftQuery(search.query ?? "");
+  }, [search.query]);
+
+  const query = search.query?.trim() ?? "";
+  const {
+    data: results,
+    error: searchError,
+    isLoading: isSearchLoading,
+  } = useInstallationSearchQuery(
+    {
+      query,
+      limit: SEARCH_LIMIT,
+      offset: search.searchOffset,
+    },
+    insightsQueriesEnabled,
+  );
+  const selectedInstallId = search.installId ?? "";
+  const firstMatchingInstallId = results?.data[0]?.installId;
+
+  useEffect(() => {
+    if (selectedInstallId || !firstMatchingInstallId) return;
+    void navigate({
+      to: "/installations",
+      search: {
+        query: search.query,
+        installId: firstMatchingInstallId,
+        searchOffset: search.searchOffset,
+        historyOffset: 0,
+      },
+      replace: true,
+    });
+  }, [
+    firstMatchingInstallId,
+    navigate,
+    search.query,
+    search.searchOffset,
+    selectedInstallId,
+  ]);
+
+  const {
+    data: history,
+    error: historyError,
+    isLoading: isHistoryLoading,
+  } = useInstallationHistoryQuery(
+    {
+      installId: selectedInstallId,
+      limit: HISTORY_LIMIT,
+      offset: search.historyOffset,
+    },
+    insightsQueriesEnabled,
+  );
+  const selectedInstallation = useMemo(
+    () =>
+      results?.data.find(
+        (event: InstallationSearchRow) => event.installId === selectedInstallId,
+      ) ?? null,
+    [results?.data, selectedInstallId],
+  );
+  const selectedEvent = selectedInstallation ?? history?.data[0];
+
+  const updateSearch = (
+    nextSearch: {
+      query?: string;
+      installId?: string;
+      searchOffset?: number;
+      historyOffset?: number;
+    },
+    replace = false,
+  ) => {
+    void navigate({
+      to: "/installations",
+      search: {
+        query: nextSearch.query,
+        installId: nextSearch.installId,
+        searchOffset: nextSearch.searchOffset ?? 0,
+        historyOffset: nextSearch.historyOffset ?? 0,
+      },
+      replace,
+    });
+  };
+
+  const hasQuery = query.length > 0 || selectedInstallId.length > 0;
+
+  return (
+    <div className="flex h-svh min-h-0 flex-col">
+      <InstallationPageHeader />
+      <div className="min-h-0 min-w-0 flex-1 overflow-y-auto bg-muted/5 p-3 sm:p-6">
+        <div className="mx-auto flex w-full max-w-7xl flex-col gap-6">
+          <InstallationSearchPanel
+            draftQuery={draftQuery}
+            hasQuery={hasQuery}
+            onClear={() => {
+              setDraftQuery("");
+              updateSearch({ query: undefined, installId: undefined });
+            }}
+            onDraftQueryChange={setDraftQuery}
+            onSubmit={() => {
+              const nextQuery = draftQuery.trim();
+              updateSearch({
+                query: nextQuery || undefined,
+                installId: undefined,
+              });
+            }}
+          />
+          {!hasQuery ? null : isSearchLoading ? (
+            <InstallationResultsSkeleton />
+          ) : (
+            <div className="grid min-h-0 min-w-0 items-stretch gap-6 lg:min-h-96 lg:grid-cols-[minmax(18rem,20rem)_minmax(0,1fr)]">
+              <InstallationMatchesCard
+                error={searchError}
+                limit={SEARCH_LIMIT}
+                offset={search.searchOffset}
+                results={results}
+                selectedInstallId={selectedInstallId}
+                onOffsetChange={(searchOffset) =>
+                  updateSearch({
+                    query: search.query,
+                    installId: undefined,
+                    searchOffset,
+                    historyOffset: 0,
+                  })
+                }
+                onSelect={(installId) =>
+                  updateSearch({
+                    query: search.query,
+                    installId,
+                    searchOffset: search.searchOffset,
+                  })
+                }
+              />
+              <InstallationHistoryCard
+                error={historyError}
+                history={history}
+                isLoading={isHistoryLoading}
+                limit={HISTORY_LIMIT}
+                offset={search.historyOffset}
+                selectedEvent={selectedEvent}
+                selectedInstallId={selectedInstallId}
+                onOffsetChange={(historyOffset) =>
+                  updateSearch({
+                    query: search.query,
+                    installId: selectedInstallId,
+                    searchOffset: search.searchOffset,
+                    historyOffset,
+                  })
+                }
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/routes/signing.tsx

@@ -0,0 +1,37 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { ShieldCheck } from "lucide-react";
+
+import { BundleSigningPage } from "@/components/features/signing/BundleSigningPage";
+import { Badge } from "@/components/ui/badge";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+
+export const Route = createFileRoute("/signing")({
+  component: BundleSigningRoute,
+});
+
+function BundleSigningRoute() {
+  return (
+    <div className="flex h-svh min-h-0 flex-col">
+      <header className="sticky top-0 z-10 flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1 border-b bg-background px-3 py-3 sm:min-h-12 sm:flex-nowrap sm:bg-card/70 sm:px-4 sm:backdrop-blur-sm">
+        <SidebarTrigger className="-ml-1" />
+        <div className="flex items-center gap-1.5">
+          <ShieldCheck
+            aria-hidden="true"
+            className="size-3.5 text-muted-foreground"
+          />
+          <h1 className="text-sm font-medium">Bundle signing</h1>
+        </div>
+        <Badge variant="outline">Read-only</Badge>
+        <p className="basis-full pl-9 text-xs text-muted-foreground sm:basis-auto sm:pl-0">
+          Inspect the public key used to verify signed updates.
+        </p>
+      </header>
+
+      <div className="min-h-0 min-w-0 flex-1 overflow-y-auto bg-muted/5 p-3 sm:p-6">
+        <div className="mx-auto w-full max-w-5xl">
+          <BundleSigningPage />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/styles.css

@@ -0,0 +1,152 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/inter";
+
+@source "./";
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
+
+:root {
+  color-scheme: light;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.646 0.222 41.116);
+  --primary-foreground: oklch(0.98 0.016 73.684);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.646 0.222 41.116);
+  --accent-foreground: oklch(0.98 0.016 73.684);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
+  --chart-1: oklch(0.837 0.128 66.29);
+  --chart-2: oklch(0.705 0.213 47.604);
+  --chart-3: oklch(0.646 0.222 41.116);
+  --chart-4: oklch(0.553 0.195 38.402);
+  --chart-5: oklch(0.47 0.157 37.304);
+  --radius: 0.45rem;
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.646 0.222 41.116);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
+  --sidebar-accent: oklch(0.646 0.222 41.116);
+  --sidebar-accent-foreground: oklch(0.98 0.016 73.684);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
+}
+
+.dark {
+  color-scheme: dark;
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.705 0.213 47.604);
+  --primary-foreground: oklch(0.98 0.016 73.684);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.705 0.213 47.604);
+  --accent-foreground: oklch(0.98 0.016 73.684);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --chart-1: oklch(0.837 0.128 66.29);
+  --chart-2: oklch(0.705 0.213 47.604);
+  --chart-3: oklch(0.646 0.222 41.116);
+  --chart-4: oklch(0.553 0.195 38.402);
+  --chart-5: oklch(0.47 0.157 37.304);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.705 0.213 47.604);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
+  --sidebar-accent: oklch(0.705 0.213 47.604);
+  --sidebar-accent-foreground: oklch(0.98 0.016 73.684);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+}
+
+@theme inline {
+  --font-sans: "Inter Variable", sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply font-sans bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+  html,
+  body {
+    min-height: 100%;
+    background-color: var(--background);
+  }
+}

package/src/virtual-modules.d.ts

@@ -0,0 +1,21 @@
+declare module "virtual:hot-updater-console/auth" {
+  import type { ConsoleAuthAdapter } from "./index";
+
+  const auth: ConsoleAuthAdapter;
+  export default auth;
+}
+
+declare module "virtual:hot-updater-console/config" {
+  import type { HotUpdaterConsoleConfigSource } from "./index";
+
+  const config: HotUpdaterConsoleConfigSource;
+  export default config;
+}
+
+declare module "virtual:hot-updater-console/package-router" {
+  export { getRouter } from "./router";
+}
+
+declare module "virtual:hot-updater-console/route-tree" {
+  export { routeTree } from "./routeTree.gen";
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />