grid: handle system update error cases

Update copy throughout system update page to be more consistent and
clear.

Recognize if a kelvin update failed and present a "retry" button.

Recognize if that failure was due to an out-of-date binary and instruct
the user to update their binary.

Disallow system updates if grid is blocked, and inform the user.

ui/src/preferences/about-system/AboutSystem.tsx

@@ -6,7 +6,7 @@ import { Dialog, DialogClose, DialogContent, DialogTrigger } from '../../compone
 import { FullTlon16Icon } from '../../components/icons/FullTlon16Icon';
 import { useSystemUpdate } from '../../logic/useSystemUpdate';
 import { useCharge } from '../../state/docket';
-import { usePike } from '../../state/kiln';
+import { usePike, useLag } from '../../state/kiln';
 import { disableDefault, pluralize } from '../../state/util';
 import { UpdatePreferences } from './UpdatePreferences';
 
@@ -20,7 +20,9 @@ export const AboutSystem = () => {
   const gardenPike = usePike(window.desk);
   const { systemBlocked, blockedCharges, blockedCount, freezeApps } =
     useSystemUpdate();
+  const gardenBlocked = null != blockedCharges.find(charge => charge.desk == 'garden');
   const hash = gardenPike && getHash(gardenPike);
+  const lag = useLag();
 
   return (
     <>
@@ -46,41 +48,83 @@ export const AboutSystem = () => {
           </div>
           {systemBlocked ? (
             <>
-              <p className="text-orange-500">Update is currently blocked by the following apps:</p>
+            {lag ? (
+              <>
+              <p className="text-orange-500">
+                System update failed because your runtime was out of date.
+              </p>
+              <p>
+                Update your runtime or contact your hosting provider.
+              </p>
+              <p>
+                Once your runtime is up to date, click retry below.
+              </p>
+              <Button variant="caution" onClick={freezeApps}>
+                Retry System Update
+              </Button>
+              </>
+            ) : (blockedCount == 0) ? (
+              <>
+              <p className="text-orange-500">
+                System update failed.
+              </p>
+              <p>
+                For additional debugging output, open the terminal and click retry below.
+              </p>
+              <Button variant="caution" onClick={freezeApps}>
+                Retry System Update
+              </Button>
+              </>
+            ) : (
+              <>
+              <p className="text-orange-500">
+                Update is currently blocked by the following {pluralize('app', blockedCount)}:
+              </p>
               <AppList
                 apps={blockedCharges}
                 labelledBy="blocked-apps"
                 size="xs"
                 className="font-medium"
               />
-              <Dialog>
-                <DialogTrigger as={Button} variant="caution">
-                  Freeze {blockedCount} {pluralize('app', blockedCount)} and Apply Update
-                </DialogTrigger>
-                <DialogContent
-                  showClose={false}
-                  onOpenAutoFocus={disableDefault}
-                  className="space-y-6 tracking-tight"
-                  containerClass="w-full max-w-md"
-                >
-                  <h2 className="h4">
-                    Freeze {blockedCount} {pluralize('App', blockedCount)} and Apply System Update
-                  </h2>
-                  <p>
-                    The following apps will be archived until their developer provides a compatible
-                    update to your system.
-                  </p>
-                  <AppList apps={blockedCharges} labelledBy="blocked-apps" size="xs" />
-                  <div className="flex space-x-6">
-                    <DialogClose as={Button} variant="secondary">
-                      Cancel
-                    </DialogClose>
-                    <DialogClose as={Button} variant="caution" onClick={freezeApps}>
-                      Freeze Apps
-                    </DialogClose>
-                  </div>
-                </DialogContent>
-              </Dialog>
+              {gardenBlocked ? (
+                <>
+                <p>
+                  Grid is the application launcher and system interface.
+                  It needs an update before you can apply the System Update.
+                </p>
+                </>
+              ) : (
+                <Dialog>
+                  <DialogTrigger as={Button} variant="caution">
+                    Suspend {blockedCount} {pluralize('App', blockedCount)} and Apply Update
+                  </DialogTrigger>
+                  <DialogContent
+                    showClose={false}
+                    onOpenAutoFocus={disableDefault}
+                    className="space-y-6 tracking-tight"
+                    containerClass="w-full max-w-md"
+                  >
+                    <h2 className="h4">
+                      Suspend {blockedCount} {pluralize('App', blockedCount)} and Apply System Update
+                    </h2>
+                    <p>
+                      The following {pluralize('app', blockedCount)} will be suspended until their
+                      developer provides an update.
+                    </p>
+                    <AppList apps={blockedCharges} labelledBy="blocked-apps" size="xs" />
+                    <div className="flex space-x-6">
+                      <DialogClose as={Button} variant="secondary">
+                        Cancel
+                      </DialogClose>
+                      <DialogClose as={Button} variant="caution" onClick={freezeApps}>
+                        Suspend {pluralize('App', blockedCount)} and Update
+                      </DialogClose>
+                    </div>
+                  </DialogContent>
+                </Dialog>
+              )}
+              </>
+            )}
             </>
           ) : (
             <p>Your urbit is up to date.</p>