diff --git a/.github/workflows/ci-lint.yaml b/.github/workflows/ci-lint.yaml
index e5790f8554f..ee92927258b 100644
--- a/.github/workflows/ci-lint.yaml
+++ b/.github/workflows/ci-lint.yaml
@@ -52,6 +52,17 @@ jobs:
         if: ${{ !cancelled() }}
         run: pnpm run lint
         working-directory: packages/boxel-ui/addon
+      - name: Lint Host
+        # Runs BEFORE Build Boxel UI so host type-checks against the Boxel UI
+        # source, exactly as local development does (declarations/ is never
+        # built locally). This also guards against declaration-emit
+        # regressions: an unresolvable import inside a .d.ts is silently
+        # suppressed under skipLibCheck and degrades every Boxel UI symbol to
+        # `any`, turning the host type check into a no-op (see boxel-ui's
+        # bin/fix-declaration-extensions.mjs).
+        if: ${{ !cancelled() }}
+        run: pnpm run lint
+        working-directory: packages/host
       - name: Build Boxel UI
         # To faciliate linting of projects that depend on Boxel UI
         if: ${{ !cancelled() }}
@@ -61,10 +72,6 @@ jobs:
         if: ${{ !cancelled() }}
         run: pnpm run lint
         working-directory: packages/boxel-ui/test-app
-      - name: Lint Host
-        if: ${{ !cancelled() }}
-        run: pnpm run lint
-        working-directory: packages/host
       - name: Lint Matrix
         if: ${{ !cancelled() }}
         run: pnpm run lint
diff --git a/packages/base/amount-with-currency.gts b/packages/base/amount-with-currency.gts
index c6b4506560a..14a643377a5 100644
--- a/packages/base/amount-with-currency.gts
+++ b/packages/base/amount-with-currency.gts
@@ -1,5 +1,7 @@
-import NumberField from './number';
+import NumberField, { deserializeForUI, serializeForUI } from './number';
 import { FieldDef, field, contains, Component } from './card-api';
+import { NumberSerializer } from '@cardstack/runtime-common';
+import { TextInputValidator } from './text-input-validator';
 import CurrencyField from './currency';
 import { action } from '@ember/object';
 import { BoxelInputGroup } from '@cardstack/boxel-ui/components';
@@ -28,13 +30,23 @@ class Edit extends Component<typeof AmountWithCurrency> {
   }
 
   @action
-  setAmount(val: number) {
+  setAmount(val: number | null | undefined) {
     let newModel = new AmountWithCurrency();
-    newModel.amount = val;
+    if (val != null) {
+      newModel.amount = val;
+    }
     newModel.currency.code = newModel.currency.code || 'USD';
     this.args.set(newModel);
   }
 
+  textInputValidator: TextInputValidator<number> = new TextInputValidator(
+    () => this.args.model.amount ?? null,
+    (val) => this.setAmount(val),
+    deserializeForUI,
+    serializeForUI,
+    NumberSerializer.validate,
+  );
+
   @action
   setCurrency(val: CurrencyField) {
     let newModel = new AmountWithCurrency();
@@ -47,9 +59,10 @@ class Edit extends Component<typeof AmountWithCurrency> {
     <BoxelInputGroup
       @id={{this.id}}
       @placeholder='0.00'
-      @value={{@model.amount}}
-      @invalid={{false}}
-      @onInput={{this.setAmount}}
+      @value={{this.textInputValidator.asString}}
+      @state={{if this.textInputValidator.isInvalid 'invalid' 'none'}}
+      @errorMessage={{this.textInputValidator.errorMessage}}
+      @onInput={{this.textInputValidator.onInput}}
       @autocomplete='off'
       @inputmode='decimal'
       class='input-selectable-currency-amount'
diff --git a/packages/base/color-field/components/swatches-picker.gts b/packages/base/color-field/components/swatches-picker.gts
index ddd1ad1a655..7f1e5a22705 100644
--- a/packages/base/color-field/components/swatches-picker.gts
+++ b/packages/base/color-field/components/swatches-picker.gts
@@ -5,6 +5,10 @@ import { ColorPalette } from '@cardstack/boxel-ui/components';
 import type { ColorFieldSignature } from '../util/color-field-signature';
 
 export default class SwatchesPicker extends Component<ColorFieldSignature> {
+  private handleChange = (value: string | null) => {
+    this.args.set?.(value);
+  };
+
   get paletteColors() {
     const options = (
       this.args.configuration as ColorFieldConfiguration & {
@@ -17,7 +21,7 @@ export default class SwatchesPicker extends Component<ColorFieldSignature> {
   <template>
     <ColorPalette
       @color={{@model}}
-      @onChange={{@set}}
+      @onChange={{this.handleChange}}
       @disabled={{not @canEdit}}
       @paletteColors={{this.paletteColors}}
     />
diff --git a/packages/base/contains-many-component.gts b/packages/base/contains-many-component.gts
index d0a886d87fe..3e045e9ef1e 100644
--- a/packages/base/contains-many-component.gts
+++ b/packages/base/contains-many-component.gts
@@ -144,7 +144,7 @@ class ContainsManyEditor extends GlimmerComponent<ContainsManyEditorSignature> {
             {{on 'click' this.add}}
             data-test-add-new
           >
-            <IconPlus class='icon' width='12px' height='12px' alt='plus' />
+            <IconPlus class='icon' width='12px' height='12px' role='presentation' />
             Add
             {{getPlural @field.card.displayName}}
           </Button>
diff --git a/packages/base/email.gts b/packages/base/email.gts
index 728dbc1dd94..02ee7132584 100644
--- a/packages/base/email.gts
+++ b/packages/base/email.gts
@@ -15,10 +15,10 @@ import MailIcon from '@cardstack/boxel-icons/mail';
 
 class Edit extends Component<typeof EmailField> {
   @action private handleChange(
-    value: string,
-    validation: EmailFormatValidationError,
+    value: string | null,
+    validation: EmailFormatValidationError | null,
   ) {
-    if (validation === null && this.args.model !== value) {
+    if (validation === null && value !== null && this.args.model !== value) {
       this.args.set(value);
     }
   }
diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
index 50708b8a69a..c558492cc66 100644
--- a/packages/base/field-component.gts
+++ b/packages/base/field-component.gts
@@ -284,13 +284,13 @@ export function getBoxComponent(
     return isThemeCard(cardDef) ? cardDef.id : cardDef?.cardTheme?.id;
   }
 
-  function getCssImports(card?: CardDef) {
+  function getCssImports(card?: CardDef): string[] | undefined {
     // for cards like Theme card and its descendants, directly use the `cssImports` field;
     // for all other cards, get imports via the Theme card linked from cardInfo
     if (card && 'cssImports' in card) {
       let field = getField(card, 'cssImports');
       if (field?.card?.name === 'CssImportField') {
-        return card.cssImports;
+        return card.cssImports as string[] | undefined;
       }
     }
     return card?.cardTheme?.cssImports;
diff --git a/packages/base/links-to-many-component.gts b/packages/base/links-to-many-component.gts
index f14b770ee77..d742d03eabd 100644
--- a/packages/base/links-to-many-component.gts
+++ b/packages/base/links-to-many-component.gts
@@ -337,7 +337,7 @@ class LinksToManyStandardEditor extends GlimmerComponent<LinksToManyStandardEdit
           {{on 'click' @add}}
           data-test-add-new={{@field.name}}
         >
-          <IconPlus class='icon' width='12px' height='12px' alt='plus' />
+          <IconPlus class='icon' width='12px' height='12px' role='presentation' />
           Add
           {{getPlural @field.card.displayName}}
         </Button>
@@ -513,7 +513,7 @@ class LinksToManyCompactEditor extends GlimmerComponent<LinksToManyCompactEditor
         {{on 'click' @add}}
         data-test-add-new={{@field.name}}
       >
-        <IconPlus class='icon' width='12px' height='12px' alt='plus' />
+        <IconPlus class='icon' width='12px' height='12px' role='presentation' />
         Add
         {{@field.card.displayName}}
       </Button>
diff --git a/packages/base/process-card.gts b/packages/base/process-card.gts
index 5f12de7ecce..d385ab0ae83 100644
--- a/packages/base/process-card.gts
+++ b/packages/base/process-card.gts
@@ -27,7 +27,10 @@ class ProcessTemplate extends Component<typeof ProcessCard> {
         </span>
         <h3 class='process-card__name'><@fields.cardTitle /></h3>
       </header>
-      <ProgressBar @value={{@model.percentComplete}} @max={{100}} />
+      <ProgressBar
+        @value={{if @model.percentComplete @model.percentComplete 0}}
+        @max={{100}}
+      />
       <footer class='process-card__footer'>
         <span class='process-card__count'>{{@model.progressLabel}}</span>
         <span
diff --git a/packages/base/realm.gts b/packages/base/realm.gts
index 24c8e1ccf86..cfc35f5c117 100644
--- a/packages/base/realm.gts
+++ b/packages/base/realm.gts
@@ -20,8 +20,8 @@ type RealmMeta = {
   realmIdentifier: string;
   canWrite: boolean;
   info: {
-    name?: string;
-    iconURL?: string;
+    name: string;
+    iconURL: string | null;
   };
 };
 
diff --git a/packages/base/skill-reference.gts b/packages/base/skill-reference.gts
index 3d249b8b95a..bb5eb9e8175 100644
--- a/packages/base/skill-reference.gts
+++ b/packages/base/skill-reference.gts
@@ -3,7 +3,7 @@ import { on } from '@ember/modifier';
 import ExternalLink from '@cardstack/boxel-icons/external-link';
 
 import { Button, Pill } from '@cardstack/boxel-ui/components';
-import { cn, eq } from '@cardstack/boxel-ui/helpers';
+import { eq } from '@cardstack/boxel-ui/helpers';
 
 import { FieldDef, field, contains, linksTo, Component } from './card-api';
 import enumField from './enum';
@@ -86,10 +86,10 @@ export class SkillReference extends FieldDef {
             </h4>
             <Pill
               class='skill-ref-mode boxel-ellipsize'
-              @variant={{cn
-                primary=(eq @model.inclusionMode 'full')
-                accent=(eq @model.inclusionMode 'essential')
-                muted=(eq @model.inclusionMode 'link-only')
+              @variant={{if
+                (eq @model.inclusionMode 'full')
+                'primary'
+                (if (eq @model.inclusionMode 'essential') 'accent' 'muted')
               }}
             >
               {{if
diff --git a/packages/base/spec.gts b/packages/base/spec.gts
index 214e6ad62ae..a4786191263 100644
--- a/packages/base/spec.gts
+++ b/packages/base/spec.gts
@@ -564,7 +564,9 @@ export class SpecModuleSection extends GlimmerComponent<SpecModuleSectionSignatu
       <div class='code-ref-container'>
         <FieldContainer @label='URL' @vertical={{true}} @labelFontSize='small'>
           <div class='code-ref-row'>
-            <RealmIcon class='realm-icon' @realmInfo={{this.realmInfo}} />
+            {{#if this.realmInfo}}
+              <RealmIcon class='realm-icon' @realmInfo={{this.realmInfo}} />
+            {{/if}}
             <span class='code-ref-value' data-test-module-href>
               {{this.moduleHref}}
             </span>
diff --git a/packages/boxel-ui/addon/bin/fix-declaration-extensions.mjs b/packages/boxel-ui/addon/bin/fix-declaration-extensions.mjs
new file mode 100644
index 00000000000..37ed7b9de5b
--- /dev/null
+++ b/packages/boxel-ui/addon/bin/fix-declaration-extensions.mjs
@@ -0,0 +1,47 @@
+// Rewrites relative `.gts` import specifiers in the emitted declaration
+// files to `.js`, which consumers' module resolution maps to the sibling
+// `.d.ts` files. ember-tsc emits declaration imports with their authored
+// `.gts` extensions, which don't resolve from within declarations/ — and an
+// unresolvable import inside a `.d.ts` is silently suppressed under
+// skipLibCheck, degrading every symbol imported from this package to `any`.
+import { readdir, readFile, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const declarationsDir = fileURLToPath(
+  new URL('../declarations', import.meta.url),
+);
+
+async function* dtsFiles(dir) {
+  for (const entry of await readdir(dir, { withFileTypes: true })) {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      yield* dtsFiles(path);
+    } else if (entry.name.endsWith('.d.ts')) {
+      yield path;
+    }
+  }
+}
+
+const relativeGtsSpecifier = /(['"])(\.\.?\/[^'"]+)\.gts(\1)/g;
+const anyGtsSpecifier = /['"][^'"]+\.gts['"]/;
+
+let rewrittenFileCount = 0;
+for await (const path of dtsFiles(declarationsDir)) {
+  const source = await readFile(path, 'utf8');
+  const updated = source.replace(relativeGtsSpecifier, '$1$2.js$3');
+  if (updated !== source) {
+    await writeFile(path, updated);
+    rewrittenFileCount++;
+  }
+  const leftover = updated.match(anyGtsSpecifier);
+  if (leftover) {
+    throw new Error(
+      `fix-declaration-extensions: unrewritable .gts specifier ${leftover[0]} remains in ${path}`,
+    );
+  }
+}
+
+console.log(
+  `fix-declaration-extensions: rewrote .gts specifiers in ${rewrittenFileCount} declaration files`,
+);
diff --git a/packages/boxel-ui/addon/package.json b/packages/boxel-ui/addon/package.json
index 9e71ec09718..2654ef9b0ed 100644
--- a/packages/boxel-ui/addon/package.json
+++ b/packages/boxel-ui/addon/package.json
@@ -14,7 +14,7 @@
   },
   "scripts": {
     "build": "concurrently \"pnpm:build:*\" --names \"build:\"",
-    "build:types": "ember-tsc --declaration --emitDeclarationOnly --noEmit false",
+    "build:types": "ember-tsc --declaration --emitDeclarationOnly --noEmit false && node bin/fix-declaration-extensions.mjs",
     "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\"",
     "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\"",
     "lint:hbs": "ember-template-lint .",
diff --git a/packages/boxel-ui/addon/src/components/alert/index.gts b/packages/boxel-ui/addon/src/components/alert/index.gts
index 76c902c1812..e68a72eaefe 100644
--- a/packages/boxel-ui/addon/src/components/alert/index.gts
+++ b/packages/boxel-ui/addon/src/components/alert/index.gts
@@ -9,7 +9,7 @@ import Button, { type BoxelButtonKind } from '../button/index.gts';
 
 interface MessagesSignature {
   Args: {
-    messages: string[];
+    messages: (string | undefined)[];
     type?: 'error' | 'warning';
   };
   Element: HTMLDivElement;
diff --git a/packages/boxel-ui/addon/src/components/basic-fitted/index.gts b/packages/boxel-ui/addon/src/components/basic-fitted/index.gts
index 6fd71b149c5..17cc875fb98 100644
--- a/packages/boxel-ui/addon/src/components/basic-fitted/index.gts
+++ b/packages/boxel-ui/addon/src/components/basic-fitted/index.gts
@@ -8,7 +8,7 @@ interface Signature {
     description?: string;
     iconComponent?: Icon;
     isEmpty?: boolean;
-    primary: string;
+    primary?: string;
     secondary?: string;
     thumbnailURL?: string;
   };
diff --git a/packages/boxel-ui/addon/src/components/button/index.gts b/packages/boxel-ui/addon/src/components/button/index.gts
index d71449f8dde..38a811e8ec7 100644
--- a/packages/boxel-ui/addon/src/components/button/index.gts
+++ b/packages/boxel-ui/addon/src/components/button/index.gts
@@ -55,7 +55,7 @@ interface Signature {
     as?: string;
     class?: string;
     disabled?: boolean;
-    href?: string;
+    href?: string | null;
     kind?: BoxelButtonKind;
     loading?: boolean;
     models?: any;
diff --git a/packages/boxel-ui/addon/src/components/circle-spinner/index.gts b/packages/boxel-ui/addon/src/components/circle-spinner/index.gts
index bd271e71bea..6b143d81a6f 100644
--- a/packages/boxel-ui/addon/src/components/circle-spinner/index.gts
+++ b/packages/boxel-ui/addon/src/components/circle-spinner/index.gts
@@ -3,7 +3,7 @@ import Component from '@glimmer/component';
 import IconCircle from '../../icons/icon-circle.gts';
 
 interface Signature {
-  Element: SVGElement;
+  Element: SVGSVGElement;
 }
 
 // eslint-disable-next-line ember/no-empty-glimmer-component-classes
diff --git a/packages/boxel-ui/addon/src/components/copy-button/index.gts b/packages/boxel-ui/addon/src/components/copy-button/index.gts
index 6bb3c2d5995..6a7fe6c9c7f 100644
--- a/packages/boxel-ui/addon/src/components/copy-button/index.gts
+++ b/packages/boxel-ui/addon/src/components/copy-button/index.gts
@@ -19,7 +19,7 @@ interface Signature {
     offset?: number;
     placement?: MiddlewareState['placement'];
     size?: BoxelButtonSize;
-    textToCopy: string;
+    textToCopy: string | null | undefined;
     tooltipText?: string;
     variant?: BoxelButtonKind;
     width?: string;
@@ -31,6 +31,9 @@ export default class CopyButton extends Component<Signature> {
   @tracked private recentlyCopied = false;
 
   @action private async copyToClipboard() {
+    if (this.args.textToCopy == null) {
+      return;
+    }
     try {
       await navigator.clipboard.writeText(this.args.textToCopy);
       this.recentlyCopied = true;
diff --git a/packages/boxel-ui/addon/src/components/drag-and-drop/index.gts b/packages/boxel-ui/addon/src/components/drag-and-drop/index.gts
index 38999e28438..0fb3fcd4a08 100644
--- a/packages/boxel-ui/addon/src/components/drag-and-drop/index.gts
+++ b/packages/boxel-ui/addon/src/components/drag-and-drop/index.gts
@@ -41,11 +41,11 @@ export class DndColumn {
 export interface DndKanbanBoardSignature<DndColumn> {
   Args: DndKanbanBoardArgs<DndColumn>;
   Blocks: {
-    card: [card?: DndItem, column?: DndColumn];
+    card: [card: DndItem, column: DndColumn];
     // We yield the card and column back to the consumer so they can decide how to render it or use additional information
     // This rendering by the block will typically occur at the card of the kanaban
     // but with more sophistication you can use it somewhere else
-    header: [column?: DndColumn];
+    header: [column: DndColumn];
   };
 }
 
diff --git a/packages/boxel-ui/addon/src/components/dropdown/index.gts b/packages/boxel-ui/addon/src/components/dropdown/index.gts
index 063ddfa90d6..4b7d98e2149 100644
--- a/packages/boxel-ui/addon/src/components/dropdown/index.gts
+++ b/packages/boxel-ui/addon/src/components/dropdown/index.gts
@@ -51,9 +51,10 @@ interface Signature {
         Args: {
           Positional: unknown[];
         };
-        // note: should only be used with Button, but HTMLAnchorElement is included so that the
-        // trigger bindings can be applied to BoxelButton without glint error
-        Element: HTMLButtonElement | HTMLAnchorElement;
+        // note: the trigger should be an interactive element (Button or a
+        // component like Pill that renders one), but that isn't expressible
+        // here, so any element is accepted
+        Element: HTMLElement;
       }>,
     ];
   };
diff --git a/packages/boxel-ui/addon/src/components/email-input/index.gts b/packages/boxel-ui/addon/src/components/email-input/index.gts
index fdf17b47ef4..7db25684f63 100644
--- a/packages/boxel-ui/addon/src/components/email-input/index.gts
+++ b/packages/boxel-ui/addon/src/components/email-input/index.gts
@@ -22,7 +22,7 @@ interface Signature {
     required?: boolean;
     value: string | null;
   };
-  Element: HTMLElement;
+  Element: HTMLInputElement;
 }
 
 const DEFAULT_FALLBACK_MESSAGE = 'Enter a valid email address';
diff --git a/packages/boxel-ui/addon/src/components/field-container/index.gts b/packages/boxel-ui/addon/src/components/field-container/index.gts
index 3e3258431fd..d651d82b611 100644
--- a/packages/boxel-ui/addon/src/components/field-container/index.gts
+++ b/packages/boxel-ui/addon/src/components/field-container/index.gts
@@ -15,7 +15,7 @@ export interface Signature {
     iconHeight?: string;
     iconWidth?: string;
     inline?: boolean;
-    label: string;
+    label?: string;
     labelFontSize?: BoxelLabelFontSize;
     tag?: keyof HTMLElementTagNameMap;
     vertical?: boolean;
@@ -52,13 +52,15 @@ const FieldContainer: TemplateOnlyComponent<Signature> = <template>
             role='presentation'
           />
         {{/if}}
-        <Label
-          class='label'
-          @size={{@labelFontSize}}
-          data-test-boxel-field-label
-        >
-          {{@label}}
-        </Label>
+        {{#if @label}}
+          <Label
+            class='label'
+            @size={{@labelFontSize}}
+            data-test-boxel-field-label
+          >
+            {{@label}}
+          </Label>
+        {{/if}}
         {{yield to='label'}}
       </div>
       <div class='content'>
diff --git a/packages/boxel-ui/addon/src/components/input-group/controls/index.gts b/packages/boxel-ui/addon/src/components/input-group/controls/index.gts
index 5f4916d295b..f777f566aa0 100644
--- a/packages/boxel-ui/addon/src/components/input-group/controls/index.gts
+++ b/packages/boxel-ui/addon/src/components/input-group/controls/index.gts
@@ -14,7 +14,7 @@ interface InputSignature {
     placeholder?: string;
     readonly?: boolean;
     required?: boolean;
-    value?: string;
+    value?: string | null;
   };
   Blocks: Record<string, never>;
   Element: HTMLInputElement;
@@ -38,7 +38,7 @@ export const Input: TemplateOnlyComponent<InputSignature> = <template>
 interface TextareaSignature {
   Args: {
     placeholder?: string;
-    value?: string;
+    value?: string | null;
   };
   Blocks: Record<string, never>;
   Element: HTMLTextAreaElement;
diff --git a/packages/boxel-ui/addon/src/components/input-group/index.gts b/packages/boxel-ui/addon/src/components/input-group/index.gts
index f22b9894424..4a6cc026a36 100644
--- a/packages/boxel-ui/addon/src/components/input-group/index.gts
+++ b/packages/boxel-ui/addon/src/components/input-group/index.gts
@@ -30,7 +30,7 @@ export interface Signature {
   Args: {
     autocomplete?: string;
     disabled?: boolean;
-    errorMessage?: string;
+    errorMessage?: string | null;
     helperText?: string;
     id?: string;
     inputmode?: string;
@@ -45,7 +45,7 @@ export interface Signature {
     state?: InputValidationState;
     type?: InputType;
     validIcon?: Icon;
-    value?: string;
+    value?: string | null;
   };
   Blocks: {
     after: [AccessoriesBlockArg, InputGroupBlockArg];
diff --git a/packages/boxel-ui/addon/src/components/input/index.gts b/packages/boxel-ui/addon/src/components/input/index.gts
index 98b216ad616..77c93ff6229 100644
--- a/packages/boxel-ui/addon/src/components/input/index.gts
+++ b/packages/boxel-ui/addon/src/components/input/index.gts
@@ -81,8 +81,9 @@ export interface Signature {
     required?: boolean;
     size?: Values<typeof InputSizes>;
     state?: InputValidationState;
+    step?: string | number;
     type?: InputType;
-    value: string | number | boolean | null | undefined;
+    value?: string | number | boolean | null;
   };
   Element: HTMLInputElement | HTMLTextAreaElement | HTMLDivElement;
 }
@@ -185,6 +186,7 @@ export default class BoxelInput extends Component<Signature> {
           placeholder={{@placeholder}}
           min={{@min}}
           max={{@max}}
+          step={{@step}}
           required={{@required}}
           disabled={{@disabled}}
           readonly={{@readonly}}
diff --git a/packages/boxel-ui/addon/src/components/pill/index.gts b/packages/boxel-ui/addon/src/components/pill/index.gts
index b6a855338a7..ddcfde7f9cf 100644
--- a/packages/boxel-ui/addon/src/components/pill/index.gts
+++ b/packages/boxel-ui/addon/src/components/pill/index.gts
@@ -41,7 +41,7 @@ export interface PillSignature {
     iconLeft?: [];
     iconRight?: [];
   };
-  Element: HTMLElement;
+  Element: HTMLElement | HTMLAnchorElement;
 }
 
 const Pill: TemplateOnlyComponent<PillSignature> = <template>
diff --git a/packages/boxel-ui/addon/src/components/radio-input/index.gts b/packages/boxel-ui/addon/src/components/radio-input/index.gts
index 0a1b871a99b..fd106fb0cb0 100644
--- a/packages/boxel-ui/addon/src/components/radio-input/index.gts
+++ b/packages/boxel-ui/addon/src/components/radio-input/index.gts
@@ -1,5 +1,6 @@
 import { hash } from '@ember/helper';
 import { get } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
 import type Owner from '@ember/owner';
 import Component from '@glimmer/component';
 
@@ -9,7 +10,7 @@ import Item from './item.gts';
 
 export interface Signature {
   Args: {
-    checkedId?: string;
+    checkedId?: string | null;
     disabled?: boolean;
     errorMessage?: string;
     groupDescription: string;
@@ -18,7 +19,7 @@ export interface Signature {
     invalid?: boolean;
     items: any[];
     keyName?: string;
-    name: string;
+    name?: string;
     orientation?: string;
     radioBackgroundColor?: string;
     radioBorderColor?: string;
@@ -47,6 +48,10 @@ export default class RadioInput extends Component<Signature> {
     return this.args.keyName || 'id';
   }
 
+  get name() {
+    return this.args.name ?? guidFor(this);
+  }
+
   <template>
     <style scoped>
       @layer {
@@ -120,7 +125,7 @@ export default class RadioInput extends Component<Signature> {
               component=(component
                 Item
                 id=item.id
-                name=@name
+                name=this.name
                 disabled=@disabled
                 checked=(if
                   @checkedId (eq @checkedId (get item this.checkedKey))
diff --git a/packages/boxel-ui/addon/src/components/realm-icon/index.gts b/packages/boxel-ui/addon/src/components/realm-icon/index.gts
index 5c6c7e710bf..2b91cf1a9b2 100644
--- a/packages/boxel-ui/addon/src/components/realm-icon/index.gts
+++ b/packages/boxel-ui/addon/src/components/realm-icon/index.gts
@@ -8,7 +8,7 @@ export type RealmDisplayInfo = {
   iconURL: string | null;
   isIndexing?: boolean;
   name: string;
-  publishable: boolean | null;
+  publishable?: boolean | null;
 };
 interface Signature {
   Args: {
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/panel.gts b/packages/boxel-ui/addon/src/components/resizable-panel-group/panel.gts
index 9f299a0e4ec..7a5798628e9 100644
--- a/packages/boxel-ui/addon/src/components/resizable-panel-group/panel.gts
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/panel.gts
@@ -14,11 +14,11 @@ import {
 interface Signature {
   Args: {
     collapsible?: boolean | undefined;
-    defaultSize?: number | undefined;
+    defaultSize?: number | null;
     groupId: string;
     maxSize?: number | undefined;
     //In percentage
-    minSize?: number | undefined;
+    minSize?: number | null;
     orientation: Orientation;
     registerPanel: (panel: Panel) => GetPanelStyle;
     unregisterPanel: (panel: Panel) => void;
@@ -74,8 +74,8 @@ export default class Panel extends Component<Signature> {
     return {
       collapsible:
         this.args.collapsible == undefined ? true : this.args.collapsible,
-      defaultSize: this.args.defaultSize,
-      minSize: this.args.minSize,
+      defaultSize: this.args.defaultSize ?? undefined,
+      minSize: this.args.minSize ?? undefined,
       maxSize: this.args.maxSize,
     };
   }
diff --git a/packages/boxel-ui/addon/src/components/select/index.gts b/packages/boxel-ui/addon/src/components/select/index.gts
index 904f430efd9..c5c636102b0 100644
--- a/packages/boxel-ui/addon/src/components/select/index.gts
+++ b/packages/boxel-ui/addon/src/components/select/index.gts
@@ -33,7 +33,9 @@ interface Signature<ItemT = any> {
   Element: HTMLElement;
 }
 
-export default class BoxelSelect<ItemT> extends Component<Signature<ItemT>> {
+export default class BoxelSelect<ItemT = any> extends Component<
+  Signature<ItemT>
+> {
   private themeObserver?: MutationObserver | null = null;
   private selectId = `boxel-select-${guidFor(this)}`;
 
diff --git a/packages/boxel-ui/addon/src/components/tabbed-header/index.gts b/packages/boxel-ui/addon/src/components/tabbed-header/index.gts
index 92055f62966..aa498117a07 100644
--- a/packages/boxel-ui/addon/src/components/tabbed-header/index.gts
+++ b/packages/boxel-ui/addon/src/components/tabbed-header/index.gts
@@ -12,7 +12,7 @@ interface Signature {
     headerBackgroundColor?: string;
     headerTitle?: string;
     setActiveTab: (tabId: string) => void;
-    tabs: Array<{
+    tabs?: Array<{
       displayName: string;
       tabId: string;
     }>;
diff --git a/packages/experiments-realm/blog-app.gts b/packages/experiments-realm/blog-app.gts
index b213325bfd4..9230d7f129d 100644
--- a/packages/experiments-realm/blog-app.gts
+++ b/packages/experiments-realm/blog-app.gts
@@ -368,8 +368,8 @@ class BlogAppTemplate extends Component<typeof BlogApp> {
     };
   }
 
-  @action private onChangeView(id: ViewOption) {
-    this.selectedView = id;
+  @action private onChangeView(id: string) {
+    this.selectedView = id as ViewOption;
   }
 
   @action private onSort(option: SortOption) {
diff --git a/packages/experiments-realm/components/avatar-group.gts b/packages/experiments-realm/components/avatar-group.gts
index befa2f7f8b5..6c71764c104 100644
--- a/packages/experiments-realm/components/avatar-group.gts
+++ b/packages/experiments-realm/components/avatar-group.gts
@@ -23,7 +23,7 @@ export default class AvatarGroup extends GlimmerComponent<AvatarGroupSignature>
   <template>
     <div class='avatar-group' ...attributes>
       <Avatar
-        @userID={{@userId}}
+        @userId={{@userId}}
         @displayName={{@name}}
         @thumbnailURL={{@thumbnailURL}}
         @isReady={{true}}
diff --git a/packages/experiments-realm/components/base-task-planner.gts b/packages/experiments-realm/components/base-task-planner.gts
index e0b25348e9e..e80cb6dd162 100644
--- a/packages/experiments-realm/components/base-task-planner.gts
+++ b/packages/experiments-realm/components/base-task-planner.gts
@@ -354,7 +354,8 @@ export class TaskPlanner extends GlimmerComponent<TaskPlannerArgs> {
     );
   }
 
-  getComponent(cardOrField: BaseDef) {
+  getComponent(item: DndItem) {
+    let cardOrField = item as BaseDef;
     return cardOrField.constructor.getComponent(cardOrField);
   }
 
diff --git a/packages/experiments-realm/components/contact-row.gts b/packages/experiments-realm/components/contact-row.gts
index 00c44557f84..91927a359bb 100644
--- a/packages/experiments-realm/components/contact-row.gts
+++ b/packages/experiments-realm/components/contact-row.gts
@@ -21,7 +21,7 @@ export class ContactRow extends GlimmerComponent<ContactRowArgs> {
     <EntityDisplayWithThumbnail @title={{@name}}>
       <:thumbnail>
         <Avatar
-          @userID={{@userID}}
+          @userId={{@userID}}
           @displayName={{@name}}
           @thumbnailURL={{@thumbnailURL}}
           @isReady={{true}}
diff --git a/packages/experiments-realm/components/filter/filter-trigger.gts b/packages/experiments-realm/components/filter/filter-trigger.gts
index 4f921e1602f..b47b031c617 100644
--- a/packages/experiments-realm/components/filter/filter-trigger.gts
+++ b/packages/experiments-realm/components/filter/filter-trigger.gts
@@ -2,9 +2,18 @@ import GlimmerComponent from '@glimmer/component';
 import { IconButton } from '@cardstack/boxel-ui/components';
 import ListFilter from '@cardstack/boxel-icons/list-filter';
 
+// power-select invokes its trigger component with these extra named args and
+// a default block; they must be declared here (even though unused) for this
+// component to satisfy its @triggerComponent contract
 interface TriggerSignature {
   Args: {
     isLoading?: boolean;
+    placeholder?: string;
+    select?: unknown;
+    selectedItemComponent?: unknown;
+  };
+  Blocks: {
+    default: [unknown, any];
   };
   Element: HTMLDivElement;
 }
@@ -12,7 +21,7 @@ interface TriggerSignature {
 export class FilterTrigger extends GlimmerComponent<TriggerSignature> {
   <template>
     <div class='filter-trigger'>
-      <IconButton @icon={{ListFilter}} width='13px' height='13px' />
+      <IconButton @icon={{ListFilter}} @width='13px' @height='13px' />
       <span class='filter-trigger-text'>
         {{#if @isLoading}}
           Loading...
diff --git a/packages/experiments-realm/components/layout.gts b/packages/experiments-realm/components/layout.gts
index 29ed0b71300..f5a7e254409 100644
--- a/packages/experiments-realm/components/layout.gts
+++ b/packages/experiments-realm/components/layout.gts
@@ -4,6 +4,7 @@ import { htmlSafe } from '@ember/template';
 import { type CardOrFieldTypeIcon } from '@cardstack/base/card-api';
 import ImageIcon from '@cardstack/boxel-icons/image';
 import { FilterList } from '@cardstack/boxel-ui/components';
+import type { Filter } from '@cardstack/boxel-ui/components';
 import { element } from '@cardstack/boxel-ui/helpers';
 import type { Query, ResolvedCodeRef } from '@cardstack/runtime-common';
 import type { SortOption } from './sort';
@@ -120,6 +121,10 @@ export const TitleGroup: TemplateOnlyComponent<TitleGroupSignature> = <template>
 </template>;
 
 export class Layout extends GlimmerComponent<LayoutSignature> {
+  private onFilterChange = (filter: Filter) => {
+    this.args.onFilterChange(filter as LayoutFilter);
+  };
+
   <template>
     <section class='layout' ...attributes>
       <aside class='sidebar'>
@@ -128,7 +133,7 @@ export class Layout extends GlimmerComponent<LayoutSignature> {
           class='sidebar-filters'
           @filters={{@filters}}
           @activeFilter={{@activeFilter}}
-          @onChanged={{@onFilterChange}}
+          @onChanged={{this.onFilterChange}}
         />
       </aside>
       <section class='content'>
diff --git a/packages/experiments-realm/crm-app.gts b/packages/experiments-realm/crm-app.gts
index 582678ec6d8..b94daebaf47 100644
--- a/packages/experiments-realm/crm-app.gts
+++ b/packages/experiments-realm/crm-app.gts
@@ -535,8 +535,8 @@ class CrmAppTemplate extends Component<typeof CrmApp> {
     this.searchKey = searchKey;
   }
 
-  @action private onChangeView(id: ViewOption) {
-    this.selectedView = id;
+  @action private onChangeView(id: string) {
+    this.selectedView = id as ViewOption;
   }
   @action private onSort(option: SortOption) {
     this.activeFilter.selectedSort = option;
@@ -587,7 +587,7 @@ class CrmAppTemplate extends Component<typeof CrmApp> {
           <BoxelButton
             class='sidebar-create-button content-header-row-1'
             @kind='primary'
-            @size='large'
+            @size='tall'
             @disabled={{this.activeFilter.isCreateNewDisabled}}
             @loading={{this.createCard.isRunning}}
             {{on 'click' this.createNew}}
diff --git a/packages/experiments-realm/crm/contact.gts b/packages/experiments-realm/crm/contact.gts
index 093469a62a1..96de5b65b6d 100644
--- a/packages/experiments-realm/crm/contact.gts
+++ b/packages/experiments-realm/crm/contact.gts
@@ -463,7 +463,7 @@ class AtomTemplate extends Component<typeof Contact> {
       <EntityDisplayWithThumbnail @title={{this.label}} @underline={{true}}>
         <:thumbnail>
           <Avatar
-            @userID={{@model.id}}
+            @userId={{@model.id}}
             @displayName={{@model.name}}
             @thumbnailURL={{@model.cardThumbnailURL}}
             @isReady={{true}}
diff --git a/packages/experiments-realm/crm/task.gts b/packages/experiments-realm/crm/task.gts
index f041997f99e..3a2632d2983 100644
--- a/packages/experiments-realm/crm/task.gts
+++ b/packages/experiments-realm/crm/task.gts
@@ -131,7 +131,6 @@ class TaskIsolated extends Component<typeof CRMTask> {
           <ProgressRadial
             @value={{this.progress}}
             @max={{100}}
-            @variant='circular'
             class='task-progress-radial'
           />
           {{#if this.hasProgress}}
@@ -139,7 +138,6 @@ class TaskIsolated extends Component<typeof CRMTask> {
               @value={{this.progress}}
               @max={{100}}
               @label={{this.progressLabel}}
-              @variant='horizontal'
               class='task-progress-bar'
             />
           {{/if}}
diff --git a/packages/experiments-realm/fields/amount-with-currency.gts b/packages/experiments-realm/fields/amount-with-currency.gts
index 1c4a5166311..0419454a65c 100644
--- a/packages/experiments-realm/fields/amount-with-currency.gts
+++ b/packages/experiments-realm/fields/amount-with-currency.gts
@@ -1,4 +1,9 @@
-import NumberField from '@cardstack/base/number';
+import NumberField, {
+  deserializeForUI,
+  serializeForUI,
+} from '@cardstack/base/number';
+import { NumberSerializer } from '@cardstack/runtime-common';
+import { TextInputValidator } from '@cardstack/base/text-input-validator';
 import { FieldDef, field, contains } from '@cardstack/base/card-api';
 import { Component } from '@cardstack/base/card-api';
 import { CurrencyField } from './currency';
@@ -29,13 +34,23 @@ class Edit extends Component<typeof AmountWithCurrency> {
   }
 
   @action
-  setAmount(val: number) {
+  setAmount(val: number | null | undefined) {
     let newModel = new AmountWithCurrency();
-    newModel.amount = val;
+    if (val != null) {
+      newModel.amount = val;
+    }
     newModel.currency.code = newModel.currency.code || 'USD';
     this.args.set(newModel);
   }
 
+  textInputValidator: TextInputValidator<number> = new TextInputValidator(
+    () => this.args.model.amount ?? null,
+    (val) => this.setAmount(val),
+    deserializeForUI,
+    serializeForUI,
+    NumberSerializer.validate,
+  );
+
   @action
   setCurrency(val: CurrencyField) {
     let newModel = new AmountWithCurrency();
@@ -48,9 +63,10 @@ class Edit extends Component<typeof AmountWithCurrency> {
     <BoxelInputGroup
       @id={{this.id}}
       @placeholder='0.00'
-      @value={{@model.amount}}
-      @invalid={{false}}
-      @onInput={{this.setAmount}}
+      @value={{this.textInputValidator.asString}}
+      @state={{if this.textInputValidator.isInvalid 'invalid' 'none'}}
+      @errorMessage={{this.textInputValidator.errorMessage}}
+      @onInput={{this.textInputValidator.onInput}}
       @autocomplete='off'
       @inputmode='decimal'
       class='input-selectable-currency-amount'
diff --git a/packages/experiments-realm/fields/contact-link.gts b/packages/experiments-realm/fields/contact-link.gts
index d47c848f612..2198280c246 100644
--- a/packages/experiments-realm/fields/contact-link.gts
+++ b/packages/experiments-realm/fields/contact-link.gts
@@ -95,7 +95,9 @@ export class ContactLinkField extends FieldDef {
       </style>
     </template>
 
-    options = this.args.model.items;
+    get options() {
+      return this.args.model.items ?? [];
+    }
 
     onSelect = (option: ContactLink) => (this.args.model.label = option.label);
 
diff --git a/packages/experiments-realm/google-image-search.gts b/packages/experiments-realm/google-image-search.gts
index ffd45f791c8..72e39211aca 100644
--- a/packages/experiments-realm/google-image-search.gts
+++ b/packages/experiments-realm/google-image-search.gts
@@ -158,8 +158,8 @@ export class GoogleImageSearch extends CardDef {
           </FieldContainer>
 
           <Button
-            @variant='primary'
-            @size='medium'
+            @kind='primary'
+            @size='base'
             @disabled={{this.isLoading}}
             class='search-button'
             {{on 'click' this.performSearch}}
@@ -179,7 +179,7 @@ export class GoogleImageSearch extends CardDef {
         {{#if this.isError}}
           <div class='error-state'>
             <p class='error-message'>{{this.errorMessage}}</p>
-            <Button @variant='secondary' @onClick={{this.performSearch}}>
+            <Button @kind='secondary' {{on 'click' this.performSearch}}>
               Try Again
             </Button>
           </div>
@@ -227,7 +227,7 @@ export class GoogleImageSearch extends CardDef {
                       {{/if}}
                     </div>
                     <Button
-                      @variant='secondary'
+                      @kind='secondary'
                       @size='small'
                       class='open-image-button'
                       {{on 'click' (fn this.openImageInNewTab image.imageUrl)}}
@@ -242,8 +242,8 @@ export class GoogleImageSearch extends CardDef {
             {{#if (or this.canGoPrevious this.canGoNext)}}
               <div class='pagination'>
                 <Button
-                  @variant='secondary'
-                  @onClick={{this.previousPage}}
+                  @kind='secondary'
+                  {{on 'click' this.previousPage}}
                   @disabled={{not this.canGoPrevious}}
                   class='pagination-button'
                 >
@@ -261,8 +261,8 @@ export class GoogleImageSearch extends CardDef {
                 </span>
 
                 <Button
-                  @variant='secondary'
-                  @onClick={{this.nextPage}}
+                  @kind='secondary'
+                  {{on 'click' this.nextPage}}
                   @disabled={{not this.canGoNext}}
                   class='pagination-button'
                 >
diff --git a/packages/experiments-realm/kanban-resource.gts b/packages/experiments-realm/kanban-resource.gts
index da93d02c8e0..135ccbce993 100644
--- a/packages/experiments-realm/kanban-resource.gts
+++ b/packages/experiments-realm/kanban-resource.gts
@@ -1,6 +1,6 @@
 import { tracked } from '@glimmer/tracking';
 import { DndColumn } from '@cardstack/boxel-ui/components';
-import { CardDef } from '@cardstack/base/card-api';
+import type { CardDef } from '@cardstack/base/card-api';
 
 import { Resource } from 'ember-modify-based-class-resource';
 
@@ -34,10 +34,9 @@ class KanbanResource extends Resource<Args> {
 
       if (currentColumn) {
         // Maintain order of existing cards and append new ones
-        let existingCardIds = new Set(
-          currentColumn.cards.map((card: CardDef) => card.id),
-        );
-        let existingCards = currentColumn.cards.filter((card: CardDef) =>
+        let currentCards = currentColumn.cards as CardDef[];
+        let existingCardIds = new Set(currentCards.map((card) => card.id));
+        let existingCards = currentCards.filter((card) =>
           cardsForStatus.some((c) => c.id === card.id),
         );
         let newCards = cardsForStatus.filter(
diff --git a/packages/experiments-realm/monetary-amount.gts b/packages/experiments-realm/monetary-amount.gts
index 59eed158263..bb337f4b1af 100644
--- a/packages/experiments-realm/monetary-amount.gts
+++ b/packages/experiments-realm/monetary-amount.gts
@@ -1,4 +1,8 @@
-import NumberField from '@cardstack/base/number';
+import NumberField, {
+  deserializeForUI,
+  serializeForUI,
+} from '@cardstack/base/number';
+import { TextInputValidator } from '@cardstack/base/text-input-validator';
 import {
   FieldDef,
   field,
@@ -6,7 +10,7 @@ import {
   linksTo,
 } from '@cardstack/base/card-api';
 import { Component } from '@cardstack/base/card-api';
-import { codeRef } from '@cardstack/runtime-common';
+import { codeRef, NumberSerializer } from '@cardstack/runtime-common';
 import { Currency } from './asset';
 import { action } from '@ember/object';
 
@@ -52,14 +56,28 @@ class Edit extends Component<typeof MonetaryAmount> {
     () => [new URL('./', here).href],
   );
 
+  get currencyOptions() {
+    return this.liveCurrencyQuery?.instances ?? [];
+  }
+
   @action
-  setAmount(val: number) {
+  setAmount(val: number | null | undefined) {
     let newModel = new MonetaryAmount();
-    newModel.amount = val;
+    if (val != null) {
+      newModel.amount = val;
+    }
     newModel.currency = this.args.model.currency as Currency;
     this.args.set(newModel);
   }
 
+  textInputValidator: TextInputValidator<number> = new TextInputValidator(
+    () => this.args.model.amount ?? null,
+    (val) => this.setAmount(val),
+    deserializeForUI,
+    serializeForUI,
+    NumberSerializer.validate,
+  );
+
   @action
   setCurrency(val: Currency) {
     let newModel = new MonetaryAmount();
@@ -72,9 +90,10 @@ class Edit extends Component<typeof MonetaryAmount> {
     <BoxelInputGroup
       @id={{this.id}}
       @placeholder='0.00'
-      @value={{@model.amount}}
-      @invalid={{false}}
-      @onInput={{this.setAmount}}
+      @value={{this.textInputValidator.asString}}
+      @state={{if this.textInputValidator.isInvalid 'invalid' 'none'}}
+      @errorMessage={{this.textInputValidator.errorMessage}}
+      @onInput={{this.textInputValidator.onInput}}
       @autocomplete='off'
       @inputmode='decimal'
       class='input-selectable-currency-amount'
@@ -86,7 +105,7 @@ class Edit extends Component<typeof MonetaryAmount> {
         <Accessories.Select
           class='input-selectable-currency-amount__select'
           @placeholder='Choose...'
-          @options={{this.liveCurrencyQuery.instances}}
+          @options={{this.currencyOptions}}
           @selected={{@model.currency}}
           @onChange={{this.setCurrency}}
           @dropdownClass='input-selectable-currency-amount__dropdown'
diff --git a/packages/experiments-realm/plant-info.gts b/packages/experiments-realm/plant-info.gts
index eda681f97be..d128156da7d 100644
--- a/packages/experiments-realm/plant-info.gts
+++ b/packages/experiments-realm/plant-info.gts
@@ -39,10 +39,12 @@ class Edit extends Component<typeof DropdownField> {
   </template>
 
   get menuItems() {
-    return this.args.model.options?.map((v: string) =>
-      menuItemFunc([v, () => (this.args.model.selectedValue = v)], {
-        checked: this.args.model.selectedValue === v,
-      }),
+    return (
+      this.args.model.options?.map((v: string) =>
+        menuItemFunc([v, () => (this.args.model.selectedValue = v)], {
+          checked: this.args.model.selectedValue === v,
+        }),
+      ) ?? []
     );
   }
 }
diff --git a/packages/experiments-realm/sprint-task.gts b/packages/experiments-realm/sprint-task.gts
index a015758c914..9bdff80376d 100644
--- a/packages/experiments-realm/sprint-task.gts
+++ b/packages/experiments-realm/sprint-task.gts
@@ -172,7 +172,6 @@ class TaskIsolated extends Component<typeof SprintTask> {
           <ProgressRadial
             @value={{this.progress}}
             @max={{100}}
-            @variant='circular'
             class='task-progress-radial'
           />
           {{#if this.hasProgress}}
@@ -180,7 +179,6 @@ class TaskIsolated extends Component<typeof SprintTask> {
               @value={{this.progress}}
               @max={{100}}
               @label={{this.progressLabel}}
-              @variant='horizontal'
               class='task-progress-bar'
             />
           {{/if}}
diff --git a/packages/experiments-realm/update-room-skills-example.gts b/packages/experiments-realm/update-room-skills-example.gts
index c89b321c0ac..25dd05f647d 100644
--- a/packages/experiments-realm/update-room-skills-example.gts
+++ b/packages/experiments-realm/update-room-skills-example.gts
@@ -312,16 +312,15 @@ class Isolated extends Component<typeof UpdateRoomSkillsExample> {
       {{/unless}}
 
       <div class='form-grid'>
-        <FieldContainer
-          @label='Skills realm base URL (optional)'
-          @hint='Used to expand relative skill identifiers such as "boxel-environment".'
-        >
+        <FieldContainer @label='Skills realm base URL (optional)'>
           <input
             type='text'
             value={{this.skillsRealmURL}}
             placeholder='https://example.com/skills/'
             {{on 'input' this.updateSkillsRealmURL}}
           />
+          <p class='hint'>Used to expand relative skill identifiers such as
+            "boxel-environment".</p>
         </FieldContainer>
 
         <FieldContainer @label='Room ID'>
@@ -333,28 +332,24 @@ class Isolated extends Component<typeof UpdateRoomSkillsExample> {
           />
         </FieldContainer>
 
-        <FieldContainer
-          @label='Activate these skills'
-          @hint='Comma or newline separated list.'
-        >
+        <FieldContainer @label='Activate these skills'>
           <textarea
             rows='3'
             value={{@model.manualActivationTargets}}
             placeholder='boxel-environment, catalog-listing'
             {{on 'input' (fn this.updateManualList 'activate')}}
           ></textarea>
+          <p class='hint'>Comma or newline separated list.</p>
         </FieldContainer>
 
-        <FieldContainer
-          @label='Disable these skills'
-          @hint='Comma or newline separated list.'
-        >
+        <FieldContainer @label='Disable these skills'>
           <textarea
             rows='3'
             value={{@model.manualDeactivationTargets}}
             placeholder='source-code-editing'
             {{on 'input' (fn this.updateManualList 'deactivate')}}
           ></textarea>
+          <p class='hint'>Comma or newline separated list.</p>
         </FieldContainer>
       </div>
 
@@ -448,7 +443,7 @@ class Isolated extends Component<typeof UpdateRoomSkillsExample> {
 
       <Button
         class='apply-button'
-        @appearance='primary'
+        @kind='primary'
         disabled={{this.isApplyDisabled}}
         {{on 'click' this.applySkills}}
       >
@@ -482,6 +477,12 @@ class Isolated extends Component<typeof UpdateRoomSkillsExample> {
         gap: var(--boxel-sp-lg);
       }
 
+      .hint {
+        margin: var(--boxel-sp-xxs) 0 0;
+        color: var(--boxel-600);
+        font: var(--boxel-font-xs);
+      }
+
       input,
       textarea {
         width: 100%;
diff --git a/packages/host/app/components/ai-assistant/code-block/actions.gts b/packages/host/app/components/ai-assistant/code-block/actions.gts
index 395087af61f..2ee9490f653 100644
--- a/packages/host/app/components/ai-assistant/code-block/actions.gts
+++ b/packages/host/app/components/ai-assistant/code-block/actions.gts
@@ -1,6 +1,8 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { hash } from '@ember/helper';
 
+import type Component from '@glimmer/component';
+
 import { CopyButton } from '@cardstack/boxel-ui/components';
 
 import type { CodeData } from '@cardstack/host/lib/formatted-message/utils';
@@ -11,6 +13,9 @@ import ApplyCodePatchButton, {
 
 import type { ComponentLike } from '@glint/template';
 
+type AsComponentLike<C> =
+  C extends Component<infer Sig> ? ComponentLike<Sig> : never;
+
 export interface CodeBlockActionsSignature {
   Args: {
     codeData?: Partial<CodeData>;
@@ -18,7 +23,7 @@ export interface CodeBlockActionsSignature {
   Blocks: {
     default: [
       {
-        copyCode: CopyButton;
+        copyCode: AsComponentLike<CopyButton>;
         applyCodePatch: ComponentLike<ApplyCodePatchButtonSignature>;
       },
     ];
diff --git a/packages/host/app/components/ai-assistant/message/aibot-message.gts b/packages/host/app/components/ai-assistant/message/aibot-message.gts
index 0b3fb498237..a916b863085 100644
--- a/packages/host/app/components/ai-assistant/message/aibot-message.gts
+++ b/packages/host/app/components/ai-assistant/message/aibot-message.gts
@@ -287,7 +287,9 @@ class HtmlGroupCodeBlock extends Component<HtmlGroupCodeBlockSignature> {
 
             <codeBlock.actions as |actions|>
               <actions.copyCode
-                @code={{this.extractReplaceCode @codeData.searchReplaceBlock}}
+                @textToCopy={{this.extractReplaceCode
+                  @codeData.searchReplaceBlock
+                }}
               />
               {{! This is just to show the ✅ icon to signalize that the code patch has been applied }}
               <actions.applyCodePatch
@@ -325,7 +327,9 @@ class HtmlGroupCodeBlock extends Component<HtmlGroupCodeBlockSignature> {
             />
 
             <codeBlock.actions as |actions|>
-              <actions.copyCode @code={{this.codeDiffResource.modifiedCode}} />
+              <actions.copyCode
+                @textToCopy={{this.codeDiffResource.modifiedCode}}
+              />
 
               <actions.applyCodePatch
                 @codeData={{@codeData}}
@@ -366,7 +370,7 @@ class HtmlGroupCodeBlock extends Component<HtmlGroupCodeBlockSignature> {
         {{/if}}
         <codeBlock.editor @code={{this.codeForEditor}} />
         <codeBlock.actions as |actions|>
-          <actions.copyCode @code={{@codeData.code}} />
+          <actions.copyCode @textToCopy={{@codeData.code}} />
         </codeBlock.actions>
       {{/if}}
     </CodeBlock>
diff --git a/packages/host/app/components/ai-assistant/new-session-settings.gts b/packages/host/app/components/ai-assistant/new-session-settings.gts
index 65f27e9f60e..5db1b9d3e92 100644
--- a/packages/host/app/components/ai-assistant/new-session-settings.gts
+++ b/packages/host/app/components/ai-assistant/new-session-settings.gts
@@ -49,6 +49,7 @@ export default class NewSessionSettings extends Component<Signature> {
           @icon='close'
           @variant='ghost'
           @size='small'
+          @label='close new session options'
           class='new-session-settings-close-button'
           data-test-new-session-settings-close-button
           {{on 'click' @onClose}}
diff --git a/packages/host/app/components/ai-assistant/panel.gts b/packages/host/app/components/ai-assistant/panel.gts
index 027a2d92f89..99d1d112d1a 100644
--- a/packages/host/app/components/ai-assistant/panel.gts
+++ b/packages/host/app/components/ai-assistant/panel.gts
@@ -13,6 +13,7 @@ import { modifier } from 'ember-modifier';
 import { Velcro } from 'ember-velcro';
 
 import type { ResizeHandle } from '@cardstack/boxel-ui/components';
+
 import {
   ContextButton,
   LoadingIndicator,
@@ -40,6 +41,7 @@ import NewSessionButton from './new-session-button';
 import type MatrixService from '../../services/matrix-service';
 import type { MonacoSDK } from '../../services/monaco-service';
 import type MonacoService from '../../services/monaco-service';
+import type { WithBoundArgs } from '@glint/template';
 
 const { matrixServerName } = ENV;
 export const aiBotUserId = `@${aiBotUsername}:${matrixServerName}`;
@@ -48,7 +50,10 @@ interface Signature {
   Element: HTMLDivElement;
   Args: {
     onClose: () => void;
-    resizeHandle: ResizeHandle;
+    resizeHandle: WithBoundArgs<
+      typeof ResizeHandle,
+      'groupId' | 'orientation' | 'registerResizeHandle'
+    >;
     selectedCardRef?: ResolvedCodeRef;
   };
 }
diff --git a/packages/host/app/components/ai-assistant/skill-menu/skill-toggle.gts b/packages/host/app/components/ai-assistant/skill-menu/skill-toggle.gts
index c006262d903..ad8fe399087 100644
--- a/packages/host/app/components/ai-assistant/skill-menu/skill-toggle.gts
+++ b/packages/host/app/components/ai-assistant/skill-menu/skill-toggle.gts
@@ -63,19 +63,23 @@ export default class SkillToggle extends Component<SkillToggleSignature> {
   // Title for either skill source: `cardTitle` for a Skill card; for a skill
   // markdown file, the title indexed from its first heading, falling back to
   // the frontmatter name slug only when the file has no heading.
-  private get displayTitle(): string | undefined {
-    let card = this.card as
-      | {
-          cardTitle?: string;
-          title?: string;
-          name?: string;
-          frontmatter?: { name?: string };
-        }
-      | undefined;
+  private get displayTitle(): string {
+    let card = this.card as {
+      cardTitle?: string;
+      title?: string;
+      name?: string;
+      frontmatter?: { name?: string };
+    };
     if (!card) {
-      return undefined;
+      return 'Untitled Skill';
     }
-    return card.cardTitle ?? card.title ?? card.frontmatter?.name ?? card.name;
+    return (
+      card.cardTitle ??
+      card.title ??
+      card.frontmatter?.name ??
+      card.name ??
+      'Untitled Skill'
+    );
   }
 
   private get isCreating() {
@@ -172,7 +176,7 @@ export default class SkillToggle extends Component<SkillToggleSignature> {
           </Pill>
           <Switch
             class='toggle'
-            @isEnabled={{@isEnabled}}
+            @isEnabled={{Boolean @isEnabled}}
             @onChange={{@onToggle}}
             @label={{this.displayTitle}}
             data-test-skill-toggle='{{@cardId}}-{{if @isEnabled "on" "off"}}'
diff --git a/packages/host/app/components/host-mode/card.gts b/packages/host/app/components/host-mode/card.gts
index a9dab4b9e70..0aaf2804a77 100644
--- a/packages/host/app/components/host-mode/card.gts
+++ b/packages/host/app/components/host-mode/card.gts
@@ -121,7 +121,7 @@ export default class HostModeCard extends Component<Signature> {
     <CardContainer
       {{this.restoreScroll this.card}}
       class={{cn 'host-mode-card' is-primary=@isPrimary}}
-      displayBoundaries={{@displayBoundaries}}
+      @displayBoundaries={{@displayBoundaries}}
       data-test-host-mode-card-loaded={{bool this.card}}
       ...attributes
     >
diff --git a/packages/host/app/components/markdown-embed-chooser/tab-panel.gts b/packages/host/app/components/markdown-embed-chooser/tab-panel.gts
index 0e82e7a0f29..cfd010a9edf 100644
--- a/packages/host/app/components/markdown-embed-chooser/tab-panel.gts
+++ b/packages/host/app/components/markdown-embed-chooser/tab-panel.gts
@@ -233,7 +233,10 @@ export default class MarkdownEmbedChooserTabPanel extends Component<Signature> {
       title: e.title,
       message: e.message,
       stack: e.meta?.stack ?? undefined,
-      additionalErrors: e.additionalErrors ?? null,
+      additionalErrors:
+        e.additionalErrors?.map((err) =>
+          'errorDetail' in err ? err.errorDetail : err,
+        ) ?? null,
     };
   }
 
diff --git a/packages/host/app/components/matrix/register-user.gts b/packages/host/app/components/matrix/register-user.gts
index a83c6cb811f..203fe2942d9 100644
--- a/packages/host/app/components/matrix/register-user.gts
+++ b/packages/host/app/components/matrix/register-user.gts
@@ -134,7 +134,7 @@ export default class RegisterUser extends Component<Signature> {
             data-test-username-field
             id='boxel-register-username'
             @name='username'
-            autocomplete='username'
+            @autocomplete='username'
             @state={{this.usernameInputState}}
             @value={{this.username}}
             @placeholder='Your username'
diff --git a/packages/host/app/components/operator-mode/code-submode.gts b/packages/host/app/components/operator-mode/code-submode.gts
index 51a7d0386a8..6bfdc726f4b 100644
--- a/packages/host/app/components/operator-mode/code-submode.gts
+++ b/packages/host/app/components/operator-mode/code-submode.gts
@@ -912,7 +912,7 @@ export default class CodeSubmode extends Component<Signature> {
               </ResizablePanel>
             {{else}}
               <ResizablePanel
-                @defaultLengthFraction={{this.defaultPanelWidths.emptyCodeModePanel}}
+                @defaultSize={{this.defaultPanelWidths.emptyCodeModePanel}}
               >
                 <InnerContainer
                   class='empty-container'
diff --git a/packages/host/app/components/operator-mode/code-submode/playground/instance-chooser-dropdown.gts b/packages/host/app/components/operator-mode/code-submode/playground/instance-chooser-dropdown.gts
index d448324d95d..625c7e99212 100644
--- a/packages/host/app/components/operator-mode/code-submode/playground/instance-chooser-dropdown.gts
+++ b/packages/host/app/components/operator-mode/code-submode/playground/instance-chooser-dropdown.gts
@@ -176,16 +176,36 @@ function closeInstanceChooser() {
   (
     document.querySelector(
       '[data-playground-instance-chooser][aria-expanded="true"]',
-    ) as BoxelSelect | null
+    ) as HTMLElement | null
   )?.click();
 }
 
+type OptionItem = RenderableSearchEntryLike | FieldOption | FileDef;
+
+// The template branches on @isFileMeta/@isField, which the parent keeps in
+// sync with the kind of options it passed; these narrow each branch's item.
+function optionItems(options: OptionsDropdownSignature['Args']['options']) {
+  return (options ?? []) as OptionItem[];
+}
+
+function asFile(item: OptionItem) {
+  return item as FileDef;
+}
+
+function fieldOf(item: OptionItem) {
+  return (item as FieldOption).field;
+}
+
+function componentOf(item: OptionItem) {
+  return (item as RenderableSearchEntryLike).component;
+}
+
 export const OptionsDropdown: TemplateOnlyComponent<OptionsDropdownSignature> =
   <template>
     <BoxelSelect
       class='instance-chooser'
       @dropdownClass='instances-dropdown-content'
-      @options={{@options}}
+      @options={{optionItems @options}}
       @selected={{@selected}}
       @selectedItemComponent={{component
         SelectedItem
@@ -219,15 +239,17 @@ export const OptionsDropdown: TemplateOnlyComponent<OptionsDropdownSignature> =
     >
       {{#if @isFileMeta}}
         <div class='file-item'>
-          <CardRenderer @card={{item}} @format='atom' />
+          <CardRenderer @card={{asFile item}} @format='atom' />
         </div>
       {{else if @isField}}
         <CardContainer class='field' @displayBoundaries={{true}}>
-          <CardRenderer @card={{item.field}} @format='atom' />
+          <CardRenderer @card={{fieldOf item}} @format='atom' />
         </CardContainer>
       {{else}}
         <CardContainer class='card' @displayBoundaries={{true}}>
-          <item.component />
+          {{#let (componentOf item) as |ItemComponent|}}
+            <ItemComponent />
+          {{/let}}
         </CardContainer>
       {{/if}}
     </BoxelSelect>
diff --git a/packages/host/app/components/operator-mode/code-submode/playground/playground-panel.gts b/packages/host/app/components/operator-mode/code-submode/playground/playground-panel.gts
index 9e470b971e0..0d6d4392204 100644
--- a/packages/host/app/components/operator-mode/code-submode/playground/playground-panel.gts
+++ b/packages/host/app/components/operator-mode/code-submode/playground/playground-panel.gts
@@ -13,13 +13,13 @@ import ToElsewhere from 'ember-elsewhere/components/to-elsewhere';
 import { consume, provide } from 'ember-provide-consume-context';
 import { resource, use } from 'ember-resources';
 
-import type { BoxelSelect } from '@cardstack/boxel-ui/components';
 import {
   CardContainer,
   LoadingIndicator,
 } from '@cardstack/boxel-ui/components';
 import { eq, MenuItem, or, toMenuItems } from '@cardstack/boxel-ui/helpers';
 import { Folder, IconPlusThin } from '@cardstack/boxel-ui/icons';
+import type { Icon } from '@cardstack/boxel-ui/icons';
 
 import {
   CardContextName,
@@ -232,7 +232,9 @@ export default class PlaygroundPanel extends Component<Signature> {
       new MenuItem({
         label: 'Create new instance',
         action: () => this.createNew(),
-        icon: this.createNewIsRunning ? LoadingIndicator : IconPlusThin,
+        icon: (this.createNewIsRunning
+          ? LoadingIndicator
+          : IconPlusThin) as Icon,
         disabled: this.createNewIsRunning || !this.canWriteRealm,
       }),
       new MenuItem({
@@ -906,7 +908,7 @@ export default class PlaygroundPanel extends Component<Signature> {
     (
       document.querySelector(
         '[data-playground-instance-chooser][aria-expanded="true"]',
-      ) as BoxelSelect | null
+      ) as HTMLElement | null
     )?.click();
 
   private get currentFileDef(): FileDef | undefined {
diff --git a/packages/host/app/components/operator-mode/code-submode/playground/playground-preview.gts b/packages/host/app/components/operator-mode/code-submode/playground/playground-preview.gts
index 41f47e7a27d..9e30e9dd89c 100644
--- a/packages/host/app/components/operator-mode/code-submode/playground/playground-preview.gts
+++ b/packages/host/app/components/operator-mode/code-submode/playground/playground-preview.gts
@@ -1,5 +1,4 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
-import { get } from '@ember/helper';
 
 import { CardContainer, CardHeader } from '@cardstack/boxel-ui/components';
 import type { MenuItem } from '@cardstack/boxel-ui/helpers';
@@ -37,6 +36,10 @@ interface Signature {
     onFinishEditing?: () => void;
   };
 }
+function fileDefName(card: CardDef | FieldDef | FileDef) {
+  return (card as FileDef).name;
+}
+
 const PlaygroundPreview: TemplateOnlyComponent<Signature> = <template>
   {{#if (or (eq @format 'isolated') (eq @format 'edit'))}}
     <CardContainer
@@ -54,7 +57,7 @@ const PlaygroundPreview: TemplateOnlyComponent<Signature> = <template>
           @cardTitle={{if
             (isCardInstance @card)
             @card.cardTitle
-            (if @isFileDef (get @card 'name') undefined)
+            (if @isFileDef (fileDefName @card) undefined)
           }}
           @realmInfo={{@realmInfo}}
           @onEdit={{@onEdit}}
diff --git a/packages/host/app/components/operator-mode/code-submode/spec-preview-badge.gts b/packages/host/app/components/operator-mode/code-submode/spec-preview-badge.gts
index ba72ac27a1f..5c8a453ea02 100644
--- a/packages/host/app/components/operator-mode/code-submode/spec-preview-badge.gts
+++ b/packages/host/app/components/operator-mode/code-submode/spec-preview-badge.gts
@@ -24,7 +24,6 @@ const SpecPreviewBadge: TemplateOnlyComponent<SpecPreviewBadgeSignature> =
       {{#if @showCreateSpec}}
         <BoxelButton
           class='create-spec-button'
-          @icon='plus'
           @kind='primary'
           @size='extra-small'
           @loading={{@isCreateSpecInstanceRunning}}
diff --git a/packages/host/app/components/operator-mode/code-submode/toggle-button.gts b/packages/host/app/components/operator-mode/code-submode/toggle-button.gts
index f6344e92e7a..81c423536ff 100644
--- a/packages/host/app/components/operator-mode/code-submode/toggle-button.gts
+++ b/packages/host/app/components/operator-mode/code-submode/toggle-button.gts
@@ -11,7 +11,7 @@ interface ToggleButtonSignature {
     disabled?: boolean;
     isActive: boolean;
   };
-  Element: typeof Button.Element;
+  Element: HTMLButtonElement | HTMLAnchorElement;
   Blocks: {
     default: [];
     annotation: [];
diff --git a/packages/host/app/components/operator-mode/error-display.gts b/packages/host/app/components/operator-mode/error-display.gts
index 669d21f37d8..1cb4c7bc36b 100644
--- a/packages/host/app/components/operator-mode/error-display.gts
+++ b/packages/host/app/components/operator-mode/error-display.gts
@@ -337,7 +337,7 @@ export default class ErrorDisplay
         <CopyButton
           @textToCopy={{this.errorText}}
           @width='16px'
-          @heigth='16px'
+          @height='16px'
         />
         <Button
           class='toggle-details-button'
diff --git a/packages/host/app/components/operator-mode/new-file-button.gts b/packages/host/app/components/operator-mode/new-file-button.gts
index 3e78c4449ab..be6aa402eaf 100644
--- a/packages/host/app/components/operator-mode/new-file-button.gts
+++ b/packages/host/app/components/operator-mode/new-file-button.gts
@@ -23,7 +23,10 @@ interface TriggerButtonSignature {
   Args: {
     isCollapsed?: boolean;
     isDisabled?: boolean;
-    bindings: ModifierLike<{ Args: { Positional: unknown[] } }>;
+    bindings: ModifierLike<{
+      Args: { Positional: unknown[] };
+      Element: HTMLElement;
+    }>;
   };
   Element: HTMLButtonElement;
 }
diff --git a/packages/host/app/components/operator-mode/profile-info-popover.gts b/packages/host/app/components/operator-mode/profile-info-popover.gts
index 677b925773f..cba9b0a8483 100644
--- a/packages/host/app/components/operator-mode/profile-info-popover.gts
+++ b/packages/host/app/components/operator-mode/profile-info-popover.gts
@@ -212,7 +212,7 @@ export class ProfileInfo extends Component<ProfileInfoSignature> {
   <template>
     <div class='profile-popover-body' data-test-profile-icon-container>
       <Avatar
-        @isReady={{this.matrixService.profile.loaded}}
+        @isReady={{this.matrixService.profile.isLoaded}}
         @userId={{this.matrixService.userId}}
         @displayName={{this.matrixService.profile.displayName}}
       />
diff --git a/packages/host/app/components/operator-mode/profile/profile-settings-modal.gts b/packages/host/app/components/operator-mode/profile/profile-settings-modal.gts
index 961af39fe40..66d1701ece7 100644
--- a/packages/host/app/components/operator-mode/profile/profile-settings-modal.gts
+++ b/packages/host/app/components/operator-mode/profile/profile-settings-modal.gts
@@ -60,7 +60,6 @@ export default class ProfileSettingsModal extends Component<Signature> {
                 data-test-display-name-field
                 @value={{this.matrixService.profile.displayName}}
                 @onInput={{this.setDisplayName}}
-                @valid={{this.isDisplayNameValid}}
                 @errorMessage={{if
                   (not this.isDisplayNameValid)
                   'Name is required'
@@ -272,10 +271,10 @@ export default class ProfileSettingsModal extends Component<Signature> {
   }
 
   private get hasPasswordError() {
-    return (
+    return Boolean(
       this.currentPasswordError ||
       this.newPasswordError ||
-      this.confirmPasswordError
+      this.confirmPasswordError,
     );
   }
 
diff --git a/packages/host/app/components/operator-mode/publish-realm-modal.gts b/packages/host/app/components/operator-mode/publish-realm-modal.gts
index 9b15338d6ce..a6cc857061e 100644
--- a/packages/host/app/components/operator-mode/publish-realm-modal.gts
+++ b/packages/host/app/components/operator-mode/publish-realm-modal.gts
@@ -420,7 +420,7 @@ export default class PublishRealmModal extends Component<Signature> {
     if (this.customSubdomainAvailability?.available) {
       return 'valid';
     }
-    return null;
+    return undefined;
   }
 
   get isClaimCustomSubdomainDisabled() {
diff --git a/packages/host/app/components/operator-mode/submode-layout.gts b/packages/host/app/components/operator-mode/submode-layout.gts
index 3944b020edb..0e1a6d9339e 100644
--- a/packages/host/app/components/operator-mode/submode-layout.gts
+++ b/packages/host/app/components/operator-mode/submode-layout.gts
@@ -511,7 +511,7 @@ export default class SubmodeLayout extends Component<Signature> {
               data-test-profile-icon-button
             >
               <Avatar
-                @isReady={{this.matrixService.profile.loaded}}
+                @isReady={{this.matrixService.profile.isLoaded}}
                 @userId={{this.matrixService.userId}}
                 @displayName={{this.matrixService.profile.displayName}}
               />
diff --git a/packages/host/app/components/search/search-bar.gts b/packages/host/app/components/search/search-bar.gts
index 601a1dda2d7..e103a06d348 100644
--- a/packages/host/app/components/search/search-bar.gts
+++ b/packages/host/app/components/search/search-bar.gts
@@ -6,7 +6,7 @@ import { modifier } from 'ember-modifier';
 
 import {
   BoxelInput,
-  type BoxelInputBottomTreatments,
+  type BoxelInputBottomTreatment,
 } from '@cardstack/boxel-ui/components';
 import { IconSearch } from '@cardstack/boxel-ui/icons';
 import { autoFocus } from '@cardstack/boxel-ui/modifiers';
@@ -40,7 +40,7 @@ interface Signature {
     onKeyDown?: (ev: Event) => void;
     onInputInsertion?: (element: HTMLElement) => void;
     pickerDestination?: string;
-    bottomTreatment?: BoxelInputBottomTreatments;
+    bottomTreatment?: BoxelInputBottomTreatment;
     state?: 'none' | 'valid' | 'invalid' | 'loading' | 'initial';
     id?: string;
     hidePickers?: boolean;
diff --git a/packages/host/app/resources/matrix-profile.ts b/packages/host/app/resources/matrix-profile.ts
index be03dff9a0d..802c21d6337 100644
--- a/packages/host/app/resources/matrix-profile.ts
+++ b/packages/host/app/resources/matrix-profile.ts
@@ -22,6 +22,10 @@ export class MatrixProfileResource extends Resource<Args> {
 
   @service declare private matrixService: MatrixService;
 
+  get isLoaded() {
+    return this.load.performCount > 0 && !this.load.isRunning;
+  }
+
   modify(_positional: never[], named: Args['named']) {
     let { userId } = named;
     this.userId = userId;
diff --git a/packages/host/app/templates/connect.gts b/packages/host/app/templates/connect.gts
index 77994a882c7..76f096af944 100644
--- a/packages/host/app/templates/connect.gts
+++ b/packages/host/app/templates/connect.gts
@@ -63,14 +63,9 @@ class ConnectComponent extends Component<ConnectComponentSignature> {
     {{#if this.storageAccess}}
       {{#if this.matrixService.isLoggedIn}}
         <section class='session-container'>
-          <BoxelIcon
-            name='connect'
-            width='18'
-            height='18'
-            class='connect-icon'
-          />
+          <BoxelIcon width='18' height='18' class='connect-icon' />
           <Avatar
-            @isReady={{this.matrixService.profile.loaded}}
+            @isReady={{this.matrixService.profile.isLoaded}}
             @userId={{this.matrixService.userId}}
             @displayName={{this.matrixService.profile.displayName}}
           />
@@ -135,7 +130,7 @@ interface ConnectButtonSignature {
 
 const ConnectButton: TemplateOnlyComponent<ConnectButtonSignature> = <template>
   <BoxelButton class='connect' data-test-connect ...attributes>
-    <BoxelIcon name='connect' width='16' height='16' class='connect-icon' />
+    <BoxelIcon width='16' height='16' class='connect-icon' />
     Connect
   </BoxelButton>
 
diff --git a/packages/host/types/ember-draggable-modifiers/index.d.ts b/packages/host/types/ember-draggable-modifiers/index.d.ts
new file mode 100644
index 00000000000..054e1eecd86
--- /dev/null
+++ b/packages/host/types/ember-draggable-modifiers/index.d.ts
@@ -0,0 +1,101 @@
+declare module 'ember-draggable-modifiers/modifiers/drop-target' {
+  import type { ModifierLike } from '@glint/template';
+
+  interface DragAndDropPayload {
+    event: unknown;
+    source: {
+      data: any;
+      group?: string;
+    };
+    target: {
+      data?: any;
+      edge?: 'top' | 'bottom' | 'left' | 'right' | null;
+      group?: string;
+      tree?: string;
+    };
+  }
+
+  interface DropTargetSignature {
+    Args: {
+      Named: {
+        accepts?: string[];
+        allowDropOnChildren?: boolean;
+        allowDropOnItself?: boolean;
+        allowedEdges?: Array<'top' | 'bottom' | 'left' | 'right'>;
+        canDrop?: (payload: DragAndDropPayload, canDrop: boolean) => boolean;
+        data?: unknown;
+        direction?: 'horizontal' | 'vertical';
+        disabled?: boolean;
+        group?: string;
+        isOnTargetClass?: string;
+        onDragEnter?: (payload: DragAndDropPayload) => void;
+        onDragLeave?: (payload: DragAndDropPayload) => void;
+        onDrop?: (payload: DragAndDropPayload) => void;
+        onHover?: (payload: DragAndDropPayload) => void;
+      };
+      Positional: [];
+    };
+    Element: HTMLElement;
+  }
+
+  const DropTargetModifier: ModifierLike<DropTargetSignature>;
+  export default DropTargetModifier;
+}
+
+declare module 'ember-draggable-modifiers/modifiers/sortable-item' {
+  import type { ModifierLike } from '@glint/template';
+
+  interface DragAndDropPayload {
+    event: unknown;
+    source: {
+      data: any;
+      group?: string;
+    };
+    target: {
+      data?: any;
+      edge?: 'top' | 'bottom' | 'left' | 'right' | null;
+      group?: string;
+      tree?: string;
+    };
+  }
+
+  interface SortableItemSignature {
+    Args: {
+      Named: {
+        accepts?: string[];
+        allowDropOnChildren?: boolean;
+        allowDropOnItself?: boolean;
+        allowedEdges?: Array<'top' | 'bottom' | 'left' | 'right'>;
+        canDrop?: (payload: DragAndDropPayload, canDrop: boolean) => boolean;
+        data?: unknown;
+        direction?: 'horizontal' | 'vertical';
+        disabled?: boolean;
+        disabledDrag?: boolean;
+        disabledDrop?: boolean;
+        dragHandleElement?: string;
+        group?: string;
+        isDraggingClass?: string;
+        isOnTargetClass?: string;
+        onDragEnd?: (payload: DragAndDropPayload) => void;
+        onDragEnter?: (payload: DragAndDropPayload) => void;
+        onDragLeave?: (payload: DragAndDropPayload) => void;
+        onDragStart?: (payload: DragAndDropPayload) => void;
+        onDrop?: (payload: DragAndDropPayload) => void;
+        onHover?: (payload: DragAndDropPayload) => void;
+      };
+      Positional: [];
+    };
+    Element: HTMLElement;
+  }
+
+  const SortableItemModifier: ModifierLike<SortableItemSignature>;
+  export default SortableItemModifier;
+}
+
+declare module 'ember-draggable-modifiers/utils/array' {
+  export function insertAt<T>(arr: T[], index: number, item: T): T[];
+  export function removeAt<T>(arr: T[], index: number): T[];
+  export function insertBefore<T>(arr: T[], targetItem: T, item: T): T[];
+  export function insertAfter<T>(arr: T[], targetItem: T, item: T): T[];
+  export function removeItem<T>(arr: T[], item: T): T[];
+}
diff --git a/packages/host/types/ember-set-body-class/helpers/set-body-class.d.ts b/packages/host/types/ember-set-body-class/helpers/set-body-class.d.ts
new file mode 100644
index 00000000000..13d15509b61
--- /dev/null
+++ b/packages/host/types/ember-set-body-class/helpers/set-body-class.d.ts
@@ -0,0 +1,13 @@
+declare module 'ember-set-body-class/helpers/set-body-class' {
+  import type { HelperLike } from '@glint/template';
+
+  interface Signature {
+    Args: {
+      Positional: [string];
+    };
+    Return: void;
+  }
+
+  const setBodyClass: HelperLike<Signature>;
+  export default setBodyClass;
+}
diff --git a/packages/software-factory/realm/issue-tracker.gts b/packages/software-factory/realm/issue-tracker.gts
index 63fd2d08189..134d9d94db4 100644
--- a/packages/software-factory/realm/issue-tracker.gts
+++ b/packages/software-factory/realm/issue-tracker.gts
@@ -35,7 +35,7 @@ import {
   type KanbanColumnConfig,
   type KanbanPlacement,
 } from '@cardstack/boxel-ui/components';
-import { cn, cssVar, eq, MenuItem } from '@cardstack/boxel-ui/helpers';
+import { bool, cn, cssVar, eq, MenuItem } from '@cardstack/boxel-ui/helpers';
 
 import BookOpen from '@cardstack/boxel-icons/book-open';
 import CheckboxIcon from '@cardstack/boxel-icons/checkbox';
@@ -3160,7 +3160,6 @@ class IssueTrackerIsolated extends Component<typeof IssueTracker> {
                       <ContextButton
                         @icon={{ListFilter}}
                         @label='Group by'
-                        @variant='secondary'
                         {{bindings}}
                       />
                     </:trigger>
@@ -3532,7 +3531,7 @@ class IssueTrackerEdit extends Component<typeof IssueTracker> {
               </FieldContainer>
               <FieldContainer @label='Hide Empty Columns' @vertical={{true}}>
                 <Switch
-                  @isEnabled={{@model.hideEmptyColumns}}
+                  @isEnabled={{bool @model.hideEmptyColumns}}
                   @onChange={{this.toggleHideEmptyColumns}}
                   @label='Hide empty columns'
                 />