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

package/src/routes/installations.tsx

@@ -0,0 +1,194 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useMemo, useState } from "react";
+
+import { useAnalyticsCapability } from "@/components/features/analytics/AnalyticsCapabilityContext";
+import { InstallationHistoryCard } from "@/components/features/analytics/InstallationHistoryCard";
+import { InstallationMatchesCard } from "@/components/features/analytics/InstallationMatchesCard";
+import {
+  InstallationPageHeader,
+  InstallationResultsSkeleton,
+  InstallationSearchPanel,
+} from "@/components/features/analytics/InstallationPageHeader";
+import {
+  ensureAnalyticsRouteAccess,
+  isAnalyticsQueryEnabled,
+} from "@/lib/analytics-api";
+import {
+  type InstallationSearchRow,
+  useInstallationHistoryQuery,
+  useInstallationSearchQuery,
+} from "@/lib/api";
+
+import { validateInstallationsSearch } from "./-installations-search";
+
+const SEARCH_LIMIT = 20;
+const HISTORY_LIMIT = 50;
+
+export const Route = createFileRoute("/installations")({
+  beforeLoad: ({ context }) => ensureAnalyticsRouteAccess(context.queryClient),
+  component: InstallationsPage,
+  validateSearch: validateInstallationsSearch,
+});
+
+function InstallationsPage() {
+  const capability = useAnalyticsCapability();
+  const analyticsQueriesEnabled = isAnalyticsQueryEnabled(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,
+    },
+    analyticsQueriesEnabled,
+  );
+  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,
+    },
+    analyticsQueriesEnabled,
+  );
+  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" />

package/src/vite-internal.ts

@@ -0,0 +1,195 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+
+import tailwindcss from "@tailwindcss/vite";
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import viteReact from "@vitejs/plugin-react";
+import { nitro } from "nitro/vite";
+import type { Plugin, PluginOption, UserConfig } from "vite";
+
+import type { HotUpdaterConsolePluginOptions } from "./vite";
+
+const virtualAuthModuleId = "virtual:hot-updater-console/auth";
+const virtualConfigModuleId = "virtual:hot-updater-console/config";
+const virtualPackageRouterModuleId =
+  "virtual:hot-updater-console/package-router";
+const virtualRouteTreeModuleId = "virtual:hot-updater-console/route-tree";
+
+const resolvedVirtualAuthModuleId = `\0${virtualAuthModuleId}`;
+const resolvedVirtualConfigModuleId = `\0${virtualConfigModuleId}`;
+const resolvedVirtualPackageRouterModuleId = `\0${virtualPackageRouterModuleId}`;
+
+const packageRoot = path.resolve(import.meta.dirname, "..");
+const packagePublicDirectory = path.join(packageRoot, "public");
+const packageRouterFile = path.join(packageRoot, "src/router.tsx");
+const packageRoutesDirectory = path.join(packageRoot, "src/routes");
+const packageSourceDirectory = path.join(packageRoot, "src");
+const localRouteTreeFile = path.join(
+  packageSourceDirectory,
+  "routeTree.gen.ts",
+);
+
+type ConsoleModuleMode =
+  | {
+      readonly type: "hosted";
+      readonly options: HotUpdaterConsolePluginOptions;
+    }
+  | { readonly type: "local" };
+
+const resolveFromRoot = (root: string, file: string) =>
+  path.isAbsolute(file) ? file : path.resolve(root, file);
+
+const toImportPath = (file: string) => file.split(path.sep).join("/");
+
+const writeFileIfChanged = (file: string, contents: string) => {
+  if (existsSync(file) && readFileSync(file, "utf8") === contents) {
+    return;
+  }
+
+  mkdirSync(path.dirname(file), { recursive: true });
+  writeFileSync(file, contents);
+};
+
+const createConsoleModulesPlugin = (mode: ConsoleModuleMode): Plugin => {
+  let authFile = "";
+  let configFile = "";
+  let generatedRouteTreeFile = localRouteTreeFile;
+
+  return {
+    name: `hot-updater-console:${mode.type}-modules`,
+    enforce: "pre",
+    config(userConfig, configEnvironment) {
+      const root = path.resolve(process.cwd(), userConfig.root ?? ".");
+
+      if (mode.type === "hosted") {
+        const cacheDirectory = path.join(root, ".hot-updater/console");
+        generatedRouteTreeFile = path.join(cacheDirectory, "routeTree.gen.ts");
+        authFile = resolveFromRoot(
+          root,
+          mode.options.auth ?? "console.auth.ts",
+        );
+        configFile = resolveFromRoot(
+          root,
+          mode.options.config ?? "hot-updater.config.ts",
+        );
+
+        writeFileIfChanged(
+          path.join(cacheDirectory, "router.ts"),
+          [
+            `export { getRouter } from ${JSON.stringify(virtualPackageRouterModuleId)};`,
+            "",
+          ].join("\n"),
+        );
+      }
+
+      return {
+        assetsInclude: ["**/*.node"],
+        oxc: {
+          jsx: {
+            development: configEnvironment.command === "serve",
+          },
+        },
+        resolve: {
+          alias: [
+            {
+              find: /^@\//,
+              replacement: `${toImportPath(packageSourceDirectory)}/`,
+            },
+          ],
+          dedupe: [
+            "react",
+            "react-dom",
+            "@tanstack/react-query",
+            "@tanstack/react-router",
+            "@tanstack/react-start",
+          ],
+        },
+      } satisfies UserConfig;
+    },
+    resolveId(id) {
+      if (id === virtualAuthModuleId) {
+        return resolvedVirtualAuthModuleId;
+      }
+      if (id === virtualConfigModuleId) {
+        return resolvedVirtualConfigModuleId;
+      }
+      if (id === virtualPackageRouterModuleId) {
+        return resolvedVirtualPackageRouterModuleId;
+      }
+      if (id === virtualRouteTreeModuleId) {
+        return generatedRouteTreeFile;
+      }
+      return undefined;
+    },
+    load(id) {
+      if (id === resolvedVirtualPackageRouterModuleId) {
+        return `export { getRouter } from ${JSON.stringify(toImportPath(packageRouterFile))};`;
+      }
+
+      if (id === resolvedVirtualConfigModuleId) {
+        if (mode.type === "local") {
+          return [
+            'import { loadConfig } from "@hot-updater/cli-tools";',
+            "export default async () => {",
+            "  const config = await loadConfig(null);",
+            "  return {",
+            "    console: { gitUrl: config.console.gitUrl },",
+            "    database: config.database,",
+            "    signing: config.signing,",
+            "    storage: config.storage,",
+            "  };",
+            "};",
+          ].join("\n");
+        }
+
+        this.addWatchFile(configFile);
+        return `export { default } from ${JSON.stringify(toImportPath(configFile))};`;
+      }
+
+      if (id === resolvedVirtualAuthModuleId) {
+        if (mode.type === "local") {
+          return [
+            'const principal = { email: "local@hot-updater.dev", name: "Local Console" };',
+            "export default {",
+            "  async handle() {",
+            '    return new Response("Not Found", { status: 404 });',
+            "  },",
+            "  async getAccess() {",
+            '    return { status: "authorized", principal };',
+            "  },",
+            "  async getProviders() {",
+            "    return [];",
+            "  },",
+            "};",
+          ].join("\n");
+        }
+
+        this.addWatchFile(authFile);
+        return `export { default } from ${JSON.stringify(toImportPath(authFile))};`;
+      }
+
+      return undefined;
+    },
+  };
+};
+
+export const createHostedConsolePlugins = (
+  options: HotUpdaterConsolePluginOptions,
+): PluginOption[] => [
+  createConsoleModulesPlugin({ type: "hosted", options }),
+  nitro({
+    publicAssets: [{ dir: packagePublicDirectory, maxAge: 60 * 60 * 24 }],
+  }),
+  tailwindcss(),
+  tanstackStart({
+    srcDirectory: ".hot-updater/console",
+    router: {
+      generatedRouteTree: "routeTree.gen.ts",
+      routesDirectory: packageRoutesDirectory,
+    },
+  }),
+  viteReact(),
+];
+
+export const createLocalConsoleModulesPlugin = (): Plugin =>
+  createConsoleModulesPlugin({ type: "local" });

package/src/vite.ts

@@ -0,0 +1,12 @@
+import type { PluginOption } from "vite";
+
+import { createHostedConsolePlugins } from "./vite-internal";
+
+export interface HotUpdaterConsolePluginOptions {
+  readonly auth?: string;
+  readonly config?: string;
+}
+
+export const hotUpdaterConsole = (
+  options: HotUpdaterConsolePluginOptions = {},
+): PluginOption[] => createHostedConsolePlugins(options);