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

package/src/components/features/releases/ReleaseStateBadge.tsx

@@ -0,0 +1,20 @@
+import type { ReleaseRow } from "@hot-updater/plugin-core";
+import { Check, CircleOff } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+
+export function ReleaseStateBadge({ release }: { release: ReleaseRow }) {
+  return (
+    <Badge
+      className="gap-1 font-normal text-muted-foreground"
+      variant={release.enabled ? "outline" : "secondary"}
+    >
+      {release.enabled ? (
+        <Check className="size-3" />
+      ) : (
+        <CircleOff className="size-3" />
+      )}
+      {release.enabled ? "Enabled" : "Disabled"}
+    </Badge>
+  );
+}

package/src/components/features/signing/BundleSigningPage.tsx

@@ -0,0 +1,247 @@
+import {
+  AlertTriangle,
+  CheckCircle2,
+  Clipboard,
+  Download,
+  Info,
+  RefreshCw,
+} from "lucide-react";
+import { toast } from "sonner";
+
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Textarea } from "@/components/ui/textarea";
+import { useBundleSigningInspectionQuery } from "@/lib/bundle-signing-api";
+import type { BundleSigningInspection } from "@/lib/bundle-signing-rpc";
+
+const PUBLIC_KEY_FILENAME = "hot-updater-public-key.pem";
+
+function InspectionLoading() {
+  return (
+    <div aria-label="Loading bundle signing" className="flex flex-col gap-6">
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-4 w-36" />
+          <Skeleton className="h-3 w-4/5" />
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <Skeleton className="h-12 w-full" />
+          <Skeleton className="h-12 w-full" />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-4 w-28" />
+          <Skeleton className="h-3 w-3/5" />
+        </CardHeader>
+        <CardContent>
+          <Skeleton className="h-56 w-full" />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function InspectionError({ refetch }: { readonly refetch: () => void }) {
+  return (
+    <Alert variant="destructive">
+      <AlertTriangle aria-hidden="true" />
+      <AlertTitle>Bundle signing couldn't be loaded</AlertTitle>
+      <AlertDescription>
+        Check the Console connection and try again.
+      </AlertDescription>
+      <AlertAction>
+        <Button onClick={refetch} size="xs" variant="outline">
+          <RefreshCw data-icon="inline-start" />
+          Retry
+        </Button>
+      </AlertAction>
+    </Alert>
+  );
+}
+
+function SigningStatusCard({
+  inspection,
+}: {
+  readonly inspection: BundleSigningInspection;
+}) {
+  const enabled = inspection.status === "enabled";
+  const misconfigured = inspection.status === "misconfigured";
+  const status = enabled
+    ? "Enabled"
+    : misconfigured
+      ? "Misconfigured"
+      : "Disabled";
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <CardTitle className="text-sm font-medium">
+            <h2>Signing status</h2>
+          </CardTitle>
+          <Badge
+            variant={
+              misconfigured ? "destructive" : enabled ? "default" : "outline"
+            }
+          >
+            {status}
+          </Badge>
+        </div>
+        <CardDescription>
+          {enabled
+            ? "The Console found the public key configured for bundle verification."
+            : misconfigured
+              ? "Signing is enabled, but the public key cannot be inspected safely."
+              : "Bundle signing is disabled in the current Hot Updater configuration."}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-5">
+        {inspection.status === "disabled" ? (
+          <Alert>
+            <Info aria-hidden="true" />
+            <AlertTitle>Configure signing outside the Console</AlertTitle>
+            <AlertDescription>
+              Use your signing provider or the Hot Updater CLI to configure a
+              key. The Console never creates or stores private keys.
+            </AlertDescription>
+          </Alert>
+        ) : (
+          <>
+            <dl className="grid gap-4 sm:grid-cols-2">
+              <div className="flex min-w-0 flex-col gap-1">
+                <dt className="text-xs text-muted-foreground">Provider</dt>
+                <dd className="truncate text-sm font-medium">
+                  {inspection.provider}
+                </dd>
+              </div>
+              {inspection.status === "enabled" ? (
+                <div className="flex min-w-0 flex-col gap-1">
+                  <dt className="text-xs text-muted-foreground">Algorithm</dt>
+                  <dd className="text-sm font-medium">
+                    {inspection.algorithm}
+                  </dd>
+                </div>
+              ) : null}
+            </dl>
+            {inspection.status === "enabled" ? (
+              <div className="flex min-w-0 flex-col gap-1 border-t pt-4">
+                <p className="text-xs text-muted-foreground">
+                  SPKI SHA-256 fingerprint
+                </p>
+                <p className="break-all font-mono text-xs">
+                  {inspection.fingerprint}
+                </p>
+              </div>
+            ) : (
+              <Alert variant="destructive">
+                <AlertTriangle aria-hidden="true" />
+                <AlertTitle>Public key unavailable</AlertTitle>
+                <AlertDescription>{inspection.message}</AlertDescription>
+              </Alert>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+function PublicKeyCard({ publicKey }: { readonly publicKey: string }) {
+  const copyPublicKey = async () => {
+    try {
+      await navigator.clipboard.writeText(publicKey);
+      toast.success("Public key copied");
+    } catch {
+      toast.error("Unable to copy public key");
+    }
+  };
+
+  const downloadPublicKey = () => {
+    const url = URL.createObjectURL(
+      new Blob([`${publicKey}\n`], { type: "application/x-pem-file" }),
+    );
+    const link = document.createElement("a");
+    link.download = PUBLIC_KEY_FILENAME;
+    link.href = url;
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-sm font-medium">
+          <h2>Public key</h2>
+        </CardTitle>
+        <CardDescription>
+          This public key may be embedded in native app configuration. Private
+          key material is never available in the Console.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        <Textarea
+          aria-label="Bundle signing public key"
+          className="min-h-56 resize-none font-mono text-xs"
+          readOnly
+          spellCheck={false}
+          value={publicKey}
+        />
+        <div className="flex flex-wrap gap-2">
+          <Button
+            onClick={() => void copyPublicKey()}
+            size="sm"
+            variant="outline"
+          >
+            <Clipboard data-icon="inline-start" />
+            Copy
+          </Button>
+          <Button onClick={downloadPublicKey} size="sm" variant="outline">
+            <Download data-icon="inline-start" />
+            Download
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function BundleSigningPage() {
+  const inspection = useBundleSigningInspectionQuery();
+
+  if (inspection.isLoading) return <InspectionLoading />;
+  if (inspection.isError || !inspection.data) {
+    return <InspectionError refetch={() => void inspection.refetch()} />;
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <SigningStatusCard inspection={inspection.data} />
+      {inspection.data.status === "enabled" ? (
+        <PublicKeyCard publicKey={inspection.data.publicKey} />
+      ) : null}
+      <Alert>
+        <CheckCircle2 aria-hidden="true" />
+        <AlertTitle>Read-only inspection</AlertTitle>
+        <AlertDescription>
+          Configure or rotate signing keys through the provider or Hot Updater
+          CLI. The Console only reads a checked-in public key file.
+        </AlertDescription>
+      </Alert>
+    </div>
+  );
+}

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,185 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm";
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-3 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-64 data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-8 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-xs/relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/components/ui/alert.tsx

@@ -0,0 +1,76 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-xs/relaxed text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-1.5 right-2", className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/src/components/ui/badge.tsx

@@ -0,0 +1,49 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  });
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap cursor-pointer transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border dark:bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        xs: "h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5",
+        sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4",
+        icon: "size-7 [&_svg:not([class*='size-'])]:size-3.5",
+        "icon-xs": "size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5",
+        "icon-sm": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-lg": "size-8 [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      data-size={size}
+      data-variant={variant}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };