diff --git a/QUICKSTART.md b/QUICKSTART.md
index faf6f794ca..48b7bad8c1 100644
--- a/QUICKSTART.md
+++ b/QUICKSTART.md
@@ -107,7 +107,5 @@ If you experience issues, you can start from scratch by running this command
 
 ```
 pnpm clear-caches
-rm -rf ./packages/matrix/synapse-data
-docker ps -a --format '{{.Names}}' | grep -E 'boxel-smtp|boxel-synapse|synapse-admin' | xargs -r docker stop
-docker ps -a --format '{{.Names}}' | grep -E 'boxel-smtp|boxel-synapse|synapse-admin' | xargs -r docker rm -v
+pnpm full-reset
 ```
diff --git a/packages/ai-bot/helpers.ts b/packages/ai-bot/helpers.ts
index 00d122cdad..6d6ad4dc9f 100644
--- a/packages/ai-bot/helpers.ts
+++ b/packages/ai-bot/helpers.ts
@@ -8,20 +8,22 @@ import type {
   MatrixEvent as DiscreteMatrixEvent,
   CardFragmentContent,
   CommandEvent,
-  CommandResultEvent,
-  ReactionEvent,
   Tool,
   SkillsConfigEvent,
+  CommandResultEvent,
 } from 'https://cardstack.com/base/matrix-event';
 import { MatrixEvent, type IRoomEvent } from 'matrix-js-sdk';
 import { ChatCompletionMessageToolCall } from 'openai/resources/chat/completions';
 import * as Sentry from '@sentry/node';
 import { logger } from '@cardstack/runtime-common';
+import {
+  APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
+  APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE,
+} from '../runtime-common/matrix-constants';
 import {
   APP_BOXEL_CARDFRAGMENT_MSGTYPE,
   APP_BOXEL_MESSAGE_MSGTYPE,
   APP_BOXEL_COMMAND_MSGTYPE,
-  APP_BOXEL_COMMAND_RESULT_MSGTYPE,
   APP_BOXEL_ROOM_SKILLS_EVENT_TYPE,
 } from '@cardstack/runtime-common/matrix-constants';
 
@@ -140,6 +142,16 @@ export function constructHistory(
       }
     }
     let event = { ...rawEvent } as DiscreteMatrixEvent;
+    if (
+      event.type === APP_BOXEL_COMMAND_RESULT_EVENT_TYPE &&
+      event.content.msgtype == APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE
+    ) {
+      let { cardEventId } = event.content.data;
+      event.content.data.card = serializedCardFromFragments(
+        cardEventId,
+        cardFragments,
+      );
+    }
     if (event.type !== 'm.room.message') {
       continue;
     }
@@ -358,48 +370,11 @@ export function getToolChoice(
   return 'auto';
 }
 
-export function isCommandResultEvent(
-  event: DiscreteMatrixEvent,
-): event is CommandResultEvent {
-  return (
-    event.type === 'm.room.message' &&
-    typeof event.content === 'object' &&
-    event.content.msgtype === APP_BOXEL_COMMAND_RESULT_MSGTYPE
-  );
-}
-
-export function isReactionEvent(
-  event: DiscreteMatrixEvent,
-): event is ReactionEvent {
-  return (
-    event.type === 'm.reaction' &&
-    event.content['m.relates_to'].rel_type === 'm.annotation'
-  );
-}
-
-function getReactionStatus(
-  commandEvent: DiscreteMatrixEvent,
-  history: DiscreteMatrixEvent[],
-) {
-  let maybeReactionEvent = history.find((e) => {
-    if (
-      isReactionEvent(e) &&
-      e.content['m.relates_to']?.event_id === commandEvent.event_id
-    ) {
-      return true;
-    }
-    return false;
-  });
-  return maybeReactionEvent && isReactionEvent(maybeReactionEvent)
-    ? maybeReactionEvent.content['m.relates_to'].key
-    : undefined;
-}
-
 function getCommandResult(
   commandEvent: CommandEvent,
   history: DiscreteMatrixEvent[],
 ) {
-  let maybeCommandResultEvent = history.find((e) => {
+  let commandResultEvent = history.find((e) => {
     if (
       isCommandResultEvent(e) &&
       e.content['m.relates_to']?.event_id === commandEvent.event_id
@@ -407,11 +382,8 @@ function getCommandResult(
       return true;
     }
     return false;
-  });
-  return maybeCommandResultEvent &&
-    isCommandResultEvent(maybeCommandResultEvent)
-    ? maybeCommandResultEvent.content.result
-    : undefined;
+  }) as CommandResultEvent | undefined;
+  return commandResultEvent;
 }
 
 function toToolCall(event: CommandEvent): ChatCompletionMessageToolCall {
@@ -429,21 +401,26 @@ function toPromptMessageWithToolResult(
   event: CommandEvent,
   history: DiscreteMatrixEvent[],
 ): OpenAIPromptMessage {
-  let commandResult = getCommandResult(event as CommandEvent, history);
+  let commandResult = getCommandResult(event, history);
+  let content = 'pending';
   if (commandResult) {
-    return {
-      role: 'tool',
-      content: commandResult,
-      tool_call_id: event.content.data.toolCall.id,
-    };
-  } else {
-    let reactionStatus = getReactionStatus(event, history);
-    return {
-      role: 'tool',
-      content: reactionStatus ?? 'pending',
-      tool_call_id: event.content.data.toolCall.id,
-    };
+    let status = commandResult.content['m.relates_to']?.key;
+    if (
+      commandResult.content.msgtype ===
+      APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE
+    ) {
+      content = `Command ${status}, with result card: ${JSON.stringify(
+        commandResult.content.data.card,
+      )}.\n`;
+    } else {
+      content = `Command ${status}.\n`;
+    }
   }
+  return {
+    role: 'tool',
+    content,
+    tool_call_id: event.content.data.toolCall.id,
+  };
 }
 
 export function getModifyPrompt(
@@ -570,24 +547,13 @@ export function cleanContent(content: string) {
   return content.trim();
 }
 
-export const isCommandReactionEvent = (event?: MatrixEvent) => {
-  if (event === undefined) {
-    return false;
-  }
-  let content = event.getContent();
-  return (
-    event.getType() === 'm.reaction' &&
-    content['m.relates_to']?.rel_type === 'm.annotation'
-  );
-};
-
-export const isCommandReactionStatusApplied = (event?: MatrixEvent) => {
+export const isCommandResultStatusApplied = (event?: MatrixEvent) => {
   if (event === undefined) {
     return false;
   }
-  let content = event.getContent();
   return (
-    isCommandReactionEvent(event) && content['m.relates_to']?.key === 'applied'
+    isCommandResultEvent(event.event as DiscreteMatrixEvent) &&
+    event.getContent()['m.relates_to']?.key === 'applied'
   );
 };
 
@@ -603,3 +569,15 @@ export function isCommandEvent(
     typeof event.content.data.toolCall === 'object'
   );
 }
+
+export function isCommandResultEvent(
+  event?: DiscreteMatrixEvent,
+): event is CommandResultEvent {
+  if (event === undefined) {
+    return false;
+  }
+  return (
+    event.type === APP_BOXEL_COMMAND_RESULT_EVENT_TYPE &&
+    event.content['m.relates_to']?.rel_type === 'm.annotation'
+  );
+}
diff --git a/packages/ai-bot/lib/set-title.ts b/packages/ai-bot/lib/set-title.ts
index e207a80f2d..61dac91c8d 100644
--- a/packages/ai-bot/lib/set-title.ts
+++ b/packages/ai-bot/lib/set-title.ts
@@ -1,18 +1,23 @@
-import { type MatrixEvent, type IEventRelation } from 'matrix-js-sdk';
+import {
+  type MatrixEvent,
+  type IEventRelation,
+  IRoomEvent,
+} from 'matrix-js-sdk';
 import OpenAI from 'openai';
 import {
   type OpenAIPromptMessage,
-  isCommandReactionStatusApplied,
+  isCommandResultStatusApplied,
   attachedCardsToMessage,
   isCommandEvent,
   getRelevantCards,
 } from '../helpers';
 import { MatrixClient } from './matrix';
 import type { MatrixEvent as DiscreteMatrixEvent } from 'https://cardstack.com/base/matrix-event';
+import { ChatCompletionMessageParam } from 'openai/resources';
 
 const SET_TITLE_SYSTEM_MESSAGE = `You are a chat titling system, you must read the conversation and return a suggested title of no more than six words.
-Do NOT say talk or discussion or discussing or chat or chatting, this is implied by the context. 
-The user can optionally apply 'patchCard' by sending data about fields to update. 
+Do NOT say talk or discussion or discussing or chat or chatting, this is implied by the context.
+The user can optionally apply 'patchCard' by sending data about fields to update.
 Explain the general actions and user intent. If 'patchCard' was used, express the title in an active sentence. Do NOT use the word "patch" in the title.`;
 
 export async function setTitle(
@@ -39,7 +44,7 @@ export async function setTitle(
   let result = await openai.chat.completions.create(
     {
       model: 'gpt-4o',
-      messages: startOfConversation,
+      messages: startOfConversation as ChatCompletionMessageParam[],
       stream: false,
     },
     {
@@ -120,7 +125,7 @@ export const getLatestCommandApplyMessage = (
   return [];
 };
 
-export const roomTitleAlreadySet = (rawEventLog: DiscreteMatrixEvent[]) => {
+export const roomTitleAlreadySet = (rawEventLog: IRoomEvent[]) => {
   return (
     rawEventLog.filter((event) => event.type === 'm.room.name').length > 1 ??
     false
@@ -128,7 +133,7 @@ export const roomTitleAlreadySet = (rawEventLog: DiscreteMatrixEvent[]) => {
 };
 
 const userAlreadyHasSentNMessages = (
-  rawEventLog: DiscreteMatrixEvent[],
+  rawEventLog: IRoomEvent[],
   botUserId: string,
   n = 5,
 ) => {
@@ -140,12 +145,12 @@ const userAlreadyHasSentNMessages = (
 };
 
 export function shouldSetRoomTitle(
-  rawEventLog: DiscreteMatrixEvent[],
+  rawEventLog: IRoomEvent[],
   aiBotUserId: string,
   event?: MatrixEvent,
 ) {
   return (
-    (isCommandReactionStatusApplied(event) ||
+    (isCommandResultStatusApplied(event) ||
       userAlreadyHasSentNMessages(rawEventLog, aiBotUserId)) &&
     !roomTitleAlreadySet(rawEventLog)
   );
diff --git a/packages/ai-bot/main.ts b/packages/ai-bot/main.ts
index 82dc5a5877..447e64d37e 100644
--- a/packages/ai-bot/main.ts
+++ b/packages/ai-bot/main.ts
@@ -11,7 +11,7 @@ import { logger, aiBotUsername } from '@cardstack/runtime-common';
 import {
   type PromptParts,
   constructHistory,
-  isCommandReactionStatusApplied,
+  isCommandResultStatusApplied,
   getPromptParts,
   extractCardFragmentsFromEvents,
 } from './helpers';
@@ -30,6 +30,8 @@ import * as Sentry from '@sentry/node';
 
 import { getAvailableCredits, saveUsageCost } from './lib/ai-billing';
 import { PgAdapter } from '@cardstack/postgres';
+import { ChatCompletionMessageParam } from 'openai/resources';
+import { OpenAIError } from 'openai/error';
 
 let log = logger('ai-bot');
 
@@ -69,12 +71,12 @@ class Assistant {
     if (prompt.tools.length === 0) {
       return this.openai.beta.chat.completions.stream({
         model: prompt.model,
-        messages: prompt.messages,
+        messages: prompt.messages as ChatCompletionMessageParam[],
       });
     } else {
       return this.openai.beta.chat.completions.stream({
         model: prompt.model,
-        messages: prompt.messages,
+        messages: prompt.messages as ChatCompletionMessageParam[],
         tools: prompt.tools,
         tool_choice: prompt.toolChoice,
       });
@@ -250,7 +252,7 @@ Common issues are:
           finalContent = await runner.finalContent();
           await responder.finalize(finalContent);
         } catch (error) {
-          await responder.onError(error);
+          await responder.onError(error as OpenAIError);
         } finally {
           if (generationId) {
             assistant.trackAiUsageCost(senderMatrixUserId, generationId);
@@ -278,7 +280,7 @@ Common issues are:
     if (!room) {
       return;
     }
-    if (!isCommandReactionStatusApplied(event)) {
+    if (!isCommandResultStatusApplied(event)) {
       return;
     }
     log.info(
diff --git a/packages/ai-bot/package.json b/packages/ai-bot/package.json
index 6f7adb5927..38ac39f742 100644
--- a/packages/ai-bot/package.json
+++ b/packages/ai-bot/package.json
@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@sinonjs/fake-timers": "^11.2.2",
+    "@types/qunit": "^2.19.12",
     "@types/sinonjs__fake-timers": "^8.1.5",
     "qunit": "^2.18.0"
   },
diff --git a/packages/ai-bot/tests/chat-titling-test.ts b/packages/ai-bot/tests/chat-titling-test.ts
index f395c62a6f..393f0d56e4 100644
--- a/packages/ai-bot/tests/chat-titling-test.ts
+++ b/packages/ai-bot/tests/chat-titling-test.ts
@@ -1,7 +1,12 @@
 import { module, test, assert } from 'qunit';
 import { shouldSetRoomTitle } from '../lib/set-title';
 import type { MatrixEvent as DiscreteMatrixEvent } from 'https://cardstack.com/base/matrix-event';
-import { APP_BOXEL_COMMAND_MSGTYPE } from '@cardstack/runtime-common/matrix-constants';
+import {
+  APP_BOXEL_COMMAND_MSGTYPE,
+  APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
+  APP_BOXEL_COMMAND_RESULT_WITH_NO_OUTPUT_MSGTYPE,
+} from '@cardstack/runtime-common/matrix-constants';
+import { IEvent, IRoomEvent, MatrixEvent } from 'matrix-js-sdk';
 
 module('shouldSetRoomTitle', () => {
   test('Do not set a title when there is no content', () => {
@@ -10,7 +15,7 @@ module('shouldSetRoomTitle', () => {
   });
 
   test('Do not set a title when there is little content', () => {
-    const eventLog: DiscreteMatrixEvent[] = [
+    const eventLog: IRoomEvent[] = [
       {
         type: 'm.room.message',
         event_id: '1',
@@ -33,7 +38,7 @@ module('shouldSetRoomTitle', () => {
   });
 
   test('Do not set a title when there are more than 5 messages but they are state/invites/etc', () => {
-    const eventLog: DiscreteMatrixEvent[] = [
+    const eventLog: IRoomEvent[] = [
       {
         type: 'm.room.message',
         event_id: '1',
@@ -78,7 +83,7 @@ module('shouldSetRoomTitle', () => {
         },
         sender: '@user:localhost',
         room_id: 'room1',
-        state_key: 'a',
+        state_key: '',
         unsigned: {
           age: 1000,
         },
@@ -90,7 +95,7 @@ module('shouldSetRoomTitle', () => {
         content: {},
         sender: '@user:localhost',
         room_id: 'room1',
-        state_key: 'b',
+        state_key: '',
         unsigned: {
           age: 1000,
         },
@@ -105,7 +110,7 @@ module('shouldSetRoomTitle', () => {
         },
         sender: '@user:localhost',
         room_id: 'room1',
-        state_key: 'c',
+        state_key: '',
         unsigned: {
           age: 1000,
         },
@@ -120,7 +125,7 @@ module('shouldSetRoomTitle', () => {
         },
         sender: '@user:localhost',
         room_id: 'room1',
-        state_key: 'd',
+        state_key: '',
         unsigned: {
           age: 1000,
         },
@@ -130,7 +135,7 @@ module('shouldSetRoomTitle', () => {
   });
 
   test('Do not set a title when there are under 5 user messages but more than 5 total messages', () => {
-    const eventLog: DiscreteMatrixEvent[] = [
+    const eventLog: IRoomEvent[] = [
       {
         type: 'm.room.message',
         event_id: '1',
@@ -239,7 +244,7 @@ module('shouldSetRoomTitle', () => {
   });
 
   test('Set a title when there are 5 or more user messages', () => {
-    const eventLog: DiscreteMatrixEvent[] = [
+    const eventLog: IRoomEvent[] = [
       {
         type: 'm.room.message',
         event_id: '1',
@@ -348,7 +353,7 @@ module('shouldSetRoomTitle', () => {
   });
 
   test('Title is not set if the bot has sent ONLY a command', () => {
-    const eventLog: DiscreteMatrixEvent[] = [
+    const eventLog: IRoomEvent[] = [
       {
         type: 'm.room.message',
         event_id: '1',
@@ -403,21 +408,18 @@ module('shouldSetRoomTitle', () => {
   });
 
   test('Set a title if the user applied a command', () => {
-    let patchReactionEvent = {
-      getContent() {
-        return {
-          'm.relates_to': {
-            event_id: '1',
-            key: 'applied',
-            rel_type: 'm.annotation',
-          },
-        };
-      },
-      getType() {
-        return 'm.reaction';
+    let patchCommandResultEvent: Partial<IEvent> = {
+      type: APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
+      content: {
+        'm.relates_to': {
+          event_id: '1',
+          key: 'applied',
+          rel_type: 'm.annotation',
+        },
+        msgtype: APP_BOXEL_COMMAND_RESULT_WITH_NO_OUTPUT_MSGTYPE,
       },
     };
-    const eventLog: DiscreteMatrixEvent[] = [
+    const eventLog: IRoomEvent[] = [
       {
         type: 'm.room.message',
         event_id: '1',
@@ -469,7 +471,11 @@ module('shouldSetRoomTitle', () => {
       },
     ];
     assert.true(
-      shouldSetRoomTitle(eventLog, '@aibot:localhost', patchReactionEvent),
+      shouldSetRoomTitle(
+        eventLog,
+        '@aibot:localhost',
+        new MatrixEvent(patchCommandResultEvent),
+      ),
     );
   });
 });
diff --git a/packages/ai-bot/tests/history-construction-test.ts b/packages/ai-bot/tests/history-construction-test.ts
index 1694a49a9d..afb7a10344 100644
--- a/packages/ai-bot/tests/history-construction-test.ts
+++ b/packages/ai-bot/tests/history-construction-test.ts
@@ -10,7 +10,7 @@ import {
   APP_BOXEL_MESSAGE_MSGTYPE,
 } from '@cardstack/runtime-common/matrix-constants';
 
-import { type IRoomEvent } from 'matrix-js-sdk';
+import { EventStatus, type IRoomEvent } from 'matrix-js-sdk';
 import type { MatrixEvent as DiscreteMatrixEvent } from 'https://cardstack.com/base/matrix-event';
 
 module('constructHistory', () => {
@@ -38,6 +38,7 @@ module('constructHistory', () => {
         unsigned: {
           age: 1000,
         },
+        status: EventStatus.SENT,
       },
       {
         type: 'm.room.join_rules',
@@ -50,6 +51,7 @@ module('constructHistory', () => {
         unsigned: {
           age: 1001,
         },
+        status: EventStatus.SENT,
       },
       {
         type: 'm.room.member',
@@ -65,6 +67,7 @@ module('constructHistory', () => {
         unsigned: {
           age: 1002,
         },
+        status: EventStatus.SENT,
       },
     ];
 
@@ -74,7 +77,7 @@ module('constructHistory', () => {
   });
 
   test('should return an array with a single message event when the input array contains only one message event', () => {
-    const eventlist: DiscreteMatrixEvent[] = [
+    const eventlist: IRoomEvent[] = [
       {
         type: 'm.room.message',
         event_id: '1',
@@ -100,7 +103,7 @@ module('constructHistory', () => {
   });
 
   test('should return an array with all message events when the input array contains multiple message events', () => {
-    const history: DiscreteMatrixEvent[] = [
+    const history: IRoomEvent[] = [
       {
         type: 'm.room.message',
         event_id: '1',
@@ -160,7 +163,7 @@ module('constructHistory', () => {
   });
 
   test('should return an array with all message events when the input array contains multiple events with the same origin_server_ts', () => {
-    const history: DiscreteMatrixEvent[] = [
+    const history: IRoomEvent[] = [
       {
         type: 'm.room.message',
         event_id: '1',
@@ -220,7 +223,7 @@ module('constructHistory', () => {
   });
 
   test('should return an array of DiscreteMatrixEvent objects with no duplicates based on event_id even when m.relates_to is present and include senders and origin_server_ts', () => {
-    const history: DiscreteMatrixEvent[] = [
+    const history: IRoomEvent[] = [
       // this event will _not_ replace event_id 2 since it's timestamp is before event_id 2
       {
         event_id: '1',
diff --git a/packages/ai-bot/tests/prompt-construction-test.ts b/packages/ai-bot/tests/prompt-construction-test.ts
index 5acda2222d..14621bd5ec 100644
--- a/packages/ai-bot/tests/prompt-construction-test.ts
+++ b/packages/ai-bot/tests/prompt-construction-test.ts
@@ -13,8 +13,9 @@ import {
 } from '../helpers';
 import {
   APP_BOXEL_MESSAGE_MSGTYPE,
-  APP_BOXEL_COMMAND_RESULT_MSGTYPE,
   APP_BOXEL_COMMAND_MSGTYPE,
+  APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
+  APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE,
 } from '@cardstack/runtime-common/matrix-constants';
 
 import type {
@@ -1309,7 +1310,6 @@ test('Return host result of tool call back to open ai', () => {
         age: 20470,
       },
       event_id: '$p_NQ4tvokzQrIkT24Wj08mdAxBBvmdLOz6ph7UQfMDw',
-      user_id: '@tintinthong:localhost',
       age: 20470,
     },
     {
@@ -1341,7 +1341,6 @@ test('Return host result of tool call back to open ai', () => {
         transaction_id: 'm1722242836705.8',
       },
       event_id: 'message-event-id-1',
-      user_id: '@aibot:localhost',
       age: 17305,
     },
     {
@@ -1458,7 +1457,6 @@ test('Return host result of tool call back to open ai', () => {
         age: 6614,
       },
       event_id: '$FO2XfB0xFiTpm5FmOUiWQqFh_DPQSr4zix41Vj3eqNc',
-      user_id: '@tintinthong:localhost',
       age: 6614,
     },
     {
@@ -1500,11 +1498,10 @@ test('Return host result of tool call back to open ai', () => {
         transaction_id: 'm1722242849075.10',
       },
       event_id: 'command-event-id-1',
-      user_id: '@ai-bot:localhost',
       age: 4938,
     },
     {
-      type: 'm.room.message',
+      type: APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
       room_id: 'room-id-1',
       sender: '@tintinthong:localhost',
       content: {
@@ -1513,19 +1510,43 @@ test('Return host result of tool call back to open ai', () => {
           rel_type: 'm.annotation',
           key: 'applied',
         },
-        body: 'Command Results from command event $H7dH0ZzG0W3M_1k_YRjnDOirWRthYvWq7TKmfAfhQqw',
-        formatted_body:
-          '<p>Command Results from command event $H7dH0ZzG0W3M_1k_YRjnDOirWRthYvWq7TKmfAfhQqw</p>\n',
-        msgtype: APP_BOXEL_COMMAND_RESULT_MSGTYPE,
-        result:
-          '[{"data":{"type":"card","id":"http://localhost:4201/drafts/Author/1","attributes":{"firstName":"Alice","lastName":"Enwunder","photo":null,"body":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.","description":null,"thumbnailURL":null},"meta":{"adoptsFrom":{"module":"../author","name":"Author"}}}}]',
+        msgtype: APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE,
+        data: {
+          card: JSON.stringify({
+            data: {
+              type: 'card',
+              attributes: {
+                title: 'Search Results',
+                description: 'Here are the search results',
+                results: [
+                  {
+                    data: {
+                      type: 'card',
+                      id: 'http://localhost:4201/drafts/Author/1',
+                      attributes: {
+                        firstName: 'Alice',
+                        lastName: 'Enwunder',
+                        photo: null,
+                        body: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+                        description: null,
+                        thumbnailURL: null,
+                      },
+                      meta: {
+                        adoptsFrom: { module: '../author', name: 'Author' },
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          }),
+        },
       },
       origin_server_ts: 1722242853988,
       unsigned: {
         age: 44,
       },
       event_id: 'command-result-id-1',
-      user_id: '@tintinthong:localhost',
       age: 44,
     },
   ];
@@ -1533,10 +1554,8 @@ test('Return host result of tool call back to open ai', () => {
   const result = getModifyPrompt(history, '@ai-bot:localhost', tools);
   assert.equal(result[5].role, 'tool');
   assert.equal(result[5].tool_call_id, 'tool-call-id-1');
-  assert.equal(
-    result[5].content,
-    '[{"data":{"type":"card","id":"http://localhost:4201/drafts/Author/1","attributes":{"firstName":"Alice","lastName":"Enwunder","photo":null,"body":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.","description":null,"thumbnailURL":null},"meta":{"adoptsFrom":{"module":"../author","name":"Author"}}}}]',
-  );
+  const expected = `Command applied, with result card: "{\\"data\\":{\\"type\\":\\"card\\",\\"attributes\\":{\\"title\\":\\"Search Results\\",\\"description\\":\\"Here are the search results\\",\\"results\\":[{\\"data\\":{\\"type\\":\\"card\\",\\"id\\":\\"http://localhost:4201/drafts/Author/1\\",\\"attributes\\":{\\"firstName\\":\\"Alice\\",\\"lastName\\":\\"Enwunder\\",\\"photo\\":null,\\"body\\":\\"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\\",\\"description\\":null,\\"thumbnailURL\\":null},\\"meta\\":{\\"adoptsFrom\\":{\\"module\\":\\"../author\\",\\"name\\":\\"Author\\"}}}}]}}}".\n`;
+  assert.equal(result[5].content, expected);
 });
 
 test('Tools remain available in prompt parts even when not in last message', () => {
diff --git a/packages/base/card-api.gts b/packages/base/card-api.gts
index 9295153dc1..9ada4e7726 100644
--- a/packages/base/card-api.gts
+++ b/packages/base/card-api.gts
@@ -1297,17 +1297,22 @@ class LinksToMany<FieldT extends CardDefConstructor>
           cachedInstance[isSavedInstance] = true;
           return cachedInstance;
         }
-        let resourceId = new URL(value.links.self, relativeTo).href;
+        let resourceId = new URL(
+          value.links.self,
+          !Array.isArray(doc.data) && 'id' in doc.data && doc.data.id
+            ? doc.data.id
+            : relativeTo,
+        ).href;
+        if (loadedValues && Array.isArray(loadedValues)) {
+          let loadedValue = loadedValues.find(
+            (v) => isCardOrField(v) && 'id' in v && v.id === resourceId,
+          );
+          if (loadedValue) {
+            return loadedValue;
+          }
+        }
         let resource = resourceFrom(doc, resourceId);
         if (!resource) {
-          if (loadedValues && Array.isArray(loadedValues)) {
-            let loadedValue = loadedValues.find(
-              (v) => isCardOrField(v) && 'id' in v && v.id === resourceId,
-            );
-            if (loadedValue) {
-              return loadedValue;
-            }
-          }
           return {
             type: 'not-loaded',
             reference: value.links.self,
diff --git a/packages/base/command.gts b/packages/base/command.gts
index 4972816c9e..8254fc996c 100644
--- a/packages/base/command.gts
+++ b/packages/base/command.gts
@@ -1,56 +1,34 @@
 import {
   CardDef,
   Component,
-  FieldDef,
   StringField,
   contains,
   containsMany,
   field,
   linksTo,
   linksToMany,
-  primitive,
-  queryableValue,
 } from './card-api';
 import CodeRefField from './code-ref';
 import BooleanField from './boolean';
+import NumberField from './number';
 import { SkillCard } from './skill-card';
+import { JsonField, SearchCardsResult } from './commands/search-card-result';
 
 export type CommandStatus = 'applied' | 'ready' | 'applying';
 
-class CommandObjectFieldTemplate extends Component<typeof CommandObjectField> {
-  <template>
-    <pre>{{this.stringValue}}</pre>
-    <style scoped>
-      pre {
-        margin: 0;
-        white-space: pre-wrap;
-      }
-    </style>
-  </template>
-
-  get stringValue() {
-    return JSON.stringify(this.args.model, null, 2);
-  }
-}
-
-export class CommandObjectField extends FieldDef {
-  static [primitive]: Record<string, any>;
-  static [queryableValue](value: Record<string, any> | undefined) {
-    return Boolean(value) && typeof value === 'object'
-      ? JSON.stringify(value)
-      : undefined;
-  }
-  static edit = CommandObjectFieldTemplate;
-  static embedded = CommandObjectFieldTemplate;
-}
-
 export class SaveCardInput extends CardDef {
   @field realm = contains(StringField);
   @field card = linksTo(CardDef);
 }
 
-class JsonField extends FieldDef {
-  static [primitive]: Record<string, any>;
+export class CopyCardInput extends CardDef {
+  @field sourceCard = linksTo(CardDef);
+  @field targetRealmUrl = contains(StringField);
+  @field targetStackIndex = contains(NumberField);
+}
+
+export class CopyCardResult extends CardDef {
+  @field newCard = linksTo(CardDef);
 }
 
 export class PatchCardInput extends CardDef {
@@ -114,6 +92,30 @@ export class SendAiAssistantMessageResult extends CardDef {
   @field eventId = contains(StringField);
 }
 
+export class GetBoxelUIStateResult extends CardDef {
+  @field submode = contains(StringField);
+  //TODO expand this to include more of the UI state:
+  // - open cards
+  // - current room ID
+  static embedded = class Embedded extends Component<
+    typeof GetBoxelUIStateResult
+  > {
+    <template>
+      <div>
+        <h2>Boxel UI State</h2>
+        <div>Submode: {{@model.submode}}</div>
+      </div>
+    </template>
+  };
+}
+
+export class LegacyGenerateAppModuleResult extends CardDef {
+  @field moduleId = contains(StringField);
+  @field source = contains(StringField);
+}
+
 export class OpenAiAssistantRoomInput extends CardDef {
   @field roomId = contains(StringField);
 }
+
+export { SearchCardsResult };
diff --git a/packages/base/command-result.gts b/packages/base/commands/search-card-result.gts
similarity index 58%
rename from packages/base/command-result.gts
rename to packages/base/commands/search-card-result.gts
index 4bb10ffbde..2a41f4ab12 100644
--- a/packages/base/command-result.gts
+++ b/packages/base/commands/search-card-result.gts
@@ -1,25 +1,15 @@
 import GlimmerComponent from '@glimmer/component';
 import { cached, tracked } from '@glimmer/tracking';
-import { array } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
+import { Button, FieldContainer } from '@cardstack/boxel-ui/components';
+import { eq } from '@cardstack/boxel-ui/helpers';
 import {
-  BoxelDropdown,
-  Button,
-  FieldContainer,
-  Header,
-  IconButton,
-  Menu,
-} from '@cardstack/boxel-ui/components';
-import { eq, menuItem } from '@cardstack/boxel-ui/helpers';
-import {
-  ArrowLeft,
   IconMinusCircle,
   IconPlus,
   IconSearchThick,
-  ThreeDotsHorizontal,
 } from '@cardstack/boxel-ui/icons';
-import { getCard } from '@cardstack/runtime-common';
+import { getCard, primitive } from '@cardstack/runtime-common';
 import {
   BaseDef,
   CardDef,
@@ -30,8 +20,8 @@ import {
   field,
   type CardContext,
   type Format,
-} from './card-api';
-import { CommandObjectField } from './command';
+  FieldDef,
+} from '../card-api';
 
 type AttachedCardResource = {
   card: CardDef | undefined;
@@ -48,6 +38,10 @@ interface ResourceListSignature {
   context?: CardContext;
 }
 
+export class JsonField extends FieldDef {
+  static [primitive]: Record<string, any>;
+}
+
 class ResourceList extends GlimmerComponent<ResourceListSignature> {
   <template>
     <ol class='result-list {{@format}}' data-test-result-list>
@@ -117,7 +111,9 @@ class ResourceList extends GlimmerComponent<ResourceListSignature> {
   </template>
 }
 
-class CommandResultEmbeddedView extends Component<typeof CommandResult> {
+class SearchCardsResultEmbeddedView extends Component<
+  typeof SearchCardsResult
+> {
   @tracked showAllResults = false;
 
   @cached
@@ -181,74 +177,25 @@ class CommandResultEmbeddedView extends Component<typeof CommandResult> {
   }
 
   <template>
-    <div class='command-result' data-test-command-result>
-      <Header
-        @title='Search Results'
-        @subtitle='{{this.numberOfCards}} {{if
-          (eq this.numberOfCards 1)
-          "Result"
-          "Results"
-        }}'
-        @hasBottomBorder={{true}}
-        class='header'
-        data-test-command-result-header
-      >
-        <:icon>
-          <div class='search-icon-container'>
-            <IconSearchThick width='16' height='16' />
-          </div>
-        </:icon>
-        <:actions>
-          <BoxelDropdown>
-            <:trigger as |bindings|>
-              <IconButton
-                @icon={{ThreeDotsHorizontal}}
-                @width='20px'
-                @height='20px'
-                class='icon-button'
-                aria-label='Options'
-                data-test-more-options-button
-                {{bindings}}
-              />
-            </:trigger>
-            <:content as |dd|>
-              <Menu
-                class='options-menu'
-                @items={{array
-                  (menuItem
-                    'Copy to Workspace' this.copyToWorkspace icon=ArrowLeft
-                  )
-                }}
-                @closeMenu={{dd.close}}
-              />
-            </:content>
-          </BoxelDropdown>
-        </:actions>
-      </Header>
-      <div class='body'>
-        <ResourceList @resources={{this.attachedResources}} @format='atom' />
-        <div class='footer'>
-          {{#if this.numberOfCardsGreaterThanPaginateSize}}
-            <Button
-              @size='small'
-              class='toggle-show'
-              {{on 'click' this.toggleShow}}
-              data-test-toggle-show-button
-            >
-              {{#if this.showAllResults}}
-                <IconMinusCircle
-                  width='11px'
-                  height='11px'
-                  role='presentation'
-                />
-              {{else}}
-                <IconPlus width='11px' height='11px' role='presentation' />
-              {{/if}}
+    <div class='command-result'>
+      <ResourceList @resources={{this.attachedResources}} @format='atom' />
+      <div class='footer'>
+        {{#if this.numberOfCardsGreaterThanPaginateSize}}
+          <Button
+            @size='small'
+            class='toggle-show'
+            {{on 'click' this.toggleShow}}
+            data-test-toggle-show-button
+          >
+            {{#if this.showAllResults}}
+              <IconMinusCircle width='11px' height='11px' role='presentation' />
+            {{else}}
+              <IconPlus width='11px' height='11px' role='presentation' />
+            {{/if}}
 
-              {{this.toggleShowText}}
-            </Button>
-          {{/if}}
-        </div>
+            {{this.toggleShowText}}
+          </Button>
+        {{/if}}
       </div>
     </div>
     <style scoped>
@@ -257,36 +204,6 @@ class CommandResultEmbeddedView extends Component<typeof CommandResult> {
         background-color: var(--boxel-light);
         border-radius: var(--boxel-border-radius);
         --left-padding: var(--boxel-sp-xs);
-      }
-      .search-icon-container {
-        background-color: var(--boxel-border-color);
-        display: flex;
-        padding: var(--boxel-sp-xxxs);
-        border-radius: var(--boxel-border-radius-sm);
-      }
-      .header {
-        --boxel-label-color: var(--boxel-450);
-        --boxel-label-font: 600 var(--boxel-font-xs);
-        --boxel-header-padding: var(--boxel-sp-xxxs) var(--boxel-sp-xxxs) 0
-          var(--left-padding);
-      }
-      .header :deep(.content) {
-        gap: 0;
-      }
-      .icon-button {
-        --icon-color: var(--boxel-dark);
-      }
-      .icon-button:hover {
-        --icon-color: var(--boxel-highlight);
-      }
-      .options-menu :deep(.boxel-menu__item__content) {
-        padding-right: var(--boxel-sp-xxs);
-        padding-left: var(--boxel-sp-xxs);
-      }
-      .options-menu :deep(.check-icon) {
-        display: none;
-      }
-      .body {
         display: flex;
         flex-direction: column;
         font-weight: 600;
@@ -322,22 +239,9 @@ class CommandResultEmbeddedView extends Component<typeof CommandResult> {
       }
     </style>
   </template>
-
-  @action async copyToWorkspace() {
-    let newCard = await this.args.context?.actions?.copyCard?.(
-      this.args.model as CardDef,
-    );
-    if (!newCard) {
-      console.error('Could not copy card to workspace.');
-      return;
-    }
-    this.args.context?.actions?.viewCard(newCard, 'isolated', {
-      openCardInRightMostStack: true,
-    });
-  }
 }
 
-class CommandResultIsolated extends CommandResultEmbeddedView {
+class SearchCardsResultIsolatedView extends SearchCardsResultEmbeddedView {
   <template>
     <section class='command-result' data-test-command-result-isolated>
       <header>
@@ -351,9 +255,6 @@ class CommandResultIsolated extends CommandResultEmbeddedView {
         <FieldContainer @label='Description'>
           {{@model.description}}
         </FieldContainer>
-        <FieldContainer @label='Filter'>
-          <pre>{{this.filterString}}</pre>
-        </FieldContainer>
         <FieldContainer @label='Results' class='results'>
           <ResourceList
             @resources={{this.attachedResources}}
@@ -393,38 +294,17 @@ class CommandResultIsolated extends CommandResultEmbeddedView {
   </template>
 
   @tracked showAllResults = true;
-
-  get filterString() {
-    if (!this.args.model.toolCallArgs?.attributes.filter) {
-      return;
-    }
-    return JSON.stringify(
-      this.args.model.toolCallArgs.attributes.filter,
-      null,
-      2,
-    );
-  }
 }
 
-export class CommandResult extends CardDef {
-  static displayName = 'Command Result';
-  @field toolCallName = contains(StringField);
-  @field toolCallId = contains(StringField);
-  @field toolCallArgs = contains(CommandObjectField);
+export class SearchCardsResult extends CardDef {
+  static displayName = 'Search Results';
+  static icon = IconSearchThick;
   @field cardIds = containsMany(StringField);
+  static embedded = SearchCardsResultEmbeddedView;
+  static isolated = SearchCardsResultIsolatedView;
   @field title = contains(StringField, {
-    computeVia: function (this: CommandResult) {
-      return this.toolCallName === 'searchCard'
-        ? 'Search Results'
-        : 'Command Result';
+    computeVia: function (this: SearchCardsResult) {
+      return 'Search Results';
     },
   });
-  @field description = contains(StringField, {
-    computeVia: function (this: CommandResult) {
-      return this.toolCallArgs?.description;
-    },
-  });
-
-  static embedded = CommandResultEmbeddedView;
-  static isolated = CommandResultIsolated;
 }
diff --git a/packages/base/contains-many-component.gts b/packages/base/contains-many-component.gts
index 0e39ba4002..ddfa13540f 100644
--- a/packages/base/contains-many-component.gts
+++ b/packages/base/contains-many-component.gts
@@ -70,6 +70,8 @@ class ContainsManyEditor extends GlimmerComponent<ContainsManyEditorSignature> {
           <AddButton
             class='add-new'
             @variant='full-width'
+            @iconWidth='12px'
+            @iconHeight='12px'
             {{on 'click' this.add}}
             data-test-add-new
           >
@@ -83,6 +85,10 @@ class ContainsManyEditor extends GlimmerComponent<ContainsManyEditorSignature> {
       .contains-many-editor {
         --remove-icon-size: var(--boxel-icon-lg);
       }
+      .contains-many-editor
+        :deep(.compound-field.edit-format .add-button--full-width) {
+        border: var(--boxel-border);
+      }
       .list {
         list-style: none;
         padding: 0;
@@ -208,9 +214,10 @@ export function getContainsManyComponent({
                 {{unless arrayField.children.length "empty"}}'
               data-test-plural-view={{field.fieldType}}
               data-test-plural-view-format={{effectiveFormat}}
+              ...attributes
             >
               {{#each (getComponents) as |Item i|}}
-                <div data-test-plural-view-item={{i}}>
+                <div class='containsMany-item' data-test-plural-view-item={{i}}>
                   <Item
                     @format={{getPluralChildFormat effectiveFormat model}}
                   />
@@ -221,11 +228,19 @@ export function getContainsManyComponent({
         {{/if}}
       </DefaultFormatsConsumer>
       <style scoped>
-        .containsMany-field.edit-format {
-          padding: var(--boxel-sp-sm);
-          background-color: var(--boxel-100);
-          border: none !important;
-          border-radius: var(--boxel-border-radius);
+        @layer {
+          .containsMany-field.edit-format {
+            padding: var(--boxel-sp-sm);
+            background-color: var(--boxel-100);
+            border: none !important;
+            border-radius: var(--boxel-border-radius);
+          }
+          .containsMany-field.atom-format {
+            display: contents;
+          }
+          .containsMany-field.atom-format > .containsMany-item {
+            display: inline;
+          }
         }
       </style>
     </template>;
diff --git a/packages/base/default-templates/atom.gts b/packages/base/default-templates/atom.gts
index 823a8d5cd5..282f14760a 100644
--- a/packages/base/default-templates/atom.gts
+++ b/packages/base/default-templates/atom.gts
@@ -18,6 +18,16 @@ export default class DefaultAtomViewTemplate extends GlimmerComponent<{
       : `Untitled ${this.args.model.constructor.displayName}`;
   }
   <template>
-    {{this.text}}
+    <span class='atom-default-template'>
+      {{this.text}}
+    </span>
+    <style scoped>
+      @layer {
+        .atom-default-template {
+          font: 600 var(--boxel-font-sm);
+          letter-spacing: var(--boxel-lsp-xs);
+        }
+      }
+    </style>
   </template>
 }
diff --git a/packages/base/default-templates/isolated-and-edit.gts b/packages/base/default-templates/isolated-and-edit.gts
index 06e2e2b34f..91f1dbf9ab 100644
--- a/packages/base/default-templates/isolated-and-edit.gts
+++ b/packages/base/default-templates/isolated-and-edit.gts
@@ -43,14 +43,19 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
       }
       /* this aligns edit fields with containsMany, linksTo, and linksToMany fields */
       .default-card-template.edit
-        > .boxel-field
         > :deep(
-          *:nth-child(2):not(.links-to-many-editor):not(
-              .contains-many-editor
-            ):not(.links-to-editor)
+          .boxel-field
+            > .content
+            > *:not(.links-to-many-editor):not(.contains-many-editor):not(
+              .links-to-editor
+            )
         ) {
         padding-right: var(--boxel-icon-lg);
       }
+      .default-card-template.edit
+        > :deep(.boxel-field > .content > *:not(.links-to-many-editor)) {
+        padding-left: var(--boxel-icon-lg);
+      }
     </style>
   </template>
 }
diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
index 6cea4103d0..1f33bafa39 100644
--- a/packages/base/field-component.gts
+++ b/packages/base/field-component.gts
@@ -247,6 +247,7 @@ export function getBoxComponent(
                   @value={{defaultFieldFormats effectiveFormats.fieldDef}}
                 >
                   <div
+                    class='compound-field {{effectiveFormats.fieldDef}}-format'
                     data-test-compound-field-format={{effectiveFormats.fieldDef}}
                     data-test-compound-field-component
                     {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
@@ -323,13 +324,20 @@ export function getBoxComponent(
         overflow: hidden;
       }
 
-      /*
-        TODO: regarding the atom format styling below, we probably want to refactor to move
-        any styles that effect the inside of the card boundary into the CardDef's atom template
-      */
+      .field-component-card.atom-format.display-container-false {
+        display: contents;
+      }
       .field-component-card.atom-format.display-container-true {
-        padding: 4px var(--boxel-sp-sm);
-        background-color: var(--boxel-light);
+        display: inline-block;
+        width: auto;
+        height: auto;
+        padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
+      }
+      .field-component-card.atom-format > :deep(*) {
+        vertical-align: middle;
+      }
+      .compound-field.atom-format {
+        display: inline;
       }
     </style>
   </template>;
diff --git a/packages/base/links-to-editor.gts b/packages/base/links-to-editor.gts
index 39b98d14f8..52571ad678 100644
--- a/packages/base/links-to-editor.gts
+++ b/packages/base/links-to-editor.gts
@@ -86,10 +86,9 @@ export class LinksToEditor extends GlimmerComponent<Signature> {
     </PermissionsConsumer>
     <style scoped>
       .links-to-editor {
-        --remove-icon-size: var(--boxel-icon-lg);
         position: relative;
         display: grid;
-        grid-template-columns: 1fr var(--remove-icon-size);
+        grid-template-columns: 1fr max-content;
       }
       .links-to-editor > :deep(.boxel-card-container.embedded-format) {
         order: -1;
diff --git a/packages/base/links-to-many-component.gts b/packages/base/links-to-many-component.gts
index 5a030c126b..e456bfb658 100644
--- a/packages/base/links-to-many-component.gts
+++ b/packages/base/links-to-many-component.gts
@@ -17,7 +17,7 @@ import {
   PermissionsConsumer,
   getBoxComponent,
 } from './field-component';
-import { AddButton, IconButton } from '@cardstack/boxel-ui/components';
+import { AddButton, IconButton, Pill } from '@cardstack/boxel-ui/components';
 import {
   restartableTask,
   type EncapsulatedTaskDescriptor as Descriptor,
@@ -196,6 +196,8 @@ class LinksToManyStandardEditor extends GlimmerComponent<LinksToManyStandardEdit
         <AddButton
           class='add-new'
           @variant='full-width'
+          @iconWidth='12px'
+          @iconHeight='12px'
           {{on 'click' @add}}
           data-test-add-new
         >
@@ -283,10 +285,8 @@ class LinksToManyCompactEditor extends GlimmerComponent<LinksToManyCompactEditor
           )
           as |Item|
         }}
-          <div class='boxel-pills-container' data-test-pill-item={{i}}>
-            <div class='boxel-pill'>
-              <Item @format='atom' />
-            </div>
+          <Pill class='item-pill' data-test-pill-item={{i}}>
+            <Item @format='atom' @displayContainer={{false}} />
             <IconButton
               @variant='primary'
               @icon={{IconX}}
@@ -298,7 +298,7 @@ class LinksToManyCompactEditor extends GlimmerComponent<LinksToManyCompactEditor
               data-test-remove-card
               data-test-remove={{i}}
             />
-          </div>
+          </Pill>
         {{/let}}
       {{/each}}
       <AddButton
@@ -315,37 +315,31 @@ class LinksToManyCompactEditor extends GlimmerComponent<LinksToManyCompactEditor
     </div>
     <style scoped>
       .boxel-pills {
+        --boxel-add-button-pill-font: var(--boxel-font-sm);
         display: flex;
         flex-wrap: wrap;
-
+        gap: var(--boxel-sp-xs);
         padding: var(--boxel-sp-xs) 0 var(--boxel-sp-xs) var(--boxel-sp-sm);
+        background-color: var(--boxel-light);
         border: 1px solid var(--boxel-form-control-border-color);
         border-radius: var(--boxel-form-control-border-radius);
-        --boxel-add-button-pill-font: var(--boxel-font-sm);
-        gap: var(--boxel-sp-xs);
-      }
-      .boxel-pills-container {
-        position: relative;
-        height: fit-content;
-      }
-      .boxel-pill .atom-format.display-container-true {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding-right: var(--boxel-sp-lg);
-        color: var(--boxel-dark);
       }
       .remove-item-button {
-        --icon-color: var(--boxel-dark);
-        position: absolute;
-        right: 0;
-        top: 0;
-
-        width: 22px;
-        height: 100%;
-        display: flex;
+        width: 18px;
+        height: 18px;
+        display: inline-flex;
         align-items: center;
-        padding-right: var(--boxel-sp-xxs);
+      }
+      .remove-item-button:hover {
+        --icon-color: var(--boxel-600);
+        color: var(--boxel-600);
+      }
+      .item-pill :deep(.atom-default-template:hover) {
+        text-decoration: underline;
+      }
+      .item-pill:has(button:hover) {
+        color: var(--boxel-600);
+        border-color: var(--boxel-600);
       }
     </style>
   </template>
@@ -416,12 +410,14 @@ export function getLinksToManyComponent({
         {{else}}
           {{#let
             (coalesce @format defaultFormats.cardDef)
-            as |effectiveFormat|
+            (if (eq @displayContainer false) false true)
+            as |effectiveFormat displayContainer|
           }}
             <div
               class='plural-field linksToMany-field
                 {{effectiveFormat}}-effectiveFormat
-                {{unless arrayField.children.length "empty"}}'
+                {{unless arrayField.children.length "empty"}}
+                display-container-{{displayContainer}}'
               data-test-plural-view={{field.fieldType}}
               data-test-plural-view-format={{effectiveFormat}}
               ...attributes
@@ -429,6 +425,7 @@ export function getLinksToManyComponent({
               {{#each (getComponents) as |Item i|}}
                 <Item
                   @format={{effectiveFormat}}
+                  @displayContainer={{@displayContainer}}
                   class='linksToMany-item'
                   data-test-plural-view-item={{i}}
                 />
@@ -438,20 +435,22 @@ export function getLinksToManyComponent({
         {{/if}}
       </DefaultFormatsConsumer>
       <style scoped>
-        .linksToMany-field.fitted-effectiveFormat
-          > .linksToMany-item
-          + .linksToMany-item,
-        .linksToMany-field.embedded-effectiveFormat
-          > .linksToMany-item
-          + .linksToMany-item {
-          margin-top: var(--boxel-sp);
-        }
-        .linksToMany-field.atom-effectiveFormat {
-          display: flex;
-          gap: var(--boxel-sp-sm);
-          padding: var(--boxel-sp-sm);
-          border: var(--boxel-border);
-          border-radius: var(--boxel-border-radius);
+        @layer {
+          .linksToMany-field.fitted-effectiveFormat
+            > .linksToMany-item
+            + .linksToMany-item,
+          .linksToMany-field.embedded-effectiveFormat
+            > .linksToMany-item
+            + .linksToMany-item {
+            margin-top: var(--boxel-sp);
+          }
+          .linksToMany-field.atom-effectiveFormat.display-container-false {
+            display: contents;
+          }
+          .linksToMany-field.atom-effectiveFormat.display-container-true {
+            display: inline-flex;
+            gap: var(--boxel-sp-sm);
+          }
         }
       </style>
     </template>
diff --git a/packages/base/matrix-event.gts b/packages/base/matrix-event.gts
index dd63211641..4813f1be5f 100644
--- a/packages/base/matrix-event.gts
+++ b/packages/base/matrix-event.gts
@@ -9,7 +9,9 @@ import {
   APP_BOXEL_CARD_FORMAT,
   APP_BOXEL_CARDFRAGMENT_MSGTYPE,
   APP_BOXEL_COMMAND_MSGTYPE,
-  APP_BOXEL_COMMAND_RESULT_MSGTYPE,
+  APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
+  APP_BOXEL_COMMAND_RESULT_WITH_NO_OUTPUT_MSGTYPE,
+  APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE,
   APP_BOXEL_MESSAGE_MSGTYPE,
   APP_BOXEL_ROOM_SKILLS_EVENT_TYPE,
 } from '@cardstack/runtime-common/matrix-constants';
@@ -146,19 +148,6 @@ export interface CommandMessageContent {
   };
 }
 
-export interface ReactionEvent extends BaseMatrixEvent {
-  type: 'm.reaction';
-  content: ReactionEventContent;
-}
-
-export interface ReactionEventContent {
-  'm.relates_to': {
-    event_id: string;
-    key: string;
-    rel_type: 'm.annotation';
-  };
-}
-
 export interface CardMessageEvent extends BaseMatrixEvent {
   type: 'm.room.message';
   content: CardMessageContent | CardFragmentContent;
@@ -239,8 +228,8 @@ export interface SkillsConfigEvent extends RoomStateEvent {
 }
 
 export interface CommandResultEvent extends BaseMatrixEvent {
-  type: 'm.room.message';
-  content: CommandResultContent;
+  type: typeof APP_BOXEL_COMMAND_RESULT_EVENT_TYPE;
+  content: CommandResultWithOutputContent | CommandResultWithNoOutputContent;
   unsigned: {
     age: number;
     transaction_id: string;
@@ -249,19 +238,27 @@ export interface CommandResultEvent extends BaseMatrixEvent {
   };
 }
 
-export interface CommandResultContent {
-  'm.relates_to'?: {
+export interface CommandResultWithOutputContent {
+  'm.relates_to': {
     rel_type: 'm.annotation';
     key: string;
     event_id: string;
-    'm.in_reply_to'?: {
-      event_id: string;
-    };
   };
-  formatted_body: string;
-  body: string;
-  msgtype: typeof APP_BOXEL_COMMAND_RESULT_MSGTYPE;
-  result: any;
+  data: {
+    cardEventId: string;
+    // we materialize this field on the server
+    card?: LooseSingleCardDocument;
+  };
+  msgtype: typeof APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE;
+}
+
+export interface CommandResultWithNoOutputContent {
+  'm.relates_to': {
+    rel_type: 'm.annotation';
+    key: string;
+    event_id: string;
+  };
+  msgtype: typeof APP_BOXEL_COMMAND_RESULT_WITH_NO_OUTPUT_MSGTYPE;
 }
 
 export type MatrixEvent =
@@ -271,7 +268,6 @@ export type MatrixEvent =
   | MessageEvent
   | CommandEvent
   | CommandResultEvent
-  | ReactionEvent
   | CardMessageEvent
   | RoomNameEvent
   | RoomTopicEvent
diff --git a/packages/experiments-realm/AtomExamples/d7aa387b-6514-47c0-ace2-7de011453e51.json b/packages/experiments-realm/AtomExamples/d7aa387b-6514-47c0-ace2-7de011453e51.json
new file mode 100644
index 0000000000..3d537da72e
--- /dev/null
+++ b/packages/experiments-realm/AtomExamples/d7aa387b-6514-47c0-ace2-7de011453e51.json
@@ -0,0 +1,217 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Lila",
+      "names": [
+        "Evie",
+        "Lila",
+        "Marco"
+      ],
+      "date": "2024-12-04",
+      "dates": [
+        "2024-12-11",
+        "2024-12-25",
+        "2024-12-31"
+      ],
+      "trip": {
+        "title": "Trip 1"
+      },
+      "trips": [
+        {
+          "title": "Trip 1"
+        },
+        {
+          "title": "Trip 2"
+        },
+        {
+          "title": "Trip 3"
+        }
+      ],
+      "contactLink": {
+        "label": "Email",
+        "value": "a@email.com"
+      },
+      "contactLinks": [
+        {
+          "label": "Email",
+          "value": "a@email.com"
+        },
+        {
+          "label": "Phone",
+          "value": "13472345678"
+        },
+        {
+          "label": "Other",
+          "value": "mywebsite-boxel.io"
+        }
+      ],
+      "title": "Samples 1",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "author": {
+        "links": {
+          "self": "../Author/alice-enwunder"
+        }
+      },
+      "authors.0": {
+        "links": {
+          "self": "../Author/alice-enwunder"
+        }
+      },
+      "authors.1": {
+        "links": {
+          "self": "../Author/0b9c06fd-3833-4947-a0b8-ac24b8e71ee7"
+        }
+      },
+      "authors.2": {
+        "links": {
+          "self": "../Author/jane-doe"
+        }
+      },
+      "pet": {
+        "links": {
+          "self": "../Pet/2"
+        }
+      },
+      "pets.0": {
+        "links": {
+          "self": "../Pet/2"
+        }
+      },
+      "pets.1": {
+        "links": {
+          "self": "../Pet/1"
+        }
+      },
+      "pets.2": {
+        "links": {
+          "self": "../Pet/3"
+        }
+      },
+      "trip.country": {
+        "links": {
+          "self": "http://localhost:4201/experiments/Country/argentina"
+        }
+      },
+      "trip.countries.0": {
+        "links": {
+          "self": "http://localhost:4201/experiments/Country/brazil"
+        }
+      },
+      "trip.countries.1": {
+        "links": {
+          "self": "http://localhost:4201/experiments/Country/4"
+        }
+      },
+      "trip.countries.2": {
+        "links": {
+          "self": "http://localhost:4201/experiments/Country/1"
+        }
+      },
+      "trips.0.country": {
+        "links": {
+          "self": "../Country/1"
+        }
+      },
+      "trips.0.countries.0": {
+        "links": {
+          "self": "../Country/3"
+        }
+      },
+      "trips.0.countries.1": {
+        "links": {
+          "self": "../Country/4"
+        }
+      },
+      "trips.1.country": {
+        "links": {
+          "self": null
+        }
+      },
+      "trips.1.countries": {
+        "links": {
+          "self": null
+        }
+      },
+      "trips.2.country": {
+        "links": {
+          "self": null
+        }
+      },
+      "trips.2.countries": {
+        "links": {
+          "self": null
+        }
+      },
+      "teamMember": {
+        "links": {
+          "self": "../TeamMember/847c1f4e-e0ae-43d3-a012-8ffaa66f5925"
+        }
+      },
+      "teamMembers.0": {
+        "links": {
+          "self": "../TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e"
+        }
+      },
+      "teamMembers.1": {
+        "links": {
+          "self": "../TeamMember/03e293b9-e4c1-4592-b8d1-e6f963829086"
+        }
+      },
+      "teamMembers.2": {
+        "links": {
+          "self": "../TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be"
+        }
+      },
+      "company": {
+        "links": {
+          "self": "../Company/9203c173-3420-44b3-863d-90defd7c57c8"
+        }
+      },
+      "companies.0": {
+        "links": {
+          "self": "../Company/141f3e15-cfd5-4b61-bd4c-37ea31dbeeab"
+        }
+      },
+      "companies.1": {
+        "links": {
+          "self": "../Company/e1856419-27b0-4ce3-98fe-759d21c7144f"
+        }
+      },
+      "companies.2": {
+        "links": {
+          "self": "../Company/9203c173-3420-44b3-863d-90defd7c57c8"
+        }
+      },
+      "contact": {
+        "links": {
+          "self": "../Contact/a01fc5c9-d70d-4b9c-aae4-384cf2b79b25"
+        }
+      },
+      "contacts.0": {
+        "links": {
+          "self": "../Customer/0e5aec99-798b-4417-9426-a338432e0ee5"
+        }
+      },
+      "contacts.1": {
+        "links": {
+          "self": "../Lead/1dbcc3e8-fe3c-4c4a-ba66-ff7d637a7358"
+        }
+      },
+      "contacts.2": {
+        "links": {
+          "self": "../Customer/67e87a6c-00d0-4c48-9318-f0c96daa4cae"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../atom-examples",
+        "name": "AtomExamples"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/CatalogEntry/tag.json b/packages/experiments-realm/CatalogEntry/tag.json
new file mode 100644
index 0000000000..db4d9831a1
--- /dev/null
+++ b/packages/experiments-realm/CatalogEntry/tag.json
@@ -0,0 +1,20 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "title": "Tag",
+      "description": "Catalog entry for Tag",
+      "ref": {
+        "name": "Tag",
+        "module": "../tag"
+      },
+      "isField": false
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/catalog-entry",
+        "name": "CatalogEntry"
+      }
+    }
+  }
+}
diff --git a/packages/experiments-realm/CatalogEntry/team-member.json b/packages/experiments-realm/CatalogEntry/team-member.json
new file mode 100644
index 0000000000..0f04ce5802
--- /dev/null
+++ b/packages/experiments-realm/CatalogEntry/team-member.json
@@ -0,0 +1,20 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "title": "Team Member",
+      "description": "Catalog entry for Team Member",
+      "ref": {
+        "name": "TeamMember",
+        "module": "../sprint-task"
+      },
+      "isField": false
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/catalog-entry",
+        "name": "CatalogEntry"
+      }
+    }
+  }
+}
diff --git a/packages/experiments-realm/CatalogEntry/team.json b/packages/experiments-realm/CatalogEntry/team.json
new file mode 100644
index 0000000000..d259682406
--- /dev/null
+++ b/packages/experiments-realm/CatalogEntry/team.json
@@ -0,0 +1,20 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "title": "Team",
+      "description": "Catalog entry for Team",
+      "ref": {
+        "name": "Team",
+        "module": "../sprint-task"
+      },
+      "isField": false
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/catalog-entry",
+        "name": "CatalogEntry"
+      }
+    }
+  }
+}
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 7b5f78fbb1..4da602d5bb 100644
--- a/packages/experiments-realm/Deal/4fdd3053-14f1-4800-827f-d3e2a5c44ae8.json
+++ b/packages/experiments-realm/Deal/4fdd3053-14f1-4800-827f-d3e2a5c44ae8.json
@@ -74,7 +74,6 @@
           }
         }
       ],
-      "title": null,
       "description": null,
       "thumbnailURL": "https://picsum.photos/id/500/200/300"
     },
diff --git a/packages/experiments-realm/Deal/50b65110-8335-4391-84ec-28cc9c0f22b3.json b/packages/experiments-realm/Deal/50b65110-8335-4391-84ec-28cc9c0f22b3.json
index e20a03b726..5516b1dc1f 100644
--- a/packages/experiments-realm/Deal/50b65110-8335-4391-84ec-28cc9c0f22b3.json
+++ b/packages/experiments-realm/Deal/50b65110-8335-4391-84ec-28cc9c0f22b3.json
@@ -2,7 +2,7 @@
   "data": {
     "type": "card",
     "attributes": {
-      "name": null,
+      "name": "",
       "status": {
         "index": 1,
         "label": "Proposal",
@@ -37,7 +37,6 @@
       "healthScore": null,
       "notes": "",
       "valueBreakdown": [],
-      "title": null,
       "description": null,
       "thumbnailURL": null
     },
diff --git a/packages/experiments-realm/Deal/f0d769bd-e347-4203-9a96-89332cfba0e2.json b/packages/experiments-realm/Deal/f0d769bd-e347-4203-9a96-89332cfba0e2.json
index cd89a90648..c6c44d92f7 100644
--- a/packages/experiments-realm/Deal/f0d769bd-e347-4203-9a96-89332cfba0e2.json
+++ b/packages/experiments-realm/Deal/f0d769bd-e347-4203-9a96-89332cfba0e2.json
@@ -2,7 +2,7 @@
   "data": {
     "type": "card",
     "attributes": {
-      "name": null,
+      "name": "",
       "status": {
         "index": 3,
         "label": "Closed Won",
@@ -37,7 +37,6 @@
       "healthScore": null,
       "notes": null,
       "valueBreakdown": [],
-      "title": null,
       "description": null,
       "thumbnailURL": null
     },
diff --git a/packages/experiments-realm/Project/51ca069b-1c55-4648-8654-bd82bf162f9d.json b/packages/experiments-realm/Project/51ca069b-1c55-4648-8654-bd82bf162f9d.json
index d157f084e8..d30fa2fefc 100644
--- a/packages/experiments-realm/Project/51ca069b-1c55-4648-8654-bd82bf162f9d.json
+++ b/packages/experiments-realm/Project/51ca069b-1c55-4648-8654-bd82bf162f9d.json
@@ -8,7 +8,7 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "Project"
       }
     }
diff --git a/packages/experiments-realm/Project/9b43240d-8c9c-42bc-a4d1-f9c626661562.json b/packages/experiments-realm/Project/9b43240d-8c9c-42bc-a4d1-f9c626661562.json
index 5db9830baf..4e1e461909 100644
--- a/packages/experiments-realm/Project/9b43240d-8c9c-42bc-a4d1-f9c626661562.json
+++ b/packages/experiments-realm/Project/9b43240d-8c9c-42bc-a4d1-f9c626661562.json
@@ -8,7 +8,7 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "Project"
       }
     }
diff --git a/packages/experiments-realm/SprintPlanner/89209d31-328a-4c18-9758-53eb3c38d4f0.json b/packages/experiments-realm/SprintPlanner/89209d31-328a-4c18-9758-53eb3c38d4f0.json
index 98ca79b863..27030b89d9 100644
--- a/packages/experiments-realm/SprintPlanner/89209d31-328a-4c18-9758-53eb3c38d4f0.json
+++ b/packages/experiments-realm/SprintPlanner/89209d31-328a-4c18-9758-53eb3c38d4f0.json
@@ -2,15 +2,7 @@
   "data": {
     "type": "card",
     "attributes": {
-      "tabs": [],
-      "headerIcon": {
-        "altText": null,
-        "size": "actual",
-        "height": null,
-        "width": null,
-        "base64": null
-      },
-      "moduleId": null,
+      "title": "Engineering Team Sprint",
       "description": null,
       "thumbnailURL": null
     },
diff --git a/packages/experiments-realm/SprintTask/10402eaa-3826-4602-994b-60b7506fb98d.json b/packages/experiments-realm/SprintTask/10402eaa-3826-4602-994b-60b7506fb98d.json
index ef2612133e..831a182826 100644
--- a/packages/experiments-realm/SprintTask/10402eaa-3826-4602-994b-60b7506fb98d.json
+++ b/packages/experiments-realm/SprintTask/10402eaa-3826-4602-994b-60b7506fb98d.json
@@ -3,10 +3,10 @@
     "type": "card",
     "attributes": {
       "status": {
-        "completed": false,
         "index": 1,
         "label": "Next Sprint",
-        "color": "#64B5F6"
+        "color": "#64B5F6",
+        "completed": false
       },
       "dateRange": {
         "start": "2024-12-08",
@@ -16,8 +16,8 @@
         "index": 1,
         "label": "Medium"
       },
-      "name": "Pill Picker Example",
-      "details": "Use multi-select but for pills",
+      "name": "Create Pill Picker Example",
+      "details": "Implementation of a multi-select component using pills UI pattern, intended for use in the multi-filter feature. Users can select multiple pills simultaneously.\n\n**Note:** *This ticket is no longer relevant*",
       "description": null,
       "thumbnailURL": null
     },
@@ -39,28 +39,18 @@
       },
       "assignee": {
         "links": {
-          "self": null
+          "self": "../TeamMember/f832cfb6-959e-4d0d-bc83-8712a36a910a"
         }
       },
       "tags.0": {
-        "links": {
-          "self": "../Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228"
-        }
-      },
-      "tags.1": {
         "links": {
           "self": "../Tag/6b8446c8-b185-4de9-ba81-88f8b9eee7f5"
         }
-      },
-      "tags.2": {
-        "links": {
-          "self": "../Tag/f00a2177-df10-4ad7-8eac-2fbf8448de98"
-        }
       }
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
diff --git a/packages/experiments-realm/SprintTask/186c797c-cee8-449c-a5a7-6624052deefc.json b/packages/experiments-realm/SprintTask/186c797c-cee8-449c-a5a7-6624052deefc.json
index a807236011..f2779bcf6f 100644
--- a/packages/experiments-realm/SprintTask/186c797c-cee8-449c-a5a7-6624052deefc.json
+++ b/packages/experiments-realm/SprintTask/186c797c-cee8-449c-a5a7-6624052deefc.json
@@ -3,14 +3,14 @@
     "type": "card",
     "attributes": {
       "status": {
-        "completed": false,
-        "index": 2,
-        "label": "Current Sprint",
-        "color": "#00BCD4"
+        "index": 4,
+        "label": "In Review",
+        "color": "#9575CD",
+        "completed": false
       },
       "dateRange": {
-        "start": "2024-10-09",
-        "end": "2024-10-11"
+        "start": "2024-10-10",
+        "end": "2025-01-09"
       },
       "priority": {
         "index": null,
@@ -44,7 +44,7 @@
       },
       "assignee": {
         "links": {
-          "self": "../TeamMember/f832cfb6-959e-4d0d-bc83-8712a36a910a"
+          "self": "../TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e"
         }
       },
       "tags.0": {
@@ -60,7 +60,7 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
diff --git a/packages/experiments-realm/SprintTask/1b1fb4fd-d722-4cf9-a956-66fc64ccbc48.json b/packages/experiments-realm/SprintTask/1b1fb4fd-d722-4cf9-a956-66fc64ccbc48.json
index 6f18fdfbf4..4dc6c0fc9e 100644
--- a/packages/experiments-realm/SprintTask/1b1fb4fd-d722-4cf9-a956-66fc64ccbc48.json
+++ b/packages/experiments-realm/SprintTask/1b1fb4fd-d722-4cf9-a956-66fc64ccbc48.json
@@ -3,26 +3,21 @@
     "type": "card",
     "attributes": {
       "status": {
-        "completed": false,
         "index": 2,
         "label": "Current Sprint",
-        "color": "#00BCD4"
+        "color": "#00BCD4",
+        "completed": false
       },
       "dateRange": {
-        "start": "2024-11-18",
-        "end": "2024-11-19"
+        "start": "2024-12-19",
+        "end": "2025-01-09"
       },
       "priority": {
-        "index": null,
-        "label": null,
-        "color": null,
-        "colorScheme": {
-          "foregroundColor": null,
-          "backgroundColor": null
-        }
+        "index": 2,
+        "label": "Medium"
       },
-      "name": "Embedded Template for Status and Priority",
-      "details": null,
+      "name": "Implement Status and Priority Template Component with Dynamic Rendering",
+      "details": "Technical implementation of a reusable template component for displaying status and priority indicators across the application. Requirements include:\n- Create base template structure\n- Implement dynamic color rendering based on status\n- Add priority level visualization\n- Ensure accessibility compliance\n- Add unit tests for component",
       "description": null,
       "thumbnailURL": null
     },
@@ -55,7 +50,7 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
diff --git a/packages/experiments-realm/SprintTask/20058a9d-3c2d-4b42-8430-a95b6183245c.json b/packages/experiments-realm/SprintTask/20058a9d-3c2d-4b42-8430-a95b6183245c.json
index 3150d7ebd1..976286cce0 100644
--- a/packages/experiments-realm/SprintTask/20058a9d-3c2d-4b42-8430-a95b6183245c.json
+++ b/packages/experiments-realm/SprintTask/20058a9d-3c2d-4b42-8430-a95b6183245c.json
@@ -3,10 +3,10 @@
     "type": "card",
     "attributes": {
       "status": {
-        "completed": false,
-        "index": 2,
-        "label": "Current Sprint",
-        "color": "#00BCD4"
+        "index": 5,
+        "label": "Staged",
+        "color": "#26A69A",
+        "completed": false
       },
       "dateRange": {
         "start": "2024-11-06",
@@ -16,8 +16,8 @@
         "index": 1,
         "label": "Medium"
       },
-      "name": "Port the already done work for CRM from fork into boxel ui design system",
-      "details": "https://github.com/tintinthong/boxel/pull/1 CRM for reference. This is the PR that is constantly merged in",
+      "name": "Port the already done work for CRM into the monorepo",
+      "details": "Copy the existing work that has been carried out through spikes and git commit to our monorepo",
       "description": null,
       "thumbnailURL": null
     },
@@ -32,14 +32,9 @@
           "self": "../Team/cc574556-4253-44b8-ba80-0cfb844b4908"
         }
       },
-      "subtasks.0": {
+      "subtasks": {
         "links": {
-          "self": "./20058a9d-3c2d-4b42-8430-a95b6183245c"
-        }
-      },
-      "subtasks.1": {
-        "links": {
-          "self": "./9e23b8b5-d541-48ef-a652-e7afefb29777"
+          "self": null
         }
       },
       "assignee": {
@@ -65,7 +60,7 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
diff --git a/packages/experiments-realm/SprintTask/346cc7ac-eb65-41fd-a1d7-0400668da097.json b/packages/experiments-realm/SprintTask/346cc7ac-eb65-41fd-a1d7-0400668da097.json
index bf019d15fb..3052a78d24 100644
--- a/packages/experiments-realm/SprintTask/346cc7ac-eb65-41fd-a1d7-0400668da097.json
+++ b/packages/experiments-realm/SprintTask/346cc7ac-eb65-41fd-a1d7-0400668da097.json
@@ -3,10 +3,10 @@
     "type": "card",
     "attributes": {
       "status": {
-        "completed": false,
         "index": 3,
         "label": "In Progress",
-        "color": "#FFB74D"
+        "color": "#FFB74D",
+        "completed": false
       },
       "dateRange": {
         "start": "2024-11-19",
@@ -17,7 +17,7 @@
         "label": "High"
       },
       "name": "Make fitted / embeddedd view for task",
-      "details": null,
+      "details": "Implement a responsive task view that adapts to its container size using container queries (@container), allowing tasks to be embedded in different contexts while maintaining proper layout and readability. This will ensure consistent display whether tasks appear in boards, lists, or as embedded components.",
       "description": null,
       "thumbnailURL": null
     },
@@ -39,18 +39,18 @@
       },
       "assignee": {
         "links": {
-          "self": null
+          "self": "../TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be"
         }
       },
-      "tags": {
+      "tags.0": {
         "links": {
-          "self": null
+          "self": "../Tag/f00a2177-df10-4ad7-8eac-2fbf8448de98"
         }
       }
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
diff --git a/packages/experiments-realm/SprintTask/3cd737c3-4157-46be-9880-6ead8ea60652.json b/packages/experiments-realm/SprintTask/3cd737c3-4157-46be-9880-6ead8ea60652.json
index dd7adb9eee..2ab10341a2 100644
--- a/packages/experiments-realm/SprintTask/3cd737c3-4157-46be-9880-6ead8ea60652.json
+++ b/packages/experiments-realm/SprintTask/3cd737c3-4157-46be-9880-6ead8ea60652.json
@@ -3,10 +3,10 @@
     "type": "card",
     "attributes": {
       "status": {
-        "completed": false,
-        "index": 0,
-        "label": "Not Started",
-        "color": "#B0BEC5"
+        "index": 6,
+        "label": "Shipped",
+        "color": "#66BB6A",
+        "completed": true
       },
       "dateRange": {
         "start": "2024-11-06",
@@ -16,8 +16,8 @@
         "index": null,
         "label": null
       },
-      "name": "Create kanban board",
-      "details": null,
+      "name": "Build Kanban Board Component",
+      "details": "Implement drag and drop functionality using ember-modifier-drag-and-drop:\n\n- Install addon and implement TypeScript interfaces for events/data transfer\n- Create reusable drag/drop modifiers with visual feedback and preview\n- Add validation logic and write tests",
       "description": null,
       "thumbnailURL": null
     },
@@ -50,7 +50,7 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
diff --git a/packages/experiments-realm/SprintTask/48630c9d-2849-43d1-b356-890b016fffe9.json b/packages/experiments-realm/SprintTask/48630c9d-2849-43d1-b356-890b016fffe9.json
index 1b726fed81..59c53d3917 100644
--- a/packages/experiments-realm/SprintTask/48630c9d-2849-43d1-b356-890b016fffe9.json
+++ b/packages/experiments-realm/SprintTask/48630c9d-2849-43d1-b356-890b016fffe9.json
@@ -3,21 +3,21 @@
     "type": "card",
     "attributes": {
       "status": {
-        "completed": false,
-        "index": 3,
-        "label": "In Progress",
-        "color": "#FFB74D"
+        "index": 2,
+        "label": "Current Sprint",
+        "color": "#00BCD4",
+        "completed": false
       },
       "dateRange": {
         "start": null,
         "end": null
       },
       "priority": {
-        "index": null,
-        "label": null
+        "index": 4,
+        "label": "Highest"
       },
       "name": "Fill up task board with realistic data",
-      "details": null,
+      "details": "### Objective\nPopulate the task board with realistic sample data that demonstrates the full capabilities of our markdown and task tracking features.\n\n#### Requirements\n- [ ] Add variety of task statuses (Todo, In Progress, Done)\n- [ ] Include tasks with different priority levels\n- [ ] Create sample tasks with rich markdown content\n- [ ] Add realistic date ranges and deadlines",
       "description": null,
       "thumbnailURL": null
     },
@@ -42,15 +42,15 @@
           "self": "../TeamMember/03e293b9-e4c1-4592-b8d1-e6f963829086"
         }
       },
-      "tags": {
+      "tags.0": {
         "links": {
-          "self": null
+          "self": "../Tag/6d80a75f-71bb-474f-979d-ef4bc571ad63"
         }
       }
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
diff --git a/packages/experiments-realm/SprintTask/7d92636a-e306-4433-93c5-3b5d976986f3.json b/packages/experiments-realm/SprintTask/7d92636a-e306-4433-93c5-3b5d976986f3.json
index 11aced6955..a5229e4f23 100644
--- a/packages/experiments-realm/SprintTask/7d92636a-e306-4433-93c5-3b5d976986f3.json
+++ b/packages/experiments-realm/SprintTask/7d92636a-e306-4433-93c5-3b5d976986f3.json
@@ -3,21 +3,21 @@
     "type": "card",
     "attributes": {
       "status": {
-        "index": 0,
-        "label": "Not Started",
-        "color": "#B0BEC5",
+        "index": 4,
+        "label": "In Review",
+        "color": "#9575CD",
         "completed": false
       },
       "dateRange": {
         "start": "2024-11-20",
-        "end": "2024-11-21"
+        "end": "2024-11-27"
       },
       "priority": {
         "index": null,
         "label": null
       },
-      "name": "Drag and drop task",
-      "details": null,
+      "name": "Implement Cross-Component Drag and Drop System",
+      "details": "Design and implement a robust drag and drop system with the following specifications:\n\n- Evaluate and integrate a suitable drag and drop library (e.g., react-dnd, dnd-kit, or sortablejs)\n- Create reusable drag and drop hooks/utilities\n- Implement drag source and drop target abstractions\n- Add visual feedback during drag operations\n- Handle drag preview with custom styling\n- Implement drop validation logic\n- Add support for touch devices\n- Create comprehensive test suite for DnD interactions\n- Document library integration and custom implementation details",
       "description": null,
       "thumbnailURL": null
     },
@@ -50,9 +50,9 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/experiments-realm/SprintTask/8ca45d40-adcb-437f-83ee-07ffd973cd17.json b/packages/experiments-realm/SprintTask/8ca45d40-adcb-437f-83ee-07ffd973cd17.json
index 9ea0c99eb9..649d317a2f 100644
--- a/packages/experiments-realm/SprintTask/8ca45d40-adcb-437f-83ee-07ffd973cd17.json
+++ b/packages/experiments-realm/SprintTask/8ca45d40-adcb-437f-83ee-07ffd973cd17.json
@@ -3,10 +3,10 @@
     "type": "card",
     "attributes": {
       "status": {
-        "completed": false,
-        "index": 3,
-        "label": "In Progress",
-        "color": "#FFB74D"
+        "index": 2,
+        "label": "Current Sprint",
+        "color": "#00BCD4",
+        "completed": false
       },
       "dateRange": {
         "start": null,
@@ -17,7 +17,7 @@
         "label": null
       },
       "name": "Resolve bug where overlay only appears on certain cards",
-      "details": null,
+      "details": "The overlay is only appearing on specific cards due to a faulty modifier that's not being applied consistently across all card instances.",
       "description": null,
       "thumbnailURL": null
     },
@@ -39,18 +39,18 @@
       },
       "assignee": {
         "links": {
-          "self": null
+          "self": "../TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e"
         }
       },
-      "tags": {
+      "tags.0": {
         "links": {
-          "self": null
+          "self": "../Tag/c3b47bc8-a7df-48c3-8b7b-50dacbf124fc"
         }
       }
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
diff --git a/packages/experiments-realm/SprintTask/9e23b8b5-d541-48ef-a652-e7afefb29777.json b/packages/experiments-realm/SprintTask/9e23b8b5-d541-48ef-a652-e7afefb29777.json
index 8c83e02911..44206a770e 100644
--- a/packages/experiments-realm/SprintTask/9e23b8b5-d541-48ef-a652-e7afefb29777.json
+++ b/packages/experiments-realm/SprintTask/9e23b8b5-d541-48ef-a652-e7afefb29777.json
@@ -17,7 +17,7 @@
         "label": null
       },
       "name": "Incoporate Boxel Multi Select in Dropdown",
-      "details": null,
+      "details": "Integrate Boxel's multi-select dropdown component to be more unified with the single-select dropdown.\n\nThe trigger component should share the same designs.",
       "description": null,
       "thumbnailURL": null
     },
@@ -50,7 +50,7 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
diff --git a/packages/experiments-realm/SprintTask/c734e2c7-71d9-446e-a2c1-e6e930fcee55.json b/packages/experiments-realm/SprintTask/a1fd93a9-6b00-4b79-8d97-6c34c3a19cc3.json
similarity index 60%
rename from packages/experiments-realm/SprintTask/c734e2c7-71d9-446e-a2c1-e6e930fcee55.json
rename to packages/experiments-realm/SprintTask/a1fd93a9-6b00-4b79-8d97-6c34c3a19cc3.json
index 8ba75e2e92..0e0b089c0b 100644
--- a/packages/experiments-realm/SprintTask/c734e2c7-71d9-446e-a2c1-e6e930fcee55.json
+++ b/packages/experiments-realm/SprintTask/a1fd93a9-6b00-4b79-8d97-6c34c3a19cc3.json
@@ -3,9 +3,9 @@
     "type": "card",
     "attributes": {
       "status": {
-        "index": 3,
-        "label": "In Progress",
-        "color": "#FFB74D",
+        "index": 1,
+        "label": "Next Sprint",
+        "color": null,
         "completed": false
       },
       "dateRange": {
@@ -13,10 +13,10 @@
         "end": null
       },
       "priority": {
-        "index": 0,
-        "label": "Low"
+        "index": 4,
+        "label": "Highest"
       },
-      "name": "Add functionality where + opens create card modal with correct status",
+      "name": "Calendar displays wrong date after closing",
       "details": null,
       "description": null,
       "thumbnailURL": null
@@ -24,12 +24,12 @@
     "relationships": {
       "project": {
         "links": {
-          "self": "../Project/9b43240d-8c9c-42bc-a4d1-f9c626661562"
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
         }
       },
       "team": {
         "links": {
-          "self": "../Team/cc574556-4253-44b8-ba80-0cfb844b4908"
+          "self": null
         }
       },
       "subtasks": {
@@ -39,18 +39,18 @@
       },
       "assignee": {
         "links": {
-          "self": "../TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be"
+          "self": null
         }
       },
-      "tags": {
+      "tags.0": {
         "links": {
-          "self": null
+          "self": "../Tag/c3b47bc8-a7df-48c3-8b7b-50dacbf124fc"
         }
       }
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
diff --git a/packages/experiments-realm/SprintTask/d21d407b-9c1c-4204-a3bb-7b91f9260017.json b/packages/experiments-realm/SprintTask/d21d407b-9c1c-4204-a3bb-7b91f9260017.json
index 8af6ba7a4b..0c59d1133f 100644
--- a/packages/experiments-realm/SprintTask/d21d407b-9c1c-4204-a3bb-7b91f9260017.json
+++ b/packages/experiments-realm/SprintTask/d21d407b-9c1c-4204-a3bb-7b91f9260017.json
@@ -50,9 +50,9 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/experiments-realm/SprintTask/d8ce7466-3693-4d54-8931-8ccd25ca079f.json b/packages/experiments-realm/SprintTask/d8ce7466-3693-4d54-8931-8ccd25ca079f.json
index 7b0ec1cd57..0376341087 100644
--- a/packages/experiments-realm/SprintTask/d8ce7466-3693-4d54-8931-8ccd25ca079f.json
+++ b/packages/experiments-realm/SprintTask/d8ce7466-3693-4d54-8931-8ccd25ca079f.json
@@ -13,11 +13,11 @@
         "end": "2024-12-17"
       },
       "priority": {
-        "index": null,
-        "label": null
+        "index": 0,
+        "label": "Lowest"
       },
       "name": "Build Date Range Card",
-      "details": null,
+      "details": "",
       "description": null,
       "thumbnailURL": null
     },
@@ -32,9 +32,14 @@
           "self": "../Team/0a799af4-c49a-4d27-aabe-9ed54b9baf55"
         }
       },
-      "subtasks": {
+      "subtasks.0": {
+        "links": {
+          "self": "./a1fd93a9-6b00-4b79-8d97-6c34c3a19cc3"
+        }
+      },
+      "subtasks.1": {
         "links": {
-          "self": null
+          "self": "./d9fdfbbc-fb17-41d9-90a2-c5765819930b"
         }
       },
       "assignee": {
@@ -42,17 +47,17 @@
           "self": "../TeamMember/03e293b9-e4c1-4592-b8d1-e6f963829086"
         }
       },
-      "tags": {
+      "tags.0": {
         "links": {
-          "self": null
+          "self": "../Tag/f00a2177-df10-4ad7-8eac-2fbf8448de98"
         }
       }
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/experiments-realm/SprintTask/d9fdfbbc-fb17-41d9-90a2-c5765819930b.json b/packages/experiments-realm/SprintTask/d9fdfbbc-fb17-41d9-90a2-c5765819930b.json
new file mode 100644
index 0000000000..d230492914
--- /dev/null
+++ b/packages/experiments-realm/SprintTask/d9fdfbbc-fb17-41d9-90a2-c5765819930b.json
@@ -0,0 +1,58 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 1,
+        "label": "Next Sprint",
+        "color": null,
+        "completed": false
+      },
+      "dateRange": {
+        "start": "2025-01-09",
+        "end": "2025-01-12"
+      },
+      "priority": {
+        "index": null,
+        "label": null
+      },
+      "name": "Integrate Ember Power Calendar Picker",
+      "details": "Create a date range picker component using Ember Power Calendar with built-in validation to prevent end dates being set before start dates. Component should be implemented within a dropdown for better UX, following this pattern:\n\n1. Click triggers dropdown with calendar\n2. First click sets start date\n3. Second click sets end date (with validation)\n4. Invalid date ranges should be prevented and show validation feedback\n\n**Technical Requirements:**\n- Use `ember-power-calendar` for the calendar implementation\n- Implement date validation logic in the component\n- Style dropdown to match our design system",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "project": {
+        "links": {
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
+        }
+      },
+      "team": {
+        "links": {
+          "self": null
+        }
+      },
+      "subtasks": {
+        "links": {
+          "self": null
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": null
+        }
+      },
+      "tags": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "SprintTask"
+      }
+    }
+  }
+}
diff --git a/packages/experiments-realm/SprintTask/f81ea9a1-0b94-4e12-8e2e-c84fba78c551.json b/packages/experiments-realm/SprintTask/f81ea9a1-0b94-4e12-8e2e-c84fba78c551.json
index b5f6791058..c625a07921 100644
--- a/packages/experiments-realm/SprintTask/f81ea9a1-0b94-4e12-8e2e-c84fba78c551.json
+++ b/packages/experiments-realm/SprintTask/f81ea9a1-0b94-4e12-8e2e-c84fba78c551.json
@@ -50,7 +50,7 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
diff --git a/packages/experiments-realm/Tag/c3b47bc8-a7df-48c3-8b7b-50dacbf124fc.json b/packages/experiments-realm/Tag/c3b47bc8-a7df-48c3-8b7b-50dacbf124fc.json
new file mode 100644
index 0000000000..4c7f6196c4
--- /dev/null
+++ b/packages/experiments-realm/Tag/c3b47bc8-a7df-48c3-8b7b-50dacbf124fc.json
@@ -0,0 +1,17 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Bug",
+      "color": "#FFCCCB",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../tag",
+        "name": "Tag"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments-realm/Team/0a799af4-c49a-4d27-aabe-9ed54b9baf55.json b/packages/experiments-realm/Team/0a799af4-c49a-4d27-aabe-9ed54b9baf55.json
index 4719eab7b2..ded61fd31b 100644
--- a/packages/experiments-realm/Team/0a799af4-c49a-4d27-aabe-9ed54b9baf55.json
+++ b/packages/experiments-realm/Team/0a799af4-c49a-4d27-aabe-9ed54b9baf55.json
@@ -8,9 +8,9 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "Team"
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/experiments-realm/Team/cc574556-4253-44b8-ba80-0cfb844b4908.json b/packages/experiments-realm/Team/cc574556-4253-44b8-ba80-0cfb844b4908.json
index 6032ebd96a..fc3e5ca3c3 100644
--- a/packages/experiments-realm/Team/cc574556-4253-44b8-ba80-0cfb844b4908.json
+++ b/packages/experiments-realm/Team/cc574556-4253-44b8-ba80-0cfb844b4908.json
@@ -8,9 +8,9 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "Team"
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/experiments-realm/TeamMember/03e293b9-e4c1-4592-b8d1-e6f963829086.json b/packages/experiments-realm/TeamMember/03e293b9-e4c1-4592-b8d1-e6f963829086.json
index f06ead1d06..a96a2f91be 100644
--- a/packages/experiments-realm/TeamMember/03e293b9-e4c1-4592-b8d1-e6f963829086.json
+++ b/packages/experiments-realm/TeamMember/03e293b9-e4c1-4592-b8d1-e6f963829086.json
@@ -16,7 +16,7 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "TeamMember"
       }
     }
diff --git a/packages/experiments-realm/TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be.json b/packages/experiments-realm/TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be.json
index 247108b2df..8c1fa2b79d 100644
--- a/packages/experiments-realm/TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be.json
+++ b/packages/experiments-realm/TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be.json
@@ -16,9 +16,9 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "TeamMember"
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/experiments-realm/TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e.json b/packages/experiments-realm/TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e.json
index 96839e818b..32c36b206b 100644
--- a/packages/experiments-realm/TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e.json
+++ b/packages/experiments-realm/TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e.json
@@ -16,9 +16,9 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "TeamMember"
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/experiments-realm/TeamMember/847c1f4e-e0ae-43d3-a012-8ffaa66f5925.json b/packages/experiments-realm/TeamMember/847c1f4e-e0ae-43d3-a012-8ffaa66f5925.json
index ff921dbde5..61eff946d8 100644
--- a/packages/experiments-realm/TeamMember/847c1f4e-e0ae-43d3-a012-8ffaa66f5925.json
+++ b/packages/experiments-realm/TeamMember/847c1f4e-e0ae-43d3-a012-8ffaa66f5925.json
@@ -16,9 +16,9 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "TeamMember"
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/experiments-realm/TeamMember/f832cfb6-959e-4d0d-bc83-8712a36a910a.json b/packages/experiments-realm/TeamMember/f832cfb6-959e-4d0d-bc83-8712a36a910a.json
index c0963ed97a..098ecf72e8 100644
--- a/packages/experiments-realm/TeamMember/f832cfb6-959e-4d0d-bc83-8712a36a910a.json
+++ b/packages/experiments-realm/TeamMember/f832cfb6-959e-4d0d-bc83-8712a36a910a.json
@@ -16,9 +16,9 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "TeamMember"
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/experiments-realm/atom-examples.gts b/packages/experiments-realm/atom-examples.gts
new file mode 100644
index 0000000000..7e5d03ac98
--- /dev/null
+++ b/packages/experiments-realm/atom-examples.gts
@@ -0,0 +1,225 @@
+import { on } from '@ember/modifier';
+import { tracked } from '@glimmer/tracking';
+import {
+  contains,
+  containsMany,
+  field,
+  linksTo,
+  linksToMany,
+  CardDef,
+  Component,
+  FieldDef,
+  StringField,
+} from 'https://cardstack.com/base/card-api';
+import DateField from 'https://cardstack.com/base/date';
+import AtomIcon from '@cardstack/boxel-icons/atom';
+import { Button } from '@cardstack/boxel-ui/components';
+import { Author } from './author';
+import { Pet } from './pet';
+import { Country } from './country';
+import { TeamMember } from './sprint-task';
+import { Company } from './crm/company';
+import { Contact } from './crm/contact';
+import { ContactLinkField } from './fields/contact-link';
+
+class Isolated extends Component<typeof AtomExamples> {
+  <template>
+    <div class='atom-examples'>
+      <h2>Atom Template</h2>
+      <hr />
+      <section>
+        <h3>Contains & ContainsMany:</h3>
+        <div>
+          Name:
+          <@fields.name @format='atom' />
+        </div>
+        <div>
+          Names:
+          <@fields.names @format='atom' />
+        </div>
+        <div>
+          Date:
+          <@fields.date @format='atom' />
+        </div>
+        <div>
+          Dates:
+          <@fields.dates @format='atom' />
+        </div>
+      </section>
+      <hr />
+      <section>
+        <h3>Contains & ContainsMany - Compound Field:</h3>
+        <div>
+          Trip:
+          <@fields.trip @format='atom' />
+        </div>
+        <div>
+          Trips:
+          <@fields.trips @format='atom' />
+        </div>
+        <h4>Custom atom template:</h4>
+        <div>
+          Contact Link:
+          <@fields.contactLink @format='atom' />
+        </div>
+        <div>
+          Contact Links:
+          <@fields.contactLinks @format='atom' />
+        </div>
+      </section>
+      <hr />
+      <section>
+        <h3>LinksTo & LinksToMany:</h3>
+        <section>
+          <h4>Using default atom template for Pet card:</h4>
+          <div>
+            Pet:
+            {{#if @model.pet}}
+              <@fields.pet @format='atom' />
+            {{else}}
+              (Bug: CS-7734)
+            {{/if}}
+          </div>
+          <div>
+            Pets:
+            {{#if @model.pets}}
+              <@fields.pets @format='atom' />
+            {{else}}
+              (Bug: CS-7734)
+            {{/if}}
+          </div>
+          <h4>Default atom template without container:</h4>
+          <div>
+            Pet:
+            {{#if @model.pet}}
+              <@fields.pet @format='atom' @displayContainer={{false}} />
+            {{/if}}
+          </div>
+          <div>
+            Pets:
+            {{#if @model.pets}}
+              <@fields.pets @format='atom' @displayContainer={{false}} />
+            {{/if}}
+          </div>
+        </section>
+        <section>
+          <h4>Using custom atom template for Author card:</h4>
+          <div>
+            Author:
+            <@fields.author @format='atom' />
+          </div>
+          <div>
+            Authors:
+            <@fields.authors @format='atom' />
+          </div>
+          <h4>Custom atom template without container:</h4>
+          <div>
+            Author:
+            <@fields.author @format='atom' @displayContainer={{false}} />
+          </div>
+          <div>
+            Authors:
+            <@fields.authors @format='atom' @displayContainer={{false}} />
+          </div>
+        </section>
+      </section>
+      <hr />
+      <section>
+        <h3>More examples with custom atom template:</h3>
+        <Button {{on 'click' this.toggleContainer}}>Toggle Container</Button>
+        <div>
+          Team Member:
+          <@fields.teamMember
+            @format='atom'
+            @displayContainer={{this.displayContainer}}
+          />
+        </div>
+        <div>
+          Team Members:
+          <@fields.teamMembers
+            @format='atom'
+            @displayContainer={{this.displayContainer}}
+          />
+        </div>
+        <div>
+          Company:
+          <@fields.company
+            @format='atom'
+            @displayContainer={{this.displayContainer}}
+          />
+        </div>
+        <div>
+          Companies:
+          <@fields.companies
+            @format='atom'
+            @displayContainer={{this.displayContainer}}
+          />
+        </div>
+        <div>
+          Contact:
+          <@fields.contact
+            @format='atom'
+            @displayContainer={{this.displayContainer}}
+          />
+        </div>
+        <div>
+          Contacts:
+          <@fields.contacts
+            @format='atom'
+            @displayContainer={{this.displayContainer}}
+          />
+        </div>
+      </section>
+      <hr />
+    </div>
+    <style scoped>
+      .atom-examples {
+        padding: var(--boxel-sp-xl);
+        background-color: var(--boxel-100);
+      }
+      .atom-examples div + div {
+        margin-top: 1em;
+      }
+      button {
+        margin-bottom: 1em;
+      }
+    </style>
+  </template>
+
+  @tracked displayContainer = false;
+  toggleContainer = () => {
+    this.displayContainer = !this.displayContainer;
+  };
+}
+
+class Trip extends FieldDef {
+  static displayName = 'Trip';
+  @field title = contains(StringField);
+  @field country = linksTo(Country);
+  @field countries = linksToMany(Country);
+}
+
+export class AtomExamples extends CardDef {
+  static displayName = 'Atom Examples';
+  static icon = AtomIcon;
+  @field name = contains(StringField);
+  @field names = containsMany(StringField);
+  @field date = contains(DateField);
+  @field dates = containsMany(DateField);
+  @field author = linksTo(Author);
+  @field authors = linksToMany(Author);
+  @field pet = linksTo(Pet);
+  @field pets = linksToMany(Pet);
+  @field trip = contains(Trip);
+  @field trips = containsMany(Trip);
+  @field teamMember = linksTo(TeamMember);
+  @field teamMembers = linksToMany(TeamMember);
+  @field company = linksTo(Company);
+  @field companies = linksToMany(Company);
+  @field contact = linksTo(Contact);
+  @field contacts = linksToMany(Contact);
+  @field contactLink = contains(ContactLinkField);
+  @field contactLinks = containsMany(ContactLinkField);
+
+  static isolated = Isolated;
+}
diff --git a/packages/experiments-realm/components/activity-card.gts b/packages/experiments-realm/components/activity-card.gts
index b5277ff520..853e9a1819 100644
--- a/packages/experiments-realm/components/activity-card.gts
+++ b/packages/experiments-realm/components/activity-card.gts
@@ -1,12 +1,8 @@
 import GlimmerComponent from '@glimmer/component';
-import EntityDisplayWithThumbnail from './entity-thumbnail-display';
 
 interface ActivityCardArgs {
   Blocks: {
-    title?: [];
-    thumbnail?: [];
-    description?: [];
-    icon?: [];
+    header?: [];
     content?: [];
   };
   Element: HTMLElement;
@@ -15,34 +11,9 @@ interface ActivityCardArgs {
 export default class ActivityCard extends GlimmerComponent<ActivityCardArgs> {
   <template>
     <article class='activity-card' ...attributes>
-      <header class='activity-card-header'>
-        <div class='activity-card-title-desc-group'>
-          <EntityDisplayWithThumbnail>
-            <:title>
-              <span class='activity-card-title'>
-                {{yield to='title'}}
-              </span>
-            </:title>
-            <:thumbnail>
-              <span class='activity-card-thumbnail'>
-                {{yield to='thumbnail'}}
-              </span>
-            </:thumbnail>
-          </EntityDisplayWithThumbnail>
-
-          {{#if (has-block 'description')}}
-            <p class='activity-card-description'>
-              {{yield to='description'}}
-            </p>
-          {{/if}}
-        </div>
-
-        <div class='activity-card-icon'>
-          {{#if (has-block 'icon')}}
-            {{yield to='icon'}}
-          {{/if}}
-        </div>
-      </header>
+      {{#if (has-block 'header')}}
+        {{yield to='header'}}
+      {{/if}}
 
       <hr class='activity-card-divider' />
 
@@ -56,62 +27,15 @@ export default class ActivityCard extends GlimmerComponent<ActivityCardArgs> {
     <style scoped>
       .activity-card {
         background: var(--activity-card-bg, var(--boxel-light));
-        border: 1px solid var(--activity-card-border, var(--boxel-300));
-        border-radius: var(
-          --activity-card-border-radius,
-          var(--boxel-border-radius-xl)
-        );
         padding: var(--activity-card-padding, var(--boxel-sp-sm));
+        border: 1px solid var(--activity-card-border-color, transparent);
+        border-radius: var(--activity-card-border-radius, 0px);
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         gap: var(--activity-card-gap, 0);
         overflow: hidden;
         min-width: 0;
-        container-type: inline-size;
-      }
-      .activity-card-header {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--activity-card-header-gap, var(--boxel-sp-sm));
-      }
-      .activity-card-title-desc-group {
-        display: flex;
-        align-items: center;
-        gap: var(--activity-card-title-desc-group-gap, var(--boxel-sp-sm));
-      }
-      /* extend from entity-display */
-      .activity-card-thumbnail {
-        flex-shrink: 0;
-        width: var(--entity-display-thumbnail-size, var(--boxel-icon-sm));
-        height: var(--entity-display-thumbnail-size, var(--boxel-icon-sm));
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--entity-display-thumbnail-color, var(--boxel-600));
-      }
-      .activity-card-title {
-        font-size: var(
-          --activity-card-title-font-size,
-          var(--boxel-font-size-sm)
-        );
-        font-weight: var(--activity-card-title-font-weight, 600);
-        margin: 0;
-      }
-      .activity-card-description {
-        margin: 0;
-        font-size: var(
-          --activity-card-description-font-size,
-          var(--boxel-font-size-sm)
-        );
-        color: var(--activity-card-description-color, var(--boxel-400));
-      }
-      .activity-card-icon {
-        flex-shrink: 0;
-        width: var(--activity-card-icon-size, auto);
-        height: var(--activity-card-icon-size, auto);
       }
       .activity-card-divider {
         border-top: 1px solid
@@ -121,21 +45,6 @@ export default class ActivityCard extends GlimmerComponent<ActivityCardArgs> {
       .activity-card-content {
         padding: var(--activity-card-content-padding, var(--boxel-sp-sm));
       }
-
-      @container (max-width: 447px) {
-        .activity-card-header {
-          align-items: flex-start;
-        }
-
-        .activity-card-title-desc-group {
-          flex-direction: column;
-          align-items: flex-start;
-          gap: var(--boxel-sp-xxxs);
-        }
-        .activity-card-content {
-          padding: var(--activity-card-content-padding, 0);
-        }
-      }
     </style>
   </template>
 }
diff --git a/packages/experiments-realm/components/entity-icon-display.gts b/packages/experiments-realm/components/entity-icon-display.gts
index 73cc4142d1..847d46f8fa 100644
--- a/packages/experiments-realm/components/entity-icon-display.gts
+++ b/packages/experiments-realm/components/entity-icon-display.gts
@@ -77,10 +77,15 @@ export default class EntityDisplayWithIcon extends GlimmerComponent<EntityDispla
           --entity-display-title-font-size,
           var(--boxel-font-size-sm)
         );
+        --title-font-weight: var(--entity-display-title-font-weight, 600);
         --content-font-size: var(
           --entity-display-content-font-size,
           var(--boxel-font-size-xs)
         );
+        --content-font-weight: var(
+          --entity-display-content-font-weight,
+          var(--boxel-font-weight-normal)
+        );
         --content-color: var(--entity-display-content-color, var(--boxel-400));
         --content-gap: var(--entity-display-content-gap, var(--boxel-sp-xxxs));
         display: flex;
@@ -112,6 +117,7 @@ export default class EntityDisplayWithIcon extends GlimmerComponent<EntityDispla
       .entity-title {
         word-break: break-word;
         font-size: var(--title-font-size);
+        font-weight: var(--title-font-weight);
       }
       .entity-title.underline {
         text-decoration: underline;
@@ -119,6 +125,7 @@ export default class EntityDisplayWithIcon extends GlimmerComponent<EntityDispla
       .entity-content {
         margin: 0;
         font-size: var(--content-font-size);
+        font-weight: var(--content-font-weight);
         color: var(--content-color);
       }
     </style>
diff --git a/packages/experiments-realm/components/entity-thumbnail-display.gts b/packages/experiments-realm/components/entity-thumbnail-display.gts
index 26aac840e9..0d4f7ce3d7 100644
--- a/packages/experiments-realm/components/entity-thumbnail-display.gts
+++ b/packages/experiments-realm/components/entity-thumbnail-display.gts
@@ -80,10 +80,15 @@ export default class EntityDisplayWithThumbnail extends GlimmerComponent<EntityD
           --entity-display-title-font-size,
           var(--boxel-font-size-sm)
         );
+        --title-font-weight: var(--entity-display-title-font-weight, 600);
         --content-font-size: var(
           --entity-display-content-font-size,
           var(--boxel-font-size-xs)
         );
+        --content-font-weight: var(
+          --entity-display-content-font-weight,
+          var(--boxel-font-weight-normal)
+        );
         --content-color: var(--entity-display-content-color, var(--boxel-400));
         --content-gap: var(--entity-display-content-gap, var(--boxel-sp-xxxs));
         display: flex;
@@ -116,6 +121,7 @@ export default class EntityDisplayWithThumbnail extends GlimmerComponent<EntityD
       .entity-title {
         word-break: break-word;
         font-size: var(--title-font-size);
+        font-weight: var(--title-font-weight);
       }
       .entity-title.underline {
         text-decoration: underline;
@@ -123,6 +129,7 @@ export default class EntityDisplayWithThumbnail extends GlimmerComponent<EntityD
       .entity-content {
         margin: 0;
         font-size: var(--content-font-size);
+        font-weight: var(--content-font-weight);
         color: var(--content-color);
       }
     </style>
diff --git a/packages/experiments-realm/productivity/filter-display.gts b/packages/experiments-realm/components/filter/filter-display.gts
similarity index 100%
rename from packages/experiments-realm/productivity/filter-display.gts
rename to packages/experiments-realm/components/filter/filter-display.gts
diff --git a/packages/experiments-realm/productivity/filter-dropdown-item.gts b/packages/experiments-realm/components/filter/filter-dropdown-item.gts
similarity index 100%
rename from packages/experiments-realm/productivity/filter-dropdown-item.gts
rename to packages/experiments-realm/components/filter/filter-dropdown-item.gts
diff --git a/packages/experiments-realm/productivity/filter-dropdown.gts b/packages/experiments-realm/components/filter/filter-dropdown.gts
similarity index 100%
rename from packages/experiments-realm/productivity/filter-dropdown.gts
rename to packages/experiments-realm/components/filter/filter-dropdown.gts
diff --git a/packages/experiments-realm/productivity/filter-trigger.gts b/packages/experiments-realm/components/filter/filter-trigger.gts
similarity index 100%
rename from packages/experiments-realm/productivity/filter-trigger.gts
rename to packages/experiments-realm/components/filter/filter-trigger.gts
diff --git a/packages/experiments-realm/crm-app.gts b/packages/experiments-realm/crm-app.gts
index ec76d16ae6..9b62afae09 100644
--- a/packages/experiments-realm/crm-app.gts
+++ b/packages/experiments-realm/crm-app.gts
@@ -23,13 +23,20 @@ import {
 } from '@cardstack/boxel-ui/components';
 import { IconPlus } from '@cardstack/boxel-ui/icons';
 import { AppCard, Tab } from './app-card';
-import { Query, CardError, SupportedMimeType } from '@cardstack/runtime-common';
+import {
+  Query,
+  CardError,
+  SupportedMimeType,
+  getCards,
+} from '@cardstack/runtime-common';
 import ContactIcon from '@cardstack/boxel-icons/contact';
 import HeartHandshakeIcon from '@cardstack/boxel-icons/heart-handshake';
 import TargetArrowIcon from '@cardstack/boxel-icons/target-arrow';
 import CalendarExclamation from '@cardstack/boxel-icons/calendar-exclamation';
 import { urgencyTagValues } from './crm/account';
 import { dealStatusValues } from './crm/deal';
+import type { Deal } from './crm/deal';
+import DealSummary from './crm/deal-summary';
 
 type ViewOption = 'card' | 'strip' | 'grid';
 
@@ -101,12 +108,14 @@ class CrmAppTemplate extends Component<typeof AppCard> {
   @tracked private activeFilter: LayoutFilter = CONTACT_FILTERS[0];
   @action private onFilterChange(filter: LayoutFilter) {
     this.activeFilter = filter;
+    this.loadDealCards.perform();
   }
   //tabs
   @tracked activeTabId: string | undefined = this.args.model.tabs?.[0]?.tabId;
   @tracked tabs = this.args.model.tabs;
   @tracked private selectedView: ViewOption = 'card';
   @tracked private searchKey = '';
+  @tracked private deals: Deal[] = [];
 
   constructor(owner: Owner, args: any) {
     super(owner, args);
@@ -152,6 +161,20 @@ class CrmAppTemplate extends Component<typeof AppCard> {
     }
   });
 
+  private loadDealCards = restartableTask(async () => {
+    if (!this.query || this.activeTabId !== 'Deal') {
+      return;
+    }
+
+    const result = getCards(this.query, this.realmHrefs, {
+      isLive: true,
+    });
+
+    await result.loaded;
+    this.deals = result.instances as Deal[];
+    return result;
+  });
+
   get filters() {
     return this.filterMap.get(this.activeTabId!)!;
   }
@@ -165,6 +188,7 @@ class CrmAppTemplate extends Component<typeof AppCard> {
     this.activeTabId = id;
     this.searchKey = '';
     this.setActiveFilter();
+    this.loadDealCards.perform();
   }
   get headerColor() {
     return (
@@ -194,6 +218,9 @@ class CrmAppTemplate extends Component<typeof AppCard> {
   private get realms() {
     return [this.currentRealm!];
   }
+  get realmHrefs() {
+    return [this.currentRealm!.href];
+  }
 
   //create
   @action private createNew() {
@@ -262,10 +289,6 @@ class CrmAppTemplate extends Component<typeof AppCard> {
                 on: activeFilter.cardRef,
                 contains: { name: searchKey },
               },
-              {
-                on: activeFilter.cardRef,
-                contains: { 'company.name': searchKey },
-              },
             ],
           },
         ]
@@ -360,6 +383,11 @@ class CrmAppTemplate extends Component<typeof AppCard> {
             {{this.activeFilter.createNewButtonText}}
           </BoxelButton>
         {{/if}}
+        {{#if (eq this.activeTabId 'Deal')}}
+          <div class='content-header-deal-summary'>
+            <DealSummary @deals={{this.deals}} />
+          </div>
+        {{/if}}
         <div class='search-bar content-header-row-2'>
           <SearchInput
             @placeholder={{this.searchPlaceholder}}
@@ -420,6 +448,10 @@ class CrmAppTemplate extends Component<typeof AppCard> {
       .content-header-row-1 {
         margin-top: var(--boxel-sp-xs);
       }
+      .content-header-deal-summary {
+        width: 100%;
+        margin-top: var(--boxel-sp-lg);
+      }
       .content-header-row-2 {
         margin-top: var(--boxel-sp-lg);
       }
diff --git a/packages/experiments-realm/crm/account.gts b/packages/experiments-realm/crm/account.gts
index edf0725047..9d88ac21f2 100644
--- a/packages/experiments-realm/crm/account.gts
+++ b/packages/experiments-realm/crm/account.gts
@@ -25,13 +25,8 @@ import ContactIcon from '@cardstack/boxel-icons/contact';
 import CalendarExclamation from '@cardstack/boxel-icons/calendar-exclamation';
 import { LooseGooseyField } from '../loosey-goosey';
 import { StatusPill } from '../components/status-pill';
-import { Avatar, Pill, BoxelButton } from '@cardstack/boxel-ui/components';
-import EntityDisplayWithIcon from '../components/entity-icon-display';
-import EntityDisplayWithThumbnail from '../components/entity-thumbnail-display';
-import ActivityCard from '../components/activity-card';
+import { BoxelButton } from '@cardstack/boxel-ui/components';
 import PlusIcon from '@cardstack/boxel-icons/plus';
-import PhoneIcon from '@cardstack/boxel-icons/phone';
-import SquareUser from '@cardstack/boxel-icons/square-user';
 import CalendarTime from '@cardstack/boxel-icons/calendar-time';
 import ClockExclamation from '@cardstack/boxel-icons/clock-exclamation';
 import Clock24 from '@cardstack/boxel-icons/clock-24';
@@ -274,56 +269,7 @@ class IsolatedTemplate extends Component<typeof Account> {
             </BoxelButton>
           </:icon>
           <:content>
-            <ActivityCard>
-              <:thumbnail>
-                <PhoneIcon />
-              </:thumbnail>
-              <:title>
-                Customer Call
-              </:title>
-              <:icon>
-                <Pill class='activity-pill'>
-                  Left VoiceMail
-                </Pill>
-              </:icon>
-              <:description>
-                Discuss Q3 product roadmap
-              </:description>
-              <:content>
-                <div class='activity-card-group'>
-                  <EntityDisplayWithIcon @title='Technova'>
-                    <:icon>
-                      <SquareUser />
-                    </:icon>
-                    <:content>
-                      Technova
-                    </:content>
-                  </EntityDisplayWithIcon>
-                  <EntityDisplayWithThumbnail @title='Rep: Janus Dios'>
-                    <:thumbnail>
-                      <Avatar
-                        @thumbnailURL='https://images.pexels.com/photos/1624229/pexels-photo-1624229.jpeg?auto=compress&cs=tinysrgb&w=300&h=300&dpr=2'
-                        class='avatar'
-                      />
-                    </:thumbnail>
-                    <:content>
-                      Sales Associate
-                    </:content>
-                  </EntityDisplayWithThumbnail>
-                  <EntityDisplayWithIcon
-                    class='activity-time'
-                    @title='May 15, 2024'
-                  >
-                    <:icon>
-                      <CalendarTime />
-                    </:icon>
-                    <:content>
-                      3:15pm
-                    </:content>
-                  </EntityDisplayWithIcon>
-                </div>
-              </:content>
-            </ActivityCard>
+            {{! remove activity mock }}
           </:content>
         </SummaryCard>
       </:activities>
diff --git a/packages/experiments-realm/crm/contact.gts b/packages/experiments-realm/crm/contact.gts
index 8d29b1c062..b5afa3db3b 100644
--- a/packages/experiments-realm/crm/contact.gts
+++ b/packages/experiments-realm/crm/contact.gts
@@ -48,9 +48,7 @@ export class SocialLinkField extends ContactLinkField {
 
 class EmbeddedTemplate extends Component<typeof Contact> {
   get hasSocialLinks() {
-    return (
-      this.args.model.socialLinks && this.args.model.socialLinks.length > 0
-    );
+    return Boolean(this.args.model?.socialLinks?.length);
   }
 
   <template>
@@ -120,9 +118,7 @@ class EmbeddedTemplate extends Component<typeof Contact> {
 
 class FittedTemplate extends Component<typeof Contact> {
   get hasSocialLinks() {
-    return (
-      this.args.model.socialLinks && this.args.model.socialLinks.length > 0
-    );
+    return Boolean(this.args.model?.socialLinks?.length);
   }
 
   <template>
diff --git a/packages/experiments-realm/crm/deal-summary.gts b/packages/experiments-realm/crm/deal-summary.gts
new file mode 100644
index 0000000000..6e1a35178e
--- /dev/null
+++ b/packages/experiments-realm/crm/deal-summary.gts
@@ -0,0 +1,153 @@
+import Component from '@glimmer/component';
+
+import type { Deal } from './deal';
+import SummaryCard from '../components/summary-card';
+import SummaryGridContainer from '../components/summary-grid-container';
+
+import TrendingUpIcon from '@cardstack/boxel-icons/trending-up';
+import CalculatorIcon from '@cardstack/boxel-icons/calculator';
+import NumbersIcon from '@cardstack/boxel-icons/numbers';
+import ChartCovariateIcon from '@cardstack/boxel-icons/chart-covariate';
+
+interface Signature {
+  Args: {
+    deals: Deal[];
+  };
+}
+
+function formatCurrencyValue(value: number, currencySymbol: string) {
+  return `${currencySymbol} ${value.toLocaleString('en-US')}`;
+}
+
+export class DealSummary extends Component<Signature> {
+  get deals() {
+    return this.args.deals;
+  }
+
+  get dealSummaries() {
+    if (!this.deals || this.deals.length === 0) {
+      return undefined;
+    }
+
+    // TODO: In future we might need to deal with different currencies
+    // We assume currently is all the same
+
+    const currencySymbol = this.deals[0].computedValue?.currency.symbol;
+
+    let totalDealValue = 0;
+    let totalDealCount = this.deals.length;
+    let predictedRevenue = 0;
+
+    for (let deal of this.deals) {
+      totalDealValue += deal.computedValue?.amount ?? 0;
+      predictedRevenue += deal.predictedRevenue?.amount ?? 0;
+    }
+
+    const averageDealSize = totalDealValue / totalDealCount || 0;
+
+    return {
+      totalDealValue: formatCurrencyValue(totalDealValue, currencySymbol),
+      totalDealCount,
+      predictedRevenue: formatCurrencyValue(predictedRevenue, currencySymbol),
+      averageDealSize: formatCurrencyValue(averageDealSize, currencySymbol),
+    };
+  }
+
+  <template>
+    <SummaryGridContainer>
+      <SummaryCard>
+        <:title>
+          <h3 class='summary-title'>Total Deal Value</h3>
+        </:title>
+        <:icon>
+          <TrendingUpIcon class='header-icon' />
+        </:icon>
+        <:content>
+          <div class='value'>
+            {{#if this.dealSummaries}}
+              {{this.dealSummaries.totalDealValue}}
+            {{else}}
+              -
+            {{/if}}
+          </div>
+        </:content>
+      </SummaryCard>
+      <SummaryCard>
+        <:title>
+          <h3 class='summary-title'>Average Deal Size</h3>
+        </:title>
+        <:icon>
+          <CalculatorIcon class='header-icon' />
+        </:icon>
+        <:content>
+          <div class='value'>
+            {{#if this.dealSummaries}}
+              {{this.dealSummaries.averageDealSize}}
+            {{else}}
+              -
+            {{/if}}
+          </div>
+        </:content>
+      </SummaryCard>
+      <SummaryCard>
+        <:title>
+          <h3 class='summary-title'>Deal Count</h3>
+        </:title>
+        <:icon>
+          <NumbersIcon class='header-icon' />
+        </:icon>
+        <:content>
+          <div class='value'>
+            {{#if this.dealSummaries}}
+              {{this.dealSummaries.totalDealCount}}
+            {{else}}
+              -
+            {{/if}}
+          </div>
+        </:content>
+      </SummaryCard>
+      <SummaryCard>
+        <:title>
+          <h3 class='summary-title'>Predicted Revenue</h3>
+        </:title>
+        <:icon>
+          <ChartCovariateIcon class='header-icon' />
+        </:icon>
+        <:content>
+          <div class='value'>
+            {{#if this.dealSummaries}}
+              {{this.dealSummaries.predictedRevenue}}
+            {{else}}
+              -
+            {{/if}}
+          </div>
+        </:content>
+      </SummaryCard>
+    </SummaryGridContainer>
+    <style scoped>
+      h1,
+      h2,
+      h3,
+      h4,
+      p {
+        margin: 0;
+      }
+      .summary-title {
+        font: 600 var(--boxel-font-sm);
+        letter-spacing: var(--boxel-lsp-sm);
+      }
+      .header-icon {
+        width: var(--boxel-icon-sm);
+        height: var(--boxel-icon-sm);
+        flex-shrink: 0;
+        margin-left: auto;
+      }
+      .value {
+        font: 600 var(--boxel-font-xl);
+        letter-spacing: var(--boxel-lsp-xs);
+      }
+    </style>
+  </template>
+}
+
+export default DealSummary;
diff --git a/packages/experiments-realm/crm/deal.gts b/packages/experiments-realm/crm/deal.gts
index c892f4f4d7..58e9e12d51 100644
--- a/packages/experiments-realm/crm/deal.gts
+++ b/packages/experiments-realm/crm/deal.gts
@@ -982,6 +982,12 @@ export class Deal extends CardDef {
       return this.account?.company;
     },
   });
+  @field title = contains(StringField, {
+    computeVia: function (this: Deal) {
+      return this.name;
+    },
+  });
+
   static isolated = IsolatedTemplate;
   static fitted = FittedTemplate;
 }
diff --git a/packages/experiments-realm/date-range-field.gts b/packages/experiments-realm/fields/date-range-field.gts
similarity index 100%
rename from packages/experiments-realm/date-range-field.gts
rename to packages/experiments-realm/fields/date-range-field.gts
diff --git a/packages/experiments-realm/sprint-planner.gts b/packages/experiments-realm/sprint-planner.gts
index 59449c1958..ba43847d6e 100644
--- a/packages/experiments-realm/sprint-planner.gts
+++ b/packages/experiments-realm/sprint-planner.gts
@@ -24,19 +24,13 @@ import { IconPlus } from '@cardstack/boxel-ui/icons';
 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 '/experiments/app-card';
-import {
-  SprintTaskStatusField,
-  Project,
-  SprintTask,
-} from './productivity/task';
-import { FilterDropdown } from './productivity/filter-dropdown';
-import { StatusPill } from './productivity/filter-dropdown-item';
-import { FilterTrigger } from './productivity/filter-trigger';
+import { SprintTaskStatusField, Project, SprintTask } from './sprint-task';
+import { FilterDropdown } from './components/filter/filter-dropdown';
+import { StatusPill } from './components/filter/filter-dropdown-item';
+import { FilterTrigger } from './components/filter/filter-trigger';
 import getKanbanResource from './kanban-resource';
-import { FilterDisplay } from './productivity/filter-display';
-import Checklist from '@cardstack/boxel-icons/checklist';
+import { FilterDisplay } from './components/filter/filter-display';
+import LayoutKanbanIcon from '@cardstack/boxel-icons/layout-kanban';
 import RectangleEllipsis from '@cardstack/boxel-icons/rectangle-ellipsis';
 import User from '@cardstack/boxel-icons/user';
 import { eq, not } from '@cardstack/boxel-ui/helpers';
@@ -57,7 +51,7 @@ export interface SelectedItem {
   index?: number;
 }
 
-class SprintPlannerIsolated extends Component<typeof AppCard> {
+class SprintPlannerIsolated extends Component<typeof SprintPlanner> {
   @tracked loadingColumnKey: string | undefined;
   @tracked selectedFilter: FilterType | undefined;
   filters = {
@@ -65,7 +59,7 @@ class SprintPlannerIsolated extends Component<typeof AppCard> {
       searchKey: 'label',
       label: 'Status',
       codeRef: {
-        module: new URL('./productivity/task', import.meta.url).href,
+        module: new URL('./sprint-task', import.meta.url).href,
         name: 'Status',
       },
       options: () => SprintTaskStatusField.values,
@@ -74,7 +68,7 @@ class SprintPlannerIsolated extends Component<typeof AppCard> {
       searchKey: 'name',
       label: 'Assignee',
       codeRef: {
-        module: new URL('./productivity/task', import.meta.url).href,
+        module: new URL('./sprint-task', import.meta.url).href,
         name: 'TeamMember',
       },
       options: () => this.assigneeCards,
@@ -167,7 +161,7 @@ class SprintPlannerIsolated extends Component<typeof AppCard> {
 
   get assignedTaskCodeRef() {
     return {
-      module: new URL('./productivity/task', import.meta.url).href,
+      module: new URL('./sprint-task', import.meta.url).href,
       name: 'SprintTask',
     };
   }
@@ -257,7 +251,7 @@ class SprintPlannerIsolated extends Component<typeof AppCard> {
             },
             project: {
               links: {
-                self: this.currentProject.id ?? null,
+                self: this.currentProject?.id ?? null,
               },
             },
           },
@@ -364,6 +358,9 @@ class SprintPlannerIsolated extends Component<typeof AppCard> {
   }
 
   @action viewCard() {
+    if (!this.args.model.id) {
+      throw new Error('No card id');
+    }
     this.args.context?.actions?.viewCard?.(new URL(this.args.model.id), 'edit');
   }
 
@@ -630,9 +627,9 @@ class ColumnHeader extends GlimmerComponent<ColumnHeaderSignature> {
   }
 }
 
-export class SprintPlanner extends AppCard {
+export class SprintPlanner extends CardDef {
   static displayName = 'Sprint Planner';
-  static icon = Checklist;
+  static icon = LayoutKanbanIcon;
   static headerColor = '#ff7f7b';
   static prefersWideFormat = true;
   static isolated = SprintPlannerIsolated;
diff --git a/packages/experiments-realm/productivity/task.gts b/packages/experiments-realm/sprint-task.gts
similarity index 99%
rename from packages/experiments-realm/productivity/task.gts
rename to packages/experiments-realm/sprint-task.gts
index dc0adffd83..39e8d48585 100644
--- a/packages/experiments-realm/productivity/task.gts
+++ b/packages/experiments-realm/sprint-task.gts
@@ -18,8 +18,8 @@ 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 { User } from '../user';
-import { Task, TaskStatusField, getDueDateStatus } from '../task';
+import { User } from './user';
+import { Task, TaskStatusField, getDueDateStatus } from './task';
 
 export class Team extends CardDef {
   static displayName = 'Team';
@@ -193,7 +193,7 @@ class TaskIsolated extends Component<typeof SprintTask> {
         <div class='left-column'>
           <h4>Description</h4>
           {{#if @model.details}}
-            <p>{{@model.details}}</p>
+            <@fields.details />
           {{else}}
             <span class='no-data-found-txt'>No Task Description Provided</span>
           {{/if}}
diff --git a/packages/experiments-realm/task.gts b/packages/experiments-realm/task.gts
index 9682e5fc2a..cd3361e31c 100644
--- a/packages/experiments-realm/task.gts
+++ b/packages/experiments-realm/task.gts
@@ -11,7 +11,7 @@ import NumberField from 'https://cardstack.com/base/number';
 
 import BooleanField from 'https://cardstack.com/base/boolean';
 
-import DateRangeField from './date-range-field';
+import DateRangeField from './fields/date-range-field';
 import { Tag } from './tag';
 import { User } from './user';
 import { BoxelSelect } from '@cardstack/boxel-ui/components';
diff --git a/packages/experiments-realm/todo.gts b/packages/experiments-realm/todo.gts
index df1d3006f7..5b57076313 100644
--- a/packages/experiments-realm/todo.gts
+++ b/packages/experiments-realm/todo.gts
@@ -4,10 +4,10 @@ import {
   contains,
   StringField,
 } from 'https://cardstack.com/base/card-api';
-import TextAreaCard from 'https://cardstack.com/base/text-area';
+import MarkdownField from 'https://cardstack.com/base/markdown';
 
 export class Todo extends CardDef {
   static displayName = 'Todo';
   @field name = contains(StringField);
-  @field details = contains(TextAreaCard);
+  @field details = contains(MarkdownField);
 }
diff --git a/packages/host/app/commands/copy-card.ts b/packages/host/app/commands/copy-card.ts
new file mode 100644
index 0000000000..3d6028487d
--- /dev/null
+++ b/packages/host/app/commands/copy-card.ts
@@ -0,0 +1,71 @@
+import { service } from '@ember/service';
+
+import type * as BaseCommandModule from 'https://cardstack.com/base/command';
+
+import HostBaseCommand from '../lib/host-base-command';
+
+import type CardService from '../services/card-service';
+import type OperatorModeStateService from '../services/operator-mode-state-service';
+import type RealmService from '../services/realm';
+
+export default class CopyCardCommand extends HostBaseCommand<
+  BaseCommandModule.CopyCardInput,
+  BaseCommandModule.CopyCardResult
+> {
+  @service private declare cardService: CardService;
+  @service private declare operatorModeStateService: OperatorModeStateService;
+  @service private declare realm: RealmService;
+
+  description = 'Copy a card to a realm';
+
+  async getInputType() {
+    let commandModule = await this.loadCommandModule();
+    const { CopyCardInput } = commandModule;
+    return CopyCardInput;
+  }
+
+  protected async run(
+    input: BaseCommandModule.CopyCardInput,
+  ): Promise<BaseCommandModule.CopyCardResult> {
+    const realmUrl = await this.determineTargetRealmUrl(input);
+    const newCard = await this.cardService.copyCard(
+      input.sourceCard,
+      new URL(realmUrl),
+    );
+    let commandModule = await this.loadCommandModule();
+    const { CopyCardResult } = commandModule;
+    return new CopyCardResult({ newCard });
+  }
+
+  private async determineTargetRealmUrl({
+    targetStackIndex,
+    targetRealmUrl,
+  }: BaseCommandModule.CopyCardInput) {
+    if (targetRealmUrl !== undefined && targetStackIndex !== undefined) {
+      console.warn(
+        'Both targetStackIndex and targetRealmUrl are set; only one should be set; using targetRealmUrl',
+      );
+    }
+    let realmUrl = targetRealmUrl;
+    if (realmUrl) {
+      return realmUrl;
+    }
+    if (targetStackIndex !== undefined) {
+      // use existing card in stack to determine realm url,
+      let topCard =
+        this.operatorModeStateService.topMostStackItems()[targetStackIndex]
+          ?.card;
+      if (topCard) {
+        let url = await this.cardService.getRealmURL(topCard);
+        // open card might be from a realm in which we don't have write permissions
+        if (url && this.realm.canWrite(url.href)) {
+          return url.href;
+        }
+      }
+    }
+    if (!this.realm.defaultWritableRealm) {
+      throw new Error('Could not find a writable realm');
+    }
+    return this.realm.defaultWritableRealm.path;
+  }
+}
diff --git a/packages/host/app/commands/get-boxel-ui-state.ts b/packages/host/app/commands/get-boxel-ui-state.ts
new file mode 100644
index 0000000000..9af8caba2b
--- /dev/null
+++ b/packages/host/app/commands/get-boxel-ui-state.ts
@@ -0,0 +1,27 @@
+import { inject as service } from '@ember/service';
+
+import { GetBoxelUIStateResult } from 'https://cardstack.com/base/command';
+
+import HostBaseCommand from '../lib/host-base-command';
+
+import type OperatorModeStateService from '../services/operator-mode-state-service';
+
+export default class GetBoxelUIStateCommand extends HostBaseCommand<
+  undefined,
+  GetBoxelUIStateResult
+> {
+  @service declare operatorModeStateService: OperatorModeStateService;
+  static displayName = 'GetBoxelUIStateCommand';
+  description =
+    'Get information about the current state of the Boxel UI, including the current submode, what cards are open, and what room, if any, the AI assistant is showing.';
+  async getInputType() {
+    return undefined;
+  }
+  protected async run() {
+    let commandModule = await this.loadCommandModule();
+    const { GetBoxelUIStateResult } = commandModule;
+    return new GetBoxelUIStateResult({
+      submode: this.operatorModeStateService.state.submode,
+    });
+  }
+}
diff --git a/packages/host/app/commands/index.ts b/packages/host/app/commands/index.ts
index b06b3f8b69..f7c0bfa554 100644
--- a/packages/host/app/commands/index.ts
+++ b/packages/host/app/commands/index.ts
@@ -1,6 +1,7 @@
 import { VirtualNetwork } from '@cardstack/runtime-common';
 
 import * as AddSkillsToRoomCommandModule from './add-skills-to-room';
+import * as CopyCardCommandModule from './copy-card';
 import * as CreateAIAssistantRoomCommandModule from './create-ai-assistant-room';
 import * as OpenAiAssistantRoomCommandModule from './open-ai-assistant-room';
 import * as PatchCardCommandModule from './patch-card';
@@ -17,6 +18,10 @@ export function shimHostCommands(virtualNetwork: VirtualNetwork) {
     '@cardstack/boxel-host/commands/add-skills-to-room',
     AddSkillsToRoomCommandModule,
   );
+  virtualNetwork.shimModule(
+    '@cardstack/boxel-host/commands/copy-card',
+    CopyCardCommandModule,
+  );
   virtualNetwork.shimModule(
     '@cardstack/boxel-host/commands/create-ai-assistant-room',
     CreateAIAssistantRoomCommandModule,
diff --git a/packages/host/app/components/card-pill.gts b/packages/host/app/components/card-pill.gts
index ee113c0ba1..f3fb547b1f 100644
--- a/packages/host/app/components/card-pill.gts
+++ b/packages/host/app/components/card-pill.gts
@@ -54,7 +54,7 @@ export default class CardPill extends Component<CardPillSignature> {
       </:iconLeft>
       <:default>
         <div class='card-content' title={{@card.title}}>
-          <this.component @format='atom' @displayContainer={{false}} />
+          {{@card.title}}
         </div>
       </:default>
       <:iconRight>
@@ -89,6 +89,7 @@ export default class CardPill extends Component<CardPillSignature> {
         --boxel-realm-icon-size: var(--pill-icon-size);
         border: 1px solid var(--boxel-400);
         height: var(--pill-height, 1.875rem);
+        overflow: hidden;
       }
       .is-autoattached {
         border-style: dashed;
@@ -97,19 +98,12 @@ export default class CardPill extends Component<CardPillSignature> {
         display: none;
       }
       .card-content {
-        display: flex;
         max-width: 100px;
+        max-height: 100%;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
-      .card-content > :deep(.atom-format) {
-        background: none;
-        border-radius: 0;
-        white-space: inherit;
-        overflow: inherit;
-        text-overflow: inherit;
-      }
       .remove-button {
         --boxel-icon-button-width: var(--boxel-icon-sm);
         --boxel-icon-button-height: var(--boxel-icon-sm);
diff --git a/packages/host/app/components/matrix/room-message-command.gts b/packages/host/app/components/matrix/room-message-command.gts
new file mode 100644
index 0000000000..65498df15b
--- /dev/null
+++ b/packages/host/app/components/matrix/room-message-command.gts
@@ -0,0 +1,324 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import { cached } from '@glimmer/tracking';
+
+import { task } from 'ember-concurrency';
+
+import perform from 'ember-concurrency/helpers/perform';
+import { modifier } from 'ember-modifier';
+
+import { resource, use } from 'ember-resources';
+
+import { TrackedObject } from 'tracked-built-ins';
+
+import {
+  Button,
+  CardContainer,
+  CardHeader,
+} from '@cardstack/boxel-ui/components';
+
+import { MenuItem, cn } from '@cardstack/boxel-ui/helpers';
+import { ArrowLeft, Copy as CopyIcon } from '@cardstack/boxel-ui/icons';
+
+import { cardTypeDisplayName, cardTypeIcon } from '@cardstack/runtime-common';
+
+import CopyCardCommand from '@cardstack/host/commands/copy-card';
+import ShowCardCommand from '@cardstack/host/commands/show-card';
+import MessageCommand from '@cardstack/host/lib/matrix-classes/message-command';
+import type { MonacoEditorOptions } from '@cardstack/host/modifiers/monaco';
+import monacoModifier from '@cardstack/host/modifiers/monaco';
+import type 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 type { CardDef } from 'https://cardstack.com/base/card-api';
+
+import ApplyButton from '../ai-assistant/apply-button';
+import { type ApplyButtonState } from '../ai-assistant/apply-button';
+import Preview from '../preview';
+
+interface Signature {
+  Element: HTMLDivElement;
+  Args: {
+    messageCommand: MessageCommand;
+    messageIndex: number | undefined;
+    roomId: string;
+    runCommand: () => void;
+    isError?: boolean;
+    isPending?: boolean;
+    isDisplayingCode: boolean;
+    failedCommandState: Error | undefined;
+    monacoSDK: MonacoSDK;
+    onToggleViewCode: () => void;
+    currentEditor: number | undefined;
+  };
+}
+
+export default class RoomMessageCommand extends Component<Signature> {
+  @service private declare commandService: CommandService;
+  @service private declare matrixService: MatrixService;
+  @service private declare monacoService: MonacoService;
+
+  editorDisplayOptions: MonacoEditorOptions = {
+    wordWrap: 'on',
+    wrappingIndent: 'indent',
+    fontWeight: 'bold',
+    scrollbar: {
+      alwaysConsumeMouseWheel: false,
+    },
+  };
+
+  private get previewCommandCode() {
+    let { name, payload } = this.args.messageCommand;
+    return JSON.stringify({ name, payload }, null, 2);
+  }
+
+  private copyToClipboard = task(async () => {
+    await navigator.clipboard.writeText(this.previewCommandCode);
+  });
+
+  @cached
+  private get applyButtonState(): ApplyButtonState {
+    if (this.args.failedCommandState) {
+      return 'failed';
+    }
+    return this.args.messageCommand?.status ?? 'ready';
+  }
+
+  @use private commandResultCard = resource(() => {
+    let initialState = { card: undefined } as { card: CardDef | undefined };
+    let state = new TrackedObject(initialState);
+    if (this.args.messageCommand.commandResultCardDoc !== undefined) {
+      this.args.messageCommand.getCommandResultCard().then((card) => {
+        state.card = card;
+      });
+    }
+    return state;
+  });
+
+  // TODO need to reevalutate this modifier--do we want to hijack the scroll
+  // when the user views the code?
+  private scrollBottomIntoView = modifier((element: HTMLElement) => {
+    if (this.args.currentEditor !== this.args.messageIndex) {
+      return;
+    }
+
+    let height = this.monacoService.getContentHeight();
+    if (!height || height < 0) {
+      return;
+    }
+    element.style.height = `${height}px`;
+
+    let outerContainer = document.getElementById(
+      `message-container-${this.args.messageIndex}`,
+    );
+    if (!outerContainer) {
+      return;
+    }
+    this.scrollIntoView(outerContainer);
+  });
+
+  private scrollIntoView(element: HTMLElement) {
+    let { top, bottom } = element.getBoundingClientRect();
+    let isVerticallyInView = top >= 0 && bottom <= window.innerHeight;
+
+    if (!isVerticallyInView) {
+      element.scrollIntoView({ block: 'end' });
+    }
+  }
+
+  private get headerTitle() {
+    if (this.commandResultCard.card) {
+      return cardTypeDisplayName(this.commandResultCard.card);
+    }
+    return '';
+  }
+
+  private get moreOptionsMenuItems() {
+    let menuItems: MenuItem[] = [
+      new MenuItem('Copy to Workspace', 'action', {
+        action: () => this.copyToWorkspace(),
+        icon: ArrowLeft,
+      }),
+    ];
+    return menuItems;
+  }
+
+  @action async copyToWorkspace() {
+    let { commandContext } = this.commandService;
+    const { newCard } = await new CopyCardCommand(commandContext).execute({
+      sourceCard: this.commandResultCard.card as CardDef,
+    });
+
+    let showCardCommand = new ShowCardCommand(commandContext);
+    await showCardCommand.execute({
+      cardToShow: newCard,
+    });
+  }
+
+  <template>
+    <div class={{cn is-pending=@isPending is-error=@isError}} ...attributes>
+      <div
+        class='command-button-bar'
+        {{! In test, if we change this isIdle check to the task running locally on this component, it will fail because roomMessages get destroyed during re-indexing.
+              Since services are long-lived so it we will not have this issue. I think this will go away when we convert our room field into a room component }}
+        {{! TODO: Convert to non-EC async method after fixing CS-6987 }}
+        data-test-command-card-idle={{this.commandService.run.isIdle}}
+      >
+        <Button
+          class='view-code-button'
+          {{on 'click' @onToggleViewCode}}
+          @kind={{if @isDisplayingCode 'primary-dark' 'secondary-dark'}}
+          @size='extra-small'
+          data-test-view-code-button
+        >
+          {{if @isDisplayingCode 'Hide Code' 'View Code'}}
+        </Button>
+        <ApplyButton
+          @state={{this.applyButtonState}}
+          {{on 'click' @runCommand}}
+          data-test-command-apply={{this.applyButtonState}}
+        />
+      </div>
+      {{#if @isDisplayingCode}}
+        <div class='preview-code'>
+          <Button
+            class='copy-to-clipboard-button'
+            @kind='text-only'
+            @size='extra-small'
+            {{on 'click' (perform this.copyToClipboard)}}
+            data-test-copy-code
+          >
+            <CopyIcon
+              width='16'
+              height='16'
+              role='presentation'
+              aria-hidden='true'
+            />
+            Copy to clipboard
+          </Button>
+          <div
+            class='monaco-container'
+            {{this.scrollBottomIntoView}}
+            {{monacoModifier
+              content=this.previewCommandCode
+              contentChanged=undefined
+              monacoSDK=@monacoSDK
+              language='json'
+              readOnly=true
+              darkTheme=true
+              editorDisplayOptions=this.editorDisplayOptions
+            }}
+            data-test-editor
+            data-test-percy-hide
+          />
+        </div>
+      {{/if}}
+      {{#if this.commandResultCard.card}}
+        <CardContainer
+          @displayBoundaries={{false}}
+          class='command-result-card-preview'
+          data-test-command-result-container
+        >
+          <CardHeader
+            @cardTypeDisplayName={{this.headerTitle}}
+            @cardTypeIcon={{cardTypeIcon this.commandResultCard.card}}
+            @moreOptionsMenuItems={{this.moreOptionsMenuItems}}
+            class='header'
+            data-test-command-result-header
+          />
+          <Preview
+            @card={{this.commandResultCard.card}}
+            @format='embedded'
+            @displayContainer={{false}}
+            data-test-boxel-command-result
+          />
+        </CardContainer>
+      {{/if}}
+    </div>
+    <style scoped>
+      .is-pending .view-code-button,
+      .is-error .view-code-button {
+        background: var(--boxel-200);
+        color: var(--boxel-500);
+      }
+      .command-button-bar {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--boxel-sp-xs);
+        margin-top: var(--boxel-sp);
+      }
+      .view-code-button {
+        --boxel-button-font: 600 var(--boxel-font-xs);
+        --boxel-button-min-height: 1.5rem;
+        --boxel-button-padding: 0 var(--boxel-sp-xs);
+        min-width: initial;
+        width: auto;
+        max-height: 1.5rem;
+      }
+      .view-code-button:hover:not(:disabled) {
+        filter: brightness(1.1);
+      }
+      .command-result-card-preview {
+        margin-top: var(--boxel-sp);
+      }
+      .preview-code {
+        --spacing: var(--boxel-sp-sm);
+        --fill-container-spacing: calc(
+          -1 * var(--ai-assistant-message-padding)
+        );
+        margin: var(--boxel-sp) var(--fill-container-spacing) 0
+          var(--fill-container-spacing);
+        padding: var(--spacing) 0;
+        background-color: var(--boxel-dark);
+      }
+      .copy-to-clipboard-button {
+        --boxel-button-font: 600 var(--boxel-font-xs);
+        --boxel-button-padding: 0 var(--boxel-sp-xs);
+        --icon-color: var(--boxel-highlight);
+        --icon-stroke-width: 2px;
+        margin-left: var(--spacing);
+        margin-bottom: var(--spacing);
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: var(--spacing);
+      }
+      .copy-to-clipboard-button:hover:not(:disabled) {
+        --boxel-button-text-color: var(--boxel-highlight);
+        filter: brightness(1.1);
+      }
+      .monaco-container {
+        height: var(--monaco-container-height);
+        min-height: 7rem;
+        max-height: 30vh;
+      }
+      .header {
+        --boxel-label-color: var(--boxel-450);
+        --boxel-label-font: 600 var(--boxel-font-xs);
+        --boxel-header-padding: var(--boxel-sp-xxxs) var(--boxel-sp-xxxs) 0
+          var(--left-padding);
+      }
+      .header :deep(.content) {
+        gap: 0;
+      }
+      .icon-button {
+        --icon-color: var(--boxel-dark);
+      }
+      .icon-button:hover {
+        --icon-color: var(--boxel-highlight);
+      }
+      .options-menu :deep(.boxel-menu__item__content) {
+        padding-right: var(--boxel-sp-xxs);
+        padding-left: var(--boxel-sp-xxs);
+      }
+      .options-menu :deep(.check-icon) {
+        display: none;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/host/app/components/matrix/room-message.gts b/packages/host/app/components/matrix/room-message.gts
index 8dc6d765b7..955b13e841 100644
--- a/packages/host/app/components/matrix/room-message.gts
+++ b/packages/host/app/components/matrix/room-message.gts
@@ -1,39 +1,32 @@
-import { fn } from '@ember/helper';
-import { on } from '@ember/modifier';
-import { action } from '@ember/object';
 import { service } from '@ember/service';
 import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
-import { tracked, cached } from '@glimmer/tracking';
+import { cached, tracked } from '@glimmer/tracking';
 
 import { task } from 'ember-concurrency';
 import perform from 'ember-concurrency/helpers/perform';
-import { modifier } from 'ember-modifier';
 
 import { trackedFunction } from 'ember-resources/util/function';
 
-import { Avatar, Button } from '@cardstack/boxel-ui/components';
-import { Copy as CopyIcon } from '@cardstack/boxel-ui/icons';
+import { Avatar } from '@cardstack/boxel-ui/components';
 
-import { isCardInstance, markdownToHtml } from '@cardstack/runtime-common';
+import { bool } from '@cardstack/boxel-ui/helpers';
+
+import { markdownToHtml } from '@cardstack/runtime-common';
 
 import { Message } from '@cardstack/host/lib/matrix-classes/message';
-import MessageCommand from '@cardstack/host/lib/matrix-classes/message-command';
-import monacoModifier from '@cardstack/host/modifiers/monaco';
-import type { MonacoEditorOptions } from '@cardstack/host/modifiers/monaco';
 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 type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
 
 import { type CardDef } from 'https://cardstack.com/base/card-api';
 
-import ApplyButton from '../ai-assistant/apply-button';
-import { type ApplyButtonState } from '../ai-assistant/apply-button';
 import AiAssistantMessage from '../ai-assistant/message';
 import { aiBotUserId } from '../ai-assistant/panel';
 
+import RoomMessageCommand from './room-message-command';
+
 interface Signature {
   Element: HTMLDivElement;
   Args: {
@@ -46,6 +39,8 @@ interface Signature {
     setCurrentEditor: (editor: number | undefined) => void;
     retryAction?: () => void;
     isPending?: boolean;
+    isDisplayingCode: boolean;
+    onToggleViewCode: () => void;
     registerScroller: (args: {
       index: number;
       element: HTMLElement;
@@ -86,13 +81,14 @@ export default class RoomMessage extends Component<Signature> {
     return this.args.message.author.userId === aiBotUserId;
   }
 
-  private get getComponent() {
-    let { commandResult } = this.args.message;
-    if (!commandResult || !isCardInstance(commandResult)) {
-      return undefined;
+  run = task(async () => {
+    if (!this.args.message.command) {
+      throw new Error('No command to run');
     }
-    return commandResult.constructor.getComponent(commandResult);
-  }
+    return this.commandService.run
+      .unlinked()
+      .perform(this.args.message.command);
+  });
 
   <template>
     {{! We Intentionally wait until message resources are loaded (i.e. have a value) before rendering the message.
@@ -121,77 +117,25 @@ export default class RoomMessage extends Component<Signature> {
         @resources={{this.resources}}
         @errorMessage={{this.errorMessage}}
         @isStreaming={{@isStreaming}}
-        @retryAction={{if
-          @message.command
-          (fn (perform this.run) @message.command @roomId)
-          @retryAction
-        }}
+        @retryAction={{if @message.command (perform this.run) @retryAction}}
         @isPending={{@isPending}}
         data-test-boxel-message-from={{@message.author.name}}
         ...attributes
       >
         {{#if @message.command}}
-          <div
-            class='command-button-bar'
-            {{! In test, if we change this isIdle check to the task running locally on this component, it will fail because roomMessages get destroyed during re-indexing.
-            Since services are long-lived so it we will not have this issue. I think this will go away when we convert our room field into a room component }}
-            {{! TODO: Convert to non-EC async method after fixing CS-6987 }}
-            data-test-command-card-idle={{this.commandService.run.isIdle}}
-          >
-            <Button
-              class='view-code-button'
-              {{on 'click' this.viewCodeToggle}}
-              @kind={{if this.isDisplayingCode 'primary-dark' 'secondary-dark'}}
-              @size='extra-small'
-              data-test-view-code-button
-            >
-              {{if this.isDisplayingCode 'Hide Code' 'View Code'}}
-            </Button>
-            <ApplyButton
-              @state={{this.applyButtonState}}
-              {{on 'click' (fn (perform this.run) @message.command @roomId)}}
-              data-test-command-apply={{this.applyButtonState}}
-            />
-          </div>
-          {{#if this.isDisplayingCode}}
-            <div class='preview-code'>
-              <Button
-                class='copy-to-clipboard-button'
-                @kind='text-only'
-                @size='extra-small'
-                {{on 'click' (perform this.copyToClipboard)}}
-                data-test-copy-code
-              >
-                <CopyIcon
-                  width='16'
-                  height='16'
-                  role='presentation'
-                  aria-hidden='true'
-                />
-                Copy to clipboard
-              </Button>
-              <div
-                class='monaco-container'
-                {{this.scrollBottomIntoView}}
-                {{monacoModifier
-                  content=this.previewCommandCode
-                  contentChanged=undefined
-                  monacoSDK=@monacoSDK
-                  language='json'
-                  readOnly=true
-                  darkTheme=true
-                  editorDisplayOptions=this.editorDisplayOptions
-                }}
-                data-test-editor
-                data-test-percy-hide
-              />
-            </div>
-          {{/if}}
-          {{#let this.getComponent as |Component|}}
-            {{#if Component}}
-              <Component @format='embedded' />
-            {{/if}}
-          {{/let}}
+          <RoomMessageCommand
+            @messageCommand={{@message.command}}
+            @messageIndex={{@message.index}}
+            @runCommand={{perform this.run}}
+            @roomId={{@roomId}}
+            @isPending={{@isPending}}
+            @isDisplayingCode={{@isDisplayingCode}}
+            @onToggleViewCode={{@onToggleViewCode}}
+            @monacoSDK={{@monacoSDK}}
+            @currentEditor={{@currentEditor}}
+            @failedCommandState={{this.failedCommandState}}
+            @isError={{bool this.errorMessage}}
+          />
         {{/if}}
       </AiAssistantMessage>
     {{/if}}
@@ -200,81 +144,13 @@ export default class RoomMessage extends Component<Signature> {
       .room-message {
         --ai-assistant-message-padding: var(--boxel-sp);
       }
-      .is-pending .view-code-button,
-      .is-error .view-code-button {
-        background: var(--boxel-200);
-        color: var(--boxel-500);
-      }
-      .command-button-bar {
-        display: flex;
-        justify-content: flex-end;
-        gap: var(--boxel-sp-xs);
-        margin-top: var(--boxel-sp);
-      }
-      .view-code-button {
-        --boxel-button-font: 600 var(--boxel-font-xs);
-        --boxel-button-min-height: 1.5rem;
-        --boxel-button-padding: 0 var(--boxel-sp-xs);
-        min-width: initial;
-        width: auto;
-        max-height: 1.5rem;
-      }
-      .view-code-button:hover:not(:disabled) {
-        filter: brightness(1.1);
-      }
-      .preview-code {
-        --spacing: var(--boxel-sp-sm);
-        --fill-container-spacing: calc(
-          -1 * var(--ai-assistant-message-padding)
-        );
-        margin: var(--boxel-sp) var(--fill-container-spacing) 0
-          var(--fill-container-spacing);
-        padding: var(--spacing) 0;
-        background-color: var(--boxel-dark);
-      }
-      .copy-to-clipboard-button {
-        --boxel-button-font: 600 var(--boxel-font-xs);
-        --boxel-button-padding: 0 var(--boxel-sp-xs);
-        --icon-color: var(--boxel-highlight);
-        --icon-stroke-width: 2px;
-        margin-left: var(--spacing);
-        margin-bottom: var(--spacing);
-        display: grid;
-        grid-template-columns: auto 1fr;
-        gap: var(--spacing);
-      }
-      .copy-to-clipboard-button:hover:not(:disabled) {
-        --boxel-button-text-color: var(--boxel-highlight);
-        filter: brightness(1.1);
-      }
-      .monaco-container {
-        height: var(--monaco-container-height);
-        min-height: 7rem;
-        max-height: 30vh;
-      }
     </style>
   </template>
 
-  editorDisplayOptions: MonacoEditorOptions = {
-    wordWrap: 'on',
-    wrappingIndent: 'indent',
-    fontWeight: 'bold',
-    scrollbar: {
-      alwaysConsumeMouseWheel: false,
-    },
-  };
-
   @service private declare operatorModeStateService: OperatorModeStateService;
   @service private declare matrixService: MatrixService;
-  @service private declare monacoService: MonacoService;
   @service declare commandService: CommandService;
 
-  @tracked private isDisplayingCode = false;
-
-  private copyToClipboard = task(async () => {
-    await navigator.clipboard.writeText(this.previewCommandCode);
-  });
-
   private loadMessageResources = trackedFunction(this, async () => {
     let cards: CardDef[] = [];
     let errors: { id: string; error: Error }[] = [];
@@ -308,6 +184,16 @@ export default class RoomMessage extends Component<Signature> {
     return this.loadMessageResources.value;
   }
 
+  @cached
+  private get failedCommandState() {
+    if (!this.args.message.command?.eventId) {
+      return undefined;
+    }
+    return this.matrixService.failedCommandState.get(
+      this.args.message.command.eventId,
+    );
+  }
+
   private get errorMessage() {
     if (this.failedCommandState) {
       return `Failed to apply changes. ${this.failedCommandState.message}`;
@@ -331,74 +217,4 @@ export default class RoomMessage extends Component<Signature> {
       .map((e: { id: string; error: Error }) => `${e.id}: ${e.error.message}`)
       .join(', ');
   }
-
-  private get previewCommandCode() {
-    if (!this.command) {
-      return JSON.stringify({}, null, 2);
-    }
-    let { name, payload } = this.command;
-    return JSON.stringify({ name, payload }, null, 2);
-  }
-
-  get command() {
-    return this.args.message.command;
-  }
-
-  @cached
-  private get failedCommandState() {
-    if (!this.command?.eventId) {
-      return undefined;
-    }
-    return this.matrixService.failedCommandState.get(this.command.eventId);
-  }
-
-  run = task(async (command: MessageCommand, roomId: string) => {
-    return this.commandService.run.unlinked().perform(command, roomId);
-  });
-
-  @cached
-  private get applyButtonState(): ApplyButtonState {
-    if (this.failedCommandState) {
-      return 'failed';
-    }
-    return this.command?.status ?? 'ready';
-  }
-
-  @action private viewCodeToggle() {
-    this.isDisplayingCode = !this.isDisplayingCode;
-    if (this.isDisplayingCode) {
-      this.args.setCurrentEditor(this.args.message.index);
-    }
-  }
-
-  // TODO need to reevalutate this modifier--do we want to hijack the scroll
-  // when the user views the code?
-  private scrollBottomIntoView = modifier((element: HTMLElement) => {
-    if (this.args.currentEditor !== this.args.message.index) {
-      return;
-    }
-
-    let height = this.monacoService.getContentHeight();
-    if (!height || height < 0) {
-      return;
-    }
-    element.style.height = `${height}px`;
-
-    let outerContainer = document.getElementById(
-      `message-container-${this.args.index}`,
-    );
-    if (!outerContainer) {
-      return;
-    }
-    this.scrollIntoView(outerContainer);
-  });
-
-  private scrollIntoView(element: HTMLElement) {
-    let { top, bottom } = element.getBoundingClientRect();
-    let isVerticallyInView = top >= 0 && bottom <= window.innerHeight;
-
-    if (!isVerticallyInView) {
-      element.scrollIntoView({ block: 'end' });
-    }
-  }
 }
diff --git a/packages/host/app/components/matrix/room.gts b/packages/host/app/components/matrix/room.gts
index ed4568c4c6..16b8b48fb7 100644
--- a/packages/host/app/components/matrix/room.gts
+++ b/packages/host/app/components/matrix/room.gts
@@ -1,3 +1,4 @@
+import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import type Owner from '@ember/owner';
@@ -87,6 +88,8 @@ export default class Room extends Component<Signature> {
               @isPending={{this.isPendingMessage message}}
               @monacoSDK={{@monacoSDK}}
               @isStreaming={{this.isMessageStreaming message i}}
+              @isDisplayingCode={{this.isDisplayingCode message}}
+              @onToggleViewCode={{fn this.toggleViewCode message}}
               @currentEditor={{this.currentMonacoContainer}}
               @setCurrentEditor={{this.setCurrentMonacoContainer}}
               @retryAction={{this.maybeRetryAction i message}}
@@ -419,7 +422,7 @@ export default class Room extends Component<Signature> {
     return undefined;
   };
 
-  @action private isMessageStreaming(message: Message, messageIndex: number) {
+  private isMessageStreaming = (message: Message, messageIndex: number) => {
     return (
       !message.isStreamingFinished &&
       this.isLastMessage(messageIndex) &&
@@ -429,7 +432,15 @@ export default class Room extends Component<Signature> {
       // threshold)
       unixTime(new Date().getTime() - message.created.getTime()) < 60
     );
-  }
+  };
+
+  private isDisplayingCode = (message: Message) => {
+    return this.roomResource?.isDisplayingCode(message);
+  };
+
+  private toggleViewCode = (message: Message) => {
+    this.roomResource.toggleViewCode(message);
+  };
 
   private doMatrixEventFlush = restartableTask(async () => {
     await this.matrixService.flushMembership;
diff --git a/packages/host/app/components/operator-mode/interact-submode.gts b/packages/host/app/components/operator-mode/interact-submode.gts
index 45701b5996..03d786d93e 100644
--- a/packages/host/app/components/operator-mode/interact-submode.gts
+++ b/packages/host/app/components/operator-mode/interact-submode.gts
@@ -32,6 +32,7 @@ import {
   type LooseSingleCardDocument,
 } from '@cardstack/runtime-common';
 
+import CopyCardCommand from '@cardstack/host/commands/copy-card';
 import config from '@cardstack/host/config/environment';
 import { StackItem, isIndexCard } from '@cardstack/host/lib/stack-item';
 
@@ -420,28 +421,19 @@ export default class InteractSubmode extends Component<Signature> {
   }
 
   private _copyCard = dropTask(
-    async (card: CardDef, stackIndex: number, done: Deferred<CardDef>) => {
+    async (
+      sourceCard: CardDef,
+      stackIndex: number,
+      done: Deferred<CardDef>,
+    ) => {
       let newCard: CardDef | undefined;
       try {
-        // use existing card in stack to determine realm url,
-        // otherwise use user's first writable realm
-        let topCard =
-          this.operatorModeStateService.topMostStackItems()[stackIndex]?.card;
-        let realmURL: URL | undefined;
-        if (topCard) {
-          let url = await this.cardService.getRealmURL(topCard);
-          // open card might be from a realm in which we don't have write permissions
-          if (url && this.realm.canWrite(url.href)) {
-            realmURL = url;
-          }
-        }
-        if (!realmURL) {
-          if (!this.realm.defaultWritableRealm) {
-            throw new Error('Could not find a writable realm');
-          }
-          realmURL = new URL(this.realm.defaultWritableRealm.path);
-        }
-        newCard = await this.cardService.copyCard(card, realmURL);
+        let { commandContext } = this.commandService;
+        const result = await new CopyCardCommand(commandContext).execute({
+          sourceCard,
+          targetStackIndex: stackIndex,
+        });
+        newCard = result.newCard;
       } catch (e) {
         done.reject(e);
       } finally {
@@ -475,7 +467,12 @@ export default class InteractSubmode extends Component<Signature> {
         sources.sort((a, b) => a.title.localeCompare(b.title));
         let scrollToCard: CardDef | undefined;
         for (let [index, card] of sources.entries()) {
-          let newCard = await this.cardService.copyCard(card, realmURL);
+          let { newCard } = await new CopyCardCommand(
+            this.commandService.commandContext,
+          ).execute({
+            sourceCard: card,
+            targetRealmUrl: realmURL.href,
+          });
           if (index === 0) {
             scrollToCard = newCard; // we scroll to the first card lexically by title
           }
diff --git a/packages/host/app/components/preview.gts b/packages/host/app/components/preview.gts
index 2f59c968c6..90879291cd 100644
--- a/packages/host/app/components/preview.gts
+++ b/packages/host/app/components/preview.gts
@@ -24,6 +24,7 @@ interface Signature {
     field?: Field;
     codeRef?: ResolvedCodeRef;
     cardContext?: Record<string, any>;
+    displayContainer?: boolean;
   };
 }
 
@@ -46,7 +47,7 @@ export default class Preview extends Component<Signature> {
   }
 
   <template>
-    <this.renderedCard ...attributes />
+    <this.renderedCard @displayContainer={{@displayContainer}} ...attributes />
   </template>
 
   get renderedCard() {
diff --git a/packages/host/app/lib/matrix-classes/message-builder.ts b/packages/host/app/lib/matrix-classes/message-builder.ts
index 778364e02d..9398f1ed6b 100644
--- a/packages/host/app/lib/matrix-classes/message-builder.ts
+++ b/packages/host/app/lib/matrix-classes/message-builder.ts
@@ -8,7 +8,8 @@ import { LooseSingleCardDocument } from '@cardstack/runtime-common';
 
 import {
   APP_BOXEL_COMMAND_MSGTYPE,
-  APP_BOXEL_COMMAND_RESULT_MSGTYPE,
+  APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
+  APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE,
   APP_BOXEL_MESSAGE_MSGTYPE,
 } from '@cardstack/runtime-common/matrix-constants';
 
@@ -23,7 +24,6 @@ import type {
   CommandResultEvent,
   MatrixEvent as DiscreteMatrixEvent,
   MessageEvent,
-  ReactionEvent,
 } from 'https://cardstack.com/base/matrix-event';
 
 import { RoomMember } from './member';
@@ -36,13 +36,10 @@ const ErrorMessage: Record<string, string> = {
 
 export default class MessageBuilder {
   constructor(
-    private event:
-      | MessageEvent
-      | CommandEvent
-      | CardMessageEvent
-      | CommandResultEvent,
+    private event: MessageEvent | CommandEvent | CardMessageEvent,
     owner: Owner,
     private builderContext: {
+      roomId: string;
       effectiveEventId: string;
       author: RoomMember;
       index: number;
@@ -57,6 +54,7 @@ export default class MessageBuilder {
 
   private get coreMessageArgs() {
     return new Message({
+      roomId: this.builderContext.roomId,
       author: this.builderContext.author,
       created: new Date(this.event.origin_server_ts),
       updated: new Date(), // Changes every time an update from AI bot streaming is received, used for detecting timeouts
@@ -66,7 +64,6 @@ export default class MessageBuilder {
       transactionId: this.event.unsigned?.transaction_id || null,
       attachedCardIds: null,
       command: null,
-      commandResult: null,
       status: this.event.status,
       eventId: this.builderContext.effectiveEventId,
       index: this.builderContext.index,
@@ -119,71 +116,54 @@ export default class MessageBuilder {
 
   async buildMessage(): Promise<Message> {
     let { event } = this;
-    let messageArgs = this.coreMessageArgs;
-    messageArgs.errorMessage = this.errorMessage;
+    let message = this.coreMessageArgs;
+    message.errorMessage = this.errorMessage;
     if (event.content.msgtype === APP_BOXEL_MESSAGE_MSGTYPE) {
-      messageArgs.clientGeneratedId = this.clientGeneratedId;
-      messageArgs.attachedCardIds = this.attachedCardIds;
+      message.clientGeneratedId = this.clientGeneratedId;
+      message.attachedCardIds = this.attachedCardIds;
     } else if (event.content.msgtype === 'm.text') {
-      messageArgs.isStreamingFinished = !!event.content.isStreamingFinished; // Indicates whether streaming (message updating while AI bot is sending more content into the message) has finished
+      message.isStreamingFinished = !!event.content.isStreamingFinished; // Indicates whether streaming (message updating while AI bot is sending more content into the message) has finished
     } else if (
       event.content.msgtype === APP_BOXEL_COMMAND_MSGTYPE &&
       event.content.data.toolCall
     ) {
-      messageArgs.formattedMessage = this.formattedMessageForCommand;
-      messageArgs.command = await this.buildMessageCommand();
-      messageArgs.commandResult = await this.buildCommandResultCard();
-      messageArgs.isStreamingFinished = true;
+      message.formattedMessage = this.formattedMessageForCommand;
+      message.command = await this.buildMessageCommand(message);
+      message.isStreamingFinished = true;
     }
-    return messageArgs;
+    return message;
   }
 
-  private async buildMessageCommand() {
+  private async buildMessageCommand(message: Message) {
     let event = this.event as CommandEvent;
     let command = event.content.data.toolCall;
-    let annotation = this.builderContext.events.find((e: any) => {
+    let commandResultEvent = this.builderContext.events.find((e: any) => {
       let r = e.content['m.relates_to'];
       return (
-        e.type === 'm.reaction' &&
-        r?.rel_type === 'm.annotation' &&
-        (r?.event_id === event.content.data.eventId ||
-          r?.event_id === event.event_id ||
-          r?.event_id === this.builderContext.effectiveEventId)
+        e.type === APP_BOXEL_COMMAND_RESULT_EVENT_TYPE &&
+        r.rel_type === 'm.annotation' &&
+        (r.event_id === event.content.data.eventId ||
+          r.event_id === event.event_id ||
+          r.event_id === this.builderContext.effectiveEventId)
       );
-    }) as ReactionEvent | undefined;
-    let status: CommandStatus = 'ready';
-    if (annotation?.content['m.relates_to'].key === 'applied') {
-      status = 'applied';
-    }
+    }) as CommandResultEvent | undefined;
+    let status = (commandResultEvent?.content?.['m.relates_to']?.key ||
+      'ready') as CommandStatus;
+    let commandResultCardEventId =
+      commandResultEvent?.content?.msgtype ===
+      APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE
+        ? commandResultEvent.content.data.cardEventId
+        : undefined;
     let messageCommand = new MessageCommand(
+      message,
       command.id,
       command.name,
       command.arguments,
       this.builderContext.effectiveEventId,
       status,
+      commandResultCardEventId,
       getOwner(this)!,
     );
     return messageCommand;
   }
-
-  private async buildCommandResultCard() {
-    let event = this.event as CommandEvent;
-    let commandResultEvent = this.builderContext.events.find(
-      (e) =>
-        e.type === 'm.room.message' &&
-        e.content.msgtype === APP_BOXEL_COMMAND_RESULT_MSGTYPE &&
-        e.content['m.relates_to']?.rel_type === 'm.annotation' &&
-        e.content['m.relates_to'].event_id === event.content.data.eventId,
-    ) as CommandResultEvent;
-    let r = commandResultEvent?.content?.result
-      ? await this.commandService.createCommandResultArgs(
-          event,
-          commandResultEvent,
-        )
-      : undefined;
-    let commandResult = r
-      ? await this.commandService.createCommandResult(r)
-      : undefined;
-    return commandResult;
-  }
 }
diff --git a/packages/host/app/lib/matrix-classes/message-command.ts b/packages/host/app/lib/matrix-classes/message-command.ts
index b3dd18e292..b0839b27ec 100644
--- a/packages/host/app/lib/matrix-classes/message-command.ts
+++ b/packages/host/app/lib/matrix-classes/message-command.ts
@@ -2,23 +2,33 @@ import { setOwner } from '@ember/owner';
 import type Owner from '@ember/owner';
 import { inject as service } from '@ember/service';
 
+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 { CardDef } from 'https://cardstack.com/base/card-api';
+
+import { Message } from './message';
 
 type CommandStatus = 'applied' | 'ready' | 'applying';
 
 export default class MessageCommand {
   constructor(
+    public message: Message,
     public toolCallId: string,
     public name: string,
     public payload: any, //arguments of toolCall. Its not called arguments due to lint
     public eventId: string,
     private commandStatus: CommandStatus,
+    public commandResultCardEventId: string | undefined,
     owner: Owner,
   ) {
     setOwner(this, owner);
   }
 
   @service declare commandService: CommandService;
+  @service declare matrixService: MatrixService;
+  @service declare cardService: CardService;
 
   get status() {
     if (
@@ -29,4 +39,38 @@ export default class MessageCommand {
 
     return this.commandStatus;
   }
+
+  get commandResultCardDoc() {
+    if (!this.commandResultCardEventId) {
+      return undefined;
+    }
+    let roomResource = this.matrixService.roomResources.get(
+      this.message.roomId,
+    );
+    if (!roomResource) {
+      return undefined;
+    }
+    try {
+      let cardDoc = roomResource.serializedCardFromFragments(
+        this.commandResultCardEventId,
+      );
+      return cardDoc;
+    } catch {
+      // the command result card fragments might not be loaded yet
+      return undefined;
+    }
+  }
+
+  async getCommandResultCard(): Promise<CardDef | undefined> {
+    let cardDoc = this.commandResultCardDoc;
+    if (!cardDoc) {
+      return undefined;
+    }
+    let card = await this.cardService.createFromSerialized(
+      cardDoc.data,
+      cardDoc,
+      undefined,
+    );
+    return card;
+  }
 }
diff --git a/packages/host/app/lib/matrix-classes/message.ts b/packages/host/app/lib/matrix-classes/message.ts
index f67c08372f..7a79edad4c 100644
--- a/packages/host/app/lib/matrix-classes/message.ts
+++ b/packages/host/app/lib/matrix-classes/message.ts
@@ -4,8 +4,6 @@ import { getCard } from '@cardstack/runtime-common';
 
 import { CardDef } from 'https://cardstack.com/base/card-api';
 
-import type { CommandResult } from 'https://cardstack.com/base/command-result';
-
 import { RoomMember } from './member';
 import MessageCommand from './message-command';
 
@@ -22,6 +20,7 @@ type AttachedCardResource = {
 type RoomMessageInterface = RoomMessageRequired & RoomMessageOptional;
 
 interface RoomMessageRequired {
+  roomId: string;
   author: RoomMember;
   created: Date;
   updated: Date;
@@ -39,7 +38,6 @@ interface RoomMessageOptional {
   errorMessage?: string;
   clientGeneratedId?: string | null;
   command?: MessageCommand | null;
-  commandResult?: CommandResult | null;
 }
 
 export class Message implements RoomMessageInterface {
@@ -51,7 +49,6 @@ export class Message implements RoomMessageInterface {
   errorMessage?: string;
   clientGeneratedId?: string;
   command?: MessageCommand | null;
-  commandResult?: CommandResult | null;
 
   author: RoomMember;
   formattedMessage: string;
@@ -60,6 +57,7 @@ export class Message implements RoomMessageInterface {
   updated: Date;
   eventId: string;
   message: string;
+  roomId: string;
 
   constructor(init: RoomMessageInterface) {
     Object.assign(this, init);
@@ -70,6 +68,7 @@ export class Message implements RoomMessageInterface {
     this.created = init.created;
     this.updated = init.updated;
     this.status = init.status;
+    this.roomId = init.roomId;
   }
   get isRetryable() {
     return (
diff --git a/packages/host/app/lib/matrix-classes/room.ts b/packages/host/app/lib/matrix-classes/room.ts
index 9206a5e03f..dc4b2e964d 100644
--- a/packages/host/app/lib/matrix-classes/room.ts
+++ b/packages/host/app/lib/matrix-classes/room.ts
@@ -24,6 +24,8 @@ export default class Room {
   @tracked private _events: DiscreteMatrixEvent[] = [];
   @tracked private _roomState: MatrixSDK.RoomState | undefined;
 
+  constructor(public readonly roomId: string) {}
+
   readonly mutex = new Mutex();
 
   get events() {
diff --git a/packages/host/app/resources/room.ts b/packages/host/app/resources/room.ts
index 87d027f16b..f4dbe271fc 100644
--- a/packages/host/app/resources/room.ts
+++ b/packages/host/app/resources/room.ts
@@ -9,15 +9,11 @@ import { TrackedMap } from 'tracked-built-ins';
 
 import { type LooseSingleCardDocument } from '@cardstack/runtime-common';
 
-import {
-  APP_BOXEL_CARDFRAGMENT_MSGTYPE,
-  APP_BOXEL_COMMAND_RESULT_MSGTYPE,
-} from '@cardstack/runtime-common/matrix-constants';
+import { APP_BOXEL_CARDFRAGMENT_MSGTYPE } from '@cardstack/runtime-common/matrix-constants';
 
 import type {
   CardFragmentContent,
   CommandEvent,
-  CommandResultEvent,
   MatrixEvent as DiscreteMatrixEvent,
   RoomCreateEvent,
   RoomNameEvent,
@@ -69,6 +65,8 @@ export class RoomResource extends Resource<Args> {
   private _memberCache: TrackedMap<string, RoomMember> = new TrackedMap();
   private _fragmentCache: TrackedMap<string, CardFragmentContent> =
     new TrackedMap();
+  private _isDisplayingViewCodeMap: TrackedMap<string, boolean> =
+    new TrackedMap();
   @tracked matrixRoom: Room | undefined;
   @tracked loading: Promise<void> | undefined;
   @service private declare matrixService: MatrixService;
@@ -96,6 +94,7 @@ export class RoomResource extends Resource<Args> {
     this._fragmentCache = new TrackedMap();
     this._nameEventsCache = new TrackedMap();
     this._skillCardsCache = new TrackedMap();
+    this._isDisplayingViewCodeMap = new TrackedMap();
     this._createEvent = undefined;
   }
 
@@ -251,14 +250,14 @@ export class RoomResource extends Resource<Args> {
 
   private async loadRoomMessage(
     roomId: string,
-    event: MessageEvent | CommandEvent | CardMessageEvent | CommandResultEvent,
+    event: MessageEvent | CommandEvent | CardMessageEvent,
     index: number,
   ) {
     let effectiveEventId = event.event_id;
     let update = false;
     if (event.content['m.relates_to']?.rel_type == 'm.annotation') {
-      // we have to trigger a message field update if there is a reaction event so apply button state reliably updates
-      // otherwise, the message field (may) still but it occurs only accidentally because of a ..thinking event
+      // ensure that we update a message when we see a reaction event for it, since we merge data from the reaction event
+      // into the message state (i.e. apply button, command result)
       update = true;
     } else if (event.content['m.relates_to']?.rel_type === 'm.replace') {
       effectiveEventId = event.content['m.relates_to'].event_id;
@@ -297,16 +296,12 @@ export class RoomResource extends Resource<Args> {
       }
       return;
     }
-    if (event.content.msgtype === APP_BOXEL_COMMAND_RESULT_MSGTYPE) {
-      //don't display command result in the room as a message
-      return;
-    }
-
     let author = this.upsertRoomMember({
       roomId,
       userId: event.sender,
     });
     let messageBuilder = new MessageBuilder(event, getOwner(this)!, {
+      roomId,
       effectiveEventId,
       author,
       index,
@@ -386,7 +381,7 @@ export class RoomResource extends Resource<Args> {
     return member;
   }
 
-  private serializedCardFromFragments = (eventId: string) => {
+  public serializedCardFromFragments = (eventId: string) => {
     let fragments: CardFragmentContent[] = [];
     let currentFragment: string | undefined = eventId;
     do {
@@ -412,6 +407,17 @@ export class RoomResource extends Resource<Args> {
     ) as LooseSingleCardDocument;
     return cardDoc;
   };
+
+  public isDisplayingCode(message: Message) {
+    return this._isDisplayingViewCodeMap.get(message.eventId) ?? false;
+  }
+
+  public toggleViewCode(message: Message) {
+    this._isDisplayingViewCodeMap.set(
+      message.eventId,
+      !this.isDisplayingCode(message),
+    );
+  }
 }
 
 export function getRoom(
diff --git a/packages/host/app/services/command-service.ts b/packages/host/app/services/command-service.ts
index eb55531221..bb5506d67e 100644
--- a/packages/host/app/services/command-service.ts
+++ b/packages/host/app/services/command-service.ts
@@ -13,11 +13,10 @@ import { v4 as uuidv4 } from 'uuid';
 
 import {
   Command,
-  type LooseSingleCardDocument,
   type PatchData,
-  baseRealm,
   CommandContext,
   CommandContextStamp,
+  baseRealm,
 } from '@cardstack/runtime-common';
 import {
   type CardTypeFilter,
@@ -30,11 +29,8 @@ import type OperatorModeStateService from '@cardstack/host/services/operator-mod
 import type Realm from '@cardstack/host/services/realm';
 
 import type { CardDef } from 'https://cardstack.com/base/card-api';
-import type { CommandResult } from 'https://cardstack.com/base/command-result';
-import type {
-  CommandEvent,
-  CommandResultEvent,
-} from 'https://cardstack.com/base/matrix-event';
+
+import type * as BaseCommandModule from 'https://cardstack.com/base/command';
 
 import MessageCommand from '../lib/matrix-classes/message-command';
 import { shortenUuid } from '../utils/uuid';
@@ -42,12 +38,15 @@ import { shortenUuid } from '../utils/uuid';
 import CardService from './card-service';
 import RealmServerService from './realm-server';
 
+import type LoaderService from './loader-service';
+
 const DELAY_FOR_APPLYING_UI = isTesting() ? 50 : 500;
 
 export default class CommandService extends Service {
   @service private declare operatorModeStateService: OperatorModeStateService;
   @service private declare matrixService: MatrixService;
   @service private declare cardService: CardService;
+  @service private declare loaderService: LoaderService;
   @service private declare realm: Realm;
   @service private declare realmServer: RealmServerService;
   currentlyExecutingCommandEventIds = new TrackedSet<string>();
@@ -94,19 +93,12 @@ export default class CommandService extends Service {
       } else {
         typedInput = undefined;
       }
-      let res = await command.execute(typedInput);
-      await this.matrixService.sendReactionEvent(
+      let resultCard = await command.execute(typedInput);
+      await this.matrixService.sendCommandResultEvent(
         event.room_id!,
         event.event_id!,
-        'applied',
+        resultCard,
       );
-      if (res) {
-        await this.matrixService.sendCommandResultMessage(
-          event.room_id!,
-          event.event_id!,
-          res,
-        );
-      }
     } finally {
       this.currentlyExecutingCommandEventIds.delete(event.event_id!);
     }
@@ -122,9 +114,9 @@ export default class CommandService extends Service {
   }
 
   //TODO: Convert to non-EC async method after fixing CS-6987
-  run = task(async (command: MessageCommand, roomId: string) => {
+  run = task(async (command: MessageCommand) => {
     let { payload, eventId } = command;
-    let res: any;
+    let resultCard: CardDef | undefined;
     try {
       this.matrixService.failedCommandState.delete(eventId);
       this.currentlyExecutingCommandEventIds.add(eventId);
@@ -146,7 +138,7 @@ export default class CommandService extends Service {
         } else {
           typedInput = undefined;
         }
-        [res] = await all([
+        [resultCard] = 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
         ]);
@@ -156,7 +148,7 @@ export default class CommandService extends Service {
             "Patch command can't run because it doesn't have all the fields in arguments returned by open ai",
           );
         }
-        res = await this.operatorModeStateService.patchCard.perform(
+        await this.operatorModeStateService.patchCard.perform(
           payload?.attributes?.cardId,
           {
             attributes: payload?.attributes?.patch?.attributes,
@@ -179,9 +171,14 @@ export default class CommandService extends Service {
             ),
           ),
         );
-        res = await Promise.all(
-          instances.map((c) => this.cardService.serializeCard(c)),
-        );
+        let commandModule = await this.loaderService.loader.import<
+          typeof BaseCommandModule
+        >(`${baseRealm.url}command`);
+        let { SearchCardsResult } = commandModule;
+        resultCard = new SearchCardsResult({
+          cardIds: instances.map((c) => c.id),
+          description: `Query: ${JSON.stringify(query.filter, null, 2)}`,
+        });
       } else if (command.name === 'generateAppModule') {
         let realmURL = this.operatorModeStateService.realmURL;
 
@@ -197,10 +194,15 @@ export default class CommandService extends Service {
           `untitled-app-${timestamp}`;
         let moduleId = `${realmURL}AppModules/${fileName}-${timestamp}`;
         let content = (payload.moduleCode as string) ?? '';
-        res = await this.cardService.saveSource(
-          new URL(`${moduleId}.gts`),
-          content,
-        );
+        let commandModule = await this.loaderService.loader.import<
+          typeof BaseCommandModule
+        >(`${baseRealm.url}command`);
+        let { LegacyGenerateAppModuleResult } = commandModule;
+        await this.cardService.saveSource(new URL(`${moduleId}.gts`), content);
+        resultCard = new LegacyGenerateAppModuleResult({
+          moduleId: `${moduleId}.gts`,
+          source: content,
+        });
         if (!payload.attached_card_id) {
           throw new Error(
             `Could not update 'moduleURL' with a link to the generated module.`,
@@ -216,10 +218,11 @@ export default class CommandService extends Service {
           `Unrecognized command: ${command.name}. This command may have been associated with a previous browser session.`,
         );
       }
-      await this.matrixService.sendReactionEvent(roomId, eventId, 'applied');
-      if (res) {
-        await this.matrixService.sendCommandResultMessage(roomId, eventId, res);
-      }
+      await this.matrixService.sendCommandResultEvent(
+        command.message.roomId,
+        eventId,
+        resultCard,
+      );
     } catch (e) {
       let error =
         typeof e === 'string'
@@ -233,47 +236,6 @@ export default class CommandService extends Service {
       this.currentlyExecutingCommandEventIds.delete(eventId);
     }
   });
-
-  async createCommandResult(args: Record<string, any>) {
-    return await this.matrixService.createCard<typeof CommandResult>(
-      {
-        name: 'CommandResult',
-        module: `${baseRealm.url}command-result`,
-      },
-      args,
-    );
-  }
-
-  deserializeResults(event: CommandResultEvent) {
-    let serializedResults: LooseSingleCardDocument[] =
-      typeof event?.content?.result === 'string'
-        ? JSON.parse(event.content.result)
-        : event.content.result;
-    return Array.isArray(serializedResults) ? serializedResults : [];
-  }
-
-  async createCommandResultArgs(
-    commandEvent: CommandEvent,
-    commandResultEvent: CommandResultEvent,
-  ) {
-    let toolCall = commandEvent.content.data.toolCall;
-    if (toolCall.name === 'searchCard') {
-      let results = this.deserializeResults(commandResultEvent);
-      return {
-        toolCallName: toolCall.name,
-        toolCallId: toolCall.id,
-        toolCallArgs: toolCall.arguments,
-        cardIds: results.map((r) => r.data.id),
-      };
-    } else if (toolCall.name === 'patchCard') {
-      return {
-        toolCallName: toolCall.name,
-        toolCallId: toolCall.id,
-        toolCallArgs: toolCall.arguments,
-      };
-    }
-    return;
-  }
 }
 
 type PatchPayload = { attributes: { cardId: string; patch: PatchData } };
diff --git a/packages/host/app/services/loader-service.ts b/packages/host/app/services/loader-service.ts
index 131809c49b..042954a960 100644
--- a/packages/host/app/services/loader-service.ts
+++ b/packages/host/app/services/loader-service.ts
@@ -10,6 +10,7 @@ import {
 } from '@cardstack/runtime-common';
 import { Loader } from '@cardstack/runtime-common/loader';
 
+import config from '@cardstack/host/config/environment';
 import NetworkService from '@cardstack/host/services/network';
 import RealmInfoService from '@cardstack/host/services/realm-info-service';
 
@@ -48,6 +49,22 @@ export default class LoaderService extends Service {
     middlewareStack.push(async (req, next) => {
       return (await maybeHandleScopedCSSRequest(req)) || next(req);
     });
+    middlewareStack.push(async (req, next) => {
+      let response = await next(req);
+      if (
+        !response.ok &&
+        req.url.startsWith(
+          `${config.iconsURL}/@cardstack/boxel-icons/v1/icons/`,
+        )
+      ) {
+        req = new Request(
+          `${config.iconsURL}/@cardstack/boxel-icons/v1/icons/error-404.js`,
+          req,
+        );
+        response = await next(req);
+      }
+      return response;
+    });
 
     if (!this.fastboot.isFastBoot) {
       middlewareStack.push(authorizationMiddleware(this.realm));
diff --git a/packages/host/app/services/matrix-service.ts b/packages/host/app/services/matrix-service.ts
index 64a969b08e..878a6e5067 100644
--- a/packages/host/app/services/matrix-service.ts
+++ b/packages/host/app/services/matrix-service.ts
@@ -24,7 +24,6 @@ import {
   markdownToHtml,
   splitStringIntoChunks,
   baseRealm,
-  loaderFor,
   LooseCardResource,
   ResolvedCodeRef,
 } from '@cardstack/runtime-common';
@@ -41,7 +40,9 @@ import {
   APP_BOXEL_CARD_FORMAT,
   APP_BOXEL_CARDFRAGMENT_MSGTYPE,
   APP_BOXEL_COMMAND_MSGTYPE,
-  APP_BOXEL_COMMAND_RESULT_MSGTYPE,
+  APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
+  APP_BOXEL_COMMAND_RESULT_WITH_NO_OUTPUT_MSGTYPE,
+  APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE,
   APP_BOXEL_MESSAGE_MSGTYPE,
   APP_BOXEL_REALM_SERVER_EVENT_MSGTYPE,
   APP_BOXEL_REALMS_EVENT_TYPE,
@@ -61,12 +62,12 @@ import { getMatrixProfile } from '@cardstack/host/resources/matrix-profile';
 import type { Base64ImageField as Base64ImageFieldType } from 'https://cardstack.com/base/base64-image';
 import { BaseDef, type CardDef } from 'https://cardstack.com/base/card-api';
 import type * as CardAPI from 'https://cardstack.com/base/card-api';
-import type { MatrixEvent as DiscreteMatrixEvent } from 'https://cardstack.com/base/matrix-event';
 import type {
   CardMessageContent,
   CardFragmentContent,
-  ReactionEventContent,
-  CommandResultContent,
+  MatrixEvent as DiscreteMatrixEvent,
+  CommandResultWithNoOutputContent,
+  CommandResultWithOutputContent,
 } from 'https://cardstack.com/base/matrix-event';
 
 import { SkillCard } from 'https://cardstack.com/base/skill-card';
@@ -505,8 +506,8 @@ export default class MatrixService extends Service {
     content:
       | CardMessageContent
       | CardFragmentContent
-      | ReactionEventContent
-      | CommandResultContent,
+      | CommandResultWithNoOutputContent
+      | CommandResultWithOutputContent,
   ) {
     let roomData = await this.ensureRoomData(roomId);
     return roomData.mutex.dispatch(async () => {
@@ -522,49 +523,49 @@ export default class MatrixService extends Service {
     });
   }
 
-  async sendReactionEvent(roomId: string, eventId: string, status: string) {
-    let content: ReactionEventContent = {
-      'm.relates_to': {
-        event_id: eventId,
-        key: status,
-        rel_type: 'm.annotation',
-      },
-    };
-    try {
-      return await this.sendEvent(roomId, 'm.reaction', content);
-    } catch (e) {
-      throw new Error(
-        `Error sending reaction event: ${
-          'message' in (e as Error) ? (e as Error).message : e
-        }`,
-      );
-    }
-  }
-
-  async sendCommandResultMessage(
+  async sendCommandResultEvent(
     roomId: string,
-    eventId: string,
-    result: Record<string, any>,
+    invokedToolFromEventId: string,
+    resultCard?: CardDef,
   ) {
-    let body = `Command Results from command event ${eventId}`;
-    let html = markdownToHtml(body);
-    let jsonStringResult = JSON.stringify(result);
-    let content: CommandResultContent = {
-      'm.relates_to': {
-        event_id: eventId,
-        rel_type: 'm.annotation',
-        key: 'applied', //this is aggregated key. All annotations must have one. This identifies the reaction event.
-      },
-      body,
-      formatted_body: html,
-      msgtype: APP_BOXEL_COMMAND_RESULT_MSGTYPE,
-      result: jsonStringResult,
-    };
+    let resultCardEventId: string | undefined;
+    if (resultCard) {
+      [resultCardEventId] = await this.addCardsToRoom([resultCard], roomId);
+    }
+    let content:
+      | CommandResultWithNoOutputContent
+      | CommandResultWithOutputContent;
+    if (resultCardEventId === undefined) {
+      content = {
+        msgtype: APP_BOXEL_COMMAND_RESULT_WITH_NO_OUTPUT_MSGTYPE,
+        'm.relates_to': {
+          event_id: invokedToolFromEventId,
+          key: 'applied',
+          rel_type: 'm.annotation',
+        },
+      };
+    } else {
+      content = {
+        msgtype: APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE,
+        'm.relates_to': {
+          event_id: invokedToolFromEventId,
+          key: 'applied',
+          rel_type: 'm.annotation',
+        },
+        data: {
+          cardEventId: resultCardEventId,
+        },
+      };
+    }
     try {
-      return await this.sendEvent(roomId, 'm.room.message', content);
+      return await this.sendEvent(
+        roomId,
+        APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
+        content,
+      );
     } catch (e) {
       throw new Error(
-        `Error sending reaction event: ${
+        `Error sending command result event: ${
           'message' in (e as Error) ? (e as Error).message : e
         }`,
       );
@@ -590,7 +591,7 @@ export default class MatrixService extends Service {
     }
     let serializedCards = await Promise.all(
       cards.map(async (card) => {
-        let { Base64ImageField } = await loaderFor(card).import<{
+        let { Base64ImageField } = await this.loaderService.loader.import<{
           Base64ImageField: typeof Base64ImageFieldType;
         }>(`${baseRealm.url}base64-image`);
         return await this.cardService.serializeCard(card, {
@@ -1023,7 +1024,7 @@ export default class MatrixService extends Service {
   private async ensureRoomData(roomId: string) {
     let roomData = this.getRoomData(roomId);
     if (!roomData) {
-      roomData = new Room();
+      roomData = new Room(roomId);
       let rs = await this.getRoomState(roomId);
       if (rs) {
         roomData.notifyRoomStateUpdated(rs);
@@ -1198,6 +1199,53 @@ export default class MatrixService extends Service {
     eventsDrained!();
   }
 
+  private async ensureCardFragmentsLoaded(cardEventId: string, roomData: Room) {
+    let currentFragmentId: string | undefined = cardEventId;
+    do {
+      let fragmentEvent = roomData.events.find(
+        (e: DiscreteMatrixEvent) => e.event_id === currentFragmentId,
+      );
+      let fragmentData: CardFragmentContent['data'];
+      if (!fragmentEvent) {
+        fragmentEvent = (await this.client?.fetchRoomEvent(
+          roomData.roomId,
+          currentFragmentId ?? '',
+        )) as DiscreteMatrixEvent;
+        if (
+          fragmentEvent.type !== 'm.room.message' ||
+          fragmentEvent.content.msgtype !== APP_BOXEL_CARDFRAGMENT_MSGTYPE
+        ) {
+          throw new Error(
+            `Expected event ${currentFragmentId} to be ${APP_BOXEL_CARDFRAGMENT_MSGTYPE} but was ${JSON.stringify(
+              fragmentEvent,
+            )}`,
+          );
+        }
+        await this.addRoomEvent({
+          ...fragmentEvent,
+        });
+        fragmentData = (
+          typeof fragmentEvent.content.data === 'string'
+            ? JSON.parse((fragmentEvent.content as any).data)
+            : fragmentEvent.content.data
+        ) as CardFragmentContent['data'];
+      } else {
+        if (
+          fragmentEvent.type !== 'm.room.message' ||
+          fragmentEvent.content.msgtype !== APP_BOXEL_CARDFRAGMENT_MSGTYPE
+        ) {
+          throw new Error(
+            `Expected event to be '${APP_BOXEL_CARDFRAGMENT_MSGTYPE}' but was ${JSON.stringify(
+              fragmentEvent,
+            )}`,
+          );
+        }
+        fragmentData = fragmentEvent.content.data;
+      }
+      currentFragmentId = fragmentData?.nextFragment; // using '?' so we can be kind to older event schemas
+    } while (currentFragmentId);
+  }
+
   private async processDecryptedEvent(event: TempEvent, oldEventId?: string) {
     let { room_id: roomId } = event;
     if (!roomId) {
@@ -1245,52 +1293,20 @@ export default class MatrixService extends Service {
         Array.isArray(data.attachedCardsEventIds)
       ) {
         for (let attachedCardEventId of data.attachedCardsEventIds) {
-          let currentFragmentId: string | undefined = attachedCardEventId;
-          do {
-            let fragmentEvent = roomData.events.find(
-              (e: DiscreteMatrixEvent) => e.event_id === currentFragmentId,
-            );
-            let fragmentData: CardFragmentContent['data'];
-            if (!fragmentEvent) {
-              fragmentEvent = (await this.client?.fetchRoomEvent(
-                roomId,
-                currentFragmentId ?? '',
-              )) as DiscreteMatrixEvent;
-              if (
-                fragmentEvent.type !== 'm.room.message' ||
-                fragmentEvent.content.msgtype !== APP_BOXEL_CARDFRAGMENT_MSGTYPE
-              ) {
-                throw new Error(
-                  `Expected event ${currentFragmentId} to be '${APP_BOXEL_CARDFRAGMENT_MSGTYPE}' but was ${JSON.stringify(
-                    fragmentEvent,
-                  )}`,
-                );
-              }
-              await this.addRoomEvent({
-                ...fragmentEvent,
-              });
-              fragmentData = (
-                typeof fragmentEvent.content.data === 'string'
-                  ? JSON.parse((fragmentEvent.content as any).data)
-                  : fragmentEvent.content.data
-              ) as CardFragmentContent['data'];
-            } else {
-              if (
-                fragmentEvent.type !== 'm.room.message' ||
-                fragmentEvent.content.msgtype !== APP_BOXEL_CARDFRAGMENT_MSGTYPE
-              ) {
-                throw new Error(
-                  `Expected event to be '${APP_BOXEL_CARDFRAGMENT_MSGTYPE}' but was ${JSON.stringify(
-                    fragmentEvent,
-                  )}`,
-                );
-              }
-              fragmentData = fragmentEvent.content.data;
-            }
-            currentFragmentId = fragmentData?.nextFragment; // using '?' so we can be kind to older event schemas
-          } while (currentFragmentId);
+          this.ensureCardFragmentsLoaded(attachedCardEventId, roomData);
         }
       }
+    } else if (
+      roomData &&
+      event.type === APP_BOXEL_COMMAND_RESULT_EVENT_TYPE &&
+      event.content?.msgtype === APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE
+    ) {
+      let data = (
+        typeof event.content.data === 'string'
+          ? JSON.parse(event.content.data)
+          : event.content.data
+      ) as CommandResultWithOutputContent['data'];
+      this.ensureCardFragmentsLoaded(data.cardEventId, roomData);
     } else if (
       event.type === 'm.room.message' &&
       event.content?.msgtype === APP_BOXEL_REALM_SERVER_EVENT_MSGTYPE
diff --git a/packages/host/tests/acceptance/commands-test.gts b/packages/host/tests/acceptance/commands-test.gts
index 36ffa9bd13..ff5ef7e621 100644
--- a/packages/host/tests/acceptance/commands-test.gts
+++ b/packages/host/tests/acceptance/commands-test.gts
@@ -19,9 +19,11 @@ import { baseRealm, Command } from '@cardstack/runtime-common';
 import {
   APP_BOXEL_COMMAND_MSGTYPE,
   APP_BOXEL_MESSAGE_MSGTYPE,
+  APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
 } from '@cardstack/runtime-common/matrix-constants';
 
 import CreateAIAssistantRoomCommand from '@cardstack/host/commands/create-ai-assistant-room';
+import GetBoxelUIStateCommand from '@cardstack/host/commands/get-boxel-ui-state';
 import OpenAiAssistantRoomCommand from '@cardstack/host/commands/open-ai-assistant-room';
 import PatchCardCommand from '@cardstack/host/commands/patch-card';
 import SaveCardCommand from '@cardstack/host/commands/save-card';
@@ -269,12 +271,39 @@ module('Acceptance | Commands tests', function (hooks) {
           });
           await sleepCommand.execute(new ScheduleMeetingInput());
         };
+
+        runWhatSubmodeAmIIn = 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: 'Submode Check',
+          });
+          let sendAiAssistantMessageCommand = new SendAiAssistantMessageCommand(
+            commandContext,
+          );
+          let getBoxelUIStateCommand = new GetBoxelUIStateCommand(
+            commandContext,
+          );
+          await sendAiAssistantMessageCommand.execute({
+            roomId,
+            prompt: 'What submode am I in?',
+            commands: [{ command: getBoxelUIStateCommand, autoExecute: true }],
+          });
+        };
+
         runOpenAiAssistantRoomCommand = async () => {
           let commandContext = this.args.context?.commandContext;
           if (!commandContext) {
             console.error('No command context found');
             return;
           }
+
           let openAiAssistantRoomCommand = new OpenAiAssistantRoomCommand(
             commandContext,
           );
@@ -282,6 +311,7 @@ module('Acceptance | Commands tests', function (hooks) {
             roomId: 'mock_room_1',
           });
         };
+
         <template>
           <h2 data-test-person={{@model.firstName}}>
             <@fields.firstName />
@@ -315,6 +345,10 @@ module('Acceptance | Commands tests', function (hooks) {
             {{on 'click' this.runDelayCommandViaAiAssistant}}
             data-test-delay-button
           >Delay with autoExecute</button>
+          <button
+            {{on 'click' this.runWhatSubmodeAmIIn}}
+            data-test-what-submode-am-i-in
+          >What submode and I in?</button>
           <button
             {{on 'click' this.runOpenAiAssistantRoomCommand}}
             data-test-open-ai-assistant-room-button
@@ -329,6 +363,20 @@ module('Acceptance | Commands tests', function (hooks) {
         'person.gts': { Person, Meeting },
         'pet.gts': { Pet },
         'Pet/ringo.json': new Pet({ name: 'Ringo' }),
+        'AiCommandExample/london.json': {
+          data: {
+            type: 'card',
+            attributes: {
+              location: 'London',
+            },
+            meta: {
+              adoptsFrom: {
+                module: 'http://localhost:4202/test/ai-command-example',
+                name: 'AiCommandExample',
+              },
+            },
+          },
+        },
         'Person/hassan.json': new Person({
           firstName: 'Hassan',
           lastName: 'Abdel-Rahman',
@@ -745,4 +793,153 @@ module('Acceptance | Commands tests', function (hooks) {
       )
       .includesText('Meeting with Hassan');
   });
+
+  test('a command executed via the AI Assistant shows the result as an embedded card', async function (assert) {
+    await visitOperatorMode({
+      stacks: [
+        [
+          {
+            id: `${testRealmURL}index`,
+            format: 'isolated',
+          },
+        ],
+      ],
+    });
+    const testCard = `${testRealmURL}Person/hassan`;
+
+    await click('[data-test-boxel-filter-list-button="All Cards"]');
+    await click(
+      `[data-test-stack-card="${testRealmURL}index"] [data-test-cards-grid-item="${testCard}"]`,
+    );
+    await click('[data-test-what-submode-am-i-in]');
+    await click('[data-test-open-ai-assistant]');
+    await waitUntil(() => getRoomIds().length > 0);
+    let roomId = getRoomIds().pop()!;
+    let message = getRoomEvents(roomId).pop()!;
+    assert.strictEqual(message.content.msgtype, APP_BOXEL_MESSAGE_MSGTYPE);
+    let boxelMessageData = JSON.parse(message.content.data);
+    assert.strictEqual(boxelMessageData.context.tools.length, 1);
+    assert.strictEqual(boxelMessageData.context.tools[0].type, 'function');
+    let toolName = boxelMessageData.context.tools[0].function.name;
+    assert.ok(
+      /^GetBoxelUIState/.test(toolName),
+      'The function name starts with GetBoxelUIStateCommand_',
+    );
+    assert.strictEqual(
+      boxelMessageData.context.tools[0].function.description,
+      'Get information about the current state of the Boxel UI, including the current submode, what cards are open, and what room, if any, the AI assistant is showing.',
+    );
+    // TODO: do we need to include `required: ['attributes'],` in the parameters object? If so, how?
+    assert.deepEqual(boxelMessageData.context.tools[0].function.parameters, {
+      type: 'object',
+      properties: {
+        description: {
+          type: 'string',
+        },
+        attributes: {
+          type: 'object',
+          properties: {},
+        },
+        relationships: {
+          properties: {},
+          type: 'object',
+        },
+      },
+      required: ['attributes', 'description'],
+    });
+    simulateRemoteMessage(roomId, '@aibot:localhost', {
+      body: 'Inspecting the current UI state',
+      msgtype: APP_BOXEL_COMMAND_MSGTYPE,
+      formatted_body: 'Inspecting the current UI state',
+      format: 'org.matrix.custom.html',
+      data: JSON.stringify({
+        toolCall: {
+          name: toolName,
+          arguments: {
+            attributes: {},
+          },
+        },
+        eventId: '__EVENT_ID__',
+      }),
+      'm.relates_to': {
+        rel_type: 'm.replace',
+        event_id: '__EVENT_ID__',
+      },
+    });
+    await settled();
+    assert
+      .dom(
+        '[data-test-message-idx="0"][data-test-boxel-message-from="testuser"]',
+      )
+      .containsText('What submode am I in?');
+    assert
+      .dom('[data-test-message-idx="1"][data-test-boxel-message-from="aibot"]')
+      .containsText('Inspecting the current UI state');
+    assert
+      .dom('[data-test-message-idx="1"] [data-test-apply-state="applied"]')
+      .exists();
+    assert
+      .dom('[data-test-message-idx="1"] [data-test-boxel-command-result]')
+      .containsText('Submode: interact');
+  });
+
+  test('command returns serialized result in room message', async function (assert) {
+    await visitOperatorMode({
+      stacks: [
+        [
+          {
+            id: `${testRealmURL}AiCommandExample/london`,
+            format: 'isolated',
+          },
+        ],
+      ],
+    });
+
+    await click('[data-test-get-weather]');
+    await waitUntil(() => getRoomIds().length > 0);
+
+    let roomId = getRoomIds().pop()!;
+    let message = getRoomEvents(roomId).pop()!;
+    assert.strictEqual(message.content.msgtype, APP_BOXEL_MESSAGE_MSGTYPE);
+
+    let boxelMessageData = JSON.parse(message.content.data);
+    assert.strictEqual(boxelMessageData.context.tools.length, 1);
+    assert.strictEqual(boxelMessageData.context.tools[0].type, 'function');
+    let toolName = boxelMessageData.context.tools[0].function.name;
+
+    simulateRemoteMessage(roomId, '@aibot:localhost', {
+      body: 'Getting weather information for London',
+      msgtype: APP_BOXEL_COMMAND_MSGTYPE,
+      formatted_body: 'Getting weather information for London',
+      format: 'org.matrix.custom.html',
+      data: JSON.stringify({
+        toolCall: {
+          name: toolName,
+          arguments: {
+            attributes: {
+              location: 'London',
+            },
+          },
+        },
+        eventId: '__EVENT_ID__',
+      }),
+      'm.relates_to': {
+        rel_type: 'm.replace',
+        event_id: '__EVENT_ID__',
+      },
+    });
+
+    await settled();
+    let commandResultEvents = await getRoomEvents(roomId).filter(
+      (event) =>
+        event.type === APP_BOXEL_COMMAND_RESULT_EVENT_TYPE &&
+        event.content['m.relates_to']?.rel_type === 'm.annotation' &&
+        event.content['m.relates_to']?.key === 'applied',
+    );
+    assert.equal(
+      commandResultEvents.length,
+      1,
+      'command result event is dispatched',
+    );
+  });
 });
diff --git a/packages/host/tests/cards/ai-command-example.gts b/packages/host/tests/cards/ai-command-example.gts
new file mode 100644
index 0000000000..2636e6e27a
--- /dev/null
+++ b/packages/host/tests/cards/ai-command-example.gts
@@ -0,0 +1,83 @@
+import { on } from '@ember/modifier';
+
+import CreateAIAssistantRoomCommand from '@cardstack/boxel-host/commands/create-ai-assistant-room';
+import SendAiAssistantMessageCommand from '@cardstack/boxel-host/commands/send-ai-assistant-message';
+
+import { Button } from '@cardstack/boxel-ui/components';
+import { CardContainer } from '@cardstack/boxel-ui/components';
+
+import { Command } from '@cardstack/runtime-common';
+
+import {
+  CardDef,
+  Component,
+  StringField,
+  field,
+  contains,
+} from 'https://cardstack.com/base/card-api';
+
+export class WeatherLocationInput extends CardDef {
+  @field location = contains(StringField);
+}
+
+export class WeatherReport extends CardDef {
+  @field temperature = contains(StringField);
+  @field conditions = contains(StringField);
+}
+
+class GetWeatherCommand extends Command<WeatherLocationInput, WeatherReport> {
+  inputType = WeatherLocationInput;
+
+  async getInputType(): Promise<new (args: any) => WeatherLocationInput> {
+    return WeatherLocationInput;
+  }
+
+  protected async run(_input: WeatherLocationInput): Promise<WeatherReport> {
+    return new WeatherReport({
+      temperature: '25 C',
+      conditions: 'Sunny',
+    });
+  }
+}
+
+export class AiCommandExample extends CardDef {
+  static displayName = 'AI Command Example';
+
+  @field location = contains(StringField);
+
+  static isolated = class Isolated extends Component<typeof AiCommandExample> {
+    getWeather = async () => {
+      let commandContext = this.args.context?.commandContext;
+      if (!commandContext) {
+        throw new Error('No command context found');
+      }
+
+      let getWeatherCommand = new GetWeatherCommand(commandContext);
+
+      let createAIAssistantRoomCommand = new CreateAIAssistantRoomCommand(
+        commandContext,
+      );
+      let { roomId } = await createAIAssistantRoomCommand.execute({
+        name: 'Weather Assistant',
+      });
+
+      let sendMessageCommand = new SendAiAssistantMessageCommand(
+        commandContext,
+      );
+
+      await sendMessageCommand.execute({
+        roomId,
+        prompt: `What is the weather in ${this.args.model.location}?`,
+        commands: [{ command: getWeatherCommand, autoExecute: true }],
+      });
+    };
+
+    <template>
+      <CardContainer>
+        <Button data-test-get-weather {{on 'click' this.getWeather}}>
+          Get Weather
+        </Button>
+      </CardContainer>
+    </template>
+  };
+}
diff --git a/packages/host/tests/cards/captain.gts b/packages/host/tests/cards/captain.gts
new file mode 100644
index 0000000000..4226f06a9f
--- /dev/null
+++ b/packages/host/tests/cards/captain.gts
@@ -0,0 +1,23 @@
+import {
+  contains,
+  field,
+  CardDef,
+  StringField,
+} from 'https://cardstack.com/base/card-api';
+
+export class Boat extends CardDef {
+  @field name = contains(StringField);
+}
+
+export class Captain extends CardDef {
+  @field firstName = contains(StringField);
+  @field title = contains(StringField, {
+    computeVia: function (this: Captain) {
+      return this.firstName;
+    },
+  });
+
+  createEponymousBoat() {
+    return new Boat({ name: this.firstName });
+  }
+}
diff --git a/packages/host/tests/helpers/mock-matrix/_client.ts b/packages/host/tests/helpers/mock-matrix/_client.ts
index f3f7d2678a..42fef1a640 100644
--- a/packages/host/tests/helpers/mock-matrix/_client.ts
+++ b/packages/host/tests/helpers/mock-matrix/_client.ts
@@ -5,8 +5,9 @@ import * as MatrixSDK from 'matrix-js-sdk';
 import { baseRealm, unixTime } from '@cardstack/runtime-common';
 
 import {
-  APP_BOXEL_ROOM_SKILLS_EVENT_TYPE,
+  APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
   APP_BOXEL_REALMS_EVENT_TYPE,
+  APP_BOXEL_ROOM_SKILLS_EVENT_TYPE,
   LEGACY_APP_BOXEL_REALMS_EVENT_TYPE,
 } from '@cardstack/runtime-common/matrix-constants';
 
@@ -423,7 +424,7 @@ export class MockClient implements ExtendedClient {
       case APP_BOXEL_REALMS_EVENT_TYPE:
         return this.sdk.ClientEvent.AccountData;
       case APP_BOXEL_ROOM_SKILLS_EVENT_TYPE:
-      case 'm.reaction':
+      case APP_BOXEL_COMMAND_RESULT_EVENT_TYPE:
       case 'm.room.create':
       case 'm.room.message':
       case 'm.room.name':
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 22a7976a73..468f5c7193 100644
--- a/packages/host/tests/integration/components/ai-assistant-panel-test.gts
+++ b/packages/host/tests/integration/components/ai-assistant-panel-test.gts
@@ -19,7 +19,7 @@ import { Loader } from '@cardstack/runtime-common/loader';
 import {
   APP_BOXEL_CARDFRAGMENT_MSGTYPE,
   APP_BOXEL_COMMAND_MSGTYPE,
-  APP_BOXEL_COMMAND_RESULT_MSGTYPE,
+  APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
   APP_BOXEL_MESSAGE_MSGTYPE,
 } from '@cardstack/runtime-common/matrix-constants';
 
@@ -31,8 +31,6 @@ import OperatorModeStateService from '@cardstack/host/services/operator-mode-sta
 
 import { CurrentRoomIdPersistenceKey } from '@cardstack/host/utils/local-storage-keys';
 
-import type { CommandResultEvent } from 'https://cardstack.com/base/matrix-event';
-
 import {
   percySnapshot,
   testRealmURL,
@@ -1907,16 +1905,16 @@ module('Integration | ai-assistant-panel', function (hooks) {
         event_id: '__EVENT_ID__',
       },
     });
-    let commandReactionEvents = getRoomEvents(roomId).filter(
+    let commandResultEvents = getRoomEvents(roomId).filter(
       (event) =>
-        event.type === 'm.reaction' &&
+        event.type === APP_BOXEL_COMMAND_RESULT_EVENT_TYPE &&
         event.content['m.relates_to']?.rel_type === 'm.annotation' &&
         event.content['m.relates_to']?.key === 'applied',
     );
     assert.equal(
-      commandReactionEvents.length,
+      commandResultEvents.length,
       0,
-      'reaction event is not dispatched',
+      'command result event is not dispatched',
     );
 
     await settled();
@@ -1931,16 +1929,16 @@ module('Integration | ai-assistant-panel', function (hooks) {
       .dom('[data-test-message-idx="0"] [data-test-apply-state="applied"]')
       .exists();
 
-    commandReactionEvents = await getRoomEvents(roomId).filter(
+    commandResultEvents = await getRoomEvents(roomId).filter(
       (event) =>
-        event.type === 'm.reaction' &&
+        event.type === APP_BOXEL_COMMAND_RESULT_EVENT_TYPE &&
         event.content['m.relates_to']?.rel_type === 'm.annotation' &&
         event.content['m.relates_to']?.key === 'applied',
     );
     assert.equal(
-      commandReactionEvents.length,
+      commandResultEvents.length,
       1,
-      'reaction event is dispatched',
+      'command result event is dispatched',
     );
   });
 
@@ -1983,11 +1981,8 @@ module('Integration | ai-assistant-panel', function (hooks) {
         event_id: '__EVENT_ID__',
       },
     });
-    let commandResultEvents = getRoomEvents(roomId).filter(
-      (event) =>
-        event.type === 'm.room.message' &&
-        typeof event.content === 'object' &&
-        event.content.msgtype === APP_BOXEL_COMMAND_RESULT_MSGTYPE,
+    let commandResultEvents = await getRoomEvents(roomId).filter(
+      (event) => event.type === APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
     );
     assert.equal(
       commandResultEvents.length,
@@ -2006,10 +2001,7 @@ module('Integration | ai-assistant-panel', function (hooks) {
       .exists();
 
     commandResultEvents = await getRoomEvents(roomId).filter(
-      (event) =>
-        event.type === 'm.room.message' &&
-        typeof event.content === 'object' &&
-        event.content.msgtype === APP_BOXEL_COMMAND_RESULT_MSGTYPE,
+      (event) => event.type === APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
     );
     assert.equal(
       commandResultEvents.length,
@@ -2051,28 +2043,16 @@ module('Integration | ai-assistant-panel', function (hooks) {
     });
     await waitFor('[data-test-command-apply]');
     await click('[data-test-message-idx="0"] [data-test-command-apply]');
-    await waitFor('[data-test-command-result]');
+    await waitFor('[data-test-boxel-command-result]');
     await waitFor('.result-list li:nth-child(2)');
-    let commandResultEvent = (await getRoomEvents(roomId)).find(
-      (e) =>
-        e.type === 'm.room.message' &&
-        e.content.msgtype === APP_BOXEL_COMMAND_RESULT_MSGTYPE &&
-        e.content['m.relates_to']?.rel_type === 'm.annotation',
-    ) as CommandResultEvent;
-    let serializedResults =
-      typeof commandResultEvent?.content?.result === 'string'
-        ? JSON.parse(commandResultEvent.content.result)
-        : commandResultEvent.content.result;
-    serializedResults = Array.isArray(serializedResults)
-      ? serializedResults
-      : [];
-    assert.equal(serializedResults.length, 2, 'number of search results');
     assert
       .dom('[data-test-command-message]')
       .containsText('Search for the following card');
     assert
-      .dom('[data-test-command-result-header]')
-      .containsText('Search Results 2 Results');
+      .dom('[data-test-message-idx="0"] [data-test-boxel-card-header-title]')
+      .containsText('Search Results');
+
+    assert.dom('.result-list li').exists({ count: 2 });
 
     assert.dom('.result-list li:nth-child(1)').containsText('Jackie');
     assert.dom('.result-list li:nth-child(2)').containsText('Mango');
@@ -2111,28 +2091,16 @@ module('Integration | ai-assistant-panel', function (hooks) {
     });
     await waitFor('[data-test-command-apply]');
     await click('[data-test-message-idx="0"] [data-test-command-apply]');
-    await waitFor('[data-test-command-result]');
+    await waitFor(
+      '[data-test-message-idx="0"] [data-test-boxel-card-header-title]',
+    );
     await waitFor('.result-list li:nth-child(1)');
-    let commandResultEvent = (await getRoomEvents(roomId)).find(
-      (e) =>
-        e.type === 'm.room.message' &&
-        e.content.msgtype === APP_BOXEL_COMMAND_RESULT_MSGTYPE &&
-        e.content['m.relates_to']?.rel_type === 'm.annotation',
-    ) as CommandResultEvent;
-    let serializedResults =
-      typeof commandResultEvent?.content?.result === 'string'
-        ? JSON.parse(commandResultEvent.content.result)
-        : commandResultEvent.content.result;
-    serializedResults = Array.isArray(serializedResults)
-      ? serializedResults
-      : [];
-    assert.equal(serializedResults.length, 1, 'number of search results');
     assert
       .dom('[data-test-command-message]')
       .containsText('Search for the following card');
     assert
-      .dom('[data-test-command-result-header]')
-      .containsText('Search Results 1 Result');
+      .dom('[data-test-message-idx="0"] [data-test-boxel-card-header-title]')
+      .containsText('Search Results');
 
     assert.dom('.result-list li:nth-child(1)').containsText('Mango');
     assert.dom('[data-test-toggle-show-button]').doesNotExist();
@@ -2170,7 +2138,7 @@ module('Integration | ai-assistant-panel', function (hooks) {
     });
     await waitFor('[data-test-command-apply]');
     await click('[data-test-message-idx="0"] [data-test-command-apply]');
-    await waitFor('[data-test-command-result]');
+    await waitFor('[data-test-boxel-command-result]');
     await waitFor('.result-list li:nth-child(5)');
     assert.dom('.result-list li:nth-child(6)').doesNotExist();
     assert
@@ -2235,8 +2203,8 @@ module('Integration | ai-assistant-panel', function (hooks) {
     await waitFor('[data-test-command-apply]');
     await click('[data-test-message-idx="0"] [data-test-command-apply]');
     assert
-      .dom('[data-test-command-result-header]')
-      .containsText('Search Results 8 Results');
+      .dom('[data-test-message-idx="0"] [data-test-boxel-card-header-title]')
+      .containsText('Search Results');
 
     let resultListItem = '[data-test-result-list] > li';
     assert.dom(`${resultListItem}:nth-child(1)`).containsText('Buck');
@@ -2246,24 +2214,29 @@ module('Integration | ai-assistant-panel', function (hooks) {
       '[data-test-operator-mode-stack="1"] [data-test-stack-card-index="0"]';
     assert.dom(rightStackItem).doesNotExist();
 
-    await click('[data-test-command-result] [data-test-more-options-button]');
+    await click(
+      '[data-test-command-result-container] [data-test-more-options-button]',
+    );
     await click('[data-test-boxel-menu-item-text="Copy to Workspace"]');
     assert
       .dom(`${rightStackItem} [data-test-boxel-card-header-title]`)
-      .hasText('Command Result');
+      .hasText('Search Results');
 
     const savedCardId = document
       .querySelector(rightStackItem)
       ?.getAttribute('data-stack-card');
     const savedCard = `[data-test-card="${savedCardId}"] [data-test-command-result-isolated]`;
     assert.dom(`${savedCard} header`).hasText('Search Results 8 Results');
-    assert.dom(`${savedCard} [data-test-boxel-field]`).exists({ count: 3 });
+    assert.dom(`${savedCard} [data-test-boxel-field]`).exists({ count: 2 });
     assert
       .dom(`${savedCard} [data-test-boxel-field]:nth-child(1)`)
-      .hasText(`Description ${toolArgs.description}`);
-    assert
-      .dom(`${savedCard} [data-test-boxel-field]:nth-child(2)`)
-      .hasText(`Filter ${JSON.stringify(toolArgs.attributes.filter, null, 2)}`);
+      .hasText(
+        `Description Query: ${JSON.stringify(
+          toolArgs.attributes.filter,
+          null,
+          2,
+        )}`,
+      );
 
     resultListItem = `${savedCard} ${resultListItem}`;
     assert.dom(resultListItem).exists({ count: 8 });
@@ -2312,9 +2285,14 @@ module('Integration | ai-assistant-panel', function (hooks) {
     await waitFor('[data-test-command-apply]');
     await click('[data-test-message-idx="0"] [data-test-command-apply]');
     assert
-      .dom('[data-test-command-result-header]')
-      .containsText('Search Results 8 Results');
+      .dom('[data-test-message-idx="0"] [data-test-boxel-card-header-title]')
+      .containsText('Search Results');
 
+    assert
+      .dom(
+        '[data-test-command-result-container] [data-test-toggle-show-button]',
+      )
+      .containsText('Show 3 more results');
     let resultListItem = '[data-test-result-list] > li';
     assert.dom(`${resultListItem}:nth-child(1)`).containsText('Buck');
     assert.dom(`${resultListItem}:nth-child(5)`).containsText('Ian');
@@ -2323,24 +2301,29 @@ module('Integration | ai-assistant-panel', function (hooks) {
       '[data-test-operator-mode-stack="0"] [data-test-stack-card-index="0"]';
     assert.dom(stackItem).doesNotExist();
 
-    await click('[data-test-command-result] [data-test-more-options-button]');
+    await click(
+      '[data-test-command-result-container] [data-test-more-options-button]',
+    );
     await click('[data-test-boxel-menu-item-text="Copy to Workspace"]');
     assert
       .dom(`${stackItem} [data-test-boxel-card-header-title]`)
-      .hasText('Command Result');
+      .hasText('Search Results');
 
     const savedCardId = document
       .querySelector(stackItem)
       ?.getAttribute('data-stack-card');
     const savedCard = `[data-test-card="${savedCardId}"] [data-test-command-result-isolated]`;
     assert.dom(`${savedCard} header`).hasText('Search Results 8 Results');
-    assert.dom(`${savedCard} [data-test-boxel-field]`).exists({ count: 3 });
+    assert.dom(`${savedCard} [data-test-boxel-field]`).exists({ count: 2 });
     assert
       .dom(`${savedCard} [data-test-boxel-field]:nth-child(1)`)
-      .hasText(`Description ${toolArgs.description}`);
-    assert
-      .dom(`${savedCard} [data-test-boxel-field]:nth-child(2)`)
-      .hasText(`Filter ${JSON.stringify(toolArgs.attributes.filter, null, 2)}`);
+      .hasText(
+        `Description Query: ${JSON.stringify(
+          toolArgs.attributes.filter,
+          null,
+          2,
+        )}`,
+      );
 
     resultListItem = `${savedCard} ${resultListItem}`;
     assert.dom(resultListItem).exists({ count: 8 });
@@ -2348,4 +2331,66 @@ module('Integration | ai-assistant-panel', function (hooks) {
     assert.dom(`${resultListItem}:nth-child(6)`).containsText('Justin');
     assert.dom(`${resultListItem}:nth-child(8)`).containsText('Mickey');
   });
+
+  test('it maintains status of View Code panel as additional events stream in', async function (assert) {
+    await setCardInOperatorModeState(`${testRealmURL}Person/fadhlan`);
+    await renderComponent(
+      class TestDriver extends GlimmerComponent {
+        <template>
+          <OperatorMode @onClose={{noop}} />
+          <CardPrerender />
+        </template>
+      },
+    );
+    await waitFor('[data-test-person="Fadhlan"]');
+    let room1Id = createAndJoinRoom('@testuser:staging', 'test room 1');
+
+    simulateRemoteMessage(room1Id, '@aibot:localhost', {
+      msgtype: APP_BOXEL_COMMAND_MSGTYPE,
+      body: 'Changing first name to Evie',
+      formatted_body: 'Changing first name to Evie',
+      format: 'org.matrix.custom.html',
+      data: JSON.stringify({
+        toolCall: {
+          name: 'patchCard',
+          arguments: {
+            attributes: {
+              cardId: `${testRealmURL}Person/fadhlan`,
+              patch: {
+                attributes: { firstName: 'Evie' },
+              },
+            },
+          },
+        },
+        eventId: '__EVENT_ID__',
+      }),
+      'm.relates_to': {
+        rel_type: 'm.replace',
+        event_id: '__EVENT_ID__',
+      },
+    });
+
+    await settled();
+
+    await click('[data-test-open-ai-assistant]');
+    await waitFor('[data-test-room-name="test room 1"]');
+    assert
+      .dom('[data-test-ai-message-content] [data-test-editor]')
+      .doesNotExist('View Code panel should not yet be open');
+    await click('[data-test-view-code-button]');
+    assert
+      .dom('[data-test-ai-message-content] [data-test-editor]')
+      .exists('View Code panel should be open');
+
+    await fillIn(
+      '[data-test-message-field]',
+      'Asking a question about what I saw in the proposed code...',
+    );
+    await click('[data-test-send-message-btn]');
+
+    // previously, a new event would cause re-rendering and the open-ness of the View Code panel to be lost
+    assert
+      .dom('[data-test-ai-message-content] [data-test-editor]')
+      .exists('View Code panel should remain open');
+  });
 });
diff --git a/packages/host/tests/integration/components/loading-test.gts b/packages/host/tests/integration/components/loading-test.gts
new file mode 100644
index 0000000000..c43b81696b
--- /dev/null
+++ b/packages/host/tests/integration/components/loading-test.gts
@@ -0,0 +1,91 @@
+import { module, test } from 'qunit';
+
+import { baseRealm } from '@cardstack/runtime-common';
+import { Loader } from '@cardstack/runtime-common/loader';
+
+import type { CardDef } from 'https://cardstack.com/base/card-api';
+
+import {
+  testRealmURL,
+  setupCardLogs,
+  setupIntegrationTestRealm,
+  setupLocalIndexing,
+  setupServerSentEvents,
+  setupOnSave,
+  lookupLoaderService,
+} from '../../helpers';
+import { setupMockMatrix } from '../../helpers/mock-matrix';
+import { renderCard } from '../../helpers/render-component';
+import { setupRenderingTest } from '../../helpers/setup';
+
+module('Integration | loading', function (hooks) {
+  setupRenderingTest(hooks);
+
+  const realmName = 'Operator Mode Workspace';
+  let loader: Loader;
+  let cardApi: typeof import('https://cardstack.com/base/card-api');
+
+  hooks.beforeEach(function () {
+    loader = lookupLoaderService().loader;
+  });
+
+  setupLocalIndexing(hooks);
+  setupOnSave(hooks);
+  setupCardLogs(
+    hooks,
+    async () => await loader.import(`${baseRealm.url}card-api`),
+  );
+  setupServerSentEvents(hooks);
+  setupMockMatrix(hooks, {
+    loggedInAs: '@testuser:staging',
+    activeRealms: [testRealmURL],
+    autostart: true,
+  });
+
+  hooks.beforeEach(async function () {
+    let cardWithBrokenIconDefSource = `
+      import NonExistentIcon from '@cardstack/boxel-icons/non-existent';
+
+      import { CardDef } from 'https://cardstack.com/base/card-api';
+
+      export class CardWithBrokenIcon extends CardDef {
+        static icon = NonExistentIcon;
+      }
+    `;
+
+    await setupIntegrationTestRealm({
+      loader,
+      contents: {
+        'card-with-broken-icon.gts': cardWithBrokenIconDefSource,
+        '.realm.json': `{ "name": "${realmName}", "iconURL": "https://boxel-images.boxel.ai/icons/Letter-o.png" }`,
+      },
+    });
+  });
+
+  test('Cards attempting to import boxel icon that does not exist renders a 404 icon instead', async function (assert) {
+    cardApi = await loader.import(`${baseRealm.url}card-api`);
+    let { createFromSerialized } = cardApi;
+    let doc = {
+      data: {
+        attributes: {
+          title: 'Example',
+        },
+        meta: {
+          adoptsFrom: {
+            module: `${testRealmURL}card-with-broken-icon`,
+            name: 'CardWithBrokenIcon',
+          },
+        },
+      },
+    };
+    let exampleCard = await createFromSerialized<typeof CardDef>(
+      doc.data,
+      doc,
+      undefined,
+    );
+    await renderCard(loader, exampleCard, 'fitted');
+
+    assert.dom('[data-test-card-title]').containsText('Example');
+    assert.dom('svg.card-type-icon.icon-tabler-error-404').exists();
+  });
+});
diff --git a/packages/host/tests/integration/components/serialization-test.gts b/packages/host/tests/integration/components/serialization-test.gts
index 86d78fab68..0f1a7769e7 100644
--- a/packages/host/tests/integration/components/serialization-test.gts
+++ b/packages/host/tests/integration/components/serialization-test.gts
@@ -14,6 +14,8 @@ import {
 } from '@cardstack/runtime-common';
 import { Loader } from '@cardstack/runtime-common/loader';
 
+import type CardService from '@cardstack/host/services/card-service';
+
 import { type CardDef as CardDefType } from 'https://cardstack.com/base/card-api';
 
 import {
@@ -58,6 +60,8 @@ import {
 import { renderCard } from '../../helpers/render-component';
 import { setupRenderingTest } from '../../helpers/setup';
 
+import type { Captain } from '../../cards/captain';
+
 let loader: Loader;
 
 module('Integration | serialization', function (hooks) {
@@ -4006,6 +4010,109 @@ module('Integration | serialization', function (hooks) {
     });
   });
 
+  test('can serialize a card that is constructed by another card (test realm)', async function (assert) {
+    await setupIntegrationTestRealm({
+      loader,
+      contents: {
+        'Captain/mango.json': {
+          data: {
+            type: 'card',
+            attributes: {
+              firstName: 'Mango',
+            },
+            meta: {
+              adoptsFrom: {
+                module: 'http://localhost:4202/test/captain',
+                name: 'Captain',
+              },
+            },
+          },
+        },
+      },
+    });
+
+    let cardService = this.owner.lookup('service:card-service') as CardService;
+    let captainMango = await cardService.getCard(
+      `${testRealmURL}Captain/mango`,
+    );
+    let mangoTheBoat = (captainMango as Captain).createEponymousBoat();
+
+    assert.deepEqual(
+      serializeCard(mangoTheBoat, { includeUnrenderedFields: true }),
+      {
+        data: {
+          type: 'card',
+          attributes: {
+            description: null,
+            name: 'Mango',
+            thumbnailURL: null,
+            title: null,
+          },
+          meta: {
+            adoptsFrom: {
+              module: `http://localhost:4202/test/captain`,
+              name: 'Boat',
+            },
+          },
+        },
+      },
+    );
+  });
+
+  test('can serialize a card that is constructed by another card (shimmed)', async function (assert) {
+    class Pet extends CardDef {
+      @field name = contains(StringField);
+    }
+
+    class Person extends CardDef {
+      @field firstName = contains(StringField);
+      @field title = contains(StringField, {
+        computeVia: function (this: Person) {
+          return this.firstName;
+        },
+      });
+
+      createEponymousPet() {
+        return new Pet({ name: this.firstName });
+      }
+    }
+
+    await setupIntegrationTestRealm({
+      loader,
+      contents: {
+        'test-cards.gts': { Person, Pet },
+      },
+    });
+
+    let mangoThePerson = new Person({
+      id: `${testRealmURL}Person/mango`,
+      firstName: 'Mango',
+    });
+
+    let mangoThePet = mangoThePerson.createEponymousPet();
+
+    assert.deepEqual(
+      serializeCard(mangoThePet, { includeUnrenderedFields: true }),
+      {
+        data: {
+          type: 'card',
+          attributes: {
+            description: null,
+            name: 'Mango',
+            thumbnailURL: null,
+            title: null,
+          },
+          meta: {
+            adoptsFrom: {
+              module: `${testRealmURL}test-cards`,
+              name: 'Pet',
+            },
+          },
+        },
+      },
+    );
+  });
+
   module('linksToMany', function () {
     test('can serialize a linksToMany relationship', async function (assert) {
       class Pet extends CardDef {
diff --git a/packages/matrix/helpers/matrix-constants.ts b/packages/matrix/helpers/matrix-constants.ts
index d7e4a9495b..8eb37ea719 100644
--- a/packages/matrix/helpers/matrix-constants.ts
+++ b/packages/matrix/helpers/matrix-constants.ts
@@ -2,7 +2,11 @@ export const APP_BOXEL_CARDFRAGMENT_MSGTYPE = 'app.boxel.cardFragment';
 export const APP_BOXEL_MESSAGE_MSGTYPE = 'app.boxel.message';
 export const APP_BOXEL_COMMAND_MSGTYPE = 'app.boxel.command';
 export const APP_BOXEL_CARD_FORMAT = 'app.boxel.card';
-export const APP_BOXEL_COMMAND_RESULT_MSGTYPE = 'app.boxel.commandResult';
+export const APP_BOXEL_COMMAND_RESULT_EVENT_TYPE = 'app.boxel.commandResult';
+export const APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE =
+  'app.boxel.commandResultWithOutput';
+export const APP_BOXEL_COMMAND_RESULT_WITH_NO_OUTPUT_MSGTYPE =
+  'app.boxel.commandResultWithNoOutput';
 export const APP_BOXEL_REALM_SERVER_EVENT_MSGTYPE =
   'app.boxel.realm-server-event';
 export const APP_BOXEL_REALMS_EVENT_TYPE = 'app.boxel.realms';
diff --git a/packages/matrix/tests/commands.spec.ts b/packages/matrix/tests/commands.spec.ts
index 9417fbdd77..b13891fe5a 100644
--- a/packages/matrix/tests/commands.spec.ts
+++ b/packages/matrix/tests/commands.spec.ts
@@ -3,7 +3,7 @@ import { Credentials, putEvent, registerUser } from '../docker/synapse';
 import {
   APP_BOXEL_MESSAGE_MSGTYPE,
   APP_BOXEL_COMMAND_MSGTYPE,
-  APP_BOXEL_COMMAND_RESULT_MSGTYPE,
+  APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
 } from '../helpers/matrix-constants';
 
 import {
@@ -232,7 +232,7 @@ test.describe('Commands', () => {
     expect(boxelMessageData.context.tools).toMatchObject([]);
   }); */
 
-  test(`applying a command dispatches a reaction event if command is succesful`, async ({
+  test(`applying a command dispatches a CommandResultEvent if command is succesful`, async ({
     page,
   }) => {
     await login(page, 'user1', 'pass', { url: appURL });
@@ -273,10 +273,10 @@ test.describe('Commands', () => {
 
     await expect(async () => {
       let events = await getRoomEvents('user1', 'pass', room1);
-      let reactionEvent = (events as any).find(
-        (e: any) => e.type === 'm.reaction',
+      let commandResultEvent = (events as any).find(
+        (e: any) => e.type === APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
       );
-      await expect(reactionEvent).toBeDefined();
+      await expect(commandResultEvent).toBeDefined();
     }).toPass();
   });
 
@@ -322,9 +322,12 @@ test.describe('Commands', () => {
     await expect(async () => {
       let events = await getRoomEvents('user1', 'pass', room1);
       let commandResultEvent = (events as any).find(
-        (e: any) => e.content.msgtype === APP_BOXEL_COMMAND_RESULT_MSGTYPE,
+        (e: any) => e.type === APP_BOXEL_COMMAND_RESULT_EVENT_TYPE,
       );
       await expect(commandResultEvent).toBeDefined();
+      await expect(
+        JSON.parse(commandResultEvent.content.data).cardEventId,
+      ).toBeDefined();
     }).toPass();
   });
 
diff --git a/packages/realm-server/package.json b/packages/realm-server/package.json
index c5664c441a..7c47d99df7 100644
--- a/packages/realm-server/package.json
+++ b/packages/realm-server/package.json
@@ -76,10 +76,10 @@
     "start:pg": "./scripts/start-pg.sh",
     "stop:pg": "./scripts/stop-pg.sh",
     "test:wait-for-servers": "NODE_NO_WARNINGS=1 start-server-and-test 'pnpm run wait' 'http-get://localhost:4201/base/fields/boolean-field?acceptHeader=application%2Fvnd.card%2Bjson' 'pnpm run wait' 'http-get://localhost:4202/node-test/person-1?acceptHeader=application%2Fvnd.card%2Bjson|http://localhost:8008|http://localhost:5001' 'test'",
-    "setup:base-in-deployment": "mkdir -p /persistent/base && rsync --dry-run --itemize-changes --size-only --recursive ../base/. /persistent/base/ && rsync --size-only --recursive ../base/. /persistent/base/",
+    "setup:base-in-deployment": "mkdir -p /persistent/base && rsync --dry-run --itemize-changes --size-only --recursive --delete ../base/. /persistent/base/ && rsync --size-only --recursive --delete ../base/. /persistent/base/",
     "setup:experiments-in-deployment": "mkdir -p /persistent/experiments && rsync --dry-run --itemize-changes --size-only --recursive ../experiments-realm/. /persistent/experiments/ && rsync --size-only --recursive ../experiments-realm/. /persistent/experiments/",
-    "setup:seed-in-deployment": "mkdir -p /persistent/seed && rsync --dry-run --itemize-changes --size-only --recursive ../seed-realm/. /persistent/seed/ && rsync --size-only --recursive ../seed-realm/. /persistent/seed/",
-    "setup:catalog-in-deployment": "mkdir -p /persistent/catalog && rsync --dry-run --itemize-changes --size-only --recursive ../catalog-realm/. /persistent/catalog/ && rsync --size-only --recursive ../catalog-realm/. /persistent/catalog/",
+    "setup:seed-in-deployment": "mkdir -p /persistent/seed && rsync --dry-run --itemize-changes --size-only --recursive --delete ../seed-realm/. /persistent/seed/ && rsync --size-only --recursive --delete ../seed-realm/. /persistent/seed/",
+    "setup:catalog-in-deployment": "mkdir -p /persistent/catalog && rsync --dry-run --itemize-changes --size-only --recursive --delete ../catalog-realm/. /persistent/catalog/ && rsync --size-only --recursive --delete ../catalog-realm/. /persistent/catalog/",
     "start": "PGPORT=5435 NODE_NO_WARNINGS=1 ts-node --transpileOnly main",
     "start:base": "./scripts/start-base.sh",
     "start:test-realms": "./scripts/start-test-realms.sh",
diff --git a/packages/runtime-common/commands.ts b/packages/runtime-common/commands.ts
index d7f0d0b178..d3474daab5 100644
--- a/packages/runtime-common/commands.ts
+++ b/packages/runtime-common/commands.ts
@@ -119,6 +119,18 @@ export abstract class Command<
     mappings: Map<typeof CardAPI.FieldDef, AttributesSchema>,
   ): Promise<CardSchema> {
     let InputType = await this.getInputType();
+    if (!InputType) {
+      return {
+        attributes: {
+          type: 'object',
+          properties: {},
+        },
+        relationships: {
+          type: 'object',
+          properties: {},
+        },
+      };
+    }
     return generateJsonSchemaForCardType(
       InputType as unknown as typeof CardDef, // TODO: can we do better type-wise?
       cardApi,
diff --git a/packages/runtime-common/loader.ts b/packages/runtime-common/loader.ts
index 2b998e5eb3..8d806e2f44 100644
--- a/packages/runtime-common/loader.ts
+++ b/packages/runtime-common/loader.ts
@@ -130,7 +130,7 @@ export class Loader {
 
     for (let propName of Object.keys(module)) {
       // Normal modules always end up in our identity map because the only way for other code to gain access to the module's exports is by getting it through the
-      // proxy our loader has wrapped around it. But shimmed modules may be used directly by our caller before we've had a chance to put them in the dientity map.
+      // proxy our loader has wrapped around it. But shimmed modules may be used directly by our caller before we've had a chance to put them in the identity map.
       // So this eagerly puts them into the identity map.
       proxiedModule[propName]; // Makes sure the shimmed modules get into the identity map.
     }
@@ -642,6 +642,10 @@ export class Loader {
       });
 
       module.implementation(...dependencies);
+      for (let propName of Object.keys(moduleInstance)) {
+        // Experimental: eagerly consume exports from the module, so that they are all in the identity map.
+        moduleInstance[propName];
+      }
       this.setModule(moduleIdentifier, {
         state: 'evaluated',
         moduleInstance,
diff --git a/packages/runtime-common/matrix-constants.ts b/packages/runtime-common/matrix-constants.ts
index edbe488e0f..36191ad694 100644
--- a/packages/runtime-common/matrix-constants.ts
+++ b/packages/runtime-common/matrix-constants.ts
@@ -2,7 +2,11 @@ export const APP_BOXEL_CARDFRAGMENT_MSGTYPE = 'app.boxel.cardFragment';
 export const APP_BOXEL_MESSAGE_MSGTYPE = 'app.boxel.message';
 export const APP_BOXEL_COMMAND_MSGTYPE = 'app.boxel.command';
 export const APP_BOXEL_CARD_FORMAT = 'app.boxel.card';
-export const APP_BOXEL_COMMAND_RESULT_MSGTYPE = 'app.boxel.commandResult';
+export const APP_BOXEL_COMMAND_RESULT_EVENT_TYPE = 'app.boxel.commandResult';
+export const APP_BOXEL_COMMAND_RESULT_WITH_OUTPUT_MSGTYPE =
+  'app.boxel.commandResultWithOutput';
+export const APP_BOXEL_COMMAND_RESULT_WITH_NO_OUTPUT_MSGTYPE =
+  'app.boxel.commandResultWithNoOutput';
 export const APP_BOXEL_REALM_SERVER_EVENT_MSGTYPE =
   'app.boxel.realm-server-event';
 export const APP_BOXEL_ROOM_SKILLS_EVENT_TYPE = 'app.boxel.room.skills';
diff --git a/packages/seed-realm/CatalogEntry/sprint-planner.json b/packages/seed-realm/CatalogEntry/sprint-planner.json
new file mode 100644
index 0000000000..79253670da
--- /dev/null
+++ b/packages/seed-realm/CatalogEntry/sprint-planner.json
@@ -0,0 +1,20 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "title": "Sprint Planner",
+      "description": "Catalog entry for Sprint Planner App card",
+      "isField": false,
+      "ref": {
+        "module": "../sprint-planner",
+        "name": "SprintPlanner"
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/catalog-entry",
+        "name": "CatalogEntry"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/CatalogEntry/sprint-task.json b/packages/seed-realm/CatalogEntry/sprint-task.json
new file mode 100644
index 0000000000..1725e33d70
--- /dev/null
+++ b/packages/seed-realm/CatalogEntry/sprint-task.json
@@ -0,0 +1,20 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "title": "Sprint Task",
+      "description": "Catalog entry for Sprint Task",
+      "ref": {
+        "name": "SprintTask",
+        "module": "../sprint-task"
+      },
+      "isField": false
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/catalog-entry",
+        "name": "CatalogEntry"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/CatalogEntry/tag.json b/packages/seed-realm/CatalogEntry/tag.json
new file mode 100644
index 0000000000..db4d9831a1
--- /dev/null
+++ b/packages/seed-realm/CatalogEntry/tag.json
@@ -0,0 +1,20 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "title": "Tag",
+      "description": "Catalog entry for Tag",
+      "ref": {
+        "name": "Tag",
+        "module": "../tag"
+      },
+      "isField": false
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/catalog-entry",
+        "name": "CatalogEntry"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/CatalogEntry/task.json b/packages/seed-realm/CatalogEntry/task.json
new file mode 100644
index 0000000000..be66653e3c
--- /dev/null
+++ b/packages/seed-realm/CatalogEntry/task.json
@@ -0,0 +1,20 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "title": "Task",
+      "description": "Catalog entry for Task",
+      "ref": {
+        "name": "Task",
+        "module": "../task"
+      },
+      "isField": false
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/catalog-entry",
+        "name": "CatalogEntry"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/CatalogEntry/team-member.json b/packages/seed-realm/CatalogEntry/team-member.json
new file mode 100644
index 0000000000..0f04ce5802
--- /dev/null
+++ b/packages/seed-realm/CatalogEntry/team-member.json
@@ -0,0 +1,20 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "title": "Team Member",
+      "description": "Catalog entry for Team Member",
+      "ref": {
+        "name": "TeamMember",
+        "module": "../sprint-task"
+      },
+      "isField": false
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/catalog-entry",
+        "name": "CatalogEntry"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/CatalogEntry/team.json b/packages/seed-realm/CatalogEntry/team.json
new file mode 100644
index 0000000000..d259682406
--- /dev/null
+++ b/packages/seed-realm/CatalogEntry/team.json
@@ -0,0 +1,20 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "title": "Team",
+      "description": "Catalog entry for Team",
+      "ref": {
+        "name": "Team",
+        "module": "../sprint-task"
+      },
+      "isField": false
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/catalog-entry",
+        "name": "CatalogEntry"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/CatalogEntry/todo.json b/packages/seed-realm/CatalogEntry/todo.json
new file mode 100644
index 0000000000..a8e6108852
--- /dev/null
+++ b/packages/seed-realm/CatalogEntry/todo.json
@@ -0,0 +1,20 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "title": "Todo",
+      "description": "Catalog entry for Todo",
+      "ref": {
+        "name": "Todo",
+        "module": "../todo"
+      },
+      "isField": false
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/catalog-entry",
+        "name": "CatalogEntry"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/Project/51ca069b-1c55-4648-8654-bd82bf162f9d.json b/packages/seed-realm/Project/51ca069b-1c55-4648-8654-bd82bf162f9d.json
new file mode 100644
index 0000000000..d30fa2fefc
--- /dev/null
+++ b/packages/seed-realm/Project/51ca069b-1c55-4648-8654-bd82bf162f9d.json
@@ -0,0 +1,16 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Build Work Tracker",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "Project"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/Project/9b43240d-8c9c-42bc-a4d1-f9c626661562.json b/packages/seed-realm/Project/9b43240d-8c9c-42bc-a4d1-f9c626661562.json
new file mode 100644
index 0000000000..4e1e461909
--- /dev/null
+++ b/packages/seed-realm/Project/9b43240d-8c9c-42bc-a4d1-f9c626661562.json
@@ -0,0 +1,16 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Miscellaneous Backlog",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "Project"
+      }
+    }
+  }
+}
diff --git a/packages/experiments-realm/SprintPlanner/6bacffa6-952f-4c49-b0e3-ad0e5bf4f899.json b/packages/seed-realm/SprintPlanner/89209d31-328a-4c18-9758-53eb3c38d4f0.json
similarity index 55%
rename from packages/experiments-realm/SprintPlanner/6bacffa6-952f-4c49-b0e3-ad0e5bf4f899.json
rename to packages/seed-realm/SprintPlanner/89209d31-328a-4c18-9758-53eb3c38d4f0.json
index 70c134e6fe..27030b89d9 100644
--- a/packages/experiments-realm/SprintPlanner/6bacffa6-952f-4c49-b0e3-ad0e5bf4f899.json
+++ b/packages/seed-realm/SprintPlanner/89209d31-328a-4c18-9758-53eb3c38d4f0.json
@@ -2,22 +2,14 @@
   "data": {
     "type": "card",
     "attributes": {
-      "tabs": [],
-      "headerIcon": {
-        "altText": null,
-        "size": "actual",
-        "height": null,
-        "width": null,
-        "base64": null
-      },
-      "moduleId": null,
+      "title": "Engineering Team Sprint",
       "description": null,
       "thumbnailURL": null
     },
     "relationships": {
       "project": {
         "links": {
-          "self": "../Project/9b43240d-8c9c-42bc-a4d1-f9c626661562"
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
         }
       }
     },
diff --git a/packages/seed-realm/SprintTask/10402eaa-3826-4602-994b-60b7506fb98d.json b/packages/seed-realm/SprintTask/10402eaa-3826-4602-994b-60b7506fb98d.json
new file mode 100644
index 0000000000..831a182826
--- /dev/null
+++ b/packages/seed-realm/SprintTask/10402eaa-3826-4602-994b-60b7506fb98d.json
@@ -0,0 +1,58 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 1,
+        "label": "Next Sprint",
+        "color": "#64B5F6",
+        "completed": false
+      },
+      "dateRange": {
+        "start": "2024-12-08",
+        "end": "2024-12-10"
+      },
+      "priority": {
+        "index": 1,
+        "label": "Medium"
+      },
+      "name": "Create Pill Picker Example",
+      "details": "Implementation of a multi-select component using pills UI pattern, intended for use in the multi-filter feature. Users can select multiple pills simultaneously.\n\n**Note:** *This ticket is no longer relevant*",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "project": {
+        "links": {
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
+        }
+      },
+      "team": {
+        "links": {
+          "self": "../Team/cc574556-4253-44b8-ba80-0cfb844b4908"
+        }
+      },
+      "subtasks": {
+        "links": {
+          "self": null
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": "../TeamMember/f832cfb6-959e-4d0d-bc83-8712a36a910a"
+        }
+      },
+      "tags.0": {
+        "links": {
+          "self": "../Tag/6b8446c8-b185-4de9-ba81-88f8b9eee7f5"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "SprintTask"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/SprintTask/186c797c-cee8-449c-a5a7-6624052deefc.json b/packages/seed-realm/SprintTask/186c797c-cee8-449c-a5a7-6624052deefc.json
new file mode 100644
index 0000000000..f2779bcf6f
--- /dev/null
+++ b/packages/seed-realm/SprintTask/186c797c-cee8-449c-a5a7-6624052deefc.json
@@ -0,0 +1,68 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 4,
+        "label": "In Review",
+        "color": "#9575CD",
+        "completed": false
+      },
+      "dateRange": {
+        "start": "2024-10-10",
+        "end": "2025-01-09"
+      },
+      "priority": {
+        "index": null,
+        "label": null
+      },
+      "name": "Pair with Lucas to complete demo",
+      "details": "By Tuesday, we should have a demo that completes everything",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "project": {
+        "links": {
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
+        }
+      },
+      "team": {
+        "links": {
+          "self": "../Team/cc574556-4253-44b8-ba80-0cfb844b4908"
+        }
+      },
+      "subtasks.0": {
+        "links": {
+          "self": "./20058a9d-3c2d-4b42-8430-a95b6183245c"
+        }
+      },
+      "subtasks.1": {
+        "links": {
+          "self": "./9e23b8b5-d541-48ef-a652-e7afefb29777"
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": "../TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e"
+        }
+      },
+      "tags.0": {
+        "links": {
+          "self": "../Tag/6b8446c8-b185-4de9-ba81-88f8b9eee7f5"
+        }
+      },
+      "tags.1": {
+        "links": {
+          "self": "../Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "SprintTask"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/SprintTask/1b1fb4fd-d722-4cf9-a956-66fc64ccbc48.json b/packages/seed-realm/SprintTask/1b1fb4fd-d722-4cf9-a956-66fc64ccbc48.json
new file mode 100644
index 0000000000..4dc6c0fc9e
--- /dev/null
+++ b/packages/seed-realm/SprintTask/1b1fb4fd-d722-4cf9-a956-66fc64ccbc48.json
@@ -0,0 +1,58 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 2,
+        "label": "Current Sprint",
+        "color": "#00BCD4",
+        "completed": false
+      },
+      "dateRange": {
+        "start": "2024-12-19",
+        "end": "2025-01-09"
+      },
+      "priority": {
+        "index": 2,
+        "label": "Medium"
+      },
+      "name": "Implement Status and Priority Template Component with Dynamic Rendering",
+      "details": "Technical implementation of a reusable template component for displaying status and priority indicators across the application. Requirements include:\n- Create base template structure\n- Implement dynamic color rendering based on status\n- Add priority level visualization\n- Ensure accessibility compliance\n- Add unit tests for component",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "project": {
+        "links": {
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
+        }
+      },
+      "team": {
+        "links": {
+          "self": "../Team/cc574556-4253-44b8-ba80-0cfb844b4908"
+        }
+      },
+      "subtasks": {
+        "links": {
+          "self": null
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": "../TeamMember/f832cfb6-959e-4d0d-bc83-8712a36a910a"
+        }
+      },
+      "tags": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "SprintTask"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/SprintTask/20058a9d-3c2d-4b42-8430-a95b6183245c.json b/packages/seed-realm/SprintTask/20058a9d-3c2d-4b42-8430-a95b6183245c.json
new file mode 100644
index 0000000000..976286cce0
--- /dev/null
+++ b/packages/seed-realm/SprintTask/20058a9d-3c2d-4b42-8430-a95b6183245c.json
@@ -0,0 +1,68 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 5,
+        "label": "Staged",
+        "color": "#26A69A",
+        "completed": false
+      },
+      "dateRange": {
+        "start": "2024-11-06",
+        "end": "2024-11-15"
+      },
+      "priority": {
+        "index": 1,
+        "label": "Medium"
+      },
+      "name": "Port the already done work for CRM into the monorepo",
+      "details": "Copy the existing work that has been carried out through spikes and git commit to our monorepo",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "project": {
+        "links": {
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
+        }
+      },
+      "team": {
+        "links": {
+          "self": "../Team/cc574556-4253-44b8-ba80-0cfb844b4908"
+        }
+      },
+      "subtasks": {
+        "links": {
+          "self": null
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": "../TeamMember/847c1f4e-e0ae-43d3-a012-8ffaa66f5925"
+        }
+      },
+      "tags.0": {
+        "links": {
+          "self": "../Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228"
+        }
+      },
+      "tags.1": {
+        "links": {
+          "self": "../Tag/6b8446c8-b185-4de9-ba81-88f8b9eee7f5"
+        }
+      },
+      "tags.2": {
+        "links": {
+          "self": "../Tag/f00a2177-df10-4ad7-8eac-2fbf8448de98"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "SprintTask"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/SprintTask/346cc7ac-eb65-41fd-a1d7-0400668da097.json b/packages/seed-realm/SprintTask/346cc7ac-eb65-41fd-a1d7-0400668da097.json
new file mode 100644
index 0000000000..3052a78d24
--- /dev/null
+++ b/packages/seed-realm/SprintTask/346cc7ac-eb65-41fd-a1d7-0400668da097.json
@@ -0,0 +1,58 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 3,
+        "label": "In Progress",
+        "color": "#FFB74D",
+        "completed": false
+      },
+      "dateRange": {
+        "start": "2024-11-19",
+        "end": "2024-11-30"
+      },
+      "priority": {
+        "index": 2,
+        "label": "High"
+      },
+      "name": "Make fitted / embeddedd view for task",
+      "details": "Implement a responsive task view that adapts to its container size using container queries (@container), allowing tasks to be embedded in different contexts while maintaining proper layout and readability. This will ensure consistent display whether tasks appear in boards, lists, or as embedded components.",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "project": {
+        "links": {
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
+        }
+      },
+      "team": {
+        "links": {
+          "self": "../Team/cc574556-4253-44b8-ba80-0cfb844b4908"
+        }
+      },
+      "subtasks": {
+        "links": {
+          "self": null
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": "../TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be"
+        }
+      },
+      "tags.0": {
+        "links": {
+          "self": "../Tag/f00a2177-df10-4ad7-8eac-2fbf8448de98"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "SprintTask"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/SprintTask/3cd737c3-4157-46be-9880-6ead8ea60652.json b/packages/seed-realm/SprintTask/3cd737c3-4157-46be-9880-6ead8ea60652.json
new file mode 100644
index 0000000000..2ab10341a2
--- /dev/null
+++ b/packages/seed-realm/SprintTask/3cd737c3-4157-46be-9880-6ead8ea60652.json
@@ -0,0 +1,58 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 6,
+        "label": "Shipped",
+        "color": "#66BB6A",
+        "completed": true
+      },
+      "dateRange": {
+        "start": "2024-11-06",
+        "end": "2025-02-04"
+      },
+      "priority": {
+        "index": null,
+        "label": null
+      },
+      "name": "Build Kanban Board Component",
+      "details": "Implement drag and drop functionality using ember-modifier-drag-and-drop:\n\n- Install addon and implement TypeScript interfaces for events/data transfer\n- Create reusable drag/drop modifiers with visual feedback and preview\n- Add validation logic and write tests",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "project": {
+        "links": {
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
+        }
+      },
+      "team": {
+        "links": {
+          "self": "../Team/cc574556-4253-44b8-ba80-0cfb844b4908"
+        }
+      },
+      "subtasks": {
+        "links": {
+          "self": null
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": "../TeamMember/847c1f4e-e0ae-43d3-a012-8ffaa66f5925"
+        }
+      },
+      "tags": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "SprintTask"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/SprintTask/48630c9d-2849-43d1-b356-890b016fffe9.json b/packages/seed-realm/SprintTask/48630c9d-2849-43d1-b356-890b016fffe9.json
new file mode 100644
index 0000000000..59c53d3917
--- /dev/null
+++ b/packages/seed-realm/SprintTask/48630c9d-2849-43d1-b356-890b016fffe9.json
@@ -0,0 +1,58 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 2,
+        "label": "Current Sprint",
+        "color": "#00BCD4",
+        "completed": false
+      },
+      "dateRange": {
+        "start": null,
+        "end": null
+      },
+      "priority": {
+        "index": 4,
+        "label": "Highest"
+      },
+      "name": "Fill up task board with realistic data",
+      "details": "### Objective\nPopulate the task board with realistic sample data that demonstrates the full capabilities of our markdown and task tracking features.\n\n#### Requirements\n- [ ] Add variety of task statuses (Todo, In Progress, Done)\n- [ ] Include tasks with different priority levels\n- [ ] Create sample tasks with rich markdown content\n- [ ] Add realistic date ranges and deadlines",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "project": {
+        "links": {
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
+        }
+      },
+      "team": {
+        "links": {
+          "self": "../Team/cc574556-4253-44b8-ba80-0cfb844b4908"
+        }
+      },
+      "subtasks": {
+        "links": {
+          "self": null
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": "../TeamMember/03e293b9-e4c1-4592-b8d1-e6f963829086"
+        }
+      },
+      "tags.0": {
+        "links": {
+          "self": "../Tag/6d80a75f-71bb-474f-979d-ef4bc571ad63"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "SprintTask"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/SprintTask/7d92636a-e306-4433-93c5-3b5d976986f3.json b/packages/seed-realm/SprintTask/7d92636a-e306-4433-93c5-3b5d976986f3.json
new file mode 100644
index 0000000000..a5229e4f23
--- /dev/null
+++ b/packages/seed-realm/SprintTask/7d92636a-e306-4433-93c5-3b5d976986f3.json
@@ -0,0 +1,58 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 4,
+        "label": "In Review",
+        "color": "#9575CD",
+        "completed": false
+      },
+      "dateRange": {
+        "start": "2024-11-20",
+        "end": "2024-11-27"
+      },
+      "priority": {
+        "index": null,
+        "label": null
+      },
+      "name": "Implement Cross-Component Drag and Drop System",
+      "details": "Design and implement a robust drag and drop system with the following specifications:\n\n- Evaluate and integrate a suitable drag and drop library (e.g., react-dnd, dnd-kit, or sortablejs)\n- Create reusable drag and drop hooks/utilities\n- Implement drag source and drop target abstractions\n- Add visual feedback during drag operations\n- Handle drag preview with custom styling\n- Implement drop validation logic\n- Add support for touch devices\n- Create comprehensive test suite for DnD interactions\n- Document library integration and custom implementation details",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "project": {
+        "links": {
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
+        }
+      },
+      "team": {
+        "links": {
+          "self": "../Team/cc574556-4253-44b8-ba80-0cfb844b4908"
+        }
+      },
+      "subtasks.0": {
+        "links": {
+          "self": "./3cd737c3-4157-46be-9880-6ead8ea60652"
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": "../TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e"
+        }
+      },
+      "tags.0": {
+        "links": {
+          "self": "../Tag/6b8446c8-b185-4de9-ba81-88f8b9eee7f5"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "SprintTask"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/SprintTask/8ca45d40-adcb-437f-83ee-07ffd973cd17.json b/packages/seed-realm/SprintTask/8ca45d40-adcb-437f-83ee-07ffd973cd17.json
new file mode 100644
index 0000000000..649d317a2f
--- /dev/null
+++ b/packages/seed-realm/SprintTask/8ca45d40-adcb-437f-83ee-07ffd973cd17.json
@@ -0,0 +1,58 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 2,
+        "label": "Current Sprint",
+        "color": "#00BCD4",
+        "completed": false
+      },
+      "dateRange": {
+        "start": null,
+        "end": null
+      },
+      "priority": {
+        "index": null,
+        "label": null
+      },
+      "name": "Resolve bug where overlay only appears on certain cards",
+      "details": "The overlay is only appearing on specific cards due to a faulty modifier that's not being applied consistently across all card instances.",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "project": {
+        "links": {
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
+        }
+      },
+      "team": {
+        "links": {
+          "self": "../Team/cc574556-4253-44b8-ba80-0cfb844b4908"
+        }
+      },
+      "subtasks": {
+        "links": {
+          "self": null
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": "../TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e"
+        }
+      },
+      "tags.0": {
+        "links": {
+          "self": "../Tag/c3b47bc8-a7df-48c3-8b7b-50dacbf124fc"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "SprintTask"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/SprintTask/9e23b8b5-d541-48ef-a652-e7afefb29777.json b/packages/seed-realm/SprintTask/9e23b8b5-d541-48ef-a652-e7afefb29777.json
new file mode 100644
index 0000000000..44206a770e
--- /dev/null
+++ b/packages/seed-realm/SprintTask/9e23b8b5-d541-48ef-a652-e7afefb29777.json
@@ -0,0 +1,58 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 6,
+        "label": "Shipped",
+        "color": "#66BB6A",
+        "completed": true
+      },
+      "dateRange": {
+        "start": "2024-11-07",
+        "end": "2024-11-21"
+      },
+      "priority": {
+        "index": null,
+        "label": null
+      },
+      "name": "Incoporate Boxel Multi Select in Dropdown",
+      "details": "Integrate Boxel's multi-select dropdown component to be more unified with the single-select dropdown.\n\nThe trigger component should share the same designs.",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "project": {
+        "links": {
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
+        }
+      },
+      "team": {
+        "links": {
+          "self": "../Team/cc574556-4253-44b8-ba80-0cfb844b4908"
+        }
+      },
+      "subtasks": {
+        "links": {
+          "self": null
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": "../TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e"
+        }
+      },
+      "tags": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "SprintTask"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/SprintTask/a1fd93a9-6b00-4b79-8d97-6c34c3a19cc3.json b/packages/seed-realm/SprintTask/a1fd93a9-6b00-4b79-8d97-6c34c3a19cc3.json
new file mode 100644
index 0000000000..0e0b089c0b
--- /dev/null
+++ b/packages/seed-realm/SprintTask/a1fd93a9-6b00-4b79-8d97-6c34c3a19cc3.json
@@ -0,0 +1,58 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 1,
+        "label": "Next Sprint",
+        "color": null,
+        "completed": false
+      },
+      "dateRange": {
+        "start": null,
+        "end": null
+      },
+      "priority": {
+        "index": 4,
+        "label": "Highest"
+      },
+      "name": "Calendar displays wrong date after closing",
+      "details": null,
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "project": {
+        "links": {
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
+        }
+      },
+      "team": {
+        "links": {
+          "self": null
+        }
+      },
+      "subtasks": {
+        "links": {
+          "self": null
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": null
+        }
+      },
+      "tags.0": {
+        "links": {
+          "self": "../Tag/c3b47bc8-a7df-48c3-8b7b-50dacbf124fc"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "SprintTask"
+      }
+    }
+  }
+}
diff --git a/packages/experiments-realm/SprintTask/9b0425f9-ac54-44a4-8cfb-1774442490ea.json b/packages/seed-realm/SprintTask/d21d407b-9c1c-4204-a3bb-7b91f9260017.json
similarity index 71%
rename from packages/experiments-realm/SprintTask/9b0425f9-ac54-44a4-8cfb-1774442490ea.json
rename to packages/seed-realm/SprintTask/d21d407b-9c1c-4204-a3bb-7b91f9260017.json
index a180327692..0c59d1133f 100644
--- a/packages/experiments-realm/SprintTask/9b0425f9-ac54-44a4-8cfb-1774442490ea.json
+++ b/packages/seed-realm/SprintTask/d21d407b-9c1c-4204-a3bb-7b91f9260017.json
@@ -9,14 +9,14 @@
         "completed": false
       },
       "dateRange": {
-        "start": null,
-        "end": null
+        "start": "2024-12-01",
+        "end": "2024-12-08"
       },
       "priority": {
-        "index": 3,
-        "label": "High"
+        "index": null,
+        "label": null
       },
-      "name": "Cleanup all the dbs",
+      "name": "Create RHS Sheet",
       "details": null,
       "description": null,
       "thumbnailURL": null
@@ -24,12 +24,12 @@
     "relationships": {
       "project": {
         "links": {
-          "self": "../Project/9b43240d-8c9c-42bc-a4d1-f9c626661562"
+          "self": null
         }
       },
       "team": {
         "links": {
-          "self": null
+          "self": "../Team/0a799af4-c49a-4d27-aabe-9ed54b9baf55"
         }
       },
       "subtasks": {
@@ -39,7 +39,7 @@
       },
       "assignee": {
         "links": {
-          "self": null
+          "self": "../TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be"
         }
       },
       "tags": {
@@ -50,9 +50,9 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/seed-realm/SprintTask/d8ce7466-3693-4d54-8931-8ccd25ca079f.json b/packages/seed-realm/SprintTask/d8ce7466-3693-4d54-8931-8ccd25ca079f.json
new file mode 100644
index 0000000000..0376341087
--- /dev/null
+++ b/packages/seed-realm/SprintTask/d8ce7466-3693-4d54-8931-8ccd25ca079f.json
@@ -0,0 +1,63 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 0,
+        "label": "Not Started",
+        "color": "#B0BEC5",
+        "completed": false
+      },
+      "dateRange": {
+        "start": "2024-11-13",
+        "end": "2024-12-17"
+      },
+      "priority": {
+        "index": 0,
+        "label": "Lowest"
+      },
+      "name": "Build Date Range Card",
+      "details": "",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "project": {
+        "links": {
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
+        }
+      },
+      "team": {
+        "links": {
+          "self": "../Team/0a799af4-c49a-4d27-aabe-9ed54b9baf55"
+        }
+      },
+      "subtasks.0": {
+        "links": {
+          "self": "./a1fd93a9-6b00-4b79-8d97-6c34c3a19cc3"
+        }
+      },
+      "subtasks.1": {
+        "links": {
+          "self": "./d9fdfbbc-fb17-41d9-90a2-c5765819930b"
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": "../TeamMember/03e293b9-e4c1-4592-b8d1-e6f963829086"
+        }
+      },
+      "tags.0": {
+        "links": {
+          "self": "../Tag/f00a2177-df10-4ad7-8eac-2fbf8448de98"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "SprintTask"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/SprintTask/d9fdfbbc-fb17-41d9-90a2-c5765819930b.json b/packages/seed-realm/SprintTask/d9fdfbbc-fb17-41d9-90a2-c5765819930b.json
new file mode 100644
index 0000000000..d230492914
--- /dev/null
+++ b/packages/seed-realm/SprintTask/d9fdfbbc-fb17-41d9-90a2-c5765819930b.json
@@ -0,0 +1,58 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "status": {
+        "index": 1,
+        "label": "Next Sprint",
+        "color": null,
+        "completed": false
+      },
+      "dateRange": {
+        "start": "2025-01-09",
+        "end": "2025-01-12"
+      },
+      "priority": {
+        "index": null,
+        "label": null
+      },
+      "name": "Integrate Ember Power Calendar Picker",
+      "details": "Create a date range picker component using Ember Power Calendar with built-in validation to prevent end dates being set before start dates. Component should be implemented within a dropdown for better UX, following this pattern:\n\n1. Click triggers dropdown with calendar\n2. First click sets start date\n3. Second click sets end date (with validation)\n4. Invalid date ranges should be prevented and show validation feedback\n\n**Technical Requirements:**\n- Use `ember-power-calendar` for the calendar implementation\n- Implement date validation logic in the component\n- Style dropdown to match our design system",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "project": {
+        "links": {
+          "self": "../Project/51ca069b-1c55-4648-8654-bd82bf162f9d"
+        }
+      },
+      "team": {
+        "links": {
+          "self": null
+        }
+      },
+      "subtasks": {
+        "links": {
+          "self": null
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": null
+        }
+      },
+      "tags": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "SprintTask"
+      }
+    }
+  }
+}
diff --git a/packages/experiments-realm/SprintTask/bb4323d6-1ea4-40d0-a039-85d13e55d4a6.json b/packages/seed-realm/SprintTask/f81ea9a1-0b94-4e12-8e2e-c84fba78c551.json
similarity index 73%
rename from packages/experiments-realm/SprintTask/bb4323d6-1ea4-40d0-a039-85d13e55d4a6.json
rename to packages/seed-realm/SprintTask/f81ea9a1-0b94-4e12-8e2e-c84fba78c551.json
index aaaf0426a4..c625a07921 100644
--- a/packages/experiments-realm/SprintTask/bb4323d6-1ea4-40d0-a039-85d13e55d4a6.json
+++ b/packages/seed-realm/SprintTask/f81ea9a1-0b94-4e12-8e2e-c84fba78c551.json
@@ -4,9 +4,9 @@
     "attributes": {
       "status": {
         "completed": false,
-        "index": 1,
-        "label": "Next Sprint",
-        "color": "#64B5F6"
+        "index": 2,
+        "label": "Current Sprint",
+        "color": "#00BCD4"
       },
       "dateRange": {
         "start": null,
@@ -16,7 +16,7 @@
         "index": null,
         "label": null
       },
-      "name": "Create Tag List",
+      "name": "Move cards-grid fitted template into a component that can be re-used",
       "details": null,
       "description": null,
       "thumbnailURL": null
@@ -24,7 +24,7 @@
     "relationships": {
       "project": {
         "links": {
-          "self": "../Project/9b43240d-8c9c-42bc-a4d1-f9c626661562"
+          "self": null
         }
       },
       "team": {
@@ -39,7 +39,7 @@
       },
       "assignee": {
         "links": {
-          "self": "../TeamMember/03e293b9-e4c1-4592-b8d1-e6f963829086"
+          "self": null
         }
       },
       "tags": {
@@ -50,7 +50,7 @@
     },
     "meta": {
       "adoptsFrom": {
-        "module": "../productivity/task",
+        "module": "../sprint-task",
         "name": "SprintTask"
       }
     }
diff --git a/packages/seed-realm/Tag/6b8446c8-b185-4de9-ba81-88f8b9eee7f5.json b/packages/seed-realm/Tag/6b8446c8-b185-4de9-ba81-88f8b9eee7f5.json
new file mode 100644
index 0000000000..53db14bba4
--- /dev/null
+++ b/packages/seed-realm/Tag/6b8446c8-b185-4de9-ba81-88f8b9eee7f5.json
@@ -0,0 +1,17 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Boxel UI",
+      "color": "",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../tag",
+        "name": "Tag"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/Tag/6d80a75f-71bb-474f-979d-ef4bc571ad63.json b/packages/seed-realm/Tag/6d80a75f-71bb-474f-979d-ef4bc571ad63.json
new file mode 100644
index 0000000000..88c1cfd577
--- /dev/null
+++ b/packages/seed-realm/Tag/6d80a75f-71bb-474f-979d-ef4bc571ad63.json
@@ -0,0 +1,17 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "High Priority",
+      "color": "var(--boxel-yellow)",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../tag",
+        "name": "Tag"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/seed-realm/Tag/8a14f671-4daf-4195-aca5-85dc143d15b8.json b/packages/seed-realm/Tag/8a14f671-4daf-4195-aca5-85dc143d15b8.json
new file mode 100644
index 0000000000..b4bb5907ad
--- /dev/null
+++ b/packages/seed-realm/Tag/8a14f671-4daf-4195-aca5-85dc143d15b8.json
@@ -0,0 +1,17 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Proposal",
+      "color": "var(--boxel-lilac)",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../tag",
+        "name": "Tag"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/seed-realm/Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228.json b/packages/seed-realm/Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228.json
new file mode 100644
index 0000000000..10ca6b584c
--- /dev/null
+++ b/packages/seed-realm/Tag/ad921cba-ffc7-4fdb-af34-ab8b93eae228.json
@@ -0,0 +1,17 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "App",
+      "color": "",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../tag",
+        "name": "Tag"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/Tag/c3b47bc8-a7df-48c3-8b7b-50dacbf124fc.json b/packages/seed-realm/Tag/c3b47bc8-a7df-48c3-8b7b-50dacbf124fc.json
new file mode 100644
index 0000000000..4c7f6196c4
--- /dev/null
+++ b/packages/seed-realm/Tag/c3b47bc8-a7df-48c3-8b7b-50dacbf124fc.json
@@ -0,0 +1,17 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Bug",
+      "color": "#FFCCCB",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../tag",
+        "name": "Tag"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/seed-realm/Tag/f00a2177-df10-4ad7-8eac-2fbf8448de98.json b/packages/seed-realm/Tag/f00a2177-df10-4ad7-8eac-2fbf8448de98.json
new file mode 100644
index 0000000000..e03a6343a0
--- /dev/null
+++ b/packages/seed-realm/Tag/f00a2177-df10-4ad7-8eac-2fbf8448de98.json
@@ -0,0 +1,17 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Card",
+      "color": "",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../tag",
+        "name": "Tag"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/Task/c0bf3231-435c-4363-ad92-a1d756aea8d9.json b/packages/seed-realm/Task/c0bf3231-435c-4363-ad92-a1d756aea8d9.json
new file mode 100644
index 0000000000..1bad35496c
--- /dev/null
+++ b/packages/seed-realm/Task/c0bf3231-435c-4363-ad92-a1d756aea8d9.json
@@ -0,0 +1,43 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "dateRange": {
+        "start": null,
+        "end": null
+      },
+      "status": {
+        "index": 0,
+        "label": "Not Started",
+        "color": "#B0BEC5",
+        "completed": false
+      },
+      "priority": {
+        "index": 1,
+        "label": "Low"
+      },
+      "name": "Renew Google Play Data Agreement",
+      "details": null,
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "tags": {
+        "links": {
+          "self": null
+        }
+      },
+      "assignee": {
+        "links": {
+          "self": "../TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../task",
+        "name": "Task"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/seed-realm/Team/0a799af4-c49a-4d27-aabe-9ed54b9baf55.json b/packages/seed-realm/Team/0a799af4-c49a-4d27-aabe-9ed54b9baf55.json
new file mode 100644
index 0000000000..ded61fd31b
--- /dev/null
+++ b/packages/seed-realm/Team/0a799af4-c49a-4d27-aabe-9ed54b9baf55.json
@@ -0,0 +1,16 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Core",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "Team"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/Team/cc574556-4253-44b8-ba80-0cfb844b4908.json b/packages/seed-realm/Team/cc574556-4253-44b8-ba80-0cfb844b4908.json
new file mode 100644
index 0000000000..fc3e5ca3c3
--- /dev/null
+++ b/packages/seed-realm/Team/cc574556-4253-44b8-ba80-0cfb844b4908.json
@@ -0,0 +1,16 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Ecosystem",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "Team"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/TeamMember/03e293b9-e4c1-4592-b8d1-e6f963829086.json b/packages/seed-realm/TeamMember/03e293b9-e4c1-4592-b8d1-e6f963829086.json
new file mode 100644
index 0000000000..a96a2f91be
--- /dev/null
+++ b/packages/seed-realm/TeamMember/03e293b9-e4c1-4592-b8d1-e6f963829086.json
@@ -0,0 +1,24 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Richard",
+      "email": null,
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "team": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "TeamMember"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be.json b/packages/seed-realm/TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be.json
new file mode 100644
index 0000000000..8c1fa2b79d
--- /dev/null
+++ b/packages/seed-realm/TeamMember/4c9614cd-ecda-42cf-bc18-37903019a7be.json
@@ -0,0 +1,24 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Luke",
+      "email": "",
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "team": {
+        "links": {
+          "self": "../Team/0a799af4-c49a-4d27-aabe-9ed54b9baf55"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "TeamMember"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e.json b/packages/seed-realm/TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e.json
new file mode 100644
index 0000000000..32c36b206b
--- /dev/null
+++ b/packages/seed-realm/TeamMember/5c42e6e9-59c8-4585-a721-e3414d7e7c9e.json
@@ -0,0 +1,24 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Justin",
+      "email": null,
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "team": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "TeamMember"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/TeamMember/847c1f4e-e0ae-43d3-a012-8ffaa66f5925.json b/packages/seed-realm/TeamMember/847c1f4e-e0ae-43d3-a012-8ffaa66f5925.json
new file mode 100644
index 0000000000..61eff946d8
--- /dev/null
+++ b/packages/seed-realm/TeamMember/847c1f4e-e0ae-43d3-a012-8ffaa66f5925.json
@@ -0,0 +1,24 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Lucas",
+      "email": null,
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "team": {
+        "links": {
+          "self": null
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "TeamMember"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/TeamMember/f832cfb6-959e-4d0d-bc83-8712a36a910a.json b/packages/seed-realm/TeamMember/f832cfb6-959e-4d0d-bc83-8712a36a910a.json
new file mode 100644
index 0000000000..098ecf72e8
--- /dev/null
+++ b/packages/seed-realm/TeamMember/f832cfb6-959e-4d0d-bc83-8712a36a910a.json
@@ -0,0 +1,24 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Burcu",
+      "email": null,
+      "description": null,
+      "thumbnailURL": null
+    },
+    "relationships": {
+      "team": {
+        "links": {
+          "self": "../Team/0a799af4-c49a-4d27-aabe-9ed54b9baf55"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../sprint-task",
+        "name": "TeamMember"
+      }
+    }
+  }
+}
diff --git a/packages/seed-realm/Todo/959133bc-c472-4cf7-ba6f-1c5b03979eba.json b/packages/seed-realm/Todo/959133bc-c472-4cf7-ba6f-1c5b03979eba.json
new file mode 100644
index 0000000000..eba687f4c4
--- /dev/null
+++ b/packages/seed-realm/Todo/959133bc-c472-4cf7-ba6f-1c5b03979eba.json
@@ -0,0 +1,18 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Buy pancake flour for dinner",
+      "details": "Make sure to get Krusteaz Buttermilk mix. Do not buy the cinnamon one!",
+      "title": null,
+      "description": null,
+      "thumbnailURL": null
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../todo",
+        "name": "Todo"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/seed-realm/components/filter/filter-display.gts b/packages/seed-realm/components/filter/filter-display.gts
new file mode 100644
index 0000000000..1b8ec06499
--- /dev/null
+++ b/packages/seed-realm/components/filter/filter-display.gts
@@ -0,0 +1,64 @@
+import GlimmerComponent from '@glimmer/component';
+import { Pill, IconButton } from '@cardstack/boxel-ui/components';
+import { IconX } from '@cardstack/boxel-ui/icons';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+
+export interface FilterDisplaySignature {
+  Args: {
+    key: string;
+    items: any[];
+    removeItem: (item: any) => void;
+    icon: any;
+  };
+  Element: HTMLDivElement;
+  Blocks: {
+    default: [any];
+  };
+}
+
+export class FilterDisplay extends GlimmerComponent<FilterDisplaySignature> {
+  <template>
+    {{#each @items as |item|}}
+      <Pill class='filter-display-pill'>
+        <:default>
+          {{#if @icon}}
+            <@icon class='filter-display-icon' />
+          {{/if}}
+          {{@key}}
+          =
+          <strong>{{yield item}}</strong>
+        </:default>
+        <:iconRight>
+          <IconButton
+            @icon={{IconX}}
+            {{on 'click' (fn @removeItem item)}}
+            class='filter-display-remove-button'
+          />
+        </:iconRight>
+      </Pill>
+    {{/each}}
+    <style scoped>
+      .filter-display-pill {
+        flex-shrink: 0;
+        font: 500 var(--boxel-font-sm);
+        --pill-padding: var(--boxel-sp-xxxs) var(--boxel-sp-xxs);
+        --pill-background-color: var(--boxel-100);
+      }
+      .filter-display-remove-button {
+        --boxel-icon-button-height: 10px;
+        --boxel-icon-button-width: 10px;
+        --inner-boxel-icon-button-width: 8px;
+        --inner-boxel-icon-button-height: 8px;
+      }
+      .filter-display-icon {
+        width: 15px;
+        height: 15px;
+        margin-right: var(--boxel-sp-xxxs);
+      }
+      strong {
+        font-weight: 600;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/seed-realm/components/filter/filter-dropdown-item.gts b/packages/seed-realm/components/filter/filter-dropdown-item.gts
new file mode 100644
index 0000000000..309272c05c
--- /dev/null
+++ b/packages/seed-realm/components/filter/filter-dropdown-item.gts
@@ -0,0 +1,96 @@
+import GlimmerComponent from '@glimmer/component';
+import { CheckMark } from '@cardstack/boxel-ui/icons';
+import { cn } from '@cardstack/boxel-ui/helpers';
+
+interface CheckBoxArgs {
+  Args: {
+    isSelected: boolean;
+  };
+  Element: Element;
+}
+
+class CheckboxIndicator extends GlimmerComponent<CheckBoxArgs> {
+  <template>
+    <div class='checkbox-indicator'>
+      <span class={{cn 'check-icon' check-icon--selected=@isSelected}}>
+        <CheckMark width='12' height='12' />
+      </span>
+    </div>
+    <style scoped>
+      .checkbox-indicator {
+        width: 16px;
+        height: 16px;
+        border: 1px solid var(--boxel-500);
+        border-radius: 3px;
+        margin-right: var(--boxel-sp-xs);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .checkbox-indicator:hover,
+      .checkbox-indicator:focus {
+        box-shadow: 0 0 0 2px var(--boxel-dark-teal);
+      }
+      .check-icon {
+        --icon-color: var(--boxel-dark-teal);
+        visibility: collapse;
+        display: contents;
+      }
+      .check-icon--selected {
+        visibility: visible;
+      }
+    </style>
+  </template>
+}
+
+interface StatusPillArgs {
+  Args: {
+    isSelected: boolean;
+    label: string;
+  };
+  Element: Element;
+}
+
+export class StatusPill extends GlimmerComponent<StatusPillArgs> {
+  <template>
+    <span class='status-pill'>
+      <div class='status-pill-content'>
+        <CheckboxIndicator @isSelected={{@isSelected}} />
+        <div class='status-name'>{{@label}}</div>
+      </div>
+    </span>
+
+    <style scoped>
+      .status-pill {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: var(--boxel-font-size-sm);
+        cursor: pointer;
+        width: 100%;
+      }
+      .status-pill.selected {
+        background-color: var(--boxel-highlight);
+      }
+      .status-pill-content {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-4xs);
+      }
+      .status-avatar {
+        width: var(--boxel-sp-sm);
+        height: var(--boxel-sp-sm);
+        border-radius: 50%;
+        background-color: var(--avatar-bg-color, var(--boxel-light));
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: var(--boxel-sp-xs);
+        font-size: var(--boxel-font-size-xs);
+      }
+      .status-name {
+        flex-grow: 1;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/seed-realm/components/filter/filter-dropdown.gts b/packages/seed-realm/components/filter/filter-dropdown.gts
new file mode 100644
index 0000000000..fef84b598e
--- /dev/null
+++ b/packages/seed-realm/components/filter/filter-dropdown.gts
@@ -0,0 +1,50 @@
+import GlimmerComponent from '@glimmer/component';
+import { BoxelMultiSelectBasic } from '@cardstack/boxel-ui/components';
+import { FilterTrigger } from './filter-trigger';
+
+interface FilterDropdownSignature {
+  Element: HTMLDivElement;
+  Args: {
+    searchField: string;
+    realmURLs: string[];
+    options: any;
+    selected: any;
+    onChange: (value: any) => void;
+    onClose: () => boolean | undefined;
+    isLoading?: boolean;
+  };
+  Blocks: {
+    default: [any];
+  };
+}
+
+export class FilterDropdown extends GlimmerComponent<FilterDropdownSignature> {
+  <template>
+    <BoxelMultiSelectBasic
+      class='filter-multi-select'
+      @options={{@options}}
+      @selected={{@selected}}
+      @onChange={{@onChange}}
+      @triggerComponent={{(component FilterTrigger isLoading=@isLoading)}}
+      @initiallyOpened={{true}}
+      @searchEnabled={{true}}
+      @searchField={{@searchField}}
+      @closeOnSelect={{false}}
+      @onClose={{@onClose}}
+      @matchTriggerWidth={{false}}
+      ...attributes
+      as |item|
+    >
+      <div class='filter-option'>{{yield item}}</div>
+    </BoxelMultiSelectBasic>
+
+    <style scoped>
+      .filter-multi-select {
+        border: none;
+      }
+      .filter-option {
+        width: 200px;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/seed-realm/components/filter/filter-trigger.gts b/packages/seed-realm/components/filter/filter-trigger.gts
new file mode 100644
index 0000000000..4f921e1602
--- /dev/null
+++ b/packages/seed-realm/components/filter/filter-trigger.gts
@@ -0,0 +1,48 @@
+import GlimmerComponent from '@glimmer/component';
+import { IconButton } from '@cardstack/boxel-ui/components';
+import ListFilter from '@cardstack/boxel-icons/list-filter';
+
+interface TriggerSignature {
+  Args: {
+    isLoading?: boolean;
+  };
+  Element: HTMLDivElement;
+}
+
+export class FilterTrigger extends GlimmerComponent<TriggerSignature> {
+  <template>
+    <div class='filter-trigger'>
+      <IconButton @icon={{ListFilter}} width='13px' height='13px' />
+      <span class='filter-trigger-text'>
+        {{#if @isLoading}}
+          Loading...
+        {{else}}
+          Filter
+        {{/if}}
+      </span>
+    </div>
+
+    <style scoped>
+      .filter-trigger {
+        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 }}
+    <style>
+      .ember-power-select-trigger {
+        padding: 0;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/seed-realm/fields/date-range-field.gts b/packages/seed-realm/fields/date-range-field.gts
new file mode 100644
index 0000000000..f7a6b35f7a
--- /dev/null
+++ b/packages/seed-realm/fields/date-range-field.gts
@@ -0,0 +1,206 @@
+import DateField from 'https://cardstack.com/base/date';
+import {
+  FieldDef,
+  contains,
+  field,
+  Component,
+} from 'https://cardstack.com/base/card-api';
+import {
+  DateRangePicker,
+  BoxelDropdown,
+  Pill,
+  BoxelButton,
+} from '@cardstack/boxel-ui/components';
+import StringField from 'https://cardstack.com/base/string';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import CalendarIcon from '@cardstack/boxel-icons/calendar';
+import { cn } from '@cardstack/boxel-ui/helpers';
+
+const Format = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+});
+
+interface DateRange {
+  start: Date | null | undefined;
+  end: Date | null | undefined;
+}
+
+class Edit extends Component<typeof DateRangeField> {
+  @tracked range: DateRange = {
+    start: this.args.model.start,
+    end: this.args.model.end,
+  };
+
+  get formatted() {
+    return getFormattedDate(this.range);
+  }
+
+  @action onSelect(selected: any) {
+    this.range = selected.date;
+  }
+
+  write() {
+    if (this.range.start) {
+      this.args.model.start = this.range.start;
+    }
+    if (this.range.end) {
+      this.args.model.end = this.range.end;
+    }
+  }
+
+  @action save(close: () => void) {
+    this.write();
+    close();
+  }
+
+  @action onClose() {
+    this.range = {
+      start: this.args.model.start,
+      end: this.args.model.end,
+    };
+  }
+  // reset allows the user to
+  //1. decide if he even wants a field to be present (ie he might want an empty date range)
+  //2. allows the user to also go back to the original state of TODAY while editing
+  @action reset() {
+    this.range = {
+      start: null,
+      end: null,
+    };
+    this.args.model.start = undefined;
+    this.args.model.end = undefined;
+  }
+
+  <template>
+    <BoxelDropdown @onClose={{this.onClose}}>
+      <:trigger as |bindings|>
+        <Pill {{bindings}} @kind='button'>
+          {{this.formatted}}
+        </Pill>
+      </:trigger>
+      <:content as |dd|>
+        <div class='dropdown-content'>
+          <div>
+            <DateRangePicker
+              @start={{this.range.start}}
+              @end={{this.range.end}}
+              @onSelect={{this.onSelect}}
+              @selected={{this.range}}
+            />
+          </div>
+          <div class='dropdown-actions'>
+            <BoxelButton
+              @kind='secondary'
+              {{on 'click' this.reset}}
+            >Reset</BoxelButton>
+            <BoxelButton
+              @kind='primary'
+              {{on 'click' (fn this.save dd.close)}}
+            >Save</BoxelButton>
+          </div>
+        </div>
+      </:content>
+    </BoxelDropdown>
+    <style scoped>
+      .dropdown-content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-sm);
+        padding: var(--boxel-sp-sm);
+      }
+      .dropdown-actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--boxel-sp-sm);
+      }
+    </style>
+  </template>
+}
+
+export default class DateRangeField extends FieldDef {
+  static displayName = 'Date Range';
+  static icon = CalendarIcon;
+  @field start = contains(DateField);
+  @field end = contains(DateField);
+  @field title = contains(StringField, {
+    computeVia: function (this: DateRangeField) {
+      return 'Date Range';
+    },
+  });
+
+  static edit = Edit;
+  static atom = class Atom extends Component<typeof this> {
+    get hasNoDateInfo() {
+      return !this.args.model.start && !this.args.model.end;
+    }
+
+    get formatted() {
+      return getFormattedDate(this.args.model as DateRange);
+    }
+
+    get dateIcon() {
+      return this.args.model.constructor?.icon;
+    }
+
+    <template>
+      <time class='date-info'>
+        {{#if this.dateIcon}}
+          <this.dateIcon class='icon' />
+        {{/if}}
+        <div class={{cn 'text' no-date-info=this.hasNoDateInfo}}>
+          {{this.formatted}}
+        </div>
+      </time>
+      <style scoped>
+        .date-info {
+          --date-icon-size: 14px;
+          display: inline-flex;
+          align-items: center;
+          font-size: calc(var(--date-icon-size) * 0.9);
+          gap: var(--boxel-sp-xxs);
+          white-space: nowrap;
+          -webkit-line-clamp: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-weight: 500;
+        }
+        .icon {
+          width: var(--date-icon-size);
+          height: var(--date-icon-size);
+        }
+        .text {
+          color: var(--boxel-600);
+        }
+        .text.no-date-info {
+          color: var(--boxel-600);
+        }
+      </style>
+    </template>
+  };
+}
+
+interface DateRangeConfig {
+  noDateMsg: string;
+}
+
+function getFormattedDate(
+  range: DateRange,
+  config: Partial<DateRangeConfig> = {},
+): string {
+  const defaults = {
+    noDateMsg: '[Select a date]',
+  };
+  const finalConfig = { ...defaults, ...config };
+
+  if (!range.start && !range.end) {
+    return finalConfig.noDateMsg;
+  }
+  let start = range.start ? Format.format(range.start) : '[Select start date]';
+  let end = range.end ? Format.format(range.end) : '[Select end date]';
+  return `${start} - ${end}`;
+}
diff --git a/packages/seed-realm/kanban-resource.gts b/packages/seed-realm/kanban-resource.gts
new file mode 100644
index 0000000000..b64a58cfd4
--- /dev/null
+++ b/packages/seed-realm/kanban-resource.gts
@@ -0,0 +1,76 @@
+import { tracked } from '@glimmer/tracking';
+import { DndColumn } from '@cardstack/boxel-ui/components';
+import { CardDef } from 'https://cardstack.com/base/card-api';
+
+import { Resource } from 'ember-resources';
+
+interface Args {
+  named: {
+    cards: CardDef[];
+    hasColumnKey: <T extends CardDef>(card: T, key: string) => boolean;
+    columnKeys: string[];
+  };
+}
+
+// This is a resource because we have to
+// 1. to hold state of cards inside of the kanban board without a flickering/ loading
+// 2. to maintain a natural order cards that are newly added to the kanban board
+// Note: this resource assumes that you have already loaded the cards and is unsuitable for pre-rendered cards
+class KanbanResource extends Resource<Args> {
+  @tracked private data: Map<string, DndColumn> = new Map();
+  hasColumnKey?: <T extends CardDef>(card: T, key: string) => boolean =
+    undefined;
+
+  commit(cards: CardDef[], columnKeys: string[]) {
+    columnKeys.forEach((key: string) => {
+      let currentColumn = this.data.get(key);
+      let cardsForStatus = cards.filter((card) => {
+        return this.hasColumnKey ? this.hasColumnKey(card, key) : false;
+      });
+
+      if (currentColumn) {
+        // Maintain order of existing cards and append new ones
+        let existingCardIds = new Set(
+          currentColumn.cards.map((card: CardDef) => card.id),
+        );
+        let existingCards = currentColumn.cards.filter((card: CardDef) =>
+          cardsForStatus.some((c) => c.id === card.id),
+        );
+        let newCards = cardsForStatus.filter(
+          (card: CardDef) => !existingCardIds.has(card.id),
+        );
+        this.data.set(key, new DndColumn(key, [...newCards, ...existingCards]));
+      } else {
+        // First time loading this column
+        this.data.set(key, new DndColumn(key, cardsForStatus));
+      }
+    });
+  }
+
+  get columns() {
+    return Array.from(this.data.values());
+  }
+
+  modify(_positional: never[], named: Args['named']) {
+    this.hasColumnKey = named.hasColumnKey;
+    this.commit(named.cards, named.columnKeys);
+  }
+}
+
+export default function getKanbanResource<T extends CardDef>(
+  parent: object,
+  cards: () => T[],
+  columnKeys: () => string[],
+  hasColumnKey: () => (card: T, key: string) => boolean,
+) {
+  return KanbanResource.from(parent, () => ({
+    named: {
+      cards: cards(),
+      columnKeys: columnKeys(),
+      hasColumnKey: hasColumnKey() as <T extends CardDef>(
+        card: T,
+        key: string,
+      ) => boolean,
+    },
+  }));
+}
diff --git a/packages/seed-realm/sprint-planner.gts b/packages/seed-realm/sprint-planner.gts
new file mode 100644
index 0000000000..ba43847d6e
--- /dev/null
+++ b/packages/seed-realm/sprint-planner.gts
@@ -0,0 +1,645 @@
+import {
+  Component,
+  realmURL,
+  field,
+  BaseDef,
+  CardDef,
+  linksTo,
+} from 'https://cardstack.com/base/card-api';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { TrackedMap } from 'tracked-built-ins';
+import GlimmerComponent from '@glimmer/component';
+import {
+  BoxelButton,
+  DndItem,
+  LoadingIndicator,
+} from '@cardstack/boxel-ui/components';
+import {
+  DndKanbanBoard,
+  DndColumn,
+  BoxelSelect,
+} from '@cardstack/boxel-ui/components';
+import { IconPlus } from '@cardstack/boxel-ui/icons';
+import { action } from '@ember/object';
+import { LooseSingleCardDocument, getCards } from '@cardstack/runtime-common';
+import { restartableTask } from 'ember-concurrency';
+import { SprintTaskStatusField, Project, SprintTask } from './sprint-task';
+import { FilterDropdown } from './components/filter/filter-dropdown';
+import { StatusPill } from './components/filter/filter-dropdown-item';
+import { FilterTrigger } from './components/filter/filter-trigger';
+import getKanbanResource from './kanban-resource';
+import { FilterDisplay } from './components/filter/filter-display';
+import LayoutKanbanIcon from '@cardstack/boxel-icons/layout-kanban';
+import RectangleEllipsis from '@cardstack/boxel-icons/rectangle-ellipsis';
+import User from '@cardstack/boxel-icons/user';
+import { eq, not } from '@cardstack/boxel-ui/helpers';
+import { fn } from '@ember/helper';
+import type Owner from '@ember/owner';
+import {
+  AnyFilter,
+  CardTypeFilter,
+  Query,
+  EqFilter,
+} from '@cardstack/runtime-common/query';
+
+type FilterType = 'status' | 'assignee';
+
+export interface SelectedItem {
+  name?: string;
+  label?: string;
+  index?: number;
+}
+
+class SprintPlannerIsolated extends Component<typeof SprintPlanner> {
+  @tracked loadingColumnKey: string | undefined;
+  @tracked selectedFilter: FilterType | undefined;
+  filters = {
+    status: {
+      searchKey: 'label',
+      label: 'Status',
+      codeRef: {
+        module: new URL('./sprint-task', import.meta.url).href,
+        name: 'Status',
+      },
+      options: () => SprintTaskStatusField.values,
+    },
+    assignee: {
+      searchKey: 'name',
+      label: 'Assignee',
+      codeRef: {
+        module: new URL('./sprint-task', import.meta.url).href,
+        name: 'TeamMember',
+      },
+      options: () => this.assigneeCards,
+    },
+  };
+  selectedItems = new TrackedMap<FilterType, SelectedItem[]>();
+  constructor(owner: Owner, args: any) {
+    super(owner, args);
+  }
+
+  get filterTypes() {
+    return Object.keys(this.filters) as FilterType[];
+  }
+
+  cards = getCards(this.getTaskQuery, this.realmHrefs, { isLive: true });
+
+  assigneeQuery = getCards(
+    {
+      filter: {
+        type: this.filters.assignee.codeRef,
+      },
+    },
+    this.realmHrefs,
+    { isLive: true },
+  );
+
+  get cardInstances() {
+    if (!this.cards || !this.cards.instances) {
+      return [];
+    }
+    return this.cards.instances as SprintTask[];
+  }
+
+  get assigneeCards() {
+    return this.assigneeQuery.instances;
+  }
+
+  @action showTaskCard(card: SprintTask): boolean {
+    return this.filterTypes.every((filterType: FilterType) => {
+      let selectedItems = this.selectedItems.get(filterType) ?? [];
+      if (selectedItems.length === 0) return true;
+      return selectedItems.some((item) => {
+        if (filterType === 'status') {
+          return card.status?.label === item.label;
+        } else if (filterType === 'assignee') {
+          return card.assignee?.name === item.name;
+        } else {
+          return false;
+        }
+      });
+    });
+  }
+
+  hasColumnKey = (card: SprintTask, key: string) => {
+    return card.status?.label === key;
+  };
+
+  taskCollection = getKanbanResource(
+    this,
+    () => this.cardInstances,
+    () => SprintTaskStatusField.values.map((status) => status.label) ?? [],
+    () => this.hasColumnKey,
+  );
+
+  get selectedFilterConfig() {
+    if (this.selectedFilter === undefined) {
+      return undefined;
+    }
+    return this.filters[this.selectedFilter];
+  }
+
+  get selectedItemsForFilter() {
+    if (this.selectedFilter === undefined) {
+      return [];
+    }
+    return this.selectedItems.get(this.selectedFilter) ?? [];
+  }
+
+  get realmURL(): URL {
+    return this.args.model[realmURL]!;
+  }
+
+  get realmHref() {
+    return this.realmURL.href;
+  }
+
+  get realmHrefs() {
+    return [this.realmURL?.href];
+  }
+
+  get assignedTaskCodeRef() {
+    return {
+      module: new URL('./sprint-task', import.meta.url).href,
+      name: 'SprintTask',
+    };
+  }
+
+  get currentProject() {
+    return this.args.model.project;
+  }
+
+  get getTaskQuery(): Query {
+    let everyArr: (AnyFilter | CardTypeFilter | EqFilter)[] = [];
+    if (!this.realmURL) {
+      throw new Error('No realm url');
+    }
+    if (!this.currentProject || !this.currentProject.id) {
+      console.log('No project');
+      everyArr.push({ eq: { 'project.id': null } });
+    } else {
+      everyArr.push({ eq: { 'project.id': this.currentProject.id } });
+    }
+    return (
+      everyArr.length > 0
+        ? {
+            filter: {
+              on: this.assignedTaskCodeRef,
+              every: everyArr,
+            },
+          }
+        : {
+            filter: {
+              type: this.assignedTaskCodeRef,
+            },
+          }
+    ) as Query;
+  }
+
+  @action isSelectedItem(item: SelectedItem) {
+    let selectedItems = this.selectedItemsForFilter;
+    return selectedItems.includes(item);
+  }
+
+  @action createNewTask(statusLabel: string) {
+    this.loadingColumnKey = statusLabel;
+    this._createNewTask.perform(statusLabel);
+  }
+
+  @action isCreateNewTaskLoading(statusLabel: string) {
+    return this.loadingColumnKey === statusLabel;
+  }
+  private _createNewTask = restartableTask(async (statusLabel: string) => {
+    if (this.realmURL === undefined) {
+      return;
+    }
+
+    try {
+      let cardRef = this.assignedTaskCodeRef;
+
+      if (!cardRef) {
+        return;
+      }
+
+      let index = SprintTaskStatusField.values.find((value) => {
+        return value.label === statusLabel;
+      })?.index;
+
+      let doc: LooseSingleCardDocument = {
+        data: {
+          type: 'card',
+          attributes: {
+            name: null,
+            details: null,
+            status: {
+              index,
+              label: statusLabel,
+            },
+            priority: {
+              index: null,
+              label: null,
+            },
+            description: null,
+            thumbnailURL: null,
+          },
+          relationships: {
+            assignee: {
+              links: {
+                self: null,
+              },
+            },
+            project: {
+              links: {
+                self: this.currentProject?.id ?? null,
+              },
+            },
+          },
+          meta: {
+            adoptsFrom: cardRef,
+          },
+        },
+      };
+
+      await this.args.context?.actions?.createCard?.(
+        cardRef,
+        new URL(cardRef.module),
+        {
+          realmURL: this.realmURL,
+          doc,
+        },
+      );
+    } catch (error) {
+      console.error('Error creating card:', error);
+    } finally {
+      this.loadingColumnKey = undefined;
+    }
+  });
+
+  @action async onMoveCardMutation(
+    draggedCard: DndItem,
+    _targetCard: DndItem | undefined,
+    _sourceColumnAfterDrag: DndColumn,
+    targetColumnAfterDrag: DndColumn,
+  ) {
+    let cardInNewCol = targetColumnAfterDrag.cards.find(
+      (c: CardDef) => c.id === draggedCard.id,
+    );
+    if (
+      cardInNewCol &&
+      cardInNewCol.status.label !== targetColumnAfterDrag.title //not dragging to the same column
+    ) {
+      let statusValue = SprintTaskStatusField.values.find(
+        (value) => value.label === targetColumnAfterDrag.title,
+      );
+      cardInNewCol.status = new SprintTaskStatusField(statusValue);
+      await this.args.context?.actions?.saveCard?.(cardInNewCol);
+    }
+  }
+
+  @action onSelectFilter(item: FilterType) {
+    this.selectedFilter = item;
+  }
+
+  @action onChange(selected: SelectedItem[]) {
+    if (this.selectedFilter) {
+      this.selectedItems.set(this.selectedFilter, selected);
+    }
+  }
+
+  @action onClose() {
+    this.selectedFilter = undefined;
+    return true;
+  }
+
+  get options() {
+    return this.selectedFilterConfig?.options();
+  }
+
+  @action removeFilter(key: FilterType, item: SelectedItem) {
+    let items = this.selectedItems.get(key);
+    if (!items) {
+      return;
+    }
+    let itemIndex: number;
+    if (key === 'status') {
+      itemIndex = items.findIndex((o) => item?.index === o?.index);
+    } else {
+      itemIndex = items.findIndex((o) => item === o);
+    }
+
+    if (itemIndex > -1) {
+      items.splice(itemIndex, 1);
+      this.selectedItems.set(key, items);
+    }
+  }
+
+  @action selectedFilterItems(filterType: FilterType) {
+    return this.selectedItems.get(filterType) ?? [];
+  }
+
+  @action getFilterIcon(filterType: FilterType) {
+    switch (filterType) {
+      case 'status':
+        return RectangleEllipsis;
+      case 'assignee':
+        return User;
+      default:
+        return undefined;
+    }
+  }
+
+  get assigneeIsLoading() {
+    return (
+      this.selectedFilter === 'assignee' &&
+      this.assigneeQuery &&
+      this.assigneeQuery.isLoading
+    );
+  }
+
+  @action viewCard() {
+    if (!this.args.model.id) {
+      throw new Error('No card id');
+    }
+    this.args.context?.actions?.viewCard?.(new URL(this.args.model.id), 'edit');
+  }
+
+  <template>
+    <div class='task-app'>
+      {{#if (not this.currentProject.id)}}
+        <div class='disabled'>
+          {{#if @context.actions.viewCard}}
+            <BoxelButton @kind='primary' {{on 'click' this.viewCard}}>
+              Link a project to continue
+            </BoxelButton>
+          {{/if}}
+        </div>
+      {{/if}}
+      <div class='filter-section'>
+        <div class='filter-dropdown-container'>
+          {{#if this.selectedFilterConfig}}
+            {{#let (this.selectedFilterConfig.options) as |options|}}
+              <FilterDropdown
+                @isLoading={{this.assigneeIsLoading}}
+                @searchField={{this.selectedFilterConfig.searchKey}}
+                @options={{options}}
+                @realmURLs={{this.realmHrefs}}
+                @selected={{this.selectedItemsForFilter}}
+                @onChange={{this.onChange}}
+                @onClose={{this.onClose}}
+                as |item|
+              >
+                {{#let (this.isSelectedItem item) as |isSelected|}}
+                  <StatusPill
+                    @isSelected={{isSelected}}
+                    @label={{if
+                      (eq this.selectedFilter 'status')
+                      item.label
+                      item.name
+                    }}
+                  />
+                {{/let}}
+              </FilterDropdown>
+            {{/let}}
+          {{else}}
+            <BoxelSelect
+              class='status-select'
+              @selected={{this.selectedFilter}}
+              @options={{this.filterTypes}}
+              @onChange={{this.onSelectFilter}}
+              @placeholder={{'Choose a Filter'}}
+              @matchTriggerWidth={{false}}
+              @triggerComponent={{FilterTrigger}}
+              as |item|
+            >
+              {{#let (this.getFilterIcon item) as |Icon|}}
+                <div class='filter-option'>
+                  {{#if Icon}}
+                    <Icon class='filter-display-icon' />
+                  {{/if}}
+                  <span class='filter-display-text'>{{item}}</span>
+                </div>
+              {{/let}}
+            </BoxelSelect>
+          {{/if}}
+        </div>
+        <div class='filter-display-sec'>
+          {{#each this.filterTypes as |filterType|}}
+            {{#let (this.selectedFilterItems filterType) as |items|}}
+              <FilterDisplay
+                @key={{filterType}}
+                @items={{items}}
+                @removeItem={{(fn this.removeFilter filterType)}}
+                @icon={{this.getFilterIcon filterType}}
+                as |item|
+              >
+                {{#if (eq filterType 'status')}}
+                  {{item.label}}
+                {{else}}
+                  {{item.name}}
+                {{/if}}
+              </FilterDisplay>
+            {{/let}}
+          {{/each}}
+        </div>
+      </div>
+      <div class='columns-container'>
+        <DndKanbanBoard
+          @columns={{this.taskCollection.columns}}
+          @onMove={{this.onMoveCardMutation}}
+          @displayCard={{this.showTaskCard}}
+        >
+          <:header as |column|>
+            <ColumnHeader
+              @statusLabel={{column.title}}
+              @createNewTask={{this.createNewTask}}
+              @isCreateNewTaskLoading={{this.isCreateNewTaskLoading}}
+            />
+          </:header>
+          <:card as |card|>
+            {{#let (getComponent card) as |CardComponent|}}
+              <div
+                {{@context.cardComponentModifier
+                  cardId=card.id
+                  format='data'
+                  fieldType=undefined
+                  fieldName=undefined
+                }}
+                data-test-cards-grid-item={{removeFileExtension card.id}}
+                data-cards-grid-item={{removeFileExtension card.id}}
+              >
+                <CardComponent class='card' />
+              </div>
+            {{/let}}
+          </:card>
+        </DndKanbanBoard>
+      </div>
+    </div>
+    {{!TODO: Get rid of global styles}}
+    {{! template-lint-disable require-scoped-style }}
+    <style>
+      .ember-power-select-dropdown.ember-basic-dropdown-content--below,
+      .ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
+        border-top: 1px solid #aaaaaa;
+        border-top-left-radius: var(--boxel-border-radius-sm);
+        border-top-right-radius: var(--boxel-border-radius-sm);
+      }
+    </style>
+    <style scoped>
+      .task-app {
+        display: flex;
+        position: relative;
+        flex-direction: column;
+        font: var(--boxel-font);
+        padding-left: var(--boxel-sp);
+        height: 100%;
+      }
+      .disabled {
+        position: absolute;
+        top: 0%;
+        left: 0%;
+        width: 100%;
+        height: 100%;
+        background-color: rgb(38 38 38 / 50%);
+        z-index: 10; /*TODO: Resolve z-index with drag and drop. This has to be greater than --draggable-overlay-z-index + 1*/
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-size: var(--boxel-font-size-lg);
+        font-weight: 500;
+      }
+      .filter-section {
+        display: flex;
+        justify-content: space-between;
+        gap: var(--boxel-sp);
+        align-items: center;
+        padding: var(--boxel-sp-xxxs) var(--boxel-sp-xxxs);
+        width: 100%;
+      }
+      .filter-dropdown-container {
+        width: auto;
+      }
+      .filter-display-sec {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: end;
+        gap: var(--boxel-sp-xxs);
+        flex: 1;
+        min-width: 0;
+      }
+      .columns-container {
+        display: block;
+        height: calc(100vh - 58px);
+        overflow: hidden;
+      }
+      .dropdown-filter-button {
+        display: flex;
+        align-items: center;
+      }
+      .dropdown-filter-text {
+        margin-right: var(--boxel-sp-xxs);
+      }
+      .dropdown-arrow {
+        display: inline-block;
+      }
+      /** Need to specify height because fitted field component has a default height**/
+      .card {
+        height: 170px !important;
+      }
+      .status-select {
+        border: none;
+      }
+      .filter-option {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xs);
+        width: 200px;
+      }
+      .filter-display-icon {
+        width: 14px;
+        height: 14px;
+        flex-shrink: 0;
+        margin-right: var(--boxel-sp-xxxs);
+      }
+      .filter-display-text {
+        word-break: break-word;
+      }
+      .filter-option {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xs);
+        width: 200px;
+      }
+      .filter-display-icon {
+        width: 14px;
+        height: 14px;
+        flex-shrink: 0;
+        margin-right: var(--boxel-sp-xxxs);
+      }
+      .filter-display-text {
+        word-break: break-word;
+      }
+    </style>
+  </template>
+}
+
+interface ColumnHeaderSignature {
+  statusLabel: string;
+  createNewTask: (statusLabel: string) => void;
+  isCreateNewTaskLoading: (statusLabel: string) => boolean;
+}
+
+class ColumnHeader extends GlimmerComponent<ColumnHeaderSignature> {
+  <template>
+    <div class='column-header-content'>
+      {{@statusLabel}}
+      <button class='create-new-task-button' {{on 'click' this.createNewTask}}>
+        {{#let (@isCreateNewTaskLoading @statusLabel) as |isLoading|}}
+          {{#if isLoading}}
+            <LoadingIndicator class='loading' />
+          {{else}}
+            <IconPlus width='12px' height='12px' />
+          {{/if}}
+        {{/let}}
+      </button>
+    </div>
+    <style scoped>
+      .loading {
+        --boxel-loading-indicator-size: 14px;
+      }
+      .column-header-content {
+        display: flex;
+        justify-content: space-between;
+        gap: var(--boxel-sp-xxs);
+        font-size: 0.9rem;
+      }
+      .create-new-task-button {
+        all: unset;
+        cursor: pointer;
+      }
+    </style>
+  </template>
+
+  @action createNewTask() {
+    this.args.createNewTask(this.args.statusLabel);
+  }
+}
+
+export class SprintPlanner extends CardDef {
+  static displayName = 'Sprint Planner';
+  static icon = LayoutKanbanIcon;
+  static headerColor = '#ff7f7b';
+  static prefersWideFormat = true;
+  static isolated = SprintPlannerIsolated;
+  @field project = linksTo(() => Project);
+}
+
+function removeFileExtension(cardUrl: string) {
+  return cardUrl.replace(/\.[^/.]+$/, '');
+}
+
+function getComponent(cardOrField: BaseDef) {
+  return cardOrField.constructor.getComponent(cardOrField);
+}
diff --git a/packages/seed-realm/sprint-task.gts b/packages/seed-realm/sprint-task.gts
new file mode 100644
index 0000000000..39e8d48585
--- /dev/null
+++ b/packages/seed-realm/sprint-task.gts
@@ -0,0 +1,537 @@
+import {
+  CardDef,
+  Component,
+  StringField,
+  contains,
+  field,
+  linksTo,
+  linksToMany,
+} from 'https://cardstack.com/base/card-api';
+import {
+  Avatar,
+  Pill,
+  ProgressBar,
+  ProgressRadial,
+} from '@cardstack/boxel-ui/components';
+import FolderGitIcon from '@cardstack/boxel-icons/folder-git';
+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 { User } from './user';
+import { Task, TaskStatusField, getDueDateStatus } from './task';
+
+export class Team extends CardDef {
+  static displayName = 'Team';
+  static icon = UsersIcon;
+  @field name = contains(StringField);
+  @field title = contains(StringField, {
+    computeVia: function (this: Team) {
+      return this.name;
+    },
+  });
+
+  @field shortName = contains(StringField, {
+    computeVia: function (this: Team) {
+      return this.name ? this.name.slice(0, 2).toUpperCase() : undefined;
+    },
+  });
+
+  static atom = class Atom extends Component<typeof this> {
+    <template>
+      <Pill>
+        <:default>
+          {{@model.name}}
+        </:default>
+      </Pill>
+    </template>
+  };
+}
+
+export class TeamMember extends User {
+  static displayName = 'Team Member';
+  static icon = UserIcon;
+  @field team = linksTo(Team);
+
+  static atom = class Atom extends Component<typeof this> {
+    <template>
+      {{#if @model}}
+        <div class='assignee-display'>
+          <Avatar
+            class='avatar'
+            @userId={{@model.id}}
+            @displayName={{@model.name}}
+            @isReady={{true}}
+          />
+          <span class='assignee-name'>
+            {{@model.name}}
+          </span>
+        </div>
+      {{/if}}
+      <style scoped>
+        .assignee-display {
+          display: inline-flex;
+          align-items: center;
+          background-color: var(--boxel-200);
+          border-radius: 100px;
+          overflow: hidden;
+          max-width: 100px;
+          width: fit-content;
+        }
+        .avatar {
+          --profile-avatar-icon-size: 20px;
+          --profile-avatar-icon-border: 0px;
+          flex-shrink: 0;
+        }
+        .assignee-name {
+          padding: 0 var(--boxel-sp-xs) 0 var(--boxel-sp-xxxs);
+          font: 500 var(--boxel-font-xs);
+          letter-spacing: var(--boxel-lsp-sm);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      </style>
+    </template>
+  };
+}
+
+export class Project extends CardDef {
+  static displayName = 'Project';
+  static icon = FolderGitIcon;
+  @field name = contains(StringField);
+  @field title = contains(StringField, {
+    computeVia: function (this: Project) {
+      return this.name;
+    },
+  });
+  static atom = class Atom extends Component<typeof this> {
+    <template>
+      <Pill class='project-pill'>
+        <:default>
+          {{@model.name}}
+        </:default>
+      </Pill>
+      <style scoped>
+        .project-pill {
+          --boxel-pill-background-color: var(--boxel-purple);
+          background: var(--profile-avatar-icon-background);
+        }
+      </style>
+    </template>
+  };
+}
+
+export class Issues extends CardDef {
+  static displayName = 'Issues';
+}
+
+function extractId(href: string): string {
+  const urlObj = new URL(href);
+  const pathname = urlObj.pathname;
+  const parts = pathname.split('/');
+  const lastPart = parts[parts.length - 1];
+  return lastPart.replace('.json', '');
+}
+
+function shortenId(id: string): string {
+  const shortUuid = id.slice(0, 8);
+  const decimal = parseInt(shortUuid, 16);
+  return decimal.toString(36).padStart(6, '0');
+}
+
+class TaskIsolated extends Component<typeof SprintTask> {
+  get dueDate() {
+    return this.args.model.dateRange?.end;
+  }
+
+  get dueDateStatus() {
+    return this.dueDate ? getDueDateStatus(this.dueDate.toString()) : undefined;
+  }
+
+  get hasDueDate() {
+    return Boolean(this.dueDate);
+  }
+
+  get hasDueDateStatus() {
+    return Boolean(this.dueDateStatus);
+  }
+
+  <template>
+    <div class='task-container'>
+      <header>
+        <div class='left-column'>
+          <h2 class='task-title'>{{@model.name}}</h2>
+          <div class='status-label'>
+            <span class='text-gray'>in</span>
+            {{@model.status.label}}
+          </div>
+        </div>
+
+        <div class='right-column'>
+          <ProgressRadial
+            @value={{this.progress}}
+            @max={{100}}
+            @variant='circular'
+            class='task-progress-radial'
+          />
+          {{#if this.hasProgress}}
+            <ProgressBar
+              @value={{this.progress}}
+              @max={{100}}
+              @label={{this.progressLabel}}
+              @variant='horizontal'
+              class='task-progress-bar'
+            />
+          {{/if}}
+        </div>
+      </header>
+
+      <hr class='task-divider border-gray' />
+
+      <div class='task-info'>
+        <div class='left-column'>
+          <h4>Description</h4>
+          {{#if @model.details}}
+            <@fields.details />
+          {{else}}
+            <span class='no-data-found-txt'>No Task Description Provided</span>
+          {{/if}}
+        </div>
+
+        <div class='right-column'>
+          <div class='assignee'>
+            <h4>Assignee</h4>
+
+            {{#if @model.assignee}}
+              <@fields.assignee
+                @format='atom'
+                @displayContainer={{false}}
+                class='task-assignee'
+              />
+            {{else}}
+              <span class='no-data-found-txt'>No Assignees Found</span>
+            {{/if}}
+          </div>
+
+          <div class='due-date'>
+            <h4>Due Date</h4>
+            <div class='date-info-container'>
+              {{#if this.hasDueDate}}
+                <div class='date-status-pill-container'>
+                  {{#if this.dueDateStatus}}
+                    <Pill
+                      class='date-status-pill'
+                      @pillBackgroundColor={{this.dueDateStatus.color}}
+                    >
+                      <:default>{{this.dueDateStatus.label}}</:default>
+                    </Pill>
+                  {{/if}}
+
+                  <div class='calendar-icon-container'>
+                    <Calendar
+                      width='14px'
+                      height='14px'
+                      class='calendar-icon'
+                    />
+                    <@fields.dateRange.end @format='atom' />
+                  </div>
+                </div>
+              {{else}}
+                <span class='no-data-found-txt'>No Due Date Assigned</span>
+              {{/if}}
+            </div>
+          </div>
+
+          <div class='tags'>
+            <h4>Tags</h4>
+            {{#if @model.tags}}
+              <div class='task-tags'>
+                {{#each @fields.tags as |Tag|}}
+                  <Tag
+                    @format='atom'
+                    class='task-tag'
+                    @displayContainer={{false}}
+                  />
+                {{/each}}
+              </div>
+            {{else}}
+              <span class='no-data-found-txt'>No Tags Found</span>
+            {{/if}}
+          </div>
+        </div>
+      </div>
+
+      <hr class='task-divider border-white' />
+
+      <div class='task-subtasks'>
+        <h4>Subtasks ({{@model.subtasks.length}})</h4>
+
+        {{#if @model.subtasks}}
+          <@fields.subtasks @format='fitted' />
+        {{else}}
+          <span class='no-data-found-txt'>No Subtasks Found</span>
+        {{/if}}
+      </div>
+    </div>
+
+    <style scoped>
+      h2,
+      h4,
+      p {
+        margin-block-start: 0;
+        margin-block-end: 1em;
+        word-break: break-word;
+      }
+      p {
+        font-size: var(--boxel-font-size-sm);
+      }
+      .task-container {
+        --task-font-weight-500: 500;
+        --task-font-weight-600: 600;
+        --tasl-font-size-extra-small: calc(var(--boxel-font-size-xs) * 0.95);
+        padding: var(--boxel-sp-lg);
+        container-type: inline-size;
+      }
+      .task-container > * {
+        margin-top: var(--boxel-sp-lg);
+      }
+      header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .task-title {
+        font-size: var(--boxel-font-size-med);
+        font-weight: var(--task-font-weight-600);
+      }
+      .status-label {
+        font-size: var(--boxel-font-size-sm);
+        font-weight: var(--task-font-weight-600);
+        margin-top: var(--boxel-sp-xs);
+      }
+      .text-gray {
+        color: var(--boxel-400);
+      }
+      .task-progress-bar {
+        display: none;
+        --progress-bar-font-color: var(--boxel-dark);
+        border: 0px;
+        margin-top: var(--boxel-sp);
+      }
+      .task-divider.border-gray {
+        border: 1px solid var(--boxel-100);
+      }
+      .task-divider.border-white {
+        border: 1px solid var(--boxel-light);
+      }
+      .task-info {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--boxel-sp-xl);
+      }
+      .task-info .right-column {
+        display: grid;
+        gap: var(--boxel-sp-xl);
+      }
+      .task-assignee {
+        width: auto;
+        height: auto;
+        overflow: unset;
+      }
+      .task-tags {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--boxel-sp-xxs);
+        overflow: hidden;
+      }
+      .task-tag {
+        width: auto;
+        height: auto;
+        overflow: unset;
+      }
+      .no-data-found-txt {
+        font-size: calc(var(--boxel-font-size-xs) * 0.95);
+        font-weight: var(--task-font-weight-500);
+        color: var(--boxel-400);
+        white-space: nowrap;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-top: 1px;
+      }
+      .date-status-pill-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--boxel-sp-xxs);
+      }
+      .date-status-pill {
+        height: 24px;
+        border: none;
+        border-radius: 5px 0 0 5px;
+        font-size: var(--tasl-font-size-extra-small);
+        font-weight: var(--task-font-weight-500);
+        position: relative;
+        padding: var(--boxel-sp-5xs) var(--boxel-sp-sm) var(--boxel-sp-5xs)
+          var(--boxel-sp-xxs);
+        clip-path: polygon(
+          0 0,
+          calc(100% - 8px) 0,
+          100% 50%,
+          calc(100% - 8px) 100%,
+          0 100%
+        );
+      }
+      .calendar-icon-container {
+        font-size: var(--tasl-font-size-extra-small);
+        display: inline-flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+        overflow: hidden;
+      }
+      .calendar-icon {
+        flex-shrink: 0;
+      }
+
+      @container (max-width: 600px) {
+        header {
+          display: block;
+        }
+        .task-progress-radial {
+          display: none;
+        }
+        .task-progress-bar {
+          display: block;
+        }
+        .task-info {
+          grid-template-columns: 1fr;
+          gap: var(--boxel-sp-lg);
+        }
+        .task-info .right-column {
+          gap: var(--boxel-sp-lg);
+        }
+      }
+    </style>
+  </template>
+
+  get tagNames() {
+    return this.args.model.tags?.map((tag) => tag.name) ?? [];
+  }
+  get hasDateRange() {
+    return this.args.model.dateRange;
+  }
+
+  get progress() {
+    if (!this.hasChildren) return 0;
+    const shippedCount = this.args.model.subtasks!.filter(
+      (child) => child.status.label === 'Shipped',
+    ).length;
+
+    return Math.round((shippedCount / this.childrenCount) * 100);
+  }
+
+  get hasProgress() {
+    return this.progress > 0;
+  }
+
+  get progressLabel() {
+    return `${this.progress}%`;
+  }
+
+  get hasChildren() {
+    return this.args.model.subtasks && this.args.model.subtasks.length > 0;
+  }
+
+  get childrenCount() {
+    return this.args.model.subtasks ? this.args.model.subtasks.length : 0;
+  }
+
+  get shippedCount() {
+    return this.args.model.subtasks
+      ? this.args.model.subtasks.filter(
+          (child) => child.status.label === 'Shipped',
+        ).length
+      : 0;
+  }
+}
+
+export class SprintTaskStatusField extends TaskStatusField {
+  static values = [
+    { index: 0, label: 'Not Started', color: '#B0BEC5', completed: false },
+    {
+      index: 1,
+      label: 'Next Sprint',
+      color: '#64B5F6',
+      completed: false,
+    },
+    {
+      index: 2,
+      label: 'Current Sprint',
+      color: '#00BCD4',
+      completed: false,
+    },
+    {
+      index: 3,
+      label: 'In Progress',
+      color: '#FFB74D',
+      completed: false,
+    },
+    {
+      index: 4,
+      label: 'In Review',
+      color: '#9575CD',
+      completed: false,
+    },
+    {
+      index: 5,
+      label: 'Staged',
+      color: '#26A69A',
+      completed: false,
+    },
+    {
+      index: 6,
+      label: 'Shipped',
+      color: '#66BB6A',
+      completed: true,
+    },
+  ];
+}
+
+export class SprintTask extends Task {
+  static displayName = 'Sprint Task';
+  static icon = CheckboxIcon;
+  @field project = linksTo(() => Project);
+  @field team = linksTo(() => Team);
+  @field subtasks = linksToMany(() => SprintTask);
+  @field status = contains(SprintTaskStatusField);
+
+  @field title = contains(StringField, {
+    computeVia: function (this: SprintTask) {
+      return this.name;
+    },
+  });
+
+  //Removing this causes a missing .title error
+  @field assignee = linksTo(() => TeamMember);
+
+  @field shortId = contains(StringField, {
+    computeVia: function (this: SprintTask) {
+      if (this.id) {
+        let id = shortenId(extractId(this.id));
+        let _shortId: string;
+        if (this.team && this.team.shortName) {
+          // computeds are hard to debug -- the logs only appear on the server. We need to always include a check for links
+          _shortId = this.team.shortName + '-' + id;
+        } else {
+          _shortId = id;
+        }
+        return _shortId.toUpperCase();
+      }
+      return;
+    },
+  });
+
+  static isolated = TaskIsolated;
+}
diff --git a/packages/seed-realm/tag.gts b/packages/seed-realm/tag.gts
new file mode 100644
index 0000000000..221412c25a
--- /dev/null
+++ b/packages/seed-realm/tag.gts
@@ -0,0 +1,43 @@
+import {
+  CardDef,
+  StringField,
+  contains,
+  field,
+  Component,
+} from 'https://cardstack.com/base/card-api';
+import TagIcon from '@cardstack/boxel-icons/tag';
+import { Pill } from '@cardstack/boxel-ui/components';
+
+export class Tag extends CardDef {
+  static displayName = 'Tag';
+  static icon = TagIcon;
+  @field name = contains(StringField);
+  @field title = contains(StringField, {
+    computeVia: function (this: Tag) {
+      return this.name;
+    },
+  });
+  @field color = contains(StringField);
+
+  static atom = class Atom extends Component<typeof this> {
+    <template>
+      {{#if @model.name}}
+        <Pill class='tag-pill' @pillBackgroundColor={{@model.color}}>
+          <:default>
+            <span># {{@model.name}}</span>
+          </:default>
+        </Pill>
+      {{/if}}
+
+      <style scoped>
+        .tag-pill {
+          font-size: calc(var(--boxel-font-size-xs) * 0.95);
+          font-weight: 500;
+          padding: 0;
+          --pill-font-color: var(--boxel-400);
+          border: none;
+        }
+      </style>
+    </template>
+  };
+}
diff --git a/packages/seed-realm/task-priority.gts b/packages/seed-realm/task-priority.gts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/seed-realm/task.gts b/packages/seed-realm/task.gts
new file mode 100644
index 0000000000..cd3361e31c
--- /dev/null
+++ b/packages/seed-realm/task.gts
@@ -0,0 +1,648 @@
+import {
+  StringField,
+  contains,
+  field,
+  linksTo,
+  linksToMany,
+  Component,
+  FieldDef,
+} from 'https://cardstack.com/base/card-api';
+import NumberField from 'https://cardstack.com/base/number';
+
+import BooleanField from 'https://cardstack.com/base/boolean';
+
+import DateRangeField from './fields/date-range-field';
+import { Tag } from './tag';
+import { User } from './user';
+import { BoxelSelect } from '@cardstack/boxel-ui/components';
+import { RadioInput } from '@cardstack/boxel-ui/components';
+
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { fn } from '@ember/helper';
+import ChevronsUp from '@cardstack/boxel-icons/chevrons-up';
+import ChevronUp from '@cardstack/boxel-icons/chevron-up';
+import ChevronsDown from '@cardstack/boxel-icons/chevrons-down';
+import ChevronDown from '@cardstack/boxel-icons/chevrons-down';
+import CircleEqual from '@cardstack/boxel-icons/circle-equal';
+import { isToday, isThisWeek, addWeeks } from 'date-fns';
+import GlimmerComponent from '@glimmer/component';
+import Calendar from '@cardstack/boxel-icons/calendar';
+import { Pill } from '@cardstack/boxel-ui/components';
+import { CheckMark } from '@cardstack/boxel-ui/icons';
+import { Todo } from './todo';
+
+export class TaskStatusEdit extends Component<typeof TaskStatusField> {
+  @tracked label: string | undefined = this.args.model.label;
+  <template>
+    <BoxelSelect
+      @placeholder={{this.placeholder}}
+      @options={{this.statuses}}
+      @selected={{this.selectedStatus}}
+      @onChange={{this.onSelectStatus}}
+      as |item|
+    >
+      <div> {{item.label}}</div>
+    </BoxelSelect>
+  </template>
+
+  get selectedStatus() {
+    return this.statuses.find((status) => {
+      return status.label === this.label;
+    });
+  }
+
+  // This ensures you get values from the class the instance is created
+  get statuses() {
+    return (this.args.model.constructor as any).values as TaskStatusField[];
+  }
+
+  @action onSelectStatus(status: TaskStatusField): void {
+    this.label = status.label;
+    this.args.model.label = this.selectedStatus?.label;
+    this.args.model.index = this.selectedStatus?.index;
+    this.args.model.color = this.selectedStatus?.color;
+    this.args.model.completed = this.selectedStatus?.completed;
+  }
+
+  get placeholder() {
+    return 'Fill in';
+  }
+}
+
+export class TaskStatusField extends FieldDef {
+  @field index = contains(NumberField); //sorting order
+  @field label = contains(StringField);
+  @field color = contains(StringField);
+  @field completed = contains(BooleanField);
+  static values = [
+    { index: 0, label: 'Not Started', color: '#B0BEC5', completed: false },
+    {
+      index: 1,
+      label: 'In Progress',
+      color: '#64B5F6',
+      completed: false,
+    },
+    {
+      index: 2,
+      label: 'Done',
+      color: '#00BCD4',
+      completed: true,
+    },
+  ];
+
+  static embedded = class Embedded extends Component<typeof TaskStatusField> {
+    <template>
+      {{@model.label}}
+    </template>
+  };
+
+  //TODO: Not static. Need to improve ability to extend field templates
+  static edit = TaskStatusEdit;
+}
+
+export class FittedTask extends Component<typeof Task> {
+  get visibleTags() {
+    return [this.args.fields.tags[0], this.args.fields.tags[1]].filter(Boolean);
+  }
+
+  get dueDate() {
+    return this.args.model.dateRange?.end;
+  }
+
+  get dueDateStatus() {
+    return this.dueDate ? getDueDateStatus(this.dueDate.toString()) : undefined;
+  }
+
+  get hasDueDate() {
+    return Boolean(this.dueDate);
+  }
+
+  get hasDueDateStatus() {
+    return Boolean(this.dueDateStatus);
+  }
+
+  get isCompleted() {
+    return this.args.model.status?.completed ?? false;
+  }
+
+  <template>
+    <div class='task-card'>
+      <header>
+        <div class='task-status-and-tags-container'>
+          <TaskCompletionStatus
+            class='task-completion-status'
+            @completed={{this.isCompleted}}
+          />
+          {{#if this.visibleTags.length}}
+            <div class='card-tags'>
+              {{#each this.visibleTags as |Tag|}}
+                <Tag
+                  @format='atom'
+                  class='card-tag'
+                  @displayContainer={{false}}
+                />
+              {{/each}}
+            </div>
+          {{/if}}
+        </div>
+        <div class='priority-and-id-container'>
+          <@fields.priority class='priority' @format='atom' />
+          <span class='short-id'>{{@model.shortId}}</span>
+        </div>
+      </header>
+
+      <div class='card-info'>
+        {{#if @model.name}}
+          <h3 class='task-title'>{{@model.name}}</h3>
+        {{/if}}
+
+        <div class='date-info-container'>
+          {{#if this.hasDueDate}}
+            <div class='date-status-pill-container'>
+              {{#if this.dueDateStatus}}
+                <Pill
+                  class='date-status-pill'
+                  @pillBackgroundColor={{this.dueDateStatus.color}}
+                >
+                  <:default>{{this.dueDateStatus.label}}</:default>
+                </Pill>
+              {{/if}}
+
+              <div class='calendar-icon-container'>
+                <Calendar width='14px' height='14px' class='calendar-icon' />
+                <@fields.dateRange.end @format='atom' />
+              </div>
+            </div>
+          {{else}}
+            <span class='no-data-found-txt'>No Due Date Assigned</span>
+          {{/if}}
+        </div>
+      </div>
+
+      <footer>
+        {{!TODO: Actually, this shudn't be needed. atom default templates can't handle null values }}
+        {{#if @model.assignee}}
+          <@fields.assignee
+            class='card-assignee'
+            @format='atom'
+            @displayContainer={{false}}
+          />
+        {{/if}}
+      </footer>
+    </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-xxs);
+      }
+
+      .task-card {
+        --task-font-weight-500: 500;
+        --task-font-weight-600: 600;
+        --tasl-font-size-extra-small: calc(var(--boxel-font-size-xs) * 0.95);
+        width: 100%;
+        height: 100%;
+        padding: var(--boxel-sp-sm);
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-sm);
+        overflow: hidden;
+      }
+      header {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--boxel-sp-xxs);
+        justify-content: space-between;
+      }
+      .card-tags {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+        overflow: hidden;
+        line-height: 1;
+      }
+      .card-tag {
+        width: auto;
+        height: auto;
+        overflow: unset;
+      }
+      .card-tags > :last-child {
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .priority-and-id-container {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+        margin-left: auto;
+      }
+      .short-id {
+        font-size: var(--tasl-font-size-extra-small);
+        font-weight: var(--task-font-weight-600);
+        color: var(--boxel-600);
+        line-height: normal;
+        background-color: var(--boxel-200);
+        padding: var(--boxel-sp-6xs) var(--boxel-sp-xxs);
+        border-radius: 5px;
+        white-space: nowrap;
+      }
+      .task-title {
+        margin: var(--boxel-sp-xxxs) 0;
+        padding: 0;
+        font-size: var(--boxel-font-size);
+        font-weight: var(--task-font-weight-600);
+        line-height: 1.2;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .date-info-container {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+        margin-top: var(--boxel-sp-xxxs);
+      }
+      .no-data-found-txt {
+        font-size: var(--tasl-font-size-extra-small);
+        font-weight: var(--task-font-weight-500);
+        color: var(--boxel-400);
+        white-space: nowrap;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-top: 1px;
+      }
+      .date-status-pill-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+      }
+      .date-status-pill {
+        height: 24px;
+        border: none;
+        border-radius: 5px 0 0 5px;
+        font-size: var(--tasl-font-size-extra-small);
+        font-weight: var(--task-font-weight-500);
+        position: relative;
+        padding: var(--boxel-sp-5xs) var(--boxel-sp-sm) var(--boxel-sp-5xs)
+          var(--boxel-sp-xxs);
+        clip-path: polygon(
+          0 0,
+          calc(100% - 8px) 0,
+          100% 50%,
+          calc(100% - 8px) 100%,
+          0 100%
+        );
+      }
+      .calendar-icon-container {
+        font-size: var(--tasl-font-size-extra-small);
+        display: inline-flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+        overflow: hidden;
+      }
+      .calendar-icon {
+        flex-shrink: 0;
+      }
+      footer {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--boxel-sp-xxxs);
+        color: var(--boxel-dark);
+        margin-top: auto;
+      }
+      .card-assignee {
+        width: auto;
+        height: auto;
+        overflow: unset;
+        margin-left: auto;
+      }
+      /*catch all for dismissing tags*/
+      @container fitted-card (width <= 226px) {
+        .card-tags {
+          display: none;
+        }
+      }
+
+      /*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;
+        }
+        header {
+          flex-wrap: nowrap;
+        }
+      }
+
+      /*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);
+        }
+        .task-title,
+        .priority,
+        .date-info-container {
+          display: none;
+        }
+        header {
+          flex-wrap: nowrap;
+        }
+        .card-assignee {
+          display: none;
+        }
+      }
+
+      /*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;
+        }
+        .task-card {
+          padding: var(--boxel-sp-xxxs);
+          flex-direction: row;
+          align-items: center;
+          gap: var(--boxel-sp-sm);
+        }
+        .priority {
+          display: none;
+        }
+        header {
+          flex-wrap: nowrap;
+        }
+        .date-info-container .date-status-pill {
+          display: none;
+        }
+        .card-assignee {
+          display: none;
+        }
+      }
+
+      /*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,
+        .date-info-container {
+          display: none;
+        }
+
+        .task-title {
+          font-size: var(--boxel-font-size-sm);
+        }
+
+        footer {
+          margin-top: 0;
+          margin-left: auto;
+        }
+        .task-completion-status {
+          --boxel-circle-size: 18px;
+          --boxel-border-radius: var(--boxel-border-radius-xs);
+        }
+      }
+    </style>
+  </template>
+}
+
+class EditPriority extends Component<typeof TaskPriority> {
+  @tracked label = this.args.model.label;
+
+  get priorities() {
+    return TaskPriority.values;
+  }
+
+  get selectedPriority() {
+    return this.priorities?.find((priority) => {
+      return priority.label === this.label;
+    });
+  }
+
+  @action handlePriorityChange(priority: TaskPriority): void {
+    this.label = priority.label;
+    this.args.model.label = this.selectedPriority?.label;
+    this.args.model.index = this.selectedPriority?.index;
+  }
+
+  <template>
+    <div class='priority-field'>
+      <RadioInput
+        @groupDescription='Select Task Priority'
+        @items={{this.priorities}}
+        @checkedId={{this.selectedPriority.label}}
+        @orientation='horizontal'
+        @spacing='default'
+        @keyName='label'
+        as |item|
+      >
+        <item.component @onChange={{fn this.handlePriorityChange item.data}}>
+          {{item.data.label}}
+        </item.component>
+      </RadioInput>
+    </div>
+  </template>
+}
+
+export class TaskPriority extends FieldDef {
+  @field index = contains(NumberField); //sorting order
+  @field label = contains(StringField);
+  // loosey goosey pattern
+  static values = [
+    { index: 0, label: 'Lowest', icon: ChevronsDown },
+    { index: 1, label: 'Low', icon: ChevronDown },
+    {
+      index: 2,
+      label: 'Medium',
+      icon: CircleEqual,
+    },
+    {
+      index: 3,
+      label: 'High',
+      icon: ChevronUp,
+    },
+    {
+      index: 4,
+      label: 'Highest',
+      icon: ChevronsUp,
+    },
+  ];
+
+  static edit = EditPriority;
+  static embedded = class Embedded extends Component<typeof TaskPriority> {
+    <template>
+      {{@model.label}}
+    </template>
+  };
+
+  static atom = class Atom extends Component<typeof this> {
+    get selectedPriority() {
+      return TaskPriority.values.find((priority) => {
+        return priority.label === this.args.model.label;
+      });
+    }
+
+    get selectedIcon() {
+      return this.selectedPriority?.icon;
+    }
+    <template>
+      <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>
+  };
+}
+
+export class Task extends Todo {
+  static displayName = 'Task';
+  @field tags = linksToMany(() => Tag);
+  @field dateRange = contains(DateRangeField);
+  @field status = contains(TaskStatusField);
+  @field assignee = linksTo(() => User);
+  @field priority = contains(TaskPriority);
+
+  @field title = contains(StringField, {
+    computeVia: function (this: Task) {
+      return this.name ?? `Untitled ${this.constructor.displayName}`;
+    },
+  });
+
+  @field shortId = contains(StringField, {
+    computeVia: function (this: Task) {
+      if (this.id) {
+        let id = shortenId(extractId(this.id));
+        return id.toUpperCase();
+      }
+      return;
+    },
+  });
+
+  static fitted = FittedTask;
+}
+
+function extractId(href: string): string {
+  const urlObj = new URL(href);
+  const pathname = urlObj.pathname;
+  const parts = pathname.split('/');
+  const lastPart = parts[parts.length - 1];
+  return lastPart.replace('.json', '');
+}
+
+function shortenId(id: string): string {
+  const shortUuid = id.slice(0, 8);
+  const decimal = parseInt(shortUuid, 16);
+  return decimal.toString(36).padStart(6, '0');
+}
+
+export 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;
+}
+
+interface TaskCompletionStatusSignature {
+  Element: HTMLDivElement;
+  Args: {
+    completed: boolean;
+  };
+}
+
+export class TaskCompletionStatus extends GlimmerComponent<TaskCompletionStatusSignature> {
+  <template>
+    <div class='completion-status' ...attributes>
+      <span class='checkmark {{if @completed "completed"}}'>
+        {{#if @completed}}
+          <CheckMark class='checkmark-icon' />
+        {{/if}}
+      </span>
+    </div>
+
+    <style scoped>
+      .completion-status {
+        --circle-size: var(--boxel-circle-size, 20px);
+        --border-radius: var(
+          --boxel-border-radius,
+          var(--boxel-border-radius-xxs)
+        );
+        display: inline-flex;
+        align-items: center;
+      }
+      .checkmark {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: var(--circle-size);
+        width: var(--circle-size);
+        background-color: white;
+        border: 2px solid var(--boxel-400);
+        border-radius: var(--border-radius);
+        transition: all 0.2s ease;
+      }
+      .checkmark.completed {
+        background-color: var(--boxel-highlight);
+        color: white;
+      }
+      .checkmark-icon {
+        --icon-size: calc(var(--circle-size, 20px) * 0.8);
+        width: var(--icon-size);
+        height: var(--icon-size);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/seed-realm/todo.gts b/packages/seed-realm/todo.gts
new file mode 100644
index 0000000000..5b57076313
--- /dev/null
+++ b/packages/seed-realm/todo.gts
@@ -0,0 +1,13 @@
+import {
+  CardDef,
+  field,
+  contains,
+  StringField,
+} from 'https://cardstack.com/base/card-api';
+import MarkdownField from 'https://cardstack.com/base/markdown';
+
+export class Todo extends CardDef {
+  static displayName = 'Todo';
+  @field name = contains(StringField);
+  @field details = contains(MarkdownField);
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 05d468dca1..6983a56d76 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -163,6 +163,9 @@ importers:
       '@sinonjs/fake-timers':
         specifier: ^11.2.2
         version: 11.2.2
+      '@types/qunit':
+        specifier: ^2.19.12
+        version: 2.19.12
       '@types/sinonjs__fake-timers':
         specifier: ^8.1.5
         version: 8.1.5
@@ -7350,6 +7353,10 @@ packages:
     resolution: {integrity: sha512-gVB+rxvxmbyPFWa6yjjKgcumWal3hyqoTXI0Oil161uWfo1OCzWZ/rnEumsx+6uVgrwPrCrhpQbLkzfildkSbg==}
     dev: true
 
+  /@types/qunit@2.19.12:
+    resolution: {integrity: sha512-II+C1wgzUia0g+tGAH+PBb4XiTm8/C/i6sN23r21NNskBYOYrv+qnW0tFQ/IxZzKVwrK4CTglf8YO3poJUclQA==}
+    dev: true
+
   /@types/range-parser@1.2.6:
     resolution: {integrity: sha512-+0autS93xyXizIYiyL02FCY8N+KkKPhILhcUSA276HxzreZ16kl+cmwvV2qAM/PuCCwPXzOXOWhiPcw20uSFcA==}
     dev: true