Open History to see the last commit
1import type { DeviceServiceState, EnvironmentId } from "@t3tools/contracts";
2import { useState } from "react";
3import { Button } from "~/components/ui/button";
4import { deviceEnvironment } from "~/state/device";
5import { useAtomCommand } from "~/state/use-atom-command";
6
7export function DeviceHostUpdates({
8 state,
9 environmentId,
10}: {
11 state: DeviceServiceState;
12 environmentId: EnvironmentId;
13}) {
14 const retry = useAtomCommand(deviceEnvironment.list);
15 const [pending, setPending] = useState<string | null>(null);
16 if (state.hostStatus === "disabled") return null;
17 return (
18 <div className="space-y-2">
19 {state.hosts.map((host) => {
20 const status = state.hostStatuses[host.id];
21 if (!status || !["installing", "starting", "failed"].includes(status.status)) return null;
22 const failed = status.status === "failed";
23 return (
24 <div
25 key={host.id}
26 role={failed ? "alert" : "status"}
27 className="flex items-start gap-3 rounded-md border border-border/60 px-3 py-2 text-xs"
28 >
29 <div className="min-w-0 flex-1">
30 <p className="font-medium">{host.label}</p>
31 <p className="whitespace-pre-wrap break-words text-muted-foreground">
32 {status.detail ??
33 (failed
34 ? "Device support could not start."
35 : status.status === "installing"
36 ? "Installing device tools…"
37 : "Starting device tools…")}
38 </p>
39 {failed ? (
40 <p className="mt-1 text-muted-foreground">
41 Check the host connection and network access, then retry. Your device settings are
42 saved.
43 </p>
44 ) : null}
45 </div>
46 {failed && state.supportsHostRetry ? (
47 <Button
48 size="compact"
49 variant="outline"
50 disabled={pending !== null}
51 onClick={() => {
52 setPending(host.id);
53 void retry({ environmentId, input: { retryHostId: host.id } }).finally(() =>
54 setPending(null),
55 );
56 }}
57 >
58 {pending === host.id ? "Retrying…" : "Retry"}
59 </Button>
60 ) : null}
61 </div>
62 );
63 })}
64 </div>
65 );
66}