@hot-updater/console 1.1.3 → 1.1.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hot-updater/console",
   "type": "module",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "files": [
     ".output",
     "lib",
@@ -58,10 +58,10 @@
     "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "verkit": "0.4.0",
-    "@hot-updater/bsdiff": "1.1.3",
-    "@hot-updater/protocol": "1.1.3",
-    "@hot-updater/server": "1.1.3",
-    "@hot-updater/plugin-core": "1.1.3"
+    "@hot-updater/bsdiff": "1.1.4",
+    "@hot-updater/plugin-core": "1.1.4",
+    "@hot-updater/protocol": "1.1.4",
+    "@hot-updater/server": "1.1.4"
   },
   "devDependencies": {
     "@tanstack/devtools-vite": "^0.6.0",
@@ -86,8 +86,8 @@
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "4.1.4",
     "web-vitals": "^5.1.0",
-    "@hot-updater/cli-tools": "1.1.3",
-    "@hot-updater/mock": "1.1.3"
+    "@hot-updater/cli-tools": "1.1.4",
+    "@hot-updater/mock": "1.1.4"
   },
   "description": "React Native OTA solution for self-hosted",
   "license": "SEE LICENSE IN LICENSE",

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

@@ -42,12 +42,16 @@ import {
   type InsightsRetentionDays,
   keepsTwelveMonths,
 } from "@/lib/insights-retention";
-import type { InsightsSearch } from "@/lib/insights-search";
+import {
+  DEFAULT_INSIGHTS_CHANNEL,
+  type InsightsSearch,
+} from "@/lib/insights-search";
 import type { AppUsageReport, UsageWindow } from "@/lib/insights-usage";
 
 import { EstimatedCount } from "./EstimatedCount";
 import { InsightsErrorAlert } from "./InsightsErrorAlert";
 import { UsagePeriodSelector } from "./InsightsPeriodSelector";
+import { InsightsScope } from "./InsightsScope";
 import { ReportingDevicesSummary } from "./ReportingDevicesSummary";
 
 const dates = new Intl.DateTimeFormat("en", {
@@ -98,7 +102,16 @@ export function AppUsage({
     <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>
+          <div className="flex min-w-0 flex-col gap-1">
+            <CardTitle>App usage</CardTitle>
+            <InsightsScope
+              channel={search.channel ?? DEFAULT_INSIGHTS_CHANNEL}
+              platform={search.platform ?? "all"}
+              narrower={
+                search.appVersion ? [`App version ${search.appVersion}`] : []
+              }
+            />
+          </div>
           <UsagePeriodSelector
             window={window}
             onWindowChange={onWindowChange}

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

@@ -1,14 +1,8 @@
-import { useState } from "react";
+import { RotateCcw, X } from "lucide-react";
+import type { ReactNode } from "react";
 
 import { PlatformIcon } from "@/components/PlatformIcon";
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import {
   Combobox,
   ComboboxContent,
@@ -16,9 +10,8 @@ import {
   ComboboxInput,
   ComboboxItem,
   ComboboxList,
+  ComboboxTrigger,
 } from "@/components/ui/combobox";
-import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
@@ -28,257 +21,282 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { useChannelsQuery } from "@/lib/api";
-import type { RecoveryInput } from "@/lib/insights-recovery";
-import type { AppUsageScope } from "@/lib/insights-usage";
+import { DEFAULT_INSIGHTS_CHANNEL } from "@/lib/insights-search";
+import type { AdoptionRelease, HealthPlatform } from "@/lib/release-adoption";
+
+import { platformLabel } from "./InsightsScope";
+import { ReleaseCombobox } from "./ReleaseCombobox";
+
+/** The Insights filters as the URL holds them. */
+export type InsightsFilters = {
+  readonly channel: string;
+  readonly platform: HealthPlatform;
+  readonly appVersion?: string;
+  readonly releaseId?: string;
+};
+
+const DEFAULT_FILTERS = {
+  channel: DEFAULT_INSIGHTS_CHANNEL,
+  platform: "all",
+  appVersion: undefined,
+  releaseId: undefined,
+} as const satisfies InsightsFilters;
+
+// One look for every filter; a filter narrower than its default is filled.
+const CHIP =
+  "h-11 shrink-0 gap-1.5 px-3 text-sm data-[active=true]:border-primary/60 data-[active=true]:bg-primary/10 sm:h-8 sm:text-xs";
+const SELECT_CHIP =
+  "shrink-0 gap-1.5 px-3 text-sm data-[active=true]:border-primary/60 data-[active=true]:bg-primary/10 data-[size=default]:h-11 sm:text-xs sm:data-[size=default]:h-8";
+
+/** A filter with a button that returns it to its default when it is narrowed. */
+function Clearable({
+  name,
+  active,
+  onClear,
+  children,
+}: {
+  readonly name: string;
+  readonly active: boolean;
+  readonly onClear: () => void;
+  readonly children: ReactNode;
+}) {
+  return (
+    <div className="flex shrink-0 items-center">
+      {children}
+      {active ? (
+        <Button
+          aria-label={`Clear ${name}`}
+          className="size-11 sm:size-8"
+          size="icon"
+          variant="ghost"
+          onClick={onClear}
+        >
+          <X aria-hidden="true" />
+        </Button>
+      ) : null}
+    </div>
+  );
+}
 
+/**
+ * The Insights filters, above every report. Each applies as it changes, so
+ * what they show is what the reports read; one narrower than its default is
+ * filled and can be cleared on its own, and Reset filters clears them all.
+ */
 export function InsightsControls({
-  onFiltersChange,
-  scope,
-  releaseScope,
+  filters,
   appVersions,
+  releases,
+  onFiltersChange,
 }: {
-  readonly onFiltersChange: (filters: {
-    readonly scope: AppUsageScope;
-    readonly releaseScope: Pick<
-      RecoveryInput,
-      "platform" | "channel" | "releaseId"
-    >;
-  }) => void;
-  readonly scope: AppUsageScope;
-  readonly releaseScope: Pick<
-    RecoveryInput,
-    "platform" | "channel" | "releaseId"
-  >;
+  readonly filters: InsightsFilters;
   readonly appVersions: readonly string[];
+  /** The channel's bundle deployments a release filter offers. */
+  readonly releases: readonly AdoptionRelease[];
+  readonly onFiltersChange: (change: Partial<InsightsFilters>) => void;
 }) {
-  const [platform, setPlatform] = useState(scope.platform);
-  const [channel, setChannel] = useState(scope.channel);
-  const [appVersion, setAppVersion] = useState(scope.appVersion ?? "");
-  const [releasePlatform, setReleasePlatform] = useState(releaseScope.platform);
-  const [releaseId, setReleaseId] = useState(releaseScope.releaseId ?? "");
   const versions = [
-    ...new Set([...appVersions, ...(appVersion ? [appVersion] : [])]),
+    ...new Set([
+      ...appVersions,
+      ...(filters.appVersion ? [filters.appVersion] : []),
+    ]),
   ];
   const channelsQuery = useChannelsQuery();
   const channels = channelsQuery.data?.map((item) => item.name) ?? [];
+  const narrowed = {
+    channel: filters.channel !== DEFAULT_FILTERS.channel,
+    platform: filters.platform !== DEFAULT_FILTERS.platform,
+    appVersion: filters.appVersion !== undefined,
+    releaseId: filters.releaseId !== undefined,
+  };
 
   return (
-    <Card className="shadow-sm">
-      <CardHeader className="gap-1 border-b px-5 py-4">
-        <CardTitle>Filters</CardTitle>
-        <CardDescription>
-          Channel applies to all reports. Other filters affect the report named
-          in their label.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="px-5 py-4">
-        <form
-          aria-label="Insights filters"
-          onSubmit={(event) => {
-            event.preventDefault();
-            onFiltersChange({
-              scope: {
-                platform,
-                channel,
-                ...(appVersion ? { appVersion } : {}),
-              },
-              releaseScope: {
-                platform: releasePlatform,
-                channel,
-                ...(releaseId.trim() ? { releaseId: releaseId.trim() } : {}),
-              },
-            });
-          }}
+    <div
+      aria-label="Insights filters"
+      className="flex shrink-0 items-center gap-2 overflow-x-auto border-b bg-background px-3 py-2 sm:flex-wrap sm:overflow-visible sm:px-4"
+      role="group"
+    >
+      <Combobox
+        items={channels}
+        value={filters.channel}
+        onValueChange={(value) => {
+          if (value !== null && value !== filters.channel)
+            onFiltersChange({ channel: value });
+        }}
+      >
+        <ComboboxTrigger
+          aria-label={`Channel: ${filters.channel}`}
+          data-active={narrowed.channel}
+          render={<Button className={CHIP} variant="outline" />}
         >
-          <FieldGroup className="grid grid-cols-1 items-end gap-4 sm:grid-cols-2 xl:grid-cols-[minmax(12rem,1.25fr)_9rem_minmax(10rem,1fr)_9rem_minmax(12rem,1fr)_auto]">
-            <Field className="min-w-0">
-              <FieldLabel htmlFor="insights-channel">Channel</FieldLabel>
-              <Combobox
-                items={channels}
-                value={channel}
-                onValueChange={(value) => {
-                  if (value !== null) setChannel(value);
-                }}
-              >
-                <ComboboxInput
-                  className="h-11 w-full sm:h-9 [&_input]:h-full"
-                  id="insights-channel"
-                  placeholder="Search channels…"
-                  maxLength={1024}
-                />
-                <ComboboxContent>
-                  <ComboboxEmpty>
-                    {channelsQuery.isPending ? (
-                      "Loading channels…"
-                    ) : channelsQuery.isError ? (
-                      <div className="flex flex-col items-center gap-2 p-2">
-                        Couldn't load channels.
-                        <Button
-                          onClick={() => void channelsQuery.refetch()}
-                          size="sm"
-                          variant="outline"
-                        >
-                          Retry channels
-                        </Button>
-                      </div>
-                    ) : (
-                      "No channels found."
-                    )}
-                  </ComboboxEmpty>
-                  <ComboboxList>
-                    {(item: string) => (
-                      <ComboboxItem
-                        className="min-h-11 pr-8 sm:min-h-8"
-                        key={item}
-                        value={item}
-                      >
-                        <span className="truncate">{item}</span>
-                      </ComboboxItem>
-                    )}
-                  </ComboboxList>
-                </ComboboxContent>
-              </Combobox>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="insights-platform">
-                Usage platform
-              </FieldLabel>
-              <Select
-                items={{ all: "All platforms", ios: "iOS", android: "Android" }}
-                value={platform}
-                onValueChange={(value) => {
-                  if (value === "all" || value === "ios" || value === "android")
-                    setPlatform(value);
-                }}
-              >
-                <SelectTrigger
-                  id="insights-platform"
-                  className="min-h-11 w-full sm:min-h-9"
+          <span className="text-muted-foreground">Channel</span>
+          <span className="max-w-48 truncate">{filters.channel}</span>
+        </ComboboxTrigger>
+        <ComboboxContent className="w-64">
+          <ComboboxInput
+            aria-label="Search channels"
+            placeholder="Search channels…"
+            showTrigger={false}
+            maxLength={1024}
+          />
+          <ComboboxEmpty>
+            {channelsQuery.isPending ? (
+              "Loading channels…"
+            ) : channelsQuery.isError ? (
+              <div className="flex flex-col items-center gap-2 p-2">
+                Couldn't load channels.
+                <Button
+                  onClick={() => void channelsQuery.refetch()}
+                  size="sm"
+                  variant="outline"
                 >
-                  <SelectValue>
-                    {platform !== "all" ? (
-                      <PlatformIcon platform={platform} className="size-3.5" />
-                    ) : null}
-                    {platform === "all"
-                      ? "All platforms"
-                      : platform === "ios"
-                        ? "iOS"
-                        : "Android"}
-                  </SelectValue>
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="all">All platforms</SelectItem>
-                    <SelectItem value="ios">
-                      <PlatformIcon platform="ios" className="size-3.5" />
-                      iOS
-                    </SelectItem>
-                    <SelectItem value="android">
-                      <PlatformIcon platform="android" className="size-3.5" />
-                      Android
-                    </SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </Field>
-            <Field className="min-w-0">
-              <FieldLabel htmlFor="insights-app-version">
-                App version
-              </FieldLabel>
-              <Select
-                items={Object.fromEntries([
-                  ["all", "All versions"],
-                  ...versions.map((version) => [`version:${version}`, version]),
-                ])}
-                value={appVersion ? `version:${appVersion}` : "all"}
-                onValueChange={(value) => {
-                  if (value !== null)
-                    setAppVersion(value === "all" ? "" : value.slice(8));
-                }}
+                  Retry channels
+                </Button>
+              </div>
+            ) : (
+              "No channels found."
+            )}
+          </ComboboxEmpty>
+          <ComboboxList>
+            {(item: string) => (
+              <ComboboxItem
+                className="min-h-11 pr-8 sm:min-h-8"
+                key={item}
+                value={item}
               >
-                <SelectTrigger
-                  id="insights-app-version"
-                  className="min-h-11 w-full sm:min-h-9"
-                >
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="all">All versions</SelectItem>
-                    {versions.map((version) => (
-                      <SelectItem key={version} value={`version:${version}`}>
-                        {version}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="insights-release-platform">
-                Health platform
-              </FieldLabel>
-              <Select
-                items={{ ios: "iOS", android: "Android" }}
-                value={releasePlatform}
-                onValueChange={(value) => {
-                  if (value === "ios" || value === "android")
-                    setReleasePlatform(value);
-                }}
-              >
-                <SelectTrigger
-                  id="insights-release-platform"
-                  className="min-h-11 w-full sm:min-h-9"
-                >
-                  <SelectValue>
-                    <PlatformIcon
-                      platform={releasePlatform}
-                      className="size-3.5"
-                    />
-                    {releasePlatform === "ios" ? "iOS" : "Android"}
-                  </SelectValue>
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="ios">
-                      <PlatformIcon platform="ios" className="size-3.5" />
-                      iOS
-                    </SelectItem>
-                    <SelectItem value="android">
-                      <PlatformIcon platform="android" className="size-3.5" />
-                      Android
-                    </SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </Field>
-            <Field className="min-w-0">
-              <FieldLabel htmlFor="insights-release-id">
-                Release ID{" "}
-                <span className="text-muted-foreground">(optional)</span>
-              </FieldLabel>
-              <Input
-                autoComplete="off"
-                className="h-11 sm:h-9"
-                id="insights-release-id"
-                maxLength={1024}
-                name="releaseId"
-                placeholder="All releases…"
-                value={releaseId}
-                onChange={(event) => setReleaseId(event.target.value)}
-              />
-            </Field>
-            <Button
-              className="h-11 w-full sm:h-9"
-              size="lg"
-              type="submit"
-              variant="outline"
+                <span className="truncate">{item}</span>
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+      <Clearable
+        name="platform"
+        active={narrowed.platform}
+        onClear={() => onFiltersChange({ platform: DEFAULT_FILTERS.platform })}
+      >
+        <Select
+          items={{ all: "All platforms", ios: "iOS", android: "Android" }}
+          value={filters.platform}
+          onValueChange={(value) => {
+            if (
+              (value === "all" || value === "ios" || value === "android") &&
+              value !== filters.platform
+            )
+              onFiltersChange({ platform: value });
+          }}
+        >
+          <SelectTrigger
+            aria-label="Platform"
+            className={SELECT_CHIP}
+            data-active={narrowed.platform}
+          >
+            <span className="text-muted-foreground">Platform</span>
+            <SelectValue>
+              {filters.platform === "all" ? null : (
+                <PlatformIcon
+                  platform={filters.platform}
+                  className="size-3.5"
+                />
+              )}
+              {platformLabel(filters.platform)}
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="all">All platforms</SelectItem>
+              <SelectItem value="ios">
+                <PlatformIcon platform="ios" className="size-3.5" />
+                iOS
+              </SelectItem>
+              <SelectItem value="android">
+                <PlatformIcon platform="android" className="size-3.5" />
+                Android
+              </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </Clearable>
+      <Clearable
+        name="app version"
+        active={narrowed.appVersion}
+        onClear={() => onFiltersChange({ appVersion: undefined })}
+      >
+        <Select
+          items={Object.fromEntries([
+            ["all", "All versions"],
+            ...versions.map((version) => [`version:${version}`, version]),
+          ])}
+          value={filters.appVersion ? `version:${filters.appVersion}` : "all"}
+          onValueChange={(value) => {
+            if (value === null) return;
+            const appVersion = value === "all" ? undefined : value.slice(8);
+            if (appVersion !== filters.appVersion)
+              onFiltersChange({ appVersion });
+          }}
+        >
+          <SelectTrigger
+            aria-label="App version"
+            className={SELECT_CHIP}
+            data-active={narrowed.appVersion}
+          >
+            <span className="text-muted-foreground">App version</span>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="all">All versions</SelectItem>
+              {versions.map((version) => (
+                <SelectItem key={version} value={`version:${version}`}>
+                  {version}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </Clearable>
+      <Clearable
+        name="release"
+        active={narrowed.releaseId}
+        onClear={() => onFiltersChange({ releaseId: undefined })}
+      >
+        <ReleaseCombobox
+          scope={{ channel: filters.channel, platform: filters.platform }}
+          candidates={releases}
+          excluded={filters.releaseId ? [filters.releaseId] : []}
+          label="Search releases"
+          placeholder="Search by ID or app version…"
+          onPick={(release) =>
+            onFiltersChange({ releaseId: release.releaseId })
+          }
+          trigger={
+            <ComboboxTrigger
+              aria-label={`Release: ${filters.releaseId ?? "All"}`}
+              data-active={narrowed.releaseId}
+              render={<Button className={CHIP} variant="outline" />}
             >
-              Apply filters
-            </Button>
-          </FieldGroup>
-        </form>
-      </CardContent>
-    </Card>
+              <span className="text-muted-foreground">Release</span>
+              {filters.releaseId ? (
+                <span className="max-w-36 truncate font-mono" translate="no">
+                  {filters.releaseId}
+                </span>
+              ) : (
+                "All"
+              )}
+            </ComboboxTrigger>
+          }
+        />
+      </Clearable>
+      {Object.values(narrowed).some(Boolean) ? (
+        <Button
+          className="h-11 shrink-0 sm:h-8"
+          variant="ghost"
+          onClick={() => onFiltersChange(DEFAULT_FILTERS)}
+        >
+          <RotateCcw aria-hidden="true" data-icon="inline-start" />
+          Reset filters
+        </Button>
+      ) : null}
+    </div>
   );
 }