fix(web): a newly installed plugin shows up on its own, and the display form can be used without a mouse

Installing a plugin left the sidebar unchanged until a reload. The reason is timing, not caching: the host restarts the scripting runner AFTER the job reports done, and the plugin only registers its UI once that comes back — several seconds later, by which point the one-shot invalidation had already run and found the old list. The nav then waited out the 30 s idle poll, which in practice meant "until I reloaded". Anything that changes the installed set now switches the directory to a 2 s poll for a minute, so the entry lands about a second after the plugin actually comes up. Measured end to end in a browser: 29 s → 7 s, with the plugin registering at 6 s. The plugin entries also never animated. They are rendered outside the `motion.nav` that carries the variants and the stagger, so they inherited neither and simply appeared — most visibly in exactly the case above, where one shows up in a nav that is already on screen. They get their own animation container now, matching the main nav. (A motion-wrapped div around the link, not `motion(Link)`, which erases TanStack's typed `params`.) The accessibility pass on the display form, where the console's densest controls live: - The Custom block's numeric inputs had a `<label>` with no `htmlFor` next to an `<input>` with no `id`, which labels nothing at all — a screen reader announced them as unnamed spin buttons. Single controls are paired properly now; the button groups became real `<fieldset>`/`<legend>`, which is what they are. - Every option group signalled its active choice with fill colour alone. They carry `aria-pressed` now, so the state is available to assistive tech and not only to people who can compare two button variants. - `QueryState`'s error branch is a live region, so a query that fails announces the failure instead of silently swapping one region for another. - Motion honours `prefers-reduced-motion` instead of overriding it. - `<html lang>` follows the locale instead of claiming "en" while the app renders German. Verified: switching to de flips the attribute. - "Close menu", "Language" and "Loading" went through the message catalogue. Also: ten dead message keys removed (a whole removed Clients page and the old Settings token field), and the README no longer tells operators to set the management token under "Settings → API token" — that field is gone and the token has been server-side only for some time. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-01 00:20:10 +02:00
parent 9e505aba41
commit de17ceb8f8
11 changed files with 176 additions and 75 deletions
@@ -28,6 +28,7 @@ import { getGetLibraryQueryKey } from "@/api/gen/library/library";
 import { getListNativeClientsQueryKey } from "@/api/gen/native/native";
 import { getGetPairingStatusQueryKey } from "@/api/gen/pairing/pairing";
 import { getGetUpdateStatusQueryKey } from "@/api/gen/update/update";
+import { boostPluginPolling, PLUGINS_KEY } from "@/api/plugins";
 import { storeKeys } from "@/api/store";

 /** Which query keys a given event kind invalidates. Unknown kinds are ignored on purpose.
@@ -72,7 +73,7 @@ function keysFor(kind: string): readonly (readonly unknown[])[] {
 		case "plugins.changed":
 		case "store.changed":
 			return [
-				["plugins"],
+				PLUGINS_KEY,
 				storeKeys.catalog,
 				storeKeys.installed,
 				storeKeys.runtime,
@@ -154,6 +155,10 @@ function attach(): void {
 	for (const kind of KINDS) {
 		source.addEventListener(kind, () => {
 			if (!client) return;
+			// The installed set changed — but the runner is probably still restarting, so keep
+			// checking for a while rather than trusting this one refetch (see boostPluginPolling).
+			if (kind === "plugins.changed" || kind === "store.changed")
+				boostPluginPolling();
 			for (const key of keysFor(kind)) invalidate(client, key);
 			// `host.started` names no keys — the host is NEW, so everything we hold predates it.
 			if (kind === "host.started") resyncAll(client);
@@ -60,12 +60,39 @@ export const pluginIcon = (name?: string): LucideIcon => {
 	return ICONS[name] ?? Puzzle;
 };

+/** The query key for the plugin directory — the nav is built from it. */
+export const PLUGINS_KEY = ["plugins"] as const;
+
+const IDLE_POLL_MS = 30_000;
+const BOOST_POLL_MS = 2_000;
+/** How long to keep polling fast after something changed the installed set. */
+const BOOST_MS = 60_000;
+
+/**
+ * Until this timestamp, poll the directory fast.
+ *
+ * A finished install is NOT the moment the plugin appears: the host restarts the scripting runner
+ * afterwards, and the plugin only registers its UI once that comes back — several seconds later,
+ * and after any one-shot invalidation has already run and found the old list. So the nav sat
+ * unchanged until the 30 s idle poll happened to land, which in practice meant "until I reloaded".
+ *
+ * Module-level rather than component state because the two things that need to trigger it (a store
+ * job settling, a `plugins.changed`/`store.changed` event) both live outside the nav.
+ */
+let boostUntil = 0;
+
+/** Poll the plugin directory fast for a while — call after anything that changes what's installed. */
+export function boostPluginPolling(): void {
+	boostUntil = Date.now() + BOOST_MS;
+}
+
 /** Live plugin registrations, polled (and refetched on window focus) so the nav stays current. */
 export function usePlugins() {
 	return useQuery({
-		queryKey: ["plugins"],
+		queryKey: PLUGINS_KEY,
 		queryFn: () => apiFetch<PluginSummary[]>("/api/v1/plugins"),
-		refetchInterval: 30_000,
+		refetchInterval: () =>
+			Date.now() < boostUntil ? BOOST_POLL_MS : IDLE_POLL_MS,
 		refetchOnWindowFocus: true,
 	});
 }
@@ -11,6 +11,7 @@ import {
 	useQueryClient,
 } from "@tanstack/react-query";
 import { apiFetch } from "@/api/fetcher";
+import { boostPluginPolling } from "@/api/plugins";

 /**
 * How much a plugin's provenance is worth, from most to least trustworthy:
@@ -166,6 +167,9 @@ const json = (method: string, body: unknown): RequestInit => ({
 * installed list, the runner state (it restarts), and the plugin directory the nav is built from.
 */
 export function invalidateStore(qc: QueryClient): Promise<void> {
+	// The runner restarts AFTER the job reports done, so the plugin registers its UI a few seconds
+	// from now — this invalidation would otherwise refetch the pre-install list and stop looking.
+	boostPluginPolling();
 	return Promise.all([
 		qc.invalidateQueries({ queryKey: storeKeys.catalog }),
 		qc.invalidateQueries({ queryKey: storeKeys.installed }),