# Files changed · PR \#22710 · pingdotgg/t3code [View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/22710/diffs) Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code) Visibility: public [refactor\(web\): ChatView's machine and server-update banners live in useSystemComposerBanners](https://git.cafe/pingdotgg/t3code/pull/22710.md) Version: 7 Head commit: 7de6e9a6fca9d5acba44242a5a102749d4878e08 Base commit: c61cf64dae5de0bba59018c60d73e15b1061b846 Comparison base: c61cf64dae5de0bba59018c60d73e15b1061b846 Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing. ## apps/web/src/components/ChatView.tsx Status: modified; +15; −277 ```diff @@ -75,7 +75,6 @@ resolveProjectProviderInstanceEnabled, RuntimeMode, } from "@t3tools/contracts"; -import { type EnvironmentConnectionPresentation } from "@t3tools/client-runtime/connection"; import { deriveThreadTitleSeed } from "@t3tools/client-runtime/operations"; import { wasBootstrapThreadDeleted } from "@t3tools/client-runtime/errors"; import { readPastedComposerContext } from "./composerInlineTokenPaste"; @@ -242,7 +241,6 @@ GitBranchIcon, ShieldQuestionIcon, TargetIcon, - WifiOffIcon, } from "lucide-react"; import { cn } from "~/lib/utils"; import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "~/workspaceTitlebar"; @@ -318,10 +316,6 @@ terminalContextReference, } from "../lib/composerContextRecords"; import { type ReviewCommentContext } from "../reviewCommentContext"; -import { environmentCatalog } from "../connection/catalog"; -import { ConnectionDiagnosisHeadline } from "./settings/ConnectionDiagnosisDetails"; -import { isDesktopLocalConnectionTarget } from "../connection/desktopLocal"; -import { useEnvironmentDisconnectDelay } from "../hooks/useEnvironmentDisconnectDelay"; import { selectThreadTerminalUiState, useTerminalUiStateStore } from "../terminalUiStateStore"; import { useKnownTerminalSessions, useThreadRunningTerminalIds } from "../state/terminalSessions"; import { useEnvironmentQuery } from "../state/query"; @@ -447,8 +441,6 @@ deriveCommittedServerUserMessageIds, deriveComposerSendState, dismissBranchMismatchForSession, - hasEnvironmentReconnectWarningGraceElapsed, - scheduleEnvironmentReconnectWarning, isBranchMismatchDismissedForSession, shouldShowBranchMismatchBanner, shouldShowPlanFollowUpPrompt, @@ -493,21 +485,6 @@ import { useAtomQueryRunner } from "../state/use-atom-query-runner"; import { Button, InlineButton } from "./ui/button"; import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip"; -import { ServerUpdateAction, serverUpdateStageLabel } from "./ServerUpdateAction"; -import { useAutoBalanceUpdateBanner } from "./chat/useAutoBalanceUpdateBanner"; -import { ComposerServerUpdateIcon } from "./chat/ComposerServerUpdateStatus"; -import { - buildVersionMismatchDismissalKey, - dismissServerUpdateFailure, - dismissVersionMismatch, - isServerUpdateFailureDismissed, - isVersionMismatchDismissed, - resolveServerConfigVersionMismatch, - resolveServerSelfUpdateCapability, - serverUpdateGuidance, - supportsDesktopAppUpdate, - supportsServerUpdateThreadContinuation, -} from "../versionSkew"; import { useAssetUrls } from "../assets/assetUrls"; import { ATTACHMENT_ONLY_BOOTSTRAP_PROMPT, @@ -518,6 +495,10 @@ import { ChatTerminalDrawers } from "./chat/ChatTerminalDrawers"; import { ChatRightPanel } from "./chat/ChatRightPanel"; import { useTimelineFollow } from "./chat/useTimelineFollow"; +import { + type EnvironmentUnavailableState, + useSystemComposerBanners, +} from "./chat/useSystemComposerBanners"; import { useDraftHeroLayoutTransition } from "./chat/useDraftHeroLayoutTransition"; import { useLocalDispatchState } from "./chat/useLocalDispatchState"; import { @@ -546,11 +527,6 @@ const EMPTY_AUTO_UPDATE_ENVIRONMENTS: ReadonlyArray = []; const EMPTY_PENDING_FILE_SURFACE_IDS: ReadonlySet = new Set(); -type EnvironmentUnavailableState = { - readonly environmentId: EnvironmentId; - readonly label: string; - readonly connection: EnvironmentConnectionPresentation; -}; const SCRIPT_TERMINAL_COLS = 120; const SCRIPT_TERMINAL_ROWS = 30; @@ -656,10 +632,6 @@ const { environments } = useEnvironments(); const providersByEnvironment = useEnvironmentProviders(); const primaryEnvironment = usePrimaryEnvironment(); - const retryEnvironment = useAtomCommand(environmentCatalog.retryNow, { reportFailure: false }); - const setEnvironmentEnabled = useAtomCommand(environmentCatalog.setEnabled, { - reportFailure: false, - }); const environmentById = new Map( environments.map((environment) => [environment.environmentId, environment]), ); @@ -1517,35 +1489,8 @@ }, [activeProjectRef, activeThreadRef]); const activeEnvironment = activeThread == null ? null : (environmentById.get(activeThread.environmentId) ?? null); - const activeEnvironmentConnectionPhase = activeEnvironment?.connection.phase ?? "available"; const activeEnvironmentUnavailable = - activeEnvironment !== null && activeEnvironmentConnectionPhase !== "connected"; - const activeReconnectingEnvironmentId = - activeEnvironmentConnectionPhase === "connecting" || - activeEnvironmentConnectionPhase === "reconnecting" - ? (activeEnvironment?.environmentId ?? null) - : null; - const [reconnectWarningGraceElapsedEnvironmentId, setReconnectWarningGraceElapsedEnvironmentId] = - useState(null); - // Each reconnect attempt gets its own grace period, including a later one to - // the same environment. - const [graceReconnectingEnvironmentId, setGraceReconnectingEnvironmentId] = useState( - activeReconnectingEnvironmentId, - ); - if (graceReconnectingEnvironmentId !== activeReconnectingEnvironmentId) { - setGraceReconnectingEnvironmentId(activeReconnectingEnvironmentId); - setReconnectWarningGraceElapsedEnvironmentId(null); - } - const reconnectWarningGraceElapsed = hasEnvironmentReconnectWarningGraceElapsed( - activeReconnectingEnvironmentId, - reconnectWarningGraceElapsedEnvironmentId, - ); - useEffect(() => { - if (activeReconnectingEnvironmentId === null) return; - return scheduleEnvironmentReconnectWarning(() => - setReconnectWarningGraceElapsedEnvironmentId(activeReconnectingEnvironmentId), - ); - }, [activeReconnectingEnvironmentId]); + activeEnvironment !== null && activeEnvironment.connection.phase !== "connected"; const activeEnvironmentUnavailableLabel = activeEnvironment?.label ?? null; const activeEnvironmentUnavailableState = (() => { if (!activeEnvironmentUnavailable || !activeEnvironmentUnavailableLabel || !activeEnvironment) { @@ -1558,53 +1503,6 @@ connection: activeEnvironment.connection, }; })() as EnvironmentUnavailableState | null; - const handleReconnectActiveEnvironment = async (environmentId: EnvironmentId) => { - const result = await retryEnvironment(environmentId); - if (result._tag === "Failure" && !isAtomCommandInterrupted(result)) { - const error = squashAtomCommandFailure(result); - toastManager.add( - stackedThreadToast({ - type: "error", - title: "Could not reconnect environment", - description: error instanceof Error ? error.message : "Failed to reconnect.", - }), - ); - } - }; - const handleReconnectActiveEnvironmentStable = useStableCallback( - handleReconnectActiveEnvironment, - ); - const disconnectDelayElapsed = useEnvironmentDisconnectDelay( - activeEnvironmentUnavailable ? activeEnvironment.environmentId : null, - ); - const canDisconnectActiveEnvironment = - disconnectDelayElapsed && - activeEnvironment !== null && - activeEnvironment.entry.target._tag !== "PrimaryConnectionTarget" && - !isDesktopLocalConnectionTarget(activeEnvironment.entry.target); - const [disconnectingEnvironment, setDisconnectingEnvironment] = useState(false); - const handleDisconnectActiveEnvironment = async (environmentId: EnvironmentId) => { - setDisconnectingEnvironment(true); - const result = await setEnvironmentEnabled({ environmentId, enabled: false }); - setDisconnectingEnvironment(false); - if (result._tag === "Failure") { - if (!isAtomCommandInterrupted(result)) { - const error = squashAtomCommandFailure(result); - toastManager.add( - stackedThreadToast({ - type: "error", - title: "Could not disconnect server", - description: error instanceof Error ? error.message : "Failed to disconnect.", - }), - ); - } - return; - } - void navigate({ to: "/", replace: true }); - }; - const handleDisconnectActiveEnvironmentStable = useStableCallback( - handleDisconnectActiveEnvironment, - ); const { openScratchProject } = useScratchProject(); const activeProjectIsScratch = activeProject !== null && @@ -1774,176 +1672,16 @@ return environment ? [environment] : []; }) : EMPTY_AUTO_UPDATE_ENVIRONMENTS; - const autoBalanceUpdateBanner = useAutoBalanceUpdateBanner(autoUpdateEnvironments); - const versionMismatch = resolveServerConfigVersionMismatch(serverConfig); - const versionMismatchDismissKey = - versionMismatch && activeThread - ? buildVersionMismatchDismissalKey(activeThread.environmentId, versionMismatch) - : null; - const [dismissedVersionMismatchKey, setDismissedVersionMismatchKey] = useState( - null, - ); - const versionMismatchDismissed = - versionMismatchDismissKey === dismissedVersionMismatchKey || - isVersionMismatchDismissed(versionMismatchDismissKey); - const showVersionMismatchBanner = - versionMismatch !== null && versionMismatchDismissKey !== null && !versionMismatchDismissed; - const hasMultipleRegisteredEnvironments = environments.length > 1; - const versionMismatchServerLabel = - hasMultipleRegisteredEnvironments && activeThread - ? `${environmentById.get(activeThread.environmentId)?.label ?? serverConfig?.environment.label ?? activeThread.environmentId} server` - : "server"; - const serverUpdateEnvironmentId = activeThread?.environmentId ?? null; - const versionMismatchSelfUpdate = resolveServerSelfUpdateCapability(serverConfig); - const versionMismatchInstallation = serverConfig?.environment.capabilities.serverInstallation; - const versionMismatchDesktopAppUpdate = supportsDesktopAppUpdate(serverConfig); - const versionMismatchThreadContinuation = supportsServerUpdateThreadContinuation(serverConfig); - const serverUpdateState = useAtomValue( - serverEnvironment.updateStateAtom(serverUpdateEnvironmentId), - ); - const [dismissedServerUpdateState, setDismissedServerUpdateState] = useState< - typeof serverUpdateState | null - >(null); - const serverUpdateFailureDismissed = - serverUpdateState === dismissedServerUpdateState || - isServerUpdateFailureDismissed(serverUpdateState); - const systemComposerBannerItems = (() => { - const items: ComposerBannerStackItem[] = []; - const updateRunning = serverUpdateState.status === "running"; - const unavailableConnection = activeEnvironmentUnavailableState?.connection ?? null; - const disconnectAction = - canDisconnectActiveEnvironment && activeEnvironmentUnavailableState ? ( - - ) : undefined; - const environmentReconnecting = - unavailableConnection !== null && - (unavailableConnection.phase === "connecting" || - unavailableConnection.phase === "reconnecting"); - const suppressUnavailableBanner = - environmentReconnecting && (updateRunning || !reconnectWarningGraceElapsed); - if (activeEnvironmentUnavailableState && unavailableConnection && !suppressUnavailableBanner) { - items.push({ - id: `environment-unavailable:${activeEnvironmentUnavailableState.environmentId}`, - variant: unavailableConnection.phase === "error" ? "error" : "warning", - icon: , - title: `${activeEnvironmentUnavailableState.label} is ${environmentReconnecting ? "reconnecting" : "offline"}`, - description: activeEnvironment ? ( - - ) : undefined, - actions: ( - <> - {!environmentReconnecting ? ( - - ) : null} - {disconnectAction} - - ), - }); - } - if ( - !automaticEnvironment && - serverUpdateEnvironmentId && - (serverUpdateState.status === "idle" - ? showVersionMismatchBanner - : !serverUpdateFailureDismissed) - ) { - const updateInProgress = serverUpdateState.status === "running"; - const updateFailed = serverUpdateState.status === "failed"; - items.push({ - id: `server-version:${serverUpdateEnvironmentId}`, - variant: updateFailed ? "error" : "default", - priority: updateInProgress ? "urgent" : "notice", - icon: , - title: - updateInProgress || updateFailed ? ( - `${updateFailed ? "Could not update" : "Updating"} ${versionMismatchServerLabel}` - ) : versionMismatch ? ( - + const systemComposerBannerItems = useSystemComposerBanners({ + activeEnvironment, + activeEnvironmentUnavailable, + activeEnvironmentUnavailableState, + activeThreadEnvironmentId: activeThread?.environmentId ?? null, + serverConfig, + hasMultipleRegisteredEnvironments: environments.length > 1, + automaticEnvironment, + autoUpdateEnvironments, + }); - - Server update available - - } - /> - - {versionMismatchServerLabel} {versionMismatch.serverVersion}{" "} - {versionMismatch.clientVersion} - - - ) : ( - "Server update available" - ), - description: - serverUpdateState.status === "failed" - ? serverUpdateState.message - : serverUpdateState.status === "running" - ? serverUpdateStageLabel(serverUpdateState.stage) - : versionMismatchSelfUpdate !== null && - (versionMismatchSelfUpdate !== "desktop-managed" || - !versionMismatchDesktopAppUpdate) - ? serverUpdateGuidance(versionMismatchSelfUpdate) - : undefined, - actions: updateInProgress ? ( - disconnectAction - ) : !versionMismatch || - (versionMismatchSelfUpdate === "desktop-managed" && - !versionMismatchDesktopAppUpdate) ? undefined : ( - - ), - ...(updateInProgress || (!updateFailed && !versionMismatchDismissKey) - ? {} - : { - dismissLabel: "Dismiss update notice", - onDismiss: () => { - if (updateFailed) { - dismissServerUpdateFailure(serverUpdateState); - setDismissedServerUpdateState(serverUpdateState); - } - dismissVersionMismatch(versionMismatchDismissKey); - setDismissedVersionMismatchKey(versionMismatchDismissKey); - }, - }), - }); - } - if (autoBalanceUpdateBanner) items.push(autoBalanceUpdateBanner); - return items; - })() as ComposerBannerStackItem[]; const providerInstanceEntries = sortProviderInstanceEntries( applyProviderInstanceSettings( deriveProviderInstanceEntries(providerStatuses), ``` ## apps/web/src/components/chat/useSystemComposerBanners.tsx Status: added; +323; −0 ```diff @@ -1,0 +1,323 @@ +import { useStableCallback } from "../../hooks/useStableCallback"; +import { type EnvironmentId } from "@t3tools/contracts"; +import { type EnvironmentConnectionPresentation } from "@t3tools/client-runtime/connection"; +import { useAtomValue } from "@effect/atom-react"; +import { useEffect, useState } from "react"; +import { useNavigate } from "@tanstack/react-router"; +import { + isAtomCommandInterrupted, + squashAtomCommandFailure, +} from "@t3tools/client-runtime/state/runtime"; +import { WifiOffIcon } from "lucide-react"; +import { stackedThreadToast, toastManager } from "../ui/toast"; +import { environmentCatalog } from "../../connection/catalog"; +import { ConnectionDiagnosisHeadline } from "../settings/ConnectionDiagnosisDetails"; +import { isDesktopLocalConnectionTarget } from "../../connection/desktopLocal"; +import { useEnvironmentDisconnectDelay } from "../../hooks/useEnvironmentDisconnectDelay"; +import { serverEnvironment } from "../../state/server"; +import { type EnvironmentPresentation } from "../../state/environments"; +import type { ComposerBannerStackItem } from "./ComposerBannerStack"; +import { + hasEnvironmentReconnectWarningGraceElapsed, + scheduleEnvironmentReconnectWarning, +} from "../ChatView.logic"; +import { useAtomCommand } from "../../state/use-atom-command"; +import { Button } from "../ui/button"; +import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip"; +import { ServerUpdateAction, serverUpdateStageLabel } from "../ServerUpdateAction"; +import { useAutoBalanceUpdateBanner } from "./useAutoBalanceUpdateBanner"; +import { ComposerServerUpdateIcon } from "./ComposerServerUpdateStatus"; +import { + buildVersionMismatchDismissalKey, + dismissServerUpdateFailure, + dismissVersionMismatch, + isServerUpdateFailureDismissed, + isVersionMismatchDismissed, + resolveServerConfigVersionMismatch, + resolveServerSelfUpdateCapability, + serverUpdateGuidance, + supportsDesktopAppUpdate, + supportsServerUpdateThreadContinuation, +} from "../../versionSkew"; + +export type EnvironmentUnavailableState = { + readonly environmentId: EnvironmentId; + readonly label: string; + readonly connection: EnvironmentConnectionPresentation; +}; + +interface SystemComposerBannersInput { + readonly activeEnvironment: EnvironmentPresentation | null; + readonly activeEnvironmentUnavailable: boolean; + readonly activeEnvironmentUnavailableState: EnvironmentUnavailableState | null; + readonly activeThreadEnvironmentId: EnvironmentId | null; + readonly serverConfig: EnvironmentPresentation["serverConfig"] | null; + readonly hasMultipleRegisteredEnvironments: boolean; + readonly automaticEnvironment: boolean; + readonly autoUpdateEnvironments: ReadonlyArray; +} + +/** + * The composer banners about the machine itself: offline or reconnecting, + * a server update, and auto-balanced machines that need one. + */ +export function useSystemComposerBanners(input: SystemComposerBannersInput) { + const { + activeEnvironment, + activeEnvironmentUnavailable, + activeEnvironmentUnavailableState, + activeThreadEnvironmentId, + serverConfig, + hasMultipleRegisteredEnvironments, + automaticEnvironment, + autoUpdateEnvironments, + } = input; + const navigate = useNavigate(); + const retryEnvironment = useAtomCommand(environmentCatalog.retryNow, { reportFailure: false }); + const setEnvironmentEnabled = useAtomCommand(environmentCatalog.setEnabled, { + reportFailure: false, + }); + const activeEnvironmentConnectionPhase = activeEnvironment?.connection.phase ?? "available"; + const activeReconnectingEnvironmentId = + activeEnvironmentConnectionPhase === "connecting" || + activeEnvironmentConnectionPhase === "reconnecting" + ? (activeEnvironment?.environmentId ?? null) + : null; + const [reconnectWarningGraceElapsedEnvironmentId, setReconnectWarningGraceElapsedEnvironmentId] = + useState(null); + // Each reconnect attempt gets its own grace period, including a later one to + // the same environment. + const [graceReconnectingEnvironmentId, setGraceReconnectingEnvironmentId] = useState( + activeReconnectingEnvironmentId, + ); + if (graceReconnectingEnvironmentId !== activeReconnectingEnvironmentId) { + setGraceReconnectingEnvironmentId(activeReconnectingEnvironmentId); + setReconnectWarningGraceElapsedEnvironmentId(null); + } + const reconnectWarningGraceElapsed = hasEnvironmentReconnectWarningGraceElapsed( + activeReconnectingEnvironmentId, + reconnectWarningGraceElapsedEnvironmentId, + ); + useEffect(() => { + if (activeReconnectingEnvironmentId === null) return; + return scheduleEnvironmentReconnectWarning(() => + setReconnectWarningGraceElapsedEnvironmentId(activeReconnectingEnvironmentId), + ); + }, [activeReconnectingEnvironmentId]); + const handleReconnectActiveEnvironment = async (environmentId: EnvironmentId) => { + const result = await retryEnvironment(environmentId); + if (result._tag === "Failure" && !isAtomCommandInterrupted(result)) { + const error = squashAtomCommandFailure(result); + toastManager.add( + stackedThreadToast({ + type: "error", + title: "Could not reconnect environment", + description: error instanceof Error ? error.message : "Failed to reconnect.", + }), + ); + } + }; + const handleReconnectActiveEnvironmentStable = useStableCallback( + handleReconnectActiveEnvironment, + ); + const disconnectDelayElapsed = useEnvironmentDisconnectDelay( + activeEnvironmentUnavailable && activeEnvironment ? activeEnvironment.environmentId : null, + ); + const canDisconnectActiveEnvironment = + disconnectDelayElapsed && + activeEnvironment !== null && + activeEnvironment.entry.target._tag !== "PrimaryConnectionTarget" && + !isDesktopLocalConnectionTarget(activeEnvironment.entry.target); + const [disconnectingEnvironment, setDisconnectingEnvironment] = useState(false); + const handleDisconnectActiveEnvironment = async (environmentId: EnvironmentId) => { + setDisconnectingEnvironment(true); + const result = await setEnvironmentEnabled({ environmentId, enabled: false }); + setDisconnectingEnvironment(false); + if (result._tag === "Failure") { + if (!isAtomCommandInterrupted(result)) { + const error = squashAtomCommandFailure(result); + toastManager.add( + stackedThreadToast({ + type: "error", + title: "Could not disconnect server", + description: error instanceof Error ? error.message : "Failed to disconnect.", + }), + ); + } + return; + } + void navigate({ to: "/", replace: true }); + }; + const handleDisconnectActiveEnvironmentStable = useStableCallback( + handleDisconnectActiveEnvironment, + ); + const autoBalanceUpdateBanner = useAutoBalanceUpdateBanner(autoUpdateEnvironments); + const versionMismatch = resolveServerConfigVersionMismatch(serverConfig); + const versionMismatchDismissKey = + versionMismatch && activeThreadEnvironmentId !== null + ? buildVersionMismatchDismissalKey(activeThreadEnvironmentId, versionMismatch) + : null; + const [dismissedVersionMismatchKey, setDismissedVersionMismatchKey] = useState( + null, + ); + const versionMismatchDismissed = + versionMismatchDismissKey === dismissedVersionMismatchKey || + isVersionMismatchDismissed(versionMismatchDismissKey); + const showVersionMismatchBanner = + versionMismatch !== null && versionMismatchDismissKey !== null && !versionMismatchDismissed; + const versionMismatchServerLabel = + hasMultipleRegisteredEnvironments && activeThreadEnvironmentId !== null + ? `${activeEnvironment?.label ?? serverConfig?.environment.label ?? activeThreadEnvironmentId} server` + : "server"; + const serverUpdateEnvironmentId = activeThreadEnvironmentId; + const versionMismatchSelfUpdate = resolveServerSelfUpdateCapability(serverConfig); + const versionMismatchInstallation = serverConfig?.environment.capabilities.serverInstallation; + const versionMismatchDesktopAppUpdate = supportsDesktopAppUpdate(serverConfig); + const versionMismatchThreadContinuation = supportsServerUpdateThreadContinuation(serverConfig); + const serverUpdateState = useAtomValue( + serverEnvironment.updateStateAtom(serverUpdateEnvironmentId), + ); + const [dismissedServerUpdateState, setDismissedServerUpdateState] = useState< + typeof serverUpdateState | null + >(null); + const serverUpdateFailureDismissed = + serverUpdateState === dismissedServerUpdateState || + isServerUpdateFailureDismissed(serverUpdateState); + return (() => { + const items: ComposerBannerStackItem[] = []; + const updateRunning = serverUpdateState.status === "running"; + const unavailableConnection = activeEnvironmentUnavailableState?.connection ?? null; + const disconnectAction = + canDisconnectActiveEnvironment && activeEnvironmentUnavailableState ? ( + + ) : undefined; + const environmentReconnecting = + unavailableConnection !== null && + (unavailableConnection.phase === "connecting" || + unavailableConnection.phase === "reconnecting"); + const suppressUnavailableBanner = + environmentReconnecting && (updateRunning || !reconnectWarningGraceElapsed); + if (activeEnvironmentUnavailableState && unavailableConnection && !suppressUnavailableBanner) { + items.push({ + id: `environment-unavailable:${activeEnvironmentUnavailableState.environmentId}`, + variant: unavailableConnection.phase === "error" ? "error" : "warning", + icon: , + title: `${activeEnvironmentUnavailableState.label} is ${environmentReconnecting ? "reconnecting" : "offline"}`, + description: activeEnvironment ? ( + + ) : undefined, + actions: ( + <> + {!environmentReconnecting ? ( + + ) : null} + {disconnectAction} + + ), + }); + } + if ( + !automaticEnvironment && + serverUpdateEnvironmentId && + (serverUpdateState.status === "idle" + ? showVersionMismatchBanner + : !serverUpdateFailureDismissed) + ) { + const updateInProgress = serverUpdateState.status === "running"; + const updateFailed = serverUpdateState.status === "failed"; + items.push({ + id: `server-version:${serverUpdateEnvironmentId}`, + variant: updateFailed ? "error" : "default", + priority: updateInProgress ? "urgent" : "notice", + icon: , + title: + updateInProgress || updateFailed ? ( + `${updateFailed ? "Could not update" : "Updating"} ${versionMismatchServerLabel}` + ) : versionMismatch ? ( + + + Server update available + + } + /> + + {versionMismatchServerLabel} {versionMismatch.serverVersion}{" "} + {versionMismatch.clientVersion} + + + ) : ( + "Server update available" + ), + description: + serverUpdateState.status === "failed" + ? serverUpdateState.message + : serverUpdateState.status === "running" + ? serverUpdateStageLabel(serverUpdateState.stage) + : versionMismatchSelfUpdate !== null && + (versionMismatchSelfUpdate !== "desktop-managed" || + !versionMismatchDesktopAppUpdate) + ? serverUpdateGuidance(versionMismatchSelfUpdate) + : undefined, + actions: updateInProgress ? ( + disconnectAction + ) : !versionMismatch || + (versionMismatchSelfUpdate === "desktop-managed" && + !versionMismatchDesktopAppUpdate) ? undefined : ( + + ), + ...(updateInProgress || (!updateFailed && !versionMismatchDismissKey) + ? {} + : { + dismissLabel: "Dismiss update notice", + onDismiss: () => { + if (updateFailed) { + dismissServerUpdateFailure(serverUpdateState); + setDismissedServerUpdateState(serverUpdateState); + } + dismissVersionMismatch(versionMismatchDismissKey); + setDismissedVersionMismatchKey(versionMismatchDismissKey); + }, + }), + }); + } + if (autoBalanceUpdateBanner) items.push(autoBalanceUpdateBanner); + return items; + })() as ComposerBannerStackItem[]; +} ```