From 05dbd767f25e4e856d1e2b42a6e4787f1f7219e6 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Fri, 14 Aug 2026 16:46:04 -0400
Subject: [PATCH] polish workspace chooser unreachable-realm notice and update
 alert icons and loading indicator

---
 .../boxel-ui/raw-icons/failure-bordered.svg   |   2 +-
 .../raw-icons/warning-triangle-filled.svg     |   6 +-
 .../boxel-ui/src/components/alert/index.gts   |  16 ++-
 .../components/loading-indicator/index.gts    |  50 +++-----
 .../components/loading-indicator/usage.gts    | 112 +++++++++---------
 .../boxel-ui/src/icons/failure-bordered.gts   |  16 +--
 .../src/icons/warning-triangle-filled.gts     |  16 +--
 packages/host/app/components/card-pill.gts    |   2 -
 .../operator-mode/workspace-chooser/index.gts |  42 +++++--
 packages/host/app/services/matrix-service.ts  |   8 ++
 10 files changed, 141 insertions(+), 129 deletions(-)

diff --git a/packages/boxel-ui/raw-icons/failure-bordered.svg b/packages/boxel-ui/raw-icons/failure-bordered.svg
index 22af5388eca..7f981709f3f 100644
--- a/packages/boxel-ui/raw-icons/failure-bordered.svg
+++ b/packages/boxel-ui/raw-icons/failure-bordered.svg
@@ -1 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><circle fill="var(--icon-background-color, red)" cx="10" cy="10" r="10"/><path d="M11.143 10.757h-2.32l-.486-6.855h3.29l-.484 6.855zM8.3 14.01a1.594 1.594 0 01.427-1.207c.346-.294.793-.441 1.246-.41.446-.028.886.123 1.222.419.304.322.461.756.432 1.198a1.59 1.59 0 01-.437 1.182c-.33.303-.77.46-1.217.433a1.705 1.705 0 01-1.237-.423 1.583 1.583 0 01-.436-1.192z" fill="var(--icon-color, #FFF)"/></g></svg>
\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><circle fill="var(--icon-background-color, var(--destructive, red))" cx="12" cy="12" r="10"/><path d="M13.143 12.757h-2.32l-.486-6.855h3.29l-.484 6.855zM10.3 16.01a1.594 1.594 0 01.427-1.207c.346-.294.793-.441 1.246-.41.446-.028.886.123 1.222.419.304.322.461.756.432 1.198a1.59 1.59 0 01-.437 1.182c-.33.303-.77.46-1.217.433a1.705 1.705 0 01-1.237-.423 1.583 1.583 0 01-.436-1.192z" fill="var(--icon-foreground-color, #f5f5f5)"/></g></svg>
\ No newline at end of file
diff --git a/packages/boxel-ui/raw-icons/warning-triangle-filled.svg b/packages/boxel-ui/raw-icons/warning-triangle-filled.svg
index f7f933bc29e..b57c3170537 100644
--- a/packages/boxel-ui/raw-icons/warning-triangle-filled.svg
+++ b/packages/boxel-ui/raw-icons/warning-triangle-filled.svg
@@ -1,5 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-  <path fill="#ffa515" stroke="#ffa515" stroke-width="1.5" stroke-linejoin="round" d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
-  <path fill="none" stroke="#1a1a1a" stroke-width="2.2" stroke-linecap="round" d="M12 9.2v4.3"/>
-  <circle fill="#1a1a1a" cx="12" cy="16.9" r="1.05"/>
-</svg>
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m21.73 18-8-14a2 2 0 0 0 -3.48 0l-8 14a2 2 0 0 0 1.75 3h16a2 2 0 0 0 1.73-3z" fill="var(--icon-background-color, #ffba00)" stroke="none" stroke-linejoin="round" stroke-width="1.5"/><path d="m12 9.2v4.3" fill="none" stroke="var(--icon-foreground-color, #1a1a1a)" stroke-linecap="round" stroke-width="2.2"/><circle cx="12" cy="16.9" fill="var(--icon-foreground-color, #1a1a1a)" r="1.05"/></svg>
\ No newline at end of file
diff --git a/packages/boxel-ui/src/components/alert/index.gts b/packages/boxel-ui/src/components/alert/index.gts
index e68a72eaefe..196728725df 100644
--- a/packages/boxel-ui/src/components/alert/index.gts
+++ b/packages/boxel-ui/src/components/alert/index.gts
@@ -43,9 +43,13 @@ const Messages: TemplateOnlyComponent<MessagesSignature> = <template>
   {{#each @messages as |message i|}}
     <div class='alert'>
       {{#if (eq @type 'error')}}
-        <FailureBordered class='alert-icon failure-icon' />
+        <FailureBordered
+          class='alert-icon failure-icon'
+          width='24'
+          height='24'
+        />
       {{else if (eq @type 'warning')}}
-        <Warning class='alert-icon' />
+        <Warning class='alert-icon' width='20' height='20' />
       {{/if}}
       <p
         class='message'
@@ -65,13 +69,7 @@ const Messages: TemplateOnlyComponent<MessagesSignature> = <template>
       margin-top: var(--boxel-sp-lg);
     }
     .alert-icon {
-      min-width: 20px;
-      height: 20px;
-      --icon-background-color: var(--boxel-error-400);
-    }
-    .failure-icon {
-      --icon-background-color: var(--boxel-error-400);
-      --icon-color: var(--boxel-light);
+      flex-shrink: 0;
     }
     .message {
       align-self: center;
diff --git a/packages/boxel-ui/src/components/loading-indicator/index.gts b/packages/boxel-ui/src/components/loading-indicator/index.gts
index bc478a65fe5..3ee69ffd13b 100644
--- a/packages/boxel-ui/src/components/loading-indicator/index.gts
+++ b/packages/boxel-ui/src/components/loading-indicator/index.gts
@@ -1,33 +1,27 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
-import { concat } from '@ember/helper';
 
-import cn from '../../helpers/cn.ts';
 import cssVar from '../../helpers/css-var.ts';
 import LoadingIndicatorIcon from '../../icons/loading-indicator.gts';
 
 interface Signature {
   Args: {
     color?: string;
-    variant?: 'primary' | 'secondary' | 'muted' | 'destructive' | 'default';
+    size?: string;
   };
   Element: HTMLSpanElement;
 }
 
 const LoadingIndicator: TemplateOnlyComponent<Signature> = <template>
   <span
-    class={{cn
-      'boxel-loading-indicator'
-      (if @variant (concat 'variant-' @variant) 'variant-default')
+    class='boxel-loading-indicator'
+    style={{cssVar
+      icon-color=(if @color @color 'var(--loading-indicator-color)')
+      boxel-loading-indicator-size=@size
     }}
     data-test-loading-indicator
     ...attributes
   >
-    <LoadingIndicatorIcon
-      style={{cssVar
-        icon-color=(if @color @color 'var(--loading-indicator-color)')
-      }}
-      role='presentation'
-    />
+    <LoadingIndicatorIcon role='presentation' />
   </span>
   <style scoped>
     /* zero specificity default sizing */
@@ -36,40 +30,26 @@ const LoadingIndicator: TemplateOnlyComponent<Signature> = <template>
         --boxel-loading-indicator-size,
         var(--boxel-icon-sm)
       );
+      --loading-indicator-color: var(
+        --boxel-loading-indicator-color,
+        currentColor
+      );
       display: inline-block;
       width: var(--loading-indicator-size);
       height: var(--loading-indicator-size);
       flex-shrink: 0;
     }
 
-    .variant-default {
-      --loading-indicator-color: var(--foreground);
-    }
-
-    .variant-primary {
-      --loading-indicator-color: var(--primary-foreground);
-    }
-
-    .variant-secondary {
-      --loading-indicator-color: var(--secondary-foreground);
-    }
-
-    .variant-muted {
-      --loading-indicator-color: var(--muted-foreground);
-    }
-
-    .variant-destructive {
-      --loading-indicator-color: var(--destructive-foreground);
+    .boxel-loading-indicator :deep(svg) {
+      display: block;
+      width: var(--loading-indicator-size);
+      height: var(--loading-indicator-size);
     }
 
-    /*
-      Only animate if the user has not said that they want reduced motion
-    */
+    /* Only animate if the user has not said that they want reduced motion */
     @media (prefers-reduced-motion: no-preference) {
       .boxel-loading-indicator :deep(svg) {
         animation: var(--boxel-infinite-spin-animation);
-        width: var(--loading-indicator-size);
-        height: var(--loading-indicator-size);
       }
     }
   </style>
diff --git a/packages/boxel-ui/src/components/loading-indicator/usage.gts b/packages/boxel-ui/src/components/loading-indicator/usage.gts
index 4791d0213a7..f2cb4d3c75f 100644
--- a/packages/boxel-ui/src/components/loading-indicator/usage.gts
+++ b/packages/boxel-ui/src/components/loading-indicator/usage.gts
@@ -7,66 +7,72 @@ import {
   cssVariable,
 } from 'ember-freestyle/decorators/css-variable';
 
-import cssVars from '../../helpers/css-var.ts';
+import cssVar from '../../helpers/css-var.ts';
 import BoxelLoadingIndicator from './index.gts';
 
 export default class LoadingIndicatorUsage extends Component {
-  @tracked color = '';
-  @tracked variant:
-    | undefined
-    | 'primary'
-    | 'secondary'
-    | 'muted'
-    | 'destructive'
-    | 'default' = undefined;
+  @tracked color?: string;
+  @tracked size?: string;
 
-  variants = ['default', 'primary', 'secondary', 'muted', 'destructive'];
-
-  @cssVariable({ cssClassName: 'boxel-loading-indicator-size' })
+  @cssVariable({ cssClassName: 'loading-indicator-usage-container' })
   declare boxelLoadingIndicatorSize: CSSVariableInfo;
+  @cssVariable({ cssClassName: 'loading-indicator-usage-container' })
+  declare boxelLoadingIndicatorColor: CSSVariableInfo;
 
   <template>
-    <FreestyleUsage
-      @name='Loading Indicator'
-      @description='Default loading indicator for Boxel components.'
+    <div
+      class='loading-indicator-usage-container'
+      style={{cssVar
+        boxel-loading-indicator-size=this.boxelLoadingIndicatorSize.value
+        boxel-loading-indicator-color=this.boxelLoadingIndicatorColor.value
+      }}
     >
-      <:example>
-        <BoxelLoadingIndicator
-          class='loading-indicator-usage__example'
-          style={{cssVars
-            boxel-loading-indicator-size=this.boxelLoadingIndicatorSize.value
-          }}
-          @color={{this.color}}
-          @variant={{this.variant}}
-        />
-      </:example>
-      <:api as |Args|>
-        <Args.String
-          @name='color'
-          @description='Custom color override (CSS color value)'
-          @value={{this.color}}
-          @onInput={{fn (mut this.color)}}
-          @default='undefined'
-        />
-        <Args.String
-          @name='variant'
-          @description='Theme-based color variant'
-          @value={{this.variant}}
-          @onInput={{fn (mut this.variant)}}
-          @options={{this.variants}}
-          @default='undefined'
-        />
-      </:api>
-      <:cssVars as |Css|>
-        <Css.Basic
-          @name='loading-indicator-size'
-          @type='length'
-          @description='Sets height and width for loading indicator icon.'
-          @defaultValue={{this.boxelLoadingIndicatorSize.defaults}}
-          @value={{this.boxelLoadingIndicatorSize.value}}
-          @onInput={{this.boxelLoadingIndicatorSize.update}}
-        />
-      </:cssVars>
-    </FreestyleUsage>
+      <FreestyleUsage
+        @name='Loading Indicator'
+        @description='Default loading indicator for Boxel components.'
+      >
+        <:example>
+          <BoxelLoadingIndicator
+            class='loading-indicator-usage__example'
+            @color={{this.color}}
+            @size={{this.size}}
+          />
+        </:example>
+        <:api as |Args|>
+          <Args.String
+            @name='color'
+            @description='Custom color override (CSS color value). Defaults to currentColor.'
+            @value={{this.color}}
+            @onInput={{fn (mut this.color)}}
+            @default='undefined'
+          />
+          <Args.String
+            @name='size'
+            @description='One CSS length for both axes, e.g. 20px. Takes precedence over the boxel-loading-indicator-size variable.'
+            @value={{this.size}}
+            @onInput={{fn (mut this.size)}}
+            @default='undefined'
+          />
+        </:api>
+        <:cssVars as |Css|>
+          <Css.Basic
+            @name='boxel-loading-indicator-size'
+            @type='length'
+            @description='Sets height and width for loading indicator icon. The @size argument takes precedence.'
+            @defaultValue={{this.boxelLoadingIndicatorSize.defaults}}
+            @value={{this.boxelLoadingIndicatorSize.value}}
+            @onInput={{this.boxelLoadingIndicatorSize.update}}
+          />
+          <Css.Basic
+            @name='boxel-loading-indicator-color'
+            @type='color'
+            @description='Icon color (defaults to currentColor). The @color argument takes precedence.'
+            @defaultValue={{this.boxelLoadingIndicatorColor.defaults}}
+            @value={{this.boxelLoadingIndicatorColor.value}}
+            @onInput={{this.boxelLoadingIndicatorColor.update}}
+          />
+        </:cssVars>
+      </FreestyleUsage>
+    </div>
   </template>
 }
diff --git a/packages/boxel-ui/src/icons/failure-bordered.gts b/packages/boxel-ui/src/icons/failure-bordered.gts
index 7dbfbdf018d..a1807806135 100644
--- a/packages/boxel-ui/src/icons/failure-bordered.gts
+++ b/packages/boxel-ui/src/icons/failure-bordered.gts
@@ -6,18 +6,18 @@ import type { Signature } from './types.ts';
 const IconComponent: TemplateOnlyComponent<Signature> = <template>
   <svg
     xmlns='http://www.w3.org/2000/svg'
-    width='20'
-    height='20'
-    viewBox='0 0 20 20'
+    width='24'
+    height='24'
+    viewBox='0 0 24 24'
     ...attributes
   ><g fill='none'><circle
-        cx='10'
-        cy='10'
+        cx='12'
+        cy='12'
         r='10'
-        fill='var(--icon-background-color, red)'
+        fill='var(--icon-background-color, var(--destructive, red))'
       /><path
-        fill='var(--icon-color, #FFF)'
-        d='M11.143 10.757h-2.32l-.486-6.855h3.29zM8.3 14.01a1.6 1.6 0 0 1 .427-1.207 1.74 1.74 0 0 1 1.246-.41 1.7 1.7 0 0 1 1.222.419c.304.322.461.756.432 1.198a1.6 1.6 0 0 1-.437 1.182c-.33.303-.77.46-1.217.433a1.7 1.7 0 0 1-1.237-.423A1.58 1.58 0 0 1 8.3 14.01'
+        fill='var(--icon-foreground-color, #f5f5f5)'
+        d='M13.143 12.757h-2.32l-.486-6.855h3.29zM10.3 16.01a1.6 1.6 0 0 1 .427-1.207 1.74 1.74 0 0 1 1.246-.41 1.7 1.7 0 0 1 1.222.419c.304.322.461.756.432 1.198a1.6 1.6 0 0 1-.437 1.182c-.33.303-.77.46-1.217.433a1.7 1.7 0 0 1-1.237-.423 1.58 1.58 0 0 1-.436-1.192'
       /></g></svg>
 </template>;
 
diff --git a/packages/boxel-ui/src/icons/warning-triangle-filled.gts b/packages/boxel-ui/src/icons/warning-triangle-filled.gts
index 3deb7918232..2d68e862389 100644
--- a/packages/boxel-ui/src/icons/warning-triangle-filled.gts
+++ b/packages/boxel-ui/src/icons/warning-triangle-filled.gts
@@ -11,18 +11,20 @@ const IconComponent: TemplateOnlyComponent<Signature> = <template>
     viewBox='0 0 24 24'
     ...attributes
   ><path
-      fill='#ffa515'
-      stroke='#ffa515'
-      stroke-linejoin='round'
-      stroke-width='1.5'
-      d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'
+      fill='var(--icon-background-color, #ffba00)'
+      d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'
     /><path
       fill='none'
-      stroke='#1a1a1a'
+      stroke='var(--icon-foreground-color, #1a1a1a)'
       stroke-linecap='round'
       stroke-width='2.2'
       d='M12 9.2v4.3'
-    /><circle cx='12' cy='16.9' r='1.05' fill='#1a1a1a' /></svg>
+    /><circle
+      cx='12'
+      cy='16.9'
+      r='1.05'
+      fill='var(--icon-foreground-color, #1a1a1a)'
+    /></svg>
 </template>;
 
 // @ts-expect-error this is the only way to set a name on a Template Only Component currently
diff --git a/packages/host/app/components/card-pill.gts b/packages/host/app/components/card-pill.gts
index c39fee904a5..90b73a3d722 100644
--- a/packages/host/app/components/card-pill.gts
+++ b/packages/host/app/components/card-pill.gts
@@ -165,8 +165,6 @@ export default class CardPill extends Component<CardPillSignature> {
       .fallback-card-icon {
         display: block;
         flex-shrink: 0;
-        --icon-background-color: var(--boxel-error-500);
-        --icon-color: var(--boxel-light);
       }
       .card-content {
         max-width: 100px;
diff --git a/packages/host/app/components/operator-mode/workspace-chooser/index.gts b/packages/host/app/components/operator-mode/workspace-chooser/index.gts
index 32fbd545e73..708db33332a 100644
--- a/packages/host/app/components/operator-mode/workspace-chooser/index.gts
+++ b/packages/host/app/components/operator-mode/workspace-chooser/index.gts
@@ -10,14 +10,15 @@ import Shapes from '@cardstack/boxel-icons/shapes';
 import { dropTask } from 'ember-concurrency';
 import { modifier } from 'ember-modifier';
 
-import { BoxelSelect } from '@cardstack/boxel-ui/components';
+import { BoxelSelect, LoadingIndicator } from '@cardstack/boxel-ui/components';
 import { add, eq } from '@cardstack/boxel-ui/helpers';
 import {
+  FailureBordered as FailureIcon,
   IconGlobe,
   Lock,
   StarFilled,
   TriangleRight,
-  Warning as WarningIcon,
+  WarningTriangleFilled as WarningIcon,
 } from '@cardstack/boxel-ui/icons';
 import type { Icon } from '@cardstack/boxel-ui/icons';
 
@@ -62,7 +63,8 @@ export default class WorkspaceChooser extends Component<Signature> {
 
   // Trusted realm servers that couldn't be reached during boot. When present,
   // an unobtrusive notice names them so the user understands some workspaces
-  // may be missing; the notice clears once the background retry recovers them.
+  // may be missing; the notice clears if the background retry recovers them,
+  // and changes its wording if that retry gives up first.
   private get unreachableRealmServers() {
     return this.realmServer.unreachableRealmServers;
   }
@@ -78,7 +80,18 @@ export default class WorkspaceChooser extends Component<Signature> {
     // Name every unreachable server, per the notice's contract. Trusted
     // servers are few in practice, so a comma-joined list stays readable.
     let servers = hosts.join(', ');
-    return `Couldn’t reach ${servers}. Some workspaces may be missing — retrying…`;
+    let reason = `Couldn’t reach ${servers}. Some workspaces may be missing`;
+    return this.isRetryingUnreachableRealmServers
+      ? `${reason} — retrying…`
+      : `${reason} — reload to try again.`;
+  }
+
+  private get isRetryingUnreachableRealmServers() {
+    return this.matrixService.isRetryingUnreachableRealmServers;
+  }
+
+  private get unreachableNoticeIcon(): Icon {
+    return this.isRetryingUnreachableRealmServers ? WarningIcon : FailureIcon;
   }
 
   // Show the archived count once we've loaded the list (or already have entries
@@ -580,12 +593,21 @@ export default class WorkspaceChooser extends Component<Signature> {
             role='status'
             data-test-unreachable-realm-servers-notice
           >
-            <WarningIcon
-              width='16'
-              height='16'
+            <this.unreachableNoticeIcon
+              width='20'
+              height='20'
               class='unreachable-notice-icon'
+              aria-hidden='true'
             />
             <span>{{this.unreachableRealmServersMessage}}</span>
+            {{#if this.isRetryingUnreachableRealmServers}}
+              <LoadingIndicator
+                class='unreachable-notice-spinner'
+                @color='currentColor'
+                @size='1.125rem'
+                aria-hidden='true'
+              />
+            {{/if}}
           </div>
         {{/if}}
         <div class='sections-wrapper'>
@@ -849,7 +871,7 @@ export default class WorkspaceChooser extends Component<Signature> {
       .unreachable-notice {
         display: flex;
         align-items: center;
-        gap: var(--boxel-sp-xs);
+        gap: var(--boxel-sp-2xs);
         max-width: 40rem;
         padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
         border-radius: var(--boxel-border-radius);
@@ -859,7 +881,9 @@ export default class WorkspaceChooser extends Component<Signature> {
         letter-spacing: var(--boxel-lsp-xs);
       }
       .unreachable-notice-icon {
-        --icon-color: var(--boxel-warning-100);
+        flex-shrink: 0;
+      }
+      .unreachable-notice-spinner {
         flex-shrink: 0;
       }
     </style>
diff --git a/packages/host/app/services/matrix-service.ts b/packages/host/app/services/matrix-service.ts
index 25482f8a9af..18351fd687e 100644
--- a/packages/host/app/services/matrix-service.ts
+++ b/packages/host/app/services/matrix-service.ts
@@ -1520,6 +1520,14 @@ export default class MatrixService extends Service {
     }
   });
 
+  // Whether the background loop above is still working through its attempts.
+  // It is bounded, so a server can remain unreachable after the loop has given
+  // up and nothing will try again this session. Surfaces that name the failure
+  // read this so they don't keep promising a retry that has stopped.
+  get isRetryingUnreachableRealmServers(): boolean {
+    return this.retryUnreachableRealmServersTask.isRunning;
+  }
+
   async createRealmSession(realmURL: URL) {
     await this.#clientReadyDeferred.promise;
     return this.client.createRealmSession(realmURL);