import { CheckIcon } from "lucide-react";import { type ReactNode, useCallback, useMemo, useRef, useState } from "react";import type { EnvironmentId, ServerProvider } from "@t3tools/contracts";import { isAtomCommandInterrupted, squashAtomCommandFailure, type AtomCommandResult,} from "@t3tools/client-runtime/state/runtime"; import { cn } from "~/lib/utils";import { serverEnvironment } from "~/state/server";import { useAtomCommand } from "~/state/use-atom-command";import { useLocalEnvironmentUpdateGroups } from "./ProviderUpdateLaunchNotification.environments";import { collectProviderUpdateOutcomeSnapshots, firstRejectedProviderUpdateMessage, getProviderUpdateProgressToastView, getProviderUpdateSidebarPillView, isTerminalProviderUpdatePhase, resolveEnvironmentUpdateRowStatus, type LocalEnvironmentUpdateGroup, type LocalProviderUpdateOutcome, type ProviderUpdateRowStatus, type ProviderUpdateRowStatusKind, type ProviderUpdateToastView,} from "./ProviderUpdateLaunchNotification.logic";import { Button } from "./ui/button";import { Spinner } from "./ui/spinner"; type ProviderUpdateCommandResult = AtomCommandResult< { readonly providers: ReadonlyArray<ServerProvider> }, unknown>; /** * Map one targeted instance's update command result into the settled-outcome * shape the multi-backend reducers consume: a non-interrupted failure becomes a * rejection carrying its message; a success carries the post-update snapshot of * the targeted instance (null when the backend did not report it). */function toProviderUpdateOutcome(input: { readonly environmentId: EnvironmentId; readonly isPrimary: boolean; readonly target: { readonly driver: ServerProvider["driver"]; readonly instanceId: ServerProvider["instanceId"]; }; readonly result: ProviderUpdateCommandResult;}): PromiseSettledResult<LocalProviderUpdateOutcome> { if (input.result._tag === "Failure") { if (isAtomCommandInterrupted(input.result)) { // An interrupted dispatch (e.g. superseded) is neither a success nor a // hard failure — surface it as a non-contributing, non-rejecting outcome. return { status: "fulfilled", value: { environmentId: input.environmentId, isPrimary: input.isPrimary, driver: input.target.driver, instanceId: input.target.instanceId, provider: null, }, }; } const error = squashAtomCommandFailure(input.result); return { status: "rejected", reason: error instanceof Error ? error : new Error("Provider update failed."), }; } const provider = input.result.value.providers.find( (candidate) => candidate.instanceId === input.target.instanceId, ) ?? null; return { status: "fulfilled", value: { environmentId: input.environmentId, isPrimary: input.isPrimary, driver: input.target.driver, instanceId: input.target.instanceId, provider, }, };} // Transport-hang safety net. The dispatch's `finally` clears the spinner and the// in-flight guard on completion, so this only matters if a request never resolves// at all (e.g. the socket drops mid-flight without surfacing an error). Keep it// well beyond the server's own update timeout (5 min) so a legitimately slow// update (npm installs routinely run tens of seconds) is never cut off and left// showing a dead, unresponsive Update button.const PENDING_EXPIRY_MS = 6 * 60_000; function rowToneClass(kind: ProviderUpdateRowStatusKind): string { switch (kind) { case "failed": return "text-destructive"; case "unchanged": return "text-warning"; case "success": return "text-success"; default: return "text-muted-foreground"; }} function EnvironmentUpdateRow({ group, status, onUpdate,}: { readonly group: LocalEnvironmentUpdateGroup; readonly status: ProviderUpdateRowStatus; readonly onUpdate: () => void;}) { let trailing: ReactNode; switch (status.kind) { case "loading": trailing = <Spinner className="size-4 text-muted-foreground" />; break; case "success": trailing = <CheckIcon aria-hidden="true" className="size-4 text-success" />; break; case "failed": case "unchanged": trailing = ( <Button size="xs" variant="outline" onClick={onUpdate}> Retry </Button> ); break; default: trailing = ( <Button size="xs" onClick={onUpdate}> Update </Button> ); break; } return ( <div className="flex items-center justify-between gap-3 py-0.5"> <div className="flex min-w-0 flex-col"> <span className="truncate font-medium text-foreground">{group.label}</span> <span className={cn("truncate text-xs", rowToneClass(status.kind))}>{status.text}</span> </div> <div className="shrink-0">{trailing}</div> </div> );} /** * The launch popover's body when WSL is present: one row per local environment * (Windows + WSL), each with its own "update all" trigger that targets only * that environment's backend. */export function ProviderUpdateEnvironmentRows({ onInteract,}: { /** Called the first time the user triggers an update, so the host can stop refreshing the prompt. */ readonly onInteract?: () => void;}) { const { groups } = useLocalEnvironmentUpdateGroups(); const updateProvider = useAtomCommand(serverEnvironment.updateProvider, { reportFailure: false, }); const groupByEnvironment = useMemo( () => new Map(groups.map((group) => [group.environmentId, group] as const)), [groups], ); // Only surface results that land after this popover opened. const visibleAfterIsoRef = useRef<string>(new Date().toISOString()); // Synchronous re-entry guard. setPendingEnvironments is an async state update, // and PENDING_EXPIRY_MS can clear the spinner while a request is still in // flight, so a rapid double-click (or a click after the expiry fires mid- // request) would otherwise dispatch a second full round of updates. A ref // updates synchronously, so we can bail before doing any work. const inFlightEnvironmentsRef = useRef<Set<EnvironmentId>>(new Set()); // Monotonic per-environment request version. Bumped on each dispatch and // captured locally, so an attempt that was superseded -- e.g. one that already // tripped the expiry safety net and was retried -- detects it is no longer // current and skips every state write when it finally resolves, instead of // clobbering the newer attempt's spinner/result/error or its in-flight guard. const requestVersionRef = useRef<Map<EnvironmentId, number>>(new Map()); const [pendingEnvironments, setPendingEnvironments] = useState<ReadonlySet<EnvironmentId>>( () => new Set(), ); const [errorByEnvironment, setErrorByEnvironment] = useState<ReadonlyMap<EnvironmentId, string>>( () => new Map(), ); const [resultByEnvironment, setResultByEnvironment] = useState< ReadonlyMap<EnvironmentId, ProviderUpdateToastView> >(() => new Map()); const clearPending = useCallback((environmentId: EnvironmentId) => { setPendingEnvironments((previous) => { if (!previous.has(environmentId)) { return previous; } const next = new Set(previous); next.delete(environmentId); return next; }); }, []); const handleUpdate = useCallback( async (environmentId: EnvironmentId) => { const group = groupByEnvironment.get(environmentId); if (!group || group.candidates.length === 0) { return; } if (inFlightEnvironmentsRef.current.has(environmentId)) { return; } inFlightEnvironmentsRef.current.add(environmentId); const requestVersion = (requestVersionRef.current.get(environmentId) ?? 0) + 1; requestVersionRef.current.set(environmentId, requestVersion); const isCurrentRequest = () => requestVersionRef.current.get(environmentId) === requestVersion; onInteract?.(); const providerCount = group.candidates.length; const targets = group.candidates.map((candidate) => ({ driver: candidate.driver, instanceId: candidate.instanceId, })); setPendingEnvironments((previous) => new Set(previous).add(environmentId)); setErrorByEnvironment((previous) => { if (!previous.has(environmentId)) { return previous; } const next = new Map(previous); next.delete(environmentId); return next; }); setResultByEnvironment((previous) => { if (!previous.has(environmentId)) { return previous; } const next = new Map(previous); next.delete(environmentId); return next; }); const expiry = setTimeout(() => { // A newer attempt may have superseded this one; if so, leave its state // untouched. if (!isCurrentRequest()) { return; } // The request is presumed dead (see PENDING_EXPIRY_MS). Clear the // spinner AND the in-flight guard together so the row never strands on a // dead Update button, and surface feedback so the timeout is visible // rather than silently reverting to idle. inFlightEnvironmentsRef.current.delete(environmentId); clearPending(environmentId); setErrorByEnvironment((previous) => new Map(previous).set(environmentId, "Update timed out — try again."), ); }, PENDING_EXPIRY_MS); try { // Dispatch each candidate's update to this environment's own backend and // normalize every settled outcome into the multi-backend reducer shape. const results = await Promise.all( targets.map(async (target): Promise<PromiseSettledResult<LocalProviderUpdateOutcome>> => { try { const result = await updateProvider({ environmentId, input: { provider: target.driver, instanceId: target.instanceId }, }); return toProviderUpdateOutcome({ environmentId, isPrimary: group.isPrimary, target, result, }); } catch (error) { return { status: "rejected", reason: error instanceof Error ? error : new Error("Provider update failed."), }; } }), ); if (!isCurrentRequest()) { // A newer attempt superseded this one while it was in flight; leave // the newer attempt's state intact. return; } // The request resolved (not a transport hang), so clear any stale // timeout error the expiry may have set -- otherwise a late success // would be masked, since an error takes priority in the row status. setErrorByEnvironment((previous) => { if (!previous.has(environmentId)) { return previous; } const next = new Map(previous); next.delete(environmentId); return next; }); if (results.length === 0) { setErrorByEnvironment((previous) => new Map(previous).set( environmentId, "This environment isn’t connected — try again once it reconnects.", ), ); return; } const rejectedMessage = firstRejectedProviderUpdateMessage(results); if (rejectedMessage) { setErrorByEnvironment((previous) => new Map(previous).set(environmentId, rejectedMessage), ); return; } const view = getProviderUpdateProgressToastView({ providers: collectProviderUpdateOutcomeSnapshots(results), providerCount, }); // Only persist a terminal outcome. A non-terminal ("running"/"initial") // view means this dispatch could not confirm completion — e.g. a snapshot // came back without its targeted instance (collectProviderUpdateOutcome- // Snapshots drops null providers), which happens when the command is // interrupted as a second backend connects and supersedes the in-flight // update. A stored view never re-polls, so persisting it would pin the // row's spinner forever once the pending flag expires. Drop it and let // the live per-environment provider state (pill) plus the pending expiry // drive the row, so it self-heals to whatever the backend actually did. if (isTerminalProviderUpdatePhase(view.phase)) { setResultByEnvironment((previous) => new Map(previous).set(environmentId, view)); } } catch (error) { if (isCurrentRequest()) { setErrorByEnvironment((previous) => new Map(previous).set( environmentId, error instanceof Error ? error.message : "Provider update failed.", ), ); } } finally { clearTimeout(expiry); // Only the current attempt owns the shared spinner and in-flight guard; // a superseded attempt resolving late must not clear a newer one's. if (isCurrentRequest()) { clearPending(environmentId); inFlightEnvironmentsRef.current.delete(environmentId); } } }, [clearPending, groupByEnvironment, onInteract, updateProvider], ); const rows = groups .map((group) => ({ group, status: resolveEnvironmentUpdateRowStatus({ group, error: errorByEnvironment.get(group.environmentId), result: resultByEnvironment.get(group.environmentId), // Derive the live pill from the candidates this row is actually // tracking, not every provider in the environment. Otherwise an // unrelated provider's recent success (or one candidate succeeding while // another was interrupted) makes the pill report success and hides the // Update action for candidates that are still outdated. pill: getProviderUpdateSidebarPillView(group.candidates, { visibleAfterIso: visibleAfterIsoRef.current, }), isPending: pendingEnvironments.has(group.environmentId), }), })) .filter(({ group, status }) => group.candidates.length > 0 || status.kind !== "idle"); if (rows.length === 0) { return null; } return ( <div className="mt-0.5 flex flex-col gap-1"> {rows.map(({ group, status }) => ( <EnvironmentUpdateRow key={group.environmentId} group={group} status={status} onUpdate={() => handleUpdate(group.environmentId)} /> ))} </div> );}
import { CheckIcon } from "lucide-react";
import { type ReactNode, useCallback, useMemo, useRef, useState } from "react";
import type { EnvironmentId, ServerProvider } from "@t3tools/contracts";
import {
isAtomCommandInterrupted,
squashAtomCommandFailure,
type AtomCommandResult,
} from "@t3tools/client-runtime/state/runtime";
import { cn } from "~/lib/utils";
import { serverEnvironment } from "~/state/server";
import { useAtomCommand } from "~/state/use-atom-command";
import { useLocalEnvironmentUpdateGroups } from "./ProviderUpdateLaunchNotification.environments";
import {
collectProviderUpdateOutcomeSnapshots,
firstRejectedProviderUpdateMessage,
getProviderUpdateProgressToastView,
getProviderUpdateSidebarPillView,
isTerminalProviderUpdatePhase,
resolveEnvironmentUpdateRowStatus,
type LocalEnvironmentUpdateGroup,
type LocalProviderUpdateOutcome,
type ProviderUpdateRowStatus,
type ProviderUpdateRowStatusKind,
type ProviderUpdateToastView,
} from "./ProviderUpdateLaunchNotification.logic";
import { Button } from "./ui/button";
import { Spinner } from "./ui/spinner";
type ProviderUpdateCommandResult = AtomCommandResult<
{ readonly providers: ReadonlyArray<ServerProvider> },
unknown
>;
/**
* Map one targeted instance's update command result into the settled-outcome
* shape the multi-backend reducers consume: a non-interrupted failure becomes a
* rejection carrying its message; a success carries the post-update snapshot of
* the targeted instance (null when the backend did not report it).
*/
function toProviderUpdateOutcome(input: {
readonly environmentId: EnvironmentId;
readonly isPrimary: boolean;
readonly target: {
readonly driver: ServerProvider["driver"];
readonly instanceId: ServerProvider["instanceId"];
};
readonly result: ProviderUpdateCommandResult;
}): PromiseSettledResult<LocalProviderUpdateOutcome> {
if (input.result._tag === "Failure") {
if (isAtomCommandInterrupted(input.result)) {
// An interrupted dispatch (e.g. superseded) is neither a success nor a
// hard failure — surface it as a non-contributing, non-rejecting outcome.
return {
status: "fulfilled",
value: {
environmentId: input.environmentId,
isPrimary: input.isPrimary,
driver: input.target.driver,
instanceId: input.target.instanceId,
provider: null,
},
};
}
const error = squashAtomCommandFailure(input.result);
return {
status: "rejected",
reason: error instanceof Error ? error : new Error("Provider update failed."),
};
}
const provider =
input.result.value.providers.find(
(candidate) => candidate.instanceId === input.target.instanceId,
) ?? null;
return {
status: "fulfilled",
value: {
environmentId: input.environmentId,
isPrimary: input.isPrimary,
driver: input.target.driver,
instanceId: input.target.instanceId,
provider,
},
};
}
// Transport-hang safety net. The dispatch's `finally` clears the spinner and the
// in-flight guard on completion, so this only matters if a request never resolves
// at all (e.g. the socket drops mid-flight without surfacing an error). Keep it
// well beyond the server's own update timeout (5 min) so a legitimately slow
// update (npm installs routinely run tens of seconds) is never cut off and left
// showing a dead, unresponsive Update button.
const PENDING_EXPIRY_MS = 6 * 60_000;
function rowToneClass(kind: ProviderUpdateRowStatusKind): string {
switch (kind) {
case "failed":
return "text-destructive";
case "unchanged":
return "text-warning";
case "success":
return "text-success";
default:
return "text-muted-foreground";
}
}
function EnvironmentUpdateRow({
group,
status,
onUpdate,
}: {
readonly group: LocalEnvironmentUpdateGroup;
readonly status: ProviderUpdateRowStatus;
readonly onUpdate: () => void;
}) {
let trailing: ReactNode;
switch (status.kind) {
case "loading":
trailing = <Spinner className="size-4 text-muted-foreground" />;
break;
case "success":
trailing = <CheckIcon aria-hidden="true" className="size-4 text-success" />;
break;
case "failed":
case "unchanged":
trailing = (
<Button size="xs" variant="outline" onClick={onUpdate}>
Retry
</Button>
);
break;
default:
trailing = (
<Button size="xs" onClick={onUpdate}>
Update
</Button>
);
break;
}
return (
<div className="flex items-center justify-between gap-3 py-0.5">
<div className="flex min-w-0 flex-col">
<span className="truncate font-medium text-foreground">{group.label}</span>
<span className={cn("truncate text-xs", rowToneClass(status.kind))}>{status.text}</span>
</div>
<div className="shrink-0">{trailing}</div>
</div>
);
}
/**
* The launch popover's body when WSL is present: one row per local environment
* (Windows + WSL), each with its own "update all" trigger that targets only
* that environment's backend.
*/
export function ProviderUpdateEnvironmentRows({
onInteract,
}: {
/** Called the first time the user triggers an update, so the host can stop refreshing the prompt. */
readonly onInteract?: () => void;
}) {
const { groups } = useLocalEnvironmentUpdateGroups();
const updateProvider = useAtomCommand(serverEnvironment.updateProvider, {
reportFailure: false,
});
const groupByEnvironment = useMemo(
() => new Map(groups.map((group) => [group.environmentId, group] as const)),
[groups],
);
// Only surface results that land after this popover opened.
const visibleAfterIsoRef = useRef<string>(new Date().toISOString());
// Synchronous re-entry guard. setPendingEnvironments is an async state update,
// and PENDING_EXPIRY_MS can clear the spinner while a request is still in
// flight, so a rapid double-click (or a click after the expiry fires mid-
// request) would otherwise dispatch a second full round of updates. A ref
// updates synchronously, so we can bail before doing any work.
const inFlightEnvironmentsRef = useRef<Set<EnvironmentId>>(new Set());
// Monotonic per-environment request version. Bumped on each dispatch and
// captured locally, so an attempt that was superseded -- e.g. one that already
// tripped the expiry safety net and was retried -- detects it is no longer
// current and skips every state write when it finally resolves, instead of
// clobbering the newer attempt's spinner/result/error or its in-flight guard.
const requestVersionRef = useRef<Map<EnvironmentId, number>>(new Map());
const [pendingEnvironments, setPendingEnvironments] = useState<ReadonlySet<EnvironmentId>>(
() => new Set(),
);
const [errorByEnvironment, setErrorByEnvironment] = useState<ReadonlyMap<EnvironmentId, string>>(
() => new Map(),
);
const [resultByEnvironment, setResultByEnvironment] = useState<
ReadonlyMap<EnvironmentId, ProviderUpdateToastView>
>(() => new Map());
const clearPending = useCallback((environmentId: EnvironmentId) => {
setPendingEnvironments((previous) => {
if (!previous.has(environmentId)) {
return previous;
}
const next = new Set(previous);
next.delete(environmentId);
return next;
});
}, []);
const handleUpdate = useCallback(
async (environmentId: EnvironmentId) => {
const group = groupByEnvironment.get(environmentId);
if (!group || group.candidates.length === 0) {
return;
}
if (inFlightEnvironmentsRef.current.has(environmentId)) {
return;
}
inFlightEnvironmentsRef.current.add(environmentId);
const requestVersion = (requestVersionRef.current.get(environmentId) ?? 0) + 1;
requestVersionRef.current.set(environmentId, requestVersion);
const isCurrentRequest = () =>
requestVersionRef.current.get(environmentId) === requestVersion;
onInteract?.();
const providerCount = group.candidates.length;
const targets = group.candidates.map((candidate) => ({
driver: candidate.driver,
instanceId: candidate.instanceId,
}));
setPendingEnvironments((previous) => new Set(previous).add(environmentId));
setErrorByEnvironment((previous) => {
if (!previous.has(environmentId)) {
return previous;
}
const next = new Map(previous);
next.delete(environmentId);
return next;
});
setResultByEnvironment((previous) => {
if (!previous.has(environmentId)) {
return previous;
}
const next = new Map(previous);
next.delete(environmentId);
return next;
});
const expiry = setTimeout(() => {
// A newer attempt may have superseded this one; if so, leave its state
// untouched.
if (!isCurrentRequest()) {
return;
}
// The request is presumed dead (see PENDING_EXPIRY_MS). Clear the
// spinner AND the in-flight guard together so the row never strands on a
// dead Update button, and surface feedback so the timeout is visible
// rather than silently reverting to idle.
inFlightEnvironmentsRef.current.delete(environmentId);
clearPending(environmentId);
setErrorByEnvironment((previous) =>
new Map(previous).set(environmentId, "Update timed out — try again."),
);
}, PENDING_EXPIRY_MS);
try {
// Dispatch each candidate's update to this environment's own backend and
// normalize every settled outcome into the multi-backend reducer shape.
const results = await Promise.all(
targets.map(async (target): Promise<PromiseSettledResult<LocalProviderUpdateOutcome>> => {
try {
const result = await updateProvider({
environmentId,
input: { provider: target.driver, instanceId: target.instanceId },
});
return toProviderUpdateOutcome({
environmentId,
isPrimary: group.isPrimary,
target,
result,
});
} catch (error) {
return {
status: "rejected",
reason: error instanceof Error ? error : new Error("Provider update failed."),
};
}
}),
);
if (!isCurrentRequest()) {
// A newer attempt superseded this one while it was in flight; leave
// the newer attempt's state intact.
return;
}
// The request resolved (not a transport hang), so clear any stale
// timeout error the expiry may have set -- otherwise a late success
// would be masked, since an error takes priority in the row status.
setErrorByEnvironment((previous) => {
if (!previous.has(environmentId)) {
return previous;
}
const next = new Map(previous);
next.delete(environmentId);
return next;
});
if (results.length === 0) {
setErrorByEnvironment((previous) =>
new Map(previous).set(
environmentId,
"This environment isn’t connected — try again once it reconnects.",
),
);
return;
}
const rejectedMessage = firstRejectedProviderUpdateMessage(results);
if (rejectedMessage) {
setErrorByEnvironment((previous) =>
new Map(previous).set(environmentId, rejectedMessage),
);
return;
}
const view = getProviderUpdateProgressToastView({
providers: collectProviderUpdateOutcomeSnapshots(results),
providerCount,
});
// Only persist a terminal outcome. A non-terminal ("running"/"initial")
// view means this dispatch could not confirm completion — e.g. a snapshot
// came back without its targeted instance (collectProviderUpdateOutcome-
// Snapshots drops null providers), which happens when the command is
// interrupted as a second backend connects and supersedes the in-flight
// update. A stored view never re-polls, so persisting it would pin the
// row's spinner forever once the pending flag expires. Drop it and let
// the live per-environment provider state (pill) plus the pending expiry
// drive the row, so it self-heals to whatever the backend actually did.
if (isTerminalProviderUpdatePhase(view.phase)) {
setResultByEnvironment((previous) => new Map(previous).set(environmentId, view));
}
} catch (error) {
if (isCurrentRequest()) {
setErrorByEnvironment((previous) =>
new Map(previous).set(
environmentId,
error instanceof Error ? error.message : "Provider update failed.",
),
);
}
} finally {
clearTimeout(expiry);
// Only the current attempt owns the shared spinner and in-flight guard;
// a superseded attempt resolving late must not clear a newer one's.
if (isCurrentRequest()) {
clearPending(environmentId);
inFlightEnvironmentsRef.current.delete(environmentId);
}
}
},
[clearPending, groupByEnvironment, onInteract, updateProvider],
);
const rows = groups
.map((group) => ({
group,
status: resolveEnvironmentUpdateRowStatus({
group,
error: errorByEnvironment.get(group.environmentId),
result: resultByEnvironment.get(group.environmentId),
// Derive the live pill from the candidates this row is actually
// tracking, not every provider in the environment. Otherwise an
// unrelated provider's recent success (or one candidate succeeding while
// another was interrupted) makes the pill report success and hides the
// Update action for candidates that are still outdated.
pill: getProviderUpdateSidebarPillView(group.candidates, {
visibleAfterIso: visibleAfterIsoRef.current,
}),
isPending: pendingEnvironments.has(group.environmentId),
}),
}))
.filter(({ group, status }) => group.candidates.length > 0 || status.kind !== "idle");
if (rows.length === 0) {
return null;
}
return (
<div className="mt-0.5 flex flex-col gap-1">
{rows.map(({ group, status }) => (
<EnvironmentUpdateRow
key={group.environmentId}
group={group}
status={status}
onUpdate={() => handleUpdate(group.environmentId)}
/>
))}
</div>
);
}