diff --git a/.github/workflows/manual-vscode-boxel-tools.yml b/.github/workflows/manual-vscode-boxel-tools.yml
index 61df8cb269..cdfb00fb54 100644
--- a/.github/workflows/manual-vscode-boxel-tools.yml
+++ b/.github/workflows/manual-vscode-boxel-tools.yml
@@ -94,7 +94,7 @@ jobs:
       - name: Package
         run: pnpm vscode:package
         working-directory: packages/vscode-boxel-tools
-      - name: Publish
+      - name: Publish to Visual Studio Marketplace
         run: |
           if [ "${{ inputs.environment }}" = "production" ]; then
             pnpm vscode:publish
@@ -104,3 +104,13 @@ jobs:
         working-directory: packages/vscode-boxel-tools
         env:
           VSCE_PAT: ${{ secrets.VSCE_PAT }}
+      - name: Publish to Open VSX
+        run: |
+          if [ "${{ inputs.environment }}" = "production" ]; then
+            npx ovsx publish --no-dependencies --pat $OVSX_TOKEN
+          else
+            npx ovsx publish --no-dependencies --pre-release --pat $OVSX_TOKEN
+          fi
+        working-directory: packages/vscode-boxel-tools
+        env:
+          OVSX_TOKEN: ${{ secrets.OVSX_TOKEN }}
diff --git a/packages/ai-bot/helpers.ts b/packages/ai-bot/helpers.ts
index 6598964489..1eaef7a605 100644
--- a/packages/ai-bot/helpers.ts
+++ b/packages/ai-bot/helpers.ts
@@ -119,7 +119,14 @@ export function constructHistory(
       try {
         rawEvent.content.data = JSON.parse(rawEvent.content.data);
       } catch (e) {
-        Sentry.captureException(e);
+        Sentry.captureException(e, {
+          attachments: [
+            {
+              data: rawEvent.content.data,
+              filename: 'rawEventContentData.txt',
+            },
+          ],
+        });
         log.error('Error parsing JSON', e);
         throw new HistoryConstructionError((e as Error).message);
       }
diff --git a/packages/base/base64-image.gts b/packages/base/base64-image.gts
index c983bc188b..8f9df3dff7 100644
--- a/packages/base/base64-image.gts
+++ b/packages/base/base64-image.gts
@@ -197,7 +197,7 @@ class Edit extends Component<typeof Base64ImageField> {
 // this allows multiple radio groups rendered on the page
 // to stay independent of one another.
 let groupNumber = 0;
-class ImageSizeField extends FieldDef {
+export class ImageSizeField extends FieldDef {
   static displayName = 'Image Size';
   static [primitive]: 'actual' | 'contain' | 'cover';
   static [useIndexBasedKey]: never;
diff --git a/packages/base/cards-grid.gts b/packages/base/cards-grid.gts
index a606a1858e..10038734b0 100644
--- a/packages/base/cards-grid.gts
+++ b/packages/base/cards-grid.gts
@@ -286,8 +286,22 @@ class Isolated extends Component<typeof CardsGrid> {
         display: none;
       }
       .instance-error {
-        opacity: 0.33;
-        color: var(--boxel-error-100);
+        position: relative;
+      }
+      .instance-error::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(255, 0, 0, 0.1);
+      }
+      .instance-error .boundaries {
+        box-shadow: 0 0 0 1px var(--boxel-error-300);
+      }
+      .instance-error:hover .boundaries {
+        box-shadow: 0 0 0 1px var(--boxel-dark);
       }
     </style>
   </template>
diff --git a/packages/base/command.gts b/packages/base/command.gts
index 38cbcf1bde..ca578415d2 100644
--- a/packages/base/command.gts
+++ b/packages/base/command.gts
@@ -6,11 +6,13 @@ import {
   contains,
   field,
   linksTo,
+  linksToMany,
   primitive,
   queryableValue,
 } from './card-api';
 import CodeRefField from './code-ref';
 import BooleanField from './boolean';
+import { SkillCard } from './skill-card';
 
 export type CommandStatus = 'applied' | 'ready' | 'applying';
 
@@ -75,3 +77,16 @@ export class CreateInstanceInput extends CardDef {
   @field module = contains(CodeRefField);
   @field realm = contains(StringField);
 }
+
+export class CreateAIAssistantRoomInput extends CardDef {
+  @field name = contains(StringField);
+}
+
+export class CreateAIAssistantRoomResult extends CardDef {
+  @field roomId = contains(StringField);
+}
+
+export class AddSkillsToRoomInput extends CardDef {
+  @field roomId = contains(StringField);
+  @field skills = linksToMany(SkillCard);
+}
diff --git a/packages/base/markdown.gts b/packages/base/markdown.gts
index 432e21ae41..7ca3d329c6 100644
--- a/packages/base/markdown.gts
+++ b/packages/base/markdown.gts
@@ -14,7 +14,7 @@ class View extends Component<typeof MarkdownField> {
     <style scoped>
       .markdown-content {
         max-width: 100%;
-        font-size: var(--markdown-font-size, 1rem);
+        font-size: var(--markdown-font-size, inherit);
         font-family: var(--markdown-font-family, inherit);
         overflow: hidden;
       }
@@ -67,8 +67,8 @@ class View extends Component<typeof MarkdownField> {
         font-family: inherit;
         font-size: inherit;
         font-weight: 400;
-        margin-top: var(--boxel-sp-sm);
-        margin-bottom: var(--boxel-sp-sm);
+        margin-top: var(--boxel-sp-lg);
+        margin-bottom: var(--boxel-sp);
       }
 
       /* Bold */
diff --git a/packages/billing/billing-queries.ts b/packages/billing/billing-queries.ts
index 9438c5cc10..b4efdeb218 100644
--- a/packages/billing/billing-queries.ts
+++ b/packages/billing/billing-queries.ts
@@ -1,6 +1,7 @@
 import {
   DBAdapter,
   Expression,
+  PgPrimitive,
   addExplicitParens,
   asExpressions,
   every,
@@ -17,6 +18,7 @@ export interface User {
   matrixUserId: string;
   stripeCustomerId: string;
   stripeCustomerEmail: string | null;
+  matrixRegistrationToken: string | null;
 }
 
 export interface Plan {
@@ -57,6 +59,16 @@ export interface LedgerEntry {
   subscriptionCycleId: string | null;
 }
 
+function planRowToPlan(row: Record<string, PgPrimitive>): Plan {
+  return {
+    id: row.id,
+    name: row.name,
+    monthlyPrice: parseFloat(row.monthly_price as string),
+    creditsIncluded: row.credits_included,
+    stripePlanId: row.stripe_plan_id,
+  } as Plan;
+}
+
 export async function insertStripeEvent(
   dbAdapter: DBAdapter,
   event: StripeEvent,
@@ -98,13 +110,7 @@ export async function getPlanByStripeId(
     return null;
   }
 
-  return {
-    id: results[0].id,
-    name: results[0].name,
-    monthlyPrice: results[0].monthly_price,
-    creditsIncluded: results[0].credits_included,
-    stripePlanId: results[0].stripe_plan_id,
-  } as Plan;
+  return planRowToPlan(results[0]);
 }
 
 export async function updateUserStripeCustomerId(
@@ -167,6 +173,7 @@ export async function getUserByStripeId(
     id: results[0].id,
     matrixUserId: results[0].matrix_user_id,
     stripeCustomerId: results[0].stripe_customer_id,
+    matrixRegistrationToken: results[0].matrix_registration_token,
   } as User;
 }
 
@@ -188,6 +195,7 @@ export async function getUserByMatrixUserId(
     matrixUserId: results[0].matrix_user_id,
     stripeCustomerId: results[0].stripe_customer_id,
     stripeCustomerEmail: results[0].stripe_customer_email,
+    matrixRegistrationToken: results[0].matrix_registration_token,
   } as User;
 }
 
@@ -453,13 +461,7 @@ export async function getPlanById(
     return null;
   }
 
-  return {
-    id: results[0].id,
-    name: results[0].name,
-    monthlyPrice: results[0].monthly_price,
-    creditsIncluded: results[0].credits_included,
-    stripePlanId: results[0].stripe_plan_id,
-  } as Plan;
+  return planRowToPlan(results[0]);
 }
 
 export async function getPlanByMonthlyPrice(
@@ -475,13 +477,7 @@ export async function getPlanByMonthlyPrice(
     return null;
   }
 
-  return {
-    id: results[0].id,
-    name: results[0].name,
-    monthlyPrice: results[0].monthly_price,
-    creditsIncluded: results[0].credits_included,
-    stripePlanId: results[0].stripe_plan_id,
-  } as Plan;
+  return planRowToPlan(results[0]);
 }
 
 export async function expireRemainingPlanAllowanceInSubscriptionCycle(
diff --git a/packages/billing/proration-calculator.ts b/packages/billing/proration-calculator.ts
index 49485c412d..b5e53069a7 100644
--- a/packages/billing/proration-calculator.ts
+++ b/packages/billing/proration-calculator.ts
@@ -20,17 +20,23 @@ export class ProrationCalculator {
   }) {
     let { currentPlan, newPlan, invoiceLines, currentAllowance } = params;
 
-    // Sum up monetary credit (refunds) given to the user by Stripe for unused time on previous plans
-    // (there can be multiple such lines if user switches to larger plans multiple times in the same billing period)
-    // and convert it to credits. In other words, take away the credits calculated from the money that Stripe
-    // returned to the user for unused time.
     let creditsToExpireForUnusedTime = 0;
-    for (let line of invoiceLines) {
-      if (line.amount > 0) continue;
-      creditsToExpireForUnusedTime += this.centsToCredits(
-        -line.amount,
-        currentPlan,
-      );
+
+    if (currentPlan.monthlyPrice === 0) {
+      // If the user is upgrading from a free plan, we do not want to carry over any credits from the free plan into the paid plan
+      creditsToExpireForUnusedTime = currentAllowance;
+    } else {
+      // Sum up monetary credit (refunds) given to the user by Stripe for unused time on previous plans
+      // (there can be multiple such lines if user switches to larger plans multiple times in the same billing period)
+      // and convert it to credits. In other words, take away the credits calculated from the money that Stripe
+      // returned to the user for unused time.
+      for (let line of invoiceLines) {
+        if (line.amount > 0) continue;
+        creditsToExpireForUnusedTime += this.centsToCredits(
+          -line.amount,
+          currentPlan,
+        );
+      }
     }
 
     // Find invoice line for the new plan the user is subscribing to
diff --git a/packages/billing/stripe-webhook-handlers/index.ts b/packages/billing/stripe-webhook-handlers/index.ts
index f322da43d9..1cd2899ecd 100644
--- a/packages/billing/stripe-webhook-handlers/index.ts
+++ b/packages/billing/stripe-webhook-handlers/index.ts
@@ -1,9 +1,10 @@
-import { DBAdapter } from '@cardstack/runtime-common';
+import { DBAdapter, decodeWebSafeBase64 } from '@cardstack/runtime-common';
 import { handlePaymentSucceeded } from './payment-succeeded';
 import { handleCheckoutSessionCompleted } from './checkout-session-completed';
 
 import Stripe from 'stripe';
 import { handleSubscriptionDeleted } from './subscription-deleted';
+import { getUserByStripeId } from '../billing-queries';
 
 export type StripeEvent = {
   id: string;
@@ -99,11 +100,15 @@ export type StripeCheckoutSessionCompletedWebhookEvent = StripeEvent & {
 // Invoice immediately (when prorating): CHECKED
 // When switching to a cheaper subscription -> WAIT UNTIL END OF BILLING PERIOD TO UPDATE
 
-export default async function stripeWebhookHandler(
-  dbAdapter: DBAdapter,
-  request: Request,
-  sendBillingNotification: (stripeUserId: string) => Promise<void>,
-): Promise<Response> {
+export default async function stripeWebhookHandler({
+  dbAdapter,
+  request,
+  sendMatrixEvent,
+}: {
+  dbAdapter: DBAdapter;
+  request: Request;
+  sendMatrixEvent: (matrixUserId: string, eventType: string) => Promise<void>;
+}): Promise<Response> {
   let signature = request.headers.get('stripe-signature');
 
   if (!signature) {
@@ -130,27 +135,78 @@ export default async function stripeWebhookHandler(
 
   switch (type) {
     // These handlers should eventually become jobs which workers will process asynchronously
-    case 'invoice.payment_succeeded':
+    case 'invoice.payment_succeeded': {
       await handlePaymentSucceeded(
         dbAdapter,
         event as StripeInvoicePaymentSucceededWebhookEvent,
       );
-      sendBillingNotification(event.data.object.customer);
+      sendBillingNotification({
+        dbAdapter,
+        sendMatrixEvent,
+        stripeEvent: event,
+      });
       break;
-    case 'customer.subscription.deleted': // canceled by the user, or expired due to payment failure, or payment dispute
+    }
+    case 'customer.subscription.deleted': {
+      // canceled by the user, or expired due to payment failure, or payment dispute
       await handleSubscriptionDeleted(
         dbAdapter,
         event as StripeSubscriptionDeletedWebhookEvent,
       );
-      sendBillingNotification(event.data.object.customer);
+      sendBillingNotification({
+        dbAdapter,
+        sendMatrixEvent,
+        stripeEvent: event,
+      });
       break;
-    case 'checkout.session.completed':
+    }
+    case 'checkout.session.completed': {
       await handleCheckoutSessionCompleted(
         dbAdapter,
         event as StripeCheckoutSessionCompletedWebhookEvent,
       );
-      sendBillingNotification(event.data.object.customer);
+      sendBillingNotification({
+        dbAdapter,
+        sendMatrixEvent,
+        stripeEvent: event,
+      });
       break;
+    }
   }
   return new Response('ok');
 }
+
+async function sendBillingNotification({
+  dbAdapter,
+  sendMatrixEvent,
+  stripeEvent,
+}: {
+  dbAdapter: DBAdapter;
+  sendMatrixEvent: (matrixUserId: string, eventType: string) => Promise<void>;
+  stripeEvent: StripeEvent;
+}) {
+  let matrixUserId = await extractMatrixUserId(dbAdapter, stripeEvent);
+  await sendMatrixEvent(matrixUserId, 'billing-notification');
+}
+
+// Stripe events will have a `customer` (stripe customer id) field in the "invoice.payment_succeeded" event
+// but not in the "checkout.session.completed" event. In the latter case, we need to look up the user by
+// the `client_reference_id` field, which is a url parameter with the value of an encoded matrix user id
+// (these are the payment links for subscribing to the free plan, and buying extra credits)
+async function extractMatrixUserId(dbAdapter: DBAdapter, event: StripeEvent) {
+  let encodedMatrixUserId = event.data.object.client_reference_id;
+  let matrixUserId = encodedMatrixUserId
+    ? decodeWebSafeBase64(encodedMatrixUserId)
+    : undefined;
+
+  if (!matrixUserId && event.data.object.customer) {
+    let user = await getUserByStripeId(dbAdapter, event.data.object.customer);
+    matrixUserId = user?.matrixUserId;
+  }
+
+  if (!matrixUserId) {
+    throw new Error('Failed to extract matrix user id from stripe event');
+  }
+
+  return matrixUserId;
+}
diff --git a/packages/billing/stripe-webhook-handlers/payment-succeeded.ts b/packages/billing/stripe-webhook-handlers/payment-succeeded.ts
index f109ee73e0..64ae4f88b4 100644
--- a/packages/billing/stripe-webhook-handlers/payment-succeeded.ts
+++ b/packages/billing/stripe-webhook-handlers/payment-succeeded.ts
@@ -22,10 +22,6 @@ import { StripeInvoicePaymentSucceededWebhookEvent } from '.';
 import { PgAdapter, TransactionManager } from '@cardstack/postgres';
 import { ProrationCalculator } from '../proration-calculator';
 
-// TODOs that will be handled in a separated PRs:
-// - signal to frontend that subscription has been created and credits have been added
-// - put this in a background job
-
 export async function handlePaymentSucceeded(
   dbAdapter: DBAdapter,
   event: StripeInvoicePaymentSucceededWebhookEvent,
diff --git a/packages/boxel-ui/addon/src/components/avatar/index.gts b/packages/boxel-ui/addon/src/components/avatar/index.gts
index ec1fc3d0c7..098da568d6 100644
--- a/packages/boxel-ui/addon/src/components/avatar/index.gts
+++ b/packages/boxel-ui/addon/src/components/avatar/index.gts
@@ -10,7 +10,7 @@ interface Signature {
     displayName?: string;
     isReady: boolean;
     thumbnailURL?: string;
-    userId: string;
+    userId?: string | null;
   };
   Element: HTMLDivElement;
 }
@@ -73,7 +73,7 @@ export default class Avatar extends Component<Signature> {
     }
     let name = this.args.displayName?.length
       ? this.args.displayName
-      : this.args.userId.replace(/^@/, '');
+      : this.args.userId?.replace(/^@/, '') ?? '';
     return name.slice(0, 1).toUpperCase();
   }
 }
diff --git a/packages/boxel-ui/addon/src/components/pill/index.gts b/packages/boxel-ui/addon/src/components/pill/index.gts
index 462bac0d8e..9139def271 100644
--- a/packages/boxel-ui/addon/src/components/pill/index.gts
+++ b/packages/boxel-ui/addon/src/components/pill/index.gts
@@ -49,15 +49,18 @@ const Pill: TemplateOnlyComponent<PillSignature> = <template>
   <style scoped>
     @layer {
       .pill {
+        --default-pill-font: 600 var(--boxel-font-sm);
+        --default-pill-padding: var(--boxel-sp-5xs) var(--boxel-sp-xxxs);
+        --default-pill-border: 1px solid var(--boxel-400);
         display: inline-flex;
         align-items: center;
         gap: var(--pill-gap, var(--boxel-sp-5xs));
-        padding: var(--pill-padding, var(--boxel-sp-5xs) var(--boxel-sp-xxxs));
+        padding: var(--pill-padding, var(--default-pill-padding));
         background-color: var(--pill-background-color, var(--boxel-light));
         color: var(--pill-font-color, var(--boxel-dark));
-        border: 1px solid var(--pill-font-color, var(--boxel-400));
-        border-radius: var(--boxel-border-radius-sm);
-        font: 600 var(--boxel-font-sm);
+        border: var(--pill-border, var(--default-pill-border));
+        border-radius: var(--pill-border-radius, var(--boxel-border-radius-sm));
+        font: var(--pill-font, var(--default-pill-font));
         letter-spacing: var(--boxel-lsp-xs);
         word-break: break-word;
       }
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/handle.gts b/packages/boxel-ui/addon/src/components/resizable-panel-group/handle.gts
index a5fb6b6fc6..42d31afe38 100644
--- a/packages/boxel-ui/addon/src/components/resizable-panel-group/handle.gts
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/handle.gts
@@ -1,22 +1,33 @@
-import { registerDestructor } from '@ember/destroyable';
-import { on } from '@ember/modifier';
 import { action } from '@ember/object';
-import { scheduleOnce } from '@ember/runloop';
+import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import { modifier } from 'ember-modifier';
 
-import type ResizablePanelGroup from './index.gts';
+import {
+  type ResizeHandlerAction,
+  registerResizeHandle,
+} from './utils/panel-resize-handle-registry.ts';
+import type {
+  Orientation,
+  ResizeEvent,
+  ResizeHandler,
+  ResizeHandleState,
+} from './utils/types.ts';
+
+type RegisterResizeHandleResult = {
+  doubleClickHandler: ResizeHandler;
+  resizeHandler: ResizeHandler;
+  startDragging: ResizeHandler;
+  stopDragging: ResizeHandler;
+};
 
 interface Signature {
   Args: {
-    hide: boolean;
-    onDoubleClick: (event: MouseEvent) => void;
-    onMouseDown: (event: MouseEvent) => void;
-    orientation: 'horizontal' | 'vertical';
-    panelGroupComponent: ResizablePanelGroup;
-    registerHandle: (handle: Handle) => void;
-    reverseArrow: boolean;
-    unregisterHandle: (handle: Handle) => void;
+    groupId: string;
+    hide?: boolean;
+    orientation: Orientation;
+    registerResizeHandle: (handle: Handle) => RegisterResizeHandleResult;
   };
   Blocks: {
     default: [];
@@ -24,23 +35,26 @@ interface Signature {
   Element: HTMLDivElement;
 }
 
-let registerHandle = modifier((element, [handle]: [Handle]) => {
+let manageHandleRegistration = modifier((element, [handle]: [Handle]) => {
   handle.element = element as HTMLDivElement;
-  scheduleOnce('afterRender', handle, handle.registerHandle);
+  handle.registerHandle();
 });
 
 export default class Handle extends Component<Signature> {
   <template>
     <div
       class='separator-{{@orientation}}'
-      {{registerHandle this}}
+      data-boxel-panel-group-id={{@groupId}}
+      data-boxel-panel-resize-handle-id={{this.id}}
+      {{manageHandleRegistration this}}
       ...attributes
     >
       <button
-        class='resize-handle {{@orientation}} {{if @hide "hidden"}}'
+        class='resize-handle
+          {{@orientation}}
+          {{if this.isHover "hover"}}
+          {{if @hide "hidden"}}'
         aria-label='Resize handle'
-        {{on 'mousedown' @onMouseDown}}
-        {{on 'dblclick' @onDoubleClick}}
         data-test-resize-handle
       />
     </div>
@@ -83,7 +97,8 @@ export default class Handle extends Component<Signature> {
         position: relative;
       }
 
-      .resize-handle:hover {
+      .resize-handle:hover,
+      .resize-handle.hover {
         background-color: var(
           --boxel-panel-resize-handle-hover-background-color
         );
@@ -104,14 +119,67 @@ export default class Handle extends Component<Signature> {
   </template>
 
   element!: HTMLDivElement;
+  private _id = guidFor(this);
 
-  constructor(owner: any, args: any) {
-    super(owner, args);
+  @tracked private state: ResizeHandleState = 'inactive';
 
-    registerDestructor(this, this.args.unregisterHandle);
+  @action registerHandle() {
+    const { resizeHandler, startDragging, stopDragging, doubleClickHandler } =
+      this.args.registerResizeHandle(this);
+
+    const setResizeHandlerState = (
+      action: ResizeHandlerAction,
+      isActive: boolean,
+      event: ResizeEvent,
+    ) => {
+      if (isActive) {
+        switch (action) {
+          case 'down': {
+            this.state = 'drag';
+
+            startDragging(event);
+            break;
+          }
+          case 'move': {
+            if (this.state !== 'drag') {
+              this.state = 'hover';
+            }
+
+            resizeHandler(event);
+            break;
+          }
+          case 'up': {
+            this.state = 'hover';
+            stopDragging(event);
+            break;
+          }
+          case 'dblclick': {
+            doubleClickHandler(event);
+            break;
+          }
+        }
+      } else {
+        this.state = 'inactive';
+      }
+    };
+
+    registerResizeHandle(
+      this.id,
+      this.element.children[0]! as HTMLElement,
+      this.args.orientation,
+      {
+        coarse: 15,
+        fine: 5,
+      },
+      setResizeHandlerState,
+    );
   }
 
-  @action registerHandle() {
-    this.args.registerHandle(this);
+  get id() {
+    return this._id;
+  }
+
+  private get isHover() {
+    return this.state !== 'inactive';
   }
 }
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/index.gts b/packages/boxel-ui/addon/src/components/resizable-panel-group/index.gts
index 7d4ba04213..429aad1ba6 100644
--- a/packages/boxel-ui/addon/src/components/resizable-panel-group/index.gts
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/index.gts
@@ -1,10 +1,7 @@
-import { registerDestructor } from '@ember/destroyable';
 import { action } from '@ember/object';
-import { next } from '@ember/runloop';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import type { WithBoundArgs } from '@glint/template';
-import didResizeModifier from 'ember-resize-modifier/modifiers/did-resize';
 import { TrackedArray } from 'tracked-built-ins';
 
 import ResizeHandle from './handle.gts';
@@ -13,184 +10,162 @@ import ResizablePanel from './panel.gts';
 export { default as ResizeHandle } from './handle.gts';
 export { default as ResizablePanel } from './panel.gts';
 
+import { guidFor } from '@ember/object/internals';
+import { scheduleOnce } from '@ember/runloop';
+import { htmlSafe } from '@ember/template';
 import { buildWaiter } from '@ember/test-waiters';
+import { modifier } from 'ember-modifier';
+
+import { adjustLayoutByDelta } from './utils/adjust-layout-by-delta.ts';
+import { calculateDeltaPercentage } from './utils/calculate-delta-percentage.ts';
+import { calculateUnsafeDefaultLayout } from './utils/calculate-unsafe-default-layout.ts';
+import { compareLayouts } from './utils/compare-layouts.ts';
+import { PRECISION } from './utils/const.ts';
+import { determinePivotIndices } from './utils/determine-pivot-indices.ts';
+import { getResizeEventCursorPosition } from './utils/get-resize-event-cursor-position.ts';
+import {
+  type DragState,
+  type Orientation,
+  type ResizeEvent,
+} from './utils/types.ts';
+import { validatePanelGroupLayout } from './utils/validate-panel-group-layout.ts';
 
 let waiter = buildWaiter('resizable-panel-group');
 
-function sumArray(array: number[]) {
-  return array.reduce((partialSum, a) => partialSum + a, 0);
-}
-
 interface Signature {
   Args: {
-    onPanelChange?: (panels: ResizablePanel[]) => void;
-    orientation: 'horizontal' | 'vertical';
+    onLayoutChange?: (layout: number[]) => void;
+    orientation: Orientation;
     reverseCollapse?: boolean;
   };
   Blocks: {
     default: [
       WithBoundArgs<
         typeof ResizablePanel,
-        'orientation' | 'registerPanel' | 'unregisterPanel'
+        'groupId' | 'orientation' | 'registerPanel' | 'unregisterPanel'
       >,
       WithBoundArgs<
         typeof ResizeHandle,
-        | 'hide'
-        | 'onMouseDown'
-        | 'onDoubleClick'
-        | 'orientation'
-        | 'panelGroupComponent'
-        | 'registerHandle'
-        | 'unregisterHandle'
-        | 'reverseArrow'
+        'groupId' | 'orientation' | 'registerResizeHandle'
       >,
     ];
   };
   Element: HTMLDivElement;
 }
 
+let managePanelsChanged = modifier(
+  (element, [panelGroup]: [ResizablePanelGroup]) => {
+    if (!panelGroup.element) {
+      waiter.endAsync(panelGroup.initializationWaiter);
+    }
+    panelGroup.element = element as HTMLDivElement;
+
+    scheduleOnce(
+      'afterRender',
+      panelGroup,
+      panelGroup.calculateLayoutWhenPanelsChanged,
+    );
+    let observer = new MutationObserver((mutations) => {
+      for (let mutation of mutations) {
+        if (mutation.type === 'childList') {
+          panelGroup.calculateLayoutWhenPanelsChanged();
+        }
+      }
+    });
+    observer.observe(panelGroup.element, {
+      childList: true,
+      subtree: false,
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  },
+);
+
 export default class ResizablePanelGroup extends Component<Signature> {
   <template>
     <div
       class='boxel-panel-group {{@orientation}}'
-      {{didResizeModifier this.onContainerResize}}
+      data-boxel-panel-group
+      data-boxel-panel-group-id={{this.id}}
+      {{managePanelsChanged this}}
       ...attributes
     >
-      {{#if this.panelGroupElement}}
-        {{yield
-          (component
-            ResizablePanel
-            orientation=@orientation
-            registerPanel=this.registerPanel
-            unregisterPanel=this.unregisterPanel
-          )
-          (component
-            ResizeHandle
-            orientation=@orientation
-            registerHandle=this.registerHandle
-            unregisterHandle=this.unregisterHandle
-            onMouseDown=this.onHandleMouseDown
-            onDoubleClick=this.onHandleDoubleClick
-            reverseArrow=this.reverseCollapse
-            hide=this.hideHandles
-            panelGroupComponent=this
-          )
-        }}
-      {{/if}}
+      {{yield
+        (component
+          ResizablePanel
+          groupId=this.id
+          orientation=@orientation
+          registerPanel=this.registerPanel
+          unregisterPanel=this.unregisterPanel
+        )
+        (component
+          ResizeHandle
+          groupId=this.id
+          orientation=@orientation
+          registerResizeHandle=this.registerResizeHandle
+        )
+      }}
     </div>
     <style scoped>
       .boxel-panel-group {
         display: flex;
-        flex-shrink: 0;
         height: 100%;
+        width: 100%;
+        overflow: 'hidden';
       }
-
-      .horizontal {
-        flex-direction: row;
-      }
-
       .vertical {
         flex-direction: column;
       }
+      .horizontal {
+        flex-direction: row;
+      }
     </style>
   </template>
 
-  @tracked private panelGroupElement: HTMLDivElement | undefined;
+  private id = guidFor(this);
+  element!: HTMLDivElement;
 
+  private layout: TrackedArray<number> = new TrackedArray();
+  private panels: ResizablePanel[] = [];
+  private panelsChanged = false;
+  private panelSizeBeforeCollapse: Map<string, number> = new Map();
+
+  @tracked private dragState: DragState | null = null;
   @tracked hideHandles = false;
   minimumLengthToShowHandles = 30;
 
-  resizablePanelIdCache = new WeakMap<ResizablePanel, number>();
-  panels = new TrackedArray<ResizablePanel>();
-  resizeHandles = new TrackedArray<ResizeHandle>();
-
-  private initializationWaiter = waiter.beginAsync();
-
-  currentResizeHandle: {
-    handle: ResizeHandle;
-    initialPosition: number;
-    nextPanel?: ResizablePanel | null;
-    prevPanel?: ResizablePanel | null;
-  } | null = null;
-
-  constructor(args: any, owner: any) {
-    super(args, owner);
-
-    document.addEventListener('mouseup', this.onResizeHandleMouseUp);
-    document.addEventListener('mousemove', this.onResizeHandleMouseMove);
-
-    registerDestructor(this, () => {
-      document.removeEventListener('mouseup', this.onResizeHandleMouseUp);
-      document.removeEventListener('mousedown', this.onResizeHandleMouseMove);
-    });
-  }
-
-  private get reverseCollapse() {
-    return this.args.reverseCollapse ?? false;
-  }
-
-  private get isHorizontal() {
-    return this.args.orientation === 'horizontal';
-  }
-
-  private get clientPositionProperty() {
-    return this.isHorizontal ? 'clientX' : 'clientY';
-  }
-
-  private get clientLengthProperty() {
-    return this.isHorizontal ? 'clientWidth' : 'clientHeight';
-  }
-
-  private get offsetLengthProperty() {
-    return this.isHorizontal ? 'offsetWidth' : 'offsetHeight';
-  }
-
-  private get perpendicularLengthProperty() {
-    return this.isHorizontal ? 'clientHeight' : 'clientWidth';
-  }
-
-  private get panelGroupLengthPx() {
-    return this.panelGroupElement?.[this.offsetLengthProperty];
-  }
-
-  private get panelGroupLengthWithoutResizeHandlePx() {
-    let totalResizeHandleLength = this.resizeHandles.reduce(
-      (prevValue, handle) => {
-        return prevValue + handle.element[this.offsetLengthProperty];
-      },
-      0,
-    );
-    let panelGroupElement = this.panelGroupElement;
-    if (panelGroupElement === undefined) {
-      console.warn('Expected panelGroupElement to be defined');
-      return undefined;
-    }
-    let panelGroupLengthPx = this.panelGroupLengthPx;
-    if (panelGroupLengthPx === undefined) {
-      console.warn('Expected panelGroupLengthPx to be defined');
-      return undefined;
-    }
-
-    return panelGroupLengthPx - totalResizeHandleLength;
-  }
+  initializationWaiter = waiter.beginAsync();
 
   @action
   registerPanel(panel: ResizablePanel) {
-    if (panel.lengthPx === undefined) {
-      if (
-        this.panelGroupLengthPx === undefined ||
-        panel.defaultLengthFraction === undefined
-      ) {
-        panel.lengthPx = -1;
-      } else if (panel.isHidden) {
-        panel.lengthPx = 0;
+    this.panels.push(panel);
+    this.panelsChanged = true;
+
+    return () => {
+      let flexGrow;
+      let size = this.layout[this.panels.indexOf(panel)];
+      if (size == null) {
+        // Initial render (before panels have registered themselves)
+        // In order to support server rendering, fall back to default size if provided
+        flexGrow =
+          panel.constraints.defaultSize != undefined
+            ? panel.constraints.defaultSize.toPrecision(PRECISION)
+            : '1';
+      } else if (this.panels.length === 1) {
+        // Special case: Single panel group should always fill full width/height
+        flexGrow = '1';
       } else {
-        panel.lengthPx = panel.defaultLengthFraction * this.panelGroupLengthPx;
+        flexGrow = size.toPrecision(PRECISION);
       }
-    }
 
-    this.panels.push(panel);
-    this.calculatePanelRatio();
+      return htmlSafe(
+        `flex: 0; flex-grow: ${flexGrow}; flex-shrink: 1; overflow: hidden; pointer-events: ${
+          this.dragState !== null ? 'none' : undefined
+        };`,
+      );
+    };
   }
 
   @action
@@ -199,422 +174,168 @@ export default class ResizablePanelGroup extends Component<Signature> {
 
     if (panelIndex > -1) {
       this.panels.splice(panelIndex, 1);
-      this.calculatePanelRatio();
-    }
-  }
-
-  calculatePanelRatio() {
-    let panelLengths = this.panels.map((panel) => panel.lengthPx ?? 0);
-    let totalPanelLength = sumArray(panelLengths);
-
-    for (let index = 0; index < panelLengths.length; index++) {
-      let panelLength = panelLengths[index];
-      let panel = this.panels[index];
-      if (panelLength == undefined || !panel) {
-        break;
-      }
-      panel.ratio = panelLength / totalPanelLength;
-    }
-  }
-
-  @action
-  registerHandle(handle: ResizeHandle) {
-    this.resizeHandles.push(handle);
-  }
-
-  @action
-  unregisterHandle(handle: ResizeHandle) {
-    let handleIndex = this.resizeHandles.indexOf(handle);
-    if (handleIndex > -1) {
-      this.resizeHandles.splice(handleIndex, 1);
+      this.panelsChanged = true;
     }
   }
 
   @action
-  onHandleMouseDown(event: MouseEvent) {
-    let button = event.target as HTMLElement;
-
-    let handle = this.resizeHandles.find(
-      (handle) => handle.element === button.parentNode,
-    );
-
-    if (this.currentResizeHandle || !handle) {
-      return;
-    }
-
-    let { prevPanel, nextPanel } = this.findPanelsByResizeHandle(handle);
-    if (!prevPanel || !nextPanel) {
-      console.warn('prevPanelEl and nextPanelEl are required on drag');
-      return undefined;
-    }
-    this.currentResizeHandle = {
-      handle,
-      initialPosition: event[this.clientPositionProperty],
-      prevPanel: prevPanel,
-      nextPanel: nextPanel,
-    };
-  }
-
-  @action
-  onResizeHandleMouseUp(_event: MouseEvent) {
-    this.currentResizeHandle = null;
-  }
-
-  @action
-  onResizeHandleMouseMove(event: MouseEvent) {
-    if (
-      !this.currentResizeHandle ||
-      !this.currentResizeHandle.prevPanel ||
-      !this.currentResizeHandle.nextPanel
-    ) {
-      return;
-    }
-
-    if (!this.isCursorInTheRightPlace(event)) {
-      let resizeHandleRect =
-        this.currentResizeHandle.handle.element.getBoundingClientRect();
-      this.currentResizeHandle.initialPosition = Math.round(
-        (resizeHandleRect.left + resizeHandleRect.right) / 2,
-      );
-      return;
-    }
-
-    let delta =
-      event[this.clientPositionProperty] -
-      this.currentResizeHandle.initialPosition;
-    if (delta === 0) {
-      return;
-    }
-
-    let newPrevPanelElLength =
-      this.currentResizeHandle.prevPanel.element[this.clientLengthProperty] +
-      delta;
-    let newNextPanelElLength =
-      this.currentResizeHandle.nextPanel.element[this.clientLengthProperty] -
-      delta;
-    let prevPanel = this.currentResizeHandle.prevPanel;
-    let nextPanel = this.currentResizeHandle.nextPanel;
-
-    if (!prevPanel || !nextPanel) {
-      console.warn(
-        'Expected prevPanel && nextPanel to be defined when dragging handle',
-      );
-      return;
-    }
-
-    if (newPrevPanelElLength < 0 && newNextPanelElLength > 0) {
-      newNextPanelElLength = newNextPanelElLength + newPrevPanelElLength;
-      newPrevPanelElLength = 0;
-    } else if (newPrevPanelElLength > 0 && newNextPanelElLength < 0) {
-      newPrevPanelElLength = newPrevPanelElLength + newNextPanelElLength;
-      newNextPanelElLength = 0;
-    } else if (
-      prevPanel.initialMinLengthPx &&
-      newPrevPanelElLength < prevPanel.initialMinLengthPx &&
-      newPrevPanelElLength > (prevPanel.lengthPx || 0)
-    ) {
-      newNextPanelElLength =
-        newNextPanelElLength -
-        (prevPanel.initialMinLengthPx - newPrevPanelElLength);
-      newPrevPanelElLength = prevPanel.initialMinLengthPx;
-    } else if (
-      nextPanel.initialMinLengthPx &&
-      newNextPanelElLength < nextPanel.initialMinLengthPx &&
-      newNextPanelElLength > (nextPanel.lengthPx || 0)
-    ) {
-      newPrevPanelElLength =
-        newPrevPanelElLength +
-        (nextPanel.initialMinLengthPx - newNextPanelElLength);
-      newNextPanelElLength = nextPanel.initialMinLengthPx;
-    } else if (
-      prevPanel.initialMinLengthPx &&
-      newPrevPanelElLength < prevPanel.initialMinLengthPx &&
-      newPrevPanelElLength < (prevPanel.lengthPx || 0)
-    ) {
-      newNextPanelElLength = newNextPanelElLength + newPrevPanelElLength;
-      newPrevPanelElLength = 0;
-    } else if (
-      nextPanel.initialMinLengthPx &&
-      newNextPanelElLength < nextPanel.initialMinLengthPx &&
-      newNextPanelElLength < (nextPanel.lengthPx || 0)
-    ) {
-      newPrevPanelElLength = newPrevPanelElLength + newNextPanelElLength;
-      newNextPanelElLength = 0;
-    }
-
-    this.setSiblingPanelLengths(
-      prevPanel,
-      nextPanel,
-      newPrevPanelElLength,
-      newNextPanelElLength,
-      (prevPanel.initialMinLengthPx &&
-        newPrevPanelElLength >= prevPanel.initialMinLengthPx) ||
-        !prevPanel.collapsible
-        ? prevPanel.initialMinLengthPx
-        : 0,
-      (nextPanel.initialMinLengthPx &&
-        newNextPanelElLength >= nextPanel.initialMinLengthPx) ||
-        !nextPanel.collapsible
-        ? nextPanel.initialMinLengthPx
-        : 0,
-    );
-
-    this.currentResizeHandle.initialPosition =
-      event[this.clientPositionProperty];
-
-    this.calculatePanelRatio();
-  }
-
-  // This event only applies to the first and last resize handler.
-  // When triggered, it will close either the first or last panel.
-  // In this scenario, the minimum length of the panel will be disregarded.
-  @action
-  onHandleDoubleClick(event: MouseEvent) {
-    let handleElement = event.target as HTMLElement;
-    let handle = this.resizeHandles.find(
-      (handle) => handle.element === handleElement.parentNode,
-    );
-
-    if (!handle) {
-      console.warn('Could not find handle');
-      return;
-    }
-
-    let isFirstButton = this.resizeHandles.indexOf(handle) === 0;
-    let isLastButton =
-      this.resizeHandles.indexOf(handle) === this.resizeHandles.length - 1;
-
-    let panelGroupLengthPx = this.panelGroupLengthWithoutResizeHandlePx;
-    if (panelGroupLengthPx === undefined) {
-      console.warn('Expected panelGroupLengthPx to be defined');
-      return undefined;
-    }
-
-    let { prevPanel, nextPanel } = this.findPanelsByResizeHandle(handle);
-    if (!prevPanel || !nextPanel) {
-      console.warn('prevPanel and nextPanel are required on double-click');
-      return undefined;
-    }
-
-    let prevPanelElLength = prevPanel.lengthPx || 0;
-    let nextPanelElLength = nextPanel.lengthPx || 0;
-
-    if (
-      isFirstButton &&
-      prevPanelElLength > 0 &&
-      !this.args.reverseCollapse &&
-      prevPanel.collapsible
-    ) {
-      this.setSiblingPanelLengths(
-        prevPanel,
-        nextPanel,
-        0,
-        prevPanelElLength + nextPanelElLength,
-        0,
-        nextPanel.initialMinLengthPx,
-      );
-    } else if (isFirstButton && prevPanelElLength <= 0) {
-      this.setSiblingPanelLengths(
-        prevPanel,
-        nextPanel,
-        prevPanel.defaultLengthFraction
-          ? panelGroupLengthPx * prevPanel.defaultLengthFraction
-          : prevPanel.lengthPx || 0,
-        prevPanel.defaultLengthFraction
-          ? nextPanelElLength -
-              panelGroupLengthPx * prevPanel.defaultLengthFraction
-          : panelGroupLengthPx - nextPanelElLength,
-        prevPanel.initialMinLengthPx,
-        nextPanel.initialMinLengthPx,
-      );
-    } else if (isLastButton && nextPanelElLength > 0 && nextPanel.collapsible) {
-      this.setSiblingPanelLengths(
-        prevPanel,
-        nextPanel,
-        prevPanelElLength + nextPanelElLength,
-        0,
-        prevPanel.initialMinLengthPx,
-        0,
-      );
-    } else if (isLastButton && nextPanelElLength <= 0) {
-      this.setSiblingPanelLengths(
-        prevPanel,
-        nextPanel,
-        nextPanel.defaultLengthFraction
-          ? prevPanelElLength -
-              panelGroupLengthPx * nextPanel.defaultLengthFraction
-          : panelGroupLengthPx - prevPanelElLength,
-        nextPanel.defaultLengthFraction
-          ? panelGroupLengthPx * nextPanel.defaultLengthFraction
-          : nextPanel.lengthPx || 0,
-        prevPanel.initialMinLengthPx,
-        nextPanel.initialMinLengthPx,
-      );
-    }
-
-    this.calculatePanelRatio();
-  }
-
-  @action
-  setSiblingPanelLengths(
-    prevPanel: ResizablePanel,
-    nextPanel: ResizablePanel,
-    newPrevLength: number,
-    newNextLength: number,
-    newPrevMinLength?: number,
-    newNextMinLength?: number,
-  ) {
-    if (prevPanel) {
-      prevPanel.lengthPx = newPrevLength;
-      prevPanel.minLengthPx = newPrevMinLength;
-    }
-
-    if (nextPanel) {
-      nextPanel.lengthPx = newNextLength;
-      nextPanel.minLengthPx = newNextMinLength;
-    }
-
-    this.args.onPanelChange?.(this.panels);
-  }
-
-  @action
-  onContainerResize(entry?: ResizeObserverEntry, observer?: ResizeObserver) {
-    if (!this.panelGroupElement) {
-      if (entry) {
-        waiter.endAsync(this.initializationWaiter);
-        this.panelGroupElement = entry.target as HTMLDivElement;
-        next(this, this.onContainerResize, entry, observer);
-      }
-      return;
-    }
-
-    this.hideHandles =
-      this.panelGroupElement[this.perpendicularLengthProperty] <
-      this.minimumLengthToShowHandles;
-
-    let panelLengths: number[] = this.panels.map(
-      (panel) => panel.lengthPx || 0,
-    );
-    let panelToNewLength = new Map<ResizablePanel, number>();
+  registerResizeHandle(handle: ResizeHandle) {
+    return {
+      startDragging: (event: ResizeEvent) => {
+        if (!this.element) {
+          return;
+        }
+        let dragHandleId = handle.id;
+        const initialCursorPosition = getResizeEventCursorPosition(
+          this.args.orientation,
+          event,
+        );
 
-    let newContainerSize = this.panelGroupLengthWithoutResizeHandlePx;
+        this.dragState = {
+          dragHandleId,
+          dragHandleRect: handle.element.getBoundingClientRect(),
+          initialCursorPosition,
+          initialLayout: [...this.layout],
+        };
+      },
+      stopDragging: () => {
+        this.dragState = null;
+      },
+      resizeHandler: (event: ResizeEvent) => {
+        event.preventDefault();
+        let panelGroupElement = this.element;
+        if (!panelGroupElement || !this.dragState) {
+          return;
+        }
 
-    if (newContainerSize == undefined) {
-      console.warn('Expected newContainerSize to be defined');
-      return;
-    }
+        let { initialLayout } = this.dragState;
 
-    let remainingContainerSize = newContainerSize;
-    let calculateLengthsOfPanelsWithMinLength = () => {
-      let panels = this.panels.filter((panel) => panel.initialMinLengthPx);
+        const pivotIndices = determinePivotIndices(
+          this.id,
+          handle.id,
+          panelGroupElement,
+        );
 
-      panels.forEach((panel, index) => {
-        let panelRatio = panel.ratio;
+        let delta = calculateDeltaPercentage(
+          event,
+          handle.id,
+          this.args.orientation,
+          this.dragState,
+          panelGroupElement,
+        );
 
-        if (!panelRatio || !newContainerSize) {
+        const panelConstraints = this.panels.map((panel) => panel.constraints);
+        const prevLayout = [...this.layout];
+        const nextLayout = adjustLayoutByDelta({
+          delta,
+          initialLayout: initialLayout ?? prevLayout,
+          panelConstraints,
+          pivotIndices,
+          prevLayout,
+        });
+        const layoutChanged = !compareLayouts(prevLayout, nextLayout);
+        if (layoutChanged) {
+          this.updateLayout(nextLayout);
+        }
+      },
+      // Double-click only works if the panel is either the first or last panel and is collapsible.
+      doubleClickHandler: (event: ResizeEvent) => {
+        event.preventDefault();
+        let panelGroupElement = this.element;
+        if (!panelGroupElement) {
           return;
         }
-        let proportionalSize = panelRatio * newContainerSize;
-
-        let actualSize = Math.round(
-          panel?.initialMinLengthPx
-            ? Math.max(proportionalSize, panel.initialMinLengthPx)
-            : proportionalSize,
+        const pivotIndices = determinePivotIndices(
+          this.id,
+          handle.id,
+          panelGroupElement,
         );
-        panelLengths[index] = actualSize;
-        panelToNewLength.set(panel, actualSize);
-        remainingContainerSize = remainingContainerSize - actualSize;
-      });
-    };
-
-    calculateLengthsOfPanelsWithMinLength();
-
-    let calculateLengthsOfPanelsWithoutMinLength = () => {
-      let panels = this.panels.filter((panel) => !panel.initialMinLengthPx);
 
-      let newPanelRatios = panels.map((panel) => panel.ratio ?? 0);
-      let totalNewPanelRatio = newPanelRatios.reduce(
-        (prevValue, currentValue) => prevValue + currentValue,
-        0,
-      );
-      newPanelRatios = newPanelRatios.map(
-        (panelRatio) => panelRatio / totalNewPanelRatio,
-      );
-
-      panels.forEach((panel, index) => {
-        let panelRatio = newPanelRatios[index];
-        if (!panelRatio) {
-          console.warn('Expected panelRatio to be defined');
+        if (
+          pivotIndices[0] !== 0 &&
+          pivotIndices[1] !== this.panels.length - 1
+        ) {
           return;
         }
-        let proportionalSize = panelRatio * remainingContainerSize;
-        let actualSize = Math.round(proportionalSize);
-
-        panelLengths[index] = actualSize;
-        panelToNewLength.set(panel, actualSize);
-      });
-    };
-    calculateLengthsOfPanelsWithoutMinLength();
-
-    this.panels.forEach((panel) => {
-      panel.lengthPx = panelToNewLength.get(panel) ?? 0;
-    });
-  }
 
-  private findPanelsByResizeHandle(handle: ResizeHandle) {
-    let handleIndex = this.resizeHandles.indexOf(handle);
-    if (handleIndex === -1) {
-      return {
-        prevPanel: undefined,
-        nextPanel: undefined,
-      };
-    }
+        let isFirstElement =
+          pivotIndices[0] === 0 &&
+          !(
+            this.args.reverseCollapse &&
+            pivotIndices[1] === this.panels.length - 1
+          );
+        let panel = isFirstElement
+          ? this.panels[0]
+          : this.panels[this.panels.length - 1];
+        let panelSize = isFirstElement
+          ? this.layout[0]
+          : this.layout[this.panels.length - 1];
+        if (!panel || panelSize == null) {
+          throw new Error('panel or panelSize is not found');
+        }
 
-    let prevPanel = this.panels[handleIndex];
-    let nextPanel = this.panels[handleIndex + 1];
+        let delta;
+        if (panelSize <= 0) {
+          let panelSizeBeforeCollapse = this.panelSizeBeforeCollapse.get(
+            panel.id,
+          );
+          if (panelSizeBeforeCollapse == null) {
+            throw new Error(
+              `panelSizeBeforeCollapse is not found for panel with id = ${panel.id}`,
+            );
+          }
+          delta = isFirstElement
+            ? panelSizeBeforeCollapse
+            : 0 - panelSizeBeforeCollapse;
+        } else {
+          delta = isFirstElement ? 0 - panelSize : panelSize;
+        }
 
-    return {
-      prevPanel,
-      nextPanel,
+        const panelConstraints = this.panels.map((panel) => panel.constraints);
+        const prevLayout = [...this.layout];
+        const nextLayout = adjustLayoutByDelta({
+          delta,
+          initialLayout: prevLayout,
+          panelConstraints,
+          pivotIndices,
+          prevLayout,
+        });
+        const layoutChanged = !compareLayouts(prevLayout, nextLayout);
+        if (layoutChanged) {
+          this.panelSizeBeforeCollapse.set(panel.id, panelSize);
+          this.updateLayout(nextLayout);
+        }
+      },
     };
   }
 
-  private isCursorInTheRightPlace(event: MouseEvent): boolean {
-    let { currentResizeHandle } = this;
-    if (!currentResizeHandle) {
-      return true;
-    }
-
-    let { handle, prevPanel, nextPanel } = currentResizeHandle;
-    if (!handle || !prevPanel || !nextPanel) {
-      return true;
+  @action
+  calculateLayoutWhenPanelsChanged() {
+    if (!this.panelsChanged) {
+      return;
     }
+    this.panelsChanged = false;
+    let prevLayout = [...this.layout];
+    let unsafeLayout = calculateUnsafeDefaultLayout({
+      panels: this.panels,
+    });
+    // Validate even saved layouts in case something has changed since last render
+    // e.g. for pixel groups, this could be the size of the window
+    const nextLayout = validatePanelGroupLayout({
+      layout: unsafeLayout,
+      panelConstraints: this.panels.map((panel) => panel.constraints),
+    });
 
-    let resizeHandleRect = handle.element.getBoundingClientRect();
-    let rightCursorPosition = this.isHorizontal
-      ? (resizeHandleRect.left + resizeHandleRect.right) / 2
-      : (resizeHandleRect.top + resizeHandleRect.bottom) / 2;
-
-    let isCursorLeftOfHandle =
-      event[this.clientPositionProperty] <= Math.ceil(rightCursorPosition);
-    let isCursorRightOfHandle =
-      event[this.clientPositionProperty] >= Math.round(rightCursorPosition);
-
-    let isPrevPanelAtMinLength =
-      !prevPanel.collapsible &&
-      prevPanel.initialMinLengthPx === prevPanel.lengthPx;
-    let isNextPanelAtMinLength =
-      !nextPanel.collapsible &&
-      nextPanel.initialMinLengthPx === nextPanel.lengthPx;
-
-    if (isPrevPanelAtMinLength && isCursorLeftOfHandle) {
-      return false;
+    if (!compareLayouts(prevLayout, nextLayout)) {
+      this.updateLayout(nextLayout);
     }
+  }
 
-    if (isNextPanelAtMinLength && isCursorRightOfHandle) {
-      return false;
-    }
+  @action
+  updateLayout(nextLayout: number[]) {
+    this.layout.splice(0, this.layout.length);
+    nextLayout.forEach((layout) => this.layout.push(layout));
 
-    return true;
+    this.args.onLayoutChange?.(this.layout);
   }
 }
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 5da5106bd6..0c9e42790f 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
@@ -1,23 +1,26 @@
-import { registerDestructor } from '@ember/destroyable';
 import { action } from '@ember/object';
-import { scheduleOnce } from '@ember/runloop';
+import { guidFor } from '@ember/object/internals';
 import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { modifier } from 'ember-modifier';
 
-import cssVars from '../../helpers/css-var.ts';
-import { eq } from '../../helpers/truth-helpers.ts';
+import {
+  type GetPanelStyle,
+  type Orientation,
+  type ResizablePanelConstraints,
+} from './utils/types.ts';
 
 interface Signature {
   Args: {
-    collapsible?: boolean; //default true
-    defaultLengthFraction: number;
-    isHidden?: boolean; //default false
-    lengthPx?: number;
-    minLengthPx?: number;
-    orientation: 'horizontal' | 'vertical';
-    registerPanel: (panel: Panel) => void;
+    collapsible?: boolean | undefined;
+    defaultSize?: number | undefined;
+    groupId: string;
+    maxSize?: number | undefined;
+    //In percentage
+    minSize?: number | undefined;
+    orientation: Orientation;
+    registerPanel: (panel: Panel) => GetPanelStyle;
     unregisterPanel: (panel: Panel) => void;
   };
   Blocks: {
@@ -28,82 +31,33 @@ interface Signature {
 
 let managePanelRegistration = modifier((element, [panel]: [Panel]) => {
   panel.element = element as HTMLDivElement;
-  scheduleOnce('afterRender', panel, panel.registerPanel);
+  panel.registerPanel();
+  return () => {
+    panel.unregisterPanel();
+  };
 });
 
 export default class Panel extends Component<Signature> {
   <template>
     <div
-      class='boxel-panel {{@orientation}}'
-      style={{if
-        (eq @orientation 'horizontal')
-        (cssVars
-          boxel-panel-width=this.lengthCssValue
-          boxel-panel-min-width=this.minLengthCssValue
-        )
-        (cssVars
-          boxel-panel-height=this.lengthCssValue
-          boxel-panel-min-height=this.minLengthCssValue
-        )
-      }}
+      class='boxel-panel'
+      style={{(this.getStyle)}}
+      data-boxel-panel-group-id={{@groupId}}
+      data-boxel-panel-id={{this.id}}
       {{managePanelRegistration this}}
       ...attributes
     >
       {{yield}}
     </div>
-    <style scoped>
-      .boxel-panel {
-        --resizable-panel-length: '300px;';
-      }
-
-      .boxel-panel.horizontal {
-        --boxel-panel-width: var(--resizable-panel-length);
-        --boxel-panel-min-width: 'none';
-
-        width: var(--boxel-panel-width);
-        min-width: var(--boxel-panel-min-width);
-      }
-
-      .boxel-panel.vertical {
-        --boxel-panel-height: var(--resizable-panel-length);
-        --boxel-panel-min-height: 'none';
-
-        height: var(--boxel-panel-height);
-        min-height: var(--boxel-panel-min-height);
-      }
-    </style>
   </template>
 
   element!: HTMLDivElement;
-
-  @tracked lengthPx: number | undefined = 0;
-  @tracked minLengthPx: number | undefined = 0;
-  @tracked ratio: number | undefined;
-  initialMinLengthPx: number;
-
-  @tracked collapsible: boolean;
-
-  constructor(owner: any, args: Signature['Args']) {
-    super(owner, args);
-    this.lengthPx = args.lengthPx;
-    this.minLengthPx = args.minLengthPx || 0;
-    this.collapsible = args.collapsible ?? true;
-    this.initialMinLengthPx = this.args.minLengthPx || 0;
-
-    registerDestructor(this, this.unregisterPanel);
-  }
-
-  get isHidden() {
-    return this.args.isHidden;
-  }
-
-  get defaultLengthFraction() {
-    return this.args.defaultLengthFraction;
-  }
+  @tracked private getStyle: GetPanelStyle = () => htmlSafe('');
+  private _id = guidFor(this);
 
   @action
   registerPanel() {
-    this.args.registerPanel(this);
+    this.getStyle = this.args.registerPanel(this);
   }
 
   @action
@@ -111,28 +65,17 @@ export default class Panel extends Component<Signature> {
     this.args.unregisterPanel(this);
   }
 
-  get minLengthCssValue() {
-    if (this.args.isHidden) {
-      return htmlSafe('0px');
-    } else if (this.minLengthPx !== undefined) {
-      return htmlSafe(`${this.minLengthPx}px`);
-    } else if (this.args.minLengthPx !== undefined) {
-      return htmlSafe(`${this.args.minLengthPx}px`);
-    }
-    return undefined;
+  get constraints(): ResizablePanelConstraints {
+    return {
+      collapsible:
+        this.args.collapsible == undefined ? true : this.args.collapsible,
+      defaultSize: this.args.defaultSize,
+      minSize: this.args.minSize,
+      maxSize: this.args.maxSize,
+    };
   }
 
-  get lengthCssValue() {
-    let lengthPx = this.lengthPx;
-    let defaultLengthFraction = this.args.defaultLengthFraction;
-
-    if (this.args.isHidden) {
-      return htmlSafe('0px');
-    } else if (lengthPx === -1 && defaultLengthFraction) {
-      return htmlSafe(`${defaultLengthFraction * 100}%`);
-    } else if (lengthPx !== -1 && lengthPx !== undefined) {
-      return htmlSafe(`${lengthPx}px`);
-    }
-    return undefined;
+  get id() {
+    return this._id;
   }
 }
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/usage.gts b/packages/boxel-ui/addon/src/components/resizable-panel-group/usage.gts
index b8d861178d..8da3be9406 100644
--- a/packages/boxel-ui/addon/src/components/resizable-panel-group/usage.gts
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/usage.gts
@@ -7,27 +7,38 @@ import {
   cssVariable,
 } from 'ember-freestyle/decorators/css-variable';
 
+import { not } from '../../helpers.ts';
 import cssVar from '../../helpers/css-var.ts';
 import ResizablePanelGroup from './index.gts';
 
 export default class ResizablePanelUsage extends Component {
-  @tracked horizontalPanel1DefaultWidthFraction = 0.25;
-  @tracked horizontalPanel1MinWidthPx = undefined;
+  @tracked horizontalPanel1DefaultSize = 25;
+  @tracked horizontalPanel1MinSize = undefined;
+  @tracked horizontalPanel1MaxSize = undefined;
+  @tracked horizontalPanel1Collapsible = true;
 
-  @tracked horizontalPanel2DefaultWidthFraction = 0.5;
-  @tracked horizontalPanel2MinWidthPx = undefined;
+  @tracked horizontalPanel2DefaultSize = 50;
+  @tracked horizontalPanel2MinSize = undefined;
+  @tracked horizontalPanel2MaxSize = undefined;
+  @tracked horizontalPanel2Collapsible = true;
 
-  @tracked horizontalPanel3DefaultWidthFraction = 0.25;
-  @tracked horizontalPanel3MinWidthPx = undefined;
+  @tracked horizontalPanel3DefaultSize = 25;
+  @tracked horizontalPanel3MinSize = undefined;
+  @tracked horizontalPanel3MaxSize = undefined;
+  @tracked horizontalPanel3Collapsible = true;
   @tracked horizontalPanel3IsHidden = false;
 
   @tracked verticalReverseCollapse = true;
 
-  @tracked verticalPanel1DefaultHeightFraction = 0.33;
-  @tracked verticalPanel1MinHeightPx = undefined;
+  @tracked verticalPanel1DefaultSize = 33;
+  @tracked verticalPanel1MinSize = undefined;
+  @tracked verticalPanel1MaxSize = undefined;
+  @tracked verticalPanel1Collapsible = true;
 
-  @tracked verticalPanel2DefaultHeightFraction = 0.67;
-  @tracked verticalPanel2MinHeightPx = undefined;
+  @tracked verticalPanel2DefaultSize = 67;
+  @tracked verticalPanel2MinSize = undefined;
+  @tracked verticalPanel2MaxSize = undefined;
+  @tracked verticalPanel2Collapsible = true;
 
   cssClassName = 'boxel-panel';
   @cssVariable declare boxelPanelResizeHandleHeight: CSSVariableInfo;
@@ -49,69 +60,118 @@ export default class ResizablePanelUsage extends Component {
           as |ResizablePanel ResizeHandle|
         >
           <ResizablePanel
-            @defaultLengthFraction={{this.horizontalPanel1DefaultWidthFraction}}
-            @minLengthPx={{this.horizontalPanel1MinWidthPx}}
+            @defaultSize={{this.horizontalPanel1DefaultSize}}
+            @minSize={{this.horizontalPanel1MinSize}}
+            @maxSize={{this.horizontalPanel1MaxSize}}
+            @collapsible={{this.horizontalPanel1Collapsible}}
           >
             Panel 1
           </ResizablePanel>
           <ResizeHandle />
           <ResizablePanel
-            @defaultLengthFraction={{this.horizontalPanel2DefaultWidthFraction}}
-            @minLengthPx={{this.horizontalPanel2MinWidthPx}}
+            @defaultSize={{this.horizontalPanel2DefaultSize}}
+            @minSize={{this.horizontalPanel2MinSize}}
+            @maxSize={{this.horizontalPanel2MaxSize}}
+            @collapsible={{this.horizontalPanel2Collapsible}}
           >
             Panel 2
           </ResizablePanel>
-          <ResizeHandle />
-          <ResizablePanel
-            @defaultLengthFraction={{this.horizontalPanel3DefaultWidthFraction}}
-            @minLengthPx={{this.horizontalPanel3MinWidthPx}}
-            @isHidden={{this.horizontalPanel3IsHidden}}
-          >
-            Panel 3
-          </ResizablePanel>
+          {{#if (not this.horizontalPanel3IsHidden)}}
+            <ResizeHandle />
+            <ResizablePanel
+              @defaultSize={{this.horizontalPanel3DefaultSize}}
+              @minSize={{this.horizontalPanel3MinSize}}
+              @maxSize={{this.horizontalPanel3MaxSize}}
+              @collapsible={{this.horizontalPanel3Collapsible}}
+            >
+              Panel 3
+            </ResizablePanel>
+          {{/if}}
         </ResizablePanelGroup>
       </:example>
       <:api as |Args|>
         <Args.Number
-          @name='defaultWidthFraction - Panel 1'
-          @description="The default width of the panel is determined by this argument, which operates similarly to the 'width' property in CSS."
-          @value={{this.horizontalPanel1DefaultWidthFraction}}
-          @onInput={{fn (mut this.horizontalPanel1DefaultWidthFraction)}}
+          @name='defaultSize - Panel 1'
+          @description='The default width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.horizontalPanel1DefaultSize}}
+          @onInput={{fn (mut this.horizontalPanel1DefaultSize)}}
           @required={{true}}
         />
-        <Args.String
-          @name='minWidthPx - Panel 1'
-          @description="The minimum width of the panel is determined by this argument, which operates similarly to the 'min-width' property in CSS. In double-click event, this argumen will be ingored."
-          @value={{this.horizontalPanel1MinWidthPx}}
-          @onInput={{fn (mut this.horizontalPanel1MinWidthPx)}}
+        <Args.Number
+          @name='minSize - Panel 1'
+          @description='The minimum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage. In double-click event, this argumen will be ingored if the panel is collapsible.'
+          @value={{this.horizontalPanel1MinSize}}
+          @onInput={{fn (mut this.horizontalPanel1MinSize)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='maxSize - Panel 1'
+          @description='The maximum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.horizontalPanel1MaxSize}}
+          @onInput={{fn (mut this.horizontalPanel1MaxSize)}}
+          @required={{false}}
+        />
+        <Args.Bool
+          @name='collapsible - Panel 1'
+          @description='Before collapsing a panel, this argument will be checked. The default value for this argument is true. Please also define minSize if you set the value of this argument to false.'
+          @value={{this.horizontalPanel1Collapsible}}
+          @onInput={{fn (mut this.horizontalPanel1Collapsible)}}
           @required={{false}}
         />
-        <Args.String
-          @name='defaultWidthFraction - Panel 2'
-          @description="The default width of the panel is determined by this argument, which operates similarly to the 'width' property in CSS."
-          @value={{this.horizontalPanel2DefaultWidthFraction}}
-          @onInput={{fn (mut this.horizontalPanel2DefaultWidthFraction)}}
+        <Args.Number
+          @name='defaultSize - Panel 2'
+          @description='The default width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.horizontalPanel2DefaultSize}}
+          @onInput={{fn (mut this.horizontalPanel2DefaultSize)}}
           @required={{true}}
         />
-        <Args.String
-          @name='minWidthPx - Panel 2'
-          @description="The minimum width of the panel is determined by this argument, which operates similarly to the 'min-width' property in CSS. In double-click event, this argumen will be ingored."
-          @value={{this.horizontalPanel2MinWidthPx}}
-          @onInput={{fn (mut this.horizontalPanel2MinWidthPx)}}
+        <Args.Number
+          @name='minSize - Panel 2'
+          @description='The minimum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage. In double-click event, this argumen will be ingored if the panel is collapsible.'
+          @value={{this.horizontalPanel2MinSize}}
+          @onInput={{fn (mut this.horizontalPanel2MinSize)}}
           @required={{false}}
         />
-        <Args.String
-          @name='defaultWidthFraction - Panel 3'
-          @description="The default width of the panel is determined by this argument, which operates similarly to the 'width' property in CSS."
-          @value={{this.horizontalPanel3DefaultWidthFraction}}
-          @onInput={{fn (mut this.horizontalPanel3DefaultWidthFraction)}}
+        <Args.Number
+          @name='maxSize - Panel 2'
+          @description='The maximum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.horizontalPanel2MaxSize}}
+          @onInput={{fn (mut this.horizontalPanel2MaxSize)}}
+          @required={{false}}
+        />
+        <Args.Bool
+          @name='collapsible - Panel 2'
+          @description='Before collapsing a panel, this argument will be checked. The default value for this argument is true. Please also define minSize if you set the value of this argument to false.'
+          @value={{this.horizontalPanel2Collapsible}}
+          @onInput={{fn (mut this.horizontalPanel2Collapsible)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='defaultSize - Panel 3'
+          @description='The default width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.horizontalPanel3DefaultSize}}
+          @onInput={{fn (mut this.horizontalPanel3DefaultSize)}}
           @required={{true}}
         />
-        <Args.String
-          @name='minWidthPx - Panel 3'
-          @description="The minimum width of the panel is determined by this argument, which operates similarly to the 'min-width' property in CSS. In double-click event, this argumen will be ingored."
-          @value={{this.horizontalPanel3MinWidthPx}}
-          @onInput={{fn (mut this.horizontalPanel3MinWidthPx)}}
+        <Args.Number
+          @name='minSize - Panel 3'
+          @description='The minimum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage. In double-click event, this argumen will be ingored if the panel is collapsible.'
+          @value={{this.horizontalPanel3MinSize}}
+          @onInput={{fn (mut this.horizontalPanel3MinSize)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='maxSize - Panel 3'
+          @description='The maximum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.horizontalPanel3MaxSize}}
+          @onInput={{fn (mut this.horizontalPanel3MaxSize)}}
+          @required={{false}}
+        />
+        <Args.Bool
+          @name='collapsible - Panel 2'
+          @description='Before collapsing a panel, this argument will be checked. The default value for this argument is true. Please also define minSize if you set the value of this argument to false.'
+          @value={{this.horizontalPanel3Collapsible}}
+          @onInput={{fn (mut this.horizontalPanel3Collapsible)}}
           @required={{false}}
         />
         <Args.Bool
@@ -164,15 +224,19 @@ export default class ResizablePanelUsage extends Component {
             as |ResizablePanel ResizeHandle|
           >
             <ResizablePanel
-              @defaultLengthFraction={{this.verticalPanel1DefaultHeightFraction}}
-              @minLengthPx={{this.verticalPanel1MinHeightPx}}
+              @defaultSize={{this.verticalPanel1DefaultSize}}
+              @minSize={{this.verticalPanel1MinSize}}
+              @maxSize={{this.verticalPanel1MaxSize}}
+              @collapsible={{this.verticalPanel1Collapsible}}
             >
               Panel 1
             </ResizablePanel>
             <ResizeHandle />
             <ResizablePanel
-              @defaultLengthFraction={{this.verticalPanel2DefaultHeightFraction}}
-              @minLengthPx={{this.verticalPanel2MinHeightPx}}
+              @defaultSize={{this.verticalPanel2DefaultSize}}
+              @minSize={{this.verticalPanel2MinSize}}
+              @maxSize={{this.verticalPanel2MaxSize}}
+              @collapsible={{this.verticalPanel2Collapsible}}
             >
               Panel 2
             </ResizablePanel>
@@ -188,31 +252,59 @@ export default class ResizablePanelUsage extends Component {
           @onInput={{fn (mut this.verticalReverseCollapse)}}
         />
         <Args.Number
-          @name='defaultHeightFraction - Panel 1'
-          @description="The default height of the panel is determined by this argument, which operates similarly to the 'height' property in CSS."
-          @value={{this.verticalPanel1DefaultHeightFraction}}
-          @onInput={{fn (mut this.verticalPanel1DefaultHeightFraction)}}
+          @name='defaultSize - Panel 1'
+          @description='The default width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.verticalPanel1DefaultSize}}
+          @onInput={{fn (mut this.verticalPanel1DefaultSize)}}
           @required={{true}}
         />
         <Args.Number
-          @name='minHeightPx - Panel 1'
-          @description="The minimum height of the panel is determined by this argument, which operates similarly to the 'min-height' property in CSS. In double-click event, this argumen will be ingored."
-          @value={{this.verticalPanel1MinHeightPx}}
-          @onInput={{fn (mut this.verticalPanel1MinHeightPx)}}
+          @name='minSize - Panel 1'
+          @description='The minimum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage. In double-click event, this argumen will be ingored if the panel is collapsible.'
+          @value={{this.verticalPanel1MinSize}}
+          @onInput={{fn (mut this.verticalPanel1MinSize)}}
           @required={{false}}
         />
         <Args.Number
-          @name='defaultHeightFraction - Panel 2'
-          @description="The default height of the panel is determined by this argument, which operates similarly to the 'height' property in CSS."
-          @value={{this.verticalPanel2DefaultHeightFraction}}
-          @onInput={{fn (mut this.verticalPanel2DefaultHeightFraction)}}
+          @name='maxSize - Panel 1'
+          @description='The maximum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.verticalPanel1MaxSize}}
+          @onInput={{fn (mut this.verticalPanel1MaxSize)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='collapsible - Panel 1'
+          @description='Before collapsing a panel, this argument will be checked. The default value for this argument is true. Please also define minSize if you set the value of this argument to false.'
+          @value={{this.verticalPanel1Collapsible}}
+          @onInput={{fn (mut this.verticalPanel1Collapsible)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='defaultSize - Panel 2'
+          @description='The default width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.verticalPanel2DefaultSize}}
+          @onInput={{fn (mut this.verticalPanel2DefaultSize)}}
           @required={{true}}
         />
         <Args.Number
-          @name='minHeightPx - Panel 2'
-          @description="The minimum height of the panel is determined by this argument, which operates similarly to the 'min-height' property in CSS. In double-click event, this argumen will be ingored."
-          @value={{this.verticalPanel2MinHeightPx}}
-          @onInput={{fn (mut this.verticalPanel2MinHeightPx)}}
+          @name='minSize - Panel 2'
+          @description='The minimum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage. In double-click event, this argumen will be ingored if the panel is collapsible.'
+          @value={{this.verticalPanel2MinSize}}
+          @onInput={{fn (mut this.verticalPanel2MinSize)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='maxSize - Panel 2'
+          @description='The maximum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.verticalPanel2MaxSize}}
+          @onInput={{fn (mut this.verticalPanel2MaxSize)}}
+          @required={{false}}
+        />
+        <Args.Bool
+          @name='collapsible - Panel 2'
+          @description='Before collapsing a panel, this argument will be checked. The default value for this argument is true. Please also define minSize if you set the value of this argument to false.'
+          @value={{this.verticalPanel2Collapsible}}
+          @onInput={{fn (mut this.verticalPanel2Collapsible)}}
           @required={{false}}
         />
       </:api>
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/adjust-layout-by-delta.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/adjust-layout-by-delta.ts
new file mode 100644
index 0000000000..d71250e184
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/adjust-layout-by-delta.ts
@@ -0,0 +1,231 @@
+import { fuzzyLayoutsEqual } from './fuzzy-layouts-equal.ts';
+import { fuzzyCompareNumbers, fuzzyNumbersEqual } from './fuzzy-numbers.ts';
+import { resizePanel } from './resize-panel.ts';
+import type { ResizablePanelConstraints } from './types.ts';
+
+export function adjustLayoutByDelta({
+  delta,
+  initialLayout,
+  panelConstraints: panelConstraintsArray,
+  pivotIndices,
+  prevLayout,
+}: {
+  delta: number;
+  initialLayout: number[];
+  panelConstraints: ResizablePanelConstraints[];
+  pivotIndices: number[];
+  prevLayout: number[];
+}): number[] {
+  if (fuzzyNumbersEqual(delta, 0)) {
+    return initialLayout;
+  }
+
+  const nextLayout = [...initialLayout];
+
+  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
+  if (firstPivotIndex == null || secondPivotIndex == null) {
+    throw new Error('invalid pivot index');
+  }
+
+  let deltaApplied = 0;
+
+  // A resizing panel affects the panels before or after it.
+  //
+  // A negative delta means the panel(s) immediately after the resize handle should grow/expand by decreasing its offset.
+  // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
+  //
+  // A positive delta means the panel(s) immediately before the resize handle should "expand".
+  // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resize handle.
+
+  {
+    // Pre-calculate max available delta in the opposite direction of our pivot.
+    // This will be the maximum amount we're allowed to expand/contract the panels in the primary direction.
+    // If this amount is less than the requested delta, adjust the requested delta.
+    // If this amount is greater than the requested delta, that's useful information too–
+    // as an expanding panel might change from collapsed to min size.
+
+    const increment = delta < 0 ? 1 : -1;
+
+    let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+    let maxAvailableDelta = 0;
+
+    // DEBUG.push("pre calc...");
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      const prevSize = initialLayout[index];
+      if (prevSize == null) {
+        throw new Error(`Previous layout not found for panel index ${index}`);
+      }
+
+      const maxSafeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index,
+        size: 100,
+      });
+      const delta = maxSafeSize - prevSize;
+      maxAvailableDelta += delta;
+      index += increment;
+
+      if (index < 0 || index >= panelConstraintsArray.length) {
+        break;
+      }
+    }
+
+    const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
+    delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
+  }
+
+  {
+    // WORKAROUND: For a collapsed panel, we need to adjust the delta to the minimum size.
+    // TODO: Address the following inconsistent behaviors:
+    // - When dragging outward on a collapsed panel, it opens the panel, but dragging inward does not collapse it again.
+    //   The behavior should match that of dragging an opened panel where the cursor delta reaches the panel's minimum size.
+    // - When dragging an opened panel inward and the delta reaches the panel's minimum size, the panel collapses.
+    //   However, if you continue dragging outward, it does not reopen as it does in the first scenario.
+    const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+
+    const initSize = initialLayout[pivotIndex];
+    if (initSize == null) {
+      throw new Error(
+        `Previous layout not found for panel index ${pivotIndex}`,
+      );
+    }
+
+    const prevSize = prevLayout[pivotIndex];
+    if (prevSize == null) {
+      throw new Error(
+        `Previous layout not found for panel index ${pivotIndex}`,
+      );
+    }
+
+    let minSize = panelConstraintsArray[pivotIndex]?.minSize;
+    if (
+      (initSize == 0 || prevSize == 0) &&
+      minSize != null &&
+      fuzzyCompareNumbers(Math.abs(delta), minSize) < 0
+    ) {
+      delta = delta >= 0 ? minSize : 0 - minSize;
+    }
+  }
+
+  {
+    // Delta added to a panel needs to be subtracted from other panels (within the constraints that those panels allow).
+
+    const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
+    let index = pivotIndex;
+    while (index >= 0 && index < panelConstraintsArray.length) {
+      const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
+
+      const prevSize = initialLayout[index];
+      if (prevSize == null) {
+        throw new Error(`Previous layout not found for panel index ${index}`);
+      }
+
+      const unsafeSize = prevSize - deltaRemaining;
+      const safeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index,
+        size: unsafeSize,
+      });
+
+      if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+        deltaApplied += prevSize - safeSize;
+
+        nextLayout[index] = safeSize;
+
+        if (
+          deltaApplied
+            .toPrecision(3)
+            .localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+              numeric: true,
+            }) >= 0
+        ) {
+          break;
+        }
+      }
+
+      if (delta < 0) {
+        index--;
+      } else {
+        index++;
+      }
+    }
+  }
+
+  // If we were unable to resize any of the panels panels, return the previous state.
+  // This will essentially bailout and ignore e.g. drags past a panel's boundaries
+  if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
+    return prevLayout;
+  }
+
+  {
+    // Now distribute the applied delta to the panels in the other direction
+    const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+
+    const prevSize = initialLayout[pivotIndex];
+    if (prevSize == null) {
+      throw new Error(
+        `Previous layout not found for panel index ${pivotIndex}`,
+      );
+    }
+
+    const unsafeSize = prevSize + deltaApplied;
+    const safeSize = resizePanel({
+      panelConstraints: panelConstraintsArray,
+      panelIndex: pivotIndex,
+      size: unsafeSize,
+    });
+
+    // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
+    nextLayout[pivotIndex] = safeSize;
+
+    // Edge case where expanding or contracting one panel caused another one to change collapsed state
+    if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
+      let deltaRemaining = unsafeSize - safeSize;
+
+      const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+      let index = pivotIndex;
+      while (index >= 0 && index < panelConstraintsArray.length) {
+        const prevSize = nextLayout[index];
+        if (prevSize == null) {
+          throw new Error(
+            `Previous layout not found for panel index ${pivotIndex}`,
+          );
+        }
+
+        const unsafeSize = prevSize + deltaRemaining;
+        const safeSize = resizePanel({
+          panelConstraints: panelConstraintsArray,
+          panelIndex: index,
+          size: unsafeSize,
+        });
+
+        if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+          deltaRemaining -= safeSize - prevSize;
+
+          nextLayout[index] = safeSize;
+        }
+
+        if (fuzzyNumbersEqual(deltaRemaining, 0)) {
+          break;
+        }
+
+        if (delta > 0) {
+          index--;
+        } else {
+          index++;
+        }
+      }
+    }
+  }
+
+  const totalSize = nextLayout.reduce((total, size) => size + total, 0);
+
+  // If our new layout doesn't add up to 100%, that means the requested delta can't be applied
+  // In that case, fall back to our most recent valid layout
+  if (!fuzzyNumbersEqual(totalSize, 100)) {
+    return prevLayout;
+  }
+
+  return nextLayout;
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/assert.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/assert.ts
new file mode 100644
index 0000000000..9f7d03bc24
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/assert.ts
@@ -0,0 +1,10 @@
+export function assert(
+  expectedCondition: any,
+  message: string,
+): asserts expectedCondition {
+  if (!expectedCondition) {
+    console.error(message);
+
+    throw Error(message);
+  }
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/calculate-delta-percentage.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/calculate-delta-percentage.ts
new file mode 100644
index 0000000000..fa72adab87
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/calculate-delta-percentage.ts
@@ -0,0 +1,41 @@
+import { getPanelGroupElement } from './dom/get-panel-group-element.ts';
+import { getResizeHandleElement } from './dom/get-resize-handle-element.ts';
+import { getResizeEventCursorPosition } from './get-resize-event-cursor-position.ts';
+import type { DragState, Orientation, ResizeEvent } from './types.ts';
+
+export function calculateDeltaPercentage(
+  event: ResizeEvent,
+  dragHandleId: string,
+  orientation: Orientation,
+  initialDragState: DragState,
+  panelGroupElement: HTMLElement,
+): number {
+  const isHorizontal = orientation === 'horizontal';
+
+  const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
+  if (!handleElement) {
+    throw new Error(`No resize handle element found for id "${dragHandleId}"`);
+  }
+
+  const groupId = handleElement.getAttribute('data-boxel-panel-group-id');
+  if (!groupId) {
+    throw new Error(`Resize handle element has no group id attribute`);
+  }
+
+  let { initialCursorPosition } = initialDragState;
+
+  const cursorPosition = getResizeEventCursorPosition(orientation, event);
+
+  const groupElement = getPanelGroupElement(groupId, panelGroupElement);
+  if (!groupElement) {
+    throw new Error(`No group element found for id "${groupId}"`);
+  }
+
+  const groupRect = groupElement.getBoundingClientRect();
+  const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
+
+  const offsetPixels = cursorPosition - initialCursorPosition;
+  const offsetPercentage = (offsetPixels / groupSizeInPixels) * 100;
+
+  return offsetPercentage;
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/calculate-unsafe-default-layout.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/calculate-unsafe-default-layout.ts
new file mode 100644
index 0000000000..2affde3576
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/calculate-unsafe-default-layout.ts
@@ -0,0 +1,53 @@
+import type { ResizablePanelConstraints } from './types.ts';
+
+export function calculateUnsafeDefaultLayout({
+  panels,
+}: {
+  panels: {
+    constraints: ResizablePanelConstraints;
+  }[];
+}): number[] {
+  const layout = Array<number>(panels.length);
+
+  const panelConstraintsArray = panels.map((panel) => panel.constraints);
+
+  let numPanelsWithSizes = 0;
+  let remainingSize = 100;
+
+  // Distribute default sizes first
+  for (let index = 0; index < panels.length; index++) {
+    const panelConstraints = panelConstraintsArray[index];
+    if (!panelConstraints) {
+      throw new Error(`Panel constraints not found for index ${index}`);
+    }
+    const { defaultSize } = panelConstraints;
+
+    if (defaultSize != null) {
+      numPanelsWithSizes++;
+      layout[index] = defaultSize;
+      remainingSize -= defaultSize;
+    }
+  }
+
+  // Remaining size should be distributed evenly between panels without default sizes
+  for (let index = 0; index < panels.length; index++) {
+    const panelConstraints = panelConstraintsArray[index];
+    if (!panelConstraints) {
+      throw new Error(`Panel constraints not found for index ${index}`);
+    }
+    const { defaultSize } = panelConstraints;
+
+    if (defaultSize != null) {
+      continue;
+    }
+
+    const numRemainingPanels = panels.length - numPanelsWithSizes;
+    const size = remainingSize / numRemainingPanels;
+
+    numPanelsWithSizes++;
+    layout[index] = size;
+    remainingSize -= size;
+  }
+
+  return layout;
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/compare-layouts.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/compare-layouts.ts
new file mode 100644
index 0000000000..04d5f1cbdb
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/compare-layouts.ts
@@ -0,0 +1,12 @@
+export function compareLayouts(a: number[], b: number[]) {
+  if (a.length !== b.length) {
+    return false;
+  } else {
+    for (let index = 0; index < a.length; index++) {
+      if (a[index] != b[index]) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/const.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/const.ts
new file mode 100644
index 0000000000..bfa3b40992
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/const.ts
@@ -0,0 +1,6 @@
+export const PRECISION = 10;
+
+export const EXCEEDED_HORIZONTAL_MIN = 0b0001;
+export const EXCEEDED_HORIZONTAL_MAX = 0b0010;
+export const EXCEEDED_VERTICAL_MIN = 0b0100;
+export const EXCEEDED_VERTICAL_MAX = 0b1000;
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/determine-pivot-indices.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/determine-pivot-indices.ts
new file mode 100644
index 0000000000..bb5596acc6
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/determine-pivot-indices.ts
@@ -0,0 +1,15 @@
+import { getResizeHandleElementIndex } from './dom/get-resize-handle-element-index.ts';
+
+export function determinePivotIndices(
+  groupId: string,
+  dragHandleId: string,
+  panelGroupElement: ParentNode,
+): [indexBefore: number, indexAfter: number] {
+  const index = getResizeHandleElementIndex(
+    groupId,
+    dragHandleId,
+    panelGroupElement,
+  );
+
+  return index != null ? [index, index + 1] : [-1, -1];
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-panel-element.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-panel-element.ts
new file mode 100644
index 0000000000..15b8b05fc8
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-panel-element.ts
@@ -0,0 +1,10 @@
+export function getPanelElement(
+  id: string,
+  scope: ParentNode | HTMLElement = document,
+): HTMLElement | null {
+  const element = scope.querySelector(`[data-boxel-panel-id="${id}"]`);
+  if (element) {
+    return element as HTMLElement;
+  }
+  return null;
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-panel-elements-for-group.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-panel-elements-for-group.ts
new file mode 100644
index 0000000000..ed18456f75
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-panel-elements-for-group.ts
@@ -0,0 +1,8 @@
+export function getPanelElementsForGroup(
+  groupId: string,
+  scope: ParentNode | HTMLElement = document,
+): HTMLElement[] {
+  return Array.from(
+    scope.querySelectorAll(`[data-boxel-panel-group-id="${groupId}"]`),
+  );
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-panel-group-element.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-panel-group-element.ts
new file mode 100644
index 0000000000..9b3a6f5f2f
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-panel-group-element.ts
@@ -0,0 +1,21 @@
+export function getPanelGroupElement(
+  id: string,
+  rootElement: ParentNode | HTMLElement = document,
+): HTMLElement | null {
+  //If the root element is the PanelGroup
+  if (
+    rootElement instanceof HTMLElement &&
+    (rootElement as HTMLElement)?.hasAttribute('data-boxel-panel-group')
+  ) {
+    return rootElement as HTMLElement;
+  }
+
+  //Else query children
+  const element = rootElement.querySelector(
+    `[data-boxel-panel-group][data-boxel-panel-group-id="${id}"]`,
+  );
+  if (element) {
+    return element as HTMLElement;
+  }
+  return null;
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-resize-handle-element-index.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-resize-handle-element-index.ts
new file mode 100644
index 0000000000..b8a4dd559e
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-resize-handle-element-index.ts
@@ -0,0 +1,14 @@
+import { getResizeHandleElementsForGroup } from './get-resize-handle-elements-for-group.ts';
+
+export function getResizeHandleElementIndex(
+  groupId: string,
+  id: string,
+  scope: ParentNode | HTMLElement = document,
+): number | null {
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
+  const index = handles.findIndex(
+    (handle: HTMLElement) =>
+      handle.getAttribute('data-boxel-panel-resize-handle-id') === id,
+  );
+  return index ?? null;
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-resize-handle-element.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-resize-handle-element.ts
new file mode 100644
index 0000000000..94b4483fb7
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-resize-handle-element.ts
@@ -0,0 +1,12 @@
+export function getResizeHandleElement(
+  id: string,
+  scope: ParentNode | HTMLElement = document,
+): HTMLElement | null {
+  const element = scope.querySelector(
+    `[data-boxel-panel-resize-handle-id="${id}"]`,
+  );
+  if (element) {
+    return element as HTMLElement;
+  }
+  return null;
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-resize-handle-elements-for-group.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-resize-handle-elements-for-group.ts
new file mode 100644
index 0000000000..c0677689f8
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/dom/get-resize-handle-elements-for-group.ts
@@ -0,0 +1,10 @@
+export function getResizeHandleElementsForGroup(
+  groupId: string,
+  scope: ParentNode | HTMLElement = document,
+): HTMLElement[] {
+  return Array.from(
+    scope.querySelectorAll(
+      `[data-boxel-panel-resize-handle-id][data-boxel-panel-group-id="${groupId}"]`,
+    ),
+  );
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/fuzzy-layouts-equal.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/fuzzy-layouts-equal.ts
new file mode 100644
index 0000000000..188cfe67c4
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/fuzzy-layouts-equal.ts
@@ -0,0 +1,22 @@
+import { fuzzyNumbersEqual } from './fuzzy-numbers.ts';
+
+export function fuzzyLayoutsEqual(
+  actual: number[],
+  expected: number[],
+  fractionDigits?: number,
+): boolean {
+  if (actual.length !== expected.length) {
+    return false;
+  }
+
+  for (let index = 0; index < actual.length; index++) {
+    const actualSize = actual[index] as number;
+    const expectedSize = expected[index] as number;
+
+    if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
+      return false;
+    }
+  }
+
+  return true;
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/fuzzy-numbers.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/fuzzy-numbers.ts
new file mode 100644
index 0000000000..68e4994c70
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/fuzzy-numbers.ts
@@ -0,0 +1,21 @@
+import { PRECISION } from './const.ts';
+
+export function fuzzyNumbersEqual(
+  actual: number,
+  expected: number,
+  fractionDigits: number = PRECISION,
+): boolean {
+  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
+}
+
+export function fuzzyCompareNumbers(
+  actual: number,
+  expected: number,
+  fractionDigits: number = PRECISION,
+): number {
+  if (actual.toFixed(fractionDigits) === expected.toFixed(fractionDigits)) {
+    return 0;
+  } else {
+    return actual > expected ? 1 : -1;
+  }
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/get-resize-event-coordinates.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/get-resize-event-coordinates.ts
new file mode 100644
index 0000000000..70da6c9c29
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/get-resize-event-coordinates.ts
@@ -0,0 +1,8 @@
+import type { ResizeEvent } from './types.ts';
+
+export function getResizeEventCoordinates(event: ResizeEvent) {
+  return {
+    x: event.clientX,
+    y: event.clientY,
+  };
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/get-resize-event-cursor-position.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/get-resize-event-cursor-position.ts
new file mode 100644
index 0000000000..0d9b955960
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/get-resize-event-cursor-position.ts
@@ -0,0 +1,10 @@
+import type { Orientation, ResizeEvent } from './types.ts';
+
+export function getResizeEventCursorPosition(
+  orientation: Orientation,
+  event: ResizeEvent,
+): number {
+  const isHorizontal = orientation === 'horizontal';
+
+  return isHorizontal ? event.clientX : event.clientY;
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/panel-resize-handle-registry.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/panel-resize-handle-registry.ts
new file mode 100644
index 0000000000..4e21fda56e
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/panel-resize-handle-registry.ts
@@ -0,0 +1,441 @@
+import {
+  EXCEEDED_HORIZONTAL_MAX,
+  EXCEEDED_HORIZONTAL_MIN,
+  EXCEEDED_VERTICAL_MAX,
+  EXCEEDED_VERTICAL_MIN,
+} from './const.ts';
+import { getResizeEventCoordinates } from './get-resize-event-coordinates.ts';
+import type { Orientation, ResizeEvent } from './types.ts';
+
+export type ResizeHandlerAction = 'down' | 'move' | 'up' | 'dblclick';
+export type SetResizeHandlerState = (
+  action: ResizeHandlerAction,
+  isActive: boolean,
+  event: ResizeEvent,
+) => void;
+
+export type PointerHitAreaMargins = {
+  coarse: number;
+  fine: number;
+};
+
+export type ResizeHandlerData = {
+  element: HTMLElement;
+  hitAreaMargins: PointerHitAreaMargins;
+  orientation: Orientation;
+  setResizeHandlerState: SetResizeHandlerState;
+};
+
+const isCoarsePointer = getInputType() === 'coarse';
+
+let intersectingHandles: ResizeHandlerData[] = [];
+let isPointerDown = false;
+let ownerDocumentCounts: Map<Document, number> = new Map();
+let panelConstraintFlags: Map<string, number> = new Map();
+
+const registeredResizeHandlers = new Set<ResizeHandlerData>();
+
+export function registerResizeHandle(
+  resizeHandleId: string,
+  element: HTMLElement,
+  orientation: Orientation,
+  hitAreaMargins: PointerHitAreaMargins,
+  setResizeHandlerState: SetResizeHandlerState,
+) {
+  const { ownerDocument } = element;
+
+  const data: ResizeHandlerData = {
+    orientation,
+    element,
+    hitAreaMargins,
+    setResizeHandlerState,
+  };
+
+  const count = ownerDocumentCounts.get(ownerDocument) ?? 0;
+  ownerDocumentCounts.set(ownerDocument, count + 1);
+
+  registeredResizeHandlers.add(data);
+
+  updateListeners();
+
+  return function unregisterResizeHandle() {
+    panelConstraintFlags.delete(resizeHandleId);
+    registeredResizeHandlers.delete(data);
+
+    const count = ownerDocumentCounts.get(ownerDocument) ?? 1;
+    ownerDocumentCounts.set(ownerDocument, count - 1);
+
+    updateListeners();
+
+    if (count === 1) {
+      ownerDocumentCounts.delete(ownerDocument);
+    }
+
+    // If the resize handle that is currently unmounting is intersecting with the pointer,
+    // update the global pointer to account for the change
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+
+      updateCursor();
+    }
+  };
+}
+
+function handleDoubleClick(event: ResizeEvent) {
+  const { target } = event;
+  const { x, y } = getResizeEventCoordinates(event);
+
+  recalculateIntersectingHandles({ target, x, y });
+  updateListeners();
+
+  if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates('dblclick', event);
+
+    event.preventDefault();
+    event.stopPropagation();
+  }
+}
+
+function handlePointerDown(event: ResizeEvent) {
+  const { target } = event;
+  const { x, y } = getResizeEventCoordinates(event);
+
+  isPointerDown = true;
+
+  recalculateIntersectingHandles({ target, x, y });
+  updateListeners();
+
+  if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates('down', event);
+
+    event.preventDefault();
+    event.stopPropagation();
+  }
+}
+
+function handlePointerMove(event: ResizeEvent) {
+  const { x, y } = getResizeEventCoordinates(event);
+
+  if (!isPointerDown) {
+    const { target } = event;
+
+    // Recalculate intersecting handles whenever the pointer moves, except if it has already been pressed
+    // at that point, the handles may not move with the pointer (depending on constraints)
+    // but the same set of active handles should be locked until the pointer is released
+    recalculateIntersectingHandles({ target, x, y });
+  }
+
+  updateResizeHandlerStates('move', event);
+
+  // Update cursor based on return value(s) from active handles
+  updateCursor();
+
+  if (intersectingHandles.length > 0) {
+    event.preventDefault();
+  }
+}
+
+function handlePointerUp(event: ResizeEvent) {
+  const { target } = event;
+  const { x, y } = getResizeEventCoordinates(event);
+
+  panelConstraintFlags.clear();
+  isPointerDown = false;
+
+  if (intersectingHandles.length > 0) {
+    event.preventDefault();
+  }
+
+  updateResizeHandlerStates('up', event);
+  recalculateIntersectingHandles({ target, x, y });
+  updateCursor();
+
+  updateListeners();
+}
+
+function recalculateIntersectingHandles({
+  target,
+  x,
+  y,
+}: {
+  target: EventTarget | null;
+  x: number;
+  y: number;
+}) {
+  intersectingHandles.splice(0);
+
+  let targetElement: HTMLElement | null = null;
+  if (target instanceof HTMLElement) {
+    targetElement = target;
+  }
+
+  registeredResizeHandlers.forEach((data) => {
+    const { element: dragHandleElement, hitAreaMargins } = data;
+
+    const dragHandleRect = dragHandleElement.getBoundingClientRect();
+    const { bottom, left, right, top } = dragHandleRect;
+
+    const margin = isCoarsePointer
+      ? hitAreaMargins.coarse
+      : hitAreaMargins.fine;
+
+    const eventIntersects =
+      x >= left - margin &&
+      x <= right + margin &&
+      y >= top - margin &&
+      y <= bottom + margin;
+
+    if (eventIntersects) {
+      // TRICKY
+      // We listen for pointers events at the root in order to support hit area margins
+      // (determining when the pointer is close enough to an element to be considered a 'hit')
+      // Clicking on an element 'above' a handle (e.g. a modal) should prevent a hit though
+      // so at this point we need to compare stacking order of a potentially intersecting drag handle,
+      // and the element that was actually clicked/touched
+      if (
+        targetElement !== null &&
+        dragHandleElement !== targetElement &&
+        !dragHandleElement.contains(targetElement) &&
+        !targetElement.contains(dragHandleElement)
+      ) {
+        // If the target is above the drag handle, then we also need to confirm they overlap
+        // If they are beside each other (e.g. a panel and its drag handle) then the handle is still interactive
+        //
+        // It's not enough to compare only the target
+        // The target might be a small element inside of a larger container
+        // (For example, a SPAN or a DIV inside of a larger modal dialog)
+        let currentElement: HTMLElement | null = targetElement;
+        let didIntersect = false;
+        while (currentElement) {
+          if (currentElement.contains(dragHandleElement)) {
+            break;
+          } else if (
+            intersects(
+              currentElement.getBoundingClientRect(),
+              dragHandleRect,
+              true,
+            )
+          ) {
+            didIntersect = true;
+            break;
+          }
+
+          currentElement = currentElement.parentElement;
+        }
+
+        if (didIntersect) {
+          return;
+        }
+      }
+
+      intersectingHandles.push(data);
+    }
+  });
+}
+
+export function reportConstraintsViolation(
+  resizeHandleId: string,
+  flag: number,
+) {
+  panelConstraintFlags.set(resizeHandleId, flag);
+}
+
+function updateCursor() {
+  let intersectsHorizontal = false;
+  let intersectsVertical = false;
+
+  intersectingHandles.forEach((data) => {
+    const { orientation } = data;
+
+    if (orientation === 'horizontal') {
+      intersectsHorizontal = true;
+    } else {
+      intersectsVertical = true;
+    }
+  });
+
+  let constraintFlags = 0;
+  panelConstraintFlags.forEach((flag) => {
+    constraintFlags |= flag;
+  });
+
+  if (intersectsHorizontal && intersectsVertical) {
+    setGlobalCursorStyle('intersection', constraintFlags);
+  } else if (intersectsHorizontal) {
+    setGlobalCursorStyle('horizontal', constraintFlags);
+  } else if (intersectsVertical) {
+    setGlobalCursorStyle('vertical', constraintFlags);
+  } else {
+    resetGlobalCursorStyle();
+  }
+}
+
+function updateListeners() {
+  ownerDocumentCounts.forEach((_, ownerDocument) => {
+    const { body } = ownerDocument;
+
+    body.removeEventListener('contextmenu', handlePointerUp);
+    body.removeEventListener('pointerdown', handlePointerDown);
+    body.removeEventListener('pointerleave', handlePointerMove);
+    body.removeEventListener('pointermove', handlePointerMove);
+    body.removeEventListener('dblclick', handleDoubleClick);
+  });
+
+  window.removeEventListener('pointerup', handlePointerUp);
+  window.removeEventListener('pointercancel', handlePointerUp);
+
+  if (registeredResizeHandlers.size > 0) {
+    if (isPointerDown) {
+      if (intersectingHandles.length > 0) {
+        ownerDocumentCounts.forEach((count, ownerDocument) => {
+          const { body } = ownerDocument;
+
+          if (count > 0) {
+            body.addEventListener('contextmenu', handlePointerUp);
+            body.addEventListener('pointerleave', handlePointerMove);
+            body.addEventListener('pointermove', handlePointerMove);
+          }
+        });
+      }
+
+      window.addEventListener('pointerup', handlePointerUp);
+      window.addEventListener('pointercancel', handlePointerUp);
+    } else {
+      ownerDocumentCounts.forEach((count, ownerDocument) => {
+        const { body } = ownerDocument;
+
+        if (count > 0) {
+          body.addEventListener('dblclick', handleDoubleClick);
+          body.addEventListener('pointerdown', handlePointerDown, {
+            capture: true,
+          });
+          body.addEventListener('pointermove', handlePointerMove);
+        }
+      });
+    }
+  }
+}
+
+function updateResizeHandlerStates(
+  action: ResizeHandlerAction,
+  event: ResizeEvent,
+) {
+  registeredResizeHandlers.forEach((data) => {
+    const { setResizeHandlerState } = data;
+
+    const isActive = intersectingHandles.includes(data);
+
+    setResizeHandlerState(action, isActive, event);
+  });
+}
+
+interface Rectangle {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+}
+
+function intersects(
+  rectOne: Rectangle,
+  rectTwo: Rectangle,
+  strict: boolean,
+): boolean {
+  if (strict) {
+    return (
+      rectOne.x < rectTwo.x + rectTwo.width &&
+      rectOne.x + rectOne.width > rectTwo.x &&
+      rectOne.y < rectTwo.y + rectTwo.height &&
+      rectOne.y + rectOne.height > rectTwo.y
+    );
+  } else {
+    return (
+      rectOne.x <= rectTwo.x + rectTwo.width &&
+      rectOne.x + rectOne.width >= rectTwo.x &&
+      rectOne.y <= rectTwo.y + rectTwo.height &&
+      rectOne.y + rectOne.height >= rectTwo.y
+    );
+  }
+}
+
+function getInputType(): 'coarse' | 'fine' | undefined {
+  if (typeof matchMedia === 'function') {
+    return matchMedia('(pointer:coarse)').matches ? 'coarse' : 'fine';
+  }
+  return undefined;
+}
+
+type CursorState = 'horizontal' | 'intersection' | 'vertical';
+
+let currentCursorStyle: string | null = null;
+let styleElement: HTMLStyleElement | null = null;
+
+function getCursorStyle(state: CursorState, constraintFlags: number): string {
+  if (constraintFlags) {
+    const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
+    const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
+    const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
+    const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
+
+    if (horizontalMin) {
+      if (verticalMin) {
+        return 'se-resize';
+      } else if (verticalMax) {
+        return 'ne-resize';
+      } else {
+        return 'e-resize';
+      }
+    } else if (horizontalMax) {
+      if (verticalMin) {
+        return 'sw-resize';
+      } else if (verticalMax) {
+        return 'nw-resize';
+      } else {
+        return 'w-resize';
+      }
+    } else if (verticalMin) {
+      return 's-resize';
+    } else if (verticalMax) {
+      return 'n-resize';
+    }
+  }
+
+  switch (state) {
+    case 'horizontal':
+      return 'ew-resize';
+    case 'intersection':
+      return 'move';
+    case 'vertical':
+      return 'ns-resize';
+  }
+}
+
+function resetGlobalCursorStyle() {
+  if (styleElement !== null) {
+    document.head.removeChild(styleElement);
+
+    currentCursorStyle = null;
+    styleElement = null;
+  }
+}
+
+function setGlobalCursorStyle(state: CursorState, constraintFlags: number) {
+  const style = getCursorStyle(state, constraintFlags);
+
+  if (currentCursorStyle === style) {
+    return;
+  }
+
+  currentCursorStyle = style;
+
+  if (styleElement === null) {
+    styleElement = document.createElement('style');
+
+    document.head.appendChild(styleElement);
+  }
+
+  styleElement.innerHTML = `*{cursor: ${style}!important;}`;
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/resize-panel.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/resize-panel.ts
new file mode 100644
index 0000000000..5595e4dd74
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/resize-panel.ts
@@ -0,0 +1,35 @@
+import { assert } from './assert.ts';
+import { PRECISION } from './const.ts';
+import { fuzzyCompareNumbers } from './fuzzy-numbers.ts';
+import type { ResizablePanelConstraints } from './types.ts';
+
+export function resizePanel({
+  panelConstraints: panelConstraintsArray,
+  panelIndex,
+  size,
+}: {
+  panelConstraints: ResizablePanelConstraints[];
+  panelIndex: number;
+  size: number;
+}) {
+  const panelConstraints = panelConstraintsArray[panelIndex];
+  assert(
+    panelConstraints != null,
+    `Panel constraints not found for index ${panelIndex}`,
+  );
+
+  let { collapsible, maxSize = 100, minSize = 0 } = panelConstraints;
+
+  if (fuzzyCompareNumbers(size, minSize) < 0) {
+    if (collapsible) {
+      size = 0;
+    } else {
+      size = minSize;
+    }
+  }
+
+  size = Math.min(maxSize, size);
+  size = parseFloat(size.toFixed(PRECISION));
+
+  return size;
+}
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/types.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/types.ts
new file mode 100644
index 0000000000..2eb0c36a1f
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/types.ts
@@ -0,0 +1,23 @@
+import type { SafeString } from '@ember/template';
+
+export type GetPanelStyle = () => SafeString;
+
+export type DragState = {
+  dragHandleId: string;
+  dragHandleRect: DOMRect;
+  initialCursorPosition: number;
+  initialLayout: number[];
+};
+
+export type ResizeHandleState = 'drag' | 'hover' | 'inactive';
+export type ResizeEvent = PointerEvent | MouseEvent;
+export type ResizeHandler = (event: ResizeEvent) => void;
+
+export type Orientation = 'horizontal' | 'vertical';
+
+export type ResizablePanelConstraints = {
+  collapsible?: boolean | undefined;
+  defaultSize?: number | undefined;
+  maxSize?: number | undefined;
+  minSize?: number | undefined;
+};
diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/validate-panel-group-layout.ts b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/validate-panel-group-layout.ts
new file mode 100644
index 0000000000..0b2ee65c34
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/utils/validate-panel-group-layout.ts
@@ -0,0 +1,86 @@
+import { fuzzyNumbersEqual } from './fuzzy-numbers.ts';
+import { resizePanel } from './resize-panel.ts';
+import type { ResizablePanelConstraints } from './types.ts';
+
+export function validatePanelGroupLayout({
+  layout: prevLayout,
+  panelConstraints,
+}: {
+  layout: number[];
+  panelConstraints: ResizablePanelConstraints[];
+}): number[] {
+  const nextLayout = [...prevLayout];
+  const nextLayoutTotalSize = nextLayout.reduce(
+    (accumulated, current) => accumulated + current,
+    0,
+  );
+
+  // Validate layout expectations
+  if (nextLayout.length !== panelConstraints.length) {
+    throw Error(
+      `Invalid ${panelConstraints.length} panel layout: ${nextLayout
+        .map((size) => `${size}%`)
+        .join(', ')}`,
+    );
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+    for (let index = 0; index < panelConstraints.length; index++) {
+      const unsafeSize = nextLayout[index];
+      if (unsafeSize == null) {
+        throw new Error(`No layout data found for index ${index}`);
+      }
+      const safeSize = (100 / nextLayoutTotalSize) * unsafeSize;
+      nextLayout[index] = safeSize;
+    }
+  }
+
+  let remainingSize = 0;
+
+  // First pass: Validate the proposed layout given each panel's constraints
+  for (let index = 0; index < panelConstraints.length; index++) {
+    const unsafeSize = nextLayout[index];
+    if (unsafeSize == null) {
+      throw new Error(`No layout data found for index ${index}`);
+    }
+
+    const safeSize = resizePanel({
+      panelConstraints,
+      panelIndex: index,
+      size: unsafeSize,
+    });
+
+    if (unsafeSize != safeSize) {
+      remainingSize += unsafeSize - safeSize;
+
+      nextLayout[index] = safeSize;
+    }
+  }
+
+  // If there is additional, left over space, assign it to any panel(s) that permits it
+  // (It's not worth taking multiple additional passes to evenly distribute)
+  if (!fuzzyNumbersEqual(remainingSize, 0)) {
+    for (let index = 0; index < panelConstraints.length; index++) {
+      const prevSize = nextLayout[index];
+      if (prevSize == null) {
+        throw new Error(`No layout data found for index ${index}`);
+      }
+      const unsafeSize = prevSize + remainingSize;
+      const safeSize = resizePanel({
+        panelConstraints,
+        panelIndex: index,
+        size: unsafeSize,
+      });
+
+      if (prevSize !== safeSize) {
+        remainingSize -= safeSize - prevSize;
+        nextLayout[index] = safeSize;
+
+        // Once we've used up the remainder, bail
+        if (fuzzyNumbersEqual(remainingSize, 0)) {
+          break;
+        }
+      }
+    }
+  }
+
+  return nextLayout;
+}
diff --git a/packages/boxel-ui/addon/src/helpers/deterministic-color-from-string.ts b/packages/boxel-ui/addon/src/helpers/deterministic-color-from-string.ts
index c1e6a02eb9..418399da97 100644
--- a/packages/boxel-ui/addon/src/helpers/deterministic-color-from-string.ts
+++ b/packages/boxel-ui/addon/src/helpers/deterministic-color-from-string.ts
@@ -7,7 +7,7 @@ import {
 } from './color-tools.ts';
 
 // Selects a random color from a set of colors based on the input string
-export function deterministicColorFromString(str: string): string {
+export function deterministicColorFromString(str?: string | null): string {
   if (!str) {
     return '#EEEEEE';
   }
diff --git a/packages/boxel-ui/addon/src/styles/variables.css b/packages/boxel-ui/addon/src/styles/variables.css
index 6ba0289149..d64cb16315 100644
--- a/packages/boxel-ui/addon/src/styles/variables.css
+++ b/packages/boxel-ui/addon/src/styles/variables.css
@@ -157,6 +157,7 @@
   /* Status colors */
   --boxel-error-100: #dc0202; /* alert - attention - error */
   --boxel-error-200: #ed0000;
+  --boxel-error-300: #ff0000;
   --boxel-warning-100: var(--boxel-yellow); /* warning - notification */
   --boxel-success-100: var(--boxel-green);
   --boxel-success-200: var(--boxel-teal);
diff --git a/packages/boxel-ui/addon/tsconfig.json b/packages/boxel-ui/addon/tsconfig.json
index 110abf6fd9..fbb48fb840 100644
--- a/packages/boxel-ui/addon/tsconfig.json
+++ b/packages/boxel-ui/addon/tsconfig.json
@@ -29,7 +29,7 @@
       "https://cardstack.com/base/*": ["../../base/*"],
       "*": ["./src/types/*"],
       "@cardstack/boxel-ui": ["./src"],
-      "@cardstack/boxel-ui/*": ["./src/*"]
+      "@cardstack/boxel-ui/*": ["./src/*"],
     },
     "typeRoots": ["./src/types"]
   },
diff --git a/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts b/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts
index feec0a96f6..ea48d1da88 100644
--- a/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts
+++ b/packages/boxel-ui/test-app/tests/integration/components/resizable-panel-group-test.gts
@@ -3,49 +3,44 @@ import { setupRenderingTest } from 'ember-qunit';
 import { doubleClick, render, RenderingTestContext } from '@ember/test-helpers';
 import { htmlSafe } from '@ember/template';
 import { ResizablePanelGroup } from '@cardstack/boxel-ui/components';
+import { not } from '@cardstack/boxel-ui/helpers';
 import { tracked } from '@glimmer/tracking';
 import { triggerEvent } from '@ember/test-helpers';
 
 const RESIZE_HANDLE_WIDTH = 15.126;
-const PANEL_INDEX_1_MIN_LENGTH = 50;
+const PANEL_INDEX_1_MIN_SIZE = 15;
 
 class PanelProperties {
-  @tracked lengthPx?: number;
+  @tracked defaultSize?: number;
+  @tracked minSize?: number;
+  @tracked maxSize?: number;
+  @tracked collapsible: boolean;
   @tracked isHidden?: boolean;
-  @tracked defaultLengthFraction?: number;
-  @tracked minLengthPx?: number;
-  collapsible: boolean;
 
   outerContainerStyle?: string;
   showResizeHandle?: boolean;
   constructor(
     panelArgs: {
-      lengthPx?: number;
-      isHidden?: boolean;
-      defaultLengthFraction?: number;
-      minLengthPx?: number;
+      defaultSize?: number;
+      minSize?: number;
+      maxSize?: number;
+      collapsible?: boolean;
       outerContainerStyle?: string;
       showResizeHandle?: boolean;
-      collapsible?: boolean;
+      isHidden?: boolean;
     } = {},
     testArgs: {
       outerContainerStyle?: string;
       showResizeHandle?: boolean;
     } = {},
   ) {
-    let {
-      lengthPx,
-      isHidden = false,
-      defaultLengthFraction,
-      minLengthPx,
-      collapsible,
-    } = panelArgs;
+    let { defaultSize, minSize, maxSize, collapsible, isHidden } = panelArgs;
     let { outerContainerStyle, showResizeHandle } = testArgs;
-    this.lengthPx = lengthPx;
-    this.isHidden = isHidden;
-    this.defaultLengthFraction = defaultLengthFraction;
-    this.minLengthPx = minLengthPx;
+    this.defaultSize = defaultSize;
+    this.minSize = minSize;
+    this.maxSize = maxSize;
     this.collapsible = collapsible ?? true;
+    this.isHidden = isHidden;
 
     this.showResizeHandle = showResizeHandle;
 
@@ -77,6 +72,94 @@ let orientationPropertiesToTest = [
   },
 ];
 
+let moveResizePanelHandle = async function ({
+  panelIndex,
+  orientation,
+  moveDelta, // A negative indicates movement to the left in a horizontal orientation and upward in a vertical orientation."
+  hitAreaMargin = 0,
+}: {
+  panelIndex: number;
+  orientation: string;
+  moveDelta: number;
+  hitAreaMargin?: number;
+}) {
+  let groupEl = document.querySelector('[data-boxel-panel-group]');
+  if (!groupEl) {
+    throw new Error(`panelGroup is not found`);
+  }
+  let resizePanelHandles = document.querySelectorAll(
+    `[data-boxel-panel-resize-handle-id]`,
+  );
+  let resizeHandleId = resizePanelHandles[panelIndex].getAttribute(
+    'data-boxel-panel-resize-handle-id',
+  );
+  if (!resizeHandleId) {
+    throw new Error(`resizePanelHandle with index: ${panelIndex} is not found`);
+  }
+
+  let groupRect = groupEl.getBoundingClientRect();
+  let groupSizeInPixels =
+    orientation === 'horizontal' ? groupRect.width : groupRect.height;
+  let resizeHandleRect =
+    resizePanelHandles[panelIndex].children[0]!.getBoundingClientRect();
+  let moveDeltaInPixels = (groupSizeInPixels * moveDelta) / 100;
+  await triggerEvent(
+    `[data-boxel-panel-resize-handle-id="${resizeHandleId}"]`,
+    'pointerdown',
+    orientation === 'horizontal'
+      ? {
+          clientX: resizeHandleRect.x + hitAreaMargin,
+          clientY: resizeHandleRect.y,
+        }
+      : {
+          clientX: resizeHandleRect.x,
+          clientY: resizeHandleRect.y + hitAreaMargin,
+        },
+  );
+  await triggerEvent(
+    `[data-boxel-panel-resize-handle-id="${resizeHandleId}"]`,
+    'pointermove',
+    orientation === 'horizontal'
+      ? {
+          clientX: resizeHandleRect.x + moveDeltaInPixels + hitAreaMargin,
+          clientY: resizeHandleRect.y,
+        }
+      : {
+          clientX: resizeHandleRect.x,
+          clientY: resizeHandleRect.y + moveDeltaInPixels + hitAreaMargin,
+        },
+  );
+  await triggerEvent(
+    `[data-boxel-panel-resize-handle-id="${resizeHandleId}"]`,
+    'pointerup',
+  );
+  await waitForRerender();
+};
+
+let assertPanels = function ({
+  assert,
+  orientation,
+  panelSizesInPixels,
+}: {
+  assert: Assert;
+  orientation: string;
+  panelSizesInPixels: string[];
+}) {
+  let elements = document.querySelectorAll('[data-test-panel-index]');
+  let computedStyles = Array.from(elements).map((element) =>
+    window.getComputedStyle(element),
+  );
+  assert.deepEqual(computedStyles.length, panelSizesInPixels.length);
+  for (let index = 0; index < panelSizesInPixels.length; index++) {
+    assert.deepEqual(
+      orientation === 'horizontal'
+        ? computedStyles[index].width
+        : computedStyles[index].height,
+      panelSizesInPixels[index],
+    );
+  }
+};
+
 orientationPropertiesToTest.forEach((orientationProperties) => {
   module(
     `Integration | ResizablePanelGroup | ${orientationProperties.orientation}`,
@@ -86,11 +169,10 @@ orientationPropertiesToTest.forEach((orientationProperties) => {
         this.renderController = new RenderController();
         this.renderController.panels = [
           new PanelProperties(
-            { defaultLengthFraction: 0.6 },
+            { defaultSize: 60 },
             {
               showResizeHandle: true,
               outerContainerStyle: `
-                border: 1px solid red;
                 ${orientationProperties.dimension}: 100%;
                 overflow-${orientationProperties.axis}: auto
               `,
@@ -98,12 +180,11 @@ orientationPropertiesToTest.forEach((orientationProperties) => {
           ),
           new PanelProperties(
             {
-              defaultLengthFraction: 0.4,
-              minLengthPx: PANEL_INDEX_1_MIN_LENGTH,
+              defaultSize: 40,
+              minSize: PANEL_INDEX_1_MIN_SIZE,
             },
             {
               outerContainerStyle: `
-                border: 1px solid red;
                 ${orientationProperties.dimension}: 100%
               `,
             },
@@ -132,30 +213,31 @@ orientationPropertiesToTest.forEach((orientationProperties) => {
               as |ResizablePanel ResizeHandle|
             >
               {{#each renderController.panels as |panel index|}}
-                <ResizablePanel
-                  @defaultLengthFraction={{panel.defaultLengthFraction}}
-                  @lengthPx={{panel.lengthPx}}
-                  @minLengthPx={{panel.minLengthPx}}
-                  @isHidden={{panel.isHidden}}
-                  @collapsible={{panel.collapsible}}
-                >
-                  <div
-                    class='panel'
-                    style={{htmlSafe
-                      (if
-                        panel.outerContainerStyle panel.outerContainerStyle ''
-                      )
-                    }}
-                    data-test-panel-index={{index}}
+                {{#if (not panel.isHidden)}}
+                  <ResizablePanel
+                    @defaultSize={{panel.defaultSize}}
+                    @minSize={{panel.minSize}}
+                    @maxSize={{panel.maxSize}}
+                    @collapsible={{panel.collapsible}}
                   >
-                    <div>
-                      Panel
-                      {{index}}
+                    <div
+                      class='panel'
+                      style={{htmlSafe
+                        (if
+                          panel.outerContainerStyle panel.outerContainerStyle ''
+                        )
+                      }}
+                      data-test-panel-index={{index}}
+                    >
+                      <div>
+                        Panel
+                        {{index}}
+                      </div>
                     </div>
-                  </div>
-                </ResizablePanel>
-                {{#if panel.showResizeHandle}}
-                  <ResizeHandle />
+                  </ResizablePanel>
+                  {{#if panel.showResizeHandle}}
+                    <ResizeHandle />
+                  {{/if}}
                 {{/if}}
               {{/each}}
             </ResizablePanelGroup>
@@ -164,474 +246,321 @@ orientationPropertiesToTest.forEach((orientationProperties) => {
         await waitForRerender();
       }
 
-      test<MyTestContext>(`it can lay out panels with ${orientationProperties.orientation} orientation (default)`, async function (assert) {
-        this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: ${300 + RESIZE_HANDLE_WIDTH}px;
-        `;
-
-        await renderResizablePanelGroup(this.renderController);
-
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          300 * 0.6,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          300 * 0.4,
-          1,
-        );
-      });
-
-      test<MyTestContext>(`it can lay out panels with ${orientationProperties.orientation} orientation (length specified)`, async function (assert) {
-        this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: ${500 + RESIZE_HANDLE_WIDTH}px;
-          `;
-
-        this.renderController.panels[0].lengthPx = 355;
-        this.renderController.panels[1].lengthPx = 143;
-
-        await renderResizablePanelGroup(this.renderController);
-
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          355,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          143,
-          1,
-        );
-      });
-
-      test<MyTestContext>(`it respects ${orientationProperties.orientation} minLength (default)`, async function (assert) {
-        this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: 105px;
-        `;
-
-        await renderResizablePanelGroup(this.renderController);
-
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          40,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          PANEL_INDEX_1_MIN_LENGTH,
-          1,
-        );
-      });
-
-      test<MyTestContext>(`it respects ${orientationProperties.orientation} minLength (length specified)`, async function (assert) {
-        this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: 105px;
-        `;
-
-        this.renderController.panels[0].lengthPx = 45;
-        this.renderController.panels[1].lengthPx = 45;
-
-        await renderResizablePanelGroup(this.renderController);
-
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          40,
-          2,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          PANEL_INDEX_1_MIN_LENGTH,
-          2,
-        );
-      });
-
-      test<MyTestContext>(`it adjusts to its container growing (default)`, async function (assert) {
+      test<MyTestContext>(`it can lay out panels with a defined defaultSize and ${orientationProperties.orientation} orientation`, async function (assert) {
+        let containerSize = 300 + RESIZE_HANDLE_WIDTH;
         this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: ${200 + RESIZE_HANDLE_WIDTH}px;
+          ${orientationProperties.dimension}: ${containerSize}px;
         `;
 
         await renderResizablePanelGroup(this.renderController);
 
-        this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: ${400 + RESIZE_HANDLE_WIDTH}px;
-        `;
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['180px', '120px'],
+        });
+
+        await moveResizePanelHandle({
+          panelIndex: 0,
+          orientation: orientationProperties.orientation,
+          moveDelta: -10,
+        });
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['150px', '150px'],
+        });
+
+        await moveResizePanelHandle({
+          panelIndex: 0,
+          orientation: orientationProperties.orientation,
+          moveDelta: 20,
+        });
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['210px', '90px'],
+        });
+
+        await doubleClick('[data-test-resize-handle]');
         await waitForRerender();
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['300px', '0px'],
+        });
 
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          240,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          160,
-          1,
-        );
-      });
-
-      test<MyTestContext>(`it adjusts to its container growing (length specified)`, async function (assert) {
-        this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: ${200 + RESIZE_HANDLE_WIDTH}px;
-        `;
-
-        this.renderController.panels[0].lengthPx = 100;
-        this.renderController.panels[1].lengthPx = 100;
-
-        await renderResizablePanelGroup(this.renderController);
-
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          100,
-          1.5,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          100,
-          1.5,
-        );
-
-        this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: ${400 + RESIZE_HANDLE_WIDTH}px;
-        `;
+        await doubleClick('[data-test-resize-handle]');
         await waitForRerender();
-
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          200,
-          1.5,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          200,
-          1.5,
-        );
-      });
-
-      test<MyTestContext>(`it adjusts to its container shrinking (default)`, async function (assert) {
-        this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: ${400 + RESIZE_HANDLE_WIDTH}x;
-        `;
-
-        await renderResizablePanelGroup(this.renderController);
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['210px', '90px'],
+        });
+
+        // Update container size to simulate resizing window case
+        let newContainerSize = 600 + RESIZE_HANDLE_WIDTH;
         this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: ${200 + RESIZE_HANDLE_WIDTH}px;
+          ${orientationProperties.dimension}: ${newContainerSize}px;
         `;
-
         await waitForRerender();
-
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          120,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          80,
-          1,
-        );
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['420px', '180px'],
+        });
       });
 
-      test<MyTestContext>(`it maintans ratio when its container shrinks`, async function (assert) {
+      test<MyTestContext>(`it can lay out panels with a defined minSize and ${orientationProperties.orientation} orientation`, async function (assert) {
+        this.renderController.panels[0].minSize = 40;
+        let containerSize = 300 + RESIZE_HANDLE_WIDTH;
         this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: 417px;
+          ${orientationProperties.dimension}: ${containerSize}px;
         `;
 
-        // length ratio panel 1 and panel 2 is 3:2
-        this.renderController.panels[0].lengthPx = 240;
-        this.renderController.panels[1].lengthPx = 160;
-
         await renderResizablePanelGroup(this.renderController);
 
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          240,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          160,
-          1,
-        );
-
-        this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: 217px;
-        `;
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['180px', '120px'],
+        });
+
+        await moveResizePanelHandle({
+          panelIndex: 0,
+          orientation: orientationProperties.orientation,
+          moveDelta: -10,
+        });
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['150px', '150px'],
+        });
+
+        await moveResizePanelHandle({
+          panelIndex: 0,
+          orientation: orientationProperties.orientation,
+          moveDelta: -20,
+        });
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['0px', '300px'],
+        });
+
+        await moveResizePanelHandle({
+          panelIndex: 0,
+          orientation: orientationProperties.orientation,
+          moveDelta: 10,
+        });
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['120px', '180px'],
+        });
+
+        await moveResizePanelHandle({
+          panelIndex: 0,
+          orientation: orientationProperties.orientation,
+          moveDelta: 10,
+        });
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['150px', '150px'],
+        });
+
+        await doubleClick('[data-test-resize-handle]');
+        await waitForRerender();
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['300px', '0px'],
+        });
 
+        await doubleClick('[data-test-resize-handle]');
         await waitForRerender();
-        // Maintain the ratio 3:2 when resizing
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          120,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          80,
-          1,
-        );
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['150px', '150px'],
+        });
       });
 
-      test<MyTestContext>(`it adjusts to its container shrinking and growing`, async function (assert) {
+      test<MyTestContext>(`it can lay out panels with a defined minSize, not collapsible, and ${orientationProperties.orientation} orientation`, async function (assert) {
+        this.renderController.panels[0].minSize = 40;
+        this.renderController.panels[0].collapsible = false;
+        let containerSize = 300 + RESIZE_HANDLE_WIDTH;
         this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: ${600 + RESIZE_HANDLE_WIDTH}px;
+          ${orientationProperties.dimension}: ${containerSize}px;
         `;
 
-        this.renderController.panels[0].lengthPx = 400;
-        this.renderController.panels[1].lengthPx = 200;
-
         await renderResizablePanelGroup(this.renderController);
 
-        this.renderController.panels[0].lengthPx = 50;
-        this.renderController.panels[1].lengthPx = 550;
-
-        await waitForRerender();
-
-        await doubleClick('[data-test-resize-handle]'); // Double-click to hide recent
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['180px', '120px'],
+        });
+
+        await moveResizePanelHandle({
+          panelIndex: 0,
+          orientation: orientationProperties.orientation,
+          moveDelta: -10,
+        });
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['150px', '150px'],
+        });
+
+        await moveResizePanelHandle({
+          panelIndex: 0,
+          orientation: orientationProperties.orientation,
+          moveDelta: -20,
+        });
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['120px', '180px'],
+        });
+
+        await doubleClick('[data-test-resize-handle]');
         await waitForRerender();
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['300px', '0px'],
+        });
 
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          600,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          0,
-          2,
-        );
-
-        // shrink container by ~5
-        this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: ${300 + RESIZE_HANDLE_WIDTH}px;
-        `;
-
-        await waitForRerender();
-
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          300,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          0,
-          2,
-        );
-
-        await doubleClick('[data-test-resize-handle]'); // Double-click to unhide recent
-
+        await doubleClick('[data-test-resize-handle]');
         await waitForRerender();
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['120px', '180px'],
+        });
+      });
 
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          180,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          120,
-          1,
-        );
-
-        // increase window/container length to original length
+      test<MyTestContext>(`it can lay out panels with a defined maxSize and ${orientationProperties.orientation} orientation`, async function (assert) {
+        this.renderController.panels[0].maxSize = 80;
+        let containerSize = 300 + RESIZE_HANDLE_WIDTH;
         this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: 617px;
+          ${orientationProperties.dimension}: ${containerSize}px;
         `;
 
-        await waitForRerender();
+        await renderResizablePanelGroup(this.renderController);
 
-        // expected behavior: panel length percentages would remain consistent
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          360,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          240,
-          1,
-        );
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['180px', '120px'],
+        });
+
+        await moveResizePanelHandle({
+          panelIndex: 0,
+          orientation: orientationProperties.orientation,
+          moveDelta: 10,
+        });
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['210px', '90px'],
+        });
+
+        await moveResizePanelHandle({
+          panelIndex: 0,
+          orientation: orientationProperties.orientation,
+          moveDelta: 10,
+        });
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['240px', '60px'],
+        });
+
+        await moveResizePanelHandle({
+          panelIndex: 0,
+          orientation: orientationProperties.orientation,
+          moveDelta: 10,
+        });
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['240px', '60px'],
+        });
       });
 
-      test<MyTestContext>(`it excludes hidden panels from participating in layout`, async function (assert) {
+      test<MyTestContext>(`it can recalculate the panels with ${orientationProperties.orientation} orientation if a panel is hidden`, async function (assert) {
+        let containerSize = 300 + RESIZE_HANDLE_WIDTH;
         this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: ${200 + RESIZE_HANDLE_WIDTH}px;
+          ${orientationProperties.dimension}: ${containerSize}px;
         `;
 
-        this.renderController.panels = [
-          new PanelProperties(
-            { defaultLengthFraction: 0.6 },
-            {
-              outerContainerStyle: `
-                ${orientationProperties.dimension}: 100%;
-                overflow-${orientationProperties.axis}: auto
-              `,
-            },
-          ),
-          new PanelProperties(
-            {
-              defaultLengthFraction: 0.4,
-              minLengthPx: PANEL_INDEX_1_MIN_LENGTH,
-              isHidden: true,
-            },
-            {
-              outerContainerStyle: `
-                ${orientationProperties.dimension}: 100%
-              `,
-            },
-          ),
-        ];
-
         await renderResizablePanelGroup(this.renderController);
 
-        await waitForRerender();
-
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          215,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          0,
-          0,
-        );
-
-        this.renderController.panels[1].isHidden = false;
-        await waitForRerender();
-
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          165,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          PANEL_INDEX_1_MIN_LENGTH,
-          1,
-        );
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['180px', '120px'],
+        });
+
+        await moveResizePanelHandle({
+          panelIndex: 0,
+          orientation: orientationProperties.orientation,
+          moveDelta: 10,
+        });
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['210px', '90px'],
+        });
 
         this.renderController.panels[1].isHidden = true;
         await waitForRerender();
-
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          215,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          0,
-          0,
-        );
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['300px'],
+        });
       });
 
-      test<MyTestContext>(`it stops expanding/shrinking if cursor is not in the right position`, async function (assert) {
+      test<MyTestContext>(`it stops expanding/shrinking panels with ${orientationProperties.orientation} orientation if cursor is not in the right position`, async function (assert) {
+        let containerSize = 300 + RESIZE_HANDLE_WIDTH;
         this.renderController.containerStyle = `
-          ${orientationProperties.dimension}: ${300 + RESIZE_HANDLE_WIDTH}px;
+          ${orientationProperties.dimension}: ${containerSize}px;
         `;
-        this.renderController.panels[1].minLengthPx = 60;
-        this.renderController.panels[1].collapsible = false;
 
         await renderResizablePanelGroup(this.renderController);
 
-        assert.hasNumericStyle(
-          '[data-test-panel-index="0"]',
-          orientationProperties.dimension,
-          300 * 0.6,
-          1,
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          300 * 0.4,
-          1,
-        );
-
-        let resizeHandleRect = document
-          .querySelector('[data-test-resize-handle]')!
-          .getBoundingClientRect();
-        await triggerEvent('[data-test-resize-handle]', 'mousedown');
-        await triggerEvent(
-          '[data-test-resize-handle]',
-          'mousemove',
-          orientationProperties.orientation === 'horizontal'
-            ? {
-                clientX: resizeHandleRect.x + 60,
-                clientY: 25,
-              }
-            : {
-                clientX: 25,
-                clientY: resizeHandleRect.y + 60,
-              },
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          this.renderController.panels[1].minLengthPx,
-          1,
-        );
-
-        // Mouse move event doesn't give any effects
-        // since the cursor drags past minimum length
-        resizeHandleRect = document
-          .querySelector('[data-test-resize-handle]')!
-          .getBoundingClientRect();
-        await triggerEvent(
-          '[data-test-resize-handle]',
-          'mousemove',
-          orientationProperties.orientation === 'horizontal'
-            ? {
-                clientX: resizeHandleRect.x + 40,
-                clientY: 25,
-              }
-            : {
-                clientX: 25,
-                clientY: resizeHandleRect.y + 40,
-              },
-        );
-        assert.hasNumericStyle(
-          '[data-test-panel-index="1"]',
-          orientationProperties.dimension,
-          this.renderController.panels[1].minLengthPx,
-          1,
-        );
-        await triggerEvent('[data-test-resize-handle]', 'mouseup');
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['180px', '120px'],
+        });
+
+        await moveResizePanelHandle({
+          panelIndex: 0,
+          orientation: orientationProperties.orientation,
+          moveDelta: 10,
+        });
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['210px', '90px'],
+        });
+
+        await moveResizePanelHandle({
+          panelIndex: 0,
+          orientation: orientationProperties.orientation,
+          moveDelta: 10,
+          hitAreaMargin: RESIZE_HANDLE_WIDTH + 25, // Put cursor outside the right hit area
+        });
+        assertPanels({
+          assert,
+          orientation: orientationProperties.orientation,
+          panelSizesInPixels: ['210px', '90px'],
+        });
       });
     },
   );
diff --git a/packages/experiments-realm/Account/77976251-6bc8-4a8c-972f-f9d588e8434d.json b/packages/experiments-realm/Account/77976251-6bc8-4a8c-972f-f9d588e8434d.json
index 03b3d6a4eb..770af1d9f3 100644
--- a/packages/experiments-realm/Account/77976251-6bc8-4a8c-972f-f9d588e8434d.json
+++ b/packages/experiments-realm/Account/77976251-6bc8-4a8c-972f-f9d588e8434d.json
@@ -2,39 +2,47 @@
   "data": {
     "type": "card",
     "attributes": {
-      "title": null,
+      "shippingAddress": {
+        "addressLine1": null,
+        "addressLine2": null,
+        "city": null,
+        "state": null,
+        "postalCode": null,
+        "country": {
+          "name": null,
+          "code": null
+        },
+        "poBoxNumber": null
+      },
+      "billingAddress": {
+        "addressLine1": null,
+        "addressLine2": null,
+        "city": null,
+        "state": null,
+        "postalCode": null,
+        "country": {
+          "name": null,
+          "code": null
+        },
+        "poBoxNumber": null
+      },
       "description": null,
       "thumbnailURL": null
     },
     "relationships": {
       "company": {
         "links": {
-          "self": "../Company/05326db9-ea5c-4f20-b516-ac3f2282e973"
+          "self": null
         }
       },
       "primaryContact": {
         "links": {
-          "self": "../Contact/ed6f4f12-01ae-4c5c-a507-6d128eb09a17"
-        }
-      },
-      "contacts.0": {
-        "links": {
-          "self": "../Contact/ed6f4f12-01ae-4c5c-a507-6d128eb09a17"
-        }
-      },
-      "contacts.1": {
-        "links": {
-          "self": "../Customer/67e87a6c-00d0-4c48-9318-f0c96daa4cae"
-        }
-      },
-      "deals.0": {
-        "links": {
-          "self": "../Deal/4fdd3053-14f1-4800-827f-d3e2a5c44ae8"
+          "self": null
         }
       },
-      "deals.1": {
+      "contacts": {
         "links": {
-          "self": "../Deal/f0d769bd-e347-4203-9a96-89332cfba0e2"
+          "self": null
         }
       }
     },
diff --git a/packages/experiments-realm/Account/bf437dc3-1f96-45e5-a057-3487c6a5c2f7.json b/packages/experiments-realm/Account/bf437dc3-1f96-45e5-a057-3487c6a5c2f7.json
index a4d0ed525b..de3832396b 100644
--- a/packages/experiments-realm/Account/bf437dc3-1f96-45e5-a057-3487c6a5c2f7.json
+++ b/packages/experiments-realm/Account/bf437dc3-1f96-45e5-a057-3487c6a5c2f7.json
@@ -2,14 +2,37 @@
   "data": {
     "type": "card",
     "attributes": {
-      "title": null,
+      "shippingAddress": {
+        "addressLine1": null,
+        "addressLine2": null,
+        "city": null,
+        "state": null,
+        "postalCode": null,
+        "country": {
+          "name": null,
+          "code": null
+        },
+        "poBoxNumber": null
+      },
+      "billingAddress": {
+        "addressLine1": null,
+        "addressLine2": null,
+        "city": null,
+        "state": null,
+        "postalCode": null,
+        "country": {
+          "name": null,
+          "code": null
+        },
+        "poBoxNumber": null
+      },
       "description": null,
       "thumbnailURL": null
     },
     "relationships": {
       "company": {
         "links": {
-          "self": null
+          "self": "../Company/9203c173-3420-44b3-863d-90defd7c57c8"
         }
       },
       "primaryContact": {
@@ -21,11 +44,6 @@
         "links": {
           "self": null
         }
-      },
-      "deals": {
-        "links": {
-          "self": null
-        }
       }
     },
     "meta": {
@@ -35,4 +53,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/catalog-realm/AiAppGenerator/ai-app-gen-thumbnail.png b/packages/experiments-realm/AiAppGenerator/ai-app-gen-thumbnail.png
similarity index 100%
rename from packages/catalog-realm/AiAppGenerator/ai-app-gen-thumbnail.png
rename to packages/experiments-realm/AiAppGenerator/ai-app-gen-thumbnail.png
diff --git a/packages/seed-realm/AiAppGenerator/ai-app-generator.json b/packages/experiments-realm/AiAppGenerator/ai-app-generator.json
similarity index 99%
rename from packages/seed-realm/AiAppGenerator/ai-app-generator.json
rename to packages/experiments-realm/AiAppGenerator/ai-app-generator.json
index 260fa7fceb..6578d17702 100644
--- a/packages/seed-realm/AiAppGenerator/ai-app-generator.json
+++ b/packages/experiments-realm/AiAppGenerator/ai-app-generator.json
@@ -36,7 +36,7 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "/catalog/ai-app-generator",
+        "module": "../ai-app-generator",
         "name": "AiAppGenerator"
       }
     }
diff --git a/packages/catalog-realm/AiAppGenerator/create-boxel-app-command.ts b/packages/experiments-realm/AiAppGenerator/create-boxel-app-command.ts
similarity index 74%
rename from packages/catalog-realm/AiAppGenerator/create-boxel-app-command.ts
rename to packages/experiments-realm/AiAppGenerator/create-boxel-app-command.ts
index 58da9d62b2..58f088301e 100644
--- a/packages/catalog-realm/AiAppGenerator/create-boxel-app-command.ts
+++ b/packages/experiments-realm/AiAppGenerator/create-boxel-app-command.ts
@@ -6,7 +6,6 @@ import CreateProductRequirementsInstance, {
 import ShowCardCommand from '@cardstack/boxel-host/commands/show-card';
 import WriteTextFileCommand from '@cardstack/boxel-host/commands/write-text-file';
 import GenerateCodeCommand from './generate-code-command';
-import { GenerateCodeInput } from './generate-code-command';
 import { AppCard } from '../app-card';
 import SaveCardCommand from '@cardstack/boxel-host/commands/save-card';
 
@@ -27,36 +26,26 @@ export default class CreateBoxelApp extends Command<
       await createPRDCommand.execute(input);
 
     let showCardCommand = new ShowCardCommand(this.commandContext);
-    let ShowCardInput = await showCardCommand.getInputType();
-
-    let showPRDCardInput = new ShowCardInput();
-    showPRDCardInput.cardToShow = prdCard;
-    await showCardCommand.execute(showPRDCardInput);
+    await showCardCommand.execute({ cardToShow: prdCard });
 
     let generateCodeCommand = new GenerateCodeCommand(this.commandContext);
-    let generateCodeInput = new GenerateCodeInput({
+    let { code, appName } = await generateCodeCommand.execute({
       roomId,
       productRequirements: prdCard,
     });
 
-    let { code, appName } = await generateCodeCommand.execute(
-      generateCodeInput,
-    );
-
     // Generate a unique name for the module using timestamp
     let timestamp = Date.now();
     let moduleName = `generated-apps/${timestamp}/${appName}`;
     let filePath = `${moduleName}.gts`;
     let moduleId = new URL(moduleName, input.realm).href;
     let writeFileCommand = new WriteTextFileCommand(this.commandContext);
-    let writeFileInput = new (await writeFileCommand.getInputType())({
+    await writeFileCommand.execute({
       path: filePath,
       content: code,
       realm: input.realm,
     });
 
-    await writeFileCommand.execute(writeFileInput);
-
     // get the app card def from the module
     let loader = (import.meta as any).loader;
     let module = await loader.import(moduleId + '.gts');
@@ -77,18 +66,13 @@ export default class CreateBoxelApp extends Command<
 
     // save card
     let saveCardCommand = new SaveCardCommand(this.commandContext);
-    let SaveCardInputType = await saveCardCommand.getInputType();
-
-    let saveCardInput = new SaveCardInputType({
+    await saveCardCommand.execute({
       realm: input.realm,
       card: myAppCard,
     });
-    await saveCardCommand.execute(saveCardInput);
 
     // show the app card
-    let showAppCardInput = new ShowCardInput();
-    showAppCardInput.cardToShow = myAppCard;
-    await showCardCommand.execute(showAppCardInput);
+    await showCardCommand.execute({ cardToShow: myAppCard });
 
     return myAppCard;
   }
diff --git a/packages/catalog-realm/AiAppGenerator/create-product-requirements-command.ts b/packages/experiments-realm/AiAppGenerator/create-product-requirements-command.ts
similarity index 82%
rename from packages/catalog-realm/AiAppGenerator/create-product-requirements-command.ts
rename to packages/experiments-realm/AiAppGenerator/create-product-requirements-command.ts
index d87ce8340b..50c1062450 100644
--- a/packages/catalog-realm/AiAppGenerator/create-product-requirements-command.ts
+++ b/packages/experiments-realm/AiAppGenerator/create-product-requirements-command.ts
@@ -11,6 +11,8 @@ import { SkillCard } from 'https://cardstack.com/base/skill-card';
 import SaveCardCommand from '@cardstack/boxel-host/commands/save-card';
 import PatchCardCommand from '@cardstack/boxel-host/commands/patch-card';
 import ReloadCardCommand from '@cardstack/boxel-host/commands/reload-card';
+import CreateAIAssistantRoomCommand from '@cardstack/boxel-host/commands/create-ai-assistant-room';
+import AddSkillsToRoomCommand from '@cardstack/boxel-host/commands/add-skills-to-room';
 
 export class CreateProductRequirementsInput extends CardDef {
   @field targetAudience = contains(StringField);
@@ -40,10 +42,10 @@ export default class CreateProductRequirementsInstance extends Command<
         Update the appTitle.
         Update the prompt to be grammatically accurate.
         Description should be 1 or 2 short sentences.
-        In overview, provide 1 or 2 paragraph summary of the most important ways this app will meet the needs of the target audience. The capabilites of the platform allow creating types that can be linked to other types, and creating fields. 
-        
+        In overview, provide 1 or 2 paragraph summary of the most important ways this app will meet the needs of the target audience. The capabilites of the platform allow creating types that can be linked to other types, and creating fields.
+
         For the schema, consider the types required. Write out the schema as a mermaid class diagram.
-        
+
         NEVER offer to update the card, you MUST call patchCard in your response.`,
     });
   }
@@ -59,23 +61,33 @@ export default class CreateProductRequirementsInstance extends Command<
     let prdCard = new ProductRequirementDocument();
 
     let saveCardCommand = new SaveCardCommand(this.commandContext);
-    let SaveCardInputType = await saveCardCommand.getInputType();
-    await saveCardCommand.execute(
-      new SaveCardInputType({
-        realm: input.realm,
-        card: prdCard,
-      }),
-    );
+    await saveCardCommand.execute({
+      realm: input.realm,
+      card: prdCard,
+    });
     // Get patch command, this takes the card and returns a command that can be used to patch the card
     let patchPRDCommand = new PatchCardCommand(this.commandContext, {
       cardType: ProductRequirementDocument,
     });
 
-    let { roomId } = await this.commandContext.sendAiAssistantMessage({
+    let createRoomCommand = new CreateAIAssistantRoomCommand(
+      this.commandContext,
+    );
+    let { roomId } = await createRoomCommand.execute({
+      name: 'Product Requirements Doc Creation',
+    });
+    let addSkillsToRoomCommand = new AddSkillsToRoomCommand(
+      this.commandContext,
+    );
+    await addSkillsToRoomCommand.execute({
+      roomId,
+      skills: [this.skillCard],
+    });
+    await this.commandContext.sendAiAssistantMessage({
+      roomId,
       show: false, // maybe? open the side panel
       prompt: this.createPrompt(input),
       attachedCards: [prdCard],
-      skillCards: [this.skillCard],
       commands: [{ command: patchPRDCommand, autoExecute: true }], // this should persist over multiple messages, matrix service is responsible to tracking whic
     });
 
diff --git a/packages/catalog-realm/AiAppGenerator/generate-code-command.ts b/packages/experiments-realm/AiAppGenerator/generate-code-command.ts
similarity index 95%
rename from packages/catalog-realm/AiAppGenerator/generate-code-command.ts
rename to packages/experiments-realm/AiAppGenerator/generate-code-command.ts
index 279935d88a..9f95aa6526 100644
--- a/packages/catalog-realm/AiAppGenerator/generate-code-command.ts
+++ b/packages/experiments-realm/AiAppGenerator/generate-code-command.ts
@@ -2,13 +2,13 @@ import {
   CardDef,
   field,
   linksTo,
-  containsMany,
   contains,
 } from 'https://cardstack.com/base/card-api';
 import { Command } from '@cardstack/runtime-common';
 import { SkillCard } from 'https://cardstack.com/base/skill-card';
 import StringField from 'https://cardstack.com/base/string';
 import { ProductRequirementDocument } from '../product-requirement-document';
+import AddSkillsToRoomCommand from '@cardstack/boxel-host/commands/add-skills-to-room';
 
 export class GenerateCodeInput extends CardDef {
   @field productRequirements = linksTo(() => ProductRequirementDocument);
@@ -73,7 +73,7 @@ function constructModule(input: ConstructApplicationCodeInput) {
   import TextAreaField from 'https://cardstack.com/base/text-area';
 import CodeRefField from 'https://cardstack.com/base/code-ref';
 import { Base64ImageField } from 'https://cardstack.com/base/base64-image';
-import { AppCard } from '/catalog/app-card';
+import { AppCard } from '/experiments/app-card';
 import {
   CardDef,
   field,
@@ -91,6 +91,7 @@ import { and, bool, cn } from '@cardstack/boxel-ui/helpers';
 import { baseRealm, getCard } from '@cardstack/runtime-common';
 import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
+import AddSkillsToRoomCommand from '@cardstack/boxel-host/commands/add-skills-to-room';
 import { action } from '@ember/object';
 import type Owner from '@ember/owner';
 import GlimmerComponent from '@glimmer/component';
@@ -254,14 +255,19 @@ import { on } from '@ember/modifier';
     let constructApplicationCodeCommand = new ConstructApplicationCodeCommand(
       this.commandContext,
     );
-
+    let addSkillsToRoomCommand = new AddSkillsToRoomCommand(
+      this.commandContext,
+    );
+    await addSkillsToRoomCommand.execute({
+      roomId: input.roomId,
+      skills: [this.skillCard],
+    });
     await this.commandContext.sendAiAssistantMessage({
       roomId: input.roomId,
       show: false, // maybe? open the side panel
       prompt:
         'Generate code for the application given the product requirements, you do not need to strictly follow the schema if it does not seem appropriate for the application.',
       attachedCards: [input.productRequirements],
-      skillCards: [this.skillCard],
       commands: [
         { command: constructApplicationCodeCommand, autoExecute: true },
       ],
diff --git a/packages/experiments-realm/Author/ad28d989-68a8-4bad-a8dc-05f9f724489c.json b/packages/experiments-realm/Author/ad28d989-68a8-4bad-a8dc-05f9f724489c.json
new file mode 100644
index 0000000000..b9717d4005
--- /dev/null
+++ b/packages/experiments-realm/Author/ad28d989-68a8-4bad-a8dc-05f9f724489c.json
@@ -0,0 +1,51 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "firstName": "Alexandra Maximiliana",
+      "lastName": "Montgomery-Barrington IV",
+      "bio": "A distinguished editorial leader with over a decade of experience shaping content strategies that captivate and engage audiences across digital platforms, Alexandra Maximiliana Montgomery-Barrington IV is renowned for her visionary approach to storytelling and editorial excellence. She has led high-performing teams to produce impactful narratives while driving innovation in the publishing industry. Alexandra is a strategic thinker with a passion for fostering collaboration, ensuring that every project delivers both creative quality and measurable results. When not overseeing editorial initiatives, she enjoys hiking through scenic landscapes, capturing moments through her lens, and immersing herself in a good book.",
+      "fullBio": "Alexandra Maximiliana Montgomery-Barrington IV is a highly respected editorial leader with more than a decade of experience in digital media and content strategy. Known for her keen eye for detail and her ability to craft compelling narratives, she has consistently delivered high-quality content that resonates with diverse audiences. Throughout her career, Alexandra has demonstrated a deep understanding of the evolving digital landscape, balancing creative vision with data-driven insights to produce work that not only engages but also drives measurable results. Her expertise spans editorial direction, content curation, and cross-functional team leadership, enabling her to oversee complex projects from conception to execution.\n\nA strategic thinker and innovative problem solver, Alexandra has a proven track record of building and leading editorial teams that thrive in dynamic environments. She has worked with industry-leading brands, shaping content strategies that align with business goals while maintaining a strong focus on storytelling and audience connection. Her leadership style is rooted in collaboration and fostering a culture of creativity and excellence, ensuring that every project exceeds expectations. Alexandra is also passionate about mentoring and developing talent, helping her teams grow both professionally and personally.\n\nOutside of her professional life, Alexandra is an avid outdoors enthusiast, finding inspiration in nature through hiking and photography. Her love of storytelling extends beyond the written word—capturing moments through her lens allows her to explore new perspectives and deepen her connection to the world around her. When she’s not leading editorial initiatives, you’ll find her immersed in a good book, seeking out new ideas and inspiration to fuel her next project. Alexandra's unique blend of editorial expertise, leadership, and creative passion has made her a trailblazer in the publishing world, constantly pushing the boundaries of what’s possible in digital content.",
+      "quote": "\"Storytelling is the bridge that connects ideas with impact, and great content is the foundation that makes it last.\"",
+      "contactLinks": [
+        {
+          "label": "X",
+          "value": "https://x.com/alexandra.montgomery-barrington-boxel"
+        },
+        {
+          "label": "LinkedIn",
+          "value": "https://linkedin.com/alexandra.montgomery-barrington-boxel"
+        },
+        {
+          "label": "Email",
+          "value": "alexandra.montgomery-barrington@companyname.com"
+        }
+      ],
+      "email": "alexandra.montgomery-barrington@companyname.com",
+      "featuredImage": {
+        "imageUrl": "https://boxel-images.boxel.ai/app-assets/portraits/photo-1521227889351-bf6f5b2e4e37.jpeg",
+        "credit": "Photo via Unsplash",
+        "caption": "Alexandra Maximiliana Montgomery-Barrington IV",
+        "altText": "Alexandra Maximiliana Montgomery-Barrington IV",
+        "size": "actual",
+        "height": null,
+        "width": null
+      },
+      "description": "Editor-in-Chief and Senior Director of Content Strategy, Editorial Innovation, and Cross-Platform Publishing Initiatives",
+      "thumbnailURL": "https://boxel-images.boxel.ai/app-assets/portraits/photo-1521227889351-bf6f5b2e4e37.jpeg"
+    },
+    "relationships": {
+      "blog": {
+        "links": {
+          "self": "../BlogApp/ramped"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../author",
+        "name": "Author"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/Author/alice-enwunder.json b/packages/experiments-realm/Author/alice-enwunder.json
index 5c54d3a8db..371dfc4458 100644
--- a/packages/experiments-realm/Author/alice-enwunder.json
+++ b/packages/experiments-realm/Author/alice-enwunder.json
@@ -4,14 +4,9 @@
     "attributes": {
       "firstName": "Alice",
       "lastName": "Enwunder",
-      "photo": {
-        "altText": null,
-        "size": "actual",
-        "height": null,
-        "width": null,
-        "base64": null
-      },
-      "body": "",
+      "bio": null,
+      "fullBio": null,
+      "quote": "Curiouser and curiouser",
       "contactLinks": [
         {
           "label": "X",
@@ -26,7 +21,25 @@
           "value": "alice@email.com"
         }
       ],
-      "thumbnailURL": "https://images.unsplash.com/photo-1561569912-9f202ecac634?q=80&w=3135&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      "email": null,
+      "featuredImage": {
+        "imageUrl": "https://boxel-images.boxel.ai/app-assets/portraits/photo-1509868918748-a554ad25f858.jpeg",
+        "credit": null,
+        "caption": null,
+        "altText": "Alice Enwunder",
+        "size": "actual",
+        "height": null,
+        "width": null
+      },
+      "description": null,
+      "thumbnailURL": "https://boxel-images.boxel.ai/app-assets/portraits/photo-1509868918748-a554ad25f858.jpeg"
+    },
+    "relationships": {
+      "blog": {
+        "links": {
+          "self": null
+        }
+      }
     },
     "meta": {
       "adoptsFrom": {
diff --git a/packages/experiments-realm/Author/jane-doe.json b/packages/experiments-realm/Author/jane-doe.json
index e1e680616e..01cfb9011f 100644
--- a/packages/experiments-realm/Author/jane-doe.json
+++ b/packages/experiments-realm/Author/jane-doe.json
@@ -4,15 +4,42 @@
     "attributes": {
       "firstName": "Jane",
       "lastName": "Doe",
-      "photo": {
-        "altText": "",
+      "bio": "Jane Doe is the Senior Managing Editor at Ramped.com, where she leads content strategy, editorial direction, and ensures the highest standards of quality across all publications. With over a decade of experience in digital media and editorial management, Jane has a proven track record of shaping impactful narratives, growing engaged audiences, and collaborating with cross-functional teams to deliver compelling content. When she's not editing, you can find her exploring new books, hiking, or indulging in her love of photography.",
+      "fullBio": "Jane Doe is the Senior Managing Editor at *Ramped.com*, where she leads the editorial team in crafting high-impact content that resonates with a diverse, global audience. With over 10 years of experience in digital media, Jane has built a career around her passion for storytelling, strategic content development, and editorial excellence. At *Ramped.com*, she oversees the editorial direction for both long-form features and quick-hit content, ensuring that all materials meet rigorous standards for quality, accuracy, and engagement. Her role involves not only managing content workflows but also driving the site’s content strategy, optimizing for SEO, and integrating new multimedia formats to enhance user experience.\n\nBefore joining *Ramped*, Jane served in senior editorial positions at prominent media organizations, where she was instrumental in shaping editorial voice, increasing readership, and overseeing large teams of writers, editors, and designers. Her ability to adapt to evolving trends in digital media has helped these organizations expand their online presence and build strong, loyal audiences. She is particularly skilled in data-driven content strategies and has worked closely with product, marketing, and analytics teams to optimize content for growth and engagement.\n\nA firm believer in the power of mentorship, Jane is deeply committed to helping young writers develop their craft and grow professionally. She frequently leads editorial workshops and offers guidance on topics ranging from narrative structure to the nuances of digital publishing. Her approach to leadership emphasizes collaboration, creativity, and a keen attention to detail.\n\nWhen she's not editing or refining strategy, Jane enjoys exploring new books across various genres, hiking through nature trails, and experimenting with photography. She is also a dedicated advocate for promoting diversity in media and creating inclusive spaces for underrepresented voices within the industry.\n\nHer dedication to her craft and her team has made Jane an invaluable asset to *Ramped.com*, where she continues to shape the future of digital content and drive the organization’s mission forward.",
+      "quote": "“Great content isn’t just about words on a page—it's about creating experiences that resonate with people, spark conversation, and drive meaningful action.”",
+      "contactLinks": [
+        {
+          "label": "X",
+          "value": "https://x.com/jane-doe-boxel"
+        },
+        {
+          "label": "LinkedIn",
+          "value": "https://linkedin.com/jane-doe-boxel"
+        },
+        {
+          "label": "Email",
+          "value": "jane.doe@email.com"
+        }
+      ],
+      "email": "jane.doe@email.com",
+      "featuredImage": {
+        "imageUrl": "https://boxel-images.boxel.ai/app-assets/portraits/photo-1481214110143-ed630356e1bb.jpeg",
+        "credit": "",
+        "caption": null,
+        "altText": "Jane Doe",
         "size": "actual",
         "height": null,
-        "width": null,
-        "base64": null
+        "width": null
       },
-      "body": null,
-      "thumbnailURL": null
+      "description": "Senior Managing Editor at Ramped.com",
+      "thumbnailURL": "https://boxel-images.boxel.ai/app-assets/portraits/photo-1481214110143-ed630356e1bb.jpeg"
+    },
+    "relationships": {
+      "blog": {
+        "links": {
+          "self": "../BlogApp/ramped"
+        }
+      }
     },
     "meta": {
       "adoptsFrom": {
diff --git a/packages/experiments-realm/BilingualBlog/85de4d7a-e9d8-459d-80a7-d9f0508c9ea1.json b/packages/experiments-realm/BilingualBlog/85de4d7a-e9d8-459d-80a7-d9f0508c9ea1.json
index 4721d4fcba..bf334b6daa 100644
--- a/packages/experiments-realm/BilingualBlog/85de4d7a-e9d8-459d-80a7-d9f0508c9ea1.json
+++ b/packages/experiments-realm/BilingualBlog/85de4d7a-e9d8-459d-80a7-d9f0508c9ea1.json
@@ -3,9 +3,19 @@
     "type": "card",
     "attributes": {
       "translation": "",
-      "title": null,
+      "headline": "",
       "slug": null,
       "body": "To quote wikipedia:\n\nMicroblogging is a form of blogging using short posts without titles known as microposts[1][2][3] (or status updates on a minority of websites like Meta Platforms'). Microblogs \"allow users to exchange small elements of content such as short sentences, individual images, or video links\",[1] which may be the major reason for their popularity.[4] Some popular social networks such as Twitter, Threads, Mastodon, Tumblr, Koo, and Instagram can be viewed as collections of microblogs.",
+      "publishDate": null,
+      "featuredImage": {
+        "imageUrl": null,
+        "credit": null,
+        "caption": null,
+        "altText": null,
+        "size": "actual",
+        "height": null,
+        "width": null
+      },
       "description": null,
       "thumbnailURL": null
     },
@@ -14,6 +24,11 @@
         "links": {
           "self": null
         }
+      },
+      "blog": {
+        "links": {
+          "self": null
+        }
       }
     },
     "meta": {
diff --git a/packages/experiments-realm/BlogPost/mad-as-a-hatter.json b/packages/experiments-realm/BlogPost/mad-as-a-hatter.json
index b463d803e1..56fc17e17a 100644
--- a/packages/experiments-realm/BlogPost/mad-as-a-hatter.json
+++ b/packages/experiments-realm/BlogPost/mad-as-a-hatter.json
@@ -2,10 +2,19 @@
   "data": {
     "type": "card",
     "attributes": {
-      "title": "Mad As a Hatter",
+      "headline": "Mad As a Hatter",
       "slug": "mad-as-a-hatter",
       "body": "## Where it all begins\n\nThis is a story of a man named [Brady](https://eightiesforbrady.com), who was bringing up three very lovely girls under the rule of the Queen of Hearts.",
       "publishDate": "2034-11-20T18:00:00.000Z",
+      "featuredImage": {
+        "imageUrl": "https://images.unsplash.com/photo-1551422788-18e2a1f5bb88?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        "credit": null,
+        "caption": "We're all mad here.",
+        "altText": "",
+        "size": "contain",
+        "height": 400,
+        "width": null
+      },
       "description": null,
       "thumbnailURL": "https://images.unsplash.com/photo-1551422788-18e2a1f5bb88?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
     },
@@ -14,6 +23,11 @@
         "links": {
           "self": "../Author/alice-enwunder"
         }
+      },
+      "blog": {
+        "links": {
+          "self": null
+        }
       }
     },
     "meta": {
diff --git a/packages/experiments-realm/BlogPost/ultimate-guide-remote-work.json b/packages/experiments-realm/BlogPost/ultimate-guide-remote-work.json
index 858eae7817..e4ad3ac3a6 100644
--- a/packages/experiments-realm/BlogPost/ultimate-guide-remote-work.json
+++ b/packages/experiments-realm/BlogPost/ultimate-guide-remote-work.json
@@ -2,10 +2,19 @@
   "data": {
     "type": "card",
     "attributes": {
-      "title": "The Ultimate Guide to Remote Work",
+      "headline": "The Ultimate Guide to Remote Work",
       "slug": "ultimate-guide-remote-work",
       "body": "| Table of Contents  |\n| ----------- | \n| <ol><li>[Introduction](#introduction)</li><li>[Benefits of Remote Work](#benefits-of-remote-work)</li><li>[Challenges and Solutions](#challenges-and-solutions)</li><li>[Essential Tools for Remote Workers](#essential-tools-for-remote-workers)</li><li>[Best Practices for Remote Work](#best-practices-for-remote-work)</li><li>[Conclusion](#conclusion)</li></ol>|\n\n<h2 id=\"introduction\">Introduction</h2>\n\nRemote work has revolutionized the traditional workplace, offering flexibility and autonomy like never before. Whether you're a freelancer, an entrepreneur, or part of a company embracing flexible work arrangements, understanding how to make the most of remote work is crucial for success.\n\n<h2 id='benefits-of-remote-work'>Benefits of Remote Work</h2>\n\n### Flexibility\n\nOne of the most significant advantages of remote work is the ability to **work from anywhere**. Whether you prefer the comfort of your home, a bustling coffee shop, or a serene beach, the choice is yours.\n\n> \"The freedom to choose your workspace can greatly enhance creativity and job satisfaction.\" \n>\n> — Jane Doe, Remote Work Expert\n\n### Increased Productivity\n\nWithout the usual office distractions, many remote workers find they can **focus better** and **get more done** in less time.\n\n### Improved Work-Life Balance\n\nEliminating the daily commute gives you more time for personal activities, helping to reduce stress and improve overall well-being.\n\n<figure>\n<img src=\"https://images.unsplash.com/photo-1588196749597-9ff075ee6b5b?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8cmVtb3RlJTIwd29ya3xlbnwwfHwwfHx8MA%3D%3D\" alt=\"Work-life balance\">\n<figcaption>Achieving a healthy work-life balance is easier with remote work.</figcaption>\n</figure>\n\n<h2 id='challenges-and-solutions'>Challenges and Solutions</h2>\n\nWhile remote work offers many benefits, it also comes with its own set of challenges.\n\n### Overcoming Isolation\n\n**Challenge:** Feeling isolated from colleagues can lead to decreased motivation.\n\n**Solution:**\n- **Regular Check-Ins**: Schedule daily or weekly video calls with your team.\n- **Join Online Communities**: Engage with professionals in your field through forums or social media.\n\n> \"Staying connected is essential. Virtual coffee breaks can foster team spirit even when miles apart.\" \n>\n> — Remote Work Enthusiast\n\n### Effective Communication\n\n**Challenge**: Misunderstandings can occur without face-to-face interaction.\n\n**Solution**:\n- **Use Video Conferencing**: Tools like Zoom or Skype can help mimic in-person meetings.\n- **Clarify Expectations**: Be explicit in your communications to avoid confusion.\n\n### Time Management Strategies\n\n**Challenge**: Blurring lines between work and personal life can lead to burnout.\n\n**Solution**:\n1. **Set Boundaries**: Define your working hours and stick to them.\n2. **Take Regular Breaks**: Use techniques like the Pomodoro Technique to maintain focus.\n3. **Prioritize Tasks**: Create a to-do list and rank tasks by importance.\n\nHere's an example of a simple task list:\n- [x] Define working hours\n- [ ] Schedule regular breaks\n- [ ] Create daily to-do lists\n\n<h2 id=\"essential-tools-for-remote-workers\">Essential Tools for Remote Workers</h2>\n\n### Communication Tools\n\n- **[Slack](https://slack.com/)**: For real-time messaging and collaboration.\n- **[Zoom](https://zoom.us/)**: For video conferencing and virtual meetings.\n- **[Microsoft Teams](https://www.microsoft.com/en-us/microsoft-teams/group-chat-software)**: Integrates with Office 365 for seamless collaboration.\n\n#### Sample Slack Configuration\n\n```json\n{\n  \"channel\": \"#remote-work\",\n  \"username\": \"JaneDoe\",\n  \"icon_emoji\": \"💻\"\n}\n```\n\n### Project Management Tools\n\n- **[Trello](https://trello.com/)**: Organize tasks with boards and cards.\n- **[Asana](https://asana.com/)**: Manage projects and track progress.\n- **[Basecamp](https://basecamp.com/)**: Combines messaging, task management, and file storage.\n\n#### Trello Board Example\n\n- **To Do**\n   - Write blog post\n- **In Progress**\n  - Research remote work tools\n- **Done**\n  - Set up home office\n\n### Productivity Apps\n\n- **[Todoist](https://todoist.com/)**: Keep track of tasks and deadlines.\n- **[RescueTime](https://www.rescuetime.com/)**: Monitor how you spend your time online.\n- **[Focus@Will](https://www.focusatwill.com/)**: Music designed to improve concentration.\n\n<figure>\n<img src=\"https://plus.unsplash.com/premium_photo-1684197414542-a7b3ef29f604?q=80&w=3132&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\" alt=\"Project Management Tools\">\n<figcaption>Utilizing the right tools can streamline your workflow.</figcaption>\n</figure>\n\n<h2 id=\"best-practices-for-remote-work\">Best Practices for Remote Work</h2>\n\n### Setting Up a Workspace\n\n- **Choose the Right Spot**: Find a quiet area with minimal distractions.\n- **Ergonomic Furniture**: Invest in a good chair and desk to maintain proper posture.\n- **Proper Lighting**: Ensure your workspace is well-lit to reduce eye strain.\n\n> \"Your workspace should inspire you to do your best work every day.\"  \n>\n> — Productivity Coach\n\n### Establishing a Routine\n\n- **Consistent Schedule**: Start and end work at the same times each day.\n- **Morning Rituals**: Activities like exercise or reading can prepare you mentally for the day.\n- **Plan Your Day**: Outline tasks and set achievable goals.\n\nHere's a sample morning routine:\n\n1. **6:30 AM**: Wake up and meditate.\n2. **7:00 AM**: Exercise for 30 minutes.\n3. **7:30 AM**: Have a healthy breakfast.\n4. **8:00 AM**: Start work.\n\n### Staying Connected\n\n- **Regular Updates**: Keep your team informed about your progress.\n- **Virtual Social Events**: Organize online gatherings to build camaraderie.\n- **Open Communication Channels**: Encourage feedback and discussions.\n\n<h2 id=\"conclusion\">Conclusion</h2>\n\nEmbracing remote work can lead to greater satisfaction and efficiency. By understanding the benefits and proactively addressing the challenges, you can create a fulfilling remote work experience.\n\n~~Working from the office every day is mandatory.~~ Remote work offers a flexible alternative that benefits both employers and employees.\n\n---\n\n*Interested in more tips? Check out our other articles on remote work and productivity.*\n",
       "publishDate": "2024-11-05T20:00:00.000Z",
+      "featuredImage": {
+        "imageUrl": "https://images.unsplash.com/photo-1614624532983-4ce03382d63d?q=80&w=3131&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+        "credit": "Image by Unsplash",
+        "caption": "Success in remote work is achievable with the right approach.",
+        "altText": "Desktop setup with laptop, monitor, keyboard and mouse, phone, headphones, and a cup of coffee",
+        "size": "actual",
+        "height": null,
+        "width": null
+      },
       "description": "In today's digital age, remote work has transformed from a luxury to a necessity. This comprehensive guide will help you navigate the world of remote work, offering tips, tools, and best practices for success.",
       "thumbnailURL": "https://images.unsplash.com/photo-1614624532983-4ce03382d63d?q=80&w=3131&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
     },
diff --git a/packages/experiments-realm/BlogPost/urban-living-future-sustainable.json b/packages/experiments-realm/BlogPost/urban-living-future-sustainable.json
index ff69a6cccb..b4ec40cfa4 100644
--- a/packages/experiments-realm/BlogPost/urban-living-future-sustainable.json
+++ b/packages/experiments-realm/BlogPost/urban-living-future-sustainable.json
@@ -2,10 +2,19 @@
   "data": {
     "type": "card",
     "attributes": {
-      "title": "The Future of Urban Living: Skyscrapers or Sustainable Communities?",
+      "headline": "The Future of Urban Living: Skyscrapers or Sustainable Communities?",
       "slug": "urban-living-future-sustainable",
       "body": null,
       "publishDate": null,
+      "featuredImage": {
+        "imageUrl": null,
+        "credit": null,
+        "caption": null,
+        "altText": null,
+        "size": "actual",
+        "height": null,
+        "width": null
+      },
       "description": "As our cities grow ever upward, should we continue to build, or focus on creating? This article explores the pros and cons of both approaches.",
       "thumbnailURL": "https://images.unsplash.com/photo-1548182880-8b7b2af2caa2?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
     },
diff --git a/packages/experiments-realm/CatalogEntry/app.json b/packages/experiments-realm/CatalogEntry/app.json
index 9d6fd1e2d9..bde984da5e 100644
--- a/packages/experiments-realm/CatalogEntry/app.json
+++ b/packages/experiments-realm/CatalogEntry/app.json
@@ -6,7 +6,7 @@
       "description": "Catalog entry for AppCard",
       "isField": false,
       "ref": {
-        "module": "/catalog/app-card",
+        "module": "../app-card",
         "name": "AppCard"
       }
     },
diff --git a/packages/experiments-realm/CatalogEntry/fields/featured-image-field.json b/packages/experiments-realm/CatalogEntry/fields/featured-image-field.json
new file mode 100644
index 0000000000..33a8ef0aed
--- /dev/null
+++ b/packages/experiments-realm/CatalogEntry/fields/featured-image-field.json
@@ -0,0 +1,19 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "title": "Featured Image Field",
+      "isField": true,
+      "ref": {
+        "module": "../../fields/featured-image",
+        "name": "FeaturedImageField"
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/catalog-entry",
+        "name": "CatalogEntry"
+      }
+    }
+  }
+}
diff --git a/packages/experiments-realm/Contact/a01fc5c9-d70d-4b9c-aae4-384cf2b79b25.json b/packages/experiments-realm/Contact/a01fc5c9-d70d-4b9c-aae4-384cf2b79b25.json
index 0b7bb1a6f1..a76a866f81 100644
--- a/packages/experiments-realm/Contact/a01fc5c9-d70d-4b9c-aae4-384cf2b79b25.json
+++ b/packages/experiments-realm/Contact/a01fc5c9-d70d-4b9c-aae4-384cf2b79b25.json
@@ -4,23 +4,36 @@
     "attributes": {
       "firstName": "David Paul",
       "lastName": "Jackson",
+      "position": null,
       "department": "IT",
       "primaryEmail": "david@gmail.com",
-      "secondaryEmail": "david@gmail.com",
+      "secondaryEmail": "david23232@gmail.com",
       "phoneMobile": {
+        "type": "office",
         "country": 1,
         "area": 415,
-        "phoneNumber": 1112222
+        "number": 123456
       },
       "phoneOffice": {
+        "type": null,
         "country": null,
         "area": null,
-        "phoneNumber": null
+        "number": null
       },
       "status": {
         "index": 1,
         "label": "Lead"
       },
+      "socialLinks": [
+        {
+          "label": "LinkedIn",
+          "value": "davidlinkedin.com"
+        },
+        {
+          "label": "X",
+          "value": "x.com"
+        }
+      ],
       "description": null,
       "thumbnailURL": "https://images.pexels.com/photos/4571943/pexels-photo-4571943.jpeg?auto=compress&cs=tinysrgb&w=300&h=300&dpr=1"
     },
diff --git a/packages/experiments-realm/Customer/0e5aec99-798b-4417-9426-a338432e0ee5.json b/packages/experiments-realm/Customer/0e5aec99-798b-4417-9426-a338432e0ee5.json
index ee58a7fad8..658afdf56b 100644
--- a/packages/experiments-realm/Customer/0e5aec99-798b-4417-9426-a338432e0ee5.json
+++ b/packages/experiments-realm/Customer/0e5aec99-798b-4417-9426-a338432e0ee5.json
@@ -2,34 +2,45 @@
   "data": {
     "type": "card",
     "attributes": {
-      "name": "Sophia Nguyen",
-      "primaryEmail": null,
-      "secondaryEmail": null,
+      "firstName": "Elma",
+      "lastName": "Odsey",
+      "position": "Head of Recruitment",
+      "department": "app",
+      "primaryEmail": "elma@gmail.com",
+      "secondaryEmail": "elmaodsey@gmail.com",
       "phoneMobile": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
+        "type": "mobile",
+        "country": 6,
+        "area": 10,
+        "number": 3810923
       },
       "phoneOffice": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
-      },
-      "socialLinks": {
-        "twitterURL": null,
-        "linkedInURL": null
+        "type": "office",
+        "country": 615,
+        "area": 724,
+        "number": 3789
       },
       "status": {
-        "index": null,
-        "label": null
+        "index": 0,
+        "label": "Customer"
       },
+      "socialLinks": [
+        {
+          "label": "LinkedIn",
+          "value": "https://www.google.com/"
+        },
+        {
+          "label": "X",
+          "value": "https://www.google.com/"
+        }
+      ],
       "description": null,
-      "thumbnailURL": null
+      "thumbnailURL": "https://images.pexels.com/photos/1624229/pexels-photo-1624229.jpeg?auto=compress&cs=tinysrgb&w=300&h=300&dpr=2"
     },
     "relationships": {
       "company": {
         "links": {
-          "self": "../CompanyCard/9bef6b44-dde1-46c7-8e18-12f754a4f32c"
+          "self": "../Company/9203c173-3420-44b3-863d-90defd7c57c8"
         }
       }
     },
diff --git a/packages/experiments-realm/Customer/67e87a6c-00d0-4c48-9318-f0c96daa4cae.json b/packages/experiments-realm/Customer/67e87a6c-00d0-4c48-9318-f0c96daa4cae.json
index e3b02fefb0..3dfbfafb60 100644
--- a/packages/experiments-realm/Customer/67e87a6c-00d0-4c48-9318-f0c96daa4cae.json
+++ b/packages/experiments-realm/Customer/67e87a6c-00d0-4c48-9318-f0c96daa4cae.json
@@ -2,25 +2,40 @@
   "data": {
     "type": "card",
     "attributes": {
-      "name": "Olivia Chen",
-      "primaryEmail": null,
-      "secondaryEmail": null,
+      "firstName": "Sophia",
+      "lastName": "Nguyen",
+      "position": "Sale Manager",
+      "department": "app",
+      "primaryEmail": "sophia@gmail.com",
+      "secondaryEmail": "sophiaNguyen@gmail.com",
       "phoneMobile": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
+        "type": "mobile",
+        "country": 1,
+        "area": 510,
+        "number": 5550145
       },
       "phoneOffice": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
+        "type": "office",
+        "country": 1,
+        "area": 510,
+        "number": 5552345
       },
       "status": {
-        "index": 1,
-        "label": "Lead"
+        "index": 0,
+        "label": "Customer"
       },
+      "socialLinks": [
+        {
+          "label": "LinkedIn",
+          "value": "https://www.google.com/"
+        },
+        {
+          "label": "X",
+          "value": "https://www.google.com/"
+        }
+      ],
       "description": null,
-      "thumbnailURL": null
+      "thumbnailURL": "https://images.pexels.com/photos/4974417/pexels-photo-4974417.jpeg?auto=compress&cs=tinysrgb&w=300&h=300&dpr=2"
     },
     "relationships": {
       "company": {
@@ -36,4 +51,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/Customer/7db76dab-19af-4069-9850-878fd54cfc2a.json b/packages/experiments-realm/Customer/7db76dab-19af-4069-9850-878fd54cfc2a.json
deleted file mode 100644
index 91c2e14d3e..0000000000
--- a/packages/experiments-realm/Customer/7db76dab-19af-4069-9850-878fd54cfc2a.json
+++ /dev/null
@@ -1,43 +0,0 @@
-{
-  "data": {
-    "type": "card",
-    "attributes": {
-      "name": null,
-      "primaryEmail": null,
-      "secondaryEmail": null,
-      "phoneMobile": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
-      },
-      "phoneOffice": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
-      },
-      "socialLinks": {
-        "twitterURL": null,
-        "linkedInURL": null
-      },
-      "status": {
-        "index": null,
-        "label": null
-      },
-      "description": null,
-      "thumbnailURL": null
-    },
-    "relationships": {
-      "company": {
-        "links": {
-          "self": null
-        }
-      }
-    },
-    "meta": {
-      "adoptsFrom": {
-        "module": "../crm/customer",
-        "name": "Customer"
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/experiments-realm/Deal/4fdd3053-14f1-4800-827f-d3e2a5c44ae8.json b/packages/experiments-realm/Deal/4fdd3053-14f1-4800-827f-d3e2a5c44ae8.json
index d3b67dcc53..bd5dbdf633 100644
--- a/packages/experiments-realm/Deal/4fdd3053-14f1-4800-827f-d3e2a5c44ae8.json
+++ b/packages/experiments-realm/Deal/4fdd3053-14f1-4800-827f-d3e2a5c44ae8.json
@@ -13,4 +13,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/ExperimentsFieldsPreview/de720f57-964b-4a09-8d52-80cd8bb4b739.json b/packages/experiments-realm/ExperimentsFieldsPreview/de720f57-964b-4a09-8d52-80cd8bb4b739.json
index 50f265f7ee..d241b9fcdb 100644
--- a/packages/experiments-realm/ExperimentsFieldsPreview/de720f57-964b-4a09-8d52-80cd8bb4b739.json
+++ b/packages/experiments-realm/ExperimentsFieldsPreview/de720f57-964b-4a09-8d52-80cd8bb4b739.json
@@ -7,6 +7,19 @@
         "https://boxel/alice",
         "https://boxel/dan"
       ],
+      "location": {
+        "addressLine1": "285 Fulton Street ",
+        "addressLine2": null,
+        "city": "New York City",
+        "state": "NY",
+        "postalCode": "10007",
+        "country": {
+          "name": "United States of America",
+          "code": "US"
+        },
+        "poBoxNumber": null
+      },
+      "website": "https://cardstack.com/",
       "email": "alice@email.com",
       "emails": [
         "alice@email.com",
@@ -30,6 +43,35 @@
           "value": "https://boxel/alice"
         }
       ],
+      "featuredImage": {
+        "imageUrl": "https://boxel-images.boxel.ai/app-assets/portraits/photo-1479936343636-73cdc5aae0c3.jpeg",
+        "credit": "Photo by Unsplash",
+        "caption": "It's a new day, it's a new life.",
+        "altText": "Woman smiling with the glow of sun in the background",
+        "size": "actual",
+        "height": null,
+        "width": 300
+      },
+      "images": [
+        {
+          "imageUrl": "https://boxel-images.boxel.ai/app-assets/portraits/photo-1521119989659-a83eee488004.jpeg",
+          "credit": "Photo by Unsplash - Ut velit modi sed aliquid molestiae in unde voluptas.",
+          "caption": "Nam voluptatem nostrum qui aperiam rerum non similique porro sed iusto placeat cum sequi dolore. ",
+          "altText": "Portrait of man on a rooftop",
+          "size": "actual",
+          "height": null,
+          "width": null
+        },
+        {
+          "imageUrl": "https://boxel-images.boxel.ai/app-assets/portraits/photo-1496345875659-11f7dd282d1d.jpeg",
+          "credit": "Photo by Unsplash - Quis quibusdam rem rerum maiores 33 galisum quidem.",
+          "caption": "Aut asperiores impedit nam aperiam dolore ex libero voluptate.",
+          "altText": "Man with dark sunglasses",
+          "size": "actual",
+          "height": null,
+          "width": null
+        }
+      ],
       "title": "Custom Field Preview",
       "description": null,
       "thumbnailURL": null
diff --git a/packages/experiments-realm/Lead/1dbcc3e8-fe3c-4c4a-ba66-ff7d637a7358.json b/packages/experiments-realm/Lead/1dbcc3e8-fe3c-4c4a-ba66-ff7d637a7358.json
index c71eab2e1e..a265f3e625 100644
--- a/packages/experiments-realm/Lead/1dbcc3e8-fe3c-4c4a-ba66-ff7d637a7358.json
+++ b/packages/experiments-realm/Lead/1dbcc3e8-fe3c-4c4a-ba66-ff7d637a7358.json
@@ -2,34 +2,45 @@
   "data": {
     "type": "card",
     "attributes": {
-      "name": "Ethan Rodriguez",
-      "primaryEmail": null,
-      "secondaryEmail": null,
+      "firstName": "Ethan",
+      "lastName": "Smith",
+      "position": "Software Engineer",
+      "department": "app",
+      "primaryEmail": "ethan@gmail.com",
+      "secondaryEmail": "ethanSmith@gmail.com",
       "phoneMobile": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
+        "type": "mobile",
+        "country": 1,
+        "area": 510,
+        "number": 123456
       },
       "phoneOffice": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
-      },
-      "socialLinks": {
-        "twitterURL": null,
-        "linkedInURL": null
+        "type": "office",
+        "country": 1,
+        "area": 510,
+        "number": 2442322
       },
       "status": {
-        "index": null,
-        "label": null
+        "index": 1,
+        "label": "Lead"
       },
+      "socialLinks": [
+        {
+          "label": "LinkedIn",
+          "value": "https://www.google.com/"
+        },
+        {
+          "label": "X",
+          "value": "https://www.google.com/"
+        }
+      ],
       "description": null,
-      "thumbnailURL": null
+      "thumbnailURL": "https://images.pexels.com/photos/1681010/pexels-photo-1681010.jpeg?auto=compress&cs=tinysrgb&w=300&h=300&dpr=2"
     },
     "relationships": {
       "company": {
         "links": {
-          "self": "../CompanyCard/9bef6b44-dde1-46c7-8e18-12f754a4f32c"
+          "self": "../Company/e1856419-27b0-4ce3-98fe-759d21c7144f"
         }
       }
     },
diff --git a/packages/experiments-realm/Lead/9d7b2f20-c7da-4ddc-8e77-b75d88c97b48.json b/packages/experiments-realm/Lead/9d7b2f20-c7da-4ddc-8e77-b75d88c97b48.json
index 504146253b..e33b764cb3 100644
--- a/packages/experiments-realm/Lead/9d7b2f20-c7da-4ddc-8e77-b75d88c97b48.json
+++ b/packages/experiments-realm/Lead/9d7b2f20-c7da-4ddc-8e77-b75d88c97b48.json
@@ -2,34 +2,45 @@
   "data": {
     "type": "card",
     "attributes": {
-      "name": "Liam O'Connor",
-      "primaryEmail": null,
-      "secondaryEmail": null,
+      "firstName": "Liam",
+      "lastName": "O'Connor",
+      "position": "Data Analystic",
+      "department": "app",
+      "primaryEmail": "liam@gmail.com",
+      "secondaryEmail": "liamOConnor@gmail.com",
       "phoneMobile": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
+        "type": "mobile",
+        "country": 1,
+        "area": 510,
+        "number": 2323423
       },
       "phoneOffice": {
-        "country": null,
-        "area": null,
-        "phoneNumber": null
-      },
-      "socialLinks": {
-        "twitterURL": null,
-        "linkedInURL": null
+        "type": "office",
+        "country": 1,
+        "area": 510,
+        "number": 1231232
       },
       "status": {
-        "index": null,
-        "label": null
+        "index": 1,
+        "label": "Lead"
       },
+      "socialLinks": [
+        {
+          "label": "LinkedIn",
+          "value": "https://www.google.com/"
+        },
+        {
+          "label": "X",
+          "value": "https://www.google.com/"
+        }
+      ],
       "description": null,
-      "thumbnailURL": null
+      "thumbnailURL": "https://images.pexels.com/photos/3785079/pexels-photo-3785079.jpeg?auto=compress&cs=tinysrgb&w=300&h=300&dpr=2"
     },
     "relationships": {
       "company": {
         "links": {
-          "self": "../CompanyCard/b9ee2c7c-8e42-4c36-82ee-84f3536bb459"
+          "self": "../Company/e1856419-27b0-4ce3-98fe-759d21c7144f"
         }
       }
     },
@@ -40,4 +51,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/experiments-realm/ProductRequirementDocument/4165a295-e5ed-4922-a271-3fe49c79b482.json b/packages/experiments-realm/ProductRequirementDocument/4165a295-e5ed-4922-a271-3fe49c79b482.json
index 86f5e8e2cc..094ca7f3fc 100644
--- a/packages/experiments-realm/ProductRequirementDocument/4165a295-e5ed-4922-a271-3fe49c79b482.json
+++ b/packages/experiments-realm/ProductRequirementDocument/4165a295-e5ed-4922-a271-3fe49c79b482.json
@@ -27,7 +27,7 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "/catalog/product-requirement-document",
+        "module": "/experiments/product-requirement-document",
         "name": "ProductRequirementDocument"
       }
     }
diff --git a/packages/experiments-realm/ProductRequirementDocument/6724b1e4-e620-4e62-86c4-4cab1c132170.json b/packages/experiments-realm/ProductRequirementDocument/6724b1e4-e620-4e62-86c4-4cab1c132170.json
index a5e6999396..19d3a540e1 100644
--- a/packages/experiments-realm/ProductRequirementDocument/6724b1e4-e620-4e62-86c4-4cab1c132170.json
+++ b/packages/experiments-realm/ProductRequirementDocument/6724b1e4-e620-4e62-86c4-4cab1c132170.json
@@ -20,7 +20,7 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "/catalog/product-requirement-document",
+        "module": "/experiments/product-requirement-document",
         "name": "ProductRequirementDocument"
       }
     }
diff --git a/packages/experiments-realm/ProductRequirementDocument/8a2268d9-89f9-4d4c-ab56-dfb4471814a4.json b/packages/experiments-realm/ProductRequirementDocument/8a2268d9-89f9-4d4c-ab56-dfb4471814a4.json
index 8de49344f4..85ad3f55a5 100644
--- a/packages/experiments-realm/ProductRequirementDocument/8a2268d9-89f9-4d4c-ab56-dfb4471814a4.json
+++ b/packages/experiments-realm/ProductRequirementDocument/8a2268d9-89f9-4d4c-ab56-dfb4471814a4.json
@@ -20,7 +20,7 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "/catalog/product-requirement-document",
+        "module": "/experiments/product-requirement-document",
         "name": "ProductRequirementDocument"
       }
     }
diff --git a/packages/catalog-realm/SkillCard/app-generator.json b/packages/experiments-realm/SkillCard/app-generator.json
similarity index 86%
rename from packages/catalog-realm/SkillCard/app-generator.json
rename to packages/experiments-realm/SkillCard/app-generator.json
index ed861d249a..4dc125c128 100644
--- a/packages/catalog-realm/SkillCard/app-generator.json
+++ b/packages/experiments-realm/SkillCard/app-generator.json
@@ -2,7 +2,7 @@
   "data": {
     "type": "card",
     "attributes": {
-      "instructions": "The user has shared with you a product requirement document for an application they want to build. You must build that. Look at the domain for the area they are interested in and use your general knowledge to ensure data structures and the linkages between them are created.\n\nYou are a software engineer specializing in Boxel development. Boxel is a platform where people can create Cards, which under the hood are built out of glimmer components and ember. You are designed to assist users with code-related queries, troubleshooting, and best practices in this specific domain. You should ask for clarification when the user's query is ambiguous or lacks detail, but should also be able to make reasonable assumptions based on typical software engineering practices.\n\nIf the user wants to make something, they mostly want to create a Card. Cards are independent linkable items that get an ID. Fields are contained within cards, so sometimes a user wants a custom field (derived from FieldDef), but usually it's creating a card (derived from CardDef).\n\nUse typescript for the code. Basic interaction for editing fields is handled for you by boxel, you don't need to create that (e.g. StringField has an edit template that allows a user to edit the data). Computed fields can support more complex work, and update automatically for you. Interaction (button clicks, filtering on user typed content) will require work on templates that will happen elsewhere and is not yours to do.\n\nNever leave sections of code unfilled or with placeholders, finish all code you write.\n\nPut all classes in the same codeblock/file, and have all CardDefs exported (e.g. export class MyCard extends CardDef)\n\n\nYou have available:\n\nStringField\nMarkdownField\nNumberField\nBooleanField\nDateField\nDateTimeField\n\nConstruct any more complex data structures from these\n\nFields do not have default values.\n\nUse the () => format when *and only when* you need to define classes out of order\n\nEXAMPLE CODE, you MUST include the imports shown in this example :\n\n```gts\n\nimport { Component, CardDef, FieldDef, linksTo, linksToMany, field, contains, containsMany } from 'https://cardstack.com/base/card-api';\nimport StringField from 'https://cardstack.com/base/string';\nimport BooleanField from 'https://cardstack.com/base/boolean';\nimport DateField from 'https://cardstack.com/base/date';\nimport DateTimeField from 'https://cardstack.com/base/datetime';\nimport NumberField from 'https://cardstack.com/base/number';\n\nimport MarkdownField from 'https://cardstack.com/base/markdown';\n\n\n\nclass MyCustomField extends FieldDef {\n  @field nestedField = contains(NumberField);\n  @field nestedOtherField = contains(BooleanField);\n}\n\nexport class OutOfOrderDeclaration extends CardDef {\n    static displayName = 'OutOfOrderDeclaration';\n\n    @field linkToCardDefinedLaterInFile = linksTo(() => MyCustomCard);\n}\n\nexport class MyCustomCard  extends CardDef {\n  static displayName = 'BoxelBuddyGuestList';\n\n  @field structuredData = contains(MyCustomField);\n\n  // linksTo and linksToMany \n  @field linkedData = linksToMany(AnotherCard);\n\n  // A field that is computed from other data in the card\n @field computedData = contains(NumberField, {\n   computeVia: function (this: MyCustomCard) {\n     // implementation logic here\n     return 1;\n   },\n });\n \nexport class InOrderDeclaration extends CardDef {\n    static displayName = 'InOrderDeclaration';\n\n    @field linkToCardDefinedLaterInFile = linksTo(MyCustomCard);\n}\n\n}\n```\n\nImportant:\n\nIf a user is asking  you to make, help or create something, assume they mean a boxel card unless they specifically request an image or logo.\n\n\nRemember to define a field the following syntax is used:\n\n  @field fieldname = contains(FieldType);\n  @field fieldname = containsMany(FieldType);\n\nAnd for linking to other cards:\n\n  @field fieldname = linksTo(CardType);\n  @field fieldname = linksToMany(CardType);\n\nYou must also write an app card. The app card definition should extend AppCard. Here is the code you must use to import the AppCard: `import { AppCard } from '/catalog/app-card';`\n\nYou can ask followups\n\nYou can propose new/improved data structures.\n\nTalk through the problem and structures, specifying how each should link to each other (this is very important), then write the code. \n\nYOU MUST CONSIDER LINKS BETWEEN THESE TYPES. Make sure common entities are extracted as their own types and that linksTo or linksToMany are used to connect the cards that need to be connected.\n\nPut it in a codeblock.\n\nRemember, if in the code a card class is used before it is defined, you must use the () => syntax. All CardDef classes should be exported classes.\n\nAsk the user if they want you to use the generated code to create a new app module.",
+      "instructions": "The user has shared with you a product requirement document for an application they want to build. You must build that. Look at the domain for the area they are interested in and use your general knowledge to ensure data structures and the linkages between them are created.\n\nYou are a software engineer specializing in Boxel development. Boxel is a platform where people can create Cards, which under the hood are built out of glimmer components and ember. You are designed to assist users with code-related queries, troubleshooting, and best practices in this specific domain. You should ask for clarification when the user's query is ambiguous or lacks detail, but should also be able to make reasonable assumptions based on typical software engineering practices.\n\nIf the user wants to make something, they mostly want to create a Card. Cards are independent linkable items that get an ID. Fields are contained within cards, so sometimes a user wants a custom field (derived from FieldDef), but usually it's creating a card (derived from CardDef).\n\nUse typescript for the code. Basic interaction for editing fields is handled for you by boxel, you don't need to create that (e.g. StringField has an edit template that allows a user to edit the data). Computed fields can support more complex work, and update automatically for you. Interaction (button clicks, filtering on user typed content) will require work on templates that will happen elsewhere and is not yours to do.\n\nNever leave sections of code unfilled or with placeholders, finish all code you write.\n\nPut all classes in the same codeblock/file, and have all CardDefs exported (e.g. export class MyCard extends CardDef)\n\n\nYou have available:\n\nStringField\nMarkdownField\nNumberField\nBooleanField\nDateField\nDateTimeField\n\nConstruct any more complex data structures from these\n\nFields do not have default values.\n\nUse the () => format when *and only when* you need to define classes out of order\n\nEXAMPLE CODE, you MUST include the imports shown in this example :\n\n```gts\n\nimport { Component, CardDef, FieldDef, linksTo, linksToMany, field, contains, containsMany } from 'https://cardstack.com/base/card-api';\nimport StringField from 'https://cardstack.com/base/string';\nimport BooleanField from 'https://cardstack.com/base/boolean';\nimport DateField from 'https://cardstack.com/base/date';\nimport DateTimeField from 'https://cardstack.com/base/datetime';\nimport NumberField from 'https://cardstack.com/base/number';\n\nimport MarkdownField from 'https://cardstack.com/base/markdown';\n\n\n\nclass MyCustomField extends FieldDef {\n  @field nestedField = contains(NumberField);\n  @field nestedOtherField = contains(BooleanField);\n}\n\nexport class OutOfOrderDeclaration extends CardDef {\n    static displayName = 'OutOfOrderDeclaration';\n\n    @field linkToCardDefinedLaterInFile = linksTo(() => MyCustomCard);\n}\n\nexport class MyCustomCard  extends CardDef {\n  static displayName = 'BoxelBuddyGuestList';\n\n  @field structuredData = contains(MyCustomField);\n\n  // linksTo and linksToMany \n  @field linkedData = linksToMany(AnotherCard);\n\n  // A field that is computed from other data in the card\n @field computedData = contains(NumberField, {\n   computeVia: function (this: MyCustomCard) {\n     // implementation logic here\n     return 1;\n   },\n });\n \nexport class InOrderDeclaration extends CardDef {\n    static displayName = 'InOrderDeclaration';\n\n    @field linkToCardDefinedLaterInFile = linksTo(MyCustomCard);\n}\n\n}\n```\n\nImportant:\n\nIf a user is asking  you to make, help or create something, assume they mean a boxel card unless they specifically request an image or logo.\n\n\nRemember to define a field the following syntax is used:\n\n  @field fieldname = contains(FieldType);\n  @field fieldname = containsMany(FieldType);\n\nAnd for linking to other cards:\n\n  @field fieldname = linksTo(CardType);\n  @field fieldname = linksToMany(CardType);\n\nYou must also write an app card. The app card definition should extend AppCard. Here is the code you must use to import the AppCard: `import { AppCard } from '/experiments/app-card';`\n\nYou can ask followups\n\nYou can propose new/improved data structures.\n\nTalk through the problem and structures, specifying how each should link to each other (this is very important), then write the code. \n\nYOU MUST CONSIDER LINKS BETWEEN THESE TYPES. Make sure common entities are extracted as their own types and that linksTo or linksToMany are used to connect the cards that need to be connected.\n\nPut it in a codeblock.\n\nRemember, if in the code a card class is used before it is defined, you must use the () => syntax. All CardDef classes should be exported classes.\n\nAsk the user if they want you to use the generated code to create a new app module.",
       "title": "Boxel App Generator",
       "description": "Helps you generate code for a Boxel application",
       "thumbnailURL": null
diff --git a/packages/catalog-realm/SkillCard/generate-product-requirements.json b/packages/experiments-realm/SkillCard/generate-product-requirements.json
similarity index 99%
rename from packages/catalog-realm/SkillCard/generate-product-requirements.json
rename to packages/experiments-realm/SkillCard/generate-product-requirements.json
index b653f72dc0..354093d40b 100644
--- a/packages/catalog-realm/SkillCard/generate-product-requirements.json
+++ b/packages/experiments-realm/SkillCard/generate-product-requirements.json
@@ -14,4 +14,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/experiments-realm/Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228.json b/packages/experiments-realm/Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228.json
index b6ac85c13f..10ca6b584c 100644
--- a/packages/experiments-realm/Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228.json
+++ b/packages/experiments-realm/Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228.json
@@ -2,7 +2,7 @@
   "data": {
     "type": "card",
     "attributes": {
-      "name": "Application",
+      "name": "App",
       "color": "",
       "description": null,
       "thumbnailURL": null
diff --git a/packages/experiments-realm/Task/10402eaa-3826-4602-994b-60b7506fb98d.json b/packages/experiments-realm/Task/10402eaa-3826-4602-994b-60b7506fb98d.json
index e38c820292..740b24eb9e 100644
--- a/packages/experiments-realm/Task/10402eaa-3826-4602-994b-60b7506fb98d.json
+++ b/packages/experiments-realm/Task/10402eaa-3826-4602-994b-60b7506fb98d.json
@@ -2,29 +2,25 @@
   "data": {
     "type": "card",
     "attributes": {
-      "taskName": "Pill Picker Example",
-      "taskDetail": "Use multi-select but for pills",
-      "status": {
-        "index": 1,
-        "label": "Next Sprint"
-      },
       "priority": {
         "index": 1,
         "label": "Medium"
       },
+      "status": {
+        "completed": false,
+        "index": 1,
+        "label": "Next Sprint"
+      },
+      "taskName": "Pill Picker Example",
       "dateRange": {
-        "start": "2024-11-14",
-        "end": "2024-12-15"
+        "start": "2024-12-08",
+        "end": "2024-12-10"
       },
+      "taskDetail": "Use multi-select but for pills",
       "description": null,
       "thumbnailURL": null
     },
     "relationships": {
-      "assignee": {
-        "links": {
-          "self": null
-        }
-      },
       "project": {
         "links": {
           "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
@@ -40,6 +36,11 @@
           "self": null
         }
       },
+      "assignee": {
+        "links": {
+          "self": null
+        }
+      },
       "tags.0": {
         "links": {
           "self": "../Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228"
@@ -63,4 +64,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/Task/d21d407b-9c1c-4204-a3bb-7b91f9260017.json b/packages/experiments-realm/Task/d21d407b-9c1c-4204-a3bb-7b91f9260017.json
index 451dbdf4b1..b4749f3aca 100644
--- a/packages/experiments-realm/Task/d21d407b-9c1c-4204-a3bb-7b91f9260017.json
+++ b/packages/experiments-realm/Task/d21d407b-9c1c-4204-a3bb-7b91f9260017.json
@@ -2,29 +2,25 @@
   "data": {
     "type": "card",
     "attributes": {
-      "taskName": "Create RHS Sheet",
-      "taskDetail": null,
-      "status": {
-        "index": 0,
-        "label": "Backlog"
-      },
       "priority": {
         "index": null,
         "label": null
       },
+      "status": {
+        "completed": false,
+        "index": 0,
+        "label": "Backlog"
+      },
+      "taskName": "Create RHS Sheet",
       "dateRange": {
-        "start": "2024-11-13",
-        "end": "2024-11-14"
+        "start": "2024-12-01",
+        "end": "2024-12-08"
       },
+      "taskDetail": null,
       "description": null,
       "thumbnailURL": null
     },
     "relationships": {
-      "assignee": {
-        "links": {
-          "self": "../TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be"
-        }
-      },
       "project": {
         "links": {
           "self": null
@@ -40,6 +36,11 @@
           "self": null
         }
       },
+      "assignee": {
+        "links": {
+          "self": "../TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be"
+        }
+      },
       "tags": {
         "links": {
           "self": null
diff --git a/packages/experiments-realm/address.gts b/packages/experiments-realm/address.gts
index c247d39caf..4cdada8a6b 100644
--- a/packages/experiments-realm/address.gts
+++ b/packages/experiments-realm/address.gts
@@ -6,6 +6,8 @@ import {
 } from 'https://cardstack.com/base/card-api';
 import StringField from 'https://cardstack.com/base/string';
 import { CountryField } from './country';
+import MapPinIcon from '@cardstack/boxel-icons/map-pin';
+import { EntityDisplay } from './components/entity-display';
 
 function getAddressRows(
   addressLine1: string | undefined,
@@ -28,8 +30,26 @@ function getAddressRows(
     .map((r) => r.join(', '));
 }
 
+class Atom extends Component<typeof Address> {
+  get label() {
+    return (
+      [this.args.model?.city, this.args.model?.country?.code]
+        .filter(Boolean)
+        .join(', ') || ''
+    );
+  }
+  <template>
+    <EntityDisplay @name={{this.label}}>
+      <:thumbnail>
+        <MapPinIcon class='icon' />
+      </:thumbnail>
+    </EntityDisplay>
+  </template>
+}
+
 export class Address extends FieldDef {
   static displayName = 'Address';
+  static icon = MapPinIcon;
   @field addressLine1 = contains(StringField);
   @field addressLine2 = contains(StringField);
   @field city = contains(StringField);
@@ -75,4 +95,6 @@ export class Address extends FieldDef {
       </address>
     </template>
   };
+
+  static atom = Atom;
 }
diff --git a/packages/catalog-realm/ai-app-generator.gts b/packages/experiments-realm/ai-app-generator.gts
similarity index 100%
rename from packages/catalog-realm/ai-app-generator.gts
rename to packages/experiments-realm/ai-app-generator.gts
diff --git a/packages/catalog-realm/app-card.gts b/packages/experiments-realm/app-card.gts
similarity index 99%
rename from packages/catalog-realm/app-card.gts
rename to packages/experiments-realm/app-card.gts
index 7de1124389..4fe422950d 100644
--- a/packages/catalog-realm/app-card.gts
+++ b/packages/experiments-realm/app-card.gts
@@ -346,7 +346,7 @@ class DefaultTabTemplate extends GlimmerComponent<DefaultTabSignature> {
             ? {
                 ...doc,
                 meta: {
-                  ...doc.meta,
+                  ...doc.data.meta,
                   realmURL: this.args.currentRealm,
                 },
               }
diff --git a/packages/experiments-realm/author.gts b/packages/experiments-realm/author.gts
index ae0abcaa57..de56facde9 100644
--- a/packages/experiments-realm/author.gts
+++ b/packages/experiments-realm/author.gts
@@ -1,21 +1,28 @@
-import StringCard from 'https://cardstack.com/base/string';
-import { Base64ImageField } from 'https://cardstack.com/base/base64-image';
+import { FeaturedImageField } from './fields/featured-image';
 import MarkdownField from 'https://cardstack.com/base/markdown';
+import TextAreaField from 'https://cardstack.com/base/text-area';
 import {
   Component,
   CardDef,
   field,
   contains,
   containsMany,
+  linksTo,
+  StringField,
 } from 'https://cardstack.com/base/card-api';
 
-import SquareUser from '@cardstack/boxel-icons/square-user';
 import Email from '@cardstack/boxel-icons/mail';
 import Linkedin from '@cardstack/boxel-icons/linkedin';
 import XIcon from '@cardstack/boxel-icons/brand-x';
+import UserIcon from '@cardstack/boxel-icons/user';
+import UserRoundPen from '@cardstack/boxel-icons/user-round-pen';
+
+import { cn, not } from '@cardstack/boxel-ui/helpers';
 
 import { setBackgroundImage } from './components/layout';
 import { ContactLinkField } from './fields/contact-link';
+import { BlogApp } from './blog-app';
+import { EmailField } from './email';
 
 class AuthorContactLink extends ContactLinkField {
   static values = [
@@ -41,36 +48,145 @@ class AuthorContactLink extends ContactLinkField {
 }
 
 export class Author extends CardDef {
-  static displayName = 'Author Bio';
-  static icon = SquareUser;
-  @field firstName = contains(StringCard);
-  @field lastName = contains(StringCard);
-  @field title = contains(StringCard, {
+  static displayName = 'Author';
+  static icon = UserRoundPen;
+  @field firstName = contains(StringField);
+  @field lastName = contains(StringField);
+  @field title = contains(StringField, {
     computeVia: function (this: Author) {
-      return [this.firstName, this.lastName].filter(Boolean).join(' ');
+      let fullName = [this.firstName, this.lastName].filter(Boolean).join(' ');
+      return fullName.length ? fullName : 'Untitled Author';
     },
+    description: 'Full name of author',
   });
-  @field description = contains(StringCard, {
-    computeVia: function (this: Author) {
-      return this.body;
-    },
+  @field bio = contains(TextAreaField, {
+    description: 'Default author bio for embedded and isolated views.',
+  });
+  @field fullBio = contains(MarkdownField, {
+    description: 'Full bio for isolated view',
   });
-  @field photo = contains(Base64ImageField);
-  @field body = contains(MarkdownField);
+  @field quote = contains(TextAreaField);
   @field contactLinks = containsMany(AuthorContactLink);
+  @field email = contains(EmailField);
+  @field featuredImage = contains(FeaturedImageField);
+  @field blog = linksTo(BlogApp, { isUsed: true });
 
-  static embedded = class Embedded extends Component<typeof this> {
+  static isolated = class Isolated extends Component<typeof this> {
     <template>
-      <h3><@fields.title /></h3>
-      <p><@fields.body /></p>
-      <div class='links'>
-        <@fields.contactLinks @format='atom' />
-      </div>
+      <article class='author-bio'>
+        <header>
+          <div class='title-group'>
+            <h1><@fields.title /></h1>
+            <p class='description'><@fields.description /></p>
+            {{#if @model.quote}}
+              <blockquote class='quote'>
+                <p><@fields.quote /></p>
+              </blockquote>
+            {{/if}}
+          </div>
+          {{#if @model.featuredImage.imageUrl}}
+            <@fields.featuredImage class='featured-image' />
+          {{/if}}
+        </header>
+        <div class='links'>
+          <@fields.contactLinks @format='atom' />
+        </div>
+        {{#if @model.bio}}
+          <p class='summary'><@fields.bio /></p>
+        {{/if}}
+        {{#if @model.fullBio}}
+          <@fields.fullBio />
+        {{/if}}
+      </article>
       <style scoped>
+        @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
+        .author-bio {
+          --markdown-font-family: 'Lora', serif;
+          --markdown-heading-font-family: 'Playfair Display', serif;
+          --font-small: 0.8125em;
+          width: 80%;
+          margin-right: auto;
+          margin-left: auto;
+          padding: 3em 1em;
+          font-size: 1rem;
+          font-family: 'Lora', serif;
+          text-wrap: pretty;
+        }
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          font-family: 'Playfair Display', serif;
+        }
+        .author-bio > * + * {
+          margin-top: var(--boxel-sp-xl);
+        }
+        header {
+          display: flex;
+          flex-wrap: wrap;
+          gap: var(--boxel-sp-6xs) var(--boxel-sp);
+        }
+        header > * {
+          flex: 1;
+        }
+        .title-group {
+          min-width: 195px;
+        }
+        .featured-image :deep(figure) {
+          display: flex;
+          flex-direction: column;
+          flex-wrap: wrap;
+          text-align: right;
+          gap: var(--boxel-sp-xs);
+        }
+        .featured-image :deep(figcaption) {
+          margin-left: auto;
+        }
+        .featured-image :deep(.image) {
+          margin-left: auto;
+          width: 30vw;
+          height: 30vw;
+          min-width: 193px;
+          min-height: 193px;
+          max-width: 300px;
+          max-height: 300px;
+          border-radius: 50%;
+          border: 1px solid var(--boxel-400);
+          object-fit: cover;
+          object-position: center;
+        }
+        h1 {
+          font-size: 1.625em;
+          line-height: 1.25;
+          letter-spacing: normal;
+          margin-top: 1vw;
+          margin-bottom: 0;
+        }
+        .description {
+          margin-top: var(--boxel-sp-xs);
+          margin-bottom: 0;
+          font-size: var(--font-small);
+          font-weight: 500;
+        }
+        blockquote {
+          margin: var(--boxel-sp) 0;
+          padding: 0;
+        }
+        blockquote p {
+          font-size: 0.88em;
+          font-style: italic;
+          margin-inline-start: 0;
+          margin-inline-end: var(--boxel-sp-xl);
+          padding: 1em 0 1em var(--boxel-sp-xl);
+          border-left: 1px solid black;
+        }
         .links {
           display: flex;
           gap: var(--boxel-sp-xxxs);
           flex-wrap: wrap;
+          margin-top: var(--boxel-sp-xs);
         }
         .links :deep(div) {
           display: contents;
@@ -78,35 +194,133 @@ export class Author extends CardDef {
         .links :deep(.pill) {
           border: none;
         }
+        .summary {
+          padding: var(--boxel-sp-xl) var(--boxel-sp-xxl);
+          background-color: var(--boxel-200);
+          border-radius: var(--boxel-border-radius-lg);
+          font-size: var(--font-small);
+        }
+      </style>
+    </template>
+  };
+
+  static embedded = class Embedded extends Component<typeof this> {
+    <template>
+      <article class='author-embedded'>
+        <div
+          class='thumbnail-image'
+          style={{setBackgroundImage @model.thumbnailURL}}
+          role={{if @model.thumbnailURL 'img'}}
+          alt={{if @model.thumbnailURL @model.title}}
+        >
+          {{#unless @model.thumbnailURL}}
+            <UserIcon width='30' height='30' />
+          {{/unless}}
+        </div>
+        <header>
+          <h3><@fields.title /></h3>
+          <p class='desc'><@fields.description /></p>
+        </header>
+        <p class='bio'><@fields.bio /></p>
+        <div class='author-bio-links'>
+          <@fields.contactLinks @format='embedded' />
+        </div>
+      </article>
+      <style scoped>
+        .author-embedded {
+          --background-color: var(--author-background-color, #efefef);
+          background-color: var(--background-color);
+          height: 100%;
+          display: grid;
+          grid-template-columns: max-content 1fr;
+          grid-template-rows: max-content;
+          gap: var(--boxel-sp) var(--boxel-sp-lg);
+          padding: var(--boxel-sp-lg);
+          text-wrap: pretty;
+        }
+        h3,
+        p {
+          margin: 0;
+        }
+        header {
+          align-self: center;
+        }
+        header,
+        .bio,
+        .author-bio-links {
+          grid-column: 2;
+        }
+        .thumbnail-image {
+          grid-column: 1;
+          width: 60px;
+          height: 60px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-position: center;
+          background-size: cover;
+          background-repeat: no-repeat;
+          border-radius: 50%;
+          border: 1px solid var(--boxel-400);
+          color: var(--boxel-400);
+        }
+        h3 {
+          font: 600 var(--boxel-font);
+          letter-spacing: var(--boxel-lsp-sm);
+        }
+        .desc {
+          font: 500 var(--boxel-font-sm);
+          letter-spacing: var(--boxel-lsp-sm);
+        }
+        .bio {
+          margin-bottom: 1em;
+          font: var(--boxel-font-sm);
+          letter-spacing: var(--boxel-lsp-sm);
+        }
+        .author-bio-links > :deep(.embedded-format) {
+          display: flex;
+          flex-wrap: wrap;
+          gap: var(--boxel-sp-xs);
+        }
+        .author-bio-links :deep(.pill) {
+          --pill-background-color: var(--background-color);
+        }
       </style>
     </template>
   };
 
   static atom = class Atom extends Component<typeof this> {
     <template>
-      {{#if @model.title}}
+      <span class='author-atom'>
         {{#if @model.thumbnailURL}}
           <span
             class='author-thumbnail'
             style={{setBackgroundImage @model.thumbnailURL}}
+            role='img'
+            alt={{@model.title}}
           />
         {{else}}
-          <@model.constructor.icon class='author-icon' width='20' height='20' />
+          <UserIcon class='author-icon' width='20' height='20' />
         {{/if}}
         <@fields.title />
-      {{/if}}
+      </span>
       <style scoped>
+        .author-atom {
+          display: inline-flex;
+          align-items: center;
+          gap: var(--boxel-sp-xxs);
+          font: 600 var(--boxel-font-sm);
+          letter-spacing: var(--boxel-lsp-xs);
+        }
         .author-thumbnail,
         .author-icon {
-          display: inline-block;
-          margin-right: var(--boxel-sp-6xs);
-          vertical-align: text-bottom;
           flex-shrink: 0;
         }
         .author-thumbnail {
-          width: 30px;
-          height: 30px;
+          width: 24px;
+          height: 24px;
           border-radius: 50%;
+          border: 1px solid var(--boxel-400);
           overflow: hidden;
           background-position: center;
           background-repeat: no-repeat;
@@ -115,4 +329,375 @@ export class Author extends CardDef {
       </style>
     </template>
   };
+
+  static fitted = class FittedTemplate extends Component<typeof this> {
+    <template>
+      <article class='author-fitted'>
+        <div
+          class={{cn 'author-thumbnail' is-icon=(not @model.thumbnailURL)}}
+          style={{setBackgroundImage @model.thumbnailURL}}
+          role={{if @model.thumbnailURL 'img'}}
+          alt={{if @model.thumbnailURL @model.title}}
+        >
+          {{#unless @model.thumbnailURL}}
+            <UserIcon width='24' height='24' />
+          {{/unless}}
+        </div>
+        <header class='title-group'>
+          <h3 class='title'><@fields.title /></h3>
+          <p class='description'><@fields.description /></p>
+        </header>
+        <p class='bio'><@fields.bio /></p>
+        <div class='links'><@fields.contactLinks @format='atom' /></div>
+      </article>
+      <style scoped>
+        .author-fitted {
+          --link-icon-size: var(--author-link-icon-size, 15px);
+          --thumbnail-size: var(--author-thumbnail-size, 60px);
+          --gap-size: var(--author-gap-size, var(--boxel-sp-xxs));
+          width: 100%;
+          height: 100%;
+          min-width: 100px;
+          min-height: 29px;
+          display: grid;
+          gap: var(--gap-size);
+          overflow: hidden;
+          padding: var(--boxel-sp-xs);
+        }
+        .author-thumbnail {
+          grid-area: img;
+          width: var(--thumbnail-size);
+          height: var(--thumbnail-size);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-position: center;
+          background-size: cover;
+          background-repeat: no-repeat;
+          border-radius: 50%;
+          border: 1px solid var(--boxel-400);
+          color: var(--boxel-400);
+        }
+        .title-group {
+          grid-area: header;
+        }
+        .title {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          margin: 0;
+          font: 600 var(--boxel-font);
+          letter-spacing: var(--boxel-lsp-sm);
+          line-height: 1.25;
+        }
+        .description {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          margin-top: var(--boxel-sp-4xs);
+          margin-bottom: 0;
+          font: 500 var(--boxel-font-xs);
+          letter-spacing: var(--boxel-lsp-sm);
+          line-height: 1.25;
+        }
+        .bio {
+          grid-area: bio;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
+          overflow: hidden;
+          margin: 0;
+          font: var(--boxel-font-xs);
+          letter-spacing: var(--boxel-lsp-sm);
+          line-height: 1.25;
+        }
+        .links {
+          display: flex;
+          gap: var(--boxel-sp-xxxs);
+          flex-wrap: wrap;
+        }
+        .links :deep(div) {
+          display: contents;
+        }
+        .links :deep(.pill) {
+          border: none;
+        }
+        .links :deep(svg) {
+          width: var(--link-icon-size);
+          height: var(--link-icon-size);
+        }
+
+        @container fitted-card ((aspect-ratio <= 1.0) and (226px <= height)) {
+          .author-fitted {
+            grid-template:
+              'img' max-content
+              'header' max-content
+              'bio' max-content
+              'links' 1fr / 1fr;
+          }
+          .links {
+            align-self: end;
+          }
+        }
+
+        /* Aspect ratio < 1.0 (Vertical card) */
+        @container fitted-card (aspect-ratio <= 1.0) and (224px <= height < 226px) {
+          .author-fitted {
+            grid-template:
+              'img' max-content
+              'header' 1fr
+              'links' max-content / 1fr;
+          }
+          .title,
+          .description {
+            -webkit-line-clamp: 3;
+          }
+          .bio {
+            display: none;
+          }
+        }
+
+        @container fitted-card (aspect-ratio <= 1.0) and (180px <= height < 224px) {
+          .author-fitted {
+            --thumbnail-size: 40px;
+            grid-template:
+              'img' max-content
+              'header' 1fr
+              'links' max-content / 1fr;
+          }
+          .title {
+            font-size: var(--boxel-font-size-sm);
+          }
+          .bio {
+            display: none;
+          }
+        }
+
+        @container fitted-card (aspect-ratio <= 1.0) and (148px <= height < 180px) {
+          .author-fitted {
+            --thumbnail-size: 40px;
+            grid-template:
+              'img' max-content
+              'header' 1fr
+              'links' max-content / 1fr;
+          }
+          .title {
+            font-size: var(--boxel-font-size-sm);
+          }
+          .description,
+          .bio {
+            display: none;
+          }
+        }
+
+        @container fitted-card (aspect-ratio <= 1.0) and (128px <= height < 148px) {
+          .author-fitted {
+            --thumbnail-size: 40px;
+            grid-template:
+              'img' max-content
+              'header' 1fr
+              'links' max-content / 1fr;
+          }
+          .title {
+            font-size: var(--boxel-font-size-xs);
+          }
+          .description,
+          .bio {
+            display: none;
+          }
+        }
+
+        @container fitted-card (aspect-ratio <= 1.0) and (118px <= height < 128px) {
+          .author-fitted {
+            --thumbnail-size: 40px;
+            --link-icon-size: 13px;
+            --gap-size: var(--boxel-sp-4xs);
+            grid-template:
+              'img' max-content
+              'header' 1fr
+              'links' max-content / 1fr;
+          }
+          .title {
+            font-size: var(--boxel-font-size-xs);
+          }
+          .description,
+          .bio {
+            display: none;
+          }
+        }
+
+        @container fitted-card ((aspect-ratio <= 1.0) and (400px <= height)) {
+          .author-fitted {
+            --gap-size: var(--boxel-sp-xs);
+            grid-template:
+              'img' max-content
+              'header' max-content
+              'bio' max-content
+              'links' 1fr / 1fr;
+          }
+          .title {
+            -webkit-line-clamp: 4;
+            font-size: var(--boxel-font-size-sm);
+          }
+          .bio {
+            -webkit-line-clamp: 10;
+          }
+          .links {
+            align-self: end;
+          }
+        }
+
+        /* 1.0 < Aspect ratio (Horizontal card) */
+        @container fitted-card ((1.0 < aspect-ratio) and (151px <= height)) {
+          .author-fitted {
+            --gap-size: var(--boxel-sp-xxs) var(--boxel-sp-sm);
+            grid-template:
+              'img header' minmax(var(--thumbnail-size), max-content)
+              'img links' 1fr / max-content 1fr;
+          }
+          .title-group {
+            align-self: center;
+          }
+          .title {
+            font-size: var(--boxel-font-size-sm);
+          }
+          .description {
+            -webkit-line-clamp: 4;
+          }
+          .bio {
+            display: none;
+          }
+          .links {
+            align-self: end;
+          }
+        }
+
+        @container fitted-card ((1.0 < aspect-ratio) and (115px <= height <= 150px)) {
+          .author-fitted {
+            --gap-size: var(--boxel-sp-xxs) var(--boxel-sp-sm);
+            --thumbnail-size: 50px;
+            grid-template:
+              'img header' minmax(var(--thumbnail-size), max-content)
+              'img links' 1fr / max-content 1fr;
+          }
+          .title-group {
+            align-self: center;
+          }
+          .title {
+            font-size: var(--boxel-font-size-sm);
+          }
+          .bio {
+            display: none;
+          }
+          .links {
+            align-self: end;
+          }
+        }
+
+        @container fitted-card ((1.0 < aspect-ratio) and (78px <= height <= 114px)) {
+          .author-fitted {
+            --gap-size: var(--boxel-sp-xxxs) var(--boxel-sp-xs);
+            --thumbnail-size: 30px;
+            --link-icon-size: 15px;
+            grid-template:
+              'img header' 1fr
+              'img links' 1fr / max-content 1fr;
+          }
+          .title-group {
+            align-self: center;
+          }
+          .title {
+            font-size: var(--boxel-font-size-sm);
+          }
+          .bio,
+          .description {
+            display: none;
+          }
+        }
+
+        @container fitted-card ((1.0 < aspect-ratio) and (500px <= width) and (58px <= height <= 77px)) {
+          .author-fitted {
+            --gap-size: var(--boxel-sp-xs);
+            --thumbnail-size: 34px;
+            grid-template: 'img header' 1fr / max-content 1fr;
+            padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
+            align-items: center;
+          }
+          .title {
+            font: 600 var(--boxel-font-sm);
+          }
+          .bio,
+          .links {
+            display: none;
+          }
+        }
+
+        @container fitted-card ((1.0 < aspect-ratio) and (width <= 499px) and (height <= 77px)) {
+          .author-fitted {
+            --gap-size: var(--boxel-sp-xxs);
+            --thumbnail-size: 40px;
+            grid-template: 'img header' 1fr / max-content 1fr;
+            align-items: center;
+            padding: var(--boxel-sp-xxxs);
+          }
+          .title {
+            font-size: var(--boxel-font-size-sm);
+          }
+          .bio,
+          .description,
+          .links {
+            display: none;
+          }
+        }
+
+        @container fitted-card ((1.0 < aspect-ratio) and (height <= 57px)) {
+          .author-fitted {
+            --gap-size: var(--boxel-sp-xxxs);
+            --thumbnail-size: 20px;
+            padding: var(--boxel-sp-xxxs);
+          }
+          .author-thumbnail.is-icon {
+            border: none;
+          }
+          .title-group {
+            overflow: hidden;
+          }
+          .title {
+            display: block;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            font-size: var(--boxel-font-size-xs);
+            line-height: 1.1;
+          }
+        }
+
+        @container fitted-card ((1.0 < aspect-ratio) and (width <= 100px) and (height <= 57px)) {
+          .author-fitted {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: var(--boxel-sp-xxxs);
+          }
+          .author-thumbnail,
+          .description,
+          .bio,
+          .links {
+            display: none;
+          }
+          .title-group {
+            overflow: hidden;
+          }
+          .title {
+            display: block;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            font-size: var(--boxel-font-size-xs);
+            line-height: 1.1;
+          }
+        }
+      </style>
+    </template>
+  };
 }
diff --git a/packages/experiments-realm/blog-app.gts b/packages/experiments-realm/blog-app.gts
index bdd33b4300..608738c9d4 100644
--- a/packages/experiments-realm/blog-app.gts
+++ b/packages/experiments-realm/blog-app.gts
@@ -19,6 +19,8 @@ import {
   CardError,
   getCard,
   SupportedMimeType,
+  type LooseSingleCardDocument,
+  relativeURL,
 } from '@cardstack/runtime-common';
 import {
   type SortOption,
@@ -85,7 +87,7 @@ const FILTERS: LayoutFilter[] = [
   {
     displayName: 'Author Bios',
     icon: AuthorIcon,
-    cardTypeName: 'Author Bio',
+    cardTypeName: 'Author',
     createNewButtonText: 'Author',
   },
   {
@@ -337,10 +339,26 @@ class BlogAppTemplate extends Component<typeof BlogApp> {
         name: summary.id.substring(lastIndex + 1),
       };
       filter.cardRef = cardRef;
+
+      let realmUrl = this.args.model[realmURL];
+      if (!this.args.model.id || !realmUrl?.href) {
+        throw new Error(`Missing card id or realm url`);
+      }
+      let relativeTo = relativeURL(
+        new URL(this.args.model.id),
+        new URL(`${cardRef.module}/${cardRef.name}`),
+        realmUrl,
+      );
+      if (!relativeTo) {
+        throw new Error(`Missing relative url`);
+      }
       filter.query = {
         filter: {
           on: cardRef,
-          eq: { 'blog.id': this.args.model.id! },
+          any: [
+            { eq: { 'blog.id': this.args.model.id } },
+            { eq: { 'blog.id': relativeTo } },
+          ],
         },
       };
     }
@@ -369,8 +387,24 @@ class BlogAppTemplate extends Component<typeof BlogApp> {
       return;
     }
     let currentRealm = this.realms[0];
+    let doc: LooseSingleCardDocument = {
+      data: {
+        type: 'card',
+        relationships: {
+          blog: {
+            links: {
+              self: this.args.model.id!,
+            },
+          },
+        },
+        meta: {
+          adoptsFrom: ref,
+        },
+      },
+    };
     await this.args.context?.actions?.createCard?.(ref, currentRealm, {
       realmURL: currentRealm,
+      doc,
     });
   });
 }
@@ -418,7 +452,8 @@ export class BlogApp extends CardDef {
           }
           .fitted-blog :deep(.card-title) {
             -webkit-line-clamp: 2;
-            font-weight: 600;
+            font: 600 var(--boxel-font-sm);
+            letter-spacing: var(--boxel-lsp-xs);
           }
           .fitted-blog :deep(.card-display-name) {
             margin: 0;
diff --git a/packages/experiments-realm/blog-post.gts b/packages/experiments-realm/blog-post.gts
index 3282b74558..704dd3e756 100644
--- a/packages/experiments-realm/blog-post.gts
+++ b/packages/experiments-realm/blog-post.gts
@@ -1,3 +1,4 @@
+import { FeaturedImageField } from './fields/featured-image';
 import DatetimeField from 'https://cardstack.com/base/datetime';
 import StringField from 'https://cardstack.com/base/string';
 import MarkdownField from 'https://cardstack.com/base/markdown';
@@ -19,13 +20,15 @@ class EmbeddedTemplate extends Component<typeof BlogPost> {
   <template>
     <article class='embedded-blog-post'>
       <div class='thumbnail' style={{setBackgroundImage @model.thumbnailURL}} />
-      <h3 class='title'>{{if @model.title @model.title 'Untitled Post'}}</h3>
+      <h3 class='title'><@fields.title /></h3>
       <p class='description'>{{@model.description}}</p>
-      <@fields.authorBio
-        class='byline'
-        @format='atom'
-        @displayContainer={{false}}
-      />
+      {{#if @model.authorBio}}
+        <@fields.authorBio
+          class='byline'
+          @format='atom'
+          @displayContainer={{false}}
+        />
+      {{/if}}
       {{#if @model.datePublishedIsoTimestamp}}
         <time class='date' timestamp={{@model.datePublishedIsoTimestamp}}>
           {{@model.formattedDatePublished}}
@@ -33,9 +36,7 @@ class EmbeddedTemplate extends Component<typeof BlogPost> {
       {{/if}}
     </article>
     <style scoped>
-      @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
       .embedded-blog-post {
-        font-family: var(--blog-post-font-family, 'Lora', serif);
         width: 100%;
         height: 100%;
         display: grid;
@@ -47,19 +48,6 @@ class EmbeddedTemplate extends Component<typeof BlogPost> {
         padding-right: var(--boxel-sp-xl);
         overflow: hidden;
       }
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        font-family: var(
-          --blog-post-heading-font-family,
-          'Playfair Display',
-          serif
-        );
-        font-weight: 700;
-      }
       .thumbnail {
         grid-area: img;
         background-color: var(--boxel-200);
@@ -70,10 +58,6 @@ class EmbeddedTemplate extends Component<typeof BlogPost> {
       }
       .title {
         grid-area: title;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 3;
-        overflow: hidden;
         margin: var(--boxel-sp-lg) 0 0;
         font-size: var(--boxel-font-size-lg);
         line-height: calc(30 / 22);
@@ -81,10 +65,6 @@ class EmbeddedTemplate extends Component<typeof BlogPost> {
       }
       .description {
         grid-area: desc;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 4;
-        overflow: hidden;
         margin: 0;
         font-size: var(--boxel-font-size);
         line-height: calc(22 / 16);
@@ -114,9 +94,7 @@ class EmbeddedTemplate extends Component<typeof BlogPost> {
         display: inline-flex;
         align-items: center;
         gap: 0 var(--boxel-sp-xxxs);
-        font-weight: 500;
-        font-size: var(--boxel-font-size-sm);
-        line-height: calc(18 / 13);
+        font: 500 var(--boxel-font-sm);
         letter-spacing: var(--boxel-lsp-xs);
       }
     </style>
@@ -128,7 +106,7 @@ class FittedTemplate extends Component<typeof BlogPost> {
     <article class='fitted-blog-post'>
       <div class='thumbnail' style={{setBackgroundImage @model.thumbnailURL}} />
       <div class='content'>
-        <h3 class='title'>{{if @model.title @model.title 'Untitled Post'}}</h3>
+        <h3 class='title'><@fields.title /></h3>
         <p class='description'>{{@model.description}}</p>
         <span class='byline'>{{@model.authorBio.title}}</span>
         {{#if @model.datePublishedIsoTimestamp}}
@@ -139,10 +117,7 @@ class FittedTemplate extends Component<typeof BlogPost> {
       </div>
     </article>
     <style scoped>
-      @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
       .fitted-blog-post {
-        --xs-line-height: calc(14 / 11);
-        font-family: var(--blog-post-font-family, 'Lora', serif);
         width: 100%;
         height: 100%;
         min-width: 100px;
@@ -150,19 +125,6 @@ class FittedTemplate extends Component<typeof BlogPost> {
         display: grid;
         overflow: hidden;
       }
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        font-family: var(
-          --blog-post-heading-font-family,
-          'Playfair Display',
-          serif
-        );
-        font-weight: 700;
-      }
       .thumbnail {
         grid-area: img;
         background-color: var(--boxel-200);
@@ -184,7 +146,7 @@ class FittedTemplate extends Component<typeof BlogPost> {
         overflow: hidden;
         margin: 0;
 
-        font-size: var(--boxel-font-size-sm);
+        font: 600 var(--boxel-font-sm);
         letter-spacing: var(--boxel-lsp-sm);
         line-height: 1.3;
       }
@@ -195,9 +157,8 @@ class FittedTemplate extends Component<typeof BlogPost> {
         -webkit-line-clamp: 3;
         overflow: hidden;
         margin: 0;
-        font-size: var(--boxel-font-size-xs);
+        font: var(--boxel-font-xs);
         letter-spacing: var(--boxel-lsp-sm);
-        line-height: var(--xs-line-height);
       }
       .byline {
         grid-area: byline;
@@ -214,10 +175,8 @@ class FittedTemplate extends Component<typeof BlogPost> {
       }
       .byline,
       .date {
-        font-size: var(--boxel-font-size-xs);
-        font-weight: 500;
+        font: 500 var(--boxel-font-xs);
         letter-spacing: var(--boxel-lsp-sm);
-        line-height: var(--xs-line-height);
       }
 
       @container fitted-card ((aspect-ratio <= 1.0) and (226px <= height)) {
@@ -291,7 +250,6 @@ class FittedTemplate extends Component<typeof BlogPost> {
       @container fitted-card ((aspect-ratio <= 1.0) and (height < 180px) ) {
         .title {
           font-size: var(--boxel-font-size-xs);
-          line-height: var(--xs-line-height);
         }
       }
 
@@ -357,7 +315,6 @@ class FittedTemplate extends Component<typeof BlogPost> {
       @container fitted-card ((aspect-ratio <= 1.0) and (400px <= height) and (226px < width)) {
         .title {
           font-size: var(--boxel-font-size);
-          line-height: calc(22 / 16);
         }
       }
 
@@ -463,7 +420,6 @@ class FittedTemplate extends Component<typeof BlogPost> {
         .title {
           -webkit-line-clamp: 3;
           font-size: var(--boxel-font-size-xs);
-          line-height: var(--xs-line-height);
         }
         .description,
         .byline,
@@ -542,7 +498,6 @@ class FittedTemplate extends Component<typeof BlogPost> {
         .title {
           -webkit-line-clamp: 2;
           font-size: var(--boxel-font-size-xs);
-          line-height: var(--xs-line-height);
         }
       }
 
@@ -563,8 +518,7 @@ class FittedTemplate extends Component<typeof BlogPost> {
         }
         .title {
           -webkit-line-clamp: 2;
-          font-size: var(--boxel-font-size-xs);
-          line-height: var(--xs-line-height);
+          font-size: 600 var(--boxel-font-size-xs);
         }
       }
     </style>
@@ -579,7 +533,12 @@ class Status extends StringField {
 export class BlogPost extends CardDef {
   static displayName = 'Blog Post';
   static icon = BlogIcon;
-  @field title = contains(StringField);
+  @field headline = contains(StringField);
+  @field title = contains(StringField, {
+    computeVia: function (this: BlogPost) {
+      return this.headline?.length ? this.headline : 'Untitled Blog Post';
+    },
+  });
   @field slug = contains(StringField);
   @field body = contains(MarkdownField);
   @field authorBio = linksTo(Author);
@@ -595,7 +554,8 @@ export class BlogPost extends CardDef {
       return 'Scheduled';
     },
   });
-  @field blog = linksTo(BlogAppCard);
+  @field blog = linksTo(BlogAppCard, { isUsed: true });
+  @field featuredImage = contains(FeaturedImageField);
 
   get formattedDatePublished() {
     if (this.status === 'Published' && this.publishDate) {
@@ -621,29 +581,20 @@ export class BlogPost extends CardDef {
     <template>
       <article>
         <header>
-          <@fields.blog class='blog' @displayContainer={{false}} />
-          {{#if @model.thumbnailURL}}
-            <figure>
-              <img
-                class='featured-image'
-                src={{@model.thumbnailURL}}
-                alt='remote work'
-              />
-              <figcaption>
-                Success in remote work is achievable with the right approach.
-              </figcaption>
-            </figure>
+          {{#if @model.blog}}
+            <@fields.blog class='blog' @displayContainer={{false}} />
           {{/if}}
-          {{#if @model.title}}
-            <h1><@fields.title /></h1>
+          {{#if @model.featuredImage.imageUrl}}
+            <@fields.featuredImage class='featured-image' />
           {{/if}}
+          <h1><@fields.title /></h1>
           {{#if @model.description}}
             <p class='description'>
               <@fields.description />
             </p>
           {{/if}}
           <ul class='info'>
-            {{#if @model.authorBio.title}}
+            {{#if @model.authorBio}}
               <li class='byline'>
                 <@fields.authorBio
                   class='author'
@@ -663,6 +614,9 @@ export class BlogPost extends CardDef {
           </ul>
         </header>
         <@fields.body />
+        {{#if @model.authorBio}}
+          <@fields.authorBio class='author-embedded-bio' @format='embedded' />
+        {{/if}}
       </article>
       <style scoped>
         @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@@ -698,20 +652,14 @@ export class BlogPost extends CardDef {
           letter-spacing: normal;
           margin-bottom: var(--boxel-sp-lg);
         }
-        figure {
-          margin: 0;
-        }
-        figcaption {
-          font-style: italic;
-        }
-        .featured-image {
+        .featured-image :deep(.image) {
           border-radius: var(--boxel-border-radius-xl);
           overflow: hidden;
         }
         .blog {
           background-color: inherit;
         }
-        .blog + figure {
+        .blog + .featured-image {
           margin-top: var(--boxel-sp-sm);
         }
         .description {
@@ -735,9 +683,13 @@ export class BlogPost extends CardDef {
           display: inline-flex;
           align-items: center;
           gap: 0 var(--boxel-sp-xxxs);
+          font-weight: 600;
         }
         .author {
-          display: contents;
+          display: contents; /* workaround for removing block-levelness of atom format */
+        }
+        .author-embedded-bio {
+          margin-top: var(--boxel-sp-xl);
         }
       </style>
     </template>
diff --git a/packages/experiments-realm/components/avatar-group.gts b/packages/experiments-realm/components/avatar-group.gts
index 21d311a88c..fdd3deee5e 100644
--- a/packages/experiments-realm/components/avatar-group.gts
+++ b/packages/experiments-realm/components/avatar-group.gts
@@ -6,7 +6,7 @@ interface AvatarGroupSignature {
   Args: {
     thumbnailURL?: string;
     name?: string;
-    userID: string;
+    userId?: string | null;
   };
   Blocks: { content: [] };
   Element: HTMLElement;
@@ -18,9 +18,9 @@ export default class AvatarGroup extends GlimmerComponent<AvatarGroupSignature>
   }
 
   <template>
-    <div class='avatar-group'>
+    <div class='avatar-group' ...attributes>
       <Avatar
-        @userID={{@userID}}
+        @userID={{@userId}}
         @displayName={{@name}}
         @thumbnailURL={{@thumbnailURL}}
         @isReady={{true}}
@@ -40,7 +40,7 @@ export default class AvatarGroup extends GlimmerComponent<AvatarGroupSignature>
       .avatar-group {
         display: flex;
         align-items: center;
-        gap: var(--boxel-sp);
+        gap: var(--boxel-sp-sm);
         min-width: 0;
       }
       .avatar-thumbnail {
diff --git a/packages/experiments-realm/components/crm-progress-bar.gts b/packages/experiments-realm/components/crm-progress-bar.gts
new file mode 100644
index 0000000000..543d52a47d
--- /dev/null
+++ b/packages/experiments-realm/components/crm-progress-bar.gts
@@ -0,0 +1,41 @@
+import GlimmerComponent from '@glimmer/component';
+import { ProgressBar } from '@cardstack/boxel-ui/components';
+import { htmlSafe } from '@ember/template';
+
+interface CrmProgressBarArgs {
+  Args: {
+    value: number;
+    max: number;
+    color: string;
+  };
+  Element: HTMLElement;
+}
+
+class CrmProgressBar extends GlimmerComponent<CrmProgressBarArgs> {
+  get progressBarStyle() {
+    return htmlSafe(`--boxel-progress-bar-fill-color: ${this.args.color};`);
+  }
+
+  <template>
+    <ProgressBar
+      @value={{@value}}
+      @max={{@max}}
+      style={{this.progressBarStyle}}
+      class='progress-bar'
+      ...attributes
+    />
+    <style scoped>
+      .progress-bar {
+        width: 100px;
+        --boxel-progress-bar-background-color: var(--boxel-100);
+        --boxel-progress-bar-border-radius: 50px;
+      }
+      .progress-bar :deep(.progress-bar-container) {
+        height: 1.2em;
+        border: 1px solid var(--boxel-300);
+      }
+    </style>
+  </template>
+}
+
+export default CrmProgressBar;
diff --git a/packages/experiments-realm/components/entity-display.gts b/packages/experiments-realm/components/entity-display.gts
new file mode 100644
index 0000000000..96cdfe2eb6
--- /dev/null
+++ b/packages/experiments-realm/components/entity-display.gts
@@ -0,0 +1,54 @@
+import GlimmerComponent from '@glimmer/component';
+interface EntityDisplayArgs {
+  Args: {
+    name?: string | null;
+    underline?: boolean;
+  };
+  Blocks: {
+    thumbnail: [];
+    tag: [];
+  };
+  Element: HTMLElement;
+}
+
+export class EntityDisplay extends GlimmerComponent<EntityDisplayArgs> {
+  <template>
+    <div class='entity-display' ...attributes>
+      <div class='row'>
+        {{yield to='thumbnail'}}
+
+        <div class='name-tag'>
+          <span class='name {{if @underline "underline"}}'>
+            {{@name}}
+          </span>
+          {{yield to='tag'}}
+        </div>
+      </div>
+    </div>
+    <style scoped>
+      .entity-display {
+        container-type: inline-size;
+      }
+      .row {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--boxel-sp-xs);
+      }
+      .name-tag {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+      }
+      .name.underline {
+        text-decoration: underline;
+      }
+
+      @container (max-width: 447px) {
+        .row {
+          align-items: start;
+        }
+      }
+    </style>
+  </template>
+}
diff --git a/packages/experiments-realm/components/layout.gts b/packages/experiments-realm/components/layout.gts
index 7467bb6099..dcc82e943b 100644
--- a/packages/experiments-realm/components/layout.gts
+++ b/packages/experiments-realm/components/layout.gts
@@ -46,9 +46,9 @@ export const setBackgroundImage = (
 
 interface TitleGroupSignature {
   Args: {
-    title: string;
-    tagline: string;
-    thumbnailURL: string;
+    title?: string;
+    tagline?: string;
+    thumbnailURL?: string;
     element?: keyof HTMLElementTagNameMap;
   };
   Element: HTMLElement;
diff --git a/packages/experiments-realm/components/status-pill.gts b/packages/experiments-realm/components/status-pill.gts
index 7c22ce035d..eccdacdb10 100644
--- a/packages/experiments-realm/components/status-pill.gts
+++ b/packages/experiments-realm/components/status-pill.gts
@@ -26,14 +26,16 @@ export class StatusPill extends GlimmerComponent<StatusPillSignature> {
     <Pill
       class='status-pill'
       data-test-selected-type={{@label}}
-      {{! template-lint-disable no-inline-styles }}
       style={{htmlSafe (concat 'background-color: ' @iconLightColor ';')}}
+      ...attributes
     >
       <:iconLeft>
-        <this.icon
+        <div
           class='status-icon'
           style={{htmlSafe (concat 'background-color: ' @iconDarkColor ';')}}
-        />
+        >
+          <this.icon />
+        </div>
       </:iconLeft>
       <:default>
         <span class='status-label-text'>
@@ -44,6 +46,15 @@ export class StatusPill extends GlimmerComponent<StatusPillSignature> {
     <style scoped>
       .status-icon {
         border-radius: 0;
+        width: 25px;
+        height: 25px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .status-icon > svg {
+        width: 16px;
+        height: 16px;
       }
       .status-pill {
         padding: 0;
diff --git a/packages/experiments-realm/components/summary-card.gts b/packages/experiments-realm/components/summary-card.gts
index 5f6b921a7d..01ff217949 100644
--- a/packages/experiments-realm/components/summary-card.gts
+++ b/packages/experiments-realm/components/summary-card.gts
@@ -11,7 +11,7 @@ interface SummaryCardArgs {
 
 export default class SummaryCard extends GlimmerComponent<SummaryCardArgs> {
   <template>
-    <article class='summary-card'>
+    <article class='summary-card' ...attributes>
       <header class='summary-card-header'>
         {{#if (has-block 'title')}}
           {{yield to='title'}}
diff --git a/packages/experiments-realm/components/summary-grid-container.gts b/packages/experiments-realm/components/summary-grid-container.gts
index e600236eea..cc28edbb91 100644
--- a/packages/experiments-realm/components/summary-grid-container.gts
+++ b/packages/experiments-realm/components/summary-grid-container.gts
@@ -9,7 +9,7 @@ interface SummaryGridContainerArgs {
 
 export default class SummaryGridContainer extends GlimmerComponent<SummaryGridContainerArgs> {
   <template>
-    <div class='summary-container'>
+    <div class='summary-container' ...attributes>
       <div class='summary-grid'>
         {{yield}}
       </div>
diff --git a/packages/experiments-realm/crm-app.gts b/packages/experiments-realm/crm-app.gts
index 4354212fea..897fcc2461 100644
--- a/packages/experiments-realm/crm-app.gts
+++ b/packages/experiments-realm/crm-app.gts
@@ -22,8 +22,7 @@ import {
   ViewSelector,
 } from '@cardstack/boxel-ui/components';
 import { IconPlus } from '@cardstack/boxel-ui/icons';
-// @ts-expect-error path resolution issue
-import { AppCard, Tab } from '/catalog/app-card';
+import { AppCard, Tab } from './app-card';
 import {
   Query,
   CardError,
@@ -73,9 +72,9 @@ const DEAL_FILTERS: LayoutFilter[] = [
 ];
 const ACCOUNT_FILTERS: LayoutFilter[] = [
   {
-    displayName: 'Accounts',
+    displayName: 'All Accounts',
     icon: ContactIcon,
-    cardTypeName: 'Accounts',
+    cardTypeName: 'CRM Account',
     createNewButtonText: 'Create Account',
   },
 ];
@@ -93,7 +92,7 @@ class CrmAppTemplate extends Component<typeof AppCard> {
     this.activeFilter = filter;
   }
   //tabs
-  @tracked activeTabId: string = this.args.model.tabs[0].tabId;
+  @tracked activeTabId: string | undefined = this.args.model.tabs?.[0]?.tabId;
   @tracked tabs = this.args.model.tabs;
   @tracked private selectedView: ViewOption = 'card';
   @tracked private searchKey = '';
@@ -119,7 +118,7 @@ class CrmAppTemplate extends Component<typeof AppCard> {
       attributes: { displayName: string; total: number };
     }[];
 
-    for (let tab of this.tabs) {
+    for (let tab of this.tabs ?? []) {
       let filters = this.filterMap.get(tab.tabId);
       if (filters) {
         for (let filter of filters) {
@@ -143,11 +142,11 @@ class CrmAppTemplate extends Component<typeof AppCard> {
   });
 
   get filters() {
-    return this.filterMap.get(this.activeTabId)!;
+    return this.filterMap.get(this.activeTabId!)!;
   }
 
   @action setActiveFilter() {
-    this.activeFilter = this.filterMap.get(this.activeTabId)![0];
+    this.activeFilter = this.filterMap.get(this.activeTabId!)![0];
   }
 
   //Tabs
@@ -164,7 +163,8 @@ class CrmAppTemplate extends Component<typeof AppCard> {
   }
   get activeTab() {
     return (
-      this.tabs.find((t: Tab) => t.tabId === this.activeTabId) ?? this.tabs[0]
+      this.tabs?.find((t: Tab) => t.tabId === this.activeTabId) ??
+      this.tabs?.[0]
     );
   }
 
@@ -354,6 +354,7 @@ class CrmAppTemplate extends Component<typeof AppCard> {
             @selectedView={{this.selectedView}}
             @context={{@context}}
             @format={{if (eq this.selectedView 'card') 'embedded' 'fitted'}}
+            class='crm-app-grid'
           />
         {{/if}}
       </:grid>
@@ -440,6 +441,13 @@ class CrmAppTemplate extends Component<typeof AppCard> {
       .view-menu {
         margin-left: auto;
       }
+      /* Cards grid crm */
+      .crm-app :where(.card-view-container) {
+        grid-template-columns: 1fr;
+      }
+      .crm-app :where(.grid-view) {
+        --grid-card-min-width: 300px;
+      }
     </style>
   </template>
 }
diff --git a/packages/experiments-realm/crm/account.gts b/packages/experiments-realm/crm/account.gts
index 7b33708023..7ce5dd3364 100644
--- a/packages/experiments-realm/crm/account.gts
+++ b/packages/experiments-realm/crm/account.gts
@@ -1,14 +1,72 @@
-import { CardDef, linksTo } from 'https://cardstack.com/base/card-api';
+import {
+  CardDef,
+  linksTo,
+  contains,
+} from 'https://cardstack.com/base/card-api';
 import { Component } from 'https://cardstack.com/base/card-api';
 import GlimmerComponent from '@glimmer/component';
-import { field, linksToMany } from 'https://cardstack.com/base/card-api';
+import {
+  field,
+  linksToMany,
+  StringField,
+} from 'https://cardstack.com/base/card-api';
+import { Address as AddressField } from '../address';
 import { Company } from './company';
 import { Contact } from './contact';
-import { Deal } from './deal';
 import SummaryCard from '../components/summary-card';
 import SummaryGridContainer from '../components/summary-grid-container';
 import BuildingIcon from '@cardstack/boxel-icons/captions';
 import AccountHeader from '../components/account-header';
+import { WebsiteField } from '../website';
+import { Avatar, Pill } from '@cardstack/boxel-ui/components';
+import { EntityDisplay } from '../components/entity-display';
+
+// Perhaps, can be address?
+interface ContactRowArgs {
+  Args: {
+    userID: string;
+    name: string;
+    thumbnailURL: string;
+    isPrimary: boolean;
+  };
+  Blocks: {};
+  Element: HTMLElement;
+}
+
+class ContactRow extends GlimmerComponent<ContactRowArgs> {
+  <template>
+    <EntityDisplay @name={{@name}}>
+      <:thumbnail>
+        <Avatar
+          @userID={{@userID}}
+          @displayName={{@name}}
+          @thumbnailURL={{@thumbnailURL}}
+          @isReady={{true}}
+          class='avatar'
+        />
+      </:thumbnail>
+      <:tag>
+        {{#if @isPrimary}}
+          <Pill class='primary-tag' @pillBackgroundColor='#e8e8e8'>
+            Primary
+          </Pill>
+        {{/if}}
+      </:tag>
+    </EntityDisplay>
+    <style scoped>
+      .avatar {
+        --profile-avatar-icon-size: 30px;
+        flex-shrink: 0;
+      }
+      .primary-tag {
+        --pill-font-weight: 400;
+        --pill-padding: var(--boxel-sp-5xs) var(--boxel-sp-6xs);
+        --pill-font: 400 var(--boxel-font-sm);
+        --pill-border: none;
+      }
+    </style>
+  </template>
+}
 
 class IsolatedTemplate extends Component<typeof Account> {
   //Mock Data:
@@ -16,19 +74,32 @@ class IsolatedTemplate extends Component<typeof Account> {
     return 'https://picsum.photos/id/237/200/300';
   }
 
-  get companyName() {
-    return 'TechNova Solutions';
+  get hasCompanyInfo() {
+    return this.args.model?.website || this.args.model?.headquartersAddress;
+  }
+
+  get hasContacts() {
+    return (
+      this.args.model.primaryContact?.name ||
+      (this.args.model.contacts?.length ?? 0) > 0 //contacts is a proxy array
+    );
   }
 
   <template>
     <AccountPageLayout>
       <:header>
-        <AccountHeader @logoURL={{this.logoURL}} @name={{this.companyName}}>
+        <AccountHeader @logoURL={{this.logoURL}} @name={{@model.name}}>
           <:name>
-            <h1 class='account-name'>{{this.companyName}}</h1>
+            <h1 class='account-name'>{{@model.name}}</h1>
           </:name>
           <:content>
-            <p class='description'>Description</p>
+            <div class='description'>
+              <@fields.primaryContact
+                @format='atom'
+                @displayContainer={{false}}
+                class='primary-contact'
+              />
+            </div>
           </:content>
         </AccountHeader>
       </:header>
@@ -43,8 +114,14 @@ class IsolatedTemplate extends Component<typeof Account> {
               <BuildingIcon class='header-icon' />
             </:icon>
             <:content>
-              <p class='description'>Description</p>
-              <p class='description'>Description</p>
+              <div class='description'>
+                {{#if this.hasCompanyInfo}}
+                  <@fields.headquartersAddress @format='atom' />
+                  <@fields.website @format='atom' />
+                {{else}}
+                  Missing Company Info
+                {{/if}}
+              </div>
             </:content>
           </SummaryCard>
 
@@ -56,8 +133,30 @@ class IsolatedTemplate extends Component<typeof Account> {
               <BuildingIcon class='header-icon' />
             </:icon>
             <:content>
-              <p class='description'>Description</p>
-              <p class='description'>Description</p>
+              <div class='description'>
+                {{#if this.hasContacts}}
+                  {{#if @model.primaryContact}}
+                    <ContactRow
+                      @userID={{@model.primaryContact.id}}
+                      @name={{@model.primaryContact.name}}
+                      @thumbnailURL={{@model.primaryContact.thumbnailURL}}
+                      @isPrimary={{true}}
+                    />
+                  {{/if}}
+                  {{#each @model.contacts as |contact|}}
+                    {{#if contact}}
+                      <ContactRow
+                        @userID={{contact.id}}
+                        @name={{contact.name}}
+                        @thumbnailURL={{contact.thumbnailURL}}
+                        @isPrimary={{false}}
+                      />
+                    {{/if}}
+                  {{/each}}
+                {{else}}
+                  Missing Contacts
+                {{/if}}
+              </div>
             </:content>
           </SummaryCard>
 
@@ -114,22 +213,54 @@ class IsolatedTemplate extends Component<typeof Account> {
         font: 600 var(--boxel-font-lg);
         margin: 0;
       }
+      .primary-contact {
+        width: fit-content;
+        display: inline-block;
+      }
       .description {
         margin: 0;
         font: 500 var(--boxel-font-sm);
         letter-spacing: var(--boxel-lsp-xs);
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xs);
       }
     </style>
   </template>
 }
 
 export class Account extends CardDef {
-  static displayName = 'Account';
+  static displayName = 'CRM Account';
 
+  @field name = contains(StringField, {
+    computeVia: function (this: Account) {
+      return this.company?.name;
+    },
+  });
   @field company = linksTo(Company);
   @field primaryContact = linksTo(Contact);
   @field contacts = linksToMany(Contact);
-  @field deals = linksToMany(Deal);
+  @field shippingAddress = contains(AddressField);
+  @field billingAddress = contains(AddressField);
+  //From linked Company
+  //TODO: Fix after CS-7670. Maybe no fix needed
+  @field headquartersAddress = contains(AddressField, {
+    computeVia: function (this: Account) {
+      return this.company?.headquartersAddress;
+    },
+  });
+  //TODO: Fix after CS-7670. Maybe no fix needed
+  @field website = contains(WebsiteField, {
+    computeVia: function (this: Account) {
+      return this.company?.website;
+    },
+  });
+
+  @field title = contains(StringField, {
+    computeVia: function (this: Account) {
+      return this.company?.name;
+    },
+  });
 
   static isolated = IsolatedTemplate;
 }
diff --git a/packages/experiments-realm/crm/company.gts b/packages/experiments-realm/crm/company.gts
index 68f51f12f0..54af38a781 100644
--- a/packages/experiments-realm/crm/company.gts
+++ b/packages/experiments-realm/crm/company.gts
@@ -1,7 +1,8 @@
 import StringField from 'https://cardstack.com/base/string';
 import NumberField from 'https://cardstack.com/base/number';
-import { UrlField } from '../url';
+import { WebsiteField } from '../website';
 import { Address } from '../address';
+import { EntityDisplay } from '../components/entity-display';
 
 import {
   Component,
@@ -13,16 +14,13 @@ import BuildingIcon from '@cardstack/boxel-icons/building';
 
 class ViewCompanyTemplate extends Component<typeof Company> {
   <template>
-    <div class='row'>
-      <BuildingIcon class='icon' />
-
-      {{#if @model.name}}
-        <span class='building-name'>{{@model.name}}</span>
-      {{else}}
-        <span class='no-building'>No Company Assigned</span>
-      {{/if}}
+    <div class='company-group'>
+      <EntityDisplay @name={{@model.name}} @underline={{true}}>
+        <:thumbnail>
+          <BuildingIcon class='icon' />
+        </:thumbnail>
+      </EntityDisplay>
     </div>
-
     <style scoped>
       .icon {
         width: var(--boxel-icon-xs);
@@ -34,21 +32,6 @@ class ViewCompanyTemplate extends Component<typeof Company> {
         align-items: center;
         gap: var(--boxel-sp-xxxs);
       }
-      .row > span {
-        -webkit-line-clamp: 1;
-        text-wrap: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-      .building-name {
-        font-size: var(--boxel-font-xs);
-        font-weight: 300;
-        text-decoration: underline;
-      }
-      .no-building {
-        font-size: var(--boxel-font-xs);
-        font-weight: 300;
-      }
     </style>
   </template>
 }
@@ -59,7 +42,7 @@ export class Company extends CardDef {
   @field industry = contains(StringField);
   @field headquartersAddress = contains(Address);
   @field phone = contains(NumberField);
-  @field website = contains(UrlField);
+  @field website = contains(WebsiteField);
   @field stockSymbol = contains(StringField);
 
   @field title = contains(StringField, {
diff --git a/packages/experiments-realm/crm/contact.gts b/packages/experiments-realm/crm/contact.gts
index 3791862f11..c572e04c65 100644
--- a/packages/experiments-realm/crm/contact.gts
+++ b/packages/experiments-realm/crm/contact.gts
@@ -1,6 +1,8 @@
 import StringField from 'https://cardstack.com/base/string';
 import NumberField from 'https://cardstack.com/base/number';
-
+import { PhoneField } from '../phone';
+import { EmailField } from '../email';
+import { ContactLinkField } from '../fields/contact-link';
 import {
   Component,
   CardDef,
@@ -8,13 +10,12 @@ import {
   field,
   contains,
   linksTo,
+  containsMany,
 } from 'https://cardstack.com/base/card-api';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { fn } from '@ember/helper';
-import { RadioInput, Pill } from '@cardstack/boxel-ui/components';
-import MailIcon from '@cardstack/boxel-icons/mail';
-import PhoneIcon from '@cardstack/boxel-icons/phone';
+import { RadioInput } from '@cardstack/boxel-ui/components';
 import HeartHandshakeIcon from '@cardstack/boxel-icons/heart-handshake';
 import TargetArrowIcon from '@cardstack/boxel-icons/target-arrow';
 import AvatarGroup from '../components/avatar-group';
@@ -22,6 +23,35 @@ import { Company } from './company';
 import { Avatar } from '@cardstack/boxel-ui/components';
 import { StatusPill } from '../components/status-pill';
 import type IconComponent from '@cardstack/boxel-icons/captions';
+import ContactIcon from '@cardstack/boxel-icons/contact';
+import Email from '@cardstack/boxel-icons/mail';
+import Linkedin from '@cardstack/boxel-icons/linkedin';
+import XIcon from '@cardstack/boxel-icons/brand-x';
+
+export class SocialLinkField extends ContactLinkField {
+  static displayName = 'social-link';
+
+  static values = [
+    {
+      type: 'social',
+      label: 'X',
+      icon: XIcon,
+      cta: 'Follow',
+    },
+    {
+      type: 'social',
+      label: 'LinkedIn',
+      icon: Linkedin,
+      cta: 'Connect',
+    },
+    {
+      type: 'email',
+      label: 'Email',
+      icon: Email,
+      cta: 'Contact',
+    },
+  ];
+}
 
 const getStatusData = (
   label: string | undefined,
@@ -29,16 +59,6 @@ const getStatusData = (
   return StatusField.values.find((status) => status.label === label);
 };
 
-const formatPhone = (phone: any) => {
-  if (!phone) return undefined;
-  return `+${phone.country} (${phone.area}) ${phone.phoneNumber}`;
-};
-
-const formatEmail = (email: string) => {
-  if (!email) return undefined;
-  return email;
-};
-
 export interface LooseyGooseyData {
   index: number;
   label: string;
@@ -118,74 +138,38 @@ export class StatusField extends LooseGooseyField {
   };
 }
 
-export class PhoneField extends FieldDef {
-  static displayName = 'phoneMobile';
-  @field country = contains(NumberField);
-  @field area = contains(NumberField);
-  @field phoneNumber = contains(NumberField);
-
-  static embedded = class Embedded extends Component<typeof this> {
-    <template>
-      (+<@fields.country />) <@fields.area />-<@fields.phoneNumber />
-    </template>
-  };
-}
-
 class EmbeddedTemplate extends Component<typeof Contact> {
+  get hasSocialLinks() {
+    return (
+      this.args.model.socialLinks && this.args.model.socialLinks.length > 0
+    );
+  }
+
   <template>
     <article class='embedded-contact-card'>
-      {{#if @model.id}}
-        <AvatarGroup
-          @userID={{@model.id}}
-          @name={{@model.name}}
-          @thumbnailURL={{@model.thumbnailURL}}
-        >
-          <:content>
-            <@fields.company
-              @format='atom'
-              @displayContainer={{false}}
-              class='company-container'
-            />
-          </:content>
-        </AvatarGroup>
-      {{/if}}
+      <AvatarGroup
+        @userId={{@model.id}}
+        @name={{@model.name}}
+        @thumbnailURL={{@model.thumbnailURL}}
+      >
+        <:content>
+          <@fields.company @format='atom' @displayContainer={{false}} />
+        </:content>
+      </AvatarGroup>
 
       <div class='contact-info'>
-        {{#if @model.primaryEmail}}
-          <div class='row primary-email'>
-            <MailIcon class='icon gray' />
-            <span>{{formatEmail @model.primaryEmail}}</span>
-          </div>
-        {{/if}}
-
-        {{#if @model.secondaryEmail}}
-          <div class='row secondary-email'>
-            <MailIcon class='icon gray' />
-            <span>{{formatEmail @model.secondaryEmail}}</span>
-          </div>
-        {{/if}}
-
-        {{#if (formatPhone @model.phoneMobile)}}
-          <div class='row primary-phone'>
-            <PhoneIcon class='icon gray' />
-            <span>{{formatPhone @model.phoneMobile}}</span>
-            <Pill class='pill-gray'>
-              mobile
-            </Pill>
-          </div>
-        {{/if}}
-
-        {{#if (formatPhone @model.phoneOffice)}}
-          <div class='row secondary-phone'>
-            <PhoneIcon class='icon gray' />
-            <span>{{formatPhone @model.phoneOffice}}</span>
-            <Pill class='pill-gray'>
-              office
-            </Pill>
-          </div>
-        {{/if}}
+        <@fields.primaryEmail @format='atom' />
+        <@fields.secondaryEmail @format='atom' />
+        <@fields.phoneMobile @format='atom' />
+        <@fields.phoneOffice @format='atom' />
       </div>
 
+      {{#if this.hasSocialLinks}}
+        <div class='links'>
+          <@fields.socialLinks @format='atom' />
+        </div>
+      {{/if}}
+
       {{#if @model.status.label}}
         {{#let (getStatusData @model.status.label) as |statusData|}}
           <StatusPill
@@ -193,6 +177,7 @@ class EmbeddedTemplate extends Component<typeof Contact> {
             @icon={{statusData.icon}}
             @iconDarkColor={{statusData.darkColor}}
             @iconLightColor={{statusData.lightColor}}
+            class='status-pill'
           />
         {{/let}}
       {{/if}}
@@ -202,100 +187,77 @@ class EmbeddedTemplate extends Component<typeof Contact> {
       .embedded-contact-card {
         width: 100%;
         height: 100%;
-        padding: var(--boxel-sp-lg);
-        display: flex;
-        flex-direction: column;
-        background: var(--boxel-light);
+        padding: var(--boxel-sp);
+        overflow: hidden;
+        display: grid;
+        gap: var(--boxel-sp-sm);
+        grid-template-areas:
+          'avatar-group-container'
+          'contact-info'
+          'links'
+          'status';
+        grid-template-rows: max-content max-content max-content auto;
       }
       .contact-info {
         display: flex;
         flex-direction: column;
-        gap: var(--boxel-sp-xs);
+        gap: var(--boxel-sp-xxs);
         font-size: var(--boxel-font-sm);
         color: var(--boxel-dark);
-        margin-top: var(--boxel-sp);
       }
-      .row {
+      .links :deep(div) {
         display: flex;
+        gap: var(--boxel-sp-xxxs);
         flex-wrap: wrap;
-        align-items: center;
-        word-break: break-all;
-        gap: var(--boxel-sp-xxs);
       }
-      .icon {
-        width: var(--boxel-icon-sm);
-        height: var(--boxel-icon-sm);
-        flex-shrink: 0;
-      }
-      .icon.gray {
-        color: var(--boxel-400);
-      }
-      .pill-gray {
-        font-weight: 500;
-        font-size: var(--boxel-font-size-sm);
-        word-break: keep-all;
-        --pill-background-color: var(--boxel-200);
-        border: none;
+      .status-pill {
+        width: fit-content;
       }
     </style>
   </template>
 }
 
 class FittedTemplate extends Component<typeof Contact> {
+  get hasSocialLinks() {
+    return (
+      this.args.model.socialLinks && this.args.model.socialLinks.length > 0
+    );
+  }
+
   <template>
     <article class='fitted-contact-card'>
-      {{#if @model.id}}
-        <AvatarGroup
-          @userID={{@model.id}}
-          @name={{@model.name}}
-          @thumbnailURL={{@model.thumbnailURL}}
-        >
-          <:content>
-            <@fields.company
-              @format='atom'
-              @displayContainer={{false}}
-              class='company-container'
-            />
-          </:content>
-        </AvatarGroup>
-      {{/if}}
+      <AvatarGroup
+        @userId={{@model.id}}
+        @name={{@model.name}}
+        @thumbnailURL={{@model.thumbnailURL}}
+        class='avatar-group-container'
+      >
+        <:content>
+          <@fields.company @format='atom' @displayContainer={{false}} />
+        </:content>
+      </AvatarGroup>
 
       <div class='contact-info'>
-        {{#if @model.primaryEmail}}
-          <div class='row primary-email'>
-            <MailIcon class='icon gray' />
-            <span>{{formatEmail @model.primaryEmail}}</span>
-          </div>
-        {{/if}}
-
-        {{#if @model.secondaryEmail}}
-          <div class='row secondary-email'>
-            <MailIcon class='icon gray' />
-            <span>{{formatEmail @model.secondaryEmail}}</span>
-          </div>
-        {{/if}}
-
-        {{#if @model.phoneMobile}}
-          <div class='row primary-phone'>
-            <PhoneIcon class='icon gray' />
-            <span>{{formatPhone @model.phoneMobile}}</span>
-            <Pill class='pill-gray'>
-              mobile
-            </Pill>
-          </div>
-        {{/if}}
-
-        {{#if @model.phoneOffice}}
-          <div class='row secondary-phone'>
-            <PhoneIcon class='icon gray' />
-            <span>{{formatPhone @model.phoneOffice}}</span>
-            <Pill class='pill-gray'>
-              office
-            </Pill>
-          </div>
-        {{/if}}
+        <div class='primary-email'>
+          <@fields.primaryEmail @format='atom' />
+        </div>
+        <div class='secondary-email'>
+          <@fields.secondaryEmail @format='atom' />
+        </div>
+        <div class='phone-mobile'>
+          <@fields.phoneMobile @format='atom' />
+        </div>
+        <div class='phone-office'>
+          <@fields.phoneOffice @format='atom' />
+        </div>
       </div>
 
+      {{#if this.hasSocialLinks}}
+        <div class='links'>
+          <@fields.socialLinks @format='atom' />
+        </div>
+      {{/if}}
+
       {{#if @model.status.label}}
         {{#let (getStatusData @model.status.label) as |statusData|}}
           <StatusPill
@@ -310,205 +272,399 @@ class FittedTemplate extends Component<typeof Contact> {
 
     <style scoped>
       .fitted-contact-card {
+        --icon-size: 16px;
         width: 100%;
         height: 100%;
         min-width: 100px;
         min-height: 29px;
         overflow: hidden;
-        display: flex;
-        gap: var(--boxel-sp-sm);
+        display: grid;
+        gap: var(--boxel-sp-xs);
         padding: var(--boxel-sp-xs);
+        grid-template-areas:
+          'avatar-group-container'
+          'contact-info'
+          'links'
+          'status';
+        grid-template-rows: max-content max-content max-content auto;
       }
-      .contact-info {
-        font-size: var(--boxel-font-xs);
-        align-self: normal;
-      }
-      .contact-info > * + * {
-        margin-top: var(--boxel-sp-xxs);
+      .avatar-group-container {
+        grid-area: avatar-group-container;
       }
-      .icon {
-        width: var(--boxel-icon-xs);
-        height: var(--boxel-icon-xs);
-        flex-shrink: 0;
-      }
-      .icon.gray {
-        color: var(--boxel-400);
+      .contact-info {
+        grid-area: contact-info;
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xxs);
+        font-size: var(--boxel-font-sm);
+        color: var(--boxel-dark);
+        word-break: break-word;
       }
-      .pill-gray {
-        font-weight: 300;
-        font-size: 10px;
-        word-break: keep-all;
-        --pill-background-color: var(--boxel-200);
-        border: none;
+      .links {
+        grid-area: links;
       }
       .status-pill {
-        border-color: transparent;
-        padding: 0;
-        flex: none;
-        overflow: hidden;
-        margin-top: auto;
+        grid-area: status;
+        width: fit-content;
       }
-      .row {
+      .links {
+        font-size: var(--boxel-font-xs);
+        align-self: normal;
+      }
+      .links :deep(div) {
         display: flex;
-        align-items: center;
-        word-break: break-all;
-        gap: var(--boxel-sp-xxs);
+        gap: var(--boxel-sp-xxxs);
+        flex-wrap: wrap;
       }
 
-      /* Square layout (aspect-ratio = 1.0) or portrait layout with height < 226px */
-      @container fitted-card ((aspect-ratio = 1.0) or ((aspect-ratio < 1.0) and (height < 226px))) {
+      @container fitted-card ((aspect-ratio <= 1.0) and (224px <= height <= 226px)) {
         .fitted-contact-card {
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          padding: var(--boxel-sp-xs);
+          grid-template:
+            'avatar-group-container'
+            'links'
+            'status';
+          grid-template-rows: max-content max-content auto;
+          gap: var(--boxel-sp-xs);
         }
-
-        .contact-info,
-        .status-pill,
-        .primary-email,
-        .secondary-email,
-        .secondary-phone,
-        .pill-gray {
+        .avatar-group-container {
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 45px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size);
+        }
+        .contact-info {
           display: none;
         }
       }
 
-      @container fitted-card (aspect-ratio <= 1.0) and (226px < height) {
+      @container fitted-card (aspect-ratio <= 1.0) and (180px <= height < 224px) {
         .fitted-contact-card {
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          padding: var(--boxel-sp-xs);
+          grid-template:
+            'avatar-group-container'
+            'links'
+            'status';
+          grid-template-rows: max-content max-content auto;
+          gap: var(--boxel-sp-xs);
         }
-
-        .status-pill {
-          align-self: flex-end;
+        .contact-info {
+          display: none;
         }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 45px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size);
+        }
+      }
 
-        .primary-email,
-        .secondary-email,
-        .secondary-phone,
-        .pill-gray {
+      @container fitted-card ((aspect-ratio <= 1.0) and (height < 180px) ) {
+        .fitted-contact-card {
+          grid-template:
+            'avatar-group-container'
+            'status';
+          grid-template-rows: max-content auto;
+          gap: var(--boxel-sp-xs);
+        }
+        .contact-info,
+        .links {
           display: none;
         }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
       }
 
-      @container fitted-card ((1.0 < aspect-ratio) and (58px <= height < 180px)) {
+      @container fitted-card (aspect-ratio <= 1.0) and (148px <= height < 180px) {
         .fitted-contact-card {
-          align-items: center;
-          align-content: center;
+          grid-template:
+            'avatar-group-container'
+            'status';
+          grid-template-rows: max-content auto;
           gap: var(--boxel-sp-xs);
-          padding: var(--boxel-sp-xxs);
         }
-
-        .primary-email,
-        .secondary-email,
-        .secondary-phone,
-        .pill-gray {
+        .contact-info,
+        .links {
           display: none;
         }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
       }
 
-      @container fitted-card ((1.0 < aspect-ratio) and (500px <= width) and (58px <= height <= 77px)) {
+      @container fitted-card (aspect-ratio <= 1.0) and (128px <= height < 148px) {
         .fitted-contact-card {
-          align-items: center;
-          align-content: center;
+          grid-template:
+            'avatar-group-container'
+            'status';
+          grid-template-rows: max-content auto;
           gap: var(--boxel-sp-xs);
-          padding: var(--boxel-sp-xxs);
         }
-
-        .primary-email,
-        .secondary-email,
-        .secondary-phone,
-        .pill-gray {
+        .contact-info,
+        .links {
           display: none;
         }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
       }
 
-      /* Horizontal layouts (aspect-ratio > 1.0) */
-      @container fitted-card ((1.0 < aspect-ratio) and (115px <= height)) {
+      @container fitted-card (aspect-ratio <= 1.0) and (118px <= height < 128px) {
         .fitted-contact-card {
-          flex-direction: column;
-          justify-content: center;
+          grid-template:
+            'avatar-group-container'
+            'status';
+          grid-template-rows: max-content auto;
           gap: var(--boxel-sp-xs);
-          padding: var(--boxel-sp-sm);
         }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
+      }
 
-        .primary-email,
-        .secondary-email,
-        .secondary-phone,
-        .pill-gray {
-          display: none;
+      @container fitted-card ((aspect-ratio <= 1.0) and (400px <= height) and (226px < width)) {
+        .fitted-contact-card {
+          grid-template:
+            'avatar-group-container'
+            'contact-info'
+            'links'
+            'status';
+          grid-template-rows: max-content max-content max-content auto;
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 55px;
         }
       }
 
-      @container fitted-card ((1.0 < aspect-ratio) and (115px <= height < 180px)) {
-        .status-pill {
-          display: none;
+      @container fitted-card ((aspect-ratio <= 1.0) and (400px <= height)) {
+        .fitted-contact-card {
+          grid-template:
+            'avatar-group-container'
+            'contact-info'
+            'links'
+            'status';
+          grid-template-rows: max-content max-content max-content auto;
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 55px;
         }
       }
 
+      /* 1.0 < Aspect ratio (Horizontal card) */
       @container fitted-card ((1.0 < aspect-ratio) and (180px <= height)) {
-        .status-pill {
-          align-self: flex-end;
+        .fitted-contact-card {
+          grid-template:
+            'avatar-group-container'
+            'links'
+            'status';
+          grid-template-rows: max-content max-content auto;
+          gap: var(--boxel-sp-xs);
+        }
+        .contact-info {
+          display: none;
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 50px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size);
         }
       }
 
-      @container fitted-card ((1.0 < aspect-ratio) and (58px <= height < 115px)) {
+      @container fitted-card ((1.0 < aspect-ratio) and (151px <= height < 180px)) {
         .fitted-contact-card {
-          display: flex;
-          align-items: center;
-          padding: var(--boxel-sp-sm);
+          grid-template:
+            'avatar-group-container'
+            'status';
+          grid-template-rows: max-content auto;
+          gap: var(--boxel-sp-xs);
         }
+        .contact-info,
+        .links {
+          display: none;
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 40px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size);
+        }
+      }
 
+      @container fitted-card ((1.0 < aspect-ratio) and (115px <= height <= 150px)) {
+        .fitted-contact-card {
+          grid-template:
+            'avatar-group-container'
+            'status';
+          grid-template-rows: max-content auto;
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
         .contact-info,
-        .status-pill {
+        .links {
           display: none;
         }
       }
 
-      /* Smallest horizontal layout */
-      @container fitted-card ((1.0 < aspect-ratio) and (50px <= height < 58px)) {
+      @container fitted-card ((1.0 < aspect-ratio) and (78px <= height <= 114px)) {
         .fitted-contact-card {
-          display: flex;
-          align-items: center;
-          align-content: center;
-          padding: var(--boxel-sp-xxxs);
+          grid-template: 'avatar-group-container';
+          grid-template-rows: max-content;
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
+        .contact-info,
+        .links,
+        .status-pill {
+          display: none;
         }
+      }
 
+      @container fitted-card ((1.0 < aspect-ratio) and (500px <= width) and (58px <= height <= 77px)) {
+        .fitted-contact-card {
+          grid-template: 'avatar-group-container status';
+          grid-template-columns: max-content auto;
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
         .contact-info,
-        .status-pill,
-        .company-container {
+        .links {
           display: none;
         }
+        .status-pill {
+          margin-left: auto;
+          margin-top: 0;
+          align-self: center;
+        }
       }
 
-      /* Fallback for extremely small sizes */
-      @container fitted-card ((1.0 < aspect-ratio) and (height < 50px)) {
+      @container fitted-card ((1.0 < aspect-ratio) and (226px <= width <= 499px) and (58px <= height <= 77px)) {
         .fitted-contact-card {
-          grid-template: 'avatar-container';
-          display: flex;
-          align-items: center;
-          align-content: center;
-          padding: var(--boxel-sp-xxxs);
+          grid-template: 'avatar-group-container';
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
+        .links,
+        .status-pill {
+          display: none;
         }
+      }
 
-        .name {
-          font-size: var(--boxel-font-xs);
+      @container fitted-card ((1.0 < aspect-ratio) and (width <= 225px) and (58px <= height <= 77px)) {
+        .fitted-contact-card {
+          grid-template: 'avatar-group-container';
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail) {
+          --profile-avatar-icon-size: 30px;
+        }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
         }
+        .links,
+        .status-pill {
+          display: none;
+        }
+      }
 
-        .contact-info,
-        .status-pill,
-        .company-container {
+      @container fitted-card ((1.0 < aspect-ratio) and (height <= 57px)) {
+        .fitted-contact-card {
+          grid-template: 'avatar-group-container';
+          gap: var(--boxel-sp-xs);
+        }
+        .avatar-group-container {
+          gap: var(--boxel-sp-xxs);
+        }
+        .avatar-group-container :where(.avatar-thumbnail),
+        .avatar-group-container :where(.company-group),
+        .links,
+        .status-pill {
           display: none;
         }
+        .avatar-group-container :where(.avatar-info .name) {
+          font-size: var(--boxel-font-size-sm);
+        }
       }
     </style>
   </template>
 }
 
 class AtomTemplate extends Component<typeof Contact> {
+  get label() {
+    return this.args.model?.name && this.args.model?.position
+      ? `${this.args.model?.name} • ${this.args.model?.position}`
+      : this.args.model?.name ?? '';
+  }
   <template>
     <div class='contact'>
       {{#if @model.id}}
@@ -521,17 +677,6 @@ class AtomTemplate extends Component<typeof Contact> {
         />
       {{/if}}
       <span class='name'>{{@model.name}}</span>
-      {{#if @model.status.label}}
-        {{#let (getStatusData @model.status.label) as |statusData|}}
-          <StatusPill
-            class='status-pill'
-            @label={{@model.status.label}}
-            @icon={{statusData.icon}}
-            @iconDarkColor={{statusData.darkColor}}
-            @iconLightColor={{statusData.lightColor}}
-          />
-        {{/let}}
-      {{/if}}
     </div>
     <style scoped>
       .contact {
@@ -557,28 +702,29 @@ class AtomTemplate extends Component<typeof Contact> {
 
 export class Contact extends CardDef {
   static displayName = 'CRM Contact';
+  static icon = ContactIcon;
 
   @field firstName = contains(StringField);
   @field lastName = contains(StringField);
-  @field company = linksTo(Company); // Links to the Company Card
+  @field position = contains(StringField);
+  @field company = linksTo(Company);
   @field department = contains(StringField);
-  @field primaryEmail = contains(StringField); // Stores primary email, format may change after final emailField PR is approved
-  @field secondaryEmail = contains(StringField); // Stores secondary email, format may change after final emailField PR is approved
-  @field phoneMobile = contains(PhoneField); // Stores mobile phone, format may change after final phoneField PR is approved
-  @field phoneOffice = contains(PhoneField); // Stores office phone, format may change after final phoneField PR is approved
-  @field status = contains(StatusField); // Stores status as a status field
-  //@field socialLinks = containsMany(UrlField); // Pending format discussion with Burcu for consistency
-  //@field account = linksTo(Account) // Pending completion of account card
+  @field primaryEmail = contains(EmailField);
+  @field secondaryEmail = contains(EmailField);
+  @field phoneMobile = contains(PhoneField);
+  @field phoneOffice = contains(PhoneField);
+  @field status = contains(StatusField);
+  @field socialLinks = containsMany(SocialLinkField);
 
-  @field title = contains(StringField, {
+  @field name = contains(StringField, {
     computeVia: function (this: Contact) {
-      return this.name;
+      return [this.firstName, this.lastName].filter(Boolean).join(' ');
     },
   });
 
-  @field name = contains(StringField, {
+  @field title = contains(StringField, {
     computeVia: function (this: Contact) {
-      return [this.firstName, this.lastName].filter(Boolean).join(' ');
+      return this.name;
     },
   });
 
diff --git a/packages/experiments-realm/crm/deal.gts b/packages/experiments-realm/crm/deal.gts
index e944a793ea..bcc4814f35 100644
--- a/packages/experiments-realm/crm/deal.gts
+++ b/packages/experiments-realm/crm/deal.gts
@@ -1,5 +1,380 @@
 import { CardDef } from 'https://cardstack.com/base/card-api';
+import { Component } from 'https://cardstack.com/base/card-api';
+import GlimmerComponent from '@glimmer/component';
+import SummaryCard from '../components/summary-card';
+import SummaryGridContainer from '../components/summary-grid-container';
+import BuildingIcon from '@cardstack/boxel-icons/captions';
+import UserSquare from '@cardstack/boxel-icons/user-square';
+import { BoxelButton, Pill } from '@cardstack/boxel-ui/components';
+import Info from '@cardstack/boxel-icons/info';
+import AccountHeader from '../components/account-header';
+import CrmProgressBar from '../components/crm-progress-bar';
+import { EntityDisplay } from '../components/entity-display';
+import { htmlSafe } from '@ember/template';
+import { concat } from '@ember/helper';
+
+class IsolatedTemplate extends Component<typeof Deal> {
+  //Mock Data:
+  get logoURL() {
+    return 'https://picsum.photos/id/500/200/300';
+  }
+
+  get companyName() {
+    return 'TechNova Solutions';
+  }
+
+  get primaryContactwithPosition() {
+    const contactName = 'Olivia';
+    const contactPosition = 'Head of Partnerships';
+
+    return `${contactName} - ${contactPosition}`;
+  }
+
+  get pillsData() {
+    return [
+      { label: 'Proposal', backgroundColor: 'var(--boxel-lilac)' },
+      { label: 'High Priority', backgroundColor: 'var(--boxel-yellow)' },
+    ];
+  }
+
+  <template>
+    <DealPageLayout>
+      <:header>
+        <AccountHeader @logoURL={{this.logoURL}} @name={{this.companyName}}>
+          <:name>
+            <h1 class='account-name'>{{this.companyName}}</h1>
+          </:name>
+          <:content>
+            <EntityDisplay
+              @name={{this.primaryContactwithPosition}}
+              @underline={{true}}
+            >
+              <:thumbnail>
+                <UserSquare class='user-icon' width='20px' height='20px' />
+              </:thumbnail>
+            </EntityDisplay>
+
+            <div class='tag-container'>
+              {{#each this.pillsData as |pill|}}
+                <Pill
+                  style={{htmlSafe
+                    (concat
+                      'background-color: '
+                      pill.backgroundColor
+                      '; border-color: transparent;'
+                    )
+                  }}
+                >{{pill.label}}</Pill>
+              {{/each}}
+            </div>
+          </:content>
+        </AccountHeader>
+      </:header>
+
+      <:dashboard>
+        <SummaryCard class='dashboard'>
+          <:title>
+            <h2 class='summary-title'>Deal Value</h2>
+          </:title>
+          <:icon>
+            <div class='progress-container'>
+              <label class='progress-label'>85% Health Score</label>
+              <CrmProgressBar
+                @value={{85}}
+                @max={{100}}
+                @color='var(--boxel-green)'
+              />
+            </div>
+          </:icon>
+          <:content>
+            <article class='dashboard-cards'>
+              <div class='block'>
+                <label>Current Value:</label>
+                <span class='highlight-value'>$250,000</span>
+                <p class='description success-value'>Description</p>
+              </div>
+              <div class='block'>
+                <label>Predicted Revenue:</label>
+                <span class='highlight-value'>$275,000</span>
+                <p class='description secondary-value'>Description</p>
+              </div>
+              <div class='block'>
+                <label>Profit Margin:</label>
+                <span class='highlight-value'>22%</span>
+                <p class='description secondary-value'>Description</p>
+              </div>
+            </article>
+
+            <hr />
+
+            <article class='value-breakdown'>
+              <header>
+                <label>Value Breakdown</label>
+              </header>
+              <table class='breakdown-table'>
+                <tbody>
+                  <tr>
+                    <td class='item-name'>Venue Rental:</td>
+                    <td class='item-value'>$100,000</td>
+                  </tr>
+                  <tr>
+                    <td class='item-name'>Catering:</td>
+                    <td class='item-value'>$75,000</td>
+                  </tr>
+                  <tr>
+                    <td class='item-name'>AV Equipment:</td>
+                    <td class='item-value'>$50,000</td>
+                  </tr>
+                  <tr>
+                    <td class='item-name'>Staff and Management:</td>
+                    <td class='item-value'>$25,000</td>
+                  </tr>
+                </tbody>
+              </table>
+            </article>
+
+            <hr />
+
+            <footer class='next-steps'>
+              <div class='next-steps-row'>
+                <EntityDisplay @name='Next Steps'>
+                  <:thumbnail>
+                    <Info class='info-icon' width='20px' height='20px' />
+                  </:thumbnail>
+                </EntityDisplay>
+
+                <BoxelButton
+                  @as='button'
+                  @size='extra-small'
+                  @kind='secondary-light'
+                  class='view-proposal-btn'
+                >
+                  View Proposal
+                </BoxelButton>
+              </div>
+              <p class='descriptio mt-5'>Finalize venue contract and confirm
+                catering options to lock in current pricing.</p>
+            </footer>
+
+          </:content>
+        </SummaryCard>
+      </:dashboard>
+
+      <:summary>
+        <SummaryGridContainer>
+          <SummaryCard>
+            <:title>
+              <label>Company Info</label>
+            </:title>
+            <:icon>
+              <BuildingIcon class='header-icon' />
+            </:icon>
+            <:content>
+              <p class='description'>Description</p>
+              <p class='description'>Description</p>
+            </:content>
+          </SummaryCard>
+
+          <SummaryCard>
+            <:title>
+              <label>Contacts</label>
+            </:title>
+            <:icon>
+              <BuildingIcon class='header-icon' />
+            </:icon>
+            <:content>
+              <p class='description'>Description</p>
+              <p class='description'>Description</p>
+            </:content>
+          </SummaryCard>
+
+          <SummaryCard>
+            <:title>
+              <label>Lifetime Value</label>
+            </:title>
+            <:icon>
+              <BuildingIcon class='header-icon' />
+            </:icon>
+            <:content>
+              <h3 class='summary-highlight'>Desc</h3>
+              <p class='description'>Desc</p>
+            </:content>
+          </SummaryCard>
+
+          <SummaryCard>
+            <:title>
+              <label>Active Deals</label>
+            </:title>
+            <:icon>
+              <BuildingIcon class='header-icon' />
+            </:icon>
+            <:content>
+              <h3 class='summary-highlight'>Desc</h3>
+              <p class='description'>Desc</p>
+            </:content>
+          </SummaryCard>
+        </SummaryGridContainer>
+      </:summary>
+    </DealPageLayout>
+
+    <style scoped>
+      h1,
+      h2,
+      h3,
+      h4,
+      p {
+        margin: 0;
+      }
+      hr {
+        border: 1px solid var(--boxel-200);
+        margin: 1.3rem 0;
+      }
+      label {
+        font-weight: 500;
+      }
+      .mt-5 {
+        margin-top: 1rem;
+      }
+      .highlight-value {
+        font: 600 var(--boxel-font-xl);
+      }
+      .secondary-value {
+        font: 300 var(--boxel-font-sm);
+        color: var(--boxel-400);
+      }
+      .success-value {
+        font: 300 var(--boxel-font-sm);
+        color: var(--boxel-dark-green);
+      }
+      .block {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-xxxs);
+      }
+
+      /* dashboard */
+      .dashboard {
+        container-type: inline-size;
+      }
+      .dashboard-cards {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: var(--boxel-sp-xl);
+        margin-top: var(--boxel-sp);
+      }
+      .account-name {
+        font: 600 var(--boxel-font-lg);
+      }
+      .user-icon {
+        width: var(--boxel-icon-sm);
+        height: var(--boxel-icon-sm);
+        flex-shrink: 0;
+        margin-left: auto;
+      }
+      .tag-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--boxel-sp-xxs);
+        margin-top: var(--boxel-sp-xxs);
+      }
+      .summary-title {
+        font: 600 var(--boxel-font-sm);
+        letter-spacing: var(--boxel-lsp-xxs);
+        align-self: flex-start;
+      }
+      .summary-highlight {
+        font: 600 var(--boxel-font-lg);
+      }
+      .description {
+        font: 300 var(--boxel-font-sm);
+        letter-spacing: var(--boxel-lsp-xs);
+      }
+
+      /* Dashboard */
+      .progress-container {
+        display: flex;
+        align-items: start;
+        gap: var(--boxel-sp-xxs);
+      }
+      .progress-label {
+        color: var(--boxel-500);
+      }
+
+      /* table */
+      .breakdown-table {
+        width: 90%;
+        margin-left: auto;
+        margin-right: 1rem;
+        margin-top: 0.5rem;
+      }
+      .item-name,
+      .item-value {
+        padding: 8px;
+        text-align: left;
+      }
+      .item-value {
+        text-align: right;
+        font-weight: 600;
+      }
+      /* footer */
+      .next-steps-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--boxel-sp-sm);
+      }
+      .view-proposal-btn {
+        font-weight: 600;
+        padding: 2px 5px;
+        min-width: 0px;
+        min-height: 0px;
+      }
+      @container (max-width: 447px) {
+        .progress-container {
+          flex-direction: column-reverse;
+          align-items: flex-end;
+        }
+        .dashboard-cards {
+          grid-template-columns: 1fr;
+        }
+      }
+    </style>
+  </template>
+}
 
 export class Deal extends CardDef {
   static displayName = 'CRM Deal';
+
+  static isolated = IsolatedTemplate;
+}
+
+interface DealPageLayoutArgs {
+  Blocks: {
+    header: [];
+    dashboard: [];
+    summary: [];
+  };
+  Element: HTMLElement;
+}
+
+class DealPageLayout extends GlimmerComponent<DealPageLayoutArgs> {
+  <template>
+    <div class='deal-page-layout' ...attributes>
+      {{yield to='header'}}
+      {{yield to='dashboard'}}
+      {{yield to='summary'}}
+    </div>
+
+    <style scoped>
+      .deal-page-layout {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-lg);
+        width: 100%;
+        padding: var(--boxel-sp-lg);
+        box-sizing: border-box;
+      }
+    </style>
+  </template>
 }
diff --git a/packages/experiments-realm/email.gts b/packages/experiments-realm/email.gts
index ecb5831569..fdb551537e 100644
--- a/packages/experiments-realm/email.gts
+++ b/packages/experiments-realm/email.gts
@@ -15,6 +15,7 @@ import MailIcon from '@cardstack/boxel-icons/mail';
 import { debounce } from 'lodash';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { EntityDisplay } from './components/entity-display';
 
 // We use simple regex here to validate common email formats
 // This is definitely NOT a full email validation
@@ -67,17 +68,14 @@ export class EmailField extends StringField {
   static atom = class Atom extends Component<typeof EmailField> {
     <template>
       {{#if @model}}
-        <div class='row'>
-          <MailIcon class='icon' />
-          <span>{{@model}}</span>
-        </div>
+        <EntityDisplay @name={{@model}} @underline={{false}}>
+          <:thumbnail>
+            <MailIcon class='icon' />
+          </:thumbnail>
+        </EntityDisplay>
       {{/if}}
+
       <style scoped>
-        .row {
-          display: inline-flex;
-          align-items: center;
-          gap: var(--boxel-sp-xxs);
-        }
         .icon {
           width: var(--boxel-icon-sm);
           height: var(--boxel-icon-sm);
diff --git a/packages/experiments-realm/experiments_fields_preview.gts b/packages/experiments-realm/experiments_fields_preview.gts
index 20ea561796..c63a89d0f5 100644
--- a/packages/experiments-realm/experiments_fields_preview.gts
+++ b/packages/experiments-realm/experiments_fields_preview.gts
@@ -1,6 +1,10 @@
+import { FeaturedImageField } from './fields/featured-image';
 import { ContactLinkField } from './fields/contact-link';
 import { EmailField } from './email';
+import { PhoneField } from './phone';
 import { UrlField } from './url';
+import { WebsiteField } from './website';
+import { Address as AddressField } from './address';
 import {
   CardDef,
   field,
@@ -18,10 +22,15 @@ import { startCase } from 'lodash';
 export class ExperimentsFieldsPreview extends CardDef {
   @field url = contains(UrlField);
   @field urls = containsMany(UrlField);
+  @field address = contains(AddressField);
+  @field website = contains(WebsiteField);
   @field email = contains(EmailField);
   @field emails = containsMany(EmailField);
+  @field phone = contains(PhoneField);
   @field contactLink = contains(ContactLinkField);
   @field contactLinks = containsMany(ContactLinkField);
+  @field featuredImage = contains(FeaturedImageField);
+  @field images = containsMany(FeaturedImageField);
   static displayName = 'Custom Fields ';
   static isolated = class Isolated extends Component<typeof this> {
     <template>
diff --git a/packages/experiments-realm/fields/featured-image.gts b/packages/experiments-realm/fields/featured-image.gts
new file mode 100644
index 0000000000..fdb2d3712d
--- /dev/null
+++ b/packages/experiments-realm/fields/featured-image.gts
@@ -0,0 +1,291 @@
+import { hash } from '@ember/helper';
+import { htmlSafe } from '@ember/template';
+import {
+  Component,
+  field,
+  contains,
+  StringField,
+  FieldDef,
+} from 'https://cardstack.com/base/card-api';
+import NumberField from 'https://cardstack.com/base/number';
+import { ImageSizeField } from 'https://cardstack.com/base/base64-image';
+import { FieldContainer } from '@cardstack/boxel-ui/components';
+import { FailureBordered } from '@cardstack/boxel-ui/icons';
+import PhotoIcon from '@cardstack/boxel-icons/photo';
+import { UrlField } from '../url';
+import { setBackgroundImage } from '../components/layout';
+
+function cssForFeaturedImage({
+  imageUrl,
+  size,
+  height,
+  width,
+}: {
+  imageUrl: string | undefined;
+  size: 'actual' | 'contain' | 'cover' | undefined;
+  height?: number;
+  width?: number;
+}) {
+  if (!imageUrl) {
+    return undefined;
+  }
+
+  let css: string[] = [];
+  css.push(`background-image: url("${imageUrl}");`);
+  if (size && ['contain', 'cover'].includes(size)) {
+    css.push(`background-size: ${size};`);
+  }
+  if (height) {
+    css.push(`height: ${height}px;`);
+  }
+  if (width) {
+    css.push(`width: ${width}px`);
+  } else {
+    css.push(`width: 100%`);
+  }
+  return htmlSafe(css.join(' '));
+}
+
+export class FeaturedImageField extends FieldDef {
+  static displayName = 'Featured Image';
+  static icon = PhotoIcon;
+  @field imageUrl = contains(UrlField);
+  @field credit = contains(StringField);
+  @field caption = contains(StringField);
+  @field altText = contains(StringField);
+  @field size = contains(ImageSizeField);
+  @field height = contains(NumberField);
+  @field width = contains(NumberField);
+  static edit = class Edit extends Component<typeof this> {
+    get usesActualSize() {
+      return this.args.model.size === 'actual' || this.args.model.size == null;
+    }
+
+    get backgroundMaskStyle() {
+      let css: string[] = [];
+      if (this.args.model.height) {
+        css.push(`height: ${this.args.model.height}px;`);
+      }
+      if (this.args.model.width) {
+        css.push(`width: ${this.args.model.width}px`);
+      }
+      return htmlSafe(css.join(' '));
+    }
+
+    get needsHeight() {
+      return (
+        (this.args.model.size === 'contain' ||
+          this.args.model.size === 'cover') &&
+        !this.args.model.height
+      );
+    }
+
+    <template>
+      <div class='featured-image-edit'>
+        {{#if @model.imageUrl}}
+          <FieldContainer class='preview-field' @label='Preview' @tag='label'>
+            {{#if this.needsHeight}}
+              <p class='height-warning'>
+                <FailureBordered />
+                Can't render current image. Please provide a height when using
+                the "contain" or "cover" size.
+              </p>
+            {{else if this.usesActualSize}}
+              <img
+                class='image'
+                src={{@model.imageUrl}}
+                height={{@model.height}}
+                width={{@model.width}}
+                alt={{@model.altText}}
+              />
+            {{else}}
+              <div
+                class='checkerboard-preview-background'
+                style={{this.backgroundMaskStyle}}
+              >
+                <div
+                  class='image'
+                  role='img'
+                  aria-label={{@model.altText}}
+                  style={{cssForFeaturedImage
+                    (hash
+                      imageUrl=@model.imageUrl
+                      size=@model.size
+                      height=@model.height
+                      width=@model.width
+                    )
+                  }}
+                />
+              </div>
+            {{/if}}
+          </FieldContainer>
+        {{/if}}
+        <FieldContainer @label='Image Url' @tag='label'>
+          <@fields.imageUrl />
+        </FieldContainer>
+        <FieldContainer @label='Alt Text' @tag='label'>
+          <@fields.altText />
+        </FieldContainer>
+        <FieldContainer @label='Caption' @tag='label'>
+          <@fields.caption />
+        </FieldContainer>
+        <FieldContainer @label='Credit' @tag='label'>
+          <@fields.credit />
+        </FieldContainer>
+        <FieldContainer @label='Size' @tag='label'>
+          <@fields.size />
+        </FieldContainer>
+        <FieldContainer @label='Height (px)' @tag='label'>
+          <@fields.height />
+        </FieldContainer>
+        <FieldContainer @label='Width (px)' @tag='label'>
+          <@fields.width />
+        </FieldContainer>
+      </div>
+
+      <style scoped>
+        .featured-image-edit {
+          display: grid;
+          gap: var(--boxel-sp);
+          padding: var(--boxel-sp);
+          background-color: var(--boxel-100);
+          border-radius: var(--boxel-form-control-border-radius);
+        }
+        .preview-field :deep(.content) {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+        }
+        .preview-field.boxel-field > :deep(.content) > .image {
+          flex: unset;
+        }
+        .image {
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+        .checkerboard-preview-background {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          border: 1px solid var(--boxel-form-control-border-color);
+          border-radius: var(--boxel-form-control-border-radius);
+          background-color: white;
+          background-size: 24px 24px;
+          background-position:
+            12px 12px,
+            -12px 0,
+            0 0,
+            0 12px;
+          background-image: linear-gradient(
+              45deg,
+              var(--boxel-300) 25%,
+              transparent 25%
+            ),
+            linear-gradient(-45deg, var(--boxel-300) 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, var(--boxel-300) 75%),
+            linear-gradient(-45deg, transparent 75%, var(--boxel-300) 75%);
+          overflow: hidden;
+        }
+        .height-warning {
+          display: flex;
+          align-items: center;
+          margin: 0;
+          color: var(--boxel-error-200);
+          font: 500 var(--boxel-font-sm);
+          letter-spacing: var(--boxel-lsp-xs);
+        }
+        .height-warning svg {
+          min-width: 20px;
+          margin-right: var(--boxel-sp-xxs);
+        }
+      </style>
+    </template>
+  };
+
+  static atom = class Atom extends Component<typeof this> {
+    <template>
+      {{#if @model.imageUrl}}
+        <div
+          class='image'
+          role='img'
+          alt={{@model.altText}}
+          style={{setBackgroundImage @model.imageUrl}}
+        />
+      {{/if}}
+      <style scoped>
+        .image {
+          width: var(--atom-image-width, auto);
+          height: var(--atom-image-height, 100px);
+          background-size: var(--atom-image-background-size, contain);
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+      </style>
+    </template>
+  };
+  static embedded = class Embedded extends Component<typeof this> {
+    get usesActualSize() {
+      return this.args.model.size === 'actual' || this.args.model.size == null;
+    }
+    <template>
+      {{#if @model.imageUrl}}
+        <figure>
+          {{#if this.usesActualSize}}
+            <img
+              class='image'
+              src={{@model.imageUrl}}
+              height={{@model.height}}
+              width={{@model.width}}
+              alt={{@model.altText}}
+            />
+          {{else}}
+            <div
+              class='image'
+              role='img'
+              aria-label={{@model.altText}}
+              style={{cssForFeaturedImage
+                (hash
+                  imageUrl=@model.imageUrl
+                  size=@model.size
+                  height=@model.height
+                  width=@model.width
+                )
+              }}
+            >
+            </div>
+          {{/if}}
+          <figcaption>
+            <p class='credit'><small><@fields.credit /></small></p>
+            <p class='caption'><@fields.caption /></p>
+          </figcaption>
+        </figure>
+      {{/if}}
+      <style scoped>
+        figure,
+        img {
+          max-width: 100%;
+        }
+        figure,
+        p {
+          margin: 0;
+        }
+        figcaption {
+          font-size: 0.8125em;
+          font-style: italic;
+        }
+        .image {
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+        .credit {
+          line-height: 1.1;
+        }
+        .credit + .caption {
+          margin-top: var(--boxel-sp-4xs);
+        }
+      </style>
+    </template>
+  };
+}
diff --git a/packages/experiments-realm/garden-app.gts b/packages/experiments-realm/garden-app.gts
index 53319001a8..75273a2888 100644
--- a/packages/experiments-realm/garden-app.gts
+++ b/packages/experiments-realm/garden-app.gts
@@ -1,5 +1,5 @@
 // @ts-expect-error: Module '/catalog/app-card' may not be available during compilation
-import { AppCard } from '/catalog/app-card';
+import { AppCard } from '/experiments/app-card';
 // import { Component } from 'https://cardstack.com/base/card-api';
 import FlowerIcon from '@cardstack/boxel-icons/flower';
 
@@ -30,5 +30,6 @@ export class GardenAppCard extends AppCard {
 
 
 
+
   */
 }
diff --git a/packages/experiments-realm/phone.gts b/packages/experiments-realm/phone.gts
new file mode 100644
index 0000000000..b93a4c4e67
--- /dev/null
+++ b/packages/experiments-realm/phone.gts
@@ -0,0 +1,120 @@
+import NumberField from 'https://cardstack.com/base/number';
+import StringField from 'https://cardstack.com/base/string';
+import {
+  FieldDef,
+  field,
+  contains,
+  Component,
+} from 'https://cardstack.com/base/card-api';
+import PhoneIcon from '@cardstack/boxel-icons/phone';
+import { EntityDisplay } from './components/entity-display';
+import {
+  BoxelSelect,
+  FieldContainer,
+  Pill,
+} from '@cardstack/boxel-ui/components';
+import { action } from '@ember/object';
+
+interface PhoneTypeArgs {
+  type: string;
+  label: string;
+}
+
+class EditTemplate extends Component<typeof PhoneField> {
+  get options() {
+    return [
+      {
+        type: 'mobile',
+        label: 'Mobile',
+      },
+      {
+        type: 'office',
+        label: 'Office',
+      },
+    ] as PhoneTypeArgs[];
+  }
+
+  get selectedOption() {
+    return this.options?.find((option) => option.type === this.args.model.type);
+  }
+
+  @action
+  onSelect(option: PhoneTypeArgs) {
+    this.args.model.type = option.type;
+  }
+
+  <template>
+    <FieldContainer @vertical={{true}} @label='Type'>
+      <BoxelSelect
+        @options={{this.options}}
+        @selected={{this.selectedOption}}
+        @onChange={{this.onSelect}}
+        @placeholder='Please Select'
+        as |item|
+      >
+        <div>{{item.label}}</div>
+      </BoxelSelect>
+    </FieldContainer>
+
+    <FieldContainer @vertical={{true}} @label='Country'>
+      <@fields.country />
+    </FieldContainer>
+
+    <FieldContainer @vertical={{true}} @label='Area'>
+      <@fields.area />
+    </FieldContainer>
+
+    <FieldContainer @vertical={{true}} @label='Number'>
+      <@fields.number />
+    </FieldContainer>
+  </template>
+}
+
+export class PhoneField extends FieldDef {
+  static displayName = 'phoneMobile';
+
+  @field type = contains(StringField);
+  @field country = contains(NumberField);
+  @field area = contains(NumberField);
+  @field number = contains(NumberField);
+
+  @field phoneNumber = contains(StringField, {
+    computeVia: function (this: PhoneField) {
+      return [this.country, this.area, this.number].filter(Boolean).join('-');
+    },
+  });
+
+  static edit = EditTemplate;
+
+  static embedded = class Embedded extends Component<typeof this> {
+    <template>
+      <@fields.phoneNumber />
+    </template>
+  };
+
+  static atom = class Atom extends Component<typeof this> {
+    <template>
+      {{#if @model.phoneNumber}}
+        <EntityDisplay @name={{@model.phoneNumber}} @underline={{false}}>
+          <:thumbnail>
+            <PhoneIcon class='icon gray' />
+          </:thumbnail>
+          <:tag>
+            <Pill class='pill-gray'>
+              {{@model.type}}
+            </Pill>
+          </:tag>
+        </EntityDisplay>
+      {{/if}}
+      <style scoped>
+        .icon.gray {
+          color: var(--boxel-400);
+        }
+        .pill-gray {
+          background-color: var(--boxel-200);
+          border-color: transparent;
+        }
+      </style>
+    </template>
+  };
+}
diff --git a/packages/catalog-realm/product-requirement-document.gts b/packages/experiments-realm/product-requirement-document.gts
similarity index 93%
rename from packages/catalog-realm/product-requirement-document.gts
rename to packages/experiments-realm/product-requirement-document.gts
index 835a81648b..81858af57c 100644
--- a/packages/catalog-realm/product-requirement-document.gts
+++ b/packages/experiments-realm/product-requirement-document.gts
@@ -17,12 +17,12 @@ import { tracked } from '@glimmer/tracking';
 import { AppCard } from './app-card';
 import ClipboardListIcon from '@cardstack/boxel-icons/clipboard-list';
 
-import WriteTextFileCommand from '@cardstack/boxel-host/commands/write-text-file';
+import CreateAIAssistantRoomCommand from '@cardstack/boxel-host/commands/create-ai-assistant-room';
 import ShowCardCommand from '@cardstack/boxel-host/commands/show-card';
 import SaveCardCommand from '@cardstack/boxel-host/commands/save-card';
+import WriteTextFileCommand from '@cardstack/boxel-host/commands/write-text-file';
 
 import GenerateCodeCommand from './AiAppGenerator/generate-code-command';
-import { GenerateCodeInput } from './AiAppGenerator/generate-code-command';
 import { restartableTask } from 'ember-concurrency';
 
 class Isolated extends Component<typeof ProductRequirementDocument> {
@@ -252,27 +252,28 @@ class Isolated extends Component<typeof ProductRequirementDocument> {
     }
     this.errorMessage = '';
     try {
+      let createRoomCommand = new CreateAIAssistantRoomCommand(commandContext);
+      let { roomId } = await createRoomCommand.execute({
+        name: 'AI Assistant Room',
+      });
       let generateCodeCommand = new GenerateCodeCommand(commandContext);
-      let generateCodeInput = new GenerateCodeInput({
-        productRequirements: this.args.model,
+      let { code, appName } = await generateCodeCommand.execute({
+        productRequirements: this.args.model as ProductRequirementDocument,
+        roomId,
       });
 
-      let { code, appName } =
-        await generateCodeCommand.execute(generateCodeInput);
-
       // Generate a unique name for the module using timestamp
       let timestamp = Date.now();
       let moduleName = `generated-apps/${timestamp}/${appName}`;
       let filePath = `${moduleName}.gts`;
       let moduleId = new URL(moduleName, this.currentRealm).href;
       let writeFileCommand = new WriteTextFileCommand(commandContext);
-      let writeFileInput = new (await writeFileCommand.getInputType())({
+
+      await writeFileCommand.execute({
         path: filePath,
         content: code,
-        realm: this.currentRealm,
+        realm: this.currentRealm?.href,
       });
-
-      await writeFileCommand.execute(writeFileInput);
       this.args.model.moduleURL = moduleId;
     } catch (e) {
       console.error(e);
@@ -317,23 +318,17 @@ class Isolated extends Component<typeof ProductRequirementDocument> {
       });
 
       let saveCardCommand = new SaveCardCommand(commandContext);
-      let SaveCardInputType = await saveCardCommand.getInputType();
-
-      let saveCardInput = new SaveCardInputType({
-        realm: this.currentRealm,
+      await saveCardCommand.execute({
+        realm: this.currentRealm.href,
         card: myAppCard,
       });
-      await saveCardCommand.execute(saveCardInput);
 
       // show the app card
 
       let showCardCommand = new ShowCardCommand(commandContext);
-      let ShowCardInput = await showCardCommand.getInputType();
-
-      let showAppCardInput = new ShowCardInput({
+      await showCardCommand.execute({
         cardToShow: myAppCard,
       });
-      await showCardCommand.execute(showAppCardInput);
 
       if (!myAppCard) {
         throw new Error('Could not create card');
diff --git a/packages/experiments-realm/productivity/filter-trigger.gts b/packages/experiments-realm/productivity/filter-trigger.gts
index 4076273ba5..dc4072b66c 100644
--- a/packages/experiments-realm/productivity/filter-trigger.gts
+++ b/packages/experiments-realm/productivity/filter-trigger.gts
@@ -10,7 +10,7 @@ export class FilterTrigger extends GlimmerComponent<TriggerSignature> {
   <template>
     <div class='filter-trigger'>
       <IconButton @icon={{ListFilter}} width='13px' height='13px' />
-      Filter
+      <span class='filter-trigger-text'>Filter</span>
     </div>
 
     <style scoped>
@@ -18,6 +18,15 @@ export class FilterTrigger extends GlimmerComponent<TriggerSignature> {
         display: flex;
         align-items: center;
         font: 600 var(--boxel-font-sm);
+        transition: background-color 0.5s ease-in-out;
+        overflow: hidden;
+      }
+      .filter-trigger-text {
+        padding-right: var(--boxel-sp-sm);
+      }
+      .filter-trigger:hover {
+        cursor: pointer;
+        background-color: var(--boxel-100);
       }
     </style>
     {{! template-lint-disable require-scoped-style }}
diff --git a/packages/experiments-realm/productivity/task.gts b/packages/experiments-realm/productivity/task.gts
index fd079489a8..327500d295 100644
--- a/packages/experiments-realm/productivity/task.gts
+++ b/packages/experiments-realm/productivity/task.gts
@@ -18,9 +18,13 @@ import CheckboxIcon from '@cardstack/boxel-icons/checkbox';
 import UsersIcon from '@cardstack/boxel-icons/users';
 import UserIcon from '@cardstack/boxel-icons/user';
 import Calendar from '@cardstack/boxel-icons/calendar';
-import { isToday, isThisWeek, addWeeks } from 'date-fns';
 import { User } from '../user';
-import { TaskBase, BaseTaskStatusField, BaseTaskPriority } from '../task';
+import {
+  TaskBase,
+  BaseTaskStatusField,
+  BaseTaskPriority,
+  getDueDateStatus,
+} from '../task';
 
 export class Team extends CardDef {
   static displayName = 'Team';
@@ -141,33 +145,6 @@ function shortenId(id: string): string {
   return decimal.toString(36).padStart(6, '0');
 }
 
-function getDueDateStatus(dueDateString: string | null) {
-  if (!dueDateString) return null;
-
-  const dueDate = new Date(dueDateString);
-  const today = new Date();
-  const nextWeek = addWeeks(today, 1);
-
-  if (isToday(dueDate)) {
-    return {
-      label: 'Due Today',
-      color: '#01de67',
-    };
-  } else if (isThisWeek(dueDate)) {
-    return {
-      label: 'This Week',
-      color: '#ffbc00',
-    };
-  } else if (dueDate > today && dueDate < nextWeek) {
-    return {
-      label: 'Next Week',
-      color: '#4fc8fd',
-    };
-  }
-
-  return null;
-}
-
 class TaskIsolated extends Component<typeof Task> {
   get dueDate() {
     return this.args.model.dateRange?.end;
diff --git a/packages/experiments-realm/task.gts b/packages/experiments-realm/task.gts
index 610e46177d..8f709ee398 100644
--- a/packages/experiments-realm/task.gts
+++ b/packages/experiments-realm/task.gts
@@ -129,7 +129,7 @@ export class FittedTask extends Component<typeof TaskBase> {
   <template>
     <div class='task-card'>
       <header>
-        <div>
+        <div class='task-status-and-tags-container'>
           <TaskCompletionStatus
             class='task-completion-status'
             @completed={{this.isCompleted}}
@@ -146,8 +146,8 @@ export class FittedTask extends Component<typeof TaskBase> {
             </div>
           {{/if}}
         </div>
-        <div class='short-id-container'>
-          <@fields.priority @format='atom' />
+        <div class='priority-and-id-container'>
+          <@fields.priority class='priority' @format='atom' />
           <span class='short-id'>{{@model.shortId}}</span>
         </div>
       </header>
@@ -190,10 +190,18 @@ export class FittedTask extends Component<typeof TaskBase> {
     </div>
 
     <style scoped>
+      .task-status-and-tags-container {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+        flex-shrink: 0;
+      }
+
       .task-completion-status {
         --boxel-circle-size: 14px;
         --boxel-border-radius: var(--boxel-border-radius-lg);
       }
+
       .task-card {
         --task-font-weight-500: 500;
         --task-font-weight-600: 600;
@@ -219,6 +227,7 @@ export class FittedTask extends Component<typeof TaskBase> {
         align-items: center;
         gap: var(--boxel-sp-xxxs);
         overflow: hidden;
+        line-height: 1;
       }
       .card-tag {
         width: auto;
@@ -230,7 +239,7 @@ export class FittedTask extends Component<typeof TaskBase> {
         overflow: hidden;
         text-overflow: ellipsis;
       }
-      .short-id-container {
+      .priority-and-id-container {
         display: flex;
         align-items: center;
         gap: var(--boxel-sp-xxxs);
@@ -320,101 +329,81 @@ export class FittedTask extends Component<typeof TaskBase> {
         overflow: unset;
         margin-left: auto;
       }
-
-      /* Square/Portrait Container (aspect-ratio <= 1.0) */
-      @container (aspect-ratio <= 1.0) {
-        .task-card {
-          padding: var(--boxel-sp-xs);
-        }
-
-        .date-status-pill {
+      /*catch all for dismissing tags*/
+      @container fitted-card (width <= 226px) {
+        .card-tags {
           display: none;
         }
-
-        footer {
-          margin-top: auto;
-        }
       }
 
-      /* Compact Portrait (height <= 230px) */
-      @container (aspect-ratio <= 1.0) and (height <=230px) {
-        .task-card {
-          gap: var(--boxel-sp-5xs);
-        }
-
-        .task-title {
-          -webkit-line-clamp: 1;
-        }
-
-        .card-tags {
+      /*Aspect Ratio 0.95, 140px × 148px*/
+      /*Aspect Ratio 0.94, 120px × 128px*/
+      @container fitted-card (aspect-ratio <1.0) and (118px <= height < 129px) {
+        .priority,
+        .date-info-container {
           display: none;
         }
-      }
-
-      /* Landscape Container (1.0 < aspect-ratio <= 2.0) */
-      @container (1.0 < aspect-ratio <= 2.0) {
-        .task-card {
-          padding: var(--boxel-sp-sm);
+        header {
+          flex-wrap: nowrap;
         }
       }
 
-      /* Extra styles for very narrow height but medium*/
-      @container (aspect-ratio < 2.0) and (height <= 78px) {
-        .task-title {
-          -webkit-line-clamp: 1;
+      /*Aspect Ratio 3.4, 100px × 29px*/
+      /*Aspect Ratio 2.6, 150px × 58px*/
+      @container (aspect-ratio > 2.0) and (100px <= width <151px) and (29px <= height < 59px) {
+        .task-card {
+          padding: var(--boxel-sp-xxxs);
+          flex-direction: row;
+          align-items: center;
+          gap: var(--boxel-sp-sm);
         }
-
-        .card-tags,
+        .task-title,
+        .priority,
         .date-info-container {
           display: none;
         }
-      }
-
-      /* Extra styles for width <= 150px and height <= 100px */
-      @container (width <= 150px) and (height <= 100px) {
-        .card-tags,
-        .card-info,
-        footer {
+        header {
+          flex-wrap: nowrap;
+        }
+        .card-assignee {
           display: none;
         }
       }
 
-      /* Extra styles for width > 280px and height 78px */
-      @container (width > 280px) and (height <= 78px) {
-        .task-completion-status {
-          display: inline-flex;
+      /*Aspect Ratio 3.9, 226px × 58px*/
+      /*Aspect Ratio 2.6, 300px × 115px*/
+      @container (aspect-ratio > 2.0) and (151px <= width < 301px) and (29px <= height < 116px) {
+        .task-title {
+          font-size: var(--boxel-font-size-sm);
+          -webkit-line-clamp: 1;
         }
-      }
-
-      @container (aspect-ratio > 2.0) and (height <= 78px) {
         .task-card {
-          padding: var(--boxel-sp-xs);
+          padding: var(--boxel-sp-xxxs);
           flex-direction: row;
           align-items: center;
           gap: var(--boxel-sp-sm);
         }
-
-        .card-tags,
-        .date-info-container {
+        .priority {
           display: none;
         }
-        .task-title {
-          font-size: var(--boxel-font-size-sm);
-          -webkit-line-clamp: 1;
+        header {
+          flex-wrap: nowrap;
         }
-      }
-
-      /* Extra styles for small size */
-      @container (width <= 400px) and (height <= 58px) {
-        footer {
+        .date-info-container .date-status-pill {
+          display: none;
+        }
+        .card-assignee {
           display: none;
         }
       }
 
-      /* Extra styles for super narrow height */
-      @container (aspect-ratio > 6.0) and (height <= 78px) {
+      /*Aspect Ratio 8.6, 500px × 58px*/
+      @container fitted-card (aspect-ratio > 6.0) {
         .task-card {
           padding: var(--boxel-sp-xs);
+          flex-direction: row;
+          align-items: center;
+          gap: var(--boxel-sp-sm);
         }
 
         .card-tags,
@@ -430,16 +419,9 @@ export class FittedTask extends Component<typeof TaskBase> {
           margin-top: 0;
           margin-left: auto;
         }
-      }
-
-      /* Wide Container (aspect-ratio > 2.0) */
-      @container (aspect-ratio > 2.0) {
-        .task-card {
-          gap: var(--boxel-sp-xxxs);
-        }
-
-        .task-title {
-          -webkit-line-clamp: 1;
+        .task-completion-status {
+          --boxel-circle-size: 18px;
+          --boxel-border-radius: var(--boxel-border-radius-xs);
         }
       }
     </style>
@@ -524,7 +506,18 @@ export class BaseTaskPriority extends LooseGooseyField {
       return this.selectedPriority?.icon;
     }
     <template>
-      <this.selectedIcon width='14px' height='14px' />
+      <div class='icon-container'>
+        <this.selectedIcon width='14px' height='14px' />
+      </div>
+      <style scoped>
+        .icon-container {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+        }
+      </style>
     </template>
   };
 }
@@ -572,7 +565,7 @@ function shortenId(id: string): string {
   return decimal.toString(36).padStart(6, '0');
 }
 
-function getDueDateStatus(dueDateString: string | null) {
+export function getDueDateStatus(dueDateString: string | null) {
   if (!dueDateString) return null;
 
   const dueDate = new Date(dueDateString);
diff --git a/packages/experiments-realm/website.gts b/packages/experiments-realm/website.gts
new file mode 100644
index 0000000000..4a2dd24bcb
--- /dev/null
+++ b/packages/experiments-realm/website.gts
@@ -0,0 +1,19 @@
+import WorldWwwIcon from '@cardstack/boxel-icons/world-www';
+import { UrlField } from './url';
+import { Component } from 'https://cardstack.com/base/card-api';
+import { EntityDisplay } from './components/entity-display';
+
+export class WebsiteField extends UrlField {
+  static icon = WorldWwwIcon;
+  static displayName = 'Website';
+
+  static atom = class Atom extends Component<typeof this> {
+    <template>
+      <EntityDisplay @name={{@model}}>
+        <:thumbnail>
+          <WorldWwwIcon class='icon' />
+        </:thumbnail>
+      </EntityDisplay>
+    </template>
+  };
+}
diff --git a/packages/experiments-realm/work-tracker.gts b/packages/experiments-realm/work-tracker.gts
index 51249b52b0..37e451a626 100644
--- a/packages/experiments-realm/work-tracker.gts
+++ b/packages/experiments-realm/work-tracker.gts
@@ -22,7 +22,7 @@ import { action } from '@ember/object';
 import { LooseSingleCardDocument, getCards } from '@cardstack/runtime-common';
 import { restartableTask } from 'ember-concurrency';
 // @ts-expect-error path resolution issue
-import { AppCard } from '/catalog/app-card';
+import { AppCard } from '/experiments/app-card';
 import { TaskStatusField } from './productivity/task';
 import { FilterDropdown } from './productivity/filter-dropdown';
 import { StatusPill } from './productivity/filter-dropdown-item';
diff --git a/packages/host/app/commands/add-skills-to-room.ts b/packages/host/app/commands/add-skills-to-room.ts
new file mode 100644
index 0000000000..7a48726cf7
--- /dev/null
+++ b/packages/host/app/commands/add-skills-to-room.ts
@@ -0,0 +1,50 @@
+import { service } from '@ember/service';
+
+import type * as BaseCommandModule from 'https://cardstack.com/base/command';
+
+import HostBaseCommand from '../lib/host-base-command';
+
+import { SKILLS_STATE_EVENT_TYPE } from '../services/matrix-service';
+
+import type MatrixService from '../services/matrix-service';
+
+export default class AddSkillsToRoomCommand extends HostBaseCommand<
+  BaseCommandModule.AddSkillsToRoomInput,
+  undefined
+> {
+  @service private declare matrixService: MatrixService;
+
+  async getInputType() {
+    let commandModule = await this.loadCommandModule();
+    const { AddSkillsToRoomInput } = commandModule;
+    return AddSkillsToRoomInput;
+  }
+
+  protected async run(
+    input: BaseCommandModule.AddSkillsToRoomInput,
+  ): Promise<undefined> {
+    let { matrixService } = this;
+    let { roomId, skills } = input;
+    let roomSkillEventIds = await matrixService.addSkillCardsToRoomHistory(
+      skills,
+      roomId,
+      { includeComputeds: true, maybeRelativeURL: null },
+    );
+    await matrixService.updateStateEvent(
+      roomId,
+      SKILLS_STATE_EVENT_TYPE,
+      '',
+      async (oldContent: Record<string, any>) => {
+        return {
+          enabledEventIds: [
+            ...new Set([
+              ...(oldContent.enabledEventIds || []),
+              ...roomSkillEventIds,
+            ]),
+          ],
+          disabledEventIds: [...(oldContent.disabledEventIds || [])],
+        };
+      },
+    );
+  }
+}
diff --git a/packages/host/app/commands/create-ai-assistant-room.ts b/packages/host/app/commands/create-ai-assistant-room.ts
new file mode 100644
index 0000000000..e97fea321d
--- /dev/null
+++ b/packages/host/app/commands/create-ai-assistant-room.ts
@@ -0,0 +1,58 @@
+import { service } from '@ember/service';
+
+import format from 'date-fns/format';
+
+import { aiBotUsername } from '@cardstack/runtime-common';
+
+import type * as BaseCommandModule from 'https://cardstack.com/base/command';
+
+import HostBaseCommand from '../lib/host-base-command';
+
+import type MatrixService from '../services/matrix-service';
+
+export default class CreateAIAssistantRoomCommand extends HostBaseCommand<
+  BaseCommandModule.CreateAIAssistantRoomInput,
+  BaseCommandModule.CreateAIAssistantRoomResult
+> {
+  @service private declare matrixService: MatrixService;
+
+  async getInputType() {
+    let commandModule = await this.loadCommandModule();
+    const { CreateAIAssistantRoomInput } = commandModule;
+    return CreateAIAssistantRoomInput;
+  }
+
+  protected async run(
+    input: BaseCommandModule.CreateAIAssistantRoomInput,
+  ): Promise<BaseCommandModule.CreateAIAssistantRoomResult> {
+    let { matrixService } = this;
+    let { userId } = matrixService;
+    if (!userId) {
+      throw new Error(
+        `bug: there is no userId associated with the matrix client`,
+      );
+    }
+    let server = userId!.split(':')[1];
+    let aiBotFullId = `@${aiBotUsername}:${server}`;
+    let { room_id: roomId } = await matrixService.createRoom({
+      preset: matrixService.privateChatPreset,
+      invite: [aiBotFullId],
+      name: input.name,
+      topic: undefined,
+      room_alias_name: encodeURIComponent(
+        `${input.name} - ${format(
+          new Date(),
+          "yyyy-MM-dd'T'HH:mm:ss.SSSxxx",
+        )} - ${userId}`,
+      ),
+    });
+    await this.matrixService.setPowerLevel(
+      roomId,
+      aiBotFullId,
+      matrixService.aiBotPowerLevel,
+    );
+    let commandModule = await this.loadCommandModule();
+    const { CreateAIAssistantRoomResult } = commandModule;
+    return new CreateAIAssistantRoomResult({ roomId });
+  }
+}
diff --git a/packages/host/app/commands/index.ts b/packages/host/app/commands/index.ts
index 92929b77e0..09b2d08fc5 100644
--- a/packages/host/app/commands/index.ts
+++ b/packages/host/app/commands/index.ts
@@ -1,12 +1,23 @@
 import { VirtualNetwork } from '@cardstack/runtime-common';
 
+import * as AddSkillsToRoomCommandModule from './add-skills-to-room';
+import * as CreateAIAssistantRoomCommandModule from './create-ai-assistant-room';
 import * as PatchCardCommandModule from './patch-card';
 import * as ReloadCardCommandModule from './reload-card';
 import * as SaveCardCommandModule from './save-card';
 import * as ShowCardCommandModule from './show-card';
 import * as SwitchSubmodeCommandModule from './switch-submode';
 import * as WriteTextFileCommandModule from './write-text-file';
+
 export function shimHostCommands(virtualNetwork: VirtualNetwork) {
+  virtualNetwork.shimModule(
+    '@cardstack/boxel-host/commands/add-skills-to-room',
+    AddSkillsToRoomCommandModule,
+  );
+  virtualNetwork.shimModule(
+    '@cardstack/boxel-host/commands/create-ai-assistant-room',
+    CreateAIAssistantRoomCommandModule,
+  );
   virtualNetwork.shimModule(
     '@cardstack/boxel-host/commands/patch-card',
     PatchCardCommandModule,
diff --git a/packages/host/app/components/ai-assistant/panel.gts b/packages/host/app/components/ai-assistant/panel.gts
index f300510721..f58c18561c 100644
--- a/packages/host/app/components/ai-assistant/panel.gts
+++ b/packages/host/app/components/ai-assistant/panel.gts
@@ -22,6 +22,8 @@ import { DropdownArrowFilled, IconX } from '@cardstack/boxel-ui/icons';
 
 import { aiBotUsername } from '@cardstack/runtime-common';
 
+import AddSkillsToRoomCommand from '@cardstack/host/commands/add-skills-to-room';
+import CreateAIAssistantRoomCommand from '@cardstack/host/commands/create-ai-assistant-room';
 import NewSession from '@cardstack/host/components/ai-assistant/new-session';
 import AiAssistantPastSessionsList from '@cardstack/host/components/ai-assistant/past-sessions';
 import RenameSession from '@cardstack/host/components/ai-assistant/rename-session';
@@ -35,10 +37,16 @@ import {
   eventDebounceMs,
 } from '@cardstack/host/lib/matrix-utils';
 
+import CommandService from '@cardstack/host/services/command-service';
 import type MatrixService from '@cardstack/host/services/matrix-service';
 import type MonacoService from '@cardstack/host/services/monaco-service';
 import { type MonacoSDK } from '@cardstack/host/services/monaco-service';
 
+import {
+  CurrentRoomIdPersistenceKey,
+  NewSessionIdPersistenceKey,
+} from '@cardstack/host/utils/local-storage-keys';
+
 import assistantIcon from './ai-assist-icon.webp';
 
 const { matrixServerName } = ENV;
@@ -60,10 +68,6 @@ export interface SessionRoomData {
   lastActiveTimestamp: number;
 }
 
-// Local storage keys
-export const currentRoomIdPersistenceKey = 'aiPanelCurrentRoomId';
-let newSessionIdPersistenceKey = 'aiPanelNewSessionId';
-
 export default class AiAssistantPanel extends Component<Signature> {
   get hasOtherActiveSessions() {
     let oneMinuteAgo = new Date(Date.now() - 60 * 1000).getTime();
@@ -360,6 +364,7 @@ export default class AiAssistantPanel extends Component<Signature> {
   @service private declare matrixService: MatrixService;
   @service private declare monacoService: MonacoService;
   @service private declare router: RouterService;
+  @service private declare commandService: CommandService;
 
   @tracked private currentRoomId: string | undefined;
   @tracked private isShowingPastSessions = false;
@@ -377,7 +382,7 @@ export default class AiAssistantPanel extends Component<Signature> {
 
   private enterRoomInitially() {
     let persistedRoomId = window.localStorage.getItem(
-      currentRoomIdPersistenceKey,
+      CurrentRoomIdPersistenceKey,
     );
     if (
       persistedRoomId &&
@@ -406,8 +411,7 @@ export default class AiAssistantPanel extends Component<Signature> {
   }
 
   private loadRoomsTask = restartableTask(async () => {
-    await this.matrixService.flushMembership;
-    await this.matrixService.flushTimeline;
+    await this.matrixService.flushAll;
     await Promise.all([...this.roomResources.values()].map((r) => r.loading));
     this.enterRoomInitially();
   });
@@ -420,25 +424,34 @@ export default class AiAssistantPanel extends Component<Signature> {
       return;
     }
     let newRoomName = 'New AI Assistant Chat';
-    this.doCreateRoom.perform(newRoomName, [aiBotUsername]);
+    this.doCreateRoom.perform(newRoomName);
   }
 
-  private doCreateRoom = restartableTask(
-    async (name: string, invites: string[]) => {
-      try {
-        let newRoomId = await this.matrixService.createRoom(name, invites);
-        window.localStorage.setItem(newSessionIdPersistenceKey, newRoomId);
-        this.enterRoom(newRoomId);
-      } catch (e) {
-        console.log(e);
-        this.displayRoomError = true;
-        this.currentRoomId = undefined;
-      }
-    },
-  );
+  private doCreateRoom = restartableTask(async (name: string) => {
+    try {
+      let createRoomCommand = new CreateAIAssistantRoomCommand(
+        this.commandService.commandContext,
+      );
+      let { roomId } = await createRoomCommand.execute({ name });
+
+      let addSkillsToRoomCommand = new AddSkillsToRoomCommand(
+        this.commandService.commandContext,
+      );
+      await addSkillsToRoomCommand.execute({
+        roomId,
+        skills: await this.matrixService.loadDefaultSkills(),
+      });
+      window.localStorage.setItem(NewSessionIdPersistenceKey, roomId);
+      this.enterRoom(roomId);
+    } catch (e) {
+      console.log(e);
+      this.displayRoomError = true;
+      this.currentRoomId = undefined;
+    }
+  });
 
   private get newSessionId() {
-    let id = window.localStorage.getItem(newSessionIdPersistenceKey);
+    let id = window.localStorage.getItem(NewSessionIdPersistenceKey);
     if (
       id &&
       this.roomResources.has(id) &&
@@ -511,7 +524,7 @@ export default class AiAssistantPanel extends Component<Signature> {
     if (hidePastSessionsList) {
       this.hidePastSessions();
     }
-    window.localStorage.setItem(currentRoomIdPersistenceKey, roomId);
+    window.localStorage.setItem(CurrentRoomIdPersistenceKey, roomId);
   }
 
   @action private setRoomToRename(room: SessionRoomData) {
@@ -551,17 +564,17 @@ export default class AiAssistantPanel extends Component<Signature> {
 
   private doLeaveRoom = restartableTask(async (roomId: string) => {
     try {
-      await this.matrixService.client.leave(roomId);
-      await this.matrixService.client.forget(roomId);
+      await this.matrixService.leave(roomId);
+      await this.matrixService.forget(roomId);
       await timeout(eventDebounceMs); // this makes it feel a bit more responsive
       this.matrixService.roomResourcesCache.delete(roomId);
 
       if (this.newSessionId === roomId) {
-        window.localStorage.removeItem(newSessionIdPersistenceKey);
+        window.localStorage.removeItem(NewSessionIdPersistenceKey);
       }
 
       if (this.currentRoomId === roomId) {
-        window.localStorage.removeItem(currentRoomIdPersistenceKey);
+        window.localStorage.removeItem(CurrentRoomIdPersistenceKey);
         if (this.latestRoom) {
           this.enterRoom(this.latestRoom.roomId, false);
         } else {
diff --git a/packages/host/app/components/ai-assistant/rename-session.gts b/packages/host/app/components/ai-assistant/rename-session.gts
index 05c779148b..70182e3ae6 100644
--- a/packages/host/app/components/ai-assistant/rename-session.gts
+++ b/packages/host/app/components/ai-assistant/rename-session.gts
@@ -122,7 +122,7 @@ export default class RenameSession extends Component<Signature> {
       throw new Error(`bug: should never get here`);
     }
     try {
-      await this.matrixService.client.setRoomName(
+      await this.matrixService.setRoomName(
         this.args.room.roomId,
         this.newRoomName,
       );
diff --git a/packages/host/app/components/ai-assistant/toast.gts b/packages/host/app/components/ai-assistant/toast.gts
index 84eea06127..360dd7f008 100644
--- a/packages/host/app/components/ai-assistant/toast.gts
+++ b/packages/host/app/components/ai-assistant/toast.gts
@@ -20,9 +20,9 @@ import { markdownToHtml } from '@cardstack/runtime-common';
 import { Message } from '@cardstack/host/lib/matrix-classes/message';
 import MatrixService from '@cardstack/host/services/matrix-service';
 
-import assistantIcon from './ai-assist-icon.webp';
+import { CurrentRoomIdPersistenceKey } from '@cardstack/host/utils/local-storage-keys';
 
-import { currentRoomIdPersistenceKey } from './panel';
+import assistantIcon from './ai-assist-icon.webp';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -222,7 +222,7 @@ export default class AiAssistantToast extends Component<Signature> {
 
   @action
   private viewInChat() {
-    window.localStorage.setItem(currentRoomIdPersistenceKey, this.roomId);
+    window.localStorage.setItem(CurrentRoomIdPersistenceKey, this.roomId);
     this.args.onViewInChatClick();
   }
 }
diff --git a/packages/host/app/components/matrix/forgot-password.gts b/packages/host/app/components/matrix/forgot-password.gts
index a909cd0b0d..b0fad64cbd 100644
--- a/packages/host/app/components/matrix/forgot-password.gts
+++ b/packages/host/app/components/matrix/forgot-password.gts
@@ -391,7 +391,7 @@ export default class ForgotPassword extends Component<Signature> {
 
     try {
       let clientSecret = uuidv4();
-      let { sid } = await this.matrixService.client.requestPasswordEmailToken(
+      let { sid } = await this.matrixService.requestPasswordEmailToken(
         this.state.email,
         clientSecret,
         this.state.sendAttempt,
@@ -433,7 +433,7 @@ export default class ForgotPassword extends Component<Signature> {
     }
 
     try {
-      await this.matrixService.client.setPassword(
+      await this.matrixService.setPassword(
         {
           threepid_creds: {
             sid: this.args.resetPasswordParams.sid,
diff --git a/packages/host/app/components/matrix/register-user.gts b/packages/host/app/components/matrix/register-user.gts
index 1096023af6..55d82d7b11 100644
--- a/packages/host/app/components/matrix/register-user.gts
+++ b/packages/host/app/components/matrix/register-user.gts
@@ -513,8 +513,9 @@ export default class RegisterUser extends Component<Signature> {
       return;
     }
 
-    this.isUsernameAvailable =
-      await this.matrixService.client.isUsernameAvailable(this.username);
+    this.isUsernameAvailable = await this.matrixService.isUsernameAvailable(
+      this.username,
+    );
     if (!this.isUsernameAvailable) {
       this.usernameError = 'Username is already taken';
     }
@@ -673,8 +674,9 @@ export default class RegisterUser extends Component<Signature> {
       );
     }
     let auth: RegisterResponse;
+
     try {
-      auth = await this.matrixService.client.registerRequest({
+      auth = await this.matrixService.registerRequest({
         username: this.state.username,
         password: this.state.password,
         auth: {
@@ -713,12 +715,18 @@ export default class RegisterUser extends Component<Signature> {
 
       throw e;
     }
+
     // If access_token and device_id are present, RegisterResponse matches LoginResponse
     // except for the optional well_known field
-    if (auth.access_token && auth.device_id) {
+    if (
+      auth.access_token &&
+      auth.device_id &&
+      this.state.type === 'waitForEmailValidation' // In our setup, waiting for email validation is the last step of matrix registration - this condition is to satisfy the type check where token is only defined in sendToken and waitForEmailValidation states
+    ) {
       await this.matrixService.initializeNewUser(
         auth as LoginResponse,
         this.state.name,
+        this.state.token,
       );
     }
   });
@@ -744,6 +752,7 @@ export default class RegisterUser extends Component<Signature> {
         if (this.state.type === 'waitForEmailValidation') {
           await timeout(1000);
         }
+
         this.state = {
           ...this.state,
           type: 'waitForEmailValidation',
diff --git a/packages/host/app/components/matrix/room.gts b/packages/host/app/components/matrix/room.gts
index dffea9b10e..4c75505966 100644
--- a/packages/host/app/components/matrix/room.gts
+++ b/packages/host/app/components/matrix/room.gts
@@ -6,9 +6,15 @@ import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked, cached } from '@glimmer/tracking';
 
-import { enqueueTask, restartableTask, timeout, all } from 'ember-concurrency';
-import perform from 'ember-concurrency/helpers/perform';
+import {
+  enqueueTask,
+  restartableTask,
+  timeout,
+  all,
+  task,
+} from 'ember-concurrency';
 
+import perform from 'ember-concurrency/helpers/perform';
 import max from 'lodash/max';
 
 import { MatrixEvent } from 'matrix-js-sdk';
@@ -24,12 +30,14 @@ import { not } from '@cardstack/boxel-ui/helpers';
 
 import { unixTime } from '@cardstack/runtime-common';
 
+import AddSkillsToRoomCommand from '@cardstack/host/commands/add-skills-to-room';
 import { Message } from '@cardstack/host/lib/matrix-classes/message';
 import type { StackItem } from '@cardstack/host/lib/stack-item';
 import { getAutoAttachment } from '@cardstack/host/resources/auto-attached-card';
 import { getRoom } from '@cardstack/host/resources/room';
 
 import type CardService from '@cardstack/host/services/card-service';
+import type CommandService from '@cardstack/host/services/command-service';
 import type MatrixService from '@cardstack/host/services/matrix-service';
 import { type MonacoSDK } from '@cardstack/host/services/monaco-service';
 import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
@@ -101,7 +109,7 @@ export default class Room extends Component<Signature> {
               <AiAssistantSkillMenu
                 class='skills'
                 @skills={{this.sortedSkills}}
-                @onChooseCard={{this.attachSkill}}
+                @onChooseCard={{perform this.attachSkillTask}}
                 @onUpdateSkillIsActive={{perform this.updateSkillIsActiveTask}}
                 data-test-skill-menu
               />
@@ -169,6 +177,7 @@ export default class Room extends Component<Signature> {
   </template>
 
   @service private declare cardService: CardService;
+  @service private declare commandService: CommandService;
   @service private declare matrixService: MatrixService;
   @service private declare operatorModeStateService: OperatorModeStateService;
 
@@ -398,7 +407,7 @@ export default class Room extends Component<Signature> {
     // update value, but it had already been used previously in the same
     // computation" error
     schedule('afterRender', () => {
-      this.matrixService.client.sendReadReceipt(matrixEvent as MatrixEvent);
+      this.matrixService.sendReadReceipt(matrixEvent as MatrixEvent);
     });
   }
 
@@ -586,8 +595,7 @@ export default class Room extends Component<Signature> {
     return this.autoAttachmentResource.cards;
   }
 
-  // using enqueue task on this ensures that updates don't step on each other
-  private updateSkillIsActiveTask = enqueueTask(
+  updateSkillIsActiveTask = task(
     async (skillEventId: string, isActive: boolean) => {
       await this.matrixService.updateSkillIsActive(
         this.args.roomId,
@@ -623,9 +631,15 @@ export default class Room extends Component<Signature> {
     return message.status === 'sending' || message.status === 'queued';
   }
 
-  private attachSkill = (card: SkillCard) => {
-    this.matrixService.addSkillCardsToRoom(this.args.roomId, [card]);
-  };
+  private attachSkillTask = task(async (card: SkillCard) => {
+    let addSkillsToRoomCommand = new AddSkillsToRoomCommand(
+      this.commandService.commandContext,
+    );
+    await addSkillsToRoomCommand.execute({
+      roomId: this.args.roomId,
+      skills: [card],
+    });
+  });
 }
 
 declare module '@glint/environment-ember-loose/registry' {
diff --git a/packages/host/app/components/matrix/user-profile.gts b/packages/host/app/components/matrix/user-profile.gts
index d6ca9ce370..e534c15639 100644
--- a/packages/host/app/components/matrix/user-profile.gts
+++ b/packages/host/app/components/matrix/user-profile.gts
@@ -88,8 +88,8 @@ export default class UserProfile extends Component {
 
   private loadProfile = restartableTask(async () => {
     let [profile, threePid] = await all([
-      this.matrixService.client.getProfileInfo(this.userId),
-      this.matrixService.client.getThreePids(),
+      this.matrixService.getProfileInfo(this.userId),
+      this.matrixService.getThreePids(),
     ]);
     let { displayname: displayName } = profile;
     let { threepids } = threePid;
diff --git a/packages/host/app/components/operator-mode/card-error-detail.gts b/packages/host/app/components/operator-mode/card-error-detail.gts
index 6106e068b7..2d876a36bb 100644
--- a/packages/host/app/components/operator-mode/card-error-detail.gts
+++ b/packages/host/app/components/operator-mode/card-error-detail.gts
@@ -5,7 +5,7 @@ import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import TriangleAlert from '@cardstack/boxel-icons/triangle-alert';
+import ExclamationCircle from '@cardstack/boxel-icons/exclamation-circle';
 
 import { dropTask } from 'ember-concurrency';
 import perform from 'ember-concurrency/helpers/perform';
@@ -19,7 +19,7 @@ import type CommandService from '../../services/command-service';
 
 interface Signature {
   Args: {
-    error: CardError['errors'][0];
+    error: CardError;
     viewInCodeMode?: true;
     title?: string;
   };
@@ -35,23 +35,21 @@ export default class CardErrorDetail extends Component<Signature> {
     let switchSubmodeCommand = new SwitchSubmodeCommand(
       this.commandService.commandContext,
     );
-    const InputType = await switchSubmodeCommand.getInputType();
-    let input = new InputType({
+    await switchSubmodeCommand.execute({
       submode: 'code',
       codePath: `${this.args.error.id}.json`,
     });
-    await switchSubmodeCommand.execute(input);
   });
 
   <template>
-    <Accordion class='error-detail' as |A|>
+    <Accordion class='error-detail {{if this.showErrorDetail "open"}}' as |A|>
       <A.Item
         data-test-error-detail-toggle
         @onClick={{fn this.toggleDetail 'schema'}}
         @isOpen={{this.showErrorDetail}}
       >
         <:title>
-          <TriangleAlert />
+          <ExclamationCircle class='error-icon' />
           An error was encountered on this card:
           <span data-test-error-title>{{@title}}</span>
         </:title>
@@ -78,6 +76,7 @@ export default class CardErrorDetail extends Component<Signature> {
                 <div class='detail-title'>Stack trace:</div>
                 <pre
                   data-test-error-stack
+                  data-test-percy-hide
                 >
 {{@error.meta.stack}}
                 </pre>
@@ -90,7 +89,25 @@ export default class CardErrorDetail extends Component<Signature> {
 
     <style scoped>
       .error-detail {
-        flex: 1;
+        flex: 1.5;
+        overflow: auto;
+        margin-top: auto;
+        max-height: fit-content;
+      }
+      @media (min-height: 800px) {
+        .error-detail {
+          flex: 1;
+        }
+      }
+      .error-detail.open {
+        max-height: unset;
+      }
+      .error-detail :deep(.title) {
+        font: 600 var(--boxel-font-sm);
+        background-color: #ffe3e3;
+      }
+      .error-icon {
+        color: var(--boxel-error-300);
       }
       .actions {
         display: flex;
@@ -98,16 +115,16 @@ export default class CardErrorDetail extends Component<Signature> {
         margin-top: var(--boxel-sp-lg);
       }
       .detail {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp);
         padding: var(--boxel-sp);
       }
-      .detail-item {
-        margin-top: var(--boxel-sp);
-      }
       .detail-title {
-        font: 600 var(--boxel-font);
+        font: 600 var(--boxel-font-sm);
       }
       .detail-contents {
-        font: var(--boxel-font);
+        font: var(--boxel-font-sm);
       }
       pre {
         margin-top: 0;
diff --git a/packages/host/app/components/operator-mode/code-submode.gts b/packages/host/app/components/operator-mode/code-submode.gts
index 18c98a5b6d..367f260a8b 100644
--- a/packages/host/app/components/operator-mode/code-submode.gts
+++ b/packages/host/app/components/operator-mode/code-submode.gts
@@ -21,7 +21,6 @@ import window from 'ember-window-mock';
 import { Accordion } from '@cardstack/boxel-ui/components';
 
 import { ResizablePanelGroup } from '@cardstack/boxel-ui/components';
-import type { ResizablePanel } from '@cardstack/boxel-ui/components';
 import { and, not, bool, eq } from '@cardstack/boxel-ui/helpers';
 import { File } from '@cardstack/boxel-ui/icons';
 
@@ -58,6 +57,7 @@ import type RecentFilesService from '@cardstack/host/services/recent-files-servi
 import type { CardDef, Format } from 'https://cardstack.com/base/card-api';
 
 import { htmlComponent } from '../../lib/html-component';
+import { CodeModePanelWidths } from '../../utils/local-storage-keys';
 import FileTree from '../editor/file-tree';
 
 import CardError from './card-error';
@@ -95,24 +95,24 @@ type PanelHeights = {
 
 type SelectedAccordionItem = 'schema-editor' | null;
 
-const CodeModePanelWidths = 'code-mode-panel-widths';
 const defaultLeftPanelWidth =
-  (14.0 * parseFloat(getComputedStyle(document.documentElement).fontSize)) /
-  (document.documentElement.clientWidth - 40 - 36);
+  ((14.0 * parseFloat(getComputedStyle(document.documentElement).fontSize)) /
+    (document.documentElement.clientWidth - 40 - 36)) *
+  100;
 const defaultPanelWidths: PanelWidths = {
   // 14rem as a fraction of the layout width
   leftPanel: defaultLeftPanelWidth,
-  codeEditorPanel: (1 - defaultLeftPanelWidth) / 2,
-  rightPanel: (1 - defaultLeftPanelWidth) / 2,
-  emptyCodeModePanel: 1 - defaultLeftPanelWidth,
+  codeEditorPanel: (100 - defaultLeftPanelWidth) / 2,
+  rightPanel: (100 - defaultLeftPanelWidth) / 2,
+  emptyCodeModePanel: 100 - defaultLeftPanelWidth,
 };
 
 const CodeModePanelHeights = 'code-mode-panel-heights';
-const ApproximateRecentPanelDefaultFraction =
-  (43 + 40 * 3.5) / (document.documentElement.clientHeight - 140); // room for about 3.5 recent files
+const ApproximateRecentPanelDefaultPercentage =
+  ((43 + 40 * 3.5) / (document.documentElement.clientHeight - 140)) * 100; // room for about 3.5 recent files
 const defaultPanelHeights: PanelHeights = {
-  filePanel: 1 - ApproximateRecentPanelDefaultFraction,
-  recentPanel: ApproximateRecentPanelDefaultFraction,
+  filePanel: 100 - ApproximateRecentPanelDefaultPercentage,
+  recentPanel: ApproximateRecentPanelDefaultPercentage,
 };
 
 const waiter = buildWaiter('code-submode:waiter');
@@ -133,8 +133,8 @@ export default class CodeSubmode extends Component<Signature> {
   @tracked private itemToDelete: CardDef | URL | null | undefined;
 
   private hasUnsavedCardChanges = false;
-  private panelWidths: PanelWidths;
-  private panelHeights: PanelHeights;
+  private defaultPanelWidths: PanelWidths;
+  private defaultPanelHeights: PanelHeights;
   private updateCursorByName: ((name: string) => void) | undefined;
   #currentCard: CardDef | undefined;
 
@@ -165,15 +165,43 @@ export default class CodeSubmode extends Component<Signature> {
   constructor(owner: Owner, args: Signature['Args']) {
     super(owner, args);
     this.operatorModeStateService.subscribeToOpenFileStateChanges(this);
-    this.panelWidths = window.localStorage.getItem(CodeModePanelWidths)
+
+    let persistedDefaultPanelWidths = window.localStorage.getItem(
+      CodeModePanelWidths,
+    )
       ? // @ts-ignore Type 'null' is not assignable to type 'string'
         JSON.parse(window.localStorage.getItem(CodeModePanelWidths))
-      : {};
-
-    this.panelHeights = window.localStorage.getItem(CodeModePanelHeights)
+      : null;
+    let persistedDefaultPanelHeights = window.localStorage.getItem(
+      CodeModePanelHeights,
+    )
       ? // @ts-ignore Type 'null' is not assignable to type 'string'
         JSON.parse(window.localStorage.getItem(CodeModePanelHeights))
-      : {};
+      : null;
+    let sum = (obj: Record<string, number>) =>
+      Object.values(obj).reduce(
+        (sum, value) => sum + (value ? Number(value.toFixed(0)) : 0),
+        0,
+      );
+
+    this.defaultPanelWidths =
+      persistedDefaultPanelWidths &&
+      sum({
+        ...persistedDefaultPanelWidths,
+        emptyCodeModePanel: this.codePath
+          ? 0
+          : persistedDefaultPanelWidths.emptyCodeModePanel,
+        codeEditorPanel: !this.codePath
+          ? 0
+          : persistedDefaultPanelWidths.codeEditorPanel,
+        rightPanel: !this.codePath ? 0 : persistedDefaultPanelWidths.rightPanel,
+      }) <= 100
+        ? persistedDefaultPanelWidths
+        : defaultPanelWidths;
+    this.defaultPanelHeights =
+      persistedDefaultPanelHeights && sum(persistedDefaultPanelHeights) <= 100
+        ? persistedDefaultPanelHeights
+        : defaultPanelHeights;
 
     registerDestructor(this, () => {
       // destructor functons are called synchronously. in order to save,
@@ -506,25 +534,30 @@ export default class CodeSubmode extends Component<Signature> {
   }
 
   @action
-  private onHorizontalPanelChange(panels: ResizablePanel[]) {
-    this.panelWidths.leftPanel = panels[0]?.lengthPx;
-    this.panelWidths.codeEditorPanel = panels[1]?.lengthPx;
-    this.panelWidths.rightPanel = panels[2]?.lengthPx;
+  private onHorizontalLayoutChange(layout: number[]) {
+    if (layout.length > 2) {
+      this.defaultPanelWidths.leftPanel = layout[0];
+      this.defaultPanelWidths.codeEditorPanel = layout[1];
+      this.defaultPanelWidths.rightPanel = layout[2];
+    } else {
+      this.defaultPanelWidths.leftPanel = layout[0];
+      this.defaultPanelWidths.emptyCodeModePanel = layout[1];
+    }
 
     window.localStorage.setItem(
       CodeModePanelWidths,
-      JSON.stringify(this.panelWidths),
+      JSON.stringify(this.defaultPanelWidths),
     );
   }
 
   @action
-  private onVerticalPanelChange(panels: ResizablePanel[]) {
-    this.panelHeights.filePanel = panels[0]?.lengthPx;
-    this.panelHeights.recentPanel = panels[1]?.lengthPx;
+  private onVerticalLayoutChange(layout: number[]) {
+    this.defaultPanelHeights.filePanel = layout[0];
+    this.defaultPanelHeights.recentPanel = layout[1];
 
     window.localStorage.setItem(
       CodeModePanelHeights,
-      JSON.stringify(this.panelHeights),
+      JSON.stringify(this.defaultPanelHeights),
     );
   }
 
@@ -739,24 +772,20 @@ export default class CodeSubmode extends Component<Signature> {
         </div>
         <ResizablePanelGroup
           @orientation='horizontal'
-          @onPanelChange={{this.onHorizontalPanelChange}}
+          @onLayoutChange={{this.onHorizontalLayoutChange}}
           class='columns'
           as |ResizablePanel ResizeHandle|
         >
-          <ResizablePanel
-            @defaultLengthFraction={{defaultPanelWidths.leftPanel}}
-            @lengthPx={{this.panelWidths.leftPanel}}
-          >
+          <ResizablePanel @defaultSize={{this.defaultPanelWidths.leftPanel}}>
             <div class='column'>
               <ResizablePanelGroup
                 @orientation='vertical'
-                @onPanelChange={{this.onVerticalPanelChange}}
+                @onLayoutChange={{this.onVerticalLayoutChange}}
                 @reverseCollapse={{true}}
                 as |VerticallyResizablePanel VerticallyResizeHandle|
               >
                 <VerticallyResizablePanel
-                  @defaultLengthFraction={{defaultPanelHeights.filePanel}}
-                  @lengthPx={{this.panelHeights.filePanel}}
+                  @defaultSize={{this.defaultPanelHeights.filePanel}}
                 >
                   <CodeSubmodeLeftPanelToggle
                     @fileView={{this.fileView}}
@@ -786,9 +815,8 @@ export default class CodeSubmode extends Component<Signature> {
                 </VerticallyResizablePanel>
                 <VerticallyResizeHandle />
                 <VerticallyResizablePanel
-                  @defaultLengthFraction={{defaultPanelHeights.recentPanel}}
-                  @lengthPx={{this.panelHeights.recentPanel}}
-                  @minLengthPx={{100}}
+                  @defaultSize={{this.defaultPanelHeights.recentPanel}}
+                  @minSize={{20}}
                 >
                   <InnerContainer
                     class='recent-files-panel'
@@ -808,9 +836,8 @@ export default class CodeSubmode extends Component<Signature> {
           <ResizeHandle />
           {{#if this.codePath}}
             <ResizablePanel
-              @defaultLengthFraction={{defaultPanelWidths.codeEditorPanel}}
-              @lengthPx={{this.panelWidths.codeEditorPanel}}
-              @minLengthPx={{300}}
+              @defaultSize={{this.defaultPanelWidths.codeEditorPanel}}
+              @minSize={{20}}
             >
               <InnerContainer>
                 {{#if this.isReady}}
@@ -833,10 +860,7 @@ export default class CodeSubmode extends Component<Signature> {
               </InnerContainer>
             </ResizablePanel>
             <ResizeHandle />
-            <ResizablePanel
-              @defaultLengthFraction={{defaultPanelWidths.rightPanel}}
-              @lengthPx={{this.panelWidths.rightPanel}}
-            >
+            <ResizablePanel @defaultSize={{this.defaultPanelWidths.rightPanel}}>
               <InnerContainer>
                 {{#if this.isReady}}
                   {{#if this.isCardPreviewError}}
@@ -951,8 +975,7 @@ export default class CodeSubmode extends Component<Signature> {
             </ResizablePanel>
           {{else}}
             <ResizablePanel
-              @defaultLengthFraction={{defaultPanelWidths.emptyCodeModePanel}}
-              @lengthPx={{this.panelWidths.emptyCodeModePanel}}
+              @defaultLengthFraction={{this.defaultPanelWidths.emptyCodeModePanel}}
             >
               <InnerContainer class='empty-container' data-test-empty-code-mode>
                 <File width='40' height='40' role='presentation' />
@@ -1123,6 +1146,11 @@ export default class CodeSubmode extends Component<Signature> {
         box-shadow: none;
         overflow: auto;
       }
+
+      :deep(.boxel-panel, .separator-vertical, .separator-horizontal) {
+        box-shadow: var(--boxel-deep-box-shadow);
+        border-radius: var(--boxel-border-radius-xl);
+      }
     </style>
   </template>
 }
diff --git a/packages/host/app/components/operator-mode/code-submode/inner-container.gts b/packages/host/app/components/operator-mode/code-submode/inner-container.gts
index 8f9df075ef..86e33e68f4 100644
--- a/packages/host/app/components/operator-mode/code-submode/inner-container.gts
+++ b/packages/host/app/components/operator-mode/code-submode/inner-container.gts
@@ -115,7 +115,6 @@ const CodeSubmodeInnerContainer: TemplateOnlyComponent<Signature> = <template>
       flex-direction: column;
       background-color: var(--boxel-light);
       border-radius: var(--boxel-border-radius-xl);
-      box-shadow: var(--boxel-deep-box-shadow);
       overflow: hidden;
     }
   </style>
diff --git a/packages/host/app/components/operator-mode/profile/profile-email.gts b/packages/host/app/components/operator-mode/profile/profile-email.gts
index 12a40abdd7..2b1c4b0692 100644
--- a/packages/host/app/components/operator-mode/profile/profile-email.gts
+++ b/packages/host/app/components/operator-mode/profile/profile-email.gts
@@ -632,7 +632,7 @@ export default class ProfileEmail extends Component<Signature> {
 
     let emailAdded = false;
     try {
-      await this.matrixService.client.addThreePidOnly({
+      await this.matrixService.addThreePidOnly({
         auth,
         client_secret: this.emailState.clientSecret,
         sid: this.emailState.sid,
@@ -671,7 +671,7 @@ export default class ProfileEmail extends Component<Signature> {
       let oldEmails = this.matrixService.profile.threePids;
       await Promise.all(
         oldEmails.map((email) =>
-          this.matrixService.client.deleteThreePid('email', email),
+          this.matrixService.deleteThreePid('email', email),
         ),
       );
       this.emailState = { type: 'initial' };
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 56c07a37a4..c27e07f8d8 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
@@ -420,7 +420,7 @@ export default class ProfileSettingsModal extends Component<Signature> {
           user: this.matrixService.userId,
         },
       } as IAuthData & { type: string };
-      await this.matrixService.client.setPassword(auth, this.newPassword);
+      await this.matrixService.setPassword(auth, this.newPassword);
       this.resetPasswordFields();
       this.submode = undefined;
     } catch (e: any) {
diff --git a/packages/host/app/components/operator-mode/stack-item.gts b/packages/host/app/components/operator-mode/stack-item.gts
index 504516a140..a3d8bc2257 100644
--- a/packages/host/app/components/operator-mode/stack-item.gts
+++ b/packages/host/app/components/operator-mode/stack-item.gts
@@ -13,6 +13,7 @@ import Component from '@glimmer/component';
 
 import { tracked, cached } from '@glimmer/tracking';
 
+import ExclamationCircle from '@cardstack/boxel-icons/exclamation-circle';
 import { formatDistanceToNow } from 'date-fns';
 import {
   task,
@@ -35,7 +36,7 @@ import {
 import { MenuItem, getContrastColor } from '@cardstack/boxel-ui/helpers';
 import { cssVar, optional } from '@cardstack/boxel-ui/helpers';
 
-import { IconTrash, IconLink, Warning } from '@cardstack/boxel-ui/icons';
+import { IconTrash, IconLink } from '@cardstack/boxel-ui/icons';
 
 import {
   type Actions,
@@ -611,10 +612,10 @@ export default class OperatorModeStackItem extends Component<Signature> {
         {{else if this.cardError}}
           <CardHeader
             @cardTypeDisplayName={{this.cardErrorTitle}}
-            @cardTypeIcon={{Warning}}
+            @cardTypeIcon={{ExclamationCircle}}
             @isTopCard={{this.isTopCard}}
             @onClose={{unless this.isBuried (perform this.closeItem)}}
-            class='stack-item-header'
+            class='stack-item-header stack-item-header-error'
             style={{cssVar
               boxel-card-header-icon-container-min-width=(if
                 this.isBuried '50px' '95px'
@@ -795,6 +796,9 @@ export default class OperatorModeStackItem extends Component<Signature> {
         min-width: 100%;
         gap: var(--boxel-sp-xxs);
       }
+      .stack-item-header-error {
+        color: var(--boxel-error-300);
+      }
 
       .stack-item-content {
         overflow: auto;
diff --git a/packages/host/app/components/operator-mode/submode-layout.gts b/packages/host/app/components/operator-mode/submode-layout.gts
index 2291be556f..5315f0abc9 100644
--- a/packages/host/app/components/operator-mode/submode-layout.gts
+++ b/packages/host/app/components/operator-mode/submode-layout.gts
@@ -11,10 +11,11 @@ import { tracked } from '@glimmer/tracking';
 import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
 import { restartableTask, timeout } from 'ember-concurrency';
 
-import {
-  ResizablePanel,
-  ResizablePanelGroup,
-} from '@cardstack/boxel-ui/components';
+import { modifier } from 'ember-modifier';
+
+import { TrackedObject } from 'tracked-built-ins';
+
+import { ResizablePanelGroup } from '@cardstack/boxel-ui/components';
 import { Avatar, IconButton } from '@cardstack/boxel-ui/components';
 import { and, cn, not } from '@cardstack/boxel-ui/helpers';
 
@@ -30,8 +31,6 @@ import type IndexController from '@cardstack/host/controllers';
 
 import { assertNever } from '@cardstack/host/utils/assert-never';
 
-import type { CardDef } from 'https://cardstack.com/base/card-api';
-
 import SearchSheet, {
   SearchSheetMode,
   SearchSheetModes,
@@ -45,11 +44,6 @@ import type OperatorModeStateService from '../../services/operator-mode-state-se
 
 const { APP } = ENV;
 
-type PanelWidths = {
-  submodePanel: number;
-  aiAssistantPanel: number;
-};
-
 interface Signature {
   Element: HTMLDivElement;
   Args: {
@@ -68,15 +62,35 @@ interface Signature {
   };
 }
 
+let handleWindowResizeModifier = modifier(
+  (element, [onWindowResize]: [(width: number) => void]) => {
+    let updateWindowWidth = () => {
+      let boundingClient = element.getBoundingClientRect();
+      onWindowResize(boundingClient.width);
+    };
+    updateWindowWidth();
+    window.addEventListener('resize', updateWindowWidth);
+
+    return () => {
+      window.removeEventListener('resize', updateWindowWidth);
+    };
+  },
+);
+
+type PanelWidths = {
+  defaultWidth: number | null;
+  minWidth: number | null;
+};
+
 export default class SubmodeLayout extends Component<Signature> {
   @tracked private isAiAssistantVisible = false;
   @tracked private searchSheetMode: SearchSheetMode = SearchSheetModes.Closed;
   @tracked private profileSettingsOpened = false;
   @tracked private profileSummaryOpened = false;
-  private panelWidths: PanelWidths = {
-    submodePanel: 500,
-    aiAssistantPanel: 200,
-  };
+  private aiPanelWidths: PanelWidths = new TrackedObject({
+    defaultWidth: 30,
+    minWidth: 25,
+  });
   @service private declare operatorModeStateService: OperatorModeStateService;
   @service private declare matrixService: MatrixService;
   @service private declare router: RouterService;
@@ -85,6 +99,17 @@ export default class SubmodeLayout extends Component<Signature> {
   private suppressSearchClose = false;
   private declare doSearch: (term: string) => void;
 
+  onWindowResize = (windowWidth: number) => {
+    let aiPanelDefaultWidthInPixels = 371;
+    if (windowWidth < aiPanelDefaultWidthInPixels) {
+      aiPanelDefaultWidthInPixels = windowWidth;
+    }
+    let aiPanelDefaultWidth = (aiPanelDefaultWidthInPixels / windowWidth) * 100;
+
+    this.aiPanelWidths.defaultWidth = aiPanelDefaultWidth;
+    this.aiPanelWidths.minWidth = aiPanelDefaultWidth;
+  };
+
   get operatorModeController(): IndexController {
     return this.operatorModeStateService.operatorModeController;
   }
@@ -99,12 +124,16 @@ export default class SubmodeLayout extends Component<Signature> {
     return this.operatorModeStateService.state?.stacks.flat() ?? [];
   }
 
-  private get lastCardInRightMostStack(): CardDef | null {
+  private get lastCardIdInRightMostStack() {
     if (this.allStackItems.length <= 0) {
       return null;
     }
 
-    return this.allStackItems[this.allStackItems.length - 1].card;
+    let stackItem = this.allStackItems[this.allStackItems.length - 1];
+    if (stackItem.cardError) {
+      return stackItem.cardError.id;
+    }
+    return stackItem.card.id;
   }
 
   private get isToggleWorkspaceChooserDisabled() {
@@ -118,8 +147,8 @@ export default class SubmodeLayout extends Component<Signature> {
         break;
       case Submodes.Code:
         this.operatorModeStateService.updateCodePath(
-          this.lastCardInRightMostStack
-            ? new URL(this.lastCardInRightMostStack.id + '.json')
+          this.lastCardIdInRightMostStack
+            ? new URL(this.lastCardIdInRightMostStack + '.json')
             : null,
         );
         break;
@@ -185,12 +214,6 @@ export default class SubmodeLayout extends Component<Signature> {
     this.profileSummaryOpened = !this.profileSummaryOpened;
   }
 
-  @action
-  private onPanelResize(panels: ResizablePanel[]) {
-    this.panelWidths.submodePanel = panels[0]?.lengthPx;
-    this.panelWidths.aiAssistantPanel = panels[1]?.lengthPx;
-  }
-
   @action
   private storeSearchElement(element: HTMLElement) {
     this.searchElement = element;
@@ -224,19 +247,16 @@ export default class SubmodeLayout extends Component<Signature> {
   });
 
   <template>
-    <div class='submode-layout {{this.aiAssistantVisibilityClass}}'>
+    <div
+      {{handleWindowResizeModifier this.onWindowResize}}
+      class='submode-layout {{this.aiAssistantVisibilityClass}}'
+    >
       <ResizablePanelGroup
         @orientation='horizontal'
-        @onPanelChange={{this.onPanelResize}}
         class='columns'
         as |ResizablePanel ResizeHandle|
       >
-        <ResizablePanel
-          @defaultLengthFraction={{1}}
-          @minLengthPx={{371}}
-          @collapsible={{false}}
-          class='main-panel'
-        >
+        <ResizablePanel class='main-panel'>
           <div class='top-left-menu'>
             <IconButton
               @icon={{BoxelIcon}}
@@ -305,21 +325,24 @@ export default class SubmodeLayout extends Component<Signature> {
             />
           {{/if}}
         </ResizablePanel>
-        {{#if (and APP.experimentalAIEnabled (not @hideAiAssistant))}}
+        {{#if
+          (and
+            APP.experimentalAIEnabled
+            (not @hideAiAssistant)
+            this.isAiAssistantVisible
+          )
+        }}
           <ResizablePanel
-            @defaultLengthFraction={{0.3}}
-            @minLengthPx={{371}}
+            @defaultSize={{this.aiPanelWidths.defaultWidth}}
+            @minSize={{this.aiPanelWidths.minWidth}}
             @collapsible={{false}}
-            @isHidden={{not this.isAiAssistantVisible}}
           >
-            {{#if this.isAiAssistantVisible}}
-              <AiAssistantPanel
-                @onClose={{this.toggleChat}}
-                @resizeHandle={{ResizeHandle}}
-                class='ai-assistant-panel
-                  {{if this.workspaceChooserOpened "left-border"}}'
-              />
-            {{/if}}
+            <AiAssistantPanel
+              @onClose={{this.toggleChat}}
+              @resizeHandle={{ResizeHandle}}
+              class='ai-assistant-panel
+                {{if this.workspaceChooserOpened "left-border"}}'
+            />
           </ResizablePanel>
         {{/if}}
       </ResizablePanelGroup>
diff --git a/packages/host/app/components/operator-mode/workspace-chooser/add-workspace.gts b/packages/host/app/components/operator-mode/workspace-chooser/add-workspace.gts
index 8d6dc57dec..54ac58c8cd 100644
--- a/packages/host/app/components/operator-mode/workspace-chooser/add-workspace.gts
+++ b/packages/host/app/components/operator-mode/workspace-chooser/add-workspace.gts
@@ -51,7 +51,7 @@ export default class AddWorkspace extends Component<Signature> {
     this.displayName = value;
     // if the user starts typing in the endpoint field, then stop helping them
     if (!this.hasUserEditedEndpoint) {
-      this.endpoint = cleanseString(value, '-');
+      this.endpoint = cleanseString(value);
     }
   };
   private closeModal = () => {
diff --git a/packages/host/app/lib/matrix-classes/room.ts b/packages/host/app/lib/matrix-classes/room.ts
index 01aad561bc..1a6aaf9eb8 100644
--- a/packages/host/app/lib/matrix-classes/room.ts
+++ b/packages/host/app/lib/matrix-classes/room.ts
@@ -5,6 +5,8 @@ import { type IEvent } from 'matrix-js-sdk';
 
 import type { MatrixEvent as DiscreteMatrixEvent } from 'https://cardstack.com/base/matrix-event';
 
+import Mutex from '../mutex';
+
 import type * as MatrixSDK from 'matrix-js-sdk';
 
 export type TempEvent = Partial<IEvent> & {
@@ -25,6 +27,8 @@ export default class Room {
     disabledEventIds: [],
   };
 
+  readonly mutex = new Mutex();
+
   get events() {
     return this._events;
   }
diff --git a/packages/host/app/lib/mutex.ts b/packages/host/app/lib/mutex.ts
new file mode 100644
index 0000000000..47898f7328
--- /dev/null
+++ b/packages/host/app/lib/mutex.ts
@@ -0,0 +1,62 @@
+import { buildWaiter } from '@ember/test-waiters';
+
+/*
+This class uses promises to implement a "mutex", which is a type of lock that can be used to
+ensure only one block of provided async code is run at a time, and that they are run in the
+order they were requested.
+
+It uses Ember's test waiter API to ensure that tests wait for any code waiting for the lock to complete execution.
+
+Usage example:
+
+// Usage example
+const mutex = new Mutex();
+
+async function criticalSection(num: number) {
+  await mutex.dispatch(async () => {
+    await new Promise((resolve) => setTimeout(resolve, Math.random() * 100));
+    console.log('Critical section ' + num);
+  });
+}
+criticalSection(1);
+criticalSection(2);
+criticalSection(3);
+
+// Output: (order is guaranteed despite the calling code not waiting to call the function three times and the random delays)
+// -> Critical section 1
+// -> Critical section 2
+// -> Critical section 3
+
+*/
+
+const waiter = buildWaiter('mutex:waiter');
+
+export default class Mutex {
+  private mutex = Promise.resolve();
+
+  // This method is private because the dispatch method is a less
+  // dangerous way to use the mutex. If we encounter a situation
+  // where we need to expose this method, we can do so.
+  private async lock(): Promise<() => void> {
+    let begin: (unlock: () => void) => void = (_unlock) => {};
+
+    this.mutex = this.mutex.then(() => {
+      return new Promise(begin);
+    });
+
+    return new Promise((res) => {
+      begin = res;
+    });
+  }
+
+  async dispatch<T>(fn: (() => T) | (() => Promise<T>)): Promise<T> {
+    const token = waiter.beginAsync();
+    const unlock = await this.lock();
+    try {
+      return await fn();
+    } finally {
+      unlock();
+      waiter.endAsync(token);
+    }
+  }
+}
diff --git a/packages/host/app/lib/utils.ts b/packages/host/app/lib/utils.ts
index e6e85364b1..d616e3b48f 100644
--- a/packages/host/app/lib/utils.ts
+++ b/packages/host/app/lib/utils.ts
@@ -28,9 +28,10 @@ export function stringToColor(string: string | null) {
   return color;
 }
 
-export function cleanseString(value: string, separator = '_') {
+export function cleanseString(value: string) {
   return deburr(value.toLocaleLowerCase())
-    .replace(/[^a-z0-9-_]+/g, separator)
+    .replace(/'/g, '')
+    .replace(/[^a-z0-9-_]+/g, '-')
     .replace(/^[^a-z0-9]/, '')
     .replace(/[^a-z0-9]$/, '');
 }
diff --git a/packages/host/app/resources/card-resource.ts b/packages/host/app/resources/card-resource.ts
index 61396f04cc..f50ad43e3b 100644
--- a/packages/host/app/resources/card-resource.ts
+++ b/packages/host/app/resources/card-resource.ts
@@ -4,6 +4,7 @@
 
 import { registerDestructor } from '@ember/destroyable';
 import { getOwner } from '@ember/owner';
+import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 
 import { restartableTask } from 'ember-concurrency';
@@ -13,11 +14,10 @@ import { Resource } from 'ember-resources';
 import status from 'statuses';
 
 import {
-  Loader,
   isSingleCardDocument,
   apiFor,
-  loaderFor,
   hasExecutableExtension,
+  isCardInstance,
 } from '@cardstack/runtime-common';
 
 import type MessageService from '@cardstack/host/services/message-service';
@@ -31,10 +31,11 @@ import type * as CardAPI from 'https://cardstack.com/base/card-api';
 
 import type CardService from '../services/card-service';
 import type LoaderService from '../services/loader-service';
+import type RealmService from '../services/realm';
 
-export interface CardError {
+interface CardErrors {
   errors: {
-    id: string;
+    id?: string; // 404 errors won't necessarily have an id
     status: number;
     title: string;
     message: string;
@@ -47,12 +48,13 @@ export interface CardError {
   }[];
 }
 
+export type CardError = CardErrors['errors'][0];
+
 interface Args {
   named: {
     // using string type here so that URL's that have the same href but are
     // different instances don't result in re-running the resource
     url: string | undefined;
-    loader: Loader;
     isLive: boolean;
     // this is not always constructed within a container so we pass in our services
     cardService: CardService;
@@ -69,7 +71,7 @@ class LiveCardIdentityContext implements IdentityContext {
   #cards = new Map<
     string,
     {
-      card: CardDef;
+      card: CardDef | undefined; // undefined means that the card is in an error state
       subscribers: Set<object>;
     }
   >();
@@ -83,22 +85,48 @@ class LiveCardIdentityContext implements IdentityContext {
   delete(url: string): void {
     this.#cards.delete(url);
   }
-
+  update(
+    url: string,
+    instance: CardDef | undefined,
+    subscribers?: Set<object>,
+  ) {
+    let entry = this.#cards.get(url);
+    if (!entry) {
+      entry = { card: instance, subscribers: new Set() };
+      this.#cards.set(url, entry);
+    } else {
+      entry.card = instance;
+    }
+    if (subscribers) {
+      for (let subscriber of subscribers) {
+        entry.subscribers.add(subscriber);
+      }
+    }
+  }
+  hasError(url: string) {
+    return this.#cards.has(url) && !this.#cards.get(url)?.card;
+  }
   subscribers(url: string): Set<object> | undefined {
     return this.#cards.get(url)?.subscribers;
   }
 }
 
-const liveCards: WeakMap<Loader, LiveCardIdentityContext> = new WeakMap();
-const realmSubscriptions: Map<
+let liveCardIdentityContext = new LiveCardIdentityContext();
+let realmSubscriptions: Map<
   string,
   WeakMap<CardResource, { unsubscribe: () => void }>
 > = new Map();
 
+export function testOnlyResetLiveCardState() {
+  liveCardIdentityContext = new LiveCardIdentityContext();
+  realmSubscriptions = new Map();
+}
+
 export class CardResource extends Resource<Args> {
   url: string | undefined;
   @tracked loaded: Promise<void> | undefined;
-  @tracked cardError: CardError['errors'][0] | undefined;
+  @tracked cardError: CardError | undefined;
+  @service private declare realm: RealmService;
   @tracked private _card: CardDef | undefined;
   @tracked private _api: typeof CardAPI | undefined;
   @tracked private staleCard: CardDef | undefined;
@@ -106,7 +134,6 @@ export class CardResource extends Resource<Args> {
   private declare messageService: MessageService;
   private declare loaderService: LoaderService;
   private declare resetLoader: () => void;
-  private _loader: Loader | undefined;
   private onCardInstanceChange?: (
     oldCard: CardDef | undefined,
     newCard: CardDef | undefined,
@@ -120,7 +147,6 @@ export class CardResource extends Resource<Args> {
 
     let {
       url,
-      loader,
       isLive,
       onCardInstanceChange,
       messageService,
@@ -129,8 +155,7 @@ export class CardResource extends Resource<Args> {
     } = named;
     this.messageService = messageService;
     this.cardService = cardService;
-    this.url = url;
-    this._loader = loader;
+    this.url = url?.replace(/\.json$/, '');
     this.onCardInstanceChange = onCardInstanceChange;
     this.cardError = undefined;
     this.resetLoader = resetLoader;
@@ -141,8 +166,8 @@ export class CardResource extends Resource<Args> {
     }
 
     registerDestructor(this, () => {
-      if (this.card) {
-        this.removeLiveCardEntry(this.card);
+      if (this.url) {
+        this.removeLiveCardEntry(this.url);
       }
       this.unsubscribeFromRealm();
     });
@@ -164,43 +189,40 @@ export class CardResource extends Resource<Args> {
     return this._api;
   }
 
-  private get loader() {
-    if (!this._loader) {
-      throw new Error(
-        `bug: should never get here, loader is obtained via owner`,
-      );
-    }
-    return this._loader;
-  }
-
   private loadStaticModel = restartableTask(async (url: URL) => {
-    let card = await this.getCard(url);
-    await this.updateCardInstance(card);
+    let cardOrError = await this.getCard(url);
+    await this.updateCardInstance(cardOrError);
   });
 
   private loadLiveModel = restartableTask(async (url: URL) => {
-    let identityContext = liveCards.get(this.loader);
-    if (!identityContext) {
-      identityContext = new LiveCardIdentityContext();
-      liveCards.set(this.loader, identityContext);
-    }
-    let card = await this.getCard(url, identityContext);
-    if (!card) {
-      if (this.cardError) {
-        console.warn(`cannot load card ${this.cardError.id}`, this.cardError);
-      }
-      this.clearCardInstance();
-      return;
+    let cardOrError = await this.getCard(url, liveCardIdentityContext);
+    await this.updateCardInstance(cardOrError);
+    if (isCardInstance(cardOrError)) {
+      let subscribers = liveCardIdentityContext.subscribers(cardOrError.id)!;
+      subscribers.add(this);
+    } else {
+      console.warn(`cannot load card ${cardOrError.id}`, cardOrError);
+      this.subscribeToRealm(url.href);
     }
-    let subscribers = identityContext.subscribers(card.id)!;
-    subscribers.add(this);
-    await this.updateCardInstance(card);
   });
 
-  private subscribeToRealm(card: CardDef) {
-    let realmURL = card[this.api.realmURL];
+  private subscribeToRealm(cardOrId: CardDef | string) {
+    let card: CardDef | undefined;
+    let id: string;
+    let realmURL: URL | undefined;
+    if (typeof cardOrId === 'string') {
+      id = cardOrId;
+      realmURL = this.realm.realmOfURL(new URL(id));
+    } else {
+      card = cardOrId;
+      id = card.id;
+      realmURL = card[this.api.realmURL];
+    }
     if (!realmURL) {
-      throw new Error(`could not determine realm for card ${card.id}`);
+      console.warn(
+        `could not determine realm for card ${id} when trying to subscribe to realm`,
+      );
+      return;
     }
     let realmSubscribers = realmSubscriptions.get(realmURL.href);
     if (!realmSubscribers) {
@@ -211,7 +233,6 @@ export class CardResource extends Resource<Args> {
       return;
     }
     realmSubscribers.set(this, {
-      // TODO figure out how to go in an out of errors via SSE
       unsubscribe: this.messageService.subscribe(
         realmURL.href,
         ({ type, data: dataStr }) => {
@@ -224,13 +245,21 @@ export class CardResource extends Resource<Args> {
           }
           let invalidations = data.invalidations as string[];
           let card = this.url
-            ? liveCards.get(this.loader)?.get(this.url)
+            ? liveCardIdentityContext.get(this.url)
             : undefined;
 
           if (!card) {
-            // the initial card static load has not actually completed yet
-            // (perhaps the loader just changed). in this case we ignore this
-            // message.
+            if (this.url && liveCardIdentityContext.hasError(this.url)) {
+              if (invalidations.find((i) => hasExecutableExtension(i))) {
+                // the invalidation included code changes too. in this case we
+                // need to flush the loader so that we can pick up any updated
+                // code before re-running the card
+                this.resetLoader();
+              }
+              // we've already established a subscription--we're in it, just
+              // load the updated instance
+              this.loadStaticModel.perform(new URL(this.url));
+            }
             return;
           }
 
@@ -242,10 +271,20 @@ export class CardResource extends Resource<Args> {
               if (invalidations.find((i) => hasExecutableExtension(i))) {
                 // the invalidation included code changes too. in this case we
                 // need to flush the loader so that we can pick up any updated
-                // code before re-running the card
+                // code before re-running the card as well as clear out the
+                // identity context as the card has a new implementation
                 this.resetLoader();
+                let subscribers = liveCardIdentityContext.subscribers(card.id);
+                liveCardIdentityContext.delete(card.id);
+                this.loadStaticModel.perform(new URL(card.id));
+                liveCardIdentityContext.update(
+                  card.id,
+                  this._card,
+                  subscribers,
+                );
+              } else {
+                this.reload.perform(card);
               }
-              this.reload.perform(card);
             }
           }
         },
@@ -253,10 +292,7 @@ export class CardResource extends Resource<Args> {
     });
   }
 
-  private async getCard(
-    url: URL,
-    identityContext?: IdentityContext,
-  ): Promise<CardDef | undefined> {
+  private async getCard(url: URL, identityContext?: LiveCardIdentityContext) {
     if (typeof url === 'string') {
       url = new URL(url);
     }
@@ -266,7 +302,6 @@ export class CardResource extends Resource<Args> {
     if (existingCard) {
       return existingCard;
     }
-    this.cardError = undefined;
     try {
       let json = await this.cardService.fetchJSON(url);
       if (!isSingleCardDocument(json)) {
@@ -283,65 +318,29 @@ export class CardResource extends Resource<Args> {
           identityContext,
         },
       );
+      if (identityContext && identityContext.hasError(url.href)) {
+        liveCardIdentityContext.update(url.href, card);
+      }
       return card;
     } catch (error: any) {
-      let errorResponse: CardError;
-      try {
-        errorResponse = JSON.parse(error.responseText) as CardError;
-      } catch (parseError) {
-        switch (error.status) {
-          // tailor HTTP responses as necessary for better user feedback
-          case 404:
-            errorResponse = {
-              errors: [
-                {
-                  id: url.href,
-                  status: 404,
-                  title: 'Card Not Found',
-                  message: `The card ${url.href} does not exist`,
-                  realm: error.responseHeaders?.get('X-Boxel-Realm-Url'),
-                  meta: {
-                    lastKnownGoodHtml: null,
-                    scopedCssUrls: [],
-                    stack: null,
-                  },
-                },
-              ],
-            };
-            break;
-          default:
-            errorResponse = {
-              errors: [
-                {
-                  id: url.href,
-                  status: error.status,
-                  title: status.message[error.status] ?? `HTTP ${error.status}`,
-                  message: `Received HTTP ${error.status} from server ${
-                    error.responseText ?? ''
-                  }`.trim(),
-                  realm: error.responseHeaders?.get('X-Boxel-Realm-Url'),
-                  meta: {
-                    lastKnownGoodHtml: null,
-                    scopedCssUrls: [],
-                    stack: null,
-                  },
-                },
-              ],
-            };
-        }
+      if (identityContext) {
+        liveCardIdentityContext.update(url.href, undefined);
       }
-      this.cardError = errorResponse.errors[0];
-      return;
+      let errorResponse = processCardError(url, error);
+      return errorResponse.errors[0];
     }
   }
 
-  // TODO deal with live update of card that goes into and out of an error state
   private reload = task(async (card: CardDef) => {
     try {
       await this.cardService.reloadCard(card);
+      this.setCardOrError(card);
     } catch (err: any) {
       if (err.status !== 404) {
-        throw err;
+        liveCardIdentityContext.update(card.id, undefined);
+        let errorResponse = processCardError(new URL(card.id), err);
+        this.setCardOrError(errorResponse.errors[0]);
+        return;
       }
       // in this case the document was invalidated in the index because the
       // file was deleted
@@ -361,39 +360,40 @@ export class CardResource extends Resource<Args> {
     }
   };
 
-  private async updateCardInstance(maybeCard: CardDef | undefined) {
-    if (maybeCard) {
+  private async updateCardInstance(maybeCard: CardDef | CardError) {
+    let instance: CardDef | undefined;
+    if (isCardInstance(maybeCard)) {
+      instance = maybeCard;
       this._api = await apiFor(maybeCard);
-    } else {
-      this._api = undefined;
     }
     if (this.onCardInstanceChange) {
-      this.onCardInstanceChange(this._card, maybeCard);
+      this.onCardInstanceChange(this._card, instance);
     }
-    if (maybeCard) {
-      this.subscribeToRealm(maybeCard);
+    if (maybeCard.id) {
+      this.subscribeToRealm(maybeCard.id);
     }
+    this.setCardOrError(maybeCard);
+  }
 
-    // clean up the live card entry if the new card is undefined or if it's
-    // using a different loader
-    if (
-      this._card &&
-      (!maybeCard || loaderFor(maybeCard) !== loaderFor(this._card))
-    ) {
-      this.removeLiveCardEntry(this._card);
+  private setCardOrError(cardOrError: CardDef | CardError) {
+    if (isCardInstance(cardOrError)) {
+      this._card = cardOrError;
+      this.staleCard = cardOrError;
+      this.cardError = undefined;
+    } else {
+      this.cardError = cardOrError;
+      this._card = undefined;
+      this.staleCard = undefined;
     }
-    this._card = maybeCard;
-    this.staleCard = maybeCard;
   }
 
-  private removeLiveCardEntry(card: CardDef) {
-    let loader = loaderFor(card);
-    let subscribers = liveCards.get(loader)?.subscribers(card.id);
+  private removeLiveCardEntry(id: string) {
+    let subscribers = liveCardIdentityContext.subscribers(id);
     if (subscribers && subscribers.has(this)) {
       subscribers.delete(this);
     }
     if (subscribers && subscribers.size === 0) {
-      liveCards.get(loader)!.delete(card.id);
+      liveCardIdentityContext.delete(id);
     }
   }
 
@@ -428,7 +428,6 @@ export function getCard(
       onCardInstanceChange: opts?.onCardInstanceChange
         ? opts.onCardInstanceChange()
         : undefined,
-      loader: loaderService.loader,
       resetLoader: loaderService.reset.bind(loaderService),
       messageService: (getOwner(parent) as any).lookup(
         'service:message-service',
@@ -439,3 +438,50 @@ export function getCard(
     },
   }));
 }
+
+function processCardError(url: URL, error: any): CardErrors {
+  try {
+    let errorResponse = JSON.parse(error.responseText) as CardErrors;
+    return errorResponse;
+  } catch (parseError) {
+    switch (error.status) {
+      // tailor HTTP responses as necessary for better user feedback
+      case 404:
+        return {
+          errors: [
+            {
+              id: url.href,
+              status: 404,
+              title: 'Card Not Found',
+              message: `The card ${url.href} does not exist`,
+              realm: error.responseHeaders?.get('X-Boxel-Realm-Url'),
+              meta: {
+                lastKnownGoodHtml: null,
+                scopedCssUrls: [],
+                stack: null,
+              },
+            },
+          ],
+        };
+      default:
+        return {
+          errors: [
+            {
+              id: url.href,
+              status: error.status,
+              title: status.message[error.status] ?? `HTTP ${error.status}`,
+              message: `Received HTTP ${error.status} from server ${
+                error.responseText ?? ''
+              }`.trim(),
+              realm: error.responseHeaders?.get('X-Boxel-Realm-Url'),
+              meta: {
+                lastKnownGoodHtml: null,
+                scopedCssUrls: [],
+                stack: null,
+              },
+            },
+          ],
+        };
+    }
+  }
+}
diff --git a/packages/host/app/resources/file.ts b/packages/host/app/resources/file.ts
index 885f8958dc..92d8e8e3be 100644
--- a/packages/host/app/resources/file.ts
+++ b/packages/host/app/resources/file.ts
@@ -199,12 +199,21 @@ class _FileResource extends Resource<Args> {
 
     this.setSubscription(realmURL, (event: { type: string; data: string }) => {
       let eventData = JSON.parse(event.data);
-      if (event.type !== 'index' || !eventData.updatedFile) {
+      if (
+        event.type !== 'index' ||
+        // we wait specifically for the index complete event ("incremental") so
+        // that the subsequent index read retrieves the latest contents of the file
+        eventData.type !== 'incremental' ||
+        !Array.isArray(eventData.invalidations)
+      ) {
         return;
       }
 
-      let { updatedFile } = eventData as { updatedFile: string };
-      if (this.url === updatedFile) {
+      let { invalidations } = eventData as { invalidations: string[] };
+      let normalizedURL = this.url.endsWith('.json')
+        ? this.url.replace(/\.json$/, '')
+        : this.url;
+      if (invalidations.includes(normalizedURL)) {
         this.read.perform();
       }
     });
diff --git a/packages/host/app/resources/matrix-profile.ts b/packages/host/app/resources/matrix-profile.ts
index 0dc7e906dc..4a6e4557ed 100644
--- a/packages/host/app/resources/matrix-profile.ts
+++ b/packages/host/app/resources/matrix-profile.ts
@@ -32,8 +32,8 @@ export class MatrixProfileResource extends Resource<Args> {
   load = restartableTask(async () => {
     if (this.userId) {
       let [rawProfile, threePid] = await all([
-        this.matrixService.client.getProfileInfo(this.userId),
-        this.matrixService.client.getThreePids(),
+        this.matrixService.getProfileInfo(this.userId),
+        this.matrixService.getThreePids(),
       ]);
 
       if (rawProfile) {
diff --git a/packages/host/app/services/command-service.ts b/packages/host/app/services/command-service.ts
index 29963760da..1d1c6faab1 100644
--- a/packages/host/app/services/command-service.ts
+++ b/packages/host/app/services/command-service.ts
@@ -82,11 +82,17 @@ export default class CommandService extends Service {
       // Get the input type and validate/construct the payload
       let InputType = await command.getInputType();
 
-      // Construct a new instance of the input type with the payload
-      let typedInput = new InputType({
-        ...toolCall.arguments.attributes,
-        ...toolCall.arguments.relationships,
-      });
+      // Construct a new instance of the input type with the
+      // The input is undefined if the command has no input type
+      let typedInput;
+      if (InputType) {
+        typedInput = new InputType({
+          ...toolCall.arguments.attributes,
+          ...toolCall.arguments.relationships,
+        });
+      } else {
+        typedInput = undefined;
+      }
       let res = await command.execute(typedInput);
       await this.matrixService.sendReactionEvent(
         event.room_id!,
@@ -131,10 +137,16 @@ export default class CommandService extends Service {
         // Get the input type and validate/construct the payload
         let InputType = await commandToRun.getInputType();
         // Construct a new instance of the input type with the payload
-        let typedInput = new InputType({
-          ...payload.attributes,
-          ...payload.relationships,
-        });
+        // The input is undefined if the command has no input type
+        let typedInput;
+        if (InputType) {
+          typedInput = new InputType({
+            ...payload.attributes,
+            ...payload.relationships,
+          });
+        } else {
+          typedInput = undefined;
+        }
         [res] = await all([
           await commandToRun.execute(typedInput),
           await timeout(DELAY_FOR_APPLYING_UI), // leave a beat for the "applying" state of the UI to be shown
diff --git a/packages/host/app/services/matrix-service.ts b/packages/host/app/services/matrix-service.ts
index ad99cdc7be..dc67a4537b 100644
--- a/packages/host/app/services/matrix-service.ts
+++ b/packages/host/app/services/matrix-service.ts
@@ -4,8 +4,6 @@ import { debounce } from '@ember/runloop';
 import Service, { service } from '@ember/service';
 import { cached, tracked } from '@glimmer/tracking';
 
-import format from 'date-fns/format';
-
 import { task } from 'ember-concurrency';
 import window from 'ember-window-mock';
 import {
@@ -23,7 +21,6 @@ import { v4 as uuidv4 } from 'uuid';
 import {
   type LooseSingleCardDocument,
   markdownToHtml,
-  aiBotUsername,
   splitStringIntoChunks,
   baseRealm,
   loaderFor,
@@ -40,7 +37,6 @@ import {
 import { getPatchTool } from '@cardstack/runtime-common/helpers/ai';
 import { getMatrixUsername } from '@cardstack/runtime-common/matrix-client';
 
-import { currentRoomIdPersistenceKey } from '@cardstack/host/components/ai-assistant/panel';
 import {
   type Submode,
   Submodes,
@@ -72,6 +68,8 @@ import { importResource } from '../resources/import';
 
 import { RoomResource, getRoom } from '../resources/room';
 
+import { CurrentRoomIdPersistenceKey } from '../utils/local-storage-keys';
+
 import { type SerializedState as OperatorModeSerializedState } from './operator-mode-state-service';
 
 import type CardService from './card-service';
@@ -86,11 +84,10 @@ import type ResetService from './reset';
 import type * as MatrixSDK from 'matrix-js-sdk';
 
 const { matrixURL } = ENV;
-const AI_BOT_POWER_LEVEL = 50; // this is required to set the room name
 const MAX_CARD_SIZE_KB = 60;
 const STATE_EVENTS_OF_INTEREST = ['m.room.create', 'm.room.name'];
 const DefaultSkillCards = [`${baseRealm.url}SkillCard/card-editing`];
-const SKILLS_STATE_EVENT_TYPE = 'com.cardstack.boxel.room.skills';
+export const SKILLS_STATE_EVENT_TYPE = 'com.cardstack.boxel.room.skills';
 
 export type OperatorModeContext = {
   submode: Submode;
@@ -111,7 +108,7 @@ export default class MatrixService extends Service {
   @tracked private _isNewUser = false;
   @tracked private postLoginCompleted = false;
 
-  profile = getMatrixProfile(this, () => this.client.getUserId());
+  profile = getMatrixProfile(this, () => this.userId);
 
   private roomDataMap: TrackedMap<string, Room> = new TrackedMap();
 
@@ -193,7 +190,7 @@ export default class MatrixService extends Service {
     return this.client.isLoggedIn() && this.postLoginCompleted;
   }
 
-  get client() {
+  private get client() {
     if (!this._client) {
       throw new Error(`cannot use matrix client before matrix SDK has loaded`);
     }
@@ -229,10 +226,25 @@ export default class MatrixService extends Service {
     return this.#matrixSDK;
   }
 
+  get privateChatPreset() {
+    return this.matrixSDK.Preset.PrivateChat;
+  }
+
+  get aiBotPowerLevel() {
+    return 50; // this is required to set the room name
+  }
+
+  get flushAll() {
+    return Promise.all([
+      this.flushMembership ?? Promise.resolve(),
+      this.flushTimeline ?? Promise.resolve(),
+      this.flushRoomState ?? Promise.resolve(),
+    ]);
+  }
+
   async logout() {
     try {
-      await this.flushMembership;
-      await this.flushTimeline;
+      await this.flushAll;
       clearAuth();
       this.postLoginCompleted = false;
       this.reset.resetAll();
@@ -265,11 +277,24 @@ export default class MatrixService extends Service {
     return this._isNewUser;
   }
 
-  async initializeNewUser(auth: LoginResponse, displayName: string) {
+  async initializeNewUser(
+    auth: LoginResponse,
+    displayName: string,
+    registrationToken?: string,
+  ) {
     displayName = displayName.trim();
     this._isInitializingNewUser = true;
     this.start({ auth });
     this.setDisplayName(displayName);
+    let userId = this.client.getUserId();
+    if (!userId) {
+      throw new Error(
+        `bug: there is no userId associated with the matrix client`,
+      );
+    }
+
+    await this.realmServer.createUser(userId, registrationToken);
+
     await Promise.all([
       this.createPersonalRealmForUser({
         endpoint: 'personal',
@@ -425,41 +450,6 @@ export default class MatrixService extends Service {
     return this.client.createRealmSession(realmURL);
   }
 
-  async createRoom(
-    name: string,
-    invites: string[], // these can be local names
-    topic?: string,
-  ): Promise<string> {
-    let userId = this.client.getUserId();
-    if (!userId) {
-      throw new Error(
-        `bug: there is no userId associated with the matrix client`,
-      );
-    }
-    let invite = invites.map((i) =>
-      i.startsWith('@') ? i : `@${i}:${userId!.split(':')[1]}`,
-    );
-    let { room_id: roomId } = await this.client.createRoom({
-      preset: this.matrixSDK.Preset.PrivateChat,
-      invite,
-      name,
-      topic,
-      room_alias_name: encodeURIComponent(
-        `${name} - ${format(new Date(), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx")} - ${
-          this.userId
-        }`,
-      ),
-    });
-    invites.map((i) => {
-      let fullId = i.startsWith('@') ? i : `@${i}:${userId!.split(':')[1]}`;
-      if (i === aiBotUsername) {
-        this.client.setPowerLevel(roomId, fullId, AI_BOT_POWER_LEVEL, null);
-      }
-    });
-    this.addSkillCardsToRoom(roomId, await this.loadDefaultSkills());
-    return roomId;
-  }
-
   private async sendEvent(
     roomId: string,
     eventType: string,
@@ -469,15 +459,18 @@ export default class MatrixService extends Service {
       | ReactionEventContent
       | CommandResultContent,
   ) {
-    if ('data' in content) {
-      const encodedContent = {
-        ...content,
-        data: JSON.stringify(content.data),
-      };
-      return await this.client.sendEvent(roomId, eventType, encodedContent);
-    } else {
-      return await this.client.sendEvent(roomId, eventType, content);
-    }
+    let roomData = this.ensureRoomData(roomId);
+    return roomData.mutex.dispatch(async () => {
+      if ('data' in content) {
+        const encodedContent = {
+          ...content,
+          data: JSON.stringify(content.data),
+        };
+        return await this.client.sendEvent(roomId, eventType, encodedContent);
+      } else {
+        return await this.client.sendEvent(roomId, eventType, content);
+      }
+    });
   }
 
   async sendReactionEvent(roomId: string, eventId: string, status: string) {
@@ -489,7 +482,7 @@ export default class MatrixService extends Service {
       },
     };
     try {
-      return await this.client.sendEvent(roomId, 'm.reaction', content);
+      return await this.sendEvent(roomId, 'm.reaction', content);
     } catch (e) {
       throw new Error(
         `Error sending reaction event: ${
@@ -529,12 +522,20 @@ export default class MatrixService extends Service {
     }
   }
 
-  private async getCardEventIds(
+  async addSkillCardsToRoomHistory(
+    skills: SkillCard[],
+    roomId: string,
+    opts?: CardAPI.SerializeOpts,
+  ): Promise<string[]> {
+    return this.addCardsToRoom(skills, roomId, this.skillCardHashes, opts);
+  }
+
+  async addCardsToRoom(
     cards: CardDef[],
     roomId: string,
     cardHashes: Map<string, string>,
     opts?: CardAPI.SerializeOpts,
-  ) {
+  ): Promise<string[]> {
     if (!cards.length) {
       return [];
     }
@@ -598,7 +599,7 @@ export default class MatrixService extends Service {
       }
     }
 
-    let attachedCardsEventIds = await this.getCardEventIds(
+    let attachedCardsEventIds = await this.addCardsToRoom(
       attachedCards,
       roomId,
       this.cardHashes,
@@ -622,88 +623,47 @@ export default class MatrixService extends Service {
     } as CardMessageContent);
   }
 
-  public async addSkillCardsToRoom(
+  public updateSkillIsActive = async (
     roomId: string,
-    skillCards: SkillCard[],
-  ): Promise<void> {
-    let attachedSkillEventIds = await this.getCardEventIds(
-      skillCards,
-      roomId,
-      this.skillCardHashes,
-      { includeComputeds: true, maybeRelativeURL: null },
-    );
-    let skillEventIdsStateEvent: Record<string, any> = {};
-    try {
-      skillEventIdsStateEvent = await this.client.getStateEvent(
+    skillEventId: string,
+    isActive: boolean,
+  ) => {
+    let roomData = this.ensureRoomData(roomId);
+    await roomData.mutex.dispatch(async () => {
+      let currentSkillsConfig = await this.getStateEvent(
         roomId,
         SKILLS_STATE_EVENT_TYPE,
         '',
       );
-    } catch (e: unknown) {
-      if (e instanceof Error && 'errcode' in e && e.errcode === 'M_NOT_FOUND') {
-        // this is fine, it just means the state event doesn't exist yet
+      let newSkillsConfig = {
+        enabledEventIds: [...(currentSkillsConfig.enabledEventIds || [])],
+        disabledEventIds: [...(currentSkillsConfig.disabledEventIds || [])],
+      };
+      if (isActive) {
+        newSkillsConfig.enabledEventIds.push(skillEventId);
+        newSkillsConfig.disabledEventIds =
+          newSkillsConfig.disabledEventIds.filter((id) => id !== skillEventId);
       } else {
-        throw e;
+        newSkillsConfig.disabledEventIds.push(skillEventId);
+        newSkillsConfig.enabledEventIds =
+          newSkillsConfig.enabledEventIds.filter((id) => id !== skillEventId);
       }
-    }
-    this.client.sendStateEvent(roomId, SKILLS_STATE_EVENT_TYPE, {
-      enabledEventIds: [
-        ...new Set([
-          ...(skillEventIdsStateEvent?.enabledEventIds || []),
-          ...attachedSkillEventIds,
-        ]),
-      ],
-      disabledEventIds: [...(skillEventIdsStateEvent?.disabledEventIds || [])],
-    });
-  }
-
-  public updateSkillIsActive = async (
-    roomId: string,
-    skillEventId: string,
-    isActive: boolean,
-  ) => {
-    let currentSkillsConfig = await this.client.getStateEvent(
-      roomId,
-      SKILLS_STATE_EVENT_TYPE,
-      '',
-    );
-    let newSkillsConfig = {
-      enabledEventIds: [...(currentSkillsConfig.enabledEventIds || [])],
-      disabledEventIds: [...(currentSkillsConfig.disabledEventIds || [])],
-    };
-    if (isActive) {
-      newSkillsConfig.enabledEventIds.push(skillEventId);
-      newSkillsConfig.disabledEventIds =
-        newSkillsConfig.disabledEventIds.filter((id) => id !== skillEventId);
-    } else {
-      newSkillsConfig.disabledEventIds.push(skillEventId);
-      newSkillsConfig.enabledEventIds = newSkillsConfig.enabledEventIds.filter(
-        (id) => id !== skillEventId,
+      await this.client.sendStateEvent(
+        roomId,
+        SKILLS_STATE_EVENT_TYPE,
+        newSkillsConfig,
       );
-    }
-    await this.client.sendStateEvent(
-      roomId,
-      SKILLS_STATE_EVENT_TYPE,
-      newSkillsConfig,
-    );
+    });
   };
 
   public async sendAiAssistantMessage(params: {
-    roomId?: string; // if falsy we create a new room
-    show?: boolean; // if truthy, ensure the side panel to the room
+    roomId: string;
+    show?: boolean; // if truthy, ensure the side panel is open to the room
     prompt: string;
     attachedCards?: CardDef[];
-    skillCards?: SkillCard[];
     commands?: { command: Command<any, any, any>; autoExecute: boolean }[];
   }): Promise<{ roomId: string }> {
     let roomId = params.roomId;
-    if (!roomId) {
-      roomId = await this.createRoom('AI Assistant', [aiBotUsername]);
-    }
-    if (params.skillCards?.length) {
-      this.addSkillCardsToRoom(roomId, params.skillCards);
-    }
-
     let html = markdownToHtml(params.prompt);
     let mappings = await basicMappings(this.loaderService.loader);
     let tools = [];
@@ -729,7 +689,7 @@ export default class MatrixService extends Service {
       });
     }
 
-    let attachedCardsEventIds = await this.getCardEventIds(
+    let attachedCardsEventIds = await this.addCardsToRoom(
       params.attachedCards ?? [],
       roomId,
       this.cardHashes,
@@ -921,6 +881,10 @@ export default class MatrixService extends Service {
     }
   }
 
+  async createRoom(opts: MatrixSDK.ICreateRoomOpts) {
+    return this.client.createRoom(opts);
+  }
+
   async createCard<T extends typeof BaseDef>(
     codeRef: ResolvedCodeRef,
     attr: Record<string, any>,
@@ -941,6 +905,146 @@ export default class MatrixService extends Service {
     return card;
   }
 
+  async getProfileInfo(userId: string) {
+    return await this.client.getProfileInfo(userId);
+  }
+
+  async getThreePids() {
+    return await this.client.getThreePids();
+  }
+
+  async addThreePidOnly(data: MatrixSDK.IAddThreePidOnlyBody) {
+    return await this.client.addThreePidOnly(data);
+  }
+
+  async deleteThreePid(medium: string, address: string) {
+    return await this.client.deleteThreePid(medium, address);
+  }
+
+  async setPowerLevel(roomId: string, userId: string, powerLevel: number) {
+    let roomData = this.ensureRoomData(roomId);
+    await roomData.mutex.dispatch(async () => {
+      return this.client.setPowerLevel(roomId, userId, powerLevel);
+    });
+  }
+
+  async getStateEvent(
+    roomId: string,
+    eventType: string,
+    stateKey: string = '',
+  ) {
+    return this.client.getStateEvent(roomId, eventType, stateKey);
+  }
+
+  async getStateEventSafe(
+    roomId: string,
+    eventType: string,
+    stateKey: string = '',
+  ) {
+    try {
+      return await this.client.getStateEvent(roomId, eventType, stateKey);
+    } catch (e: unknown) {
+      if (e instanceof Error && 'errcode' in e && e.errcode === 'M_NOT_FOUND') {
+        // this is fine, it just means the state event doesn't exist yet
+        return undefined;
+      } else {
+        throw e;
+      }
+    }
+  }
+
+  async sendStateEvent(
+    roomId: string,
+    eventType: string,
+    content: Record<string, any>,
+    stateKey: string = '',
+  ) {
+    let roomData = this.ensureRoomData(roomId);
+    await roomData.mutex.dispatch(async () => {
+      return this.client.sendStateEvent(roomId, eventType, content, stateKey);
+    });
+  }
+
+  async updateStateEvent(
+    roomId: string,
+    eventType: string,
+    stateKey: string = '',
+    transformContent: (
+      content: Record<string, any>,
+    ) => Promise<Record<string, any>>,
+  ) {
+    let roomData = this.ensureRoomData(roomId);
+    await roomData.mutex.dispatch(async () => {
+      let currentContent = await this.getStateEventSafe(
+        roomId,
+        eventType,
+        stateKey,
+      );
+      let newContent = await transformContent(currentContent ?? {});
+      return this.client.sendStateEvent(
+        roomId,
+        eventType,
+        newContent,
+        stateKey,
+      );
+    });
+  }
+
+  async leave(roomId: string) {
+    let roomData = this.ensureRoomData(roomId);
+    await roomData.mutex.dispatch(async () => {
+      return this.client.leave(roomId);
+    });
+  }
+
+  async forget(roomId: string) {
+    let roomData = this.ensureRoomData(roomId);
+    await roomData.mutex.dispatch(async () => {
+      return this.client.forget(roomId);
+    });
+  }
+
+  async setRoomName(roomId: string, name: string) {
+    let roomData = this.ensureRoomData(roomId);
+    await roomData.mutex.dispatch(async () => {
+      return this.client.setRoomName(roomId, name);
+    });
+  }
+
+  async requestPasswordEmailToken(
+    email: string,
+    clientSecret: string,
+    sendAttempt: number,
+    nextLink?: string,
+  ) {
+    return await this.client.requestPasswordEmailToken(
+      email,
+      clientSecret,
+      sendAttempt,
+      nextLink,
+    );
+  }
+
+  async setPassword(
+    authDict: MatrixSDK.AuthDict,
+    newPassword: string,
+    logoutDevices?: boolean,
+  ) {
+    return await this.client.setPassword(authDict, newPassword, logoutDevices);
+  }
+
+  async registerRequest(data: MatrixSDK.RegisterRequest, kind?: string) {
+    return await this.client.registerRequest(data, kind);
+  }
+
+  async sendReadReceipt(matrixEvent: MatrixEvent) {
+    return await this.client.sendReadReceipt(matrixEvent);
+  }
+
+  async isUsernameAvailable(username: string) {
+    return await this.client.isUsernameAvailable(username);
+  }
+
   private addRoomEvent(event: TempEvent, oldEventId?: string) {
     let { room_id: roomId } = event;
 
@@ -949,13 +1053,17 @@ export default class MatrixService extends Service {
         `bug: roomId is undefined for event ${JSON.stringify(event, null, 2)}`,
       );
     }
+    let roomData = this.ensureRoomData(roomId);
+    roomData.addEvent(event, oldEventId);
+  }
+
+  private ensureRoomData(roomId: string) {
     let roomData = this.getRoomData(roomId);
     if (!roomData) {
       roomData = new Room();
       this.setRoomData(roomId, roomData);
     }
-
-    roomData.addEvent(event, oldEventId);
+    return roomData;
   }
 
   private onMembership = (event: MatrixEvent, member: RoomMember) => {
@@ -1071,11 +1179,7 @@ export default class MatrixService extends Service {
     }
     roomStates = Array.from(roomStateMap.values());
     for (let rs of roomStates) {
-      let roomData = this.getRoomData(rs.roomId);
-      if (!roomData) {
-        roomData = new Room();
-        this.setRoomData(rs.roomId, roomData);
-      }
+      let roomData = this.ensureRoomData(rs.roomId);
       let name = rs.events.get('m.room.name')?.get('')?.event.content?.name;
       if (name) {
         roomData.updateName(name);
@@ -1246,7 +1350,7 @@ function saveAuth(auth: LoginResponse) {
 
 function clearAuth() {
   window.localStorage.removeItem('auth');
-  window.localStorage.removeItem(currentRoomIdPersistenceKey);
+  window.localStorage.removeItem(CurrentRoomIdPersistenceKey);
 }
 
 function getAuth(): LoginResponse | undefined {
diff --git a/packages/host/app/services/message-service.ts b/packages/host/app/services/message-service.ts
index 6bd34cb856..46ea4b40dd 100644
--- a/packages/host/app/services/message-service.ts
+++ b/packages/host/app/services/message-service.ts
@@ -8,7 +8,7 @@ import window from 'ember-window-mock';
 
 import qs from 'qs';
 
-import { sessionLocalStorageKey } from './realm';
+import { SessionLocalStorageKey } from '../utils/local-storage-keys';
 
 import type NetworkService from './network';
 
@@ -62,7 +62,7 @@ function getPersistedTokenForRealm(realmURL: string) {
     return 'TEST_TOKEN';
   }
 
-  let sessionStr = window.localStorage.getItem(sessionLocalStorageKey) ?? '{}';
+  let sessionStr = window.localStorage.getItem(SessionLocalStorageKey) ?? '{}';
   let session = JSON.parse(sessionStr);
   return session[realmURL] as string | undefined;
 }
diff --git a/packages/host/app/services/realm-server.ts b/packages/host/app/services/realm-server.ts
index 274459780d..222991c019 100644
--- a/packages/host/app/services/realm-server.ts
+++ b/packages/host/app/services/realm-server.ts
@@ -82,34 +82,53 @@ export default class RealmServerService extends Service {
       window.localStorage.getItem(sessionLocalStorageKey) ?? undefined;
   }
 
+  async createUser(matrixUserId: string, registrationToken?: string) {
+    await this.login();
+    let response = await this.network.fetch(`${this.url.href}_user`, {
+      method: 'POST',
+      headers: {
+        Accept: SupportedMimeType.JSONAPI,
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.token}`,
+      },
+      body: JSON.stringify({
+        data: {
+          type: 'user',
+          attributes: {
+            matrixUserId,
+            registrationToken: registrationToken ?? null,
+          },
+        },
+      }),
+    });
+    if (!response.ok) {
+      let err = `Could not create user with parameters '${matrixUserId}' and '${registrationToken}': ${
+        response.status
+      } - ${await response.text()}`;
+      console.error(err);
+      throw new Error(err);
+    }
+  }
+
   async createRealm(args: {
     endpoint: string;
     name: string;
     iconURL?: string;
     backgroundURL?: string;
   }) {
-    if (!this.client) {
-      throw new Error(`Cannot create realm without matrix client`);
-    }
     await this.login();
-    if (this.auth.type !== 'logged-in') {
-      throw new Error('Could not login to realm server');
-    }
 
-    let response = await this.network.authedFetch(
-      `${this.url.href}_create-realm`,
-      {
-        method: 'POST',
-        headers: {
-          Accept: SupportedMimeType.JSONAPI,
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${this.token}`,
-        },
-        body: JSON.stringify({
-          data: { type: 'realm', attributes: args },
-        }),
+    let response = await this.network.fetch(`${this.url.href}_create-realm`, {
+      method: 'POST',
+      headers: {
+        Accept: SupportedMimeType.JSONAPI,
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.token}`,
       },
-    );
+      body: JSON.stringify({
+        data: { type: 'realm', attributes: args },
+      }),
+    });
     if (!response.ok) {
       let err = `Could not create realm with endpoint '${args.endpoint}': ${
         response.status
@@ -181,7 +200,7 @@ export default class RealmServerService extends Service {
     if (this.catalogRealmURLs.length > 0) {
       return;
     }
-    let response = await this.network.authedFetch(
+    let response = await this.network.fetch(
       `${this.url.origin}/_catalog-realms`,
     );
     if (response.status !== 200) {
diff --git a/packages/host/app/services/realm.ts b/packages/host/app/services/realm.ts
index 217b5075fc..0bc049a637 100644
--- a/packages/host/app/services/realm.ts
+++ b/packages/host/app/services/realm.ts
@@ -27,12 +27,15 @@ import {
   type RealmInfo,
   type IndexEventData,
   RealmPermissions,
+  RealmPaths,
 } from '@cardstack/runtime-common';
 
 import ENV from '@cardstack/host/config/environment';
 
 import { assertNever } from '@cardstack/host/utils/assert-never';
 
+import { SessionLocalStorageKey } from '../utils/local-storage-keys';
+
 import type MatrixService from './matrix-service';
 import type MessageService from './message-service';
 import type NetworkService from './network';
@@ -199,7 +202,7 @@ class RealmResource {
     this.fetchInfoTask.cancelAll();
     this.fetchingInfo = undefined;
     this.fetchRealmPermissionsTask.cancelAll();
-    window.localStorage.removeItem(sessionLocalStorageKey);
+    window.localStorage.removeItem(SessionLocalStorageKey);
   }
 
   private fetchingInfo: Promise<void> | undefined;
@@ -482,6 +485,16 @@ export default class RealmService extends Service {
     return realmsMeta;
   }
 
+  realmOfURL(url: URL) {
+    for (const realm of this.realms.keys()) {
+      let realmURL = new URL(realm);
+      if (new RealmPaths(realmURL).inRealm(url)) {
+        return new URL(realmURL);
+      }
+    }
+    return undefined;
+  }
+
   @cached
   get defaultWritableRealm(): { path: string; info: RealmInfo } | null {
     let maybePersonalRealm = `${this.realmServer.url.href}${this.matrixService.userName}/personal/`;
@@ -638,7 +651,6 @@ export default class RealmService extends Service {
 }
 
 export const tokenRefreshPeriodSec = 5 * 60; // 5 minutes
-export const sessionLocalStorageKey = 'boxel-session';
 
 export function claimsFromRawToken(rawToken: string): JWTPayload {
   let [_header, payload] = rawToken.split('.');
@@ -647,7 +659,7 @@ export function claimsFromRawToken(rawToken: string): JWTPayload {
 
 let SessionStorage = {
   getAll(): Record<string, string> | undefined {
-    let sessionsString = window.localStorage.getItem(sessionLocalStorageKey);
+    let sessionsString = window.localStorage.getItem(SessionLocalStorageKey);
     if (sessionsString) {
       return JSON.parse(sessionsString);
     }
@@ -655,12 +667,12 @@ let SessionStorage = {
   },
   persist(realmURL: string, token: string | undefined) {
     let sessionStr =
-      window.localStorage.getItem(sessionLocalStorageKey) ?? '{}';
+      window.localStorage.getItem(SessionLocalStorageKey) ?? '{}';
     let session = JSON.parse(sessionStr);
     if (session[realmURL] !== token) {
       session[realmURL] = token;
       window.localStorage.setItem(
-        sessionLocalStorageKey,
+        SessionLocalStorageKey,
         JSON.stringify(session),
       );
     }
diff --git a/packages/host/app/utils/local-storage-keys.ts b/packages/host/app/utils/local-storage-keys.ts
new file mode 100644
index 0000000000..da1969e8ab
--- /dev/null
+++ b/packages/host/app/utils/local-storage-keys.ts
@@ -0,0 +1,4 @@
+export const CurrentRoomIdPersistenceKey = 'aiPanelCurrentRoomId';
+export const NewSessionIdPersistenceKey = 'aiPanelNewSessionId';
+export const CodeModePanelWidths = 'code-mode-panel-widths';
+export const SessionLocalStorageKey = 'boxel-session';
diff --git a/packages/host/config/schema/1733196359718_schema.sql b/packages/host/config/schema/1733196359718_schema.sql
deleted file mode 100644
index 04238f9494..0000000000
--- a/packages/host/config/schema/1733196359718_schema.sql
+++ /dev/null
@@ -1,50 +0,0 @@
--- This is auto-generated by packages/realm-server/scripts/convert-to-sqlite.ts
--- Please don't directly modify this file
-
- CREATE TABLE IF NOT EXISTS boxel_index (
-   url TEXT NOT NULL,
-   file_alias TEXT NOT NULL,
-   type TEXT NOT NULL,
-   realm_version INTEGER NOT NULL,
-   realm_url TEXT NOT NULL,
-   pristine_doc BLOB,
-   search_doc BLOB,
-   error_doc BLOB,
-   deps BLOB,
-   types BLOB,
-   isolated_html TEXT,
-   indexed_at,
-   is_deleted BOOLEAN,
-   source TEXT,
-   transpiled_code TEXT,
-   last_modified,
-   embedded_html BLOB,
-   atom_html TEXT,
-   fitted_html BLOB,
-   display_names BLOB,
-   resource_created_at,
-   PRIMARY KEY ( url, realm_version, realm_url, type ) 
-);
-
- CREATE TABLE IF NOT EXISTS realm_meta (
-   realm_url TEXT NOT NULL,
-   realm_version INTEGER NOT NULL,
-   value BLOB NOT NULL,
-   indexed_at,
-   PRIMARY KEY ( realm_url, realm_version ) 
-);
-
- CREATE TABLE IF NOT EXISTS realm_user_permissions (
-   realm_url TEXT NOT NULL,
-   username TEXT NOT NULL,
-   read BOOLEAN NOT NULL,
-   write BOOLEAN NOT NULL,
-   realm_owner BOOLEAN DEFAULT false NOT NULL,
-   PRIMARY KEY ( realm_url, username ) 
-);
-
- CREATE TABLE IF NOT EXISTS realm_versions (
-   realm_url TEXT NOT NULL,
-   current_version INTEGER NOT NULL,
-   PRIMARY KEY ( realm_url ) 
-);
\ No newline at end of file
diff --git a/packages/host/config/schema/1733253128046_schema.sql b/packages/host/config/schema/1733393646040_schema.sql
similarity index 100%
rename from packages/host/config/schema/1733253128046_schema.sql
rename to packages/host/config/schema/1733393646040_schema.sql
diff --git a/packages/host/tests/acceptance/code-submode-test.ts b/packages/host/tests/acceptance/code-submode-test.ts
index 83d78a0114..7a85d9bc1b 100644
--- a/packages/host/tests/acceptance/code-submode-test.ts
+++ b/packages/host/tests/acceptance/code-submode-test.ts
@@ -1461,6 +1461,69 @@ module('Acceptance | code submode tests', function (_hooks) {
       assert.ok(content.includes(`${testRealmURL}Country/united-states`));
     });
 
+    test<TestContextWithSSE>('monaco editor live updates when index changes', async function (assert) {
+      let expectedEvents = [
+        {
+          type: 'index',
+          data: {
+            type: 'incremental-index-initiation',
+            realmURL: testRealmURL,
+            updatedFile: `${testRealmURL}Person/fadhlan`,
+          },
+        },
+        {
+          type: 'index',
+          data: {
+            type: 'incremental',
+            invalidations: [`${testRealmURL}Person/fadhlan`],
+          },
+        },
+      ];
+      await visitOperatorMode({
+        stacks: [
+          [
+            {
+              id: `${testRealmURL}Person/fadhlan`,
+              format: 'isolated',
+            },
+          ],
+        ],
+        submode: 'code',
+        codePath: `${testRealmURL}Person/fadhlan.json`,
+      });
+      await waitForCodeEditor();
+      await waitUntil(() => getMonacoContent().includes('Fadhlan'));
+      await this.expectEvents({
+        assert,
+        realm,
+        expectedEvents,
+        callback: async () => {
+          await realm.write(
+            'Person/fadhlan.json',
+            JSON.stringify({
+              data: {
+                type: 'card',
+                attributes: {
+                  firstName: 'FadhlanXXX',
+                },
+                meta: {
+                  adoptsFrom: {
+                    module: '../person',
+                    name: 'Person',
+                  },
+                },
+              },
+            } as LooseSingleCardDocument),
+          );
+        },
+      });
+      await waitUntil(() => getMonacoContent().includes('FadhlanXXX'));
+      assert.true(
+        getMonacoContent().includes('FadhlanXXX'),
+        'monaco editor updated from index event',
+      );
+    });
+
     test<TestContextWithSSE>('card preview live updates when index changes', async function (assert) {
       let expectedEvents = [
         {
@@ -1527,6 +1590,95 @@ module('Acceptance | code submode tests', function (_hooks) {
         .includesText('FadhlanXXX');
     });
 
+    test<TestContextWithSSE>('card preview live updates with error', async function (assert) {
+      let expectedEvents = [
+        {
+          type: 'index',
+          data: {
+            type: 'incremental-index-initiation',
+            realmURL: testRealmURL,
+            updatedFile: `${testRealmURL}Person/fadhlan`,
+          },
+        },
+        {
+          type: 'index',
+          data: {
+            type: 'incremental',
+            invalidations: [`${testRealmURL}Person/fadhlan`],
+          },
+        },
+      ];
+      await visitOperatorMode({
+        submode: 'code',
+        codePath: `${testRealmURL}Person/fadhlan.json`,
+      });
+      await waitFor('[data-test-card-resource-loaded]');
+      assert
+        .dom('[data-test-card-error]')
+        .doesNotExist('card error state is not displayed');
+      await this.expectEvents({
+        assert,
+        realm,
+        expectedEvents,
+        callback: async () => {
+          await realm.write(
+            'Person/fadhlan.json',
+            JSON.stringify({
+              data: {
+                type: 'card',
+                relationships: {
+                  'friends.0': {
+                    links: { self: './missing' },
+                  },
+                },
+                meta: {
+                  adoptsFrom: {
+                    module: '../person',
+                    name: 'Person',
+                  },
+                },
+              },
+            } as LooseSingleCardDocument),
+          );
+        },
+      });
+      await waitFor('[data-test-card-error]');
+      assert
+        .dom('[data-test-card-error]')
+        .exists('card error state is displayed');
+
+      await this.expectEvents({
+        assert,
+        realm,
+        expectedEvents,
+        callback: async () => {
+          await realm.write(
+            'Person/fadhlan.json',
+            JSON.stringify({
+              data: {
+                type: 'card',
+                relationships: {
+                  'friends.0': {
+                    links: { self: null },
+                  },
+                },
+                meta: {
+                  adoptsFrom: {
+                    module: '../person',
+                    name: 'Person',
+                  },
+                },
+              },
+            } as LooseSingleCardDocument),
+          );
+        },
+      });
+      await waitFor('[data-test-card-error]', { count: 0 });
+      assert
+        .dom('[data-test-card-error]')
+        .doesNotExist('card error state is not displayed');
+    });
+
     test('card-catalog does not offer to "create new card" when editing linked fields in code mode', async function (assert) {
       await visitOperatorMode({
         submode: 'code',
diff --git a/packages/host/tests/acceptance/code-submode/create-file-test.gts b/packages/host/tests/acceptance/code-submode/create-file-test.gts
index aa44391d62..9302905cc3 100644
--- a/packages/host/tests/acceptance/code-submode/create-file-test.gts
+++ b/packages/host/tests/acceptance/code-submode/create-file-test.gts
@@ -273,8 +273,8 @@ module('Acceptance | code submode | create-file tests', function (hooks) {
     test('filename is auto-populated from display name', async function (assert) {
       await visitOperatorMode();
       await openNewFileModal('Card Definition');
-      await fillIn('[data-test-display-name-field]', 'Très test card 😀');
-      assert.dom('[data-test-file-name-field]').hasValue('tres_test_card');
+      await fillIn('[data-test-display-name-field]', `Très test's card 😀`);
+      assert.dom('[data-test-file-name-field]').hasValue('tres-tests-card');
     });
 
     test('filename stops auto-populating after user edits it', async function (assert) {
diff --git a/packages/host/tests/acceptance/commands-test.gts b/packages/host/tests/acceptance/commands-test.gts
index a4d8502630..308b234b90 100644
--- a/packages/host/tests/acceptance/commands-test.gts
+++ b/packages/host/tests/acceptance/commands-test.gts
@@ -16,6 +16,7 @@ import { GridContainer } from '@cardstack/boxel-ui/components';
 
 import { baseRealm, Command } from '@cardstack/runtime-common';
 
+import CreateAIAssistantRoomCommand from '@cardstack/host/commands/create-ai-assistant-room';
 import PatchCardCommand from '@cardstack/host/commands/patch-card';
 import SaveCardCommand from '@cardstack/host/commands/save-card';
 import ShowCardCommand from '@cardstack/host/commands/show-card';
@@ -135,20 +136,24 @@ module('Acceptance | Commands tests', function (hooks) {
           participants: input.participants,
         });
         let saveCardCommand = new SaveCardCommand(this.commandContext);
-        const SaveCardInput = await saveCardCommand.getInputType();
-        await saveCardCommand.execute(
-          new SaveCardInput({
-            card: meeting,
-            realm: testRealmURL,
-          }),
-        );
+        await saveCardCommand.execute({
+          card: meeting,
+          realm: testRealmURL,
+        });
 
         // Mutate and save again
         let patchCardCommand = new PatchCardCommand(this.commandContext, {
           cardType: Meeting,
         });
 
+        let createAIAssistantRoomCommand = new CreateAIAssistantRoomCommand(
+          this.commandContext,
+        );
+        let { roomId } = await createAIAssistantRoomCommand.execute({
+          name: 'AI Assistant Room',
+        });
         await this.commandContext.sendAiAssistantMessage({
+          roomId,
           prompt: `Change the topic of the meeting to "${input.topic}"`,
           attachedCards: [meeting],
           commands: [{ command: patchCardCommand, autoExecute: true }],
@@ -157,13 +162,9 @@ module('Acceptance | Commands tests', function (hooks) {
         await patchCardCommand.waitForNextCompletion();
 
         let showCardCommand = new ShowCardCommand(this.commandContext);
-        const ShowCardInput = await showCardCommand.getInputType();
-        await showCardCommand.execute(
-          new ShowCardInput({
-            cardToShow: meeting,
-            placement: 'addToStack',
-          }),
-        );
+        await showCardCommand.execute({
+          cardToShow: meeting,
+        });
 
         return undefined;
       }
@@ -201,14 +202,23 @@ module('Acceptance | Commands tests', function (hooks) {
       });
 
       static isolated = class Isolated extends Component<typeof this> {
-        runSwitchToCodeModeCommandViaAiAssistant = (autoExecute: boolean) => {
+        runSwitchToCodeModeCommandViaAiAssistant = async (
+          autoExecute: boolean,
+        ) => {
           let commandContext = this.args.context?.commandContext;
           if (!commandContext) {
             console.error('No command context found');
             return;
           }
+          let createAIAssistantRoomCommand = new CreateAIAssistantRoomCommand(
+            commandContext,
+          );
+          let { roomId } = await createAIAssistantRoomCommand.execute({
+            name: 'AI Assistant Room',
+          });
           let switchSubmodeCommand = new SwitchSubmodeCommand(commandContext);
           commandContext.sendAiAssistantMessage({
+            roomId,
             prompt: 'Switch to code mode',
             commands: [{ command: switchSubmodeCommand, autoExecute }],
           });
@@ -224,12 +234,10 @@ module('Acceptance | Commands tests', function (hooks) {
             undefined,
           );
           setOwner(scheduleMeeting, getOwner(this)!);
-          await scheduleMeeting.execute(
-            new ScheduleMeetingInput({
-              topic: 'Meeting with Hassan',
-              participants: [this.args.model],
-            }),
-          );
+          await scheduleMeeting.execute({
+            topic: 'Meeting with Hassan',
+            participants: [this.args.model as Person],
+          });
         };
         runDelayCommandViaAiAssistant = async () => {
           let commandContext = this.args.context?.commandContext;
diff --git a/packages/host/tests/acceptance/interact-submode-test.gts b/packages/host/tests/acceptance/interact-submode-test.gts
index 8a6f599b2b..a8aaf89002 100644
--- a/packages/host/tests/acceptance/interact-submode-test.gts
+++ b/packages/host/tests/acceptance/interact-submode-test.gts
@@ -1692,6 +1692,111 @@ module('Acceptance | interact submode tests', function (hooks) {
         .dom('[data-test-operator-mode-stack="0"] [data-test-person]')
         .hasText('FadhlanXXX');
     });
+
+    test<TestContextWithSSE>('stack item live updates with error', async function (assert) {
+      assert.expect(7);
+      let expectedEvents = [
+        {
+          type: 'index',
+          data: {
+            type: 'incremental-index-initiation',
+            realmURL: testRealmURL,
+            updatedFile: `${testRealmURL}Person/fadhlan`,
+          },
+        },
+        {
+          type: 'index',
+          data: {
+            type: 'incremental',
+            invalidations: [`${testRealmURL}Person/fadhlan`],
+          },
+        },
+      ];
+      await visitOperatorMode({
+        stacks: [
+          [
+            {
+              id: `${testRealmURL}Person/fadhlan`,
+              format: 'isolated',
+            },
+          ],
+        ],
+      });
+      assert
+        .dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`)
+        .exists('card is displayed');
+      assert
+        .dom(
+          `[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-error]`,
+        )
+        .doesNotExist('card error state is NOT displayed');
+
+      await this.expectEvents({
+        assert,
+        realm,
+        expectedEvents,
+        callback: async () => {
+          await realm.write(
+            'Person/fadhlan.json',
+            JSON.stringify({
+              data: {
+                type: 'card',
+                relationships: {
+                  pet: {
+                    links: { self: './missing' },
+                  },
+                },
+                meta: {
+                  adoptsFrom: {
+                    module: '../person',
+                    name: 'Person',
+                  },
+                },
+              },
+            } as LooseSingleCardDocument),
+          );
+        },
+      });
+
+      assert
+        .dom(
+          `[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-error]`,
+        )
+        .exists('card error state is displayed');
+
+      await this.expectEvents({
+        assert,
+        realm,
+        expectedEvents,
+        callback: async () => {
+          await realm.write(
+            'Person/fadhlan.json',
+            JSON.stringify({
+              data: {
+                type: 'card',
+                relationships: {
+                  pet: { links: { self: null } },
+                },
+                meta: {
+                  adoptsFrom: {
+                    module: '../person',
+                    name: 'Person',
+                  },
+                },
+              },
+            } as LooseSingleCardDocument),
+          );
+        },
+      });
+      assert
+        .dom(`[data-test-stack-card="${testRealmURL}Person/fadhlan"]`)
+        .exists('card is displayed');
+      assert
+        .dom(
+          `[data-test-stack-card="${testRealmURL}Person/fadhlan"] [data-test-card-error]`,
+        )
+        .doesNotExist('card error state is NOT displayed');
+    });
   });
 
   module('workspace index card', function () {
diff --git a/packages/host/tests/acceptance/operator-mode-acceptance-test.gts b/packages/host/tests/acceptance/operator-mode-acceptance-test.gts
index e01cae71c6..77632caf32 100644
--- a/packages/host/tests/acceptance/operator-mode-acceptance-test.gts
+++ b/packages/host/tests/acceptance/operator-mode-acceptance-test.gts
@@ -22,10 +22,9 @@ import {
 } from '@cardstack/runtime-common';
 
 import { Submodes } from '@cardstack/host/components/submode-switcher';
-import {
-  tokenRefreshPeriodSec,
-  sessionLocalStorageKey,
-} from '@cardstack/host/services/realm';
+import { tokenRefreshPeriodSec } from '@cardstack/host/services/realm';
+
+import { SessionLocalStorageKey } from '@cardstack/host/utils/local-storage-keys';
 
 import {
   percySnapshot,
@@ -808,14 +807,14 @@ module('Acceptance | operator mode tests', function (hooks) {
     test('realm session refreshes within 5 minute window of expiration', async function (assert) {
       await visit('/');
 
-      let originalToken = window.localStorage.getItem(sessionLocalStorageKey);
+      let originalToken = window.localStorage.getItem(SessionLocalStorageKey);
       await waitUntil(
         () =>
-          window.localStorage.getItem(sessionLocalStorageKey) !== originalToken,
+          window.localStorage.getItem(SessionLocalStorageKey) !== originalToken,
         { timeout: refreshInSec * 3 * 1000 },
       );
 
-      let newToken = window.localStorage.getItem(sessionLocalStorageKey);
+      let newToken = window.localStorage.getItem(SessionLocalStorageKey);
       assert.ok(newToken, 'new session token obtained');
       assert.notEqual(
         originalToken,
diff --git a/packages/host/tests/cards/person.gts b/packages/host/tests/cards/person.gts
index 5966d1a1c5..371ba1d60b 100644
--- a/packages/host/tests/cards/person.gts
+++ b/packages/host/tests/cards/person.gts
@@ -1,5 +1,6 @@
 import { on } from '@ember/modifier';
 
+import CreateAIAssistantRoomCommand from '@cardstack/boxel-host/commands/create-ai-assistant-room';
 import SwitchSubmodeCommand from '@cardstack/boxel-host/commands/switch-submode';
 
 import {
@@ -30,14 +31,21 @@ export class Person extends CardDef {
   @field description = contains(StringCard, { computeVia: () => 'Person' });
 
   static isolated = class Isolated extends Component<typeof this> {
-    runSwitchToCodeModeCommandViaAiAssistant = () => {
+    runSwitchToCodeModeCommandViaAiAssistant = async () => {
       let commandContext = this.args.context?.commandContext;
       if (!commandContext) {
         console.error('No command context found');
         return;
       }
+      let createAIAssistantRoomCommand = new CreateAIAssistantRoomCommand(
+        commandContext,
+      );
+      let { roomId } = await createAIAssistantRoomCommand.execute({
+        name: 'AI Assistant Room',
+      });
       let switchSubmodeCommand = new SwitchSubmodeCommand(commandContext);
       commandContext.sendAiAssistantMessage({
+        roomId,
         prompt: 'Switch to code mode',
         commands: [{ command: switchSubmodeCommand, autoExecute: true }],
       });
diff --git a/packages/host/tests/helpers/index.gts b/packages/host/tests/helpers/index.gts
index 3ef7de4e01..c4c41fa264 100644
--- a/packages/host/tests/helpers/index.gts
+++ b/packages/host/tests/helpers/index.gts
@@ -40,6 +40,8 @@ import CardPrerender from '@cardstack/host/components/card-prerender';
 import ENV from '@cardstack/host/config/environment';
 import SQLiteAdapter from '@cardstack/host/lib/sqlite-adapter';
 
+import { testOnlyResetLiveCardState } from '@cardstack/host/resources/card-resource';
+
 import type CardService from '@cardstack/host/services/card-service';
 import type { CardSaveSubscriber } from '@cardstack/host/services/card-service';
 
@@ -293,6 +295,7 @@ export function setupServerSentEvents(hooks: NestedHooks) {
   hooks.beforeEach<TestContextWithSSE>(function () {
     this.subscribers = [];
     let self = this;
+    testOnlyResetLiveCardState();
 
     class MockMessageService extends Service {
       register() {
diff --git a/packages/host/tests/integration/commands/commands-calling-test.gts b/packages/host/tests/integration/commands/commands-calling-test.gts
new file mode 100644
index 0000000000..066b13486e
--- /dev/null
+++ b/packages/host/tests/integration/commands/commands-calling-test.gts
@@ -0,0 +1,191 @@
+import { getOwner } from '@ember/owner';
+import { RenderingTestContext } from '@ember/test-helpers';
+
+import { module, test } from 'qunit';
+
+import { Command, CommandContext } from '@cardstack/runtime-common';
+
+import type CommandService from '@cardstack/host/services/command-service';
+
+import RealmService from '@cardstack/host/services/realm';
+
+import { lookupService, testRealmURL, testRealmInfo } from '../../helpers';
+import {
+  CardDef,
+  StringField,
+  contains,
+  field,
+  setupBaseRealm,
+} from '../../helpers/base-realm';
+import { setupRenderingTest } from '../../helpers/setup';
+
+class StubRealmService extends RealmService {
+  get defaultReadableRealm() {
+    return {
+      path: testRealmURL,
+      info: testRealmInfo,
+    };
+  }
+}
+
+module('Integration | commands | commands-calling', function (hooks) {
+  setupRenderingTest(hooks);
+  setupBaseRealm(hooks);
+  let commandContext: CommandContext;
+
+  hooks.beforeEach(function (this: RenderingTestContext) {
+    getOwner(this)!.register('service:realm', StubRealmService);
+
+    let commandService = lookupService<CommandService>('command-service');
+    commandContext = commandService.commandContext;
+  });
+
+  test('can be called with a card as input', async function (assert) {
+    class CommandInput extends CardDef {
+      @field inputField1 = contains(StringField);
+      @field inputField2 = contains(StringField);
+    }
+    class CommandOutput extends CardDef {
+      @field outputField = contains(StringField);
+    }
+
+    class ExampleCommand extends Command<CommandInput, CommandOutput> {
+      inputType = CommandInput;
+
+      async getInputType() {
+        return CommandInput;
+      }
+
+      async run(input: CommandInput) {
+        return new CommandOutput({
+          outputField: `Hello ${input.inputField1}${input.inputField2}`,
+        });
+      }
+    }
+    let exampleCommand = new ExampleCommand(commandContext);
+
+    const InputType = await exampleCommand.getInputType();
+    let input = new InputType({
+      inputField1: 'World',
+      inputField2: '!',
+    });
+    let output = await exampleCommand.execute(input);
+    assert.strictEqual(output.outputField, 'Hello World!');
+  });
+
+  test('can be called with plain object as input', async function (assert) {
+    class CommandInput extends CardDef {
+      @field inputField1 = contains(StringField);
+      @field inputField2 = contains(StringField);
+    }
+    class CommandOutput extends CardDef {
+      @field outputField = contains(StringField);
+    }
+
+    class ExampleCommand extends Command<CommandInput, CommandOutput> {
+      inputType = CommandInput;
+
+      async getInputType() {
+        return CommandInput;
+      }
+
+      async run(input: CommandInput) {
+        return new CommandOutput({
+          outputField: `Hello ${input.inputField1}${input.inputField2}`,
+        });
+      }
+    }
+    let exampleCommand = new ExampleCommand(commandContext);
+    let output = await exampleCommand.execute({
+      inputField1: 'World',
+      inputField2: '!',
+    });
+    assert.strictEqual(output.outputField, 'Hello World!');
+  });
+
+  test('can call a command with just some of the fields', async function (assert) {
+    class CommandInput extends CardDef {
+      @field inputField1 = contains(StringField);
+      @field inputField2 = contains(StringField);
+    }
+    class CommandOutput extends CardDef {
+      @field outputField = contains(StringField);
+    }
+
+    class ExampleCommand extends Command<CommandInput, CommandOutput> {
+      inputType = CommandInput;
+
+      async getInputType() {
+        return CommandInput;
+      }
+
+      async run(input: CommandInput) {
+        return new CommandOutput({
+          outputField: `Hello ${input.inputField1}${input.inputField2}`,
+        });
+      }
+    }
+    let exampleCommand = new ExampleCommand(commandContext);
+
+    let output = await exampleCommand.execute({
+      inputField1: 'World',
+    });
+    assert.strictEqual(output.outputField, 'Hello Worldundefined');
+  });
+
+  test('CardDef fields are optional', async function (assert) {
+    class CommandInput extends CardDef {
+      @field inputField1 = contains(StringField);
+      @field inputField2 = contains(StringField);
+    }
+    class CommandOutput extends CardDef {
+      @field outputField = contains(StringField);
+    }
+
+    class ExampleCommand extends Command<CommandInput, CommandOutput> {
+      inputType = CommandInput;
+
+      async getInputType() {
+        return CommandInput;
+      }
+
+      async run(input: CommandInput) {
+        return new CommandOutput({
+          outputField: `Hello ${input.inputField1}${input.inputField2}`,
+        });
+      }
+    }
+    let exampleCommand = new ExampleCommand(commandContext);
+
+    let output = await exampleCommand.execute({
+      inputField1: 'World',
+      inputField2: '!',
+      title: 'test',
+    });
+    assert.strictEqual(output.outputField, 'Hello World!');
+  });
+
+  test('Commands work without taking input', async function (assert) {
+    class CommandOutput extends CardDef {
+      @field outputField = contains(StringField);
+    }
+
+    class ExampleCommand extends Command<undefined, CommandOutput> {
+      inputType = undefined;
+
+      async getInputType() {
+        return undefined;
+      }
+
+      async run() {
+        return new CommandOutput({
+          outputField: 'Hello',
+        });
+      }
+    }
+    let exampleCommand = new ExampleCommand(commandContext);
+
+    let output = await exampleCommand.execute(undefined);
+    assert.strictEqual(output.outputField, 'Hello');
+  });
+});
diff --git a/packages/host/tests/integration/commands/switch-submode-test.gts b/packages/host/tests/integration/commands/switch-submode-test.gts
index 2c5e089898..09dc489c16 100644
--- a/packages/host/tests/integration/commands/switch-submode-test.gts
+++ b/packages/host/tests/integration/commands/switch-submode-test.gts
@@ -56,12 +56,10 @@ module('Integration | commands | switch-submode', function (hooks) {
     let switchSubmodeCommand = new SwitchSubmodeCommand(
       commandService.commandContext,
     );
-    const InputType = await switchSubmodeCommand.getInputType();
-    let input = new InputType({
+    assert.strictEqual(operatorModeStateService.state?.submode, 'interact');
+    await switchSubmodeCommand.execute({
       submode: 'code',
     });
-    assert.strictEqual(operatorModeStateService.state?.submode, 'interact');
-    await switchSubmodeCommand.execute(input);
     assert.strictEqual(operatorModeStateService.state?.submode, 'code');
   });
 });
diff --git a/packages/host/tests/integration/commands/write-text-file-test.gts b/packages/host/tests/integration/commands/write-text-file-test.gts
index a01cb31719..df14b2597b 100644
--- a/packages/host/tests/integration/commands/write-text-file-test.gts
+++ b/packages/host/tests/integration/commands/write-text-file-test.gts
@@ -56,13 +56,11 @@ module('Integration | commands | write-text-file', function (hooks) {
     let writeTextFileCommand = new WriteTextFileCommand(
       commandService.commandContext,
     );
-    const InputType = await writeTextFileCommand.getInputType();
-    let input = new InputType({
+    await writeTextFileCommand.execute({
       path: 'test.txt',
       content: 'Hello!',
       realm: testRealmURL,
     });
-    await writeTextFileCommand.execute(input);
     let response = await fetch(new URL('test.txt', testRealmURL));
     let content = await response.text();
     assert.strictEqual(content, 'Hello!');
@@ -73,21 +71,17 @@ module('Integration | commands | write-text-file', function (hooks) {
     let writeTextFileCommand = new WriteTextFileCommand(
       commandService.commandContext,
     );
-    const InputType = await writeTextFileCommand.getInputType();
-
-    let firstContents = new InputType({
+    await writeTextFileCommand.execute({
       path: 'test.txt',
       content: 'Hello!',
       realm: testRealmURL,
     });
-    await writeTextFileCommand.execute(firstContents);
-    let secondContents = new InputType({
-      path: 'test.txt',
-      content: 'Hello again!',
-      realm: testRealmURL,
-    });
     try {
-      await writeTextFileCommand.execute(secondContents);
+      await writeTextFileCommand.execute({
+        path: 'test.txt',
+        content: 'Hello again!',
+        realm: testRealmURL,
+      });
       assert.notOk(true, 'Should have thrown an error');
     } catch (error: any) {
       assert.ok(
@@ -105,21 +99,17 @@ module('Integration | commands | write-text-file', function (hooks) {
     let writeTextFileCommand = new WriteTextFileCommand(
       commandService.commandContext,
     );
-    const InputType = await writeTextFileCommand.getInputType();
-
-    let firstContents = new InputType({
+    await writeTextFileCommand.execute({
       path: 'test.txt',
       content: 'Hello!',
       realm: testRealmURL,
     });
-    await writeTextFileCommand.execute(firstContents);
-    let secondContents = new InputType({
+    await writeTextFileCommand.execute({
       path: 'test.txt',
       content: 'Hello again!',
       realm: testRealmURL,
       overwrite: true,
     });
-    await writeTextFileCommand.execute(secondContents);
     let response = await fetch(new URL('test.txt', testRealmURL));
     let content = await response.text();
     assert.strictEqual(content, 'Hello again!');
diff --git a/packages/host/tests/integration/components/ai-assistant-panel-test.gts b/packages/host/tests/integration/components/ai-assistant-panel-test.gts
index b5d1572d0a..820ae97187 100644
--- a/packages/host/tests/integration/components/ai-assistant-panel-test.gts
+++ b/packages/host/tests/integration/components/ai-assistant-panel-test.gts
@@ -16,13 +16,14 @@ import { module, test } from 'qunit';
 import { baseRealm } from '@cardstack/runtime-common';
 import { Loader } from '@cardstack/runtime-common/loader';
 
-import { currentRoomIdPersistenceKey } from '@cardstack/host/components/ai-assistant/panel';
 import CardPrerender from '@cardstack/host/components/card-prerender';
 import OperatorMode from '@cardstack/host/components/operator-mode/container';
 
 import MatrixService from '@cardstack/host/services/matrix-service';
 import OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
 
+import { CurrentRoomIdPersistenceKey } from '@cardstack/host/utils/local-storage-keys';
+
 import type { CommandResultEvent } from 'https://cardstack.com/base/matrix-event';
 
 import {
@@ -970,41 +971,56 @@ module('Integration | ai-assistant-panel', function (hooks) {
     await percySnapshot(assert);
   });
 
-  test('it can handle an error during room creation', async function (assert) {
-    await setCardInOperatorModeState();
-    await renderComponent(
-      class TestDriver extends GlimmerComponent {
-        <template>
-          <OperatorMode @onClose={{noop}} />
-          <CardPrerender />
-          <div class='invisible' data-test-throw-room-error />
-          <style scoped>
-            .invisible {
-              display: none;
-            }
-          </style>
-        </template>
-      },
-    );
+  module('suspending global error hook', (hooks) => {
+    let tmp: any;
+    let uncaughtException: any;
+    hooks.before(() => {
+      tmp = QUnit.onUncaughtException;
+      QUnit.onUncaughtException = (err) => {
+        uncaughtException = err;
+      };
+    });
 
-    await waitFor('[data-test-open-ai-assistant]');
-    await click('[data-test-open-ai-assistant]');
-    await waitFor('[data-test-new-session]');
-    assert.dom('[data-test-room-error]').exists();
-    assert.dom('[data-test-room]').doesNotExist();
-    assert.dom('[data-test-past-sessions-button]').isDisabled();
-    await percySnapshot(
-      'Integration | ai-assistant-panel | it can handle an error during room creation | error state',
-    );
+    hooks.after(() => {
+      QUnit.onUncaughtException = tmp;
+    });
+    test('it can handle an error during room creation', async function (assert) {
+      await setCardInOperatorModeState();
+      await renderComponent(
+        class TestDriver extends GlimmerComponent {
+          <template>
+            <OperatorMode @onClose={{noop}} />
+            <CardPrerender />
+            <div class='invisible' data-test-throw-room-error />
+            <style scoped>
+              .invisible {
+                display: none;
+              }
+            </style>
+          </template>
+        },
+      );
 
-    document.querySelector('[data-test-throw-room-error]')?.remove();
-    await click('[data-test-room-error] > button');
-    await waitFor('[data-test-room]');
-    assert.dom('[data-test-room-error]').doesNotExist();
-    assert.dom('[data-test-past-sessions-button]').isEnabled();
-    await percySnapshot(
-      'Integration | ai-assistant-panel | it can handle an error during room creation | new room state',
-    );
+      await waitFor('[data-test-open-ai-assistant]');
+      await click('[data-test-open-ai-assistant]');
+      await waitFor('[data-test-new-session]');
+      assert.dom('[data-test-room-error]').exists();
+      assert.dom('[data-test-room]').doesNotExist();
+      assert.dom('[data-test-past-sessions-button]').isDisabled();
+      assert.strictEqual(uncaughtException.message, 'Intentional error thrown');
+      await percySnapshot(
+        'Integration | ai-assistant-panel | it can handle an error during room creation | error state',
+      );
+
+      document.querySelector('[data-test-throw-room-error]')?.remove();
+      await click('[data-test-room-error] > button');
+      await waitFor('[data-test-room]');
+      assert.dom('[data-test-room-error]').doesNotExist();
+      assert.dom('[data-test-past-sessions-button]').isEnabled();
+      await percySnapshot(
+        'Integration | ai-assistant-panel | it can handle an error during room creation | new room state',
+      );
+    });
   });
 
   test('when opening ai panel it opens the most recent room', async function (assert) {
@@ -1047,7 +1063,7 @@ module('Integration | ai-assistant-panel', function (hooks) {
 
       await click('[data-test-close-ai-assistant]');
       window.localStorage.setItem(
-        currentRoomIdPersistenceKey,
+        CurrentRoomIdPersistenceKey,
         "room-id-that-doesn't-exist-and-should-not-break-the-implementation",
       );
       await click('[data-test-open-ai-assistant]');
@@ -1058,7 +1074,7 @@ module('Integration | ai-assistant-panel', function (hooks) {
           "test room 2 is the most recently created room and it's opened initially",
         );
     } finally {
-      window.localStorage.removeItem(currentRoomIdPersistenceKey); // Cleanup
+      window.localStorage.removeItem(CurrentRoomIdPersistenceKey); // Cleanup
     }
   });
 
@@ -1184,9 +1200,12 @@ module('Integration | ai-assistant-panel', function (hooks) {
     assert.dom('[data-test-ai-bot-retry-button]').exists();
     await percySnapshot(assert);
 
-    await click('[data-test-ai-bot-retry-button]');
+    click('[data-test-ai-bot-retry-button]');
+    await waitFor('[data-test-ai-assistant-message].is-pending');
     assert.dom('[data-test-ai-assistant-message]').exists({ count: 1 });
     assert.dom('[data-test-ai-assistant-message]').hasNoClass('is-error');
+    await settled();
+    assert.dom('[data-test-ai-assistant-message]').hasClass('is-error');
   });
 
   test('it does not display the streaming indicator when ai bot sends an option', async function (assert) {
@@ -2172,8 +2191,8 @@ module('Integration | ai-assistant-panel', function (hooks) {
   });
 
   test('it can copy search results card to workspace', async function (assert) {
-    const id = `${testRealmURL}Person/fadhlan.json`;
-    const roomId = await renderAiAssistantPanel(id);
+    const id = `${testRealmURL}Person/fadhlan`;
+    const roomId = await renderAiAssistantPanel(`${id}.json`);
     const toolArgs = {
       description: 'Search for Person cards',
       attributes: {
@@ -2247,8 +2266,8 @@ module('Integration | ai-assistant-panel', function (hooks) {
   });
 
   test('it can copy search results card to workspace (no cards in stack)', async function (assert) {
-    const id = `${testRealmURL}Person/fadhlan.json`;
-    const roomId = await renderAiAssistantPanel(id);
+    const id = `${testRealmURL}Person/fadhlan`;
+    const roomId = await renderAiAssistantPanel(`${id}.json`);
     const toolArgs = {
       description: 'Search for Person cards',
       attributes: {
diff --git a/packages/host/tests/integration/components/ai-module-creation-test.gts b/packages/host/tests/integration/components/ai-module-creation-test.gts
index d3a64878d5..9019071652 100644
--- a/packages/host/tests/integration/components/ai-module-creation-test.gts
+++ b/packages/host/tests/integration/components/ai-module-creation-test.gts
@@ -2,7 +2,7 @@ import Service from '@ember/service';
 import { waitFor, click, findAll } from '@ember/test-helpers';
 import GlimmerComponent from '@glimmer/component';
 
-import { module, test } from 'qunit';
+import { module, skip } from 'qunit';
 
 import { baseRealm, Loader, type Realm } from '@cardstack/runtime-common';
 
@@ -114,7 +114,8 @@ module('Integration | create app module via ai-assistant', function (hooks) {
     return maybeInstance;
   }
 
-  test('it can create a module using a tool call', async function (assert) {
+  // This doesn’t work when the generator is in experiments instead of catalog
+  skip('it can create a module using a tool call', async function (assert) {
     let { realm } = await setupIntegrationTestRealm({
       loader,
       contents: {
@@ -163,7 +164,7 @@ module('Integration | create app module via ai-assistant', function (hooks) {
     await click('[data-test-generate-app]');
     await click('[data-test-past-sessions-button]');
     let newRoomButton = findAll('[data-test-enter-room]').filter((el) =>
-      el.textContent?.includes('AI Assistant'),
+      el.textContent?.includes('AI Assistant Room'),
     )[0];
 
     assert.ok(newRoomButton, 'new room button exists');
@@ -173,21 +174,25 @@ module('Integration | create app module via ai-assistant', function (hooks) {
     await click(`[data-test-enter-room="${roomId}"]`);
 
     assert
-      .dom(`[data-test-room-name="AI Assistant"] [data-test-message-idx="0"]`)
+      .dom(
+        `[data-test-room-name="AI Assistant Room"] [data-test-message-idx="0"]`,
+      )
       .containsText('Generate code');
     let events = getRoomEvents(roomId);
     let lastEvContent = events[events.length - 1].content as CardMessageContent;
     assert.strictEqual(
       lastEvContent.body,
       'Generate code for the application given the product requirements, you do not need to strictly follow the schema if it does not seem appropriate for the application.',
+      'Event content is correct',
     );
     assert.strictEqual(
       getRoomState(roomId, 'com.cardstack.boxel.room.skills').enabledEventIds
         .length,
-      2,
+      1,
+      'Only added skill is present',
     );
     let skillEventId = getRoomState(roomId, 'com.cardstack.boxel.room.skills')
-      .enabledEventIds[1];
+      .enabledEventIds[0];
     let skillEventData = JSON.parse(
       (
         events.find((e) => e.event_id === skillEventId)
diff --git a/packages/host/tests/integration/realm-indexing-and-querying-test.gts b/packages/host/tests/integration/realm-indexing-and-querying-test.gts
index b8e1f2f8ae..3039834d8c 100644
--- a/packages/host/tests/integration/realm-indexing-and-querying-test.gts
+++ b/packages/host/tests/integration/realm-indexing-and-querying-test.gts
@@ -3482,6 +3482,7 @@ module(`Integration | realm indexing and querying`, function (hooks) {
         'https://cardstack.com/base/string',
         'https://cardstack.com/base/text-input-validator',
         'https://cardstack.com/base/watched-array',
+        'https://packages/@cardstack/boxel-host/commands/create-ai-assistant-room',
         'https://packages/@cardstack/boxel-host/commands/switch-submode',
         'https://packages/@cardstack/boxel-ui/components',
         'https://packages/@cardstack/boxel-ui/helpers',
diff --git a/packages/host/tests/unit/lib/mutex-test.ts b/packages/host/tests/unit/lib/mutex-test.ts
new file mode 100644
index 0000000000..7ae24691d8
--- /dev/null
+++ b/packages/host/tests/unit/lib/mutex-test.ts
@@ -0,0 +1,101 @@
+import { waitUntil } from '@ember/test-helpers';
+
+import { module, test } from 'qunit';
+
+import Mutex from '@cardstack/host/lib/mutex';
+
+module('Unit | Utility | Mutex', function () {
+  test('it prevents concurrent access', async function (assert) {
+    let mutex = new Mutex();
+    let lock1Acquired = false;
+    let lock2Acquired = false;
+
+    await mutex.dispatch(async () => {
+      lock1Acquired = true;
+      assert.true(lock1Acquired, 'First lock should be acquired');
+
+      mutex.dispatch(async () => {
+        lock2Acquired = true;
+      });
+
+      assert.false(lock2Acquired, 'Second lock should not be acquired yet');
+    });
+
+    await waitUntil(() => lock2Acquired);
+    assert.true(
+      lock2Acquired,
+      'Second lock should be acquired after first is released',
+    );
+  });
+
+  test('it handles multiple locks and unlocks', async function (assert) {
+    let mutex = new Mutex();
+    let lock1Acquired = false;
+    let lock2Acquired = false;
+    let lock3Acquired = false;
+    let completeDispatch1 = false;
+    let completeDispatch2 = false;
+    let completeDispatch3 = false;
+
+    mutex.dispatch(async () => {
+      lock1Acquired = true;
+      assert.true(lock1Acquired, 'First lock should be acquired');
+
+      mutex.dispatch(async () => {
+        lock2Acquired = true;
+        await waitUntil(() => completeDispatch2);
+      });
+
+      mutex.dispatch(async () => {
+        lock3Acquired = true;
+        await waitUntil(() => completeDispatch3);
+      });
+
+      await waitUntil(() => completeDispatch1);
+    });
+
+    assert.false(lock2Acquired, 'Second lock should not be acquired yet');
+    assert.false(lock3Acquired, 'Third lock should not be acquired yet');
+
+    completeDispatch1 = true;
+
+    await waitUntil(() => lock2Acquired);
+
+    assert.true(
+      lock2Acquired,
+      'Second lock should be acquired after first is released',
+    );
+    assert.false(lock3Acquired, 'Third lock should not be acquired yet');
+
+    completeDispatch2 = true;
+
+    await waitUntil(() => lock3Acquired);
+    assert.true(
+      lock3Acquired,
+      'Third lock should be acquired after second is released',
+    );
+    completeDispatch3 = true;
+  });
+
+  test('it handles errors within the dispatch method', async function (assert) {
+    let mutex = new Mutex();
+    let lockAcquired = false;
+    let errorCaught: Error | undefined;
+
+    try {
+      await mutex.dispatch(async () => {
+        lockAcquired = true;
+        throw new Error('Test error');
+      });
+    } catch (e: any) {
+      errorCaught = e;
+    }
+
+    assert.true(lockAcquired, 'Lock should be acquired');
+    assert.strictEqual(
+      errorCaught?.message,
+      'Test error',
+      'Error should be caught',
+    );
+  });
+});
diff --git a/packages/postgres/migrations/1733393646040_add-matrix-registration-token-to-users.js b/packages/postgres/migrations/1733393646040_add-matrix-registration-token-to-users.js
new file mode 100644
index 0000000000..7746521537
--- /dev/null
+++ b/packages/postgres/migrations/1733393646040_add-matrix-registration-token-to-users.js
@@ -0,0 +1,15 @@
+/* eslint-disable camelcase */
+
+exports.shorthands = undefined;
+
+exports.up = (pgm) => {
+  pgm.addColumns('users', {
+    matrix_registration_token: {
+      type: 'varchar',
+    },
+  });
+};
+
+exports.down = (pgm) => {
+  pgm.dropColumns('users', ['matrix_registration_token']);
+};
diff --git a/packages/postgres/pg-adapter.ts b/packages/postgres/pg-adapter.ts
index 7780256ff2..819e9d238f 100644
--- a/packages/postgres/pg-adapter.ts
+++ b/packages/postgres/pg-adapter.ts
@@ -44,8 +44,6 @@ export class PgAdapter implements DBAdapter {
       password,
       port,
     });
-    // This is for testing purposes so that we can debug the DB
-    (globalThis as any).__dbAdapter = this;
   }
 
   get isClosed() {
diff --git a/packages/postgres/pg-queue.ts b/packages/postgres/pg-queue.ts
index 9ea6003fb9..c7bf0df876 100644
--- a/packages/postgres/pg-queue.ts
+++ b/packages/postgres/pg-queue.ts
@@ -106,15 +106,18 @@ class WorkLoop {
 
 export class PgQueuePublisher implements QueuePublisher {
   #isDestroyed = false;
+  #pgClient: PgAdapter;
 
   private pollInterval = 10000;
   private notifiers: Map<number, Deferred<any>> = new Map();
   private notificationRunner: WorkLoop | undefined;
 
-  constructor(private pgClient: PgAdapter) {}
+  constructor(pgClient: PgAdapter) {
+    this.#pgClient = pgClient;
+  }
 
-  private async query(expression: Expression) {
-    return await query(this.pgClient, expression);
+  async #query(expression: Expression) {
+    return await query(this.#pgClient, expression);
   }
 
   private addNotifier(id: number, n: Deferred<any>) {
@@ -124,7 +127,7 @@ export class PgQueuePublisher implements QueuePublisher {
         this.pollInterval,
       );
       this.notificationRunner.run(async (loop) => {
-        await this.pgClient.listen(
+        await this.#pgClient.listen(
           'jobs_finished',
           loop.wake.bind(loop),
           async () => {
@@ -143,7 +146,7 @@ export class PgQueuePublisher implements QueuePublisher {
     while (!loop.shuttingDown) {
       let waitingIds = [...this.notifiers.keys()];
       log.debug('jobs waiting for notification: %s', waitingIds);
-      let result = (await this.query([
+      let result = (await this.#query([
         `SELECT id, status, result FROM jobs WHERE status != 'unfulfilled' AND (`,
         ...any(waitingIds.map((id) => [`id=`, param(id)])),
         `)`,
@@ -186,7 +189,7 @@ export class PgQueuePublisher implements QueuePublisher {
       JobsTable,
       'args' | 'job_type' | 'concurrency_group' | 'timeout'
     >);
-    let [{ id: jobId }] = (await this.query([
+    let [{ id: jobId }] = (await this.#query([
       'INSERT INTO JOBS',
       ...addExplicitParens(separatedByCommas(nameExpressions)),
       'VALUES',
@@ -194,7 +197,7 @@ export class PgQueuePublisher implements QueuePublisher {
       'RETURNING id',
     ] as Expression)) as Pick<JobsTable, 'id'>[];
     log.debug(`%s created, notify jobs`, jobId);
-    await this.query([`NOTIFY jobs`]);
+    await this.#query([`NOTIFY jobs`]);
     let notifier = new Deferred<T>();
     let job = new Job(jobId, notifier);
     this.addNotifier(jobId, notifier);
diff --git a/packages/realm-server/handlers/handle-create-user.ts b/packages/realm-server/handlers/handle-create-user.ts
new file mode 100644
index 0000000000..547e3d90f5
--- /dev/null
+++ b/packages/realm-server/handlers/handle-create-user.ts
@@ -0,0 +1,45 @@
+import { upsertUser } from '@cardstack/runtime-common';
+import Koa from 'koa';
+import {
+  fetchRequestFromContext,
+  sendResponseForBadRequest,
+  sendResponseForSystemError,
+  setContextResponse,
+} from '../middleware';
+import { RealmServerTokenClaim } from '../utils/jwt';
+import { CreateRoutesArgs } from '../routes';
+
+export default function handleCreateUserRequest({
+  dbAdapter,
+}: CreateRoutesArgs): (ctxt: Koa.Context, next: Koa.Next) => Promise<void> {
+  return async function (ctxt: Koa.Context, _next: Koa.Next) {
+    let token = ctxt.state.token as RealmServerTokenClaim;
+    if (!token) {
+      await sendResponseForSystemError(
+        ctxt,
+        'token is required to create user',
+      );
+      return;
+    }
+
+    let { user: matrixUserId } = token;
+
+    let request = await fetchRequestFromContext(ctxt);
+    let body = await request.text();
+    let json: Record<string, any>;
+    try {
+      json = JSON.parse(body);
+    } catch (e) {
+      await sendResponseForBadRequest(
+        ctxt,
+        'Request body is not valid JSON-API - invalid JSON',
+      );
+      return;
+    }
+
+    let registrationToken = json.data.attributes.registrationToken;
+
+    await upsertUser(dbAdapter, matrixUserId, registrationToken);
+    await setContextResponse(ctxt, new Response('ok'));
+  };
+}
diff --git a/packages/realm-server/handlers/handle-stripe-webhook.ts b/packages/realm-server/handlers/handle-stripe-webhook.ts
index af6a8bd914..778f81d2b0 100644
--- a/packages/realm-server/handlers/handle-stripe-webhook.ts
+++ b/packages/realm-server/handlers/handle-stripe-webhook.ts
@@ -2,7 +2,6 @@ import Koa from 'koa';
 import { fetchRequestFromContext, setContextResponse } from '../middleware';
 import stripeWebhookHandler from '@cardstack/billing/stripe-webhook-handlers';
 import { CreateRoutesArgs } from '../routes';
-import { getUserByStripeId } from '@cardstack/billing/billing-queries';
 
 export default function handleStripeWebhookRequest({
   dbAdapter,
@@ -11,16 +10,11 @@ export default function handleStripeWebhookRequest({
   return async function (ctxt: Koa.Context, _next: Koa.Next) {
     let request = await fetchRequestFromContext(ctxt);
 
-    let response = await stripeWebhookHandler(
+    let response = await stripeWebhookHandler({
       dbAdapter,
       request,
-      async (stripeUserId: string) => {
-        let user = await getUserByStripeId(dbAdapter, stripeUserId);
-        if (user) {
-          await sendEvent(user.matrixUserId, 'billing-notification');
-        }
-      },
-    );
+      sendMatrixEvent: sendEvent,
+    });
     await setContextResponse(ctxt, response);
   };
 }
diff --git a/packages/realm-server/routes.ts b/packages/realm-server/routes.ts
index f62c2f8699..137662cd6e 100644
--- a/packages/realm-server/routes.ts
+++ b/packages/realm-server/routes.ts
@@ -9,6 +9,7 @@ import handleStripeWebhookRequest from './handlers/handle-stripe-webhook';
 import { healthCheck, jwtMiddleware, livenessCheck } from './middleware';
 import Koa from 'koa';
 import handleStripeLinksRequest from './handlers/handle-stripe-links';
+import handleCreateUserRequest from './handlers/handle-create-user';
 
 export type CreateRoutesArgs = {
   dbAdapter: DBAdapter;
@@ -51,6 +52,11 @@ export function createRoutes(args: CreateRoutesArgs) {
     jwtMiddleware(args.secretSeed),
     handleFetchUserRequest(args),
   );
+  router.post(
+    '/_user',
+    jwtMiddleware(args.secretSeed),
+    handleCreateUserRequest(args),
+  );
   router.get('/_stripe-links', handleStripeLinksRequest());
 
   return router.routes();
diff --git a/packages/realm-server/server.ts b/packages/realm-server/server.ts
index 97e292d355..69c90919fc 100644
--- a/packages/realm-server/server.ts
+++ b/packages/realm-server/server.ts
@@ -11,7 +11,6 @@ import {
   type DBAdapter,
   type QueuePublisher,
   type RealmPermissions,
-  upsertUser,
 } from '@cardstack/runtime-common';
 import { ensureDirSync, writeJSONSync, readdirSync, copySync } from 'fs-extra';
 import { setupCloseHandler } from './node-realm';
@@ -330,11 +329,6 @@ export class RealmServer {
       [ownerUserId]: DEFAULT_PERMISSIONS,
     });
 
-    // It's not desirable to have user insertion entangled with realm creation–
-    // In the future we could refactor this to handle user creation in a separate
-    // endpoint
-    await upsertUser(this.dbAdapter, ownerUserId);
-
     writeJSONSync(join(realmPath, '.realm.json'), {
       name,
       ...(iconURL ? { iconURL } : {}),
diff --git a/packages/realm-server/tests/billing-test.ts b/packages/realm-server/tests/billing-test.ts
index daa19fbc99..d5cb1da83a 100644
--- a/packages/realm-server/tests/billing-test.ts
+++ b/packages/realm-server/tests/billing-test.ts
@@ -350,8 +350,8 @@ module('billing', function (hooks) {
 
         subscriptionCycle = subscriptionCycles[0];
 
-        // User received 5000 credits from the creator plan, plus 500 from the plan allowance they had left from the free plan
-        assert.strictEqual(creditsBalance, 5500);
+        // User received 5000 credits from the creator plan, but the 500 credits from the plan allowance they had left from the free plan were expired
+        assert.strictEqual(creditsBalance, 5000);
 
         // User spent 2000 credits from the plan allowance
         await addToCreditsLedger(dbAdapter, {
@@ -361,11 +361,11 @@ module('billing', function (hooks) {
           subscriptionCycleId: subscriptionCycle.id,
         });
 
-        // Assert that the user now has 3500 credits left
+        // Assert that the user now has 3000 credits left
         creditsBalance = await sumUpCreditsLedger(dbAdapter, {
           userId: user.id,
         });
-        assert.strictEqual(creditsBalance, 3500);
+        assert.strictEqual(creditsBalance, 3000);
 
         // Now, user upgrades to power user plan ($49 monthly) in the middle of the month:
 
diff --git a/packages/realm-server/tests/helpers/index.ts b/packages/realm-server/tests/helpers/index.ts
index 5dfc8b7749..084dd8411d 100644
--- a/packages/realm-server/tests/helpers/index.ts
+++ b/packages/realm-server/tests/helpers/index.ts
@@ -461,7 +461,7 @@ export async function insertPlan(
   return {
     id: result[0].id,
     name: result[0].name,
-    monthlyPrice: result[0].monthly_price,
+    monthlyPrice: parseFloat(result[0].monthly_price as string),
     creditsIncluded: result[0].credits_included,
     stripePlanId: result[0].stripe_plan_id,
   } as Plan;
diff --git a/packages/realm-server/tests/realm-server-test.ts b/packages/realm-server/tests/realm-server-test.ts
index 09be21e2a4..c893a55061 100644
--- a/packages/realm-server/tests/realm-server-test.ts
+++ b/packages/realm-server/tests/realm-server-test.ts
@@ -71,6 +71,7 @@ import {
   addToCreditsLedger,
   insertSubscriptionCycle,
   insertSubscription,
+  getUserByMatrixUserId,
 } from '@cardstack/billing/billing-queries';
 import {
   createJWT as createRealmServerJWT,
@@ -2761,7 +2762,7 @@ module('Realm Server', function (hooks) {
       john: ['read', 'write'],
     });
 
-    test('user is not found', async function (assert) {
+    test('responds with 404 if user is not found', async function (assert) {
       let response = await request
         .get(`/_user`)
         .set('Accept', 'application/vnd.api+json')
@@ -2772,7 +2773,7 @@ module('Realm Server', function (hooks) {
       assert.strictEqual(response.status, 404, 'HTTP 404 status');
     });
 
-    test('subscription is not found', async function (assert) {
+    test('responds with 200 and null subscription values if user is not subscribed', async function (assert) {
       let user = await insertUser(
         dbAdapter,
         'user@test',
@@ -2812,7 +2813,7 @@ module('Realm Server', function (hooks) {
       );
     });
 
-    test('user subscibes to a plan and has extra credit', async function (assert) {
+    test('response has correct values for subscribed user who has some extra credits', async function (assert) {
       let user = await insertUser(
         dbAdapter,
         'user@test',
@@ -3677,6 +3678,52 @@ module('Realm Server', function (hooks) {
       assert.strictEqual(response.status, 404, 'HTTP 404 status');
     });
 
+    test('can create a user', async function (assert) {
+      let ownerUserId = '@mango:boxel.ai';
+      let response = await request2
+        .post('/_user')
+        .set('Accept', 'application/json')
+        .set('Content-Type', 'application/json')
+        .set(
+          'Authorization',
+          `Bearer ${createRealmServerJWT(
+            { user: ownerUserId, sessionRoom: 'session-room-test' },
+            secretSeed,
+          )}`,
+        )
+        .send({
+          data: {
+            type: 'user',
+            attributes: {
+              registrationToken: 'reg_token_123',
+            },
+          },
+        });
+
+      assert.strictEqual(response.status, 200, 'HTTP 200 status');
+      assert.strictEqual(response.text, 'ok', 'response body is correct');
+
+      let user = await getUserByMatrixUserId(dbAdapter, ownerUserId);
+      if (!user) {
+        throw new Error('user does not exist in db');
+      }
+      assert.strictEqual(
+        user.matrixUserId,
+        ownerUserId,
+        'matrix user ID is correct',
+      );
+      assert.strictEqual(
+        user.matrixRegistrationToken,
+        'reg_token_123',
+        'registration token is correct',
+      );
+    });
+
+    test('can not create a user without a jwt', async function (assert) {
+      let response = await request2.post('/_user').send({});
+      assert.strictEqual(response.status, 401, 'HTTP 401 status');
+    });
+
     test('can dynamically load a card definition from own realm', async function (assert) {
       let ref = {
         module: `${testRealmHref}person`,
@@ -4291,6 +4338,7 @@ module('Realm Server', function (hooks) {
             cancellation_details: {
               reason: 'payment_failure',
             },
+            customer: 'cus_123',
           },
         },
       };
@@ -4441,6 +4489,7 @@ module('Realm Server', function (hooks) {
             cancellation_details: {
               reason: 'payment_failure',
             },
+            customer: 'cus_123',
           },
         },
       };
@@ -4568,7 +4617,7 @@ module('Realm Server', function (hooks) {
             id: 'cs_test_1234567890',
             object: 'checkout.session',
             client_reference_id: encodeWebSafeBase64(userId),
-            customer: 'cus_123',
+            customer: undefined,
             metadata: {},
           },
         },
diff --git a/packages/runtime-common/commands.ts b/packages/runtime-common/commands.ts
index 2a8cdd3e64..600206d4ff 100644
--- a/packages/runtime-common/commands.ts
+++ b/packages/runtime-common/commands.ts
@@ -1,7 +1,7 @@
+import { isCardDef } from './code-ref';
 import { Deferred } from './deferred';
 import type * as CardAPI from 'https://cardstack.com/base/card-api';
 import { CardDef } from 'https://cardstack.com/base/card-api';
-import { SkillCard } from 'https://cardstack.com/base/skill-card';
 import {
   AttributesSchema,
   CardSchema,
@@ -10,11 +10,10 @@ import {
 
 export interface CommandContext {
   sendAiAssistantMessage: (params: {
-    roomId?: string; // if falsy we create a new room
+    roomId: string;
     show?: boolean; // if truthy, ensure the side panel to the room
     prompt: string;
     attachedCards?: CardDef[];
-    skillCards?: SkillCard[];
     commands?: { command: Command<any, any, any>; autoExecute: boolean }[];
   }) => Promise<{ roomId: string }>;
 }
@@ -51,7 +50,9 @@ export abstract class Command<
   CommandConfiguration extends any | undefined = undefined,
 > {
   // Is this actually type checking ?
-  abstract getInputType(): Promise<{ new (args: any): CardInputType }>; // TODO: can we do better than any here?
+  abstract getInputType(): Promise<
+    { new (args?: Partial<CardInputType>): CardInputType } | undefined
+  >; // TODO: can we do better than any here?
 
   invocations: CommandInvocation<CardInputType, CardResultType>[] = [];
 
@@ -66,20 +67,39 @@ export abstract class Command<
     protected readonly configuration?: CommandConfiguration | undefined, // we'd like this to be required *if* CommandConfiguration is defined, and allow the user to skip it when CommandConfiguration is undefined
   ) {}
 
-  async execute(input: CardInputType): Promise<CardResultType> {
+  async execute(
+    input: CardInputType extends CardDef | undefined
+      ? CardInputType | Partial<Omit<CardInputType, keyof CardDef>>
+      : never,
+  ): Promise<CardResultType> {
     // internal bookkeeping
     // todo: support for this.runTask being defined
     // runTask would be an ember task, run would just be a normal function
 
+    let inputCard: CardInputType;
+    if (input === undefined) {
+      inputCard = undefined as CardInputType;
+    } else if (isCardDef(input.constructor)) {
+      inputCard = input as CardInputType;
+    } else {
+      let InputType = await this.getInputType();
+      if (!InputType) {
+        throw new Error('Input provided but no input type found');
+      } else {
+        inputCard = new InputType(
+          input as Partial<CardInputType>,
+        ) as CardInputType;
+      }
+    }
     let invocation = new CommandInvocation<CardInputType, CardResultType>(
-      input,
+      inputCard,
     );
 
     this.invocations.push(invocation);
     this.nextCompletionDeferred.fulfill(invocation.promise);
 
     try {
-      let result = await this.run(input);
+      let result = await this.run(inputCard);
       invocation.fulfill(result);
       return result;
     } catch (error) {
diff --git a/packages/runtime-common/index-query-engine.ts b/packages/runtime-common/index-query-engine.ts
index 281e99eba8..f94e80aaa4 100644
--- a/packages/runtime-common/index-query-engine.ts
+++ b/packages/runtime-common/index-query-engine.ts
@@ -162,21 +162,24 @@ export function isValidPrerenderedHtmlFormat(
 }
 
 export class IndexQueryEngine {
-  constructor(private dbAdapter: DBAdapter) {}
+  #dbAdapter: DBAdapter;
+  constructor(dbAdapter: DBAdapter) {
+    this.#dbAdapter = dbAdapter;
+  }
 
-  private async query(expression: Expression) {
-    return await query(this.dbAdapter, expression, coerceTypes);
+  async #query(expression: Expression) {
+    return await query(this.#dbAdapter, expression, coerceTypes);
   }
 
-  private async queryCards(query: CardExpression, loader: Loader) {
-    return this.query(await this.makeExpression(query, loader));
+  async #queryCards(query: CardExpression, loader: Loader) {
+    return this.#query(await this.makeExpression(query, loader));
   }
 
   async getModule(
     url: URL,
     opts?: GetEntryOptions,
   ): Promise<IndexedModuleOrError | undefined> {
-    let rows = (await this.query([
+    let rows = (await this.#query([
       `SELECT i.*
        FROM boxel_index as i
        INNER JOIN realm_versions r ON i.realm_url = r.realm_url
@@ -234,7 +237,7 @@ export class IndexQueryEngine {
     url: URL,
     opts?: GetEntryOptions,
   ): Promise<InstanceOrError | undefined> {
-    let result = (await this.query([
+    let result = (await this.#query([
       `SELECT i.*, embedded_html, fitted_html`,
       `FROM boxel_index as i
        INNER JOIN realm_versions r ON i.realm_url = r.realm_url
@@ -393,8 +396,8 @@ export class IndexQueryEngine {
     ];
 
     let [results, totalResults] = await Promise.all([
-      this.queryCards(query, loader),
-      this.queryCards(queryCount, loader),
+      this.#queryCards(query, loader),
+      this.#queryCards(queryCount, loader),
     ]);
 
     return {
@@ -547,7 +550,7 @@ export class IndexQueryEngine {
   }
 
   async fetchCardTypeSummary(realmURL: URL): Promise<CardTypeSummary[]> {
-    let results = (await this.query([
+    let results = (await this.#query([
       `SELECT value
        FROM realm_meta rm
        INNER JOIN realm_versions rv
@@ -560,7 +563,7 @@ export class IndexQueryEngine {
   }
 
   private async fetchCurrentRealmVersion(realmURL: URL) {
-    let [{ current_version }] = (await this.query([
+    let [{ current_version }] = (await this.#query([
       'SELECT current_version FROM realm_versions WHERE realm_url =',
       param(realmURL.href),
     ])) as Pick<RealmVersionsTable, 'current_version'>[];
diff --git a/packages/runtime-common/index-writer.ts b/packages/runtime-common/index-writer.ts
index 9ff4aa6a82..cd0a378271 100644
--- a/packages/runtime-common/index-writer.ts
+++ b/packages/runtime-common/index-writer.ts
@@ -31,20 +31,23 @@ import {
 } from './index-structure';
 
 export class IndexWriter {
-  constructor(private dbAdapter: DBAdapter) {}
+  #dbAdapter: DBAdapter;
+  constructor(dbAdapter: DBAdapter) {
+    this.#dbAdapter = dbAdapter;
+  }
 
   async createBatch(realmURL: URL) {
-    let batch = new Batch(this.dbAdapter, realmURL);
+    let batch = new Batch(this.#dbAdapter, realmURL);
     await batch.ready;
     return batch;
   }
 
-  private query(expression: Expression) {
-    return query(this.dbAdapter, expression, coerceTypes);
+  #query(expression: Expression) {
+    return query(this.#dbAdapter, expression, coerceTypes);
   }
 
   async isNewIndex(realm: URL): Promise<boolean> {
-    let [row] = (await this.query([
+    let [row] = (await this.#query([
       'SELECT current_version FROM realm_versions WHERE realm_url =',
       param(realm.href),
     ])) as Pick<RealmVersionsTable, 'current_version'>[];
@@ -92,13 +95,15 @@ interface ModuleEntry {
 export class Batch {
   readonly ready: Promise<void>;
   #invalidations = new Set<string>();
+  #dbAdapter: DBAdapter;
   private isNewGeneration = false;
   private declare realmVersion: number;
 
   constructor(
-    private dbAdapter: DBAdapter,
+    dbAdapter: DBAdapter,
     private realmURL: URL, // this assumes that we only index cards in our own realm...
   ) {
+    this.#dbAdapter = dbAdapter;
     this.ready = this.setNextRealmVersion();
   }
 
@@ -114,7 +119,7 @@ export class Batch {
   }
 
   async getModifiedTimes(): Promise<LastModifiedTimes> {
-    let results = (await this.query([
+    let results = (await this.#query([
       `SELECT i.url, i.type, i.last_modified
        FROM boxel_index as i
        INNER JOIN realm_versions r ON i.realm_url = r.realm_url
@@ -215,7 +220,7 @@ export class Batch {
         .map(([column]) => column),
     });
 
-    await this.query([
+    await this.#query([
       ...upsert(
         'boxel_index',
         'boxel_index_pkey',
@@ -234,12 +239,12 @@ export class Batch {
     return { totalIndexEntries };
   }
 
-  private query(expression: Expression) {
-    return query(this.dbAdapter, expression, coerceTypes);
+  #query(expression: Expression) {
+    return query(this.#dbAdapter, expression, coerceTypes);
   }
 
   private async getProductionVersion(url: URL) {
-    let [entry] = (await this.query([
+    let [entry] = (await this.#query([
       `SELECT i.*`,
       `FROM boxel_index as i
        INNER JOIN realm_versions r ON i.realm_url = r.realm_url
@@ -273,7 +278,7 @@ export class Batch {
   }
 
   private async numberOfIndexEntries() {
-    let [{ total }] = (await this.query([
+    let [{ total }] = (await this.#query([
       `SELECT count(i.url) as total
        FROM boxel_index as i
        INNER JOIN realm_versions r ON i.realm_url = r.realm_url
@@ -289,7 +294,7 @@ export class Batch {
   }
 
   private async updateRealmMeta() {
-    let results = await this.query([
+    let results = await this.#query([
       `SELECT CAST(count(i.url) AS INTEGER) as total, i.display_names->>0 as display_name, i.types->>0 as code_ref
        FROM boxel_index as i
        INNER JOIN realm_versions r ON i.realm_url = r.realm_url
@@ -320,7 +325,7 @@ export class Batch {
       },
     );
 
-    await this.query([
+    await this.#query([
       ...upsert(
         'realm_meta',
         'realm_meta_pkey',
@@ -335,7 +340,7 @@ export class Batch {
       realm_url: this.realmURL.href,
       current_version: this.realmVersion,
     } as RealmVersionsTable);
-    await this.query([
+    await this.#query([
       ...upsert(
         'realm_versions',
         'realm_versions_pkey',
@@ -346,7 +351,7 @@ export class Batch {
   }
 
   private async pruneObsoleteEntries() {
-    await this.query([
+    await this.#query([
       `DELETE FROM realm_meta`,
       'WHERE',
       ...every([
@@ -356,7 +361,7 @@ export class Batch {
     ] as Expression);
 
     if (this.isNewGeneration) {
-      await this.query([
+      await this.#query([
         `DELETE FROM boxel_index`,
         'WHERE',
         ...every([
@@ -368,7 +373,7 @@ export class Batch {
   }
 
   private async setNextRealmVersion() {
-    let [row] = (await this.query([
+    let [row] = (await this.#query([
       'SELECT current_version FROM realm_versions WHERE realm_url =',
       param(this.realmURL.href),
     ])) as Pick<RealmVersionsTable, 'current_version'>[];
@@ -378,7 +383,7 @@ export class Batch {
         current_version: 0,
       } as RealmVersionsTable);
       // Make the batch updates live
-      await this.query([
+      await this.#query([
         ...upsert(
           'realm_versions',
           'realm_versions_pkey',
@@ -428,7 +433,7 @@ export class Batch {
     );
 
     let names = flattenDeep(columns);
-    await this.query([
+    await this.#query([
       'INSERT INTO boxel_index',
       ...addExplicitParens(separatedByCommas(columns)),
       'VALUES',
@@ -462,7 +467,7 @@ export class Batch {
       // the API for using cursors cannot be serialized over the postMessage
       // boundary. so we use a handcrafted paging approach that leverages
       // realm_version to keep the result set stable across pages
-      rows = (await this.query([
+      rows = (await this.#query([
         'SELECT i.url, i.file_alias, i.type',
         'FROM boxel_index as i',
         'CROSS JOIN LATERAL jsonb_array_elements_text(i.deps) as deps_array_element',
diff --git a/packages/runtime-common/user-queries.ts b/packages/runtime-common/user-queries.ts
index 192c05fda0..eaef549f76 100644
--- a/packages/runtime-common/user-queries.ts
+++ b/packages/runtime-common/user-queries.ts
@@ -2,9 +2,14 @@ import { DBAdapter } from './db';
 
 import { query, asExpressions, upsert } from './expression';
 
-export async function upsertUser(dbAdapter: DBAdapter, matrixUserId: string) {
+export async function upsertUser(
+  dbAdapter: DBAdapter,
+  matrixUserId: string,
+  matrixRegistrationToken: string,
+) {
   let { valueExpressions, nameExpressions } = asExpressions({
     matrix_user_id: matrixUserId,
+    matrix_registration_token: matrixRegistrationToken,
   });
 
   await query(
diff --git a/packages/vscode-boxel-tools/package.json b/packages/vscode-boxel-tools/package.json
index 8f25f3cc10..97b457b98b 100644
--- a/packages/vscode-boxel-tools/package.json
+++ b/packages/vscode-boxel-tools/package.json
@@ -2,7 +2,7 @@
   "name": "boxel-tools",
   "displayName": "Boxel Tools",
   "description": "Access boxel realm data and code from your vscode workspace.",
-  "version": "0.0.23",
+  "version": "0.1.0",
   "publisher": "cardstack",
   "private": true,
   "license": "MIT",