From fa8275bae120881a8afb680b8f03e42e6b4470a3 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Mon, 29 Jun 2026 12:36:46 -0400
Subject: [PATCH 01/24] improved result card fitted template

---
 .../software-factory/realm/eval-result.gts    | 133 ++++-------
 .../realm/instantiate-result.gts              | 133 ++++-------
 .../software-factory/realm/lint-result.gts    | 141 +++++-------
 .../software-factory/realm/parse-result.gts   | 133 ++++-------
 .../realm/result-fitted-card.gts              | 217 ++++++++++++++++++
 .../software-factory/realm/test-results.gts   | 142 +++++-------
 6 files changed, 463 insertions(+), 436 deletions(-)
 create mode 100644 packages/software-factory/realm/result-fitted-card.gts

diff --git a/packages/software-factory/realm/eval-result.gts b/packages/software-factory/realm/eval-result.gts
index 61285135fd..2c66b1f39d 100644
--- a/packages/software-factory/realm/eval-result.gts
+++ b/packages/software-factory/realm/eval-result.gts
@@ -12,6 +12,14 @@ import NumberField from 'https://cardstack.com/base/number';
 import DateTimeField from 'https://cardstack.com/base/datetime';
 import enumField from 'https://cardstack.com/base/enum';
 import { Project, Issue } from './darkfactory.gts';
+import {
+  ResultFittedCard,
+  type ResultMetaItem,
+} from './result-fitted-card.gts';
+
+import Code from '@cardstack/boxel-icons/code';
+import CircleCheck from '@cardstack/boxel-icons/circle-check';
+import CircleX from '@cardstack/boxel-icons/circle-x';
 
 export const EvalResultStatusField = enumField(StringField, {
   options: [
@@ -106,7 +114,7 @@ export class EvalResult extends CardDef {
     },
   });
 
-  @field title = contains(StringField, {
+  @field cardTitle = contains(StringField, {
     computeVia: function (this: EvalResult) {
       let seq = this.sequenceNumber ?? '?';
       let status = this.status ?? 'unknown';
@@ -129,93 +137,44 @@ export class EvalResult extends CardDef {
       return this.args.model.status;
     }
 
+    get titleText() {
+      return this.args.model.issue?.summary ?? 'Eval Run';
+    }
+
+    get metaItems(): ResultMetaItem[] {
+      let m = this.args.model;
+      let items: ResultMetaItem[] = [
+        {
+          icon: CircleCheck,
+          text: `${m.modulesPassed}/${m.modulesChecked} passed`,
+          tone: 'clean',
+        },
+      ];
+      if (m.modulesWithErrors) {
+        items.push({
+          icon: CircleX,
+          text: `${m.modulesWithErrors} error(s)`,
+          tone: 'error',
+        });
+      }
+      return items;
+    }
+
     <template>
-      <div class='eval-result compact'>
-        <div class='header'>
-          <strong>#{{@model.sequenceNumber}}</strong>
-          <span
-            class='status status-{{this.displayStatus}}'
-          >{{this.displayStatus}}</span>
-        </div>
-        {{#if @model.issue}}
-          <div class='issue-name'>{{@model.issue.summary}}</div>
-        {{/if}}
-        <div class='counts'>
-          {{@model.modulesPassed}}/{{@model.modulesChecked}}
-          modules passed
-          {{#if @model.modulesWithErrors}}
-            <span class='error-label'>
-              ({{@model.modulesWithErrors}}
-              error(s))
-            </span>
-          {{/if}}
-          {{#if @model.durationMs}}
-            <span class='duration'>{{@model.durationMs}}ms</span>
-          {{/if}}
-        </div>
-      </div>
-      <style scoped>
-        .eval-result {
-          display: grid;
-          gap: 0.25rem;
-        }
-        .compact {
-          padding: 0.75rem;
-          border: 1px solid var(--border);
-          border-radius: 0.5rem;
-          background: var(--card);
-        }
-        .header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        .status {
-          font-size: 0.75rem;
-          text-transform: uppercase;
-          font-weight: 600;
-          padding: 0.125rem 0.5rem;
-          border-radius: 0.25rem;
-        }
-        .status-passed {
-          color: var(--boxel-green, #16a34a);
-          background: #f0fdf4;
-        }
-        .status-failed {
-          color: var(--boxel-red, #dc2626);
-          background: #fef2f2;
-        }
-        .status-error {
-          color: var(--boxel-orange, #ea580c);
-          background: #fff7ed;
-        }
-        .status-running {
-          color: var(--boxel-blue, #2563eb);
-          background: #eff6ff;
-        }
-        .status-empty {
-          color: var(--boxel-400, #9ca3af);
-          background: #f9fafb;
-        }
-        .issue-name {
-          font-size: 0.8rem;
-          color: var(--muted-foreground);
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        .counts {
-          font-size: 0.85rem;
-          color: var(--muted-foreground);
-        }
-        .error-label {
-          color: var(--boxel-red, #dc2626);
-        }
-        .duration {
-          margin-left: 0.5rem;
-          font-size: 0.75rem;
-        }
-      </style>
+      <ResultFittedCard
+        @icon={{Code}}
+        @label='Eval'
+        @sequenceNumber={{@model.sequenceNumber}}
+        @status={{this.displayStatus}}
+        @emptyLabel='No Modules'
+        @title={{this.titleText}}
+        @durationMs={{@model.durationMs}}
+        @metaItems={{this.metaItems}}
+      >
+        <:subtitle>
+          {{#if @model.project}}<@fields.project @format='atom' />{{/if}}
+        </:subtitle>
+      </ResultFittedCard>
     </template>
   };
 
diff --git a/packages/software-factory/realm/instantiate-result.gts b/packages/software-factory/realm/instantiate-result.gts
index ac128f8677..04dd818d55 100644
--- a/packages/software-factory/realm/instantiate-result.gts
+++ b/packages/software-factory/realm/instantiate-result.gts
@@ -15,6 +15,14 @@ import CodeRefField from 'https://cardstack.com/base/code-ref';
 import enumField from 'https://cardstack.com/base/enum';
 import { RealmPaths } from '@cardstack/runtime-common';
 import { Project, Issue } from './darkfactory.gts';
+import {
+  ResultFittedCard,
+  type ResultMetaItem,
+} from './result-fitted-card.gts';
+
+import Box from '@cardstack/boxel-icons/box';
+import CircleCheck from '@cardstack/boxel-icons/circle-check';
+import CircleX from '@cardstack/boxel-icons/circle-x';
 
 export const InstantiateResultStatusField = enumField(StringField, {
   options: [
@@ -129,7 +137,7 @@ export class InstantiateResult extends CardDef {
     },
   });
 
-  @field title = contains(StringField, {
+  @field cardTitle = contains(StringField, {
     computeVia: function (this: InstantiateResult) {
       let seq = this.sequenceNumber ?? '?';
       let status = this.status ?? 'unknown';
@@ -152,93 +160,44 @@ export class InstantiateResult extends CardDef {
       return this.args.model.status;
     }
 
+    get titleText() {
+      return this.args.model.issue?.summary ?? 'Instantiate Run';
+    }
+
+    get metaItems(): ResultMetaItem[] {
+      let m = this.args.model;
+      let items: ResultMetaItem[] = [
+        {
+          icon: CircleCheck,
+          text: `${m.cardsPassed}/${m.cardsChecked} passed`,
+          tone: 'clean',
+        },
+      ];
+      if (m.cardsWithErrors) {
+        items.push({
+          icon: CircleX,
+          text: `${m.cardsWithErrors} error(s)`,
+          tone: 'error',
+        });
+      }
+      return items;
+    }
+
     <template>
-      <div class='instantiate-result compact'>
-        <div class='header'>
-          <strong>#{{@model.sequenceNumber}}</strong>
-          <span
-            class='status status-{{this.displayStatus}}'
-          >{{this.displayStatus}}</span>
-        </div>
-        {{#if @model.issue}}
-          <div class='issue-name'>{{@model.issue.summary}}</div>
-        {{/if}}
-        <div class='counts'>
-          {{@model.cardsPassed}}/{{@model.cardsChecked}}
-          cards passed
-          {{#if @model.cardsWithErrors}}
-            <span class='error-label'>
-              ({{@model.cardsWithErrors}}
-              error(s))
-            </span>
-          {{/if}}
-          {{#if @model.durationMs}}
-            <span class='duration'>{{@model.durationMs}}ms</span>
-          {{/if}}
-        </div>
-      </div>
-      <style scoped>
-        .instantiate-result {
-          display: grid;
-          gap: 0.25rem;
-        }
-        .compact {
-          padding: 0.75rem;
-          border: 1px solid var(--border);
-          border-radius: 0.5rem;
-          background: var(--card);
-        }
-        .header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        .status {
-          font-size: 0.75rem;
-          text-transform: uppercase;
-          font-weight: 600;
-          padding: 0.125rem 0.5rem;
-          border-radius: 0.25rem;
-        }
-        .status-passed {
-          color: var(--boxel-green, #16a34a);
-          background: #f0fdf4;
-        }
-        .status-failed {
-          color: var(--boxel-red, #dc2626);
-          background: #fef2f2;
-        }
-        .status-error {
-          color: var(--boxel-orange, #ea580c);
-          background: #fff7ed;
-        }
-        .status-running {
-          color: var(--boxel-blue, #2563eb);
-          background: #eff6ff;
-        }
-        .status-empty {
-          color: var(--boxel-400, #9ca3af);
-          background: #f9fafb;
-        }
-        .issue-name {
-          font-size: 0.8rem;
-          color: var(--muted-foreground);
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        .counts {
-          font-size: 0.85rem;
-          color: var(--muted-foreground);
-        }
-        .error-label {
-          color: var(--boxel-red, #dc2626);
-        }
-        .duration {
-          margin-left: 0.5rem;
-          font-size: 0.75rem;
-        }
-      </style>
+      <ResultFittedCard
+        @icon={{Box}}
+        @label='Instantiate'
+        @sequenceNumber={{@model.sequenceNumber}}
+        @status={{this.displayStatus}}
+        @emptyLabel='No Cards'
+        @title={{this.titleText}}
+        @durationMs={{@model.durationMs}}
+        @metaItems={{this.metaItems}}
+      >
+        <:subtitle>
+          {{#if @model.project}}<@fields.project @format='atom' />{{/if}}
+        </:subtitle>
+      </ResultFittedCard>
     </template>
   };
 
diff --git a/packages/software-factory/realm/lint-result.gts b/packages/software-factory/realm/lint-result.gts
index ac8903ead4..5f950b7204 100644
--- a/packages/software-factory/realm/lint-result.gts
+++ b/packages/software-factory/realm/lint-result.gts
@@ -12,6 +12,15 @@ import NumberField from 'https://cardstack.com/base/number';
 import DateTimeField from 'https://cardstack.com/base/datetime';
 import enumField from 'https://cardstack.com/base/enum';
 import { Project, Issue } from './darkfactory.gts';
+import {
+  ResultFittedCard,
+  type ResultMetaItem,
+} from './result-fitted-card.gts';
+
+import ListChecks from '@cardstack/boxel-icons/list-checks';
+import CircleCheck from '@cardstack/boxel-icons/circle-check';
+import CircleX from '@cardstack/boxel-icons/circle-x';
+import CircleAlert from '@cardstack/boxel-icons/circle-alert';
 
 export const LintResultStatusField = enumField(StringField, {
   options: [
@@ -225,7 +234,7 @@ export class LintResult extends CardDef {
     },
   });
 
-  @field title = contains(StringField, {
+  @field cardTitle = contains(StringField, {
     computeVia: function (this: LintResult) {
       let seq = this.sequenceNumber ?? '?';
       let status = this.status ?? 'unknown';
@@ -252,93 +261,51 @@ export class LintResult extends CardDef {
       return this.args.model.status;
     }
 
+    get titleText() {
+      return this.args.model.issue?.summary ?? 'Lint Run';
+    }
+
+    get metaItems(): ResultMetaItem[] {
+      let m = this.args.model;
+      let items: ResultMetaItem[] = [
+        {
+          icon: CircleCheck,
+          text: `${m.filesClean}/${m.filesChecked} clean`,
+          tone: 'clean',
+        },
+      ];
+      if (m.totalErrors) {
+        items.push({
+          icon: CircleX,
+          text: `${m.totalErrors} error(s)`,
+          tone: 'error',
+        });
+      }
+      if (m.totalWarnings) {
+        items.push({
+          icon: CircleAlert,
+          text: `${m.totalWarnings} warning(s)`,
+          tone: 'warning',
+        });
+      }
+      return items;
+    }
+
     <template>
-      <div class='lint-result compact'>
-        <div class='header'>
-          <strong>#{{@model.sequenceNumber}}</strong>
-          <span
-            class='status status-{{this.displayStatus}}'
-          >{{this.displayStatus}}</span>
-        </div>
-        {{#if @model.issue}}
-          <div class='issue-name'>{{@model.issue.summary}}</div>
-        {{/if}}
-        <div class='counts'>
-          {{@model.filesClean}}/{{@model.filesChecked}}
-          files clean
-          {{#if @model.totalErrors}}
-            <span class='error-label'>
-              ({{@model.totalErrors}}
-              error(s))
-            </span>
-          {{/if}}
-          {{#if @model.durationMs}}
-            <span class='duration'>{{@model.durationMs}}ms</span>
-          {{/if}}
-        </div>
-      </div>
-      <style scoped>
-        .lint-result {
-          display: grid;
-          gap: 0.25rem;
-        }
-        .compact {
-          padding: 0.75rem;
-          border: 1px solid var(--border);
-          border-radius: 0.5rem;
-          background: var(--card);
-        }
-        .header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        .status {
-          font-size: 0.75rem;
-          text-transform: uppercase;
-          font-weight: 600;
-          padding: 0.125rem 0.5rem;
-          border-radius: 0.25rem;
-        }
-        .status-passed {
-          color: var(--boxel-green, #16a34a);
-          background: #f0fdf4;
-        }
-        .status-failed {
-          color: var(--boxel-red, #dc2626);
-          background: #fef2f2;
-        }
-        .status-error {
-          color: var(--boxel-orange, #ea580c);
-          background: #fff7ed;
-        }
-        .status-running {
-          color: var(--boxel-blue, #2563eb);
-          background: #eff6ff;
-        }
-        .status-empty {
-          color: var(--boxel-400, #9ca3af);
-          background: #f9fafb;
-        }
-        .issue-name {
-          font-size: 0.8rem;
-          color: var(--muted-foreground);
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        .counts {
-          font-size: 0.85rem;
-          color: var(--muted-foreground);
-        }
-        .error-label {
-          color: var(--boxel-red, #dc2626);
-        }
-        .duration {
-          margin-left: 0.5rem;
-          font-size: 0.75rem;
-        }
-      </style>
+      <ResultFittedCard
+        @icon={{ListChecks}}
+        @label='Lint'
+        @sequenceNumber={{@model.sequenceNumber}}
+        @status={{this.displayStatus}}
+        @emptyLabel='No Files'
+        @title={{this.titleText}}
+        @durationMs={{@model.durationMs}}
+        @metaItems={{this.metaItems}}
+      >
+        <:subtitle>
+          {{#if @model.project}}<@fields.project @format='atom' />{{/if}}
+        </:subtitle>
+      </ResultFittedCard>
     </template>
   };
 
diff --git a/packages/software-factory/realm/parse-result.gts b/packages/software-factory/realm/parse-result.gts
index abbc5c07cb..24fd00d099 100644
--- a/packages/software-factory/realm/parse-result.gts
+++ b/packages/software-factory/realm/parse-result.gts
@@ -12,6 +12,14 @@ import NumberField from 'https://cardstack.com/base/number';
 import DateTimeField from 'https://cardstack.com/base/datetime';
 import enumField from 'https://cardstack.com/base/enum';
 import { Project, Issue } from './darkfactory.gts';
+import {
+  ResultFittedCard,
+  type ResultMetaItem,
+} from './result-fitted-card.gts';
+
+import FileCode from '@cardstack/boxel-icons/file-code';
+import CircleCheck from '@cardstack/boxel-icons/circle-check';
+import CircleX from '@cardstack/boxel-icons/circle-x';
 
 export const ParseResultStatusField = enumField(StringField, {
   options: [
@@ -174,7 +182,7 @@ export class ParseResult extends CardDef {
     },
   });
 
-  @field title = contains(StringField, {
+  @field cardTitle = contains(StringField, {
     computeVia: function (this: ParseResult) {
       let seq = this.sequenceNumber ?? '?';
       let status = this.status ?? 'unknown';
@@ -201,93 +209,44 @@ export class ParseResult extends CardDef {
       return this.args.model.status;
     }
 
+    get titleText() {
+      return this.args.model.issue?.summary ?? 'Parse Run';
+    }
+
+    get metaItems(): ResultMetaItem[] {
+      let m = this.args.model;
+      let items: ResultMetaItem[] = [
+        {
+          icon: CircleCheck,
+          text: `${m.filesClean}/${m.filesChecked} valid`,
+          tone: 'clean',
+        },
+      ];
+      if (m.totalErrors) {
+        items.push({
+          icon: CircleX,
+          text: `${m.totalErrors} error(s)`,
+          tone: 'error',
+        });
+      }
+      return items;
+    }
+
     <template>
-      <div class='parse-result compact'>
-        <div class='header'>
-          <strong>#{{@model.sequenceNumber}}</strong>
-          <span
-            class='status status-{{this.displayStatus}}'
-          >{{this.displayStatus}}</span>
-        </div>
-        {{#if @model.issue}}
-          <div class='issue-name'>{{@model.issue.summary}}</div>
-        {{/if}}
-        <div class='counts'>
-          {{@model.filesClean}}/{{@model.filesChecked}}
-          files valid
-          {{#if @model.totalErrors}}
-            <span class='error-label'>
-              ({{@model.totalErrors}}
-              error(s))
-            </span>
-          {{/if}}
-          {{#if @model.durationMs}}
-            <span class='duration'>{{@model.durationMs}}ms</span>
-          {{/if}}
-        </div>
-      </div>
-      <style scoped>
-        .parse-result {
-          display: grid;
-          gap: 0.25rem;
-        }
-        .compact {
-          padding: 0.75rem;
-          border: 1px solid var(--border);
-          border-radius: 0.5rem;
-          background: var(--card);
-        }
-        .header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        .status {
-          font-size: 0.75rem;
-          text-transform: uppercase;
-          font-weight: 600;
-          padding: 0.125rem 0.5rem;
-          border-radius: 0.25rem;
-        }
-        .status-passed {
-          color: var(--boxel-green, #16a34a);
-          background: #f0fdf4;
-        }
-        .status-failed {
-          color: var(--boxel-red, #dc2626);
-          background: #fef2f2;
-        }
-        .status-error {
-          color: var(--boxel-orange, #ea580c);
-          background: #fff7ed;
-        }
-        .status-running {
-          color: var(--boxel-blue, #2563eb);
-          background: #eff6ff;
-        }
-        .status-empty {
-          color: var(--boxel-400, #9ca3af);
-          background: #f9fafb;
-        }
-        .issue-name {
-          font-size: 0.8rem;
-          color: var(--muted-foreground);
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        .counts {
-          font-size: 0.85rem;
-          color: var(--muted-foreground);
-        }
-        .error-label {
-          color: var(--boxel-red, #dc2626);
-        }
-        .duration {
-          margin-left: 0.5rem;
-          font-size: 0.75rem;
-        }
-      </style>
+      <ResultFittedCard
+        @icon={{FileCode}}
+        @label='Parse'
+        @sequenceNumber={{@model.sequenceNumber}}
+        @status={{this.displayStatus}}
+        @emptyLabel='No Files'
+        @title={{this.titleText}}
+        @durationMs={{@model.durationMs}}
+        @metaItems={{this.metaItems}}
+      >
+        <:subtitle>
+          {{#if @model.project}}<@fields.project @format='atom' />{{/if}}
+        </:subtitle>
+      </ResultFittedCard>
     </template>
   };
 
diff --git a/packages/software-factory/realm/result-fitted-card.gts b/packages/software-factory/realm/result-fitted-card.gts
new file mode 100644
index 0000000000..84a633e498
--- /dev/null
+++ b/packages/software-factory/realm/result-fitted-card.gts
@@ -0,0 +1,217 @@
+import GlimmerComponent from '@glimmer/component';
+import type { ComponentLike } from '@glint/template';
+import { FittedCard } from '@cardstack/boxel-ui/components';
+import { StatusPill } from './status-pill.gts';
+import Clock from '@cardstack/boxel-icons/clock';
+
+type IconComponent = ComponentLike<{ Element: SVGSVGElement }>;
+
+export type ResultMetaTone = 'clean' | 'error' | 'warning' | 'muted';
+
+export interface ResultMetaItem {
+  icon: IconComponent;
+  text: string;
+  tone?: ResultMetaTone;
+}
+
+interface Signature {
+  Args: {
+    // Eyebrow icon and label, rendered as "<label> #<sequenceNumber>".
+    icon: IconComponent;
+    label: string;
+    sequenceNumber?: number;
+    // Already-resolved display status, including the synthetic 'empty' value.
+    status?: string;
+    // Label shown for the 'empty' status (e.g. "No Files").
+    emptyLabel?: string;
+    title: string;
+    durationMs?: number;
+    metaItems?: ResultMetaItem[];
+  };
+  Blocks: {
+    subtitle: [];
+  };
+}
+
+export class ResultFittedCard extends GlimmerComponent<Signature> {
+  get statusLabel() {
+    switch (this.args.status) {
+      case 'passed':
+        return 'Passed';
+      case 'failed':
+        return 'Failed';
+      case 'error':
+        return 'Error';
+      case 'running':
+        return 'Running';
+      case 'empty':
+        return this.args.emptyLabel ?? 'Empty';
+      default:
+        return 'Unknown';
+    }
+  }
+
+  get statusColor() {
+    switch (this.args.status) {
+      case 'passed':
+        return 'oklch(60% 0.17 150)';
+      case 'failed':
+        return 'oklch(55% 0.22 25)';
+      case 'error':
+        return 'oklch(68% 0.17 55)';
+      case 'running':
+        return 'oklch(60% 0.16 250)';
+      default:
+        return 'var(--muted-foreground, var(--boxel-500))';
+    }
+  }
+
+  <template>
+    <FittedCard class='result-fitted' @titleTag='h3'>
+      <:eyebrow>
+        <div class='result-id'>
+          <@icon width='14' height='14' aria-hidden='true' />
+          <span>{{@label}} #{{@sequenceNumber}}</span>
+        </div>
+      </:eyebrow>
+      <:badgeRight>
+        <StatusPill class='status-badge-right' @color={{this.statusColor}}>
+          {{this.statusLabel}}
+        </StatusPill>
+      </:badgeRight>
+      <:title>{{@title}}</:title>
+      <:subtitle>{{yield to='subtitle'}}</:subtitle>
+      <:meta>
+        <div class='result-meta'>
+          {{#each @metaItems as |item|}}
+            <span class='meta-item meta-{{if item.tone item.tone "muted"}}'>
+              <item.icon
+                class='meta-icon'
+                width='13'
+                height='13'
+                aria-hidden='true'
+              />{{item.text}}
+            </span>
+          {{/each}}
+        </div>
+      </:meta>
+      <:footer>
+        <StatusPill class='status-pill' @color={{this.statusColor}}>
+          {{this.statusLabel}}
+        </StatusPill>
+        {{#if @durationMs}}
+          <span class='footer-duration'>
+            <Clock
+              class='meta-icon'
+              width='12'
+              height='12'
+              aria-hidden='true'
+            />{{@durationMs}}ms
+          </span>
+        {{/if}}
+      </:footer>
+    </FittedCard>
+    <style scoped>
+      .result-fitted {
+        --boxel-heading-font-weight: 500;
+        --fc-title-line-clamp: 2;
+        --fc-subtitle-line-clamp: 1;
+        --fc-badge-right-display: none;
+        --fc-meta-display: none;
+      }
+      .result-id {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-4xs);
+        font-size: 0.6875rem;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--muted-foreground, var(--boxel-500));
+        flex-shrink: 0;
+      }
+      .status-badge-right {
+        font-size: 0.6875rem;
+      }
+      .status-pill {
+        margin-right: auto;
+      }
+      .footer-duration {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25em;
+        font-size: 0.625rem;
+        font-weight: 500;
+        color: var(--muted-foreground, var(--boxel-500));
+        flex-shrink: 0;
+      }
+      .result-meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--boxel-sp-xs);
+        width: 100%;
+        padding-top: var(--boxel-sp-xs);
+        border-top: 1px solid
+          color-mix(
+            in oklch,
+            var(--border, var(--boxel-border-color)) 50%,
+            transparent
+          );
+      }
+      .meta-item {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.3em;
+        font-size: var(--boxel-font-size-xs);
+        font-weight: 500;
+        color: var(--muted-foreground, var(--boxel-500));
+      }
+      .meta-icon {
+        flex-shrink: 0;
+      }
+      .meta-clean {
+        color: oklch(60% 0.17 150);
+      }
+      .meta-error {
+        color: oklch(55% 0.22 25);
+      }
+      .meta-warning {
+        color: oklch(68% 0.17 55);
+      }
+      .meta-muted {
+        color: var(--muted-foreground, var(--boxel-500));
+      }
+      /* Shrink the title in very short strips */
+      @container fitted-card (height < 65px) {
+        .result-fitted {
+          --fc-title-font-size: var(--boxel-font-size-xs);
+        }
+      }
+      /* Show the status badge in the top-right on wide, short badge layouts */
+      @container fitted-card (1.0 < aspect-ratio) and (width >= 150px) and (height <= 105px) {
+        .result-fitted {
+          --fc-badge-right-display: block;
+          --fc-badge-offset: -1px;
+        }
+        .status-badge-right {
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+          border-top-left-radius: 0;
+        }
+      }
+      /* Drop the footer on tall narrow badges where there's no room */
+      @container fitted-card (1.0 < aspect-ratio) and (width < 250px) and (height >= 105px) {
+        .result-fitted {
+          --fc-footer-display: none;
+        }
+      }
+      /* Reveal the counts row once the card is tall enough */
+      @container fitted-card ((width >= 150px) and (height >= 170px)) {
+        .result-fitted {
+          --fc-meta-display: block;
+          --fc-title-line-clamp: 3;
+        }
+      }
+    </style>
+  </template>
+}
diff --git a/packages/software-factory/realm/test-results.gts b/packages/software-factory/realm/test-results.gts
index 69230f9ffd..086a991511 100644
--- a/packages/software-factory/realm/test-results.gts
+++ b/packages/software-factory/realm/test-results.gts
@@ -13,6 +13,15 @@ import DateTimeField from 'https://cardstack.com/base/datetime';
 import CodeRefField from 'https://cardstack.com/base/code-ref';
 import enumField from 'https://cardstack.com/base/enum';
 import { Project, Issue } from './darkfactory.gts';
+import {
+  ResultFittedCard,
+  type ResultMetaItem,
+} from './result-fitted-card.gts';
+
+import FlaskConical from '@cardstack/boxel-icons/flask-conical';
+import CircleCheck from '@cardstack/boxel-icons/circle-check';
+import CircleX from '@cardstack/boxel-icons/circle-x';
+import CircleMinus from '@cardstack/boxel-icons/circle-minus';
 
 export const TestRunStatusField = enumField(StringField, {
   options: [
@@ -245,7 +254,7 @@ export class TestRun extends CardDef {
     },
   });
 
-  @field title = contains(StringField, {
+  @field cardTitle = contains(StringField, {
     computeVia: function (this: TestRun) {
       let seq = this.sequenceNumber ?? '?';
       let status = this.status ?? 'unknown';
@@ -269,94 +278,51 @@ export class TestRun extends CardDef {
       return this.args.model.status;
     }
 
+    get titleText() {
+      return this.args.model.issue?.summary ?? 'Test Run';
+    }
+
+    get metaItems(): ResultMetaItem[] {
+      let m = this.args.model;
+      let items: ResultMetaItem[] = [
+        {
+          icon: CircleCheck,
+          text: `${m.passedCount}/${this.total} passed`,
+          tone: 'clean',
+        },
+      ];
+      if (m.failedCount) {
+        items.push({
+          icon: CircleX,
+          text: `${m.failedCount} failed`,
+          tone: 'error',
+        });
+      }
+      if (m.skippedCount) {
+        items.push({
+          icon: CircleMinus,
+          text: `${m.skippedCount} skipped`,
+          tone: 'muted',
+        });
+      }
+      return items;
+    }
+
     <template>
-      <div class='test-run compact'>
-        <div class='header'>
-          <strong>#{{@model.sequenceNumber}}</strong>
-          <span
-            class='status status-{{this.displayStatus}}'
-          >{{this.displayStatus}}</span>
-        </div>
-        {{#if @model.issue}}
-          <div class='issue-name'>{{@model.issue.summary}}</div>
-        {{/if}}
-        <div class='counts'>
-          {{@model.passedCount}}/{{this.total}}
-          passed
-          {{#if @model.skippedCount}}
-            <span class='skipped-label'>
-              ({{@model.skippedCount}}
-              skipped)
-            </span>
-          {{/if}}
-          {{#if @model.durationMs}}
-            <span class='duration'>{{@model.durationMs}}ms</span>
-          {{/if}}
-        </div>
-      </div>
-      <style scoped>
-        .test-run {
-          display: grid;
-          gap: 0.25rem;
-        }
-        .compact {
-          padding: 0.75rem;
-          border: 1px solid var(--border);
-          border-radius: 0.5rem;
-          background: var(--card);
-        }
-        .header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        .status {
-          font-size: 0.75rem;
-          text-transform: uppercase;
-          font-weight: 600;
-          padding: 0.125rem 0.5rem;
-          border-radius: 0.25rem;
-        }
-        .status-passed {
-          color: var(--boxel-green, #16a34a);
-          background: #f0fdf4;
-        }
-        .status-failed {
-          color: var(--boxel-red, #dc2626);
-          background: #fef2f2;
-        }
-        .status-error {
-          color: var(--boxel-orange, #ea580c);
-          background: #fff7ed;
-        }
-        .status-running {
-          color: var(--boxel-blue, #2563eb);
-          background: #eff6ff;
-        }
-        .status-empty {
-          color: var(--boxel-400, #9ca3af);
-          background: #f9fafb;
-        }
-        .issue-name {
-          font-size: 0.8rem;
-          color: var(--muted-foreground);
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        .counts {
-          font-size: 0.85rem;
-          color: var(--muted-foreground);
-        }
-        .skipped-label {
-          color: var(--boxel-400, #9ca3af);
-          font-style: italic;
-        }
-        .duration {
-          margin-left: 0.5rem;
-          font-size: 0.75rem;
-        }
-      </style>
+      <ResultFittedCard
+        @icon={{FlaskConical}}
+        @label='Tests'
+        @sequenceNumber={{@model.sequenceNumber}}
+        @status={{this.displayStatus}}
+        @emptyLabel='No Tests'
+        @title={{this.titleText}}
+        @durationMs={{@model.durationMs}}
+        @metaItems={{this.metaItems}}
+      >
+        <:subtitle>
+          {{#if @model.project}}<@fields.project @format='atom' />{{/if}}
+        </:subtitle>
+      </ResultFittedCard>
     </template>
   };
 

From 1fa85ebadc36ae4588e641a3243763ccc6f011fc Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Mon, 29 Jun 2026 13:09:14 -0400
Subject: [PATCH 02/24] update .agents/skills outdated title references

---
 .../references/dev-core-patterns.md           | 20 +++++++++++--------
 .../references/dev-enumerations.md            |  2 +-
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/.agents/skills/boxel-development/references/dev-core-patterns.md b/.agents/skills/boxel-development/references/dev-core-patterns.md
index 8afd7634a9..04663e1558 100644
--- a/.agents/skills/boxel-development/references/dev-core-patterns.md
+++ b/.agents/skills/boxel-development/references/dev-core-patterns.md
@@ -1,10 +1,14 @@
-**Card with computed title:**
+**Card with computed cardTitle:**
+
+A card's display name comes from `cardTitle` (a computed pass-through from
+`cardInfo.name`). To derive it from another field, override `cardTitle` — do
+NOT override the base `title` field; the host reads `cardTitle`, not `title`.
 
 ```gts
 export class BlogPost extends CardDef {
   @field headline = contains(StringField);
 
-  @field title = contains(StringField, {
+  @field cardTitle = contains(StringField, {
     computeVia: function (this: BlogPost) {
       return this.headline ?? 'Untitled Post';
     },
@@ -60,7 +64,7 @@ export class BlogPost extends CardDef {
   @field tags = containsMany(TagField);
   @field relatedPosts = linksToMany(() => BlogPost);
 
-  @field title = contains(StringField, {
+  @field cardTitle = contains(StringField, {
     computeVia: function (this: BlogPost) {
       try {
         const baseTitle = this.headline ?? 'Untitled Post';
@@ -68,7 +72,7 @@ export class BlogPost extends CardDef {
         if (baseTitle.length <= maxLength) return baseTitle;
         return baseTitle.substring(0, maxLength - 3) + '...';
       } catch (e) {
-        console.error('BlogPost: Error computing title', e);
+        console.error('BlogPost: Error computing cardTitle', e);
         return 'Untitled Post';
       }
     },
@@ -137,9 +141,9 @@ export class AddressField extends FieldDef {
 
 ```gts
 // ❌ DANGEROUS: Self-reference causes infinite recursion
-@field title = contains(StringField, {
+@field cardTitle = contains(StringField, {
   computeVia: function(this: BlogPost) {
-    return this.title || 'Untitled'; // STACK OVERFLOW!
+    return this.cardTitle || 'Untitled'; // STACK OVERFLOW!
   }
 });
 
@@ -170,9 +174,9 @@ static isolated = class Isolated extends Component<typeof BlogPost> { // ³⁰ I
   // ³¹ CRITICAL: Do ALL computation in functions, never in templates
   get safeTitle() {
     try {
-      return this.args?.model?.title ?? 'Untitled Post';
+      return this.args?.model?.cardTitle ?? 'Untitled Post';
     } catch (e) {
-      console.error('BlogPost: Error accessing title', e);
+      console.error('BlogPost: Error accessing cardTitle', e);
       return 'Untitled Post';
     }
   }
diff --git a/.agents/skills/boxel-development/references/dev-enumerations.md b/.agents/skills/boxel-development/references/dev-enumerations.md
index 21255d6934..c181d4902d 100644
--- a/.agents/skills/boxel-development/references/dev-enumerations.md
+++ b/.agents/skills/boxel-development/references/dev-enumerations.md
@@ -218,7 +218,7 @@ export class Task extends CardDef {
   @field taskName = contains(StringField);
   @field priority = contains(PriorityField);
 
-  @field title = contains(StringField, {
+  @field cardTitle = contains(StringField, {
     computeVia: function (this: Task) {
       return this.taskName ?? 'Untitled Task';
     },

From a5efc93db5940cb6684ddad1045289cb243a9b28 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Mon, 29 Jun 2026 13:40:11 -0400
Subject: [PATCH 03/24] update isolated result card

---
 .../software-factory/realm/eval-result.gts    | 253 +++++-----
 .../realm/instantiate-result.gts              | 253 +++++-----
 .../software-factory/realm/lint-result.gts    | 344 +++++++-------
 packages/software-factory/realm/overview.gts  |  82 ++--
 .../software-factory/realm/parse-result.gts   | 307 ++++++-------
 .../realm/result-fitted-card.gts              |  67 +--
 .../realm/result-isolated-card.gts            | 153 +++++++
 .../software-factory/realm/test-results.gts   | 432 +++++++++---------
 8 files changed, 955 insertions(+), 936 deletions(-)
 create mode 100644 packages/software-factory/realm/result-isolated-card.gts

diff --git a/packages/software-factory/realm/eval-result.gts b/packages/software-factory/realm/eval-result.gts
index 2c66b1f39d..8e547f4330 100644
--- a/packages/software-factory/realm/eval-result.gts
+++ b/packages/software-factory/realm/eval-result.gts
@@ -16,6 +16,7 @@ import {
   ResultFittedCard,
   type ResultMetaItem,
 } from './result-fitted-card.gts';
+import { ResultIsolatedCard } from './result-isolated-card.gts';
 
 import Code from '@cardstack/boxel-icons/code';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -191,180 +192,136 @@ export class EvalResult extends CardDef {
       return this.args.model.status;
     }
 
+    get titleText() {
+      return `Eval Run #${this.args.model.sequenceNumber ?? '?'}`;
+    }
+
     <template>
-      <article class='surface'>
-        <header>
-          <div class='header-row'>
-            <strong>EvalResult #{{@model.sequenceNumber}}</strong>
-            <span
-              class='status status-{{this.displayStatus}}'
-            >{{this.displayStatus}}</span>
-          </div>
-          <div class='summary'>
-            {{@model.modulesPassed}}/{{@model.modulesChecked}}
-            modules passed
-            {{#if @model.modulesWithErrors}}
-              ,
+      <ResultIsolatedCard
+        @title={{this.titleText}}
+        @status={{this.displayStatus}}
+        @emptyLabel='No Modules'
+        @durationMs={{@model.durationMs}}
+        @hasProject={{@model.project}}
+        @hasIssue={{@model.issue}}
+        @hasError={{@model.errorMessage}}
+      >
+        <:summary>
+          <span>{{@model.modulesPassed}}/{{@model.modulesChecked}}
+            modules passed{{#if @model.modulesWithErrors}},
               {{@model.modulesWithErrors}}
-              error(s)
-            {{/if}}
-            {{#if @model.durationMs}}
-              in
-              {{@model.durationMs}}ms
-            {{/if}}
-          </div>
-        </header>
-
-        {{#if @model.project}}
-          <section>
-            <h2>Project</h2>
-            <div class='linked-card'>
-              <@fields.project @format='embedded' />
-            </div>
-          </section>
-        {{/if}}
-
-        {{#if @model.issue}}
-          <section>
-            <h2>Issue</h2>
-            <div class='linked-card'>
-              <@fields.issue @format='embedded' />
-            </div>
-          </section>
-        {{/if}}
-
-        {{#if @model.errorMessage}}
-          <section>
-            <h2>Error</h2>
-            <p class='error-message'>{{@model.errorMessage}}</p>
-          </section>
-        {{/if}}
-
-        {{#if @model.moduleResults.length}}
-          <section>
-            <h2>Module Results</h2>
-            {{#each @model.moduleResults as |moduleResult|}}
-              <div
-                class='module-group
-                  {{if moduleResult.hasError "module-has-errors"}}'
-              >
-                <div class='module-group-header'>
-                  <span class='module-group-name'>{{moduleResult.path}}</span>
-                  {{#if moduleResult.hasError}}
-                    <span class='module-group-status has-errors'>error</span>
-                  {{else}}
-                    <span class='module-group-status has-passes'>passed</span>
-                  {{/if}}
-                </div>
-                {{#if moduleResult.error}}
-                  <div class='module-group-error'>
-                    <pre class='error-code-block'>{{moduleResult.error}}</pre>
+              error(s){{/if}}</span>
+        </:summary>
+        <:project><@fields.project @format='embedded' /></:project>
+        <:issue><@fields.issue @format='embedded' /></:issue>
+        <:error>{{@model.errorMessage}}</:error>
+        <:details>
+          {{#if @model.moduleResults.length}}
+            <section class='detail-section'>
+              <h2>Module Results</h2>
+              <div class='detail-groups'>
+                {{#each @model.moduleResults as |moduleResult|}}
+                  <div
+                    class='detail-group
+                      {{if moduleResult.hasError "has-errors"}}'
+                  >
+                    <div class='detail-group-header'>
+                      <span
+                        class='detail-group-name'
+                      >{{moduleResult.path}}</span>
+                      {{#if moduleResult.hasError}}
+                        <span class='group-status errors'>error</span>
+                      {{else}}
+                        <span class='group-status clean'>passed</span>
+                      {{/if}}
+                    </div>
+                    {{#if moduleResult.error}}
+                      <pre class='error-code-block'>{{moduleResult.error}}</pre>
+                    {{/if}}
                   </div>
-                {{/if}}
+                {{/each}}
               </div>
-            {{/each}}
-          </section>
-        {{/if}}
-      </article>
+            </section>
+          {{/if}}
+        </:details>
+      </ResultIsolatedCard>
       <style scoped>
-        .surface {
-          padding: 1.5rem;
+        .detail-section {
           display: grid;
-          gap: 1rem;
-        }
-        .linked-card {
-          margin-bottom: 0.5rem;
-        }
-        .header-row {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
+          gap: var(--boxel-sp-xs);
         }
-        .status {
-          font-size: 0.75rem;
+        .detail-section > h2 {
+          margin: 0;
+          font: 600 var(--boxel-font-sm);
           text-transform: uppercase;
-          font-weight: 600;
-          padding: 0.125rem 0.5rem;
-          border-radius: 0.25rem;
-        }
-        .status-passed {
-          color: var(--boxel-green, #16a34a);
-          background: #f0fdf4;
-        }
-        .status-failed {
-          color: var(--boxel-red, #dc2626);
-          background: #fef2f2;
-        }
-        .status-error {
-          color: var(--boxel-orange, #ea580c);
-          background: #fff7ed;
-        }
-        .status-running {
-          color: var(--boxel-blue, #2563eb);
-          background: #eff6ff;
-        }
-        .status-empty {
-          color: var(--boxel-400, #9ca3af);
-          background: #f9fafb;
+          letter-spacing: 0.06em;
+          color: var(--muted-foreground, var(--boxel-500));
         }
-        .summary {
-          font-size: 0.9rem;
-          color: var(--muted-foreground);
-        }
-        .error-message {
-          color: var(--boxel-red, #dc2626);
-          font-family: monospace;
-          font-size: 0.85rem;
-          white-space: pre-wrap;
+        .detail-groups {
+          display: grid;
+          gap: var(--boxel-sp-sm);
         }
-        .module-group {
-          border: 1px solid var(--boxel-200, #e5e7eb);
-          border-radius: 0.5rem;
-          padding: 0.75rem;
-          margin-bottom: 0.75rem;
+        .detail-group {
+          border: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 60%,
+              transparent
+            );
+          border-radius: var(--boxel-border-radius);
+          padding: var(--boxel-sp-sm);
         }
-        .module-has-errors {
-          border-color: var(--boxel-red, #dc2626);
+        .detail-group.has-errors {
+          border-color: color-mix(
+            in oklch,
+            oklch(55% 0.22 25) 50%,
+            transparent
+          );
         }
-        .module-group-header {
+        .detail-group-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          padding-bottom: 0.5rem;
-          border-bottom: 1px solid var(--boxel-200, #e5e7eb);
-          margin-bottom: 0.5rem;
+          gap: var(--boxel-sp-xs);
+          padding-bottom: var(--boxel-sp-xs);
+          border-bottom: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 50%,
+              transparent
+            );
+          margin-bottom: var(--boxel-sp-xs);
         }
-        .module-group-name {
+        .detail-group-name {
           font-weight: 600;
-          font-size: 0.9rem;
-          font-family: monospace;
-        }
-        .module-group-status {
-          font-size: 0.8rem;
-          color: var(--boxel-400, #9ca3af);
+          font-size: var(--boxel-font-size-sm);
+          font-family: var(--boxel-monospace-font-family, monospace);
+          word-break: break-all;
         }
-        .module-group-status.has-passes {
-          color: var(--boxel-green, #16a34a);
+        .group-status {
+          flex-shrink: 0;
+          font-size: var(--boxel-font-size-xs);
+          font-weight: 500;
+          color: var(--muted-foreground, var(--boxel-500));
         }
-        .module-group-status.has-errors {
-          color: var(--boxel-red, #dc2626);
+        .group-status.clean {
+          color: oklch(60% 0.17 150);
         }
-        .module-group-error {
-          padding: 0.5rem;
+        .group-status.errors {
+          color: oklch(55% 0.22 25);
         }
         .error-code-block {
-          color: var(--boxel-red, #dc2626);
-          background: var(--boxel-100, #f3f4f6);
-          border: 1px solid var(--boxel-200, #e5e7eb);
-          border-radius: 0.375rem;
-          padding: 0.75rem;
-          font-family: monospace;
-          font-size: 0.8rem;
+          margin: 0;
+          padding: var(--boxel-sp-sm);
+          border-radius: var(--boxel-border-radius);
+          background: color-mix(in oklch, oklch(55% 0.22 25) 8%, transparent);
+          color: oklch(55% 0.22 25);
+          font-family: var(--boxel-monospace-font-family, monospace);
+          font-size: var(--boxel-font-size-xs);
           white-space: pre-wrap;
           word-break: break-word;
           max-height: 15rem;
           overflow-y: auto;
-          margin: 0;
           line-height: 1.4;
         }
       </style>
diff --git a/packages/software-factory/realm/instantiate-result.gts b/packages/software-factory/realm/instantiate-result.gts
index 04dd818d55..4bce08fe2e 100644
--- a/packages/software-factory/realm/instantiate-result.gts
+++ b/packages/software-factory/realm/instantiate-result.gts
@@ -19,6 +19,7 @@ import {
   ResultFittedCard,
   type ResultMetaItem,
 } from './result-fitted-card.gts';
+import { ResultIsolatedCard } from './result-isolated-card.gts';
 
 import Box from '@cardstack/boxel-icons/box';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -214,181 +215,135 @@ export class InstantiateResult extends CardDef {
       return this.args.model.status;
     }
 
+    get titleText() {
+      return `Instantiate Run #${this.args.model.sequenceNumber ?? '?'}`;
+    }
+
     <template>
-      <article class='surface'>
-        <header>
-          <div class='header-row'>
-            <strong>InstantiateResult #{{@model.sequenceNumber}}</strong>
-            <span
-              class='status status-{{this.displayStatus}}'
-            >{{this.displayStatus}}</span>
-          </div>
-          <div class='summary'>
-            {{@model.cardsPassed}}/{{@model.cardsChecked}}
-            cards passed
-            {{#if @model.cardsWithErrors}}
-              ,
+      <ResultIsolatedCard
+        @title={{this.titleText}}
+        @status={{this.displayStatus}}
+        @emptyLabel='No Cards'
+        @durationMs={{@model.durationMs}}
+        @hasProject={{@model.project}}
+        @hasIssue={{@model.issue}}
+        @hasError={{@model.errorMessage}}
+      >
+        <:summary>
+          <span>{{@model.cardsPassed}}/{{@model.cardsChecked}}
+            cards passed{{#if @model.cardsWithErrors}},
               {{@model.cardsWithErrors}}
-              error(s)
-            {{/if}}
-            {{#if @model.durationMs}}
-              in
-              {{@model.durationMs}}ms
-            {{/if}}
-          </div>
-        </header>
-
-        {{#if @model.project}}
-          <section>
-            <h2>Project</h2>
-            <div class='linked-card'>
-              <@fields.project @format='embedded' />
-            </div>
-          </section>
-        {{/if}}
-
-        {{#if @model.issue}}
-          <section>
-            <h2>Issue</h2>
-            <div class='linked-card'>
-              <@fields.issue @format='embedded' />
-            </div>
-          </section>
-        {{/if}}
-
-        {{#if @model.errorMessage}}
-          <section>
-            <h2>Error</h2>
-            <p class='error-message'>{{@model.errorMessage}}</p>
-          </section>
-        {{/if}}
-
-        {{#if @model.cardResults.length}}
-          <section>
-            <h2>Card Results</h2>
-            {{#each @model.cardResults as |cardResult|}}
-              <div
-                class='card-group {{if cardResult.hasError "card-has-errors"}}'
-              >
-                <div class='card-group-header'>
-                  <span
-                    class='card-group-name'
-                  >{{cardResult.instancePath}}</span>
-                  {{#if cardResult.hasError}}
-                    <span class='card-group-status has-errors'>error</span>
-                  {{else}}
-                    <span class='card-group-status has-passes'>passed</span>
-                  {{/if}}
-                </div>
-                {{#if cardResult.error}}
-                  <div class='card-group-error'>
-                    <pre class='error-code-block'>{{cardResult.error}}</pre>
+              error(s){{/if}}</span>
+        </:summary>
+        <:project><@fields.project @format='embedded' /></:project>
+        <:issue><@fields.issue @format='embedded' /></:issue>
+        <:error>{{@model.errorMessage}}</:error>
+        <:details>
+          {{#if @model.cardResults.length}}
+            <section class='detail-section'>
+              <h2>Card Results</h2>
+              <div class='detail-groups'>
+                {{#each @model.cardResults as |cardResult|}}
+                  <div
+                    class='detail-group {{if cardResult.hasError "has-errors"}}'
+                  >
+                    <div class='detail-group-header'>
+                      <span
+                        class='detail-group-name'
+                      >{{cardResult.instancePath}}</span>
+                      {{#if cardResult.hasError}}
+                        <span class='group-status errors'>error</span>
+                      {{else}}
+                        <span class='group-status clean'>passed</span>
+                      {{/if}}
+                    </div>
+                    {{#if cardResult.error}}
+                      <pre class='error-code-block'>{{cardResult.error}}</pre>
+                    {{/if}}
                   </div>
-                {{/if}}
+                {{/each}}
               </div>
-            {{/each}}
-          </section>
-        {{/if}}
-      </article>
+            </section>
+          {{/if}}
+        </:details>
+      </ResultIsolatedCard>
       <style scoped>
-        .surface {
-          padding: 1.5rem;
+        .detail-section {
           display: grid;
-          gap: 1rem;
-        }
-        .linked-card {
-          margin-bottom: 0.5rem;
-        }
-        .header-row {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
+          gap: var(--boxel-sp-xs);
         }
-        .status {
-          font-size: 0.75rem;
+        .detail-section > h2 {
+          margin: 0;
+          font: 600 var(--boxel-font-sm);
           text-transform: uppercase;
-          font-weight: 600;
-          padding: 0.125rem 0.5rem;
-          border-radius: 0.25rem;
-        }
-        .status-passed {
-          color: var(--boxel-green, #16a34a);
-          background: #f0fdf4;
-        }
-        .status-failed {
-          color: var(--boxel-red, #dc2626);
-          background: #fef2f2;
-        }
-        .status-error {
-          color: var(--boxel-orange, #ea580c);
-          background: #fff7ed;
-        }
-        .status-running {
-          color: var(--boxel-blue, #2563eb);
-          background: #eff6ff;
-        }
-        .status-empty {
-          color: var(--boxel-400, #9ca3af);
-          background: #f9fafb;
+          letter-spacing: 0.06em;
+          color: var(--muted-foreground, var(--boxel-500));
         }
-        .summary {
-          font-size: 0.9rem;
-          color: var(--muted-foreground);
-        }
-        .error-message {
-          color: var(--boxel-red, #dc2626);
-          font-family: monospace;
-          font-size: 0.85rem;
-          white-space: pre-wrap;
+        .detail-groups {
+          display: grid;
+          gap: var(--boxel-sp-sm);
         }
-        .card-group {
-          border: 1px solid var(--boxel-200, #e5e7eb);
-          border-radius: 0.5rem;
-          padding: 0.75rem;
-          margin-bottom: 0.75rem;
+        .detail-group {
+          border: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 60%,
+              transparent
+            );
+          border-radius: var(--boxel-border-radius);
+          padding: var(--boxel-sp-sm);
         }
-        .card-has-errors {
-          border-color: var(--boxel-red, #dc2626);
+        .detail-group.has-errors {
+          border-color: color-mix(
+            in oklch,
+            oklch(55% 0.22 25) 50%,
+            transparent
+          );
         }
-        .card-group-header {
+        .detail-group-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          padding-bottom: 0.5rem;
-          border-bottom: 1px solid var(--boxel-200, #e5e7eb);
-          margin-bottom: 0.5rem;
+          gap: var(--boxel-sp-xs);
+          padding-bottom: var(--boxel-sp-xs);
+          border-bottom: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 50%,
+              transparent
+            );
+          margin-bottom: var(--boxel-sp-xs);
         }
-        .card-group-name {
+        .detail-group-name {
           font-weight: 600;
-          font-size: 0.9rem;
-          font-family: monospace;
-        }
-        .card-group-status {
-          font-size: 0.8rem;
-          color: var(--boxel-400, #9ca3af);
+          font-size: var(--boxel-font-size-sm);
+          font-family: var(--boxel-monospace-font-family, monospace);
+          word-break: break-all;
         }
-        .card-group-status.has-passes {
-          color: var(--boxel-green, #16a34a);
+        .group-status {
+          flex-shrink: 0;
+          font-size: var(--boxel-font-size-xs);
+          font-weight: 500;
+          color: var(--muted-foreground, var(--boxel-500));
         }
-        .card-group-status.has-errors {
-          color: var(--boxel-red, #dc2626);
+        .group-status.clean {
+          color: oklch(60% 0.17 150);
         }
-        .card-group-error {
-          padding: 0.5rem;
+        .group-status.errors {
+          color: oklch(55% 0.22 25);
         }
         .error-code-block {
-          color: var(--boxel-red, #dc2626);
-          background: var(--boxel-100, #f3f4f6);
-          border: 1px solid var(--boxel-200, #e5e7eb);
-          border-radius: 0.375rem;
-          padding: 0.75rem;
-          font-family: monospace;
-          font-size: 0.8rem;
+          margin: 0;
+          padding: var(--boxel-sp-sm);
+          border-radius: var(--boxel-border-radius);
+          background: color-mix(in oklch, oklch(55% 0.22 25) 8%, transparent);
+          color: oklch(55% 0.22 25);
+          font-family: var(--boxel-monospace-font-family, monospace);
+          font-size: var(--boxel-font-size-xs);
           white-space: pre-wrap;
           word-break: break-word;
           max-height: 15rem;
           overflow-y: auto;
-          margin: 0;
           line-height: 1.4;
         }
       </style>
diff --git a/packages/software-factory/realm/lint-result.gts b/packages/software-factory/realm/lint-result.gts
index 5f950b7204..e7f790d2d1 100644
--- a/packages/software-factory/realm/lint-result.gts
+++ b/packages/software-factory/realm/lint-result.gts
@@ -11,11 +11,13 @@ import StringField from 'https://cardstack.com/base/string';
 import NumberField from 'https://cardstack.com/base/number';
 import DateTimeField from 'https://cardstack.com/base/datetime';
 import enumField from 'https://cardstack.com/base/enum';
+import { eq } from '@cardstack/boxel-ui/helpers';
 import { Project, Issue } from './darkfactory.gts';
 import {
   ResultFittedCard,
   type ResultMetaItem,
 } from './result-fitted-card.gts';
+import { ResultIsolatedCard } from './result-isolated-card.gts';
 
 import ListChecks from '@cardstack/boxel-icons/list-checks';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -322,234 +324,196 @@ export class LintResult extends CardDef {
       return this.args.model.status;
     }
 
+    get titleText() {
+      return `Lint Run #${this.args.model.sequenceNumber ?? '?'}`;
+    }
+
     <template>
-      <article class='surface'>
-        <header>
-          <div class='header-row'>
-            <strong>LintResult #{{@model.sequenceNumber}}</strong>
-            <span
-              class='status status-{{this.displayStatus}}'
-            >{{this.displayStatus}}</span>
-          </div>
-          <div class='summary'>
-            {{@model.filesClean}}/{{@model.filesChecked}}
-            files clean
-            {{#if @model.totalErrors}}
-              ,
+      <ResultIsolatedCard
+        @title={{this.titleText}}
+        @status={{this.displayStatus}}
+        @emptyLabel='No Files'
+        @durationMs={{@model.durationMs}}
+        @hasProject={{@model.project}}
+        @hasIssue={{@model.issue}}
+        @hasError={{@model.errorMessage}}
+      >
+        <:summary>
+          <span>{{@model.filesClean}}/{{@model.filesChecked}}
+            files clean{{#if @model.totalErrors}},
               {{@model.totalErrors}}
-              error(s)
-            {{/if}}
-            {{#if @model.totalWarnings}}
-              ,
+              error(s){{/if}}{{#if @model.totalWarnings}},
               {{@model.totalWarnings}}
-              warning(s)
-            {{/if}}
-            {{#if @model.durationMs}}
-              in
-              {{@model.durationMs}}ms
-            {{/if}}
-          </div>
-        </header>
-
-        {{#if @model.project}}
-          <section>
-            <h2>Project</h2>
-            <div class='linked-card'>
-              <@fields.project @format='embedded' />
-            </div>
-          </section>
-        {{/if}}
-
-        {{#if @model.issue}}
-          <section>
-            <h2>Issue</h2>
-            <div class='linked-card'>
-              <@fields.issue @format='embedded' />
-            </div>
-          </section>
-        {{/if}}
-
-        {{#if @model.errorMessage}}
-          <section>
-            <h2>Error</h2>
-            <p class='error-message'>{{@model.errorMessage}}</p>
-          </section>
-        {{/if}}
-
-        {{#if @model.fileResults.length}}
-          <section>
-            <h2>File Results</h2>
-            {{#each @model.fileResults as |fileResult|}}
-              <div
-                class='file-group
-                  {{unless fileResult.passed "file-has-errors"}}'
-              >
-                <div class='file-group-header'>
-                  <span class='file-group-name'>{{fileResult.file}}</span>
-                  {{#if fileResult.passed}}
-                    <span class='file-group-status has-passes'>clean</span>
-                  {{else}}
-                    <span class='file-group-status has-errors'>
-                      {{fileResult.errorCount}}
-                      error(s)
-                      {{#if fileResult.warningCount}}
-                        ,
-                        {{fileResult.warningCount}}
-                        warning(s)
+              warning(s){{/if}}</span>
+        </:summary>
+        <:project><@fields.project @format='embedded' /></:project>
+        <:issue><@fields.issue @format='embedded' /></:issue>
+        <:error>{{@model.errorMessage}}</:error>
+        <:details>
+          {{#if @model.fileResults.length}}
+            <section class='detail-section'>
+              <h2>File Results</h2>
+              <div class='detail-groups'>
+                {{#each @model.fileResults as |fileResult|}}
+                  <div
+                    class='detail-group
+                      {{unless fileResult.passed "has-errors"}}'
+                  >
+                    <div class='detail-group-header'>
+                      <span class='detail-group-name'>{{fileResult.file}}</span>
+                      {{#if fileResult.passed}}
+                        <span class='group-status clean'>clean</span>
+                      {{else}}
+                        <span class='group-status errors'>
+                          {{fileResult.errorCount}}
+                          error(s)
+                          {{#if fileResult.warningCount}}
+                            ,
+                            {{fileResult.warningCount}}
+                            warning(s)
+                          {{/if}}
+                        </span>
                       {{/if}}
-                    </span>
-                  {{/if}}
-                </div>
-                {{#if fileResult.totalCount}}
-                  <div class='file-group-violations'>
-                    {{#each fileResult.violations as |violation|}}
-                      <div class='violation-item'>
-                        <div class='violation-item-row'>
-                          <span
-                            class='violation-severity severity-{{violation.severity}}'
-                            role='img'
-                            aria-label='{{violation.severity}}'
-                          >{{violation.severityIcon}}</span>
-                          <span
-                            class='violation-location'
-                          >{{violation.line}}:{{violation.column}}</span>
-                          <span
-                            class='violation-message'
-                          >{{violation.message}}</span>
-                          {{#if violation.rule}}
+                    </div>
+                    {{#if fileResult.totalCount}}
+                      <div class='violation-rows'>
+                        {{#each fileResult.violations as |violation|}}
+                          <div class='violation-row'>
+                            {{#if (eq violation.severity 'error')}}
+                              <CircleX
+                                class='sev-icon sev-error'
+                                width='14'
+                                height='14'
+                                aria-label='error'
+                              />
+                            {{else}}
+                              <CircleAlert
+                                class='sev-icon sev-warning'
+                                width='14'
+                                height='14'
+                                aria-label='warning'
+                              />
+                            {{/if}}
                             <span
-                              class='violation-rule'
-                            >[{{violation.rule}}]</span>
-                          {{/if}}
-                        </div>
+                              class='violation-location'
+                            >{{violation.line}}:{{violation.column}}</span>
+                            <span
+                              class='violation-message'
+                            >{{violation.message}}</span>
+                            {{#if violation.rule}}
+                              <span
+                                class='violation-rule'
+                              >[{{violation.rule}}]</span>
+                            {{/if}}
+                          </div>
+                        {{/each}}
                       </div>
-                    {{/each}}
+                    {{/if}}
                   </div>
-                {{/if}}
+                {{/each}}
               </div>
-            {{/each}}
-          </section>
-        {{/if}}
-      </article>
+            </section>
+          {{/if}}
+        </:details>
+      </ResultIsolatedCard>
       <style scoped>
-        .surface {
-          padding: 1.5rem;
+        .detail-section {
           display: grid;
-          gap: 1rem;
+          gap: var(--boxel-sp-xs);
         }
-        .linked-card {
-          margin-bottom: 0.5rem;
-        }
-        .header-row {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        .status {
-          font-size: 0.75rem;
+        .detail-section > h2 {
+          margin: 0;
+          font: 600 var(--boxel-font-sm);
           text-transform: uppercase;
-          font-weight: 600;
-          padding: 0.125rem 0.5rem;
-          border-radius: 0.25rem;
-        }
-        .status-passed {
-          color: var(--boxel-green, #16a34a);
-          background: #f0fdf4;
-        }
-        .status-failed {
-          color: var(--boxel-red, #dc2626);
-          background: #fef2f2;
-        }
-        .status-error {
-          color: var(--boxel-orange, #ea580c);
-          background: #fff7ed;
-        }
-        .status-running {
-          color: var(--boxel-blue, #2563eb);
-          background: #eff6ff;
-        }
-        .status-empty {
-          color: var(--boxel-400, #9ca3af);
-          background: #f9fafb;
-        }
-        .summary {
-          font-size: 0.9rem;
-          color: var(--muted-foreground);
-        }
-        .error-message {
-          color: var(--boxel-red, #dc2626);
-          font-family: monospace;
-          font-size: 0.85rem;
-          white-space: pre-wrap;
-        }
-        .file-group {
-          border: 1px solid var(--boxel-200, #e5e7eb);
-          border-radius: 0.5rem;
-          padding: 0.75rem;
-          margin-bottom: 0.75rem;
+          letter-spacing: 0.06em;
+          color: var(--muted-foreground, var(--boxel-500));
         }
-        .file-has-errors {
-          border-color: var(--boxel-red, #dc2626);
-        }
-        .file-group-header {
+        .detail-groups {
+          display: grid;
+          gap: var(--boxel-sp-sm);
+        }
+        .detail-group {
+          border: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 60%,
+              transparent
+            );
+          border-radius: var(--boxel-border-radius);
+          padding: var(--boxel-sp-sm);
+        }
+        .detail-group.has-errors {
+          border-color: color-mix(
+            in oklch,
+            oklch(55% 0.22 25) 50%,
+            transparent
+          );
+        }
+        .detail-group-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          padding-bottom: 0.5rem;
-          border-bottom: 1px solid var(--boxel-200, #e5e7eb);
-          margin-bottom: 0.5rem;
-        }
-        .file-group-name {
+          gap: var(--boxel-sp-xs);
+          padding-bottom: var(--boxel-sp-xs);
+          border-bottom: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 50%,
+              transparent
+            );
+          margin-bottom: var(--boxel-sp-xs);
+        }
+        .detail-group-name {
           font-weight: 600;
-          font-size: 0.9rem;
-          font-family: monospace;
+          font-size: var(--boxel-font-size-sm);
+          font-family: var(--boxel-monospace-font-family, monospace);
+          word-break: break-all;
         }
-        .file-group-status {
-          font-size: 0.8rem;
-          color: var(--boxel-400, #9ca3af);
+        .group-status {
+          flex-shrink: 0;
+          font-size: var(--boxel-font-size-xs);
+          font-weight: 500;
+          color: var(--muted-foreground, var(--boxel-500));
         }
-        .file-group-status.has-passes {
-          color: var(--boxel-green, #16a34a);
+        .group-status.clean {
+          color: oklch(60% 0.17 150);
         }
-        .file-group-status.has-errors {
-          color: var(--boxel-red, #dc2626);
+        .group-status.errors {
+          color: oklch(55% 0.22 25);
         }
-        .file-group-violations {
+        .violation-rows {
           display: grid;
-          gap: 0.25rem;
+          gap: var(--boxel-sp-4xs);
         }
-        .violation-item-row {
+        .violation-row {
           display: flex;
           align-items: baseline;
-          gap: 0.5rem;
-          padding: 0.25rem 0;
-          font-size: 0.85rem;
+          gap: var(--boxel-sp-xs);
+          font-size: var(--boxel-font-size-sm);
         }
-        .violation-severity {
-          font-weight: bold;
-          width: 1.25rem;
-          text-align: center;
+        .sev-icon {
           flex-shrink: 0;
+          align-self: center;
         }
-        .violation-severity.severity-error {
-          color: var(--boxel-red, #dc2626);
+        .sev-error {
+          color: oklch(55% 0.22 25);
         }
-        .violation-severity.severity-warning {
-          color: var(--boxel-orange, #ea580c);
+        .sev-warning {
+          color: oklch(68% 0.17 55);
         }
         .violation-location {
-          color: var(--muted-foreground);
-          font-family: monospace;
-          font-size: 0.8rem;
           flex-shrink: 0;
+          color: var(--muted-foreground, var(--boxel-500));
+          font-family: var(--boxel-monospace-font-family, monospace);
+          font-size: var(--boxel-font-size-xs);
         }
         .violation-message {
           flex: 1;
         }
         .violation-rule {
-          color: var(--boxel-400, #9ca3af);
-          font-size: 0.75rem;
           flex-shrink: 0;
+          color: var(--muted-foreground, var(--boxel-500));
+          font-size: var(--boxel-font-size-xs);
         }
       </style>
     </template>
diff --git a/packages/software-factory/realm/overview.gts b/packages/software-factory/realm/overview.gts
index 472a2e681d..9930d7f15e 100644
--- a/packages/software-factory/realm/overview.gts
+++ b/packages/software-factory/realm/overview.gts
@@ -39,14 +39,35 @@ import type { RealmDashboard } from './realm-dashboard.gts';
 const importMetaUrl: string = import.meta.url;
 
 // The five validation-result card types the factory writes under
-// `Validations/` after every agent turn. A `type` filter matches each
-// card and its subclasses, so the tab surfaces the whole pipeline.
-const VALIDATION_TYPES = [
-  codeRef(importMetaUrl, './parse-result', 'ParseResult'),
-  codeRef(importMetaUrl, './lint-result', 'LintResult'),
-  codeRef(importMetaUrl, './eval-result', 'EvalResult'),
-  codeRef(importMetaUrl, './instantiate-result', 'InstantiateResult'),
-  codeRef(importMetaUrl, './test-results', 'TestRun'),
+// `Validations/` after every agent turn, in pipeline order. A `type` filter
+// matches each card and its subclasses, so the tab surfaces the whole
+// pipeline; the Validation Runs widget renders one group per type.
+const VALIDATION_TYPE_GROUPS = [
+  {
+    key: 'parse',
+    label: 'Parse',
+    ref: codeRef(importMetaUrl, './parse-result', 'ParseResult'),
+  },
+  {
+    key: 'lint',
+    label: 'Lint',
+    ref: codeRef(importMetaUrl, './lint-result', 'LintResult'),
+  },
+  {
+    key: 'eval',
+    label: 'Eval',
+    ref: codeRef(importMetaUrl, './eval-result', 'EvalResult'),
+  },
+  {
+    key: 'instantiate',
+    label: 'Instantiate',
+    ref: codeRef(importMetaUrl, './instantiate-result', 'InstantiateResult'),
+  },
+  {
+    key: 'test',
+    label: 'Tests',
+    ref: codeRef(importMetaUrl, './test-results', 'TestRun'),
+  },
 ];
 
 const KNOWLEDGE_TYPE = codeRef(
@@ -176,20 +197,21 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
     return url ? [url.href] : [];
   }
 
-  // Validation results link *to* an issue, so to group them we run one
-  // query per issue. Each of the five result types has its own `issue`
-  // field, so the `issue.id` constraint is scoped per type via `on`.
-  validationQueryForIssue = (
-    issueId: string | undefined,
+  get validationTypeGroups() {
+    return VALIDATION_TYPE_GROUPS;
+  }
+
+  // One query per validation type, newest run first. Grouping by type keeps
+  // the whole pipeline (parse → lint → eval → instantiate → test) legible at a
+  // glance; each result card already names its issue, so issue context isn't
+  // lost by dropping the per-issue grouping.
+  validationQueryForType = (
+    ref: (typeof VALIDATION_TYPE_GROUPS)[number]['ref'],
   ): SearchEntryWireQuery => {
     return {
       ...searchEntryWireQueryFromQuery({
-        filter: {
-          any: VALIDATION_TYPES.map((ref) => ({
-            on: ref,
-            eq: { 'issue.id': issueId ?? '' },
-          })),
-        },
+        filter: { type: ref },
+        sort: [{ by: 'sequenceNumber', on: ref, direction: 'desc' }],
       }),
       realms: this.validationRealms,
     };
@@ -571,18 +593,20 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
           <section class='widget'>
             <h3 class='widget-title'>Validation Runs</h3>
             {{#if this.validationRealms.length}}
-              {{#each this.issues key='id' as |issue|}}
+              {{#each this.validationTypeGroups key='key' as |group|}}
                 <div class='validation-group'>
                   <div class='validation-group-head'>
-                    <span class='issue-id'>{{issue.issueId}}</span>
-                    <span class='issue-title'>{{issue.cardTitle}}</span>
+                    <span
+                      class='validation-type'
+                      data-test-validation-type={{group.key}}
+                    >{{group.label}}</span>
                   </div>
                   {{#let
                     (component @context.searchResultsComponent)
                     as |SearchResults|
                   }}
                     <SearchResults
-                      @query={{this.validationQueryForIssue issue.id}}
+                      @query={{this.validationQueryForType group.ref}}
                       @mode='none'
                       as |results|
                     >
@@ -602,8 +626,6 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
                     </SearchResults>
                   {{/let}}
                 </div>
-              {{else}}
-                <p class='empty-state'>No issues yet.</p>
               {{/each}}
             {{else}}
               <p class='empty-state'>Realm not resolved — open this card from
@@ -773,14 +795,18 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
         gap: var(--boxel-sp-xs);
         margin-bottom: var(--boxel-sp-xs);
       }
+      .validation-type {
+        font-size: 0.8125rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        color: var(--muted-foreground, var(--boxel-500));
+      }
       .validation-list {
         display: flex;
         flex-direction: column;
         gap: var(--boxel-sp-xs);
       }
-      .validation-row {
-        min-height: 4rem;
-      }
       .validation-empty {
         margin: 0;
         font-size: 0.75rem;
diff --git a/packages/software-factory/realm/parse-result.gts b/packages/software-factory/realm/parse-result.gts
index 24fd00d099..e2bbf5d920 100644
--- a/packages/software-factory/realm/parse-result.gts
+++ b/packages/software-factory/realm/parse-result.gts
@@ -16,6 +16,7 @@ import {
   ResultFittedCard,
   type ResultMetaItem,
 } from './result-fitted-card.gts';
+import { ResultIsolatedCard } from './result-isolated-card.gts';
 
 import FileCode from '@cardstack/boxel-icons/file-code';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -263,206 +264,168 @@ export class ParseResult extends CardDef {
       return this.args.model.status;
     }
 
+    get titleText() {
+      return `Parse Run #${this.args.model.sequenceNumber ?? '?'}`;
+    }
+
     <template>
-      <article class='surface'>
-        <header>
-          <div class='header-row'>
-            <strong>ParseResult #{{@model.sequenceNumber}}</strong>
-            <span
-              class='status status-{{this.displayStatus}}'
-            >{{this.displayStatus}}</span>
-          </div>
-          <div class='summary'>
-            {{@model.filesClean}}/{{@model.filesChecked}}
-            files valid
-            {{#if @model.totalErrors}}
-              ,
+      <ResultIsolatedCard
+        @title={{this.titleText}}
+        @status={{this.displayStatus}}
+        @emptyLabel='No Files'
+        @durationMs={{@model.durationMs}}
+        @hasProject={{@model.project}}
+        @hasIssue={{@model.issue}}
+        @hasError={{@model.errorMessage}}
+      >
+        <:summary>
+          <span>{{@model.filesClean}}/{{@model.filesChecked}}
+            files valid{{#if @model.totalErrors}},
               {{@model.totalErrors}}
-              error(s)
-            {{/if}}
-            {{#if @model.durationMs}}
-              in
-              {{@model.durationMs}}ms
-            {{/if}}
-          </div>
-        </header>
-
-        {{#if @model.project}}
-          <section>
-            <h2>Project</h2>
-            <div class='linked-card'>
-              <@fields.project @format='embedded' />
-            </div>
-          </section>
-        {{/if}}
-
-        {{#if @model.issue}}
-          <section>
-            <h2>Issue</h2>
-            <div class='linked-card'>
-              <@fields.issue @format='embedded' />
-            </div>
-          </section>
-        {{/if}}
-
-        {{#if @model.errorMessage}}
-          <section>
-            <h2>Error</h2>
-            <p class='error-message'>{{@model.errorMessage}}</p>
-          </section>
-        {{/if}}
-
-        {{#if @model.fileResults.length}}
-          <section>
-            <h2>File Results</h2>
-            {{#each @model.fileResults as |fileResult|}}
-              <div
-                class='file-group
-                  {{unless fileResult.passed "file-has-errors"}}'
-              >
-                <div class='file-group-header'>
-                  <span
-                    class='file-group-name'
-                  >{{fileResult.displayFile}}</span>
-                  {{#if fileResult.passed}}
-                    <span class='file-group-status has-passes'>valid</span>
-                  {{else}}
-                    <span class='file-group-status has-errors'>
-                      {{fileResult.errorCount}}
-                      error(s)
-                    </span>
-                  {{/if}}
-                </div>
-                {{#if fileResult.errorCount}}
-                  <div class='file-group-errors'>
-                    {{#each fileResult.errors as |error|}}
-                      <div class='error-item'>
-                        <div class='error-item-row'>
-                          <span class='error-icon'>✗</span>
-                          {{#if error.line}}
+              error(s){{/if}}</span>
+        </:summary>
+        <:project><@fields.project @format='embedded' /></:project>
+        <:issue><@fields.issue @format='embedded' /></:issue>
+        <:error>{{@model.errorMessage}}</:error>
+        <:details>
+          {{#if @model.fileResults.length}}
+            <section class='detail-section'>
+              <h2>File Results</h2>
+              <div class='detail-groups'>
+                {{#each @model.fileResults as |fileResult|}}
+                  <div
+                    class='detail-group
+                      {{unless fileResult.passed "has-errors"}}'
+                  >
+                    <div class='detail-group-header'>
+                      <span
+                        class='detail-group-name'
+                      >{{fileResult.displayFile}}</span>
+                      {{#if fileResult.passed}}
+                        <span class='group-status clean'>valid</span>
+                      {{else}}
+                        <span class='group-status errors'>
+                          {{fileResult.errorCount}}
+                          error(s)
+                        </span>
+                      {{/if}}
+                    </div>
+                    {{#if fileResult.errorCount}}
+                      <div class='error-rows'>
+                        {{#each fileResult.errors as |error|}}
+                          <div class='error-row'>
+                            <CircleX
+                              class='sev-icon sev-error'
+                              width='14'
+                              height='14'
+                              aria-label='error'
+                            />
+                            {{#if error.line}}
+                              <span
+                                class='error-location'
+                              >{{error.line}}:{{error.column}}</span>
+                            {{/if}}
                             <span
-                              class='error-location'
-                            >{{error.line}}:{{error.column}}</span>
-                          {{/if}}
-                          <span
-                            class='error-message-text'
-                          >{{error.message}}</span>
-                        </div>
+                              class='error-message-text'
+                            >{{error.message}}</span>
+                          </div>
+                        {{/each}}
                       </div>
-                    {{/each}}
+                    {{/if}}
                   </div>
-                {{/if}}
+                {{/each}}
               </div>
-            {{/each}}
-          </section>
-        {{/if}}
-      </article>
+            </section>
+          {{/if}}
+        </:details>
+      </ResultIsolatedCard>
       <style scoped>
-        .surface {
-          padding: 1.5rem;
+        .detail-section {
           display: grid;
-          gap: 1rem;
+          gap: var(--boxel-sp-xs);
         }
-        .linked-card {
-          margin-bottom: 0.5rem;
-        }
-        .header-row {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        .status {
-          font-size: 0.75rem;
+        .detail-section > h2 {
+          margin: 0;
+          font: 600 var(--boxel-font-sm);
           text-transform: uppercase;
-          font-weight: 600;
-          padding: 0.125rem 0.5rem;
-          border-radius: 0.25rem;
-        }
-        .status-passed {
-          color: var(--boxel-green, #16a34a);
-          background: #f0fdf4;
-        }
-        .status-failed {
-          color: var(--boxel-red, #dc2626);
-          background: #fef2f2;
-        }
-        .status-error {
-          color: var(--boxel-orange, #ea580c);
-          background: #fff7ed;
+          letter-spacing: 0.06em;
+          color: var(--muted-foreground, var(--boxel-500));
         }
-        .status-running {
-          color: var(--boxel-blue, #2563eb);
-          background: #eff6ff;
-        }
-        .status-empty {
-          color: var(--boxel-400, #9ca3af);
-          background: #f9fafb;
-        }
-        .summary {
-          font-size: 0.9rem;
-          color: var(--muted-foreground);
-        }
-        .error-message {
-          color: var(--boxel-red, #dc2626);
-          font-family: monospace;
-          font-size: 0.85rem;
-          white-space: pre-wrap;
-        }
-        .file-group {
-          border: 1px solid var(--boxel-200, #e5e7eb);
-          border-radius: 0.5rem;
-          padding: 0.75rem;
-          margin-bottom: 0.75rem;
-        }
-        .file-has-errors {
-          border-color: var(--boxel-red, #dc2626);
-        }
-        .file-group-header {
+        .detail-groups {
+          display: grid;
+          gap: var(--boxel-sp-sm);
+        }
+        .detail-group {
+          border: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 60%,
+              transparent
+            );
+          border-radius: var(--boxel-border-radius);
+          padding: var(--boxel-sp-sm);
+        }
+        .detail-group.has-errors {
+          border-color: color-mix(
+            in oklch,
+            oklch(55% 0.22 25) 50%,
+            transparent
+          );
+        }
+        .detail-group-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          padding-bottom: 0.5rem;
-          border-bottom: 1px solid var(--boxel-200, #e5e7eb);
-          margin-bottom: 0.5rem;
-        }
-        .file-group-name {
+          gap: var(--boxel-sp-xs);
+          padding-bottom: var(--boxel-sp-xs);
+          border-bottom: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 50%,
+              transparent
+            );
+          margin-bottom: var(--boxel-sp-xs);
+        }
+        .detail-group-name {
           font-weight: 600;
-          font-size: 0.9rem;
-          font-family: monospace;
+          font-size: var(--boxel-font-size-sm);
+          font-family: var(--boxel-monospace-font-family, monospace);
+          word-break: break-all;
         }
-        .file-group-status {
-          font-size: 0.8rem;
-          color: var(--boxel-400, #9ca3af);
+        .group-status {
+          flex-shrink: 0;
+          font-size: var(--boxel-font-size-xs);
+          font-weight: 500;
+          color: var(--muted-foreground, var(--boxel-500));
         }
-        .file-group-status.has-passes {
-          color: var(--boxel-green, #16a34a);
+        .group-status.clean {
+          color: oklch(60% 0.17 150);
         }
-        .file-group-status.has-errors {
-          color: var(--boxel-red, #dc2626);
+        .group-status.errors {
+          color: oklch(55% 0.22 25);
         }
-        .file-group-errors {
+        .error-rows {
           display: grid;
-          gap: 0.25rem;
+          gap: var(--boxel-sp-4xs);
         }
-        .error-item-row {
+        .error-row {
           display: flex;
           align-items: baseline;
-          gap: 0.5rem;
-          padding: 0.25rem 0;
-          font-size: 0.85rem;
+          gap: var(--boxel-sp-xs);
+          font-size: var(--boxel-font-size-sm);
         }
-        .error-icon {
-          font-weight: bold;
-          width: 1.25rem;
-          text-align: center;
+        .sev-icon {
           flex-shrink: 0;
-          color: var(--boxel-red, #dc2626);
+          align-self: center;
+        }
+        .sev-error {
+          color: oklch(55% 0.22 25);
         }
         .error-location {
-          color: var(--muted-foreground);
-          font-family: monospace;
-          font-size: 0.8rem;
           flex-shrink: 0;
+          color: var(--muted-foreground, var(--boxel-500));
+          font-family: var(--boxel-monospace-font-family, monospace);
+          font-size: var(--boxel-font-size-xs);
         }
         .error-message-text {
           flex: 1;
diff --git a/packages/software-factory/realm/result-fitted-card.gts b/packages/software-factory/realm/result-fitted-card.gts
index 84a633e498..31c64e663e 100644
--- a/packages/software-factory/realm/result-fitted-card.gts
+++ b/packages/software-factory/realm/result-fitted-card.gts
@@ -14,6 +14,41 @@ export interface ResultMetaItem {
   tone?: ResultMetaTone;
 }
 
+// Shared status → presentation mapping, used by both the fitted and isolated
+// result views. `status` is the already-resolved display status, including the
+// synthetic 'empty' value.
+export function resultStatusLabel(status?: string, emptyLabel?: string) {
+  switch (status) {
+    case 'passed':
+      return 'Passed';
+    case 'failed':
+      return 'Failed';
+    case 'error':
+      return 'Error';
+    case 'running':
+      return 'Running';
+    case 'empty':
+      return emptyLabel ?? 'Empty';
+    default:
+      return 'Unknown';
+  }
+}
+
+export function resultStatusColor(status?: string) {
+  switch (status) {
+    case 'passed':
+      return 'oklch(60% 0.17 150)';
+    case 'failed':
+      return 'oklch(55% 0.22 25)';
+    case 'error':
+      return 'oklch(68% 0.17 55)';
+    case 'running':
+      return 'oklch(60% 0.16 250)';
+    default:
+      return 'var(--muted-foreground, var(--boxel-500))';
+  }
+}
+
 interface Signature {
   Args: {
     // Eyebrow icon and label, rendered as "<label> #<sequenceNumber>".
@@ -35,35 +70,11 @@ interface Signature {
 
 export class ResultFittedCard extends GlimmerComponent<Signature> {
   get statusLabel() {
-    switch (this.args.status) {
-      case 'passed':
-        return 'Passed';
-      case 'failed':
-        return 'Failed';
-      case 'error':
-        return 'Error';
-      case 'running':
-        return 'Running';
-      case 'empty':
-        return this.args.emptyLabel ?? 'Empty';
-      default:
-        return 'Unknown';
-    }
+    return resultStatusLabel(this.args.status, this.args.emptyLabel);
   }
 
   get statusColor() {
-    switch (this.args.status) {
-      case 'passed':
-        return 'oklch(60% 0.17 150)';
-      case 'failed':
-        return 'oklch(55% 0.22 25)';
-      case 'error':
-        return 'oklch(68% 0.17 55)';
-      case 'running':
-        return 'oklch(60% 0.16 250)';
-      default:
-        return 'var(--muted-foreground, var(--boxel-500))';
-    }
+    return resultStatusColor(this.args.status);
   }
 
   <template>
@@ -181,10 +192,12 @@ export class ResultFittedCard extends GlimmerComponent<Signature> {
       .meta-muted {
         color: var(--muted-foreground, var(--boxel-500));
       }
-      /* Shrink the title in very short strips */
+      /* Shrink the title to a single line in very short strips */
       @container fitted-card (height < 65px) {
         .result-fitted {
           --fc-title-font-size: var(--boxel-font-size-xs);
+          --fc-title-line-clamp: 1;
+          --fc-content-padding: 0 var(--boxel-sp-4xs);
         }
       }
       /* Show the status badge in the top-right on wide, short badge layouts */
diff --git a/packages/software-factory/realm/result-isolated-card.gts b/packages/software-factory/realm/result-isolated-card.gts
new file mode 100644
index 0000000000..39234cc171
--- /dev/null
+++ b/packages/software-factory/realm/result-isolated-card.gts
@@ -0,0 +1,153 @@
+import GlimmerComponent from '@glimmer/component';
+import { StatusPill } from './status-pill.gts';
+import { resultStatusColor, resultStatusLabel } from './result-fitted-card.gts';
+import Clock from '@cardstack/boxel-icons/clock';
+
+interface Signature {
+  Args: {
+    title: string;
+    // Already-resolved display status, including the synthetic 'empty' value.
+    status?: string;
+    // Label shown for the 'empty' status (e.g. "No Files").
+    emptyLabel?: string;
+    durationMs?: number;
+    // Gate the optional sections; the matching block supplies the content.
+    hasProject?: unknown;
+    hasIssue?: unknown;
+    hasError?: unknown;
+  };
+  Blocks: {
+    summary: [];
+    project: [];
+    issue: [];
+    error: [];
+    details: [];
+  };
+  Element: HTMLElement;
+}
+
+export class ResultIsolatedCard extends GlimmerComponent<Signature> {
+  get statusLabel() {
+    return resultStatusLabel(this.args.status, this.args.emptyLabel);
+  }
+
+  get statusColor() {
+    return resultStatusColor(this.args.status);
+  }
+
+  <template>
+    <article class='result-surface' ...attributes>
+      <header class='result-header'>
+        <div class='header-row'>
+          <h1 class='result-title'>{{@title}}</h1>
+          <StatusPill class='status-pill' @color={{this.statusColor}}>
+            {{this.statusLabel}}
+          </StatusPill>
+        </div>
+        <div class='result-summary'>
+          {{yield to='summary'}}
+          {{#if @durationMs}}
+            <span class='result-duration'>
+              <Clock
+                width='13'
+                height='13'
+                aria-hidden='true'
+              />{{@durationMs}}ms
+            </span>
+          {{/if}}
+        </div>
+      </header>
+
+      {{#if @hasProject}}
+        <section class='result-section'>
+          <h2>Project</h2>
+          <div class='linked-card'>{{yield to='project'}}</div>
+        </section>
+      {{/if}}
+
+      {{#if @hasIssue}}
+        <section class='result-section'>
+          <h2>Issue</h2>
+          <div class='linked-card'>{{yield to='issue'}}</div>
+        </section>
+      {{/if}}
+
+      {{#if @hasError}}
+        <section class='result-section'>
+          <h2>Error</h2>
+          <pre class='result-error'>{{yield to='error'}}</pre>
+        </section>
+      {{/if}}
+
+      {{yield to='details'}}
+    </article>
+    <style scoped>
+      .result-surface {
+        height: 100%;
+        overflow-y: auto;
+        padding: var(--boxel-sp-lg);
+        display: grid;
+        gap: var(--boxel-sp);
+        align-content: start;
+      }
+      .result-header {
+        display: grid;
+        gap: var(--boxel-sp-xs);
+      }
+      .header-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--boxel-sp-sm);
+      }
+      .result-title {
+        margin: 0;
+        font: 600 var(--boxel-font-lg);
+        letter-spacing: var(--boxel-lsp-sm);
+      }
+      .status-pill {
+        flex-shrink: 0;
+      }
+      .result-summary {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--boxel-sp-sm);
+        font-size: var(--boxel-font-size-sm);
+        color: var(--muted-foreground, var(--boxel-500));
+      }
+      .result-duration {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.3em;
+        flex-shrink: 0;
+      }
+      .result-section {
+        display: grid;
+        gap: var(--boxel-sp-xs);
+      }
+      .result-section > h2 {
+        margin: 0;
+        font: 600 var(--boxel-font-sm);
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        color: var(--muted-foreground, var(--boxel-500));
+      }
+      .linked-card {
+        display: grid;
+      }
+      .result-error {
+        margin: 0;
+        padding: var(--boxel-sp-sm);
+        border-radius: var(--boxel-border-radius);
+        background: color-mix(in oklch, oklch(55% 0.22 25) 8%, transparent);
+        color: oklch(55% 0.22 25);
+        font-family: var(--boxel-monospace-font-family, monospace);
+        font-size: var(--boxel-font-size-sm);
+        white-space: pre-wrap;
+        word-break: break-word;
+        overflow-x: auto;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/software-factory/realm/test-results.gts b/packages/software-factory/realm/test-results.gts
index 086a991511..e713b52f0d 100644
--- a/packages/software-factory/realm/test-results.gts
+++ b/packages/software-factory/realm/test-results.gts
@@ -12,16 +12,20 @@ import NumberField from 'https://cardstack.com/base/number';
 import DateTimeField from 'https://cardstack.com/base/datetime';
 import CodeRefField from 'https://cardstack.com/base/code-ref';
 import enumField from 'https://cardstack.com/base/enum';
+import { eq } from '@cardstack/boxel-ui/helpers';
 import { Project, Issue } from './darkfactory.gts';
 import {
   ResultFittedCard,
   type ResultMetaItem,
 } from './result-fitted-card.gts';
+import { ResultIsolatedCard } from './result-isolated-card.gts';
 
 import FlaskConical from '@cardstack/boxel-icons/flask-conical';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
 import CircleX from '@cardstack/boxel-icons/circle-x';
+import CircleAlert from '@cardstack/boxel-icons/circle-alert';
 import CircleMinus from '@cardstack/boxel-icons/circle-minus';
+import CircleDashed from '@cardstack/boxel-icons/circle-dashed';
 
 export const TestRunStatusField = enumField(StringField, {
   options: [
@@ -344,268 +348,252 @@ export class TestRun extends CardDef {
       return this.args.model.status;
     }
 
-    <template>
-      <article class='surface'>
-        <header>
-          <div class='header-row'>
-            <strong>TestRun #{{@model.sequenceNumber}}</strong>
-            <span
-              class='status status-{{this.displayStatus}}'
-            >{{this.displayStatus}}</span>
-          </div>
-          <div class='summary'>
-            {{@model.passedCount}}/{{this.total}}
-            passed
-            {{#if @model.skippedCount}}
-              <span class='skipped-label'>
-                ({{@model.skippedCount}}
-                skipped)
-              </span>
-            {{/if}}
-            {{#if @model.durationMs}}
-              in
-              {{@model.durationMs}}ms
-            {{/if}}
-          </div>
-        </header>
-
-        {{#if @model.project}}
-          <section>
-            <h2>Project</h2>
-            <div class='linked-card'>
-              <@fields.project @format='embedded' />
-            </div>
-          </section>
-        {{/if}}
-
-        {{#if @model.issue}}
-          <section>
-            <h2>Issue</h2>
-            <div class='linked-card'>
-              <@fields.issue @format='embedded' />
-            </div>
-          </section>
-        {{/if}}
-
-        {{#if @model.errorMessage}}
-          <section>
-            <h2>Error</h2>
-            <p class='error-message'>{{@model.errorMessage}}</p>
-          </section>
-        {{/if}}
+    get titleText() {
+      return `Test Run #${this.args.model.sequenceNumber ?? '?'}`;
+    }
 
-        {{#if @model.moduleResults.length}}
-          <section>
-            <h2>Test Results</h2>
-            {{#each @model.moduleResults as |moduleResult|}}
-              <div
-                class='module-group
-                  {{if moduleResult.failedCount "module-has-failures"}}'
-              >
-                <div class='module-group-header'>
-                  <span
-                    class='module-group-name'
-                  >{{moduleResult.moduleName}}</span>
-                  {{#if moduleResult.isComplete}}
-                    <span
-                      class='module-group-counts
-                        {{if
-                          moduleResult.failedCount
-                          "has-failures"
-                          (if moduleResult.passedCount "has-passes" "empty")
-                        }}'
-                    >
-                      {{#if moduleResult.failedCount}}
-                        {{moduleResult.passedCount}}
-                        passed,
-                        {{moduleResult.failedCount}}
-                        failed
-                      {{else}}
-                        {{moduleResult.passedCount}}/{{moduleResult.totalCount}}
-                        passed
-                      {{/if}}
-                      {{#if moduleResult.skippedCount}}
-                        <span class='skipped-label'>
-                          ({{moduleResult.skippedCount}}
-                          skipped)
-                        </span>
-                      {{/if}}
-                    </span>
-                  {{else}}
-                    <span class='module-group-counts running'>running...</span>
-                  {{/if}}
-                </div>
-                <div class='module-group-tests'>
-                  {{#each moduleResult.results as |result|}}
-                    <div class='test-item'>
-                      <div class='test-item-row'>
+    <template>
+      <ResultIsolatedCard
+        @title={{this.titleText}}
+        @status={{this.displayStatus}}
+        @emptyLabel='No Tests'
+        @durationMs={{@model.durationMs}}
+        @hasProject={{@model.project}}
+        @hasIssue={{@model.issue}}
+        @hasError={{@model.errorMessage}}
+      >
+        <:summary>
+          <span>{{@model.passedCount}}/{{this.total}}
+            passed{{#if @model.skippedCount}}
+              <span class='skipped'>({{@model.skippedCount}} skipped)</span>
+            {{/if}}</span>
+        </:summary>
+        <:project><@fields.project @format='embedded' /></:project>
+        <:issue><@fields.issue @format='embedded' /></:issue>
+        <:error>{{@model.errorMessage}}</:error>
+        <:details>
+          {{#if @model.moduleResults.length}}
+            <section class='detail-section'>
+              <h2>Test Results</h2>
+              <div class='detail-groups'>
+                {{#each @model.moduleResults as |moduleResult|}}
+                  <div
+                    class='detail-group
+                      {{if moduleResult.failedCount "has-errors"}}'
+                  >
+                    <div class='detail-group-header'>
+                      <span
+                        class='detail-group-name'
+                      >{{moduleResult.moduleName}}</span>
+                      {{#if moduleResult.isComplete}}
                         <span
-                          class='test-status-icon status-{{result.status}}'
-                          role='img'
-                          aria-label='{{result.status}}'
-                        >{{result.statusIcon}}</span>
-                        <span class='test-item-name'>{{result.testName}}</span>
-                        {{#if result.durationMs}}
-                          <span
-                            class='test-item-duration'
-                          >{{result.durationMs}}ms</span>
-                        {{/if}}
-                      </div>
-                      {{#if result.message}}
-                        <pre class='failure-message'>{{result.message}}</pre>
-                      {{/if}}
-                      {{#if result.stackTrace}}
-                        <pre class='failure-stack'>{{result.stackTrace}}</pre>
+                          class='group-status
+                            {{if
+                              moduleResult.failedCount
+                              "errors"
+                              (if moduleResult.passedCount "clean" "muted")
+                            }}'
+                        >
+                          {{#if moduleResult.failedCount}}
+                            {{moduleResult.passedCount}}
+                            passed,
+                            {{moduleResult.failedCount}}
+                            failed
+                          {{else}}
+                            {{moduleResult.passedCount}}/{{moduleResult.totalCount}}
+                            passed
+                          {{/if}}
+                          {{#if moduleResult.skippedCount}}
+                            ({{moduleResult.skippedCount}}
+                            skipped)
+                          {{/if}}
+                        </span>
+                      {{else}}
+                        <span class='group-status running'>running…</span>
                       {{/if}}
                     </div>
-                  {{/each}}
-                </div>
+                    <div class='test-rows'>
+                      {{#each moduleResult.results as |result|}}
+                        <div class='test-row'>
+                          <div class='test-row-main'>
+                            {{#if (eq result.status 'passed')}}
+                              <CircleCheck
+                                class='test-icon icon-passed'
+                                width='14'
+                                height='14'
+                                aria-label='passed'
+                              />
+                            {{else if (eq result.status 'failed')}}
+                              <CircleX
+                                class='test-icon icon-failed'
+                                width='14'
+                                height='14'
+                                aria-label='failed'
+                              />
+                            {{else if (eq result.status 'error')}}
+                              <CircleAlert
+                                class='test-icon icon-error'
+                                width='14'
+                                height='14'
+                                aria-label='error'
+                              />
+                            {{else if (eq result.status 'skipped')}}
+                              <CircleMinus
+                                class='test-icon icon-skipped'
+                                width='14'
+                                height='14'
+                                aria-label='skipped'
+                              />
+                            {{else}}
+                              <CircleDashed
+                                class='test-icon icon-pending'
+                                width='14'
+                                height='14'
+                                aria-label='pending'
+                              />
+                            {{/if}}
+                            <span class='test-name'>{{result.testName}}</span>
+                            {{#if result.durationMs}}
+                              <span
+                                class='test-duration'
+                              >{{result.durationMs}}ms</span>
+                            {{/if}}
+                          </div>
+                          {{#if result.message}}
+                            <pre
+                              class='failure-message'
+                            >{{result.message}}</pre>
+                          {{/if}}
+                          {{#if result.stackTrace}}
+                            <pre
+                              class='failure-stack'
+                            >{{result.stackTrace}}</pre>
+                          {{/if}}
+                        </div>
+                      {{/each}}
+                    </div>
+                  </div>
+                {{/each}}
               </div>
-            {{/each}}
-          </section>
-        {{/if}}
-      </article>
+            </section>
+          {{/if}}
+        </:details>
+      </ResultIsolatedCard>
       <style scoped>
-        .surface {
-          padding: 1.5rem;
-          display: grid;
-          gap: 1rem;
-        }
-        .linked-card {
-          margin-bottom: 0.5rem;
-        }
-        .header-row {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        .status {
-          font-size: 0.75rem;
-          text-transform: uppercase;
-          font-weight: 600;
-          padding: 0.125rem 0.5rem;
-          border-radius: 0.25rem;
-        }
-        .status-passed {
-          color: var(--boxel-green, #16a34a);
-          background: #f0fdf4;
-        }
-        .status-failed {
-          color: var(--boxel-red, #dc2626);
-          background: #fef2f2;
-        }
-        .status-error {
-          color: var(--boxel-orange, #ea580c);
-          background: #fff7ed;
-        }
-        .status-running {
-          color: var(--boxel-blue, #2563eb);
-          background: #eff6ff;
-        }
-        .status-empty {
-          color: var(--boxel-400, #9ca3af);
-          background: #f9fafb;
-        }
-        .summary {
-          font-size: 0.9rem;
-          color: var(--muted-foreground);
-        }
-        .skipped-label {
-          color: var(--boxel-400, #9ca3af);
+        .skipped {
           font-style: italic;
         }
-        .error-message {
-          color: var(--boxel-red, #dc2626);
-          font-family: monospace;
-          font-size: 0.85rem;
-          white-space: pre-wrap;
-        }
-        .module-group {
-          border: 1px solid var(--boxel-200, #e5e7eb);
-          border-radius: 0.5rem;
-          padding: 0.75rem;
-          margin-bottom: 0.75rem;
+        .detail-section {
+          display: grid;
+          gap: var(--boxel-sp-xs);
         }
-        .module-has-failures {
-          border-color: var(--boxel-red, #dc2626);
+        .detail-section > h2 {
+          margin: 0;
+          font: 600 var(--boxel-font-sm);
+          text-transform: uppercase;
+          letter-spacing: 0.06em;
+          color: var(--muted-foreground, var(--boxel-500));
         }
-        .module-group-header {
+        .detail-groups {
+          display: grid;
+          gap: var(--boxel-sp-sm);
+        }
+        .detail-group {
+          border: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 60%,
+              transparent
+            );
+          border-radius: var(--boxel-border-radius);
+          padding: var(--boxel-sp-sm);
+        }
+        .detail-group.has-errors {
+          border-color: color-mix(
+            in oklch,
+            oklch(55% 0.22 25) 50%,
+            transparent
+          );
+        }
+        .detail-group-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          padding-bottom: 0.5rem;
-          border-bottom: 1px solid var(--boxel-200, #e5e7eb);
-          margin-bottom: 0.5rem;
-        }
-        .module-group-name {
+          gap: var(--boxel-sp-xs);
+          padding-bottom: var(--boxel-sp-xs);
+          border-bottom: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 50%,
+              transparent
+            );
+          margin-bottom: var(--boxel-sp-xs);
+        }
+        .detail-group-name {
           font-weight: 600;
-          font-size: 0.9rem;
+          font-size: var(--boxel-font-size-sm);
+          word-break: break-all;
         }
-        .module-group-counts {
-          font-size: 0.8rem;
-          color: var(--boxel-400, #9ca3af);
+        .group-status {
+          flex-shrink: 0;
+          font-size: var(--boxel-font-size-xs);
+          font-weight: 500;
+          color: var(--muted-foreground, var(--boxel-500));
         }
-        .module-group-counts.has-passes {
-          color: var(--boxel-green, #16a34a);
+        .group-status.clean {
+          color: oklch(60% 0.17 150);
         }
-        .module-group-counts.has-failures {
-          color: var(--boxel-red, #dc2626);
+        .group-status.errors {
+          color: oklch(55% 0.22 25);
         }
-        .module-group-counts.running {
-          color: var(--boxel-blue, #2563eb);
+        .group-status.running {
+          color: oklch(60% 0.16 250);
         }
-        .module-group-tests {
+        .test-rows {
           display: grid;
-          gap: 0.25rem;
+          gap: var(--boxel-sp-4xs);
         }
-        .test-item-row {
+        .test-row-main {
           display: flex;
           align-items: center;
-          gap: 0.5rem;
-          padding: 0.25rem 0;
-          font-size: 0.85rem;
+          gap: var(--boxel-sp-xs);
+          font-size: var(--boxel-font-size-sm);
         }
-        .test-status-icon {
-          font-weight: bold;
-          width: 1.25rem;
-          text-align: center;
+        .test-icon {
           flex-shrink: 0;
         }
-        .test-status-icon.status-passed {
-          color: var(--boxel-green, #16a34a);
+        .icon-passed {
+          color: oklch(60% 0.17 150);
         }
-        .test-status-icon.status-failed {
-          color: var(--boxel-red, #dc2626);
+        .icon-failed {
+          color: oklch(55% 0.22 25);
         }
-        .test-status-icon.status-error {
-          color: var(--boxel-orange, #ea580c);
+        .icon-error {
+          color: oklch(68% 0.17 55);
         }
-        .test-status-icon.status-pending {
-          color: var(--boxel-400, #9ca3af);
+        .icon-skipped,
+        .icon-pending {
+          color: var(--muted-foreground, var(--boxel-500));
         }
-        .test-status-icon.status-skipped {
-          color: var(--boxel-400, #9ca3af);
-          font-style: italic;
-        }
-        .test-item-name {
+        .test-name {
           flex: 1;
         }
-        .test-item-duration {
-          color: var(--boxel-400, #9ca3af);
-          font-size: 0.75rem;
+        .test-duration {
+          flex-shrink: 0;
+          color: var(--muted-foreground, var(--boxel-500));
+          font-size: var(--boxel-font-size-xs);
         }
         .failure-message,
         .failure-stack {
-          font-size: 0.8rem;
-          font-family: monospace;
+          margin: var(--boxel-sp-4xs) 0 var(--boxel-sp-4xs) var(--boxel-sp-lg);
+          font-family: var(--boxel-monospace-font-family, monospace);
+          font-size: var(--boxel-font-size-xs);
           white-space: pre-wrap;
           overflow-x: auto;
           max-width: 100%;
-          margin: 0.25rem 0 0.25rem 1.75rem;
-          color: var(--muted-foreground);
+          color: var(--muted-foreground, var(--boxel-500));
         }
         .failure-stack {
-          font-size: 0.75rem;
           opacity: 0.7;
         }
       </style>

From 41003816d716a726ba1764f7ba425a1d234c32c7 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Mon, 29 Jun 2026 14:32:43 -0400
Subject: [PATCH 04/24] refactor(software-factory): reuse shared delay() from
 runtime-common

The local delay() in realm-operations.ts duplicated the identical helper
already exported from @cardstack/runtime-common. Import the shared one.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/software-factory/src/realm-operations.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/software-factory/src/realm-operations.ts b/packages/software-factory/src/realm-operations.ts
index 5c691f7598..ac10abeab7 100644
--- a/packages/software-factory/src/realm-operations.ts
+++ b/packages/software-factory/src/realm-operations.ts
@@ -9,6 +9,7 @@
  */
 
 import type { BoxelCLIClient, SearchResult } from '@cardstack/boxel-cli/api';
+import { delay } from '@cardstack/runtime-common';
 import type { LooseSingleCardDocument } from '@cardstack/runtime-common';
 import { ensureTrailingSlash } from '@cardstack/runtime-common/paths';
 
@@ -41,10 +42,6 @@ export function toRealmRelativePath(id: string, realmUrl: string): string {
 /** Default delay between empty-result retries in {@link searchUntilNonEmpty}. */
 export const SEARCH_RETRY_DELAY_MS = 1000;
 
-function delay(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
 /**
  * Run a realm-index search, retrying while the result set is empty.
  *

From 67ceb7ecd33e720f74ac4c7eaf8218c97b326a72 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Mon, 29 Jun 2026 14:33:10 -0400
Subject: [PATCH 05/24] refactor(software-factory): import Option from
 kanban-config instead of redeclaring

overview.gts redeclared a local Option interface identical to the one
already exported by kanban-config.gts (which it imports from). Use the
shared type so it can't drift from the option arrays it describes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/software-factory/realm/overview.gts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/software-factory/realm/overview.gts b/packages/software-factory/realm/overview.gts
index 9930d7f15e..6336b1c2af 100644
--- a/packages/software-factory/realm/overview.gts
+++ b/packages/software-factory/realm/overview.gts
@@ -30,6 +30,7 @@ import {
   issuePriorityOptions,
   issueStatusOptions,
   issueTypeOptions,
+  type Option,
 } from './kanban-config.gts';
 import { EmptyState } from './empty-state.gts';
 import { StatusPill } from './status-pill.gts';
@@ -83,12 +84,6 @@ interface FunnelRow {
   count: number;
 }
 
-interface Option {
-  value: string;
-  label: string;
-  color?: string;
-}
-
 type SetupStatus = 'done' | 'active' | 'upcoming';
 
 interface SetupStep {

From 4b763909141b90a7b800432c2c8bcff6319e055b Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Mon, 29 Jun 2026 14:34:53 -0400
Subject: [PATCH 06/24] fix(software-factory): size overview icons via
 width/height attributes

Five boxel-icons in overview.gts were sized only through CSS classes,
leaving the prerenderer without an intrinsic size. Move the dimensions
onto explicit width/height attributes (the convention the file's Rocket
icon already follows); CSS classes keep only color.
---
 packages/software-factory/realm/overview.gts | 36 ++++++++++++++------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/software-factory/realm/overview.gts b/packages/software-factory/realm/overview.gts
index 6336b1c2af..33d79189aa 100644
--- a/packages/software-factory/realm/overview.gts
+++ b/packages/software-factory/realm/overview.gts
@@ -345,12 +345,24 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
                 >
                   <span class='gs-step-mark'>
                     {{#if (eq step.status 'done')}}
-                      <CircleCheck class='gs-icon done' aria-hidden='true' />
+                      <CircleCheck
+                        class='gs-icon done'
+                        width='20'
+                        height='20'
+                        aria-hidden='true'
+                      />
                     {{else if (eq step.status 'active')}}
-                      <CircleDot class='gs-icon active' aria-hidden='true' />
+                      <CircleDot
+                        class='gs-icon active'
+                        width='20'
+                        height='20'
+                        aria-hidden='true'
+                      />
                     {{else}}
                       <CircleDashed
                         class='gs-icon upcoming'
+                        width='20'
+                        height='20'
                         aria-hidden='true'
                       />
                     {{/if}}
@@ -482,7 +494,12 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
           <div class='overview-grid'>
             <section class='widget'>
               <h3 class='widget-title'>
-                <CircleAlert class='widget-icon' aria-hidden='true' />
+                <CircleAlert
+                  class='widget-icon'
+                  width='16'
+                  height='16'
+                  aria-hidden='true'
+                />
                 Needs Attention
               </h3>
               {{#if this.blockedIssues.length}}
@@ -551,7 +568,12 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
 
           <section class='widget'>
             <h3 class='widget-title'>
-              <BookOpen class='widget-icon' aria-hidden='true' />
+              <BookOpen
+                class='widget-icon'
+                width='16'
+                height='16'
+                aria-hidden='true'
+              />
               Knowledge Articles
             </h3>
             {{#if this.validationRealms.length}}
@@ -722,8 +744,6 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
         font-weight: 600;
       }
       .widget-icon {
-        width: 1rem;
-        height: 1rem;
         color: var(--muted-foreground, var(--boxel-500));
       }
       .funnel,
@@ -873,10 +893,6 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
         flex-shrink: 0;
         padding-top: 0.1rem;
       }
-      .gs-icon {
-        width: 1.25rem;
-        height: 1.25rem;
-      }
       .gs-icon.done,
       .gs-icon.active {
         color: var(--primary-foreground, var(--boxel-dark));

From ac9a9d7ffc39dac9fff73906cc7e455912fe59ca Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Mon, 29 Jun 2026 14:35:52 -0400
Subject: [PATCH 07/24] fix(software-factory): retry the in-loop
 bootstrap-wiring hook
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The onBootstrapComplete hook searched for the freshly-pushed board/Project
with zero retries, but those cards are synced fire-and-forget (no
waitForIndex), so the search usually raced the indexer and the hook
no-opped. For runs that stall or are interrupted before the post-loop
backstop runs, that hook is the only wiring — so losing the race left the
dashboard with no board and the seed issue with no project link, exactly
what the hook exists to prevent. Default the hook to waitForIndex too so
both paths poll until the cards are indexed.
---
 .../src/factory-entrypoint.ts                 | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/software-factory/src/factory-entrypoint.ts b/packages/software-factory/src/factory-entrypoint.ts
index 1f613ef09e..463360112e 100644
--- a/packages/software-factory/src/factory-entrypoint.ts
+++ b/packages/software-factory/src/factory-entrypoint.ts
@@ -413,12 +413,12 @@ export async function runFactoryEntrypoint(
   let linkBoard = dependencies?.linkRealmIndexBoard ?? linkBoardToRealmIndex;
   let linkSeedProject =
     dependencies?.linkBootstrapIssueProject ?? linkProjectToSeedIssue;
-  let wireBootstrapArtifacts = async ({ waitForIndex = false } = {}) => {
+  let wireBootstrapArtifacts = async ({ waitForIndex = true } = {}) => {
     // The board/Project are pushed to the realm fire-and-forget (no
-    // waitForIndex), so a search right after can race the indexer. The
-    // backstop is the last chance to wire the links, so it retries on an
-    // empty result; the in-loop hook stays opportunistic (no retries) since
-    // the backstop covers anything it misses.
+    // waitForIndex), so a search right after can race the indexer. Both the
+    // in-loop hook and the post-loop backstop therefore retry on an empty
+    // result: the hook is the only wiring a run that stalls or is interrupted
+    // before the backstop ever gets, so it can't afford to lose that race.
     let searchRetries = waitForIndex ? BOOTSTRAP_LINK_SEARCH_RETRIES : 0;
     let linkArgs = {
       client,
@@ -479,10 +479,11 @@ export async function runFactoryEntrypoint(
 
   // Backstop after the loop returns. The bootstrap-complete hook above is the
   // primary trigger (it fires even when the loop never reaches here), but this
-  // re-wires idempotently for runs that complete normally and covers the case
-  // where the hook's search briefly raced the realm index. A no-op when the
-  // board and project are already linked. Best-effort, like the hook: a wiring
-  // failure here must not turn an otherwise-successful run into a failure.
+  // re-wires idempotently for runs that complete normally, covering the case
+  // where the hook exhausted its retry budget before the index caught up. A
+  // no-op when the board and project are already linked. Best-effort, like the
+  // hook: a wiring failure here must not turn an otherwise-successful run into
+  // a failure.
   if (targetRealm.createdRealm) {
     try {
       await wireBootstrapArtifacts({ waitForIndex: true });

From def79e2be2a3074aaf5ec99e3b7c4bb4e897c1e7 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Mon, 29 Jun 2026 14:37:33 -0400
Subject: [PATCH 08/24] fix(software-factory): select bootstrap board and
 project by one policy

linkBoardToRealmIndex picked the lexicographically-first IssueTracker id
while linkProjectToSeedIssue picked the most-recently-modified Project.
If a re-run ever produced more than one of each, the dashboard board and
the seed issue's project could resolve to different generations of
bootstrap output. Sort both searches newest-first and take the first
result, and drop the now-unused selectId hook from linkRelationshipToCard.
---
 packages/software-factory/src/factory-realm-index.ts | 8 +++++---
 packages/software-factory/src/realm-operations.ts    | 9 +--------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/software-factory/src/factory-realm-index.ts b/packages/software-factory/src/factory-realm-index.ts
index d21d9ac5b6..6e82bd5e2c 100644
--- a/packages/software-factory/src/factory-realm-index.ts
+++ b/packages/software-factory/src/factory-realm-index.ts
@@ -161,10 +161,12 @@ export async function linkBoardToRealmIndex(
         filter: {
           type: { module: issueTrackerModuleUrl, name: 'IssueTracker' },
         },
+        // One board per bootstrapped realm; newest-first so a re-run that
+        // somehow produced more than one links the most recently created.
+        // linkProjectToSeedIssue selects the Project the same way, so the
+        // board and the seed issue's project stay on the same generation.
+        sort: [{ by: 'lastModified', direction: 'desc' as const }],
       }),
-    // Bootstrap creates one board per project; if a run produced more than
-    // one, link the lexicographically-first id deterministically.
-    selectId: (ids) => [...ids].sort()[0],
     buildLink: (id, realm) => `./${toRealmRelativePath(id, realm)}`,
     log,
     searchRetries: options.searchRetries,
diff --git a/packages/software-factory/src/realm-operations.ts b/packages/software-factory/src/realm-operations.ts
index ac10abeab7..90065e2659 100644
--- a/packages/software-factory/src/realm-operations.ts
+++ b/packages/software-factory/src/realm-operations.ts
@@ -120,12 +120,6 @@ export interface LinkRelationshipToCardOptions {
   search: () => Promise<SearchResult>;
   /** Build the relationship `self` link from the found card's id. */
   buildLink: (targetId: string, realmUrl: string) => string;
-  /**
-   * Choose which result's id to link when the search returns more than one.
-   * Receives the truthy ids in result order; defaults to the first (let the
-   * search's own `sort` decide). Pure id ordering — return a member of `ids`.
-   */
-  selectId?: (ids: string[]) => string;
   /** Logger for the calling module. */
   log: Logger;
   /** Retry an empty search this many times. See {@link searchUntilNonEmpty}. */
@@ -156,7 +150,6 @@ export async function linkRelationshipToCard(
     targetLabel,
     search,
     buildLink,
-    selectId,
     log,
   } = options;
 
@@ -185,7 +178,7 @@ export async function linkRelationshipToCard(
     );
     return false;
   }
-  let targetId = selectId ? selectId(ids) : ids[0];
+  let targetId = ids[0];
   if (ids.length > 1) {
     log.warn(`Found ${ids.length} ${targetLabel}(s); linking ${targetId}`);
   }

From 3187fda42f78b2592c1db76fea870218edda824f Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Mon, 29 Jun 2026 14:38:47 -0400
Subject: [PATCH 09/24] perf(software-factory): wire bootstrap board and
 project concurrently
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

wireBootstrapArtifacts awaited linkBoard then linkSeedProject in series.
Each runs its search through searchUntilNonEmpty, so on a realm that has
neither card yet both burn their full retry budget back-to-back (~10s on
the backstop path). The two links patch independent files and share no
state, so run them with Promise.all and sync once if either changed —
halving the worst-case wait.
---
 packages/software-factory/src/factory-entrypoint.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/software-factory/src/factory-entrypoint.ts b/packages/software-factory/src/factory-entrypoint.ts
index 463360112e..e93736d877 100644
--- a/packages/software-factory/src/factory-entrypoint.ts
+++ b/packages/software-factory/src/factory-entrypoint.ts
@@ -427,8 +427,14 @@ export async function runFactoryEntrypoint(
       darkfactoryModuleUrl,
       searchRetries,
     };
-    let boardLinked = await linkBoard(linkArgs);
-    let projectLinked = await linkSeedProject(linkArgs);
+    // The two links patch independent files (index.json vs the seed issue)
+    // and share no state, so run them concurrently. When the realm has
+    // neither card yet, each search otherwise burns its full retry budget in
+    // turn; overlapping them halves the worst-case wait.
+    let [boardLinked, projectLinked] = await Promise.all([
+      linkBoard(linkArgs),
+      linkSeedProject(linkArgs),
+    ]);
     if (boardLinked || projectLinked) {
       await syncWorkspaceToRealm(client, targetRealm.url, workspaceDir);
     }

From bd7882c0bddbe1b8ac91daf96b219e684954e95b Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Mon, 29 Jun 2026 14:39:51 -0400
Subject: [PATCH 10/24] fix(template-lint): catch split/concatenated data-test
 selectors in <style>

The no-data-test-selector rule tested each <style> child TextNode in
isolation, so a [data-test-*] selector split across nodes by a comment or
{{! }}, or assembled inside a ConcatStatement, slipped past. Concatenate
the static text of all children before scanning. A fully dynamic body
(e.g. {{this.css}}) still can't be inspected, which the comment notes.
---
 .../lib/no-data-test-selector.mjs             | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/packages/template-lint/lib/no-data-test-selector.mjs b/packages/template-lint/lib/no-data-test-selector.mjs
index fe207cf95d..71ab65c3dc 100644
--- a/packages/template-lint/lib/no-data-test-selector.mjs
+++ b/packages/template-lint/lib/no-data-test-selector.mjs
@@ -41,21 +41,38 @@ export default class NoDataTestSelector extends Rule {
 
       // Catches CSS selectors in `<style>` blocks:
       //   <style scoped>[data-test-foo] { color: red; }</style>
-      // The style element's CSS is a plain TextNode child, not parsed as CSS,
-      // so scan its raw text for `[data-test-`.
+      // The style element's CSS is not parsed as CSS, so scan its raw text for
+      // `[data-test-`. Concatenate the static text across all children first,
+      // rather than testing each child alone: that way a selector split by a
+      // comment or `{{! }}` between two TextNodes — or assembled inside a
+      // ConcatStatement — is still caught. A fully dynamic body (e.g.
+      // `{{this.css}}`) contributes no static text and can't be inspected here.
       ElementNode(node) {
         if (node.tag !== 'style') {
           return;
         }
-        for (let child of node.children) {
-          if (child.type === 'TextNode' && /\[data-test-/.test(child.chars)) {
-            this.log({
-              message: MESSAGE,
-              node: child,
-            });
-          }
+        if (/\[data-test-/.test(collectStaticText(node.children))) {
+          this.log({
+            message: MESSAGE,
+            node,
+          });
         }
       },
     };
   }
 }
+
+// Gather the static (statically-known) text of a list of template nodes,
+// descending into ConcatStatement parts. Dynamic nodes (MustacheStatement,
+// etc.) contribute nothing since their value isn't known at lint time.
+function collectStaticText(nodes) {
+  let text = '';
+  for (let child of nodes) {
+    if (child.type === 'TextNode') {
+      text += child.chars;
+    } else if (child.type === 'ConcatStatement') {
+      text += collectStaticText(child.parts);
+    }
+  }
+  return text;
+}

From 82875c5befa62d2cce1395736076428b9fcd4f6c Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Mon, 29 Jun 2026 15:49:57 -0400
Subject: [PATCH 11/24] fix(software-factory): sort validation runs by runAt,
 not per-issue sequence

sequenceNumber restarts at 1 per issue slug, so sorting a whole
type group by it could rank an older issue's run ahead of a newer
issue's. Sort by the global runAt timestamp so the Validation Runs
widget is actually newest-first.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/software-factory/realm/overview.gts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/software-factory/realm/overview.gts b/packages/software-factory/realm/overview.gts
index 33d79189aa..a644f4a219 100644
--- a/packages/software-factory/realm/overview.gts
+++ b/packages/software-factory/realm/overview.gts
@@ -199,14 +199,16 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
   // One query per validation type, newest run first. Grouping by type keeps
   // the whole pipeline (parse → lint → eval → instantiate → test) legible at a
   // glance; each result card already names its issue, so issue context isn't
-  // lost by dropping the per-issue grouping.
+  // lost by dropping the per-issue grouping. Sort by `runAt` (a global
+  // timestamp): `sequenceNumber` restarts at 1 per issue slug, so it would rank
+  // an older issue's run #5 ahead of a newer issue's run #1.
   validationQueryForType = (
     ref: (typeof VALIDATION_TYPE_GROUPS)[number]['ref'],
   ): SearchEntryWireQuery => {
     return {
       ...searchEntryWireQueryFromQuery({
         filter: { type: ref },
-        sort: [{ by: 'sequenceNumber', on: ref, direction: 'desc' }],
+        sort: [{ by: 'runAt', on: ref, direction: 'desc' }],
       }),
       realms: this.validationRealms,
     };

From 9b4ec7e98f3060e8f500ec704292a7b9a34ba8a6 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Mon, 29 Jun 2026 16:00:27 -0400
Subject: [PATCH 12/24] fix(software-factory): import delay from
 runtime-common/utils subpath

Importing delay as a value from the @cardstack/runtime-common barrel
pulls index-writer.ts into the node test transpile pipeline, where its
`declare private` field trips a babel plugin-ordering SyntaxError. The
/utils subpath has only type imports, so it loads no runtime modules.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/software-factory/src/realm-operations.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/software-factory/src/realm-operations.ts b/packages/software-factory/src/realm-operations.ts
index 90065e2659..e85d252fc0 100644
--- a/packages/software-factory/src/realm-operations.ts
+++ b/packages/software-factory/src/realm-operations.ts
@@ -9,9 +9,9 @@
  */
 
 import type { BoxelCLIClient, SearchResult } from '@cardstack/boxel-cli/api';
-import { delay } from '@cardstack/runtime-common';
 import type { LooseSingleCardDocument } from '@cardstack/runtime-common';
 import { ensureTrailingSlash } from '@cardstack/runtime-common/paths';
+import { delay } from '@cardstack/runtime-common/utils';
 
 import type { Logger } from './logger.ts';
 import { readCard, writeCard } from './workspace-fs.ts';

From d3e8e8ff91ee1a94ca4049e8569d3ea49a62af01 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Tue, 30 Jun 2026 09:57:46 -0400
Subject: [PATCH 13/24] fix(template-lint): don't stitch data-test selectors
 across dynamic nodes

collectStaticText concatenated TextNodes across MustacheStatements as if
they were absent, so `[data-` {{kind}} `test-` fused into `[data-test-`
and false-positived. Insert a delimiter for dynamic nodes; keep comments
transparent so a genuinely comment-split selector is still caught.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../template-lint/lib/no-data-test-selector.mjs   | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/template-lint/lib/no-data-test-selector.mjs b/packages/template-lint/lib/no-data-test-selector.mjs
index 71ab65c3dc..0ad4dc21db 100644
--- a/packages/template-lint/lib/no-data-test-selector.mjs
+++ b/packages/template-lint/lib/no-data-test-selector.mjs
@@ -63,8 +63,12 @@ export default class NoDataTestSelector extends Rule {
 }
 
 // Gather the static (statically-known) text of a list of template nodes,
-// descending into ConcatStatement parts. Dynamic nodes (MustacheStatement,
-// etc.) contribute nothing since their value isn't known at lint time.
+// descending into ConcatStatement parts. Comments contribute nothing but are
+// transparent, so a selector split across them by adjacent TextNodes is still
+// recombined and caught. Every other dynamic node (MustacheStatement, etc.)
+// gets a space delimiter in its place: its runtime value isn't known at lint
+// time, so stitching the surrounding TextNodes together would invent a
+// selector that never exists (e.g. `[data-` {{kind}} `test-` → `[data-test-`).
 function collectStaticText(nodes) {
   let text = '';
   for (let child of nodes) {
@@ -72,6 +76,13 @@ function collectStaticText(nodes) {
       text += child.chars;
     } else if (child.type === 'ConcatStatement') {
       text += collectStaticText(child.parts);
+    } else if (
+      child.type === 'CommentStatement' ||
+      child.type === 'MustacheCommentStatement'
+    ) {
+      // Transparent: contributes no text, but doesn't break a split selector.
+    } else {
+      text += ' ';
     }
   }
   return text;

From 0cb4c1143143789c83e1fe4bd1e2ab66ed8bbf05 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Tue, 30 Jun 2026 10:06:32 -0400
Subject: [PATCH 14/24] handle seqNo edge case display

---
 packages/software-factory/realm/result-fitted-card.gts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/software-factory/realm/result-fitted-card.gts b/packages/software-factory/realm/result-fitted-card.gts
index 31c64e663e..20d330e814 100644
--- a/packages/software-factory/realm/result-fitted-card.gts
+++ b/packages/software-factory/realm/result-fitted-card.gts
@@ -82,7 +82,8 @@ export class ResultFittedCard extends GlimmerComponent<Signature> {
       <:eyebrow>
         <div class='result-id'>
           <@icon width='14' height='14' aria-hidden='true' />
-          <span>{{@label}} #{{@sequenceNumber}}</span>
+          <span>{{@label}}{{#if @sequenceNumber}}
+              #{{@sequenceNumber}}{{/if}}</span>
         </div>
       </:eyebrow>
       <:badgeRight>

From 4355c20cc8de145d456581dd57b1e0f3ef950e75 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Tue, 30 Jun 2026 10:24:48 -0400
Subject: [PATCH 15/24] Group validation runs by issue instead of by type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Validation Runs widget now renders one group per issue (each
showing all five result types for that issue, newest run first) rather
than one group per validation type. Drop the now-unused
VALIDATION_TYPE_GROUPS list, the per-type query/getter, and the orphaned
.validation-type style.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

fix(software-factory): sort validation runs by a general field

Sorting the per-issue validation query by `runAt` returned nothing: a
sort on a per-type card field requires an `on` CodeRef, which can't span
the five result types in the `any` filter, so the query was invalid.
Sort by `createdAt` (a general, type-agnostic field) instead — each
result card is created when its run completes, so newest-created is
newest-run.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/software-factory/realm/overview.gts | 87 +++++++-------------
 1 file changed, 30 insertions(+), 57 deletions(-)

diff --git a/packages/software-factory/realm/overview.gts b/packages/software-factory/realm/overview.gts
index a644f4a219..c03fa24d69 100644
--- a/packages/software-factory/realm/overview.gts
+++ b/packages/software-factory/realm/overview.gts
@@ -39,36 +39,14 @@ import type { RealmDashboard } from './realm-dashboard.gts';
 // @ts-expect-error this is not a CJS file, import.meta is allowed
 const importMetaUrl: string = import.meta.url;
 
-// The five validation-result card types the factory writes under
-// `Validations/` after every agent turn, in pipeline order. A `type` filter
-// matches each card and its subclasses, so the tab surfaces the whole
-// pipeline; the Validation Runs widget renders one group per type.
-const VALIDATION_TYPE_GROUPS = [
-  {
-    key: 'parse',
-    label: 'Parse',
-    ref: codeRef(importMetaUrl, './parse-result', 'ParseResult'),
-  },
-  {
-    key: 'lint',
-    label: 'Lint',
-    ref: codeRef(importMetaUrl, './lint-result', 'LintResult'),
-  },
-  {
-    key: 'eval',
-    label: 'Eval',
-    ref: codeRef(importMetaUrl, './eval-result', 'EvalResult'),
-  },
-  {
-    key: 'instantiate',
-    label: 'Instantiate',
-    ref: codeRef(importMetaUrl, './instantiate-result', 'InstantiateResult'),
-  },
-  {
-    key: 'test',
-    label: 'Tests',
-    ref: codeRef(importMetaUrl, './test-results', 'TestRun'),
-  },
+// `Validations/` after every agent turn. A `type` filter matches each
+// card and its subclasses, so the tab surfaces the whole pipeline.
+const VALIDATION_TYPES = [
+  codeRef(importMetaUrl, './parse-result', 'ParseResult'),
+  codeRef(importMetaUrl, './lint-result', 'LintResult'),
+  codeRef(importMetaUrl, './eval-result', 'EvalResult'),
+  codeRef(importMetaUrl, './instantiate-result', 'InstantiateResult'),
+  codeRef(importMetaUrl, './test-results', 'TestRun'),
 ];
 
 const KNOWLEDGE_TYPE = codeRef(
@@ -192,23 +170,25 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
     return url ? [url.href] : [];
   }
 
-  get validationTypeGroups() {
-    return VALIDATION_TYPE_GROUPS;
-  }
-
-  // One query per validation type, newest run first. Grouping by type keeps
-  // the whole pipeline (parse → lint → eval → instantiate → test) legible at a
-  // glance; each result card already names its issue, so issue context isn't
-  // lost by dropping the per-issue grouping. Sort by `runAt` (a global
-  // timestamp): `sequenceNumber` restarts at 1 per issue slug, so it would rank
-  // an older issue's run #5 ahead of a newer issue's run #1.
-  validationQueryForType = (
-    ref: (typeof VALIDATION_TYPE_GROUPS)[number]['ref'],
+  // Validation results link *to* an issue, so to group them we run one
+  // query per issue. Each of the five result types has its own `issue`
+  // field, so the `issue.id` constraint is scoped per type via `on`. Sort by
+  // `createdAt`, a general (type-agnostic) field: a per-type field like `runAt`
+  // would need an `on`, which can't span the five types in this `any` filter,
+  // and each result card is created when its run completes, so newest-created
+  // is newest-run.
+  validationQueryForIssue = (
+    issueId: string | undefined,
   ): SearchEntryWireQuery => {
     return {
       ...searchEntryWireQueryFromQuery({
-        filter: { type: ref },
-        sort: [{ by: 'runAt', on: ref, direction: 'desc' }],
+        filter: {
+          any: VALIDATION_TYPES.map((ref) => ({
+            on: ref,
+            eq: { 'issue.id': issueId ?? '' },
+          })),
+        },
+        sort: [{ by: 'createdAt', direction: 'desc' }],
       }),
       realms: this.validationRealms,
     };
@@ -612,20 +592,18 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
           <section class='widget'>
             <h3 class='widget-title'>Validation Runs</h3>
             {{#if this.validationRealms.length}}
-              {{#each this.validationTypeGroups key='key' as |group|}}
+              {{#each this.issues key='id' as |issue|}}
                 <div class='validation-group'>
                   <div class='validation-group-head'>
-                    <span
-                      class='validation-type'
-                      data-test-validation-type={{group.key}}
-                    >{{group.label}}</span>
+                    <span class='issue-id'>{{issue.issueId}}</span>
+                    <span class='issue-title'>{{issue.cardTitle}}</span>
                   </div>
                   {{#let
                     (component @context.searchResultsComponent)
                     as |SearchResults|
                   }}
                     <SearchResults
-                      @query={{this.validationQueryForType group.ref}}
+                      @query={{this.validationQueryForIssue issue.id}}
                       @mode='none'
                       as |results|
                     >
@@ -645,6 +623,8 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
                     </SearchResults>
                   {{/let}}
                 </div>
+              {{else}}
+                <p class='empty-state'>No issues yet.</p>
               {{/each}}
             {{else}}
               <p class='empty-state'>Realm not resolved — open this card from
@@ -812,13 +792,6 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
         gap: var(--boxel-sp-xs);
         margin-bottom: var(--boxel-sp-xs);
       }
-      .validation-type {
-        font-size: 0.8125rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.04em;
-        color: var(--muted-foreground, var(--boxel-500));
-      }
       .validation-list {
         display: flex;
         flex-direction: column;

From 7738eaf52206588cd797ece30083a1718c32e658 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Tue, 30 Jun 2026 10:32:22 -0400
Subject: [PATCH 16/24] Organize validation runs by type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Revert the Validation Runs widget to one group per validation type
(parse → lint → eval → instantiate → test), each sorted newest-first by
runAt with an on CodeRef. Restores VALIDATION_TYPE_GROUPS, the per-type
query, and the .validation-type style.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 packages/software-factory/realm/overview.gts | 87 +++++++++++++-------
 1 file changed, 57 insertions(+), 30 deletions(-)

diff --git a/packages/software-factory/realm/overview.gts b/packages/software-factory/realm/overview.gts
index c03fa24d69..a644f4a219 100644
--- a/packages/software-factory/realm/overview.gts
+++ b/packages/software-factory/realm/overview.gts
@@ -39,14 +39,36 @@ import type { RealmDashboard } from './realm-dashboard.gts';
 // @ts-expect-error this is not a CJS file, import.meta is allowed
 const importMetaUrl: string = import.meta.url;
 
-// `Validations/` after every agent turn. A `type` filter matches each
-// card and its subclasses, so the tab surfaces the whole pipeline.
-const VALIDATION_TYPES = [
-  codeRef(importMetaUrl, './parse-result', 'ParseResult'),
-  codeRef(importMetaUrl, './lint-result', 'LintResult'),
-  codeRef(importMetaUrl, './eval-result', 'EvalResult'),
-  codeRef(importMetaUrl, './instantiate-result', 'InstantiateResult'),
-  codeRef(importMetaUrl, './test-results', 'TestRun'),
+// The five validation-result card types the factory writes under
+// `Validations/` after every agent turn, in pipeline order. A `type` filter
+// matches each card and its subclasses, so the tab surfaces the whole
+// pipeline; the Validation Runs widget renders one group per type.
+const VALIDATION_TYPE_GROUPS = [
+  {
+    key: 'parse',
+    label: 'Parse',
+    ref: codeRef(importMetaUrl, './parse-result', 'ParseResult'),
+  },
+  {
+    key: 'lint',
+    label: 'Lint',
+    ref: codeRef(importMetaUrl, './lint-result', 'LintResult'),
+  },
+  {
+    key: 'eval',
+    label: 'Eval',
+    ref: codeRef(importMetaUrl, './eval-result', 'EvalResult'),
+  },
+  {
+    key: 'instantiate',
+    label: 'Instantiate',
+    ref: codeRef(importMetaUrl, './instantiate-result', 'InstantiateResult'),
+  },
+  {
+    key: 'test',
+    label: 'Tests',
+    ref: codeRef(importMetaUrl, './test-results', 'TestRun'),
+  },
 ];
 
 const KNOWLEDGE_TYPE = codeRef(
@@ -170,25 +192,23 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
     return url ? [url.href] : [];
   }
 
-  // Validation results link *to* an issue, so to group them we run one
-  // query per issue. Each of the five result types has its own `issue`
-  // field, so the `issue.id` constraint is scoped per type via `on`. Sort by
-  // `createdAt`, a general (type-agnostic) field: a per-type field like `runAt`
-  // would need an `on`, which can't span the five types in this `any` filter,
-  // and each result card is created when its run completes, so newest-created
-  // is newest-run.
-  validationQueryForIssue = (
-    issueId: string | undefined,
+  get validationTypeGroups() {
+    return VALIDATION_TYPE_GROUPS;
+  }
+
+  // One query per validation type, newest run first. Grouping by type keeps
+  // the whole pipeline (parse → lint → eval → instantiate → test) legible at a
+  // glance; each result card already names its issue, so issue context isn't
+  // lost by dropping the per-issue grouping. Sort by `runAt` (a global
+  // timestamp): `sequenceNumber` restarts at 1 per issue slug, so it would rank
+  // an older issue's run #5 ahead of a newer issue's run #1.
+  validationQueryForType = (
+    ref: (typeof VALIDATION_TYPE_GROUPS)[number]['ref'],
   ): SearchEntryWireQuery => {
     return {
       ...searchEntryWireQueryFromQuery({
-        filter: {
-          any: VALIDATION_TYPES.map((ref) => ({
-            on: ref,
-            eq: { 'issue.id': issueId ?? '' },
-          })),
-        },
-        sort: [{ by: 'createdAt', direction: 'desc' }],
+        filter: { type: ref },
+        sort: [{ by: 'runAt', on: ref, direction: 'desc' }],
       }),
       realms: this.validationRealms,
     };
@@ -592,18 +612,20 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
           <section class='widget'>
             <h3 class='widget-title'>Validation Runs</h3>
             {{#if this.validationRealms.length}}
-              {{#each this.issues key='id' as |issue|}}
+              {{#each this.validationTypeGroups key='key' as |group|}}
                 <div class='validation-group'>
                   <div class='validation-group-head'>
-                    <span class='issue-id'>{{issue.issueId}}</span>
-                    <span class='issue-title'>{{issue.cardTitle}}</span>
+                    <span
+                      class='validation-type'
+                      data-test-validation-type={{group.key}}
+                    >{{group.label}}</span>
                   </div>
                   {{#let
                     (component @context.searchResultsComponent)
                     as |SearchResults|
                   }}
                     <SearchResults
-                      @query={{this.validationQueryForIssue issue.id}}
+                      @query={{this.validationQueryForType group.ref}}
                       @mode='none'
                       as |results|
                     >
@@ -623,8 +645,6 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
                     </SearchResults>
                   {{/let}}
                 </div>
-              {{else}}
-                <p class='empty-state'>No issues yet.</p>
               {{/each}}
             {{else}}
               <p class='empty-state'>Realm not resolved — open this card from
@@ -792,6 +812,13 @@ export class Overview extends GlimmerComponent<OverviewSignature> {
         gap: var(--boxel-sp-xs);
         margin-bottom: var(--boxel-sp-xs);
       }
+      .validation-type {
+        font-size: 0.8125rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        color: var(--muted-foreground, var(--boxel-500));
+      }
       .validation-list {
         display: flex;
         flex-direction: column;

From f4e21d549f2087e4596ff83024afb431aadddfbe Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Tue, 30 Jun 2026 10:38:28 -0400
Subject: [PATCH 17/24] performance improvements

---
 .../software-factory/realm/issue-tracker.gts  | 53 ++++++++++++-------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/packages/software-factory/realm/issue-tracker.gts b/packages/software-factory/realm/issue-tracker.gts
index 0c3af83d39..98fe1ab58f 100644
--- a/packages/software-factory/realm/issue-tracker.gts
+++ b/packages/software-factory/realm/issue-tracker.gts
@@ -1,4 +1,4 @@
-import { tracked } from '@glimmer/tracking';
+import { cached, tracked } from '@glimmer/tracking';
 import { get } from '@ember/helper';
 import { on } from '@ember/modifier';
 import type Owner from '@ember/owner';
@@ -2678,6 +2678,7 @@ class IssueTrackerIsolated extends Component<typeof IssueTracker> {
     this.uncategorizedCollapsed = false;
   };
 
+  @cached
   get columns(): KanbanColumnConfig[] {
     let options =
       this.activeGroupBy === 'priority'
@@ -2748,10 +2749,12 @@ class IssueTrackerIsolated extends Component<typeof IssueTracker> {
     );
   }
 
+  @cached
   get configurableColumns(): KanbanColumnConfig[] {
     return this.columns.filter((c) => c.key !== 'uncategorized');
   }
 
+  @cached
   get firstColumn(): KanbanColumnConfig | undefined {
     return [...this.columns].sort((a, b) => a.sortOrder - b.sortOrder)[0];
   }
@@ -2760,21 +2763,26 @@ class IssueTrackerIsolated extends Component<typeof IssueTracker> {
     return this.args.model?.cards?.length ?? 0;
   }
 
-  get columnCardCounts(): number[] {
-    return this.columns.map(
-      (col: KanbanColumnConfig) =>
-        this.placements.filter((p) => p.columnId === col.key).length,
-    );
-  }
-
+  @cached
   get columnCardCountsByKey(): Record<string, number> {
     let result: Record<string, number> = {};
-    this.columns.forEach((col, i) => {
-      result[col.key] = this.columnCardCounts[i] ?? 0;
-    });
+    for (let col of this.columns) {
+      result[col.key] = 0;
+    }
+    for (let p of this.placements) {
+      if (p.columnId in result) {
+        result[p.columnId] += 1;
+      }
+    }
     return result;
   }
 
+  @cached
+  get columnCardCounts(): number[] {
+    let counts = this.columnCardCountsByKey;
+    return this.columns.map((col: KanbanColumnConfig) => counts[col.key] ?? 0);
+  }
+
   get hideEmpty(): boolean {
     return this.args.model.hideEmptyColumns ?? false;
   }
@@ -2989,29 +2997,34 @@ class IssueTrackerIsolated extends Component<typeof IssueTracker> {
     }
   };
 
+  @cached
   get placements(): KanbanPlacement[] {
     let stored = this.args.model?.placements;
     let cards = this.args.model?.cards ?? [];
     let fieldName = this.groupByFieldName;
+    let columnKeys = new Set(this.columns.map((c) => c.key));
+    let firstColumnKey = this.firstColumn?.key ?? '';
     let resolveColumn = (fieldValue: string | null | undefined): string => {
       return (
-        (fieldValue
-          ? this.columns.find((c) => c.key === fieldValue)?.key
-          : undefined) ??
-        (this.activeGroupBy === 'status'
-          ? this.columns.find((c) => c.key === 'backlog')?.key
+        (fieldValue && columnKeys.has(fieldValue) ? fieldValue : undefined) ??
+        (this.activeGroupBy === 'status' && columnKeys.has('backlog')
+          ? 'backlog'
           : undefined) ??
-        this.columns.find((c) => c.key === 'uncategorized')?.key ??
-        this.firstColumn?.key ??
-        ''
+        (columnKeys.has('uncategorized') ? 'uncategorized' : undefined) ??
+        firstColumnKey
       );
     };
 
     if (stored?.length) {
+      let cardIdxById = new Map<string, number>();
+      cards.forEach((c, idx) => {
+        let id = (c as any).id;
+        if (id != null && !cardIdxById.has(id)) cardIdxById.set(id, idx);
+      });
       let placedCardIds = new Set(stored.map((p) => p.itemId));
       let resolved = stored
         .map((p) => {
-          let cardIdx = cards.findIndex((c) => (c as any).id === p.itemId);
+          let cardIdx = cardIdxById.get(p.itemId) ?? -1;
           if (cardIdx === -1) return null;
           let card = cards[cardIdx] as any;
           let colKey = resolveColumn(card[fieldName] ?? p.columnKey);

From 62159eed2a1c76ce25c0ce25a7136062b2a51cfc Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Tue, 30 Jun 2026 11:16:01 -0400
Subject: [PATCH 18/24] refactor

---
 .../software-factory/realm/eval-result.gts    | 124 +++------
 .../realm/instantiate-result.gts              | 123 +++------
 .../software-factory/realm/lint-result.gts    | 192 +++++--------
 .../software-factory/realm/parse-result.gts   | 162 ++++-------
 .../realm/result-details-section.gts          |  87 ++++++
 .../realm/result-fitted-card.gts              |  18 ++
 .../realm/result-isolated-card.gts            |  24 +-
 .../software-factory/realm/test-results.gts   | 252 +++++++-----------
 8 files changed, 422 insertions(+), 560 deletions(-)
 create mode 100644 packages/software-factory/realm/result-details-section.gts

diff --git a/packages/software-factory/realm/eval-result.gts b/packages/software-factory/realm/eval-result.gts
index 8e547f4330..b75d336505 100644
--- a/packages/software-factory/realm/eval-result.gts
+++ b/packages/software-factory/realm/eval-result.gts
@@ -14,9 +14,12 @@ import enumField from 'https://cardstack.com/base/enum';
 import { Project, Issue } from './darkfactory.gts';
 import {
   ResultFittedCard,
+  resultDisplayStatus,
+  resultRunTitle,
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
+import { ResultDetailsSection } from './result-details-section.gts';
 
 import Code from '@cardstack/boxel-icons/code';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -129,13 +132,10 @@ export class EvalResult extends CardDef {
 
   static fitted = class Fitted extends Component<typeof EvalResult> {
     get displayStatus() {
-      if (
-        (this.args.model.modulesChecked ?? 0) === 0 &&
-        this.args.model.status === 'passed'
-      ) {
-        return 'empty';
-      }
-      return this.args.model.status;
+      return resultDisplayStatus(
+        this.args.model.modulesChecked,
+        this.args.model.status,
+      );
     }
 
     get titleText() {
@@ -183,25 +183,26 @@ export class EvalResult extends CardDef {
 
   static isolated = class Isolated extends Component<typeof EvalResult> {
     get displayStatus() {
-      if (
-        (this.args.model.modulesChecked ?? 0) === 0 &&
-        this.args.model.status === 'passed'
-      ) {
-        return 'empty';
-      }
-      return this.args.model.status;
+      return resultDisplayStatus(
+        this.args.model.modulesChecked,
+        this.args.model.status,
+      );
     }
 
     get titleText() {
-      return `Eval Run #${this.args.model.sequenceNumber ?? '?'}`;
+      return resultRunTitle('Eval', this.args.model.sequenceNumber);
     }
 
+    moduleHasError = (module: EvalModuleResult) => module.hasError;
+
     <template>
       <ResultIsolatedCard
         @title={{this.titleText}}
         @status={{this.displayStatus}}
         @emptyLabel='No Modules'
         @durationMs={{@model.durationMs}}
+        @runAt={{@model.runAt}}
+        @completedAt={{@model.completedAt}}
         @hasProject={{@model.project}}
         @hasIssue={{@model.issue}}
         @hasError={{@model.errorMessage}}
@@ -216,82 +217,28 @@ export class EvalResult extends CardDef {
         <:issue><@fields.issue @format='embedded' /></:issue>
         <:error>{{@model.errorMessage}}</:error>
         <:details>
-          {{#if @model.moduleResults.length}}
-            <section class='detail-section'>
-              <h2>Module Results</h2>
-              <div class='detail-groups'>
-                {{#each @model.moduleResults as |moduleResult|}}
-                  <div
-                    class='detail-group
-                      {{if moduleResult.hasError "has-errors"}}'
-                  >
-                    <div class='detail-group-header'>
-                      <span
-                        class='detail-group-name'
-                      >{{moduleResult.path}}</span>
-                      {{#if moduleResult.hasError}}
-                        <span class='group-status errors'>error</span>
-                      {{else}}
-                        <span class='group-status clean'>passed</span>
-                      {{/if}}
-                    </div>
-                    {{#if moduleResult.error}}
-                      <pre class='error-code-block'>{{moduleResult.error}}</pre>
-                    {{/if}}
-                  </div>
-                {{/each}}
-              </div>
-            </section>
-          {{/if}}
+          <ResultDetailsSection
+            @sectionTitle='Module Results'
+            @items={{@model.moduleResults}}
+            @hasErrors={{this.moduleHasError}}
+          >
+            <:header as |moduleResult|>
+              <span class='detail-group-name'>{{moduleResult.path}}</span>
+              {{#if moduleResult.hasError}}
+                <span class='group-status errors'>error</span>
+              {{else}}
+                <span class='group-status clean'>passed</span>
+              {{/if}}
+            </:header>
+            <:body as |moduleResult|>
+              {{#if moduleResult.error}}
+                <pre class='error-code-block'>{{moduleResult.error}}</pre>
+              {{/if}}
+            </:body>
+          </ResultDetailsSection>
         </:details>
       </ResultIsolatedCard>
       <style scoped>
-        .detail-section {
-          display: grid;
-          gap: var(--boxel-sp-xs);
-        }
-        .detail-section > h2 {
-          margin: 0;
-          font: 600 var(--boxel-font-sm);
-          text-transform: uppercase;
-          letter-spacing: 0.06em;
-          color: var(--muted-foreground, var(--boxel-500));
-        }
-        .detail-groups {
-          display: grid;
-          gap: var(--boxel-sp-sm);
-        }
-        .detail-group {
-          border: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 60%,
-              transparent
-            );
-          border-radius: var(--boxel-border-radius);
-          padding: var(--boxel-sp-sm);
-        }
-        .detail-group.has-errors {
-          border-color: color-mix(
-            in oklch,
-            oklch(55% 0.22 25) 50%,
-            transparent
-          );
-        }
-        .detail-group-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          gap: var(--boxel-sp-xs);
-          padding-bottom: var(--boxel-sp-xs);
-          border-bottom: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 50%,
-              transparent
-            );
-          margin-bottom: var(--boxel-sp-xs);
-        }
         .detail-group-name {
           font-weight: 600;
           font-size: var(--boxel-font-size-sm);
@@ -303,6 +250,7 @@ export class EvalResult extends CardDef {
           font-size: var(--boxel-font-size-xs);
           font-weight: 500;
           color: var(--muted-foreground, var(--boxel-500));
+          text-transform: uppercase;
         }
         .group-status.clean {
           color: oklch(60% 0.17 150);
diff --git a/packages/software-factory/realm/instantiate-result.gts b/packages/software-factory/realm/instantiate-result.gts
index 4bce08fe2e..cd24a93d66 100644
--- a/packages/software-factory/realm/instantiate-result.gts
+++ b/packages/software-factory/realm/instantiate-result.gts
@@ -17,9 +17,12 @@ import { RealmPaths } from '@cardstack/runtime-common';
 import { Project, Issue } from './darkfactory.gts';
 import {
   ResultFittedCard,
+  resultDisplayStatus,
+  resultRunTitle,
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
+import { ResultDetailsSection } from './result-details-section.gts';
 
 import Box from '@cardstack/boxel-icons/box';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -152,13 +155,10 @@ export class InstantiateResult extends CardDef {
 
   static fitted = class Fitted extends Component<typeof InstantiateResult> {
     get displayStatus() {
-      if (
-        (this.args.model.cardsChecked ?? 0) === 0 &&
-        this.args.model.status === 'passed'
-      ) {
-        return 'empty';
-      }
-      return this.args.model.status;
+      return resultDisplayStatus(
+        this.args.model.cardsChecked,
+        this.args.model.status,
+      );
     }
 
     get titleText() {
@@ -206,25 +206,26 @@ export class InstantiateResult extends CardDef {
 
   static isolated = class Isolated extends Component<typeof InstantiateResult> {
     get displayStatus() {
-      if (
-        (this.args.model.cardsChecked ?? 0) === 0 &&
-        this.args.model.status === 'passed'
-      ) {
-        return 'empty';
-      }
-      return this.args.model.status;
+      return resultDisplayStatus(
+        this.args.model.cardsChecked,
+        this.args.model.status,
+      );
     }
 
     get titleText() {
-      return `Instantiate Run #${this.args.model.sequenceNumber ?? '?'}`;
+      return resultRunTitle('Instantiate', this.args.model.sequenceNumber);
     }
 
+    cardHasError = (card: InstantiateCardEntry) => card.hasError;
+
     <template>
       <ResultIsolatedCard
         @title={{this.titleText}}
         @status={{this.displayStatus}}
         @emptyLabel='No Cards'
         @durationMs={{@model.durationMs}}
+        @runAt={{@model.runAt}}
+        @completedAt={{@model.completedAt}}
         @hasProject={{@model.project}}
         @hasIssue={{@model.issue}}
         @hasError={{@model.errorMessage}}
@@ -239,81 +240,28 @@ export class InstantiateResult extends CardDef {
         <:issue><@fields.issue @format='embedded' /></:issue>
         <:error>{{@model.errorMessage}}</:error>
         <:details>
-          {{#if @model.cardResults.length}}
-            <section class='detail-section'>
-              <h2>Card Results</h2>
-              <div class='detail-groups'>
-                {{#each @model.cardResults as |cardResult|}}
-                  <div
-                    class='detail-group {{if cardResult.hasError "has-errors"}}'
-                  >
-                    <div class='detail-group-header'>
-                      <span
-                        class='detail-group-name'
-                      >{{cardResult.instancePath}}</span>
-                      {{#if cardResult.hasError}}
-                        <span class='group-status errors'>error</span>
-                      {{else}}
-                        <span class='group-status clean'>passed</span>
-                      {{/if}}
-                    </div>
-                    {{#if cardResult.error}}
-                      <pre class='error-code-block'>{{cardResult.error}}</pre>
-                    {{/if}}
-                  </div>
-                {{/each}}
-              </div>
-            </section>
-          {{/if}}
+          <ResultDetailsSection
+            @sectionTitle='Card Results'
+            @items={{@model.cardResults}}
+            @hasErrors={{this.cardHasError}}
+          >
+            <:header as |cardResult|>
+              <span class='detail-group-name'>{{cardResult.instancePath}}</span>
+              {{#if cardResult.hasError}}
+                <span class='group-status errors'>error</span>
+              {{else}}
+                <span class='group-status clean'>passed</span>
+              {{/if}}
+            </:header>
+            <:body as |cardResult|>
+              {{#if cardResult.error}}
+                <pre class='error-code-block'>{{cardResult.error}}</pre>
+              {{/if}}
+            </:body>
+          </ResultDetailsSection>
         </:details>
       </ResultIsolatedCard>
       <style scoped>
-        .detail-section {
-          display: grid;
-          gap: var(--boxel-sp-xs);
-        }
-        .detail-section > h2 {
-          margin: 0;
-          font: 600 var(--boxel-font-sm);
-          text-transform: uppercase;
-          letter-spacing: 0.06em;
-          color: var(--muted-foreground, var(--boxel-500));
-        }
-        .detail-groups {
-          display: grid;
-          gap: var(--boxel-sp-sm);
-        }
-        .detail-group {
-          border: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 60%,
-              transparent
-            );
-          border-radius: var(--boxel-border-radius);
-          padding: var(--boxel-sp-sm);
-        }
-        .detail-group.has-errors {
-          border-color: color-mix(
-            in oklch,
-            oklch(55% 0.22 25) 50%,
-            transparent
-          );
-        }
-        .detail-group-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          gap: var(--boxel-sp-xs);
-          padding-bottom: var(--boxel-sp-xs);
-          border-bottom: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 50%,
-              transparent
-            );
-          margin-bottom: var(--boxel-sp-xs);
-        }
         .detail-group-name {
           font-weight: 600;
           font-size: var(--boxel-font-size-sm);
@@ -325,6 +273,7 @@ export class InstantiateResult extends CardDef {
           font-size: var(--boxel-font-size-xs);
           font-weight: 500;
           color: var(--muted-foreground, var(--boxel-500));
+          text-transform: uppercase;
         }
         .group-status.clean {
           color: oklch(60% 0.17 150);
diff --git a/packages/software-factory/realm/lint-result.gts b/packages/software-factory/realm/lint-result.gts
index e7f790d2d1..040e7bb33a 100644
--- a/packages/software-factory/realm/lint-result.gts
+++ b/packages/software-factory/realm/lint-result.gts
@@ -15,9 +15,12 @@ import { eq } from '@cardstack/boxel-ui/helpers';
 import { Project, Issue } from './darkfactory.gts';
 import {
   ResultFittedCard,
+  resultDisplayStatus,
+  resultRunTitle,
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
+import { ResultDetailsSection } from './result-details-section.gts';
 
 import ListChecks from '@cardstack/boxel-icons/list-checks';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -254,13 +257,10 @@ export class LintResult extends CardDef {
 
   static fitted = class Fitted extends Component<typeof LintResult> {
     get displayStatus() {
-      if (
-        (this.args.model.filesChecked ?? 0) === 0 &&
-        this.args.model.status === 'passed'
-      ) {
-        return 'empty';
-      }
-      return this.args.model.status;
+      return resultDisplayStatus(
+        this.args.model.filesChecked,
+        this.args.model.status,
+      );
     }
 
     get titleText() {
@@ -315,25 +315,26 @@ export class LintResult extends CardDef {
 
   static isolated = class Isolated extends Component<typeof LintResult> {
     get displayStatus() {
-      if (
-        (this.args.model.filesChecked ?? 0) === 0 &&
-        this.args.model.status === 'passed'
-      ) {
-        return 'empty';
-      }
-      return this.args.model.status;
+      return resultDisplayStatus(
+        this.args.model.filesChecked,
+        this.args.model.status,
+      );
     }
 
     get titleText() {
-      return `Lint Run #${this.args.model.sequenceNumber ?? '?'}`;
+      return resultRunTitle('Lint', this.args.model.sequenceNumber);
     }
 
+    fileHasErrors = (file: LintFileResult) => !file.passed;
+
     <template>
       <ResultIsolatedCard
         @title={{this.titleText}}
         @status={{this.displayStatus}}
         @emptyLabel='No Files'
         @durationMs={{@model.durationMs}}
+        @runAt={{@model.runAt}}
+        @completedAt={{@model.completedAt}}
         @hasProject={{@model.project}}
         @hasIssue={{@model.issue}}
         @hasError={{@model.errorMessage}}
@@ -350,119 +351,65 @@ export class LintResult extends CardDef {
         <:issue><@fields.issue @format='embedded' /></:issue>
         <:error>{{@model.errorMessage}}</:error>
         <:details>
-          {{#if @model.fileResults.length}}
-            <section class='detail-section'>
-              <h2>File Results</h2>
-              <div class='detail-groups'>
-                {{#each @model.fileResults as |fileResult|}}
-                  <div
-                    class='detail-group
-                      {{unless fileResult.passed "has-errors"}}'
-                  >
-                    <div class='detail-group-header'>
-                      <span class='detail-group-name'>{{fileResult.file}}</span>
-                      {{#if fileResult.passed}}
-                        <span class='group-status clean'>clean</span>
+          <ResultDetailsSection
+            @sectionTitle='File Results'
+            @items={{@model.fileResults}}
+            @hasErrors={{this.fileHasErrors}}
+          >
+            <:header as |fileResult|>
+              <span class='detail-group-name'>{{fileResult.file}}</span>
+              {{#if fileResult.passed}}
+                <span class='group-status clean'>clean</span>
+              {{else}}
+                <span class='group-status errors'>
+                  {{fileResult.errorCount}}
+                  error(s)
+                  {{#if fileResult.warningCount}}
+                    ,
+                    {{fileResult.warningCount}}
+                    warning(s)
+                  {{/if}}
+                </span>
+              {{/if}}
+            </:header>
+            <:body as |fileResult|>
+              {{#if fileResult.totalCount}}
+                <div class='violation-rows'>
+                  {{#each fileResult.violations as |violation|}}
+                    <div class='violation-row'>
+                      {{#if (eq violation.severity 'error')}}
+                        <CircleX
+                          class='sev-icon sev-error'
+                          width='14'
+                          height='14'
+                          aria-label='error'
+                        />
                       {{else}}
-                        <span class='group-status errors'>
-                          {{fileResult.errorCount}}
-                          error(s)
-                          {{#if fileResult.warningCount}}
-                            ,
-                            {{fileResult.warningCount}}
-                            warning(s)
-                          {{/if}}
-                        </span>
+                        <CircleAlert
+                          class='sev-icon sev-warning'
+                          width='14'
+                          height='14'
+                          aria-label='warning'
+                        />
+                      {{/if}}
+                      <span
+                        class='violation-location'
+                      >{{violation.line}}:{{violation.column}}</span>
+                      <span
+                        class='violation-message'
+                      >{{violation.message}}</span>
+                      {{#if violation.rule}}
+                        <span class='violation-rule'>[{{violation.rule}}]</span>
                       {{/if}}
                     </div>
-                    {{#if fileResult.totalCount}}
-                      <div class='violation-rows'>
-                        {{#each fileResult.violations as |violation|}}
-                          <div class='violation-row'>
-                            {{#if (eq violation.severity 'error')}}
-                              <CircleX
-                                class='sev-icon sev-error'
-                                width='14'
-                                height='14'
-                                aria-label='error'
-                              />
-                            {{else}}
-                              <CircleAlert
-                                class='sev-icon sev-warning'
-                                width='14'
-                                height='14'
-                                aria-label='warning'
-                              />
-                            {{/if}}
-                            <span
-                              class='violation-location'
-                            >{{violation.line}}:{{violation.column}}</span>
-                            <span
-                              class='violation-message'
-                            >{{violation.message}}</span>
-                            {{#if violation.rule}}
-                              <span
-                                class='violation-rule'
-                              >[{{violation.rule}}]</span>
-                            {{/if}}
-                          </div>
-                        {{/each}}
-                      </div>
-                    {{/if}}
-                  </div>
-                {{/each}}
-              </div>
-            </section>
-          {{/if}}
+                  {{/each}}
+                </div>
+              {{/if}}
+            </:body>
+          </ResultDetailsSection>
         </:details>
       </ResultIsolatedCard>
       <style scoped>
-        .detail-section {
-          display: grid;
-          gap: var(--boxel-sp-xs);
-        }
-        .detail-section > h2 {
-          margin: 0;
-          font: 600 var(--boxel-font-sm);
-          text-transform: uppercase;
-          letter-spacing: 0.06em;
-          color: var(--muted-foreground, var(--boxel-500));
-        }
-        .detail-groups {
-          display: grid;
-          gap: var(--boxel-sp-sm);
-        }
-        .detail-group {
-          border: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 60%,
-              transparent
-            );
-          border-radius: var(--boxel-border-radius);
-          padding: var(--boxel-sp-sm);
-        }
-        .detail-group.has-errors {
-          border-color: color-mix(
-            in oklch,
-            oklch(55% 0.22 25) 50%,
-            transparent
-          );
-        }
-        .detail-group-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          gap: var(--boxel-sp-xs);
-          padding-bottom: var(--boxel-sp-xs);
-          border-bottom: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 50%,
-              transparent
-            );
-          margin-bottom: var(--boxel-sp-xs);
-        }
         .detail-group-name {
           font-weight: 600;
           font-size: var(--boxel-font-size-sm);
@@ -474,6 +421,7 @@ export class LintResult extends CardDef {
           font-size: var(--boxel-font-size-xs);
           font-weight: 500;
           color: var(--muted-foreground, var(--boxel-500));
+          text-transform: uppercase;
         }
         .group-status.clean {
           color: oklch(60% 0.17 150);
diff --git a/packages/software-factory/realm/parse-result.gts b/packages/software-factory/realm/parse-result.gts
index e2bbf5d920..95a2ed9932 100644
--- a/packages/software-factory/realm/parse-result.gts
+++ b/packages/software-factory/realm/parse-result.gts
@@ -14,9 +14,12 @@ import enumField from 'https://cardstack.com/base/enum';
 import { Project, Issue } from './darkfactory.gts';
 import {
   ResultFittedCard,
+  resultDisplayStatus,
+  resultRunTitle,
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
+import { ResultDetailsSection } from './result-details-section.gts';
 
 import FileCode from '@cardstack/boxel-icons/file-code';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -201,13 +204,10 @@ export class ParseResult extends CardDef {
 
   static fitted = class Fitted extends Component<typeof ParseResult> {
     get displayStatus() {
-      if (
-        (this.args.model.filesChecked ?? 0) === 0 &&
-        this.args.model.status === 'passed'
-      ) {
-        return 'empty';
-      }
-      return this.args.model.status;
+      return resultDisplayStatus(
+        this.args.model.filesChecked,
+        this.args.model.status,
+      );
     }
 
     get titleText() {
@@ -255,25 +255,26 @@ export class ParseResult extends CardDef {
 
   static isolated = class Isolated extends Component<typeof ParseResult> {
     get displayStatus() {
-      if (
-        (this.args.model.filesChecked ?? 0) === 0 &&
-        this.args.model.status === 'passed'
-      ) {
-        return 'empty';
-      }
-      return this.args.model.status;
+      return resultDisplayStatus(
+        this.args.model.filesChecked,
+        this.args.model.status,
+      );
     }
 
     get titleText() {
-      return `Parse Run #${this.args.model.sequenceNumber ?? '?'}`;
+      return resultRunTitle('Parse', this.args.model.sequenceNumber);
     }
 
+    fileHasErrors = (file: ParseFileResult) => !file.passed;
+
     <template>
       <ResultIsolatedCard
         @title={{this.titleText}}
         @status={{this.displayStatus}}
         @emptyLabel='No Files'
         @durationMs={{@model.durationMs}}
+        @runAt={{@model.runAt}}
+        @completedAt={{@model.completedAt}}
         @hasProject={{@model.project}}
         @hasIssue={{@model.issue}}
         @hasError={{@model.errorMessage}}
@@ -288,104 +289,48 @@ export class ParseResult extends CardDef {
         <:issue><@fields.issue @format='embedded' /></:issue>
         <:error>{{@model.errorMessage}}</:error>
         <:details>
-          {{#if @model.fileResults.length}}
-            <section class='detail-section'>
-              <h2>File Results</h2>
-              <div class='detail-groups'>
-                {{#each @model.fileResults as |fileResult|}}
-                  <div
-                    class='detail-group
-                      {{unless fileResult.passed "has-errors"}}'
-                  >
-                    <div class='detail-group-header'>
-                      <span
-                        class='detail-group-name'
-                      >{{fileResult.displayFile}}</span>
-                      {{#if fileResult.passed}}
-                        <span class='group-status clean'>valid</span>
-                      {{else}}
-                        <span class='group-status errors'>
-                          {{fileResult.errorCount}}
-                          error(s)
-                        </span>
+          <ResultDetailsSection
+            @sectionTitle='File Results'
+            @items={{@model.fileResults}}
+            @hasErrors={{this.fileHasErrors}}
+          >
+            <:header as |fileResult|>
+              <span class='detail-group-name'>{{fileResult.displayFile}}</span>
+              {{#if fileResult.passed}}
+                <span class='group-status clean'>valid</span>
+              {{else}}
+                <span class='group-status errors'>
+                  {{fileResult.errorCount}}
+                  error(s)
+                </span>
+              {{/if}}
+            </:header>
+            <:body as |fileResult|>
+              {{#if fileResult.errorCount}}
+                <div class='error-rows'>
+                  {{#each fileResult.errors as |error|}}
+                    <div class='error-row'>
+                      <CircleX
+                        class='sev-icon sev-error'
+                        width='14'
+                        height='14'
+                        aria-label='error'
+                      />
+                      {{#if error.line}}
+                        <span
+                          class='error-location'
+                        >{{error.line}}:{{error.column}}</span>
                       {{/if}}
+                      <span class='error-message-text'>{{error.message}}</span>
                     </div>
-                    {{#if fileResult.errorCount}}
-                      <div class='error-rows'>
-                        {{#each fileResult.errors as |error|}}
-                          <div class='error-row'>
-                            <CircleX
-                              class='sev-icon sev-error'
-                              width='14'
-                              height='14'
-                              aria-label='error'
-                            />
-                            {{#if error.line}}
-                              <span
-                                class='error-location'
-                              >{{error.line}}:{{error.column}}</span>
-                            {{/if}}
-                            <span
-                              class='error-message-text'
-                            >{{error.message}}</span>
-                          </div>
-                        {{/each}}
-                      </div>
-                    {{/if}}
-                  </div>
-                {{/each}}
-              </div>
-            </section>
-          {{/if}}
+                  {{/each}}
+                </div>
+              {{/if}}
+            </:body>
+          </ResultDetailsSection>
         </:details>
       </ResultIsolatedCard>
       <style scoped>
-        .detail-section {
-          display: grid;
-          gap: var(--boxel-sp-xs);
-        }
-        .detail-section > h2 {
-          margin: 0;
-          font: 600 var(--boxel-font-sm);
-          text-transform: uppercase;
-          letter-spacing: 0.06em;
-          color: var(--muted-foreground, var(--boxel-500));
-        }
-        .detail-groups {
-          display: grid;
-          gap: var(--boxel-sp-sm);
-        }
-        .detail-group {
-          border: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 60%,
-              transparent
-            );
-          border-radius: var(--boxel-border-radius);
-          padding: var(--boxel-sp-sm);
-        }
-        .detail-group.has-errors {
-          border-color: color-mix(
-            in oklch,
-            oklch(55% 0.22 25) 50%,
-            transparent
-          );
-        }
-        .detail-group-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          gap: var(--boxel-sp-xs);
-          padding-bottom: var(--boxel-sp-xs);
-          border-bottom: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 50%,
-              transparent
-            );
-          margin-bottom: var(--boxel-sp-xs);
-        }
         .detail-group-name {
           font-weight: 600;
           font-size: var(--boxel-font-size-sm);
@@ -397,6 +342,7 @@ export class ParseResult extends CardDef {
           font-size: var(--boxel-font-size-xs);
           font-weight: 500;
           color: var(--muted-foreground, var(--boxel-500));
+          text-transform: uppercase;
         }
         .group-status.clean {
           color: oklch(60% 0.17 150);
diff --git a/packages/software-factory/realm/result-details-section.gts b/packages/software-factory/realm/result-details-section.gts
new file mode 100644
index 0000000000..8a0d96b738
--- /dev/null
+++ b/packages/software-factory/realm/result-details-section.gts
@@ -0,0 +1,87 @@
+import GlimmerComponent from '@glimmer/component';
+
+interface Signature<T> {
+  Args: {
+    // Section heading, e.g. "File Results".
+    sectionTitle: string;
+    // The per-file / per-module / per-card entries to render as groups.
+    items: T[] | undefined;
+    // Per-item predicate; truthy marks the group with the error border.
+    hasErrors: (item: T) => unknown;
+  };
+  Blocks: {
+    // Rendered inside the group header row (name + status badge).
+    header: [item: T];
+    // Rendered below the header (the card-specific row list or error block).
+    body: [item: T];
+  };
+  Element: HTMLElement;
+}
+
+// Shared scaffold for the detail list shown in every result card's isolated
+// view: the section heading, the bordered groups, and the group header row.
+// Callers supply the header contents and the per-item body via blocks, since
+// those differ per result type (violation rows, error blocks, test rows, …).
+export class ResultDetailsSection<T> extends GlimmerComponent<Signature<T>> {
+  <template>
+    {{#if @items.length}}
+      <section class='detail-section' ...attributes>
+        <h2>{{@sectionTitle}}</h2>
+        <div class='detail-groups'>
+          {{#each @items as |item|}}
+            <div class='detail-group {{if (@hasErrors item) "has-errors"}}'>
+              <div class='detail-group-header'>
+                {{yield item to='header'}}
+              </div>
+              {{yield item to='body'}}
+            </div>
+          {{/each}}
+        </div>
+      </section>
+    {{/if}}
+    <style scoped>
+      .detail-section {
+        display: grid;
+        gap: var(--boxel-sp-xs);
+      }
+      .detail-section > h2 {
+        margin: 0;
+        font: 600 var(--boxel-font-sm);
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        color: var(--muted-foreground, var(--boxel-500));
+      }
+      .detail-groups {
+        display: grid;
+        gap: var(--boxel-sp-sm);
+      }
+      .detail-group {
+        border: 1px solid
+          color-mix(
+            in oklch,
+            var(--border, var(--boxel-border-color)) 60%,
+            transparent
+          );
+        border-radius: var(--boxel-border-radius);
+        padding: var(--boxel-sp-sm);
+      }
+      .detail-group.has-errors {
+        border-color: color-mix(in oklch, oklch(55% 0.22 25) 50%, transparent);
+      }
+      .detail-group-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--boxel-sp-xs);
+        padding-bottom: var(--boxel-sp-xs);
+        border-bottom: 1px solid
+          color-mix(
+            in oklch,
+            var(--border, var(--boxel-border-color)) 50%,
+            transparent
+          );
+        margin-bottom: var(--boxel-sp-xs);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/software-factory/realm/result-fitted-card.gts b/packages/software-factory/realm/result-fitted-card.gts
index 20d330e814..7f726fe392 100644
--- a/packages/software-factory/realm/result-fitted-card.gts
+++ b/packages/software-factory/realm/result-fitted-card.gts
@@ -34,6 +34,24 @@ export function resultStatusLabel(status?: string, emptyLabel?: string) {
   }
 }
 
+// Resolve the display status for a result view, collapsing a passed-but-empty
+// run (nothing checked) to the synthetic 'empty' status the status helpers
+// understand. Shared by every result card's fitted and isolated views.
+export function resultDisplayStatus(
+  itemCount: number | undefined,
+  status: string | undefined,
+) {
+  if ((itemCount ?? 0) === 0 && status === 'passed') {
+    return 'empty';
+  }
+  return status;
+}
+
+// Title for a result card's isolated view, e.g. "Lint Run #3".
+export function resultRunTitle(label: string, sequenceNumber?: number) {
+  return `${label} Run #${sequenceNumber ?? '?'}`;
+}
+
 export function resultStatusColor(status?: string) {
   switch (status) {
     case 'passed':
diff --git a/packages/software-factory/realm/result-isolated-card.gts b/packages/software-factory/realm/result-isolated-card.gts
index 39234cc171..3104a42ae6 100644
--- a/packages/software-factory/realm/result-isolated-card.gts
+++ b/packages/software-factory/realm/result-isolated-card.gts
@@ -1,6 +1,8 @@
 import GlimmerComponent from '@glimmer/component';
+import { formatDateTime } from '@cardstack/boxel-ui/helpers';
 import { StatusPill } from './status-pill.gts';
 import { resultStatusColor, resultStatusLabel } from './result-fitted-card.gts';
+import CalendarTime from '@cardstack/boxel-icons/calendar-time';
 import Clock from '@cardstack/boxel-icons/clock';
 
 interface Signature {
@@ -11,6 +13,9 @@ interface Signature {
     // Label shown for the 'empty' status (e.g. "No Files").
     emptyLabel?: string;
     durationMs?: number;
+    // When the run started / finished; the later of the two is surfaced.
+    runAt?: Date;
+    completedAt?: Date;
     // Gate the optional sections; the matching block supplies the content.
     hasProject?: unknown;
     hasIssue?: unknown;
@@ -35,6 +40,12 @@ export class ResultIsolatedCard extends GlimmerComponent<Signature> {
     return resultStatusColor(this.args.status);
   }
 
+  // Prefer the completion time; fall back to the start time for runs still
+  // in flight (or older results that only recorded when they began).
+  get timestamp() {
+    return this.args.completedAt ?? this.args.runAt;
+  }
+
   <template>
     <article class='result-surface' ...attributes>
       <header class='result-header'>
@@ -55,6 +66,16 @@ export class ResultIsolatedCard extends GlimmerComponent<Signature> {
               />{{@durationMs}}ms
             </span>
           {{/if}}
+          {{#if this.timestamp}}
+            <span class='result-timestamp'>
+              <CalendarTime width='13' height='13' aria-hidden='true' />
+              {{formatDateTime
+                this.timestamp
+                dateStyle='medium'
+                timeStyle='short'
+              }}
+            </span>
+          {{/if}}
         </div>
       </header>
 
@@ -116,7 +137,8 @@ export class ResultIsolatedCard extends GlimmerComponent<Signature> {
         font-size: var(--boxel-font-size-sm);
         color: var(--muted-foreground, var(--boxel-500));
       }
-      .result-duration {
+      .result-duration,
+      .result-timestamp {
         display: inline-flex;
         align-items: center;
         gap: 0.3em;
diff --git a/packages/software-factory/realm/test-results.gts b/packages/software-factory/realm/test-results.gts
index e713b52f0d..bb674b81cf 100644
--- a/packages/software-factory/realm/test-results.gts
+++ b/packages/software-factory/realm/test-results.gts
@@ -16,9 +16,12 @@ import { eq } from '@cardstack/boxel-ui/helpers';
 import { Project, Issue } from './darkfactory.gts';
 import {
   ResultFittedCard,
+  resultDisplayStatus,
+  resultRunTitle,
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
+import { ResultDetailsSection } from './result-details-section.gts';
 
 import FlaskConical from '@cardstack/boxel-icons/flask-conical';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -276,10 +279,7 @@ export class TestRun extends CardDef {
     }
 
     get displayStatus() {
-      if (this.total === 0 && this.args.model.status === 'passed') {
-        return 'empty';
-      }
-      return this.args.model.status;
+      return resultDisplayStatus(this.total, this.args.model.status);
     }
 
     get titleText() {
@@ -342,22 +342,23 @@ export class TestRun extends CardDef {
     }
 
     get displayStatus() {
-      if (this.total === 0 && this.args.model.status === 'passed') {
-        return 'empty';
-      }
-      return this.args.model.status;
+      return resultDisplayStatus(this.total, this.args.model.status);
     }
 
     get titleText() {
-      return `Test Run #${this.args.model.sequenceNumber ?? '?'}`;
+      return resultRunTitle('Test', this.args.model.sequenceNumber);
     }
 
+    moduleHasFailures = (module: TestModuleResult) => module.failedCount;
+
     <template>
       <ResultIsolatedCard
         @title={{this.titleText}}
         @status={{this.displayStatus}}
         @emptyLabel='No Tests'
         @durationMs={{@model.durationMs}}
+        @runAt={{@model.runAt}}
+        @completedAt={{@model.completedAt}}
         @hasProject={{@model.project}}
         @hasIssue={{@model.issue}}
         @hasError={{@model.errorMessage}}
@@ -372,163 +373,105 @@ export class TestRun extends CardDef {
         <:issue><@fields.issue @format='embedded' /></:issue>
         <:error>{{@model.errorMessage}}</:error>
         <:details>
-          {{#if @model.moduleResults.length}}
-            <section class='detail-section'>
-              <h2>Test Results</h2>
-              <div class='detail-groups'>
-                {{#each @model.moduleResults as |moduleResult|}}
-                  <div
-                    class='detail-group
-                      {{if moduleResult.failedCount "has-errors"}}'
-                  >
-                    <div class='detail-group-header'>
-                      <span
-                        class='detail-group-name'
-                      >{{moduleResult.moduleName}}</span>
-                      {{#if moduleResult.isComplete}}
-                        <span
-                          class='group-status
-                            {{if
-                              moduleResult.failedCount
-                              "errors"
-                              (if moduleResult.passedCount "clean" "muted")
-                            }}'
-                        >
-                          {{#if moduleResult.failedCount}}
-                            {{moduleResult.passedCount}}
-                            passed,
-                            {{moduleResult.failedCount}}
-                            failed
-                          {{else}}
-                            {{moduleResult.passedCount}}/{{moduleResult.totalCount}}
-                            passed
-                          {{/if}}
-                          {{#if moduleResult.skippedCount}}
-                            ({{moduleResult.skippedCount}}
-                            skipped)
-                          {{/if}}
-                        </span>
+          <ResultDetailsSection
+            @sectionTitle='Test Results'
+            @items={{@model.moduleResults}}
+            @hasErrors={{this.moduleHasFailures}}
+          >
+            <:header as |moduleResult|>
+              <span class='detail-group-name'>{{moduleResult.moduleName}}</span>
+              {{#if moduleResult.isComplete}}
+                <span
+                  class='group-status
+                    {{if
+                      moduleResult.failedCount
+                      "errors"
+                      (if moduleResult.passedCount "clean" "muted")
+                    }}'
+                >
+                  {{#if moduleResult.failedCount}}
+                    {{moduleResult.passedCount}}
+                    passed,
+                    {{moduleResult.failedCount}}
+                    failed
+                  {{else}}
+                    {{moduleResult.passedCount}}/{{moduleResult.totalCount}}
+                    passed
+                  {{/if}}
+                  {{#if moduleResult.skippedCount}}
+                    ({{moduleResult.skippedCount}}
+                    skipped)
+                  {{/if}}
+                </span>
+              {{else}}
+                <span class='group-status running'>running…</span>
+              {{/if}}
+            </:header>
+            <:body as |moduleResult|>
+              <div class='test-rows'>
+                {{#each moduleResult.results as |result|}}
+                  <div class='test-row'>
+                    <div class='test-row-main'>
+                      {{#if (eq result.status 'passed')}}
+                        <CircleCheck
+                          class='test-icon icon-passed'
+                          width='14'
+                          height='14'
+                          aria-label='passed'
+                        />
+                      {{else if (eq result.status 'failed')}}
+                        <CircleX
+                          class='test-icon icon-failed'
+                          width='14'
+                          height='14'
+                          aria-label='failed'
+                        />
+                      {{else if (eq result.status 'error')}}
+                        <CircleAlert
+                          class='test-icon icon-error'
+                          width='14'
+                          height='14'
+                          aria-label='error'
+                        />
+                      {{else if (eq result.status 'skipped')}}
+                        <CircleMinus
+                          class='test-icon icon-skipped'
+                          width='14'
+                          height='14'
+                          aria-label='skipped'
+                        />
                       {{else}}
-                        <span class='group-status running'>running…</span>
+                        <CircleDashed
+                          class='test-icon icon-pending'
+                          width='14'
+                          height='14'
+                          aria-label='pending'
+                        />
+                      {{/if}}
+                      <span class='test-name'>{{result.testName}}</span>
+                      {{#if result.durationMs}}
+                        <span
+                          class='test-duration'
+                        >{{result.durationMs}}ms</span>
                       {{/if}}
                     </div>
-                    <div class='test-rows'>
-                      {{#each moduleResult.results as |result|}}
-                        <div class='test-row'>
-                          <div class='test-row-main'>
-                            {{#if (eq result.status 'passed')}}
-                              <CircleCheck
-                                class='test-icon icon-passed'
-                                width='14'
-                                height='14'
-                                aria-label='passed'
-                              />
-                            {{else if (eq result.status 'failed')}}
-                              <CircleX
-                                class='test-icon icon-failed'
-                                width='14'
-                                height='14'
-                                aria-label='failed'
-                              />
-                            {{else if (eq result.status 'error')}}
-                              <CircleAlert
-                                class='test-icon icon-error'
-                                width='14'
-                                height='14'
-                                aria-label='error'
-                              />
-                            {{else if (eq result.status 'skipped')}}
-                              <CircleMinus
-                                class='test-icon icon-skipped'
-                                width='14'
-                                height='14'
-                                aria-label='skipped'
-                              />
-                            {{else}}
-                              <CircleDashed
-                                class='test-icon icon-pending'
-                                width='14'
-                                height='14'
-                                aria-label='pending'
-                              />
-                            {{/if}}
-                            <span class='test-name'>{{result.testName}}</span>
-                            {{#if result.durationMs}}
-                              <span
-                                class='test-duration'
-                              >{{result.durationMs}}ms</span>
-                            {{/if}}
-                          </div>
-                          {{#if result.message}}
-                            <pre
-                              class='failure-message'
-                            >{{result.message}}</pre>
-                          {{/if}}
-                          {{#if result.stackTrace}}
-                            <pre
-                              class='failure-stack'
-                            >{{result.stackTrace}}</pre>
-                          {{/if}}
-                        </div>
-                      {{/each}}
-                    </div>
+                    {{#if result.message}}
+                      <pre class='failure-message'>{{result.message}}</pre>
+                    {{/if}}
+                    {{#if result.stackTrace}}
+                      <pre class='failure-stack'>{{result.stackTrace}}</pre>
+                    {{/if}}
                   </div>
                 {{/each}}
               </div>
-            </section>
-          {{/if}}
+            </:body>
+          </ResultDetailsSection>
         </:details>
       </ResultIsolatedCard>
       <style scoped>
         .skipped {
           font-style: italic;
         }
-        .detail-section {
-          display: grid;
-          gap: var(--boxel-sp-xs);
-        }
-        .detail-section > h2 {
-          margin: 0;
-          font: 600 var(--boxel-font-sm);
-          text-transform: uppercase;
-          letter-spacing: 0.06em;
-          color: var(--muted-foreground, var(--boxel-500));
-        }
-        .detail-groups {
-          display: grid;
-          gap: var(--boxel-sp-sm);
-        }
-        .detail-group {
-          border: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 60%,
-              transparent
-            );
-          border-radius: var(--boxel-border-radius);
-          padding: var(--boxel-sp-sm);
-        }
-        .detail-group.has-errors {
-          border-color: color-mix(
-            in oklch,
-            oklch(55% 0.22 25) 50%,
-            transparent
-          );
-        }
-        .detail-group-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          gap: var(--boxel-sp-xs);
-          padding-bottom: var(--boxel-sp-xs);
-          border-bottom: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 50%,
-              transparent
-            );
-          margin-bottom: var(--boxel-sp-xs);
-        }
         .detail-group-name {
           font-weight: 600;
           font-size: var(--boxel-font-size-sm);
@@ -539,6 +482,7 @@ export class TestRun extends CardDef {
           font-size: var(--boxel-font-size-xs);
           font-weight: 500;
           color: var(--muted-foreground, var(--boxel-500));
+          text-transform: uppercase;
         }
         .group-status.clean {
           color: oklch(60% 0.17 150);

From 0808c2a4740e180c0c9a309095776bb370c3a44b Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Tue, 30 Jun 2026 11:42:39 -0400
Subject: [PATCH 19/24] set edit templates

---
 packages/software-factory/realm/eval-result.gts        | 2 ++
 packages/software-factory/realm/instantiate-result.gts | 4 ++++
 packages/software-factory/realm/lint-result.gts        | 2 ++
 packages/software-factory/realm/parse-result.gts       | 2 ++
 packages/software-factory/realm/test-results.gts       | 2 ++
 5 files changed, 12 insertions(+)

diff --git a/packages/software-factory/realm/eval-result.gts b/packages/software-factory/realm/eval-result.gts
index b75d336505..0acbc76ffa 100644
--- a/packages/software-factory/realm/eval-result.gts
+++ b/packages/software-factory/realm/eval-result.gts
@@ -275,4 +275,6 @@ export class EvalResult extends CardDef {
       </style>
     </template>
   };
+
+  static edit = this.isolated;
 }
diff --git a/packages/software-factory/realm/instantiate-result.gts b/packages/software-factory/realm/instantiate-result.gts
index cd24a93d66..13ff055cd5 100644
--- a/packages/software-factory/realm/instantiate-result.gts
+++ b/packages/software-factory/realm/instantiate-result.gts
@@ -23,6 +23,8 @@ import {
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
 import { ResultDetailsSection } from './result-details-section.gts';
+import { ResultEditCard } from './result-edit-card.gts';
+import { FieldContainer } from '@cardstack/boxel-ui/components';
 
 import Box from '@cardstack/boxel-icons/box';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -298,4 +300,6 @@ export class InstantiateResult extends CardDef {
       </style>
     </template>
   };
+
+  static edit = this.isolated;
 }
diff --git a/packages/software-factory/realm/lint-result.gts b/packages/software-factory/realm/lint-result.gts
index 040e7bb33a..7ddb014ec8 100644
--- a/packages/software-factory/realm/lint-result.gts
+++ b/packages/software-factory/realm/lint-result.gts
@@ -466,4 +466,6 @@ export class LintResult extends CardDef {
       </style>
     </template>
   };
+
+  static edit = this.isolated;
 }
diff --git a/packages/software-factory/realm/parse-result.gts b/packages/software-factory/realm/parse-result.gts
index 95a2ed9932..b1853e5147 100644
--- a/packages/software-factory/realm/parse-result.gts
+++ b/packages/software-factory/realm/parse-result.gts
@@ -379,4 +379,6 @@ export class ParseResult extends CardDef {
       </style>
     </template>
   };
+
+  static edit = this.isolated;
 }
diff --git a/packages/software-factory/realm/test-results.gts b/packages/software-factory/realm/test-results.gts
index bb674b81cf..961165870e 100644
--- a/packages/software-factory/realm/test-results.gts
+++ b/packages/software-factory/realm/test-results.gts
@@ -543,4 +543,6 @@ export class TestRun extends CardDef {
       </style>
     </template>
   };
+
+  static edit = this.isolated;
 }

From 119b93841ce33c99ea9995b5602ab605727c6105 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Tue, 30 Jun 2026 11:48:42 -0400
Subject: [PATCH 20/24] update fitted error display

---
 packages/software-factory/realm/eval-result.gts       |  9 +++++----
 .../software-factory/realm/instantiate-result.gts     | 11 +++++------
 packages/software-factory/realm/lint-result.gts       |  9 +++++----
 packages/software-factory/realm/parse-result.gts      |  9 +++++----
 packages/software-factory/realm/test-results.gts      |  9 +++++----
 5 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/software-factory/realm/eval-result.gts b/packages/software-factory/realm/eval-result.gts
index 0acbc76ffa..d5ebd56173 100644
--- a/packages/software-factory/realm/eval-result.gts
+++ b/packages/software-factory/realm/eval-result.gts
@@ -144,13 +144,14 @@ export class EvalResult extends CardDef {
 
     get metaItems(): ResultMetaItem[] {
       let m = this.args.model;
-      let items: ResultMetaItem[] = [
-        {
+      let items: ResultMetaItem[] = [];
+      if (m.modulesChecked) {
+        items.push({
           icon: CircleCheck,
           text: `${m.modulesPassed}/${m.modulesChecked} passed`,
           tone: 'clean',
-        },
-      ];
+        });
+      }
       if (m.modulesWithErrors) {
         items.push({
           icon: CircleX,
diff --git a/packages/software-factory/realm/instantiate-result.gts b/packages/software-factory/realm/instantiate-result.gts
index 13ff055cd5..acdf6c6bb1 100644
--- a/packages/software-factory/realm/instantiate-result.gts
+++ b/packages/software-factory/realm/instantiate-result.gts
@@ -23,8 +23,6 @@ import {
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
 import { ResultDetailsSection } from './result-details-section.gts';
-import { ResultEditCard } from './result-edit-card.gts';
-import { FieldContainer } from '@cardstack/boxel-ui/components';
 
 import Box from '@cardstack/boxel-icons/box';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -169,13 +167,14 @@ export class InstantiateResult extends CardDef {
 
     get metaItems(): ResultMetaItem[] {
       let m = this.args.model;
-      let items: ResultMetaItem[] = [
-        {
+      let items: ResultMetaItem[] = [];
+      if (m.cardsChecked) {
+        items.push({
           icon: CircleCheck,
           text: `${m.cardsPassed}/${m.cardsChecked} passed`,
           tone: 'clean',
-        },
-      ];
+        });
+      }
       if (m.cardsWithErrors) {
         items.push({
           icon: CircleX,
diff --git a/packages/software-factory/realm/lint-result.gts b/packages/software-factory/realm/lint-result.gts
index 7ddb014ec8..4a10fd502a 100644
--- a/packages/software-factory/realm/lint-result.gts
+++ b/packages/software-factory/realm/lint-result.gts
@@ -269,13 +269,14 @@ export class LintResult extends CardDef {
 
     get metaItems(): ResultMetaItem[] {
       let m = this.args.model;
-      let items: ResultMetaItem[] = [
-        {
+      let items: ResultMetaItem[] = [];
+      if (m.filesChecked) {
+        items.push({
           icon: CircleCheck,
           text: `${m.filesClean}/${m.filesChecked} clean`,
           tone: 'clean',
-        },
-      ];
+        });
+      }
       if (m.totalErrors) {
         items.push({
           icon: CircleX,
diff --git a/packages/software-factory/realm/parse-result.gts b/packages/software-factory/realm/parse-result.gts
index b1853e5147..15f8b340c0 100644
--- a/packages/software-factory/realm/parse-result.gts
+++ b/packages/software-factory/realm/parse-result.gts
@@ -216,13 +216,14 @@ export class ParseResult extends CardDef {
 
     get metaItems(): ResultMetaItem[] {
       let m = this.args.model;
-      let items: ResultMetaItem[] = [
-        {
+      let items: ResultMetaItem[] = [];
+      if (m.filesChecked) {
+        items.push({
           icon: CircleCheck,
           text: `${m.filesClean}/${m.filesChecked} valid`,
           tone: 'clean',
-        },
-      ];
+        });
+      }
       if (m.totalErrors) {
         items.push({
           icon: CircleX,
diff --git a/packages/software-factory/realm/test-results.gts b/packages/software-factory/realm/test-results.gts
index 961165870e..84ef1de56e 100644
--- a/packages/software-factory/realm/test-results.gts
+++ b/packages/software-factory/realm/test-results.gts
@@ -288,13 +288,14 @@ export class TestRun extends CardDef {
 
     get metaItems(): ResultMetaItem[] {
       let m = this.args.model;
-      let items: ResultMetaItem[] = [
-        {
+      let items: ResultMetaItem[] = [];
+      if (this.total) {
+        items.push({
           icon: CircleCheck,
           text: `${m.passedCount}/${this.total} passed`,
           tone: 'clean',
-        },
-      ];
+        });
+      }
       if (m.failedCount) {
         items.push({
           icon: CircleX,

From 5fb0229f203bffda7f7c3e2160e11e3f0d5fb1ea Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Tue, 30 Jun 2026 13:14:07 -0400
Subject: [PATCH 21/24] refactor validation cards to have a common base def

---
 .../software-factory/realm/eval-result.gts    | 35 ++-----------
 .../realm/instantiate-result.gts              | 35 ++-----------
 .../software-factory/realm/lint-result.gts    | 34 ++-----------
 .../software-factory/realm/parse-result.gts   | 35 ++-----------
 .../software-factory/realm/test-results.gts   | 34 ++-----------
 .../realm/validation-result.gts               | 51 +++++++++++++++++++
 6 files changed, 76 insertions(+), 148 deletions(-)
 create mode 100644 packages/software-factory/realm/validation-result.gts

diff --git a/packages/software-factory/realm/eval-result.gts b/packages/software-factory/realm/eval-result.gts
index d5ebd56173..cea10792bc 100644
--- a/packages/software-factory/realm/eval-result.gts
+++ b/packages/software-factory/realm/eval-result.gts
@@ -1,17 +1,13 @@
 import {
-  CardDef,
   FieldDef,
   Component,
   field,
   contains,
   containsMany,
-  linksTo,
 } from 'https://cardstack.com/base/card-api';
 import StringField from 'https://cardstack.com/base/string';
 import NumberField from 'https://cardstack.com/base/number';
-import DateTimeField from 'https://cardstack.com/base/datetime';
-import enumField from 'https://cardstack.com/base/enum';
-import { Project, Issue } from './darkfactory.gts';
+import { ValidationResult } from './validation-result.gts';
 import {
   ResultFittedCard,
   resultDisplayStatus,
@@ -25,15 +21,6 @@ import Code from '@cardstack/boxel-icons/code';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
 import CircleX from '@cardstack/boxel-icons/circle-x';
 
-export const EvalResultStatusField = enumField(StringField, {
-  options: [
-    { value: 'running', label: 'Running' },
-    { value: 'passed', label: 'Passed' },
-    { value: 'failed', label: 'Failed' },
-    { value: 'error', label: 'Error' },
-  ],
-});
-
 export class EvalModuleResult extends FieldDef {
   static displayName = 'Eval Module Result';
 
@@ -93,18 +80,10 @@ export class EvalModuleResult extends FieldDef {
   };
 }
 
-export class EvalResult extends CardDef {
+export class EvalResult extends ValidationResult {
   static displayName = 'Eval Result';
 
-  @field sequenceNumber = contains(NumberField);
-  @field runAt = contains(DateTimeField);
-  @field completedAt = contains(DateTimeField);
-  @field project = linksTo(() => Project);
-  @field issue = linksTo(() => Issue);
-  @field status = contains(EvalResultStatusField);
-  @field durationMs = contains(NumberField);
   @field moduleResults = containsMany(EvalModuleResult);
-  @field errorMessage = contains(StringField);
 
   @field modulesChecked = contains(NumberField, {
     computeVia: function (this: EvalResult) {
@@ -118,13 +97,9 @@ export class EvalResult extends CardDef {
     },
   });
 
-  @field cardTitle = contains(StringField, {
-    computeVia: function (this: EvalResult) {
-      let seq = this.sequenceNumber ?? '?';
-      let status = this.status ?? 'unknown';
-      return `EvalResult #${seq} \u2014 ${status}`;
-    },
-  });
+  get resultLabel() {
+    return 'EvalResult';
+  }
 
   get modulesPassed() {
     return (this.modulesChecked ?? 0) - (this.modulesWithErrors ?? 0);
diff --git a/packages/software-factory/realm/instantiate-result.gts b/packages/software-factory/realm/instantiate-result.gts
index acdf6c6bb1..e969683df0 100644
--- a/packages/software-factory/realm/instantiate-result.gts
+++ b/packages/software-factory/realm/instantiate-result.gts
@@ -1,20 +1,16 @@
 import {
-  CardDef,
   FieldDef,
   Component,
   field,
   contains,
   containsMany,
-  linksTo,
   realmURL,
 } from 'https://cardstack.com/base/card-api';
 import StringField from 'https://cardstack.com/base/string';
 import NumberField from 'https://cardstack.com/base/number';
-import DateTimeField from 'https://cardstack.com/base/datetime';
 import CodeRefField from 'https://cardstack.com/base/code-ref';
-import enumField from 'https://cardstack.com/base/enum';
 import { RealmPaths } from '@cardstack/runtime-common';
-import { Project, Issue } from './darkfactory.gts';
+import { ValidationResult } from './validation-result.gts';
 import {
   ResultFittedCard,
   resultDisplayStatus,
@@ -28,15 +24,6 @@ import Box from '@cardstack/boxel-icons/box';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
 import CircleX from '@cardstack/boxel-icons/circle-x';
 
-export const InstantiateResultStatusField = enumField(StringField, {
-  options: [
-    { value: 'running', label: 'Running' },
-    { value: 'passed', label: 'Passed' },
-    { value: 'failed', label: 'Failed' },
-    { value: 'error', label: 'Error' },
-  ],
-});
-
 export class InstantiateCardEntry extends FieldDef {
   static displayName = 'Instantiate Card Entry';
 
@@ -116,18 +103,10 @@ export class InstantiateCardEntry extends FieldDef {
   };
 }
 
-export class InstantiateResult extends CardDef {
+export class InstantiateResult extends ValidationResult {
   static displayName = 'Instantiate Result';
 
-  @field sequenceNumber = contains(NumberField);
-  @field runAt = contains(DateTimeField);
-  @field completedAt = contains(DateTimeField);
-  @field project = linksTo(() => Project);
-  @field issue = linksTo(() => Issue);
-  @field status = contains(InstantiateResultStatusField);
-  @field durationMs = contains(NumberField);
   @field cardResults = containsMany(InstantiateCardEntry);
-  @field errorMessage = contains(StringField);
 
   @field cardsChecked = contains(NumberField, {
     computeVia: function (this: InstantiateResult) {
@@ -141,13 +120,9 @@ export class InstantiateResult extends CardDef {
     },
   });
 
-  @field cardTitle = contains(StringField, {
-    computeVia: function (this: InstantiateResult) {
-      let seq = this.sequenceNumber ?? '?';
-      let status = this.status ?? 'unknown';
-      return `InstantiateResult #${seq} \u2014 ${status}`;
-    },
-  });
+  get resultLabel() {
+    return 'InstantiateResult';
+  }
 
   get cardsPassed() {
     return (this.cardsChecked ?? 0) - (this.cardsWithErrors ?? 0);
diff --git a/packages/software-factory/realm/lint-result.gts b/packages/software-factory/realm/lint-result.gts
index 4a10fd502a..b0ad19ee51 100644
--- a/packages/software-factory/realm/lint-result.gts
+++ b/packages/software-factory/realm/lint-result.gts
@@ -1,18 +1,15 @@
 import {
-  CardDef,
   FieldDef,
   Component,
   field,
   contains,
   containsMany,
-  linksTo,
 } from 'https://cardstack.com/base/card-api';
 import StringField from 'https://cardstack.com/base/string';
 import NumberField from 'https://cardstack.com/base/number';
-import DateTimeField from 'https://cardstack.com/base/datetime';
 import enumField from 'https://cardstack.com/base/enum';
 import { eq } from '@cardstack/boxel-ui/helpers';
-import { Project, Issue } from './darkfactory.gts';
+import { ValidationResult } from './validation-result.gts';
 import {
   ResultFittedCard,
   resultDisplayStatus,
@@ -27,15 +24,6 @@ import CircleCheck from '@cardstack/boxel-icons/circle-check';
 import CircleX from '@cardstack/boxel-icons/circle-x';
 import CircleAlert from '@cardstack/boxel-icons/circle-alert';
 
-export const LintResultStatusField = enumField(StringField, {
-  options: [
-    { value: 'running', label: 'Running' },
-    { value: 'passed', label: 'Passed' },
-    { value: 'failed', label: 'Failed' },
-    { value: 'error', label: 'Error' },
-  ],
-});
-
 export const LintViolationSeverityField = enumField(StringField, {
   options: [
     { value: 'error', label: 'Error' },
@@ -202,18 +190,10 @@ export class LintFileResult extends FieldDef {
   };
 }
 
-export class LintResult extends CardDef {
+export class LintResult extends ValidationResult {
   static displayName = 'Lint Result';
 
-  @field sequenceNumber = contains(NumberField);
-  @field runAt = contains(DateTimeField);
-  @field completedAt = contains(DateTimeField);
-  @field project = linksTo(() => Project);
-  @field issue = linksTo(() => Issue);
-  @field status = contains(LintResultStatusField);
-  @field durationMs = contains(NumberField);
   @field fileResults = containsMany(LintFileResult);
-  @field errorMessage = contains(StringField);
 
   @field totalErrors = contains(NumberField, {
     computeVia: function (this: LintResult) {
@@ -239,13 +219,9 @@ export class LintResult extends CardDef {
     },
   });
 
-  @field cardTitle = contains(StringField, {
-    computeVia: function (this: LintResult) {
-      let seq = this.sequenceNumber ?? '?';
-      let status = this.status ?? 'unknown';
-      return `LintResult #${seq} \u2014 ${status}`;
-    },
-  });
+  get resultLabel() {
+    return 'LintResult';
+  }
 
   get filesWithErrors() {
     return (this.fileResults ?? []).filter((fr) => !fr.passed).length;
diff --git a/packages/software-factory/realm/parse-result.gts b/packages/software-factory/realm/parse-result.gts
index 15f8b340c0..ae9742eafe 100644
--- a/packages/software-factory/realm/parse-result.gts
+++ b/packages/software-factory/realm/parse-result.gts
@@ -1,17 +1,13 @@
 import {
-  CardDef,
   FieldDef,
   Component,
   field,
   contains,
   containsMany,
-  linksTo,
 } from 'https://cardstack.com/base/card-api';
 import StringField from 'https://cardstack.com/base/string';
 import NumberField from 'https://cardstack.com/base/number';
-import DateTimeField from 'https://cardstack.com/base/datetime';
-import enumField from 'https://cardstack.com/base/enum';
-import { Project, Issue } from './darkfactory.gts';
+import { ValidationResult } from './validation-result.gts';
 import {
   ResultFittedCard,
   resultDisplayStatus,
@@ -25,15 +21,6 @@ import FileCode from '@cardstack/boxel-icons/file-code';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
 import CircleX from '@cardstack/boxel-icons/circle-x';
 
-export const ParseResultStatusField = enumField(StringField, {
-  options: [
-    { value: 'running', label: 'Running' },
-    { value: 'passed', label: 'Passed' },
-    { value: 'failed', label: 'Failed' },
-    { value: 'error', label: 'Error' },
-  ],
-});
-
 export class ParseError extends FieldDef {
   static displayName = 'Parse Error';
 
@@ -158,18 +145,10 @@ export class ParseFileResult extends FieldDef {
   };
 }
 
-export class ParseResult extends CardDef {
+export class ParseResult extends ValidationResult {
   static displayName = 'Parse Result';
 
-  @field sequenceNumber = contains(NumberField);
-  @field runAt = contains(DateTimeField);
-  @field completedAt = contains(DateTimeField);
-  @field project = linksTo(() => Project);
-  @field issue = linksTo(() => Issue);
-  @field status = contains(ParseResultStatusField);
-  @field durationMs = contains(NumberField);
   @field fileResults = containsMany(ParseFileResult);
-  @field errorMessage = contains(StringField);
 
   @field totalErrors = contains(NumberField, {
     computeVia: function (this: ParseResult) {
@@ -186,13 +165,9 @@ export class ParseResult extends CardDef {
     },
   });
 
-  @field cardTitle = contains(StringField, {
-    computeVia: function (this: ParseResult) {
-      let seq = this.sequenceNumber ?? '?';
-      let status = this.status ?? 'unknown';
-      return `ParseResult #${seq} \u2014 ${status}`;
-    },
-  });
+  get resultLabel() {
+    return 'ParseResult';
+  }
 
   get filesWithErrors() {
     return (this.fileResults ?? []).filter((fr) => !fr.passed).length;
diff --git a/packages/software-factory/realm/test-results.gts b/packages/software-factory/realm/test-results.gts
index 84ef1de56e..bb313f00c5 100644
--- a/packages/software-factory/realm/test-results.gts
+++ b/packages/software-factory/realm/test-results.gts
@@ -1,19 +1,16 @@
 import {
-  CardDef,
   FieldDef,
   Component,
   field,
   contains,
   containsMany,
-  linksTo,
 } from 'https://cardstack.com/base/card-api';
 import StringField from 'https://cardstack.com/base/string';
 import NumberField from 'https://cardstack.com/base/number';
-import DateTimeField from 'https://cardstack.com/base/datetime';
 import CodeRefField from 'https://cardstack.com/base/code-ref';
 import enumField from 'https://cardstack.com/base/enum';
 import { eq } from '@cardstack/boxel-ui/helpers';
-import { Project, Issue } from './darkfactory.gts';
+import { ValidationResult } from './validation-result.gts';
 import {
   ResultFittedCard,
   resultDisplayStatus,
@@ -30,15 +27,6 @@ import CircleAlert from '@cardstack/boxel-icons/circle-alert';
 import CircleMinus from '@cardstack/boxel-icons/circle-minus';
 import CircleDashed from '@cardstack/boxel-icons/circle-dashed';
 
-export const TestRunStatusField = enumField(StringField, {
-  options: [
-    { value: 'running', label: 'Running' },
-    { value: 'passed', label: 'Passed' },
-    { value: 'failed', label: 'Failed' },
-    { value: 'error', label: 'Error' },
-  ],
-});
-
 export const TestResultStatusField = enumField(StringField, {
   options: [
     { value: 'pending', label: 'Pending' },
@@ -221,18 +209,10 @@ export class TestModuleResult extends FieldDef {
   };
 }
 
-export class TestRun extends CardDef {
+export class TestRun extends ValidationResult {
   static displayName = 'Test Run';
 
-  @field sequenceNumber = contains(NumberField);
-  @field runAt = contains(DateTimeField);
-  @field completedAt = contains(DateTimeField);
-  @field project = linksTo(() => Project);
-  @field issue = linksTo(() => Issue);
-  @field status = contains(TestRunStatusField);
-  @field durationMs = contains(NumberField);
   @field moduleResults = containsMany(TestModuleResult);
-  @field errorMessage = contains(StringField);
 
   @field passedCount = contains(NumberField, {
     computeVia: function (this: TestRun) {
@@ -261,13 +241,9 @@ export class TestRun extends CardDef {
     },
   });
 
-  @field cardTitle = contains(StringField, {
-    computeVia: function (this: TestRun) {
-      let seq = this.sequenceNumber ?? '?';
-      let status = this.status ?? 'unknown';
-      return `TestRun #${seq} \u2014 ${status}`;
-    },
-  });
+  get resultLabel() {
+    return 'TestRun';
+  }
 
   static fitted = class Fitted extends Component<typeof TestRun> {
     get total() {
diff --git a/packages/software-factory/realm/validation-result.gts b/packages/software-factory/realm/validation-result.gts
new file mode 100644
index 0000000000..b4ccefb7c3
--- /dev/null
+++ b/packages/software-factory/realm/validation-result.gts
@@ -0,0 +1,51 @@
+import {
+  CardDef,
+  field,
+  contains,
+  linksTo,
+} from 'https://cardstack.com/base/card-api';
+import StringField from 'https://cardstack.com/base/string';
+import NumberField from 'https://cardstack.com/base/number';
+import DateTimeField from 'https://cardstack.com/base/datetime';
+import enumField from 'https://cardstack.com/base/enum';
+import { Project, Issue } from './darkfactory.gts';
+
+// Lifecycle status shared by every validation run.
+export const ValidationStatusField = enumField(StringField, {
+  options: [
+    { value: 'running', label: 'Running' },
+    { value: 'passed', label: 'Passed' },
+    { value: 'failed', label: 'Failed' },
+    { value: 'error', label: 'Error' },
+  ],
+});
+
+// Common base for every validator's result card (lint, parse, eval,
+// instantiate, test). Holds the metadata every run records; subclasses add
+// their own counts, detail array, and format components. Extending this lets a
+// realm query all runs polymorphically via `adoptsFrom ValidationResult`.
+export class ValidationResult extends CardDef {
+  static displayName = 'Validation Result';
+
+  @field sequenceNumber = contains(NumberField);
+  @field runAt = contains(DateTimeField);
+  @field completedAt = contains(DateTimeField);
+  @field project = linksTo(() => Project);
+  @field issue = linksTo(() => Issue);
+  @field status = contains(ValidationStatusField);
+  @field durationMs = contains(NumberField);
+  @field errorMessage = contains(StringField);
+
+  @field cardTitle = contains(StringField, {
+    computeVia: function (this: ValidationResult) {
+      let seq = this.sequenceNumber ?? '?';
+      let status = this.status ?? 'unknown';
+      return `${this.resultLabel} #${seq} — ${status}`;
+    },
+  });
+
+  // Title prefix for `cardTitle`; subclasses override with their card name.
+  get resultLabel(): string {
+    return 'Result';
+  }
+}

From 444cffc82076a35c41c282430823103ae36ae1a1 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Tue, 30 Jun 2026 14:12:58 -0400
Subject: [PATCH 22/24] update embedded result templates

---
 .../software-factory/realm/eval-result.gts    | 157 ++++---
 .../realm/instantiate-result.gts              | 157 ++++---
 .../software-factory/realm/lint-result.gts    | 273 ++++--------
 .../software-factory/realm/parse-result.gts   | 213 ++++------
 .../realm/result-details-section.gts          |  87 ----
 .../realm/result-isolated-card.gts            |  10 +-
 .../software-factory/realm/test-results.gts   | 394 +++++++-----------
 7 files changed, 470 insertions(+), 821 deletions(-)
 delete mode 100644 packages/software-factory/realm/result-details-section.gts

diff --git a/packages/software-factory/realm/eval-result.gts b/packages/software-factory/realm/eval-result.gts
index cea10792bc..5124b53cb0 100644
--- a/packages/software-factory/realm/eval-result.gts
+++ b/packages/software-factory/realm/eval-result.gts
@@ -15,7 +15,6 @@ import {
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
-import { ResultDetailsSection } from './result-details-section.gts';
 
 import Code from '@cardstack/boxel-icons/code';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -34,46 +33,83 @@ export class EvalModuleResult extends FieldDef {
 
   static embedded = class Embedded extends Component<typeof EvalModuleResult> {
     <template>
-      <div class='module-entry'>
-        {{#if @model.hasError}}
-          <span class='status-icon error-icon'>✗</span>
-        {{else}}
-          <span class='status-icon pass-icon'>✓</span>
-        {{/if}}
-        <span class='module-path'>{{@model.path}}</span>
+      <div class='detail-group {{if @model.hasError "has-errors"}}'>
+        <div class='detail-group-header'>
+          <span class='detail-group-name'>{{@model.path}}</span>
+          {{#if @model.hasError}}
+            <span class='group-status errors'>error</span>
+          {{else}}
+            <span class='group-status clean'>passed</span>
+          {{/if}}
+        </div>
         {{#if @model.error}}
-          <span class='module-error'>{{@model.error}}</span>
+          <pre class='error-code-block'>{{@model.error}}</pre>
         {{/if}}
       </div>
       <style scoped>
-        .module-entry {
-          display: flex;
-          align-items: baseline;
-          gap: 0.5rem;
-          padding: 0.25rem 0;
-          font-size: 0.85rem;
+        .detail-group {
+          border: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 60%,
+              transparent
+            );
+          border-radius: var(--boxel-border-radius);
+          padding: var(--boxel-sp-sm);
         }
-        .status-icon {
-          font-weight: bold;
-          width: 1.25rem;
-          text-align: center;
-          flex-shrink: 0;
+        .detail-group.has-errors {
+          border-color: color-mix(
+            in oklch,
+            oklch(55% 0.22 25) 50%,
+            transparent
+          );
         }
-        .error-icon {
-          color: var(--boxel-red, #dc2626);
+        .detail-group-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: var(--boxel-sp-xs);
+          padding-bottom: var(--boxel-sp-xs);
+          border-bottom: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 50%,
+              transparent
+            );
+          margin-bottom: var(--boxel-sp-xs);
         }
-        .pass-icon {
-          color: var(--boxel-green, #16a34a);
+        .detail-group-name {
+          font-weight: 600;
+          font-size: var(--boxel-font-size-sm);
+          font-family: var(--boxel-monospace-font-family, monospace);
+          word-break: break-all;
         }
-        .module-path {
-          color: var(--muted-foreground);
-          font-family: monospace;
-          font-size: 0.8rem;
+        .group-status {
           flex-shrink: 0;
+          font-size: var(--boxel-font-size-xs);
+          font-weight: 500;
+          color: var(--muted-foreground, var(--boxel-500));
+          text-transform: uppercase;
+        }
+        .group-status.clean {
+          color: oklch(60% 0.17 150);
         }
-        .module-error {
-          flex: 1;
-          color: var(--boxel-red, #dc2626);
+        .group-status.errors {
+          color: oklch(55% 0.22 25);
+        }
+        .error-code-block {
+          margin: 0;
+          padding: var(--boxel-sp-sm);
+          border-radius: var(--boxel-border-radius);
+          background: color-mix(in oklch, oklch(55% 0.22 25) 8%, transparent);
+          color: oklch(55% 0.22 25);
+          font-family: var(--boxel-monospace-font-family, monospace);
+          font-size: var(--boxel-font-size-xs);
+          white-space: pre-wrap;
+          word-break: break-word;
+          max-height: 15rem;
+          overflow-y: auto;
+          line-height: 1.4;
         }
       </style>
     </template>
@@ -169,8 +205,6 @@ export class EvalResult extends ValidationResult {
       return resultRunTitle('Eval', this.args.model.sequenceNumber);
     }
 
-    moduleHasError = (module: EvalModuleResult) => module.hasError;
-
     <template>
       <ResultIsolatedCard
         @title={{this.titleText}}
@@ -182,6 +216,8 @@ export class EvalResult extends ValidationResult {
         @hasProject={{@model.project}}
         @hasIssue={{@model.issue}}
         @hasError={{@model.errorMessage}}
+        @hasDetails={{@model.moduleResults.length}}
+        @detailsTitle='Module Results'
       >
         <:summary>
           <span>{{@model.modulesPassed}}/{{@model.modulesChecked}}
@@ -193,62 +229,9 @@ export class EvalResult extends ValidationResult {
         <:issue><@fields.issue @format='embedded' /></:issue>
         <:error>{{@model.errorMessage}}</:error>
         <:details>
-          <ResultDetailsSection
-            @sectionTitle='Module Results'
-            @items={{@model.moduleResults}}
-            @hasErrors={{this.moduleHasError}}
-          >
-            <:header as |moduleResult|>
-              <span class='detail-group-name'>{{moduleResult.path}}</span>
-              {{#if moduleResult.hasError}}
-                <span class='group-status errors'>error</span>
-              {{else}}
-                <span class='group-status clean'>passed</span>
-              {{/if}}
-            </:header>
-            <:body as |moduleResult|>
-              {{#if moduleResult.error}}
-                <pre class='error-code-block'>{{moduleResult.error}}</pre>
-              {{/if}}
-            </:body>
-          </ResultDetailsSection>
+          <@fields.moduleResults @format='embedded' />
         </:details>
       </ResultIsolatedCard>
-      <style scoped>
-        .detail-group-name {
-          font-weight: 600;
-          font-size: var(--boxel-font-size-sm);
-          font-family: var(--boxel-monospace-font-family, monospace);
-          word-break: break-all;
-        }
-        .group-status {
-          flex-shrink: 0;
-          font-size: var(--boxel-font-size-xs);
-          font-weight: 500;
-          color: var(--muted-foreground, var(--boxel-500));
-          text-transform: uppercase;
-        }
-        .group-status.clean {
-          color: oklch(60% 0.17 150);
-        }
-        .group-status.errors {
-          color: oklch(55% 0.22 25);
-        }
-        .error-code-block {
-          margin: 0;
-          padding: var(--boxel-sp-sm);
-          border-radius: var(--boxel-border-radius);
-          background: color-mix(in oklch, oklch(55% 0.22 25) 8%, transparent);
-          color: oklch(55% 0.22 25);
-          font-family: var(--boxel-monospace-font-family, monospace);
-          font-size: var(--boxel-font-size-xs);
-          white-space: pre-wrap;
-          word-break: break-word;
-          max-height: 15rem;
-          overflow-y: auto;
-          line-height: 1.4;
-        }
-      </style>
     </template>
   };
 
diff --git a/packages/software-factory/realm/instantiate-result.gts b/packages/software-factory/realm/instantiate-result.gts
index e969683df0..cbef751713 100644
--- a/packages/software-factory/realm/instantiate-result.gts
+++ b/packages/software-factory/realm/instantiate-result.gts
@@ -18,7 +18,6 @@ import {
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
-import { ResultDetailsSection } from './result-details-section.gts';
 
 import Box from '@cardstack/boxel-icons/box';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -57,46 +56,83 @@ export class InstantiateCardEntry extends FieldDef {
     typeof InstantiateCardEntry
   > {
     <template>
-      <div class='card-entry'>
-        {{#if @model.hasError}}
-          <span class='status-icon error-icon'>✗</span>
-        {{else}}
-          <span class='status-icon pass-icon'>✓</span>
-        {{/if}}
-        <span class='instance-path'>{{@model.instancePath}}</span>
+      <div class='detail-group {{if @model.hasError "has-errors"}}'>
+        <div class='detail-group-header'>
+          <span class='detail-group-name'>{{@model.instancePath}}</span>
+          {{#if @model.hasError}}
+            <span class='group-status errors'>error</span>
+          {{else}}
+            <span class='group-status clean'>passed</span>
+          {{/if}}
+        </div>
         {{#if @model.error}}
-          <span class='card-error'>{{@model.error}}</span>
+          <pre class='error-code-block'>{{@model.error}}</pre>
         {{/if}}
       </div>
       <style scoped>
-        .card-entry {
-          display: flex;
-          align-items: baseline;
-          gap: 0.5rem;
-          padding: 0.25rem 0;
-          font-size: 0.85rem;
+        .detail-group {
+          border: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 60%,
+              transparent
+            );
+          border-radius: var(--boxel-border-radius);
+          padding: var(--boxel-sp-sm);
         }
-        .status-icon {
-          font-weight: bold;
-          width: 1.25rem;
-          text-align: center;
-          flex-shrink: 0;
+        .detail-group.has-errors {
+          border-color: color-mix(
+            in oklch,
+            oklch(55% 0.22 25) 50%,
+            transparent
+          );
         }
-        .error-icon {
-          color: var(--boxel-red, #dc2626);
+        .detail-group-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: var(--boxel-sp-xs);
+          padding-bottom: var(--boxel-sp-xs);
+          border-bottom: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 50%,
+              transparent
+            );
+          margin-bottom: var(--boxel-sp-xs);
         }
-        .pass-icon {
-          color: var(--boxel-green, #16a34a);
+        .detail-group-name {
+          font-weight: 600;
+          font-size: var(--boxel-font-size-sm);
+          font-family: var(--boxel-monospace-font-family, monospace);
+          word-break: break-all;
         }
-        .instance-path {
-          color: var(--muted-foreground);
-          font-family: monospace;
-          font-size: 0.8rem;
+        .group-status {
           flex-shrink: 0;
+          font-size: var(--boxel-font-size-xs);
+          font-weight: 500;
+          color: var(--muted-foreground, var(--boxel-500));
+          text-transform: uppercase;
+        }
+        .group-status.clean {
+          color: oklch(60% 0.17 150);
         }
-        .card-error {
-          flex: 1;
-          color: var(--boxel-red, #dc2626);
+        .group-status.errors {
+          color: oklch(55% 0.22 25);
+        }
+        .error-code-block {
+          margin: 0;
+          padding: var(--boxel-sp-sm);
+          border-radius: var(--boxel-border-radius);
+          background: color-mix(in oklch, oklch(55% 0.22 25) 8%, transparent);
+          color: oklch(55% 0.22 25);
+          font-family: var(--boxel-monospace-font-family, monospace);
+          font-size: var(--boxel-font-size-xs);
+          white-space: pre-wrap;
+          word-break: break-word;
+          max-height: 15rem;
+          overflow-y: auto;
+          line-height: 1.4;
         }
       </style>
     </template>
@@ -192,8 +228,6 @@ export class InstantiateResult extends ValidationResult {
       return resultRunTitle('Instantiate', this.args.model.sequenceNumber);
     }
 
-    cardHasError = (card: InstantiateCardEntry) => card.hasError;
-
     <template>
       <ResultIsolatedCard
         @title={{this.titleText}}
@@ -205,6 +239,8 @@ export class InstantiateResult extends ValidationResult {
         @hasProject={{@model.project}}
         @hasIssue={{@model.issue}}
         @hasError={{@model.errorMessage}}
+        @hasDetails={{@model.cardResults.length}}
+        @detailsTitle='Card Results'
       >
         <:summary>
           <span>{{@model.cardsPassed}}/{{@model.cardsChecked}}
@@ -216,62 +252,9 @@ export class InstantiateResult extends ValidationResult {
         <:issue><@fields.issue @format='embedded' /></:issue>
         <:error>{{@model.errorMessage}}</:error>
         <:details>
-          <ResultDetailsSection
-            @sectionTitle='Card Results'
-            @items={{@model.cardResults}}
-            @hasErrors={{this.cardHasError}}
-          >
-            <:header as |cardResult|>
-              <span class='detail-group-name'>{{cardResult.instancePath}}</span>
-              {{#if cardResult.hasError}}
-                <span class='group-status errors'>error</span>
-              {{else}}
-                <span class='group-status clean'>passed</span>
-              {{/if}}
-            </:header>
-            <:body as |cardResult|>
-              {{#if cardResult.error}}
-                <pre class='error-code-block'>{{cardResult.error}}</pre>
-              {{/if}}
-            </:body>
-          </ResultDetailsSection>
+          <@fields.cardResults @format='embedded' />
         </:details>
       </ResultIsolatedCard>
-      <style scoped>
-        .detail-group-name {
-          font-weight: 600;
-          font-size: var(--boxel-font-size-sm);
-          font-family: var(--boxel-monospace-font-family, monospace);
-          word-break: break-all;
-        }
-        .group-status {
-          flex-shrink: 0;
-          font-size: var(--boxel-font-size-xs);
-          font-weight: 500;
-          color: var(--muted-foreground, var(--boxel-500));
-          text-transform: uppercase;
-        }
-        .group-status.clean {
-          color: oklch(60% 0.17 150);
-        }
-        .group-status.errors {
-          color: oklch(55% 0.22 25);
-        }
-        .error-code-block {
-          margin: 0;
-          padding: var(--boxel-sp-sm);
-          border-radius: var(--boxel-border-radius);
-          background: color-mix(in oklch, oklch(55% 0.22 25) 8%, transparent);
-          color: oklch(55% 0.22 25);
-          font-family: var(--boxel-monospace-font-family, monospace);
-          font-size: var(--boxel-font-size-xs);
-          white-space: pre-wrap;
-          word-break: break-word;
-          max-height: 15rem;
-          overflow-y: auto;
-          line-height: 1.4;
-        }
-      </style>
     </template>
   };
 
diff --git a/packages/software-factory/realm/lint-result.gts b/packages/software-factory/realm/lint-result.gts
index b0ad19ee51..0ba2dcb09a 100644
--- a/packages/software-factory/realm/lint-result.gts
+++ b/packages/software-factory/realm/lint-result.gts
@@ -17,7 +17,6 @@ import {
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
-import { ResultDetailsSection } from './result-details-section.gts';
 
 import ListChecks from '@cardstack/boxel-icons/list-checks';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -41,62 +40,62 @@ export class LintViolation extends FieldDef {
   @field message = contains(StringField);
   @field severity = contains(LintViolationSeverityField);
 
-  get severityIcon() {
-    switch (this.severity) {
-      case 'error':
-        return '\u2717';
-      case 'warning':
-        return '\u26A0';
-      default:
-        return '?';
-    }
-  }
-
   static embedded = class Embedded extends Component<typeof LintViolation> {
     <template>
-      <div class='violation-entry'>
+      <div class='violation-row'>
+        {{#if (eq @model.severity 'error')}}
+          <CircleX
+            class='sev-icon sev-error'
+            width='14'
+            height='14'
+            aria-label='error'
+          />
+        {{else}}
+          <CircleAlert
+            class='sev-icon sev-warning'
+            width='14'
+            height='14'
+            aria-label='warning'
+          />
+        {{/if}}
         <span
-          class='severity severity-{{@model.severity}}'
-        >{{@model.severityIcon}}</span>
-        <span class='location'>{{@model.file}}:{{@model.line}}</span>
-        <span class='message'>{{@model.message}}</span>
+          class='violation-location'
+        >{{@model.line}}:{{@model.column}}</span>
+        <span class='violation-message'>{{@model.message}}</span>
         {{#if @model.rule}}
-          <span class='rule'>[{{@model.rule}}]</span>
+          <span class='violation-rule'>[{{@model.rule}}]</span>
         {{/if}}
       </div>
       <style scoped>
-        .violation-entry {
+        .violation-row {
           display: flex;
           align-items: baseline;
-          gap: 0.5rem;
-          padding: 0.25rem 0;
-          font-size: 0.85rem;
+          gap: var(--boxel-sp-xs);
+          font-size: var(--boxel-font-size-sm);
         }
-        .severity {
-          font-weight: bold;
-          width: 1.25rem;
-          text-align: center;
+        .sev-icon {
           flex-shrink: 0;
+          align-self: center;
         }
-        .severity-error {
-          color: var(--boxel-red, #dc2626);
+        .sev-error {
+          color: oklch(55% 0.22 25);
         }
-        .severity-warning {
-          color: var(--boxel-orange, #ea580c);
+        .sev-warning {
+          color: oklch(68% 0.17 55);
         }
-        .location {
-          color: var(--muted-foreground);
-          font-family: monospace;
-          font-size: 0.8rem;
+        .violation-location {
           flex-shrink: 0;
+          color: var(--muted-foreground, var(--boxel-500));
+          font-family: var(--boxel-monospace-font-family, monospace);
+          font-size: var(--boxel-font-size-xs);
         }
-        .message {
+        .violation-message {
           flex: 1;
         }
-        .rule {
-          color: var(--boxel-400, #9ca3af);
-          font-size: 0.75rem;
+        .violation-rule {
           flex-shrink: 0;
+          color: var(--muted-foreground, var(--boxel-500));
+          font-size: var(--boxel-font-size-xs);
         }
       </style>
     </template>
@@ -133,57 +132,77 @@ export class LintFileResult extends FieldDef {
 
   static embedded = class Embedded extends Component<typeof LintFileResult> {
     <template>
-      <div class='file-result'>
-        <div class='file-header'>
-          <span class='file-name'>{{@model.file}}</span>
+      <div class='detail-group {{unless @model.passed "has-errors"}}'>
+        <div class='detail-group-header'>
+          <span class='detail-group-name'>{{@model.file}}</span>
           {{#if @model.passed}}
-            <span class='file-status passed'>clean</span>
+            <span class='group-status clean'>clean</span>
           {{else}}
-            <span class='file-status failed'>
-              {{@model.errorCount}}
-              error(s)
-              {{#if @model.warningCount}}
-                ,
+            <span class='group-status errors'>{{@model.errorCount}}
+              error(s){{#if @model.warningCount}},
                 {{@model.warningCount}}
-                warning(s)
-              {{/if}}
-            </span>
+                warning(s){{/if}}</span>
           {{/if}}
         </div>
         {{#if @model.totalCount}}
-          <div class='file-violations'>
-            <@fields.violations />
+          <div class='violation-rows'>
+            <@fields.violations @format='embedded' />
           </div>
         {{/if}}
       </div>
       <style scoped>
-        .file-result {
-          margin-bottom: 0.75rem;
+        .detail-group {
+          border: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 60%,
+              transparent
+            );
+          border-radius: var(--boxel-border-radius);
+          padding: var(--boxel-sp-sm);
         }
-        .file-header {
+        .detail-group.has-errors {
+          border-color: color-mix(
+            in oklch,
+            oklch(55% 0.22 25) 50%,
+            transparent
+          );
+        }
+        .detail-group-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          padding: 0.25rem 0;
-          border-bottom: 1px solid var(--boxel-200, #e5e7eb);
-          margin-bottom: 0.25rem;
+          gap: var(--boxel-sp-xs);
+          padding-bottom: var(--boxel-sp-xs);
+          border-bottom: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 50%,
+              transparent
+            );
+          margin-bottom: var(--boxel-sp-xs);
         }
-        .file-name {
+        .detail-group-name {
           font-weight: 600;
-          font-size: 0.85rem;
-          font-family: monospace;
+          font-size: var(--boxel-font-size-sm);
+          font-family: var(--boxel-monospace-font-family, monospace);
+          word-break: break-all;
         }
-        .file-status {
-          font-size: 0.8rem;
+        .group-status {
+          flex-shrink: 0;
+          font-size: var(--boxel-font-size-xs);
+          font-weight: 500;
+          color: var(--muted-foreground, var(--boxel-500));
+          text-transform: uppercase;
         }
-        .file-status.passed {
-          color: var(--boxel-green, #16a34a);
+        .group-status.clean {
+          color: oklch(60% 0.17 150);
         }
-        .file-status.failed {
-          color: var(--boxel-red, #dc2626);
+        .group-status.errors {
+          color: oklch(55% 0.22 25);
         }
-        .file-violations {
-          padding-left: 0.5rem;
+        .violation-rows :deep(.containsMany-field.embedded-format) {
+          gap: var(--boxel-sp-4xs);
         }
       </style>
     </template>
@@ -302,8 +321,6 @@ export class LintResult extends ValidationResult {
       return resultRunTitle('Lint', this.args.model.sequenceNumber);
     }
 
-    fileHasErrors = (file: LintFileResult) => !file.passed;
-
     <template>
       <ResultIsolatedCard
         @title={{this.titleText}}
@@ -315,6 +332,8 @@ export class LintResult extends ValidationResult {
         @hasProject={{@model.project}}
         @hasIssue={{@model.issue}}
         @hasError={{@model.errorMessage}}
+        @hasDetails={{@model.fileResults.length}}
+        @detailsTitle='File Results'
       >
         <:summary>
           <span>{{@model.filesClean}}/{{@model.filesChecked}}
@@ -328,119 +347,9 @@ export class LintResult extends ValidationResult {
         <:issue><@fields.issue @format='embedded' /></:issue>
         <:error>{{@model.errorMessage}}</:error>
         <:details>
-          <ResultDetailsSection
-            @sectionTitle='File Results'
-            @items={{@model.fileResults}}
-            @hasErrors={{this.fileHasErrors}}
-          >
-            <:header as |fileResult|>
-              <span class='detail-group-name'>{{fileResult.file}}</span>
-              {{#if fileResult.passed}}
-                <span class='group-status clean'>clean</span>
-              {{else}}
-                <span class='group-status errors'>
-                  {{fileResult.errorCount}}
-                  error(s)
-                  {{#if fileResult.warningCount}}
-                    ,
-                    {{fileResult.warningCount}}
-                    warning(s)
-                  {{/if}}
-                </span>
-              {{/if}}
-            </:header>
-            <:body as |fileResult|>
-              {{#if fileResult.totalCount}}
-                <div class='violation-rows'>
-                  {{#each fileResult.violations as |violation|}}
-                    <div class='violation-row'>
-                      {{#if (eq violation.severity 'error')}}
-                        <CircleX
-                          class='sev-icon sev-error'
-                          width='14'
-                          height='14'
-                          aria-label='error'
-                        />
-                      {{else}}
-                        <CircleAlert
-                          class='sev-icon sev-warning'
-                          width='14'
-                          height='14'
-                          aria-label='warning'
-                        />
-                      {{/if}}
-                      <span
-                        class='violation-location'
-                      >{{violation.line}}:{{violation.column}}</span>
-                      <span
-                        class='violation-message'
-                      >{{violation.message}}</span>
-                      {{#if violation.rule}}
-                        <span class='violation-rule'>[{{violation.rule}}]</span>
-                      {{/if}}
-                    </div>
-                  {{/each}}
-                </div>
-              {{/if}}
-            </:body>
-          </ResultDetailsSection>
+          <@fields.fileResults @format='embedded' />
         </:details>
       </ResultIsolatedCard>
-      <style scoped>
-        .detail-group-name {
-          font-weight: 600;
-          font-size: var(--boxel-font-size-sm);
-          font-family: var(--boxel-monospace-font-family, monospace);
-          word-break: break-all;
-        }
-        .group-status {
-          flex-shrink: 0;
-          font-size: var(--boxel-font-size-xs);
-          font-weight: 500;
-          color: var(--muted-foreground, var(--boxel-500));
-          text-transform: uppercase;
-        }
-        .group-status.clean {
-          color: oklch(60% 0.17 150);
-        }
-        .group-status.errors {
-          color: oklch(55% 0.22 25);
-        }
-        .violation-rows {
-          display: grid;
-          gap: var(--boxel-sp-4xs);
-        }
-        .violation-row {
-          display: flex;
-          align-items: baseline;
-          gap: var(--boxel-sp-xs);
-          font-size: var(--boxel-font-size-sm);
-        }
-        .sev-icon {
-          flex-shrink: 0;
-          align-self: center;
-        }
-        .sev-error {
-          color: oklch(55% 0.22 25);
-        }
-        .sev-warning {
-          color: oklch(68% 0.17 55);
-        }
-        .violation-location {
-          flex-shrink: 0;
-          color: var(--muted-foreground, var(--boxel-500));
-          font-family: var(--boxel-monospace-font-family, monospace);
-          font-size: var(--boxel-font-size-xs);
-        }
-        .violation-message {
-          flex: 1;
-        }
-        .violation-rule {
-          flex-shrink: 0;
-          color: var(--muted-foreground, var(--boxel-500));
-          font-size: var(--boxel-font-size-xs);
-        }
-      </style>
     </template>
   };
 
diff --git a/packages/software-factory/realm/parse-result.gts b/packages/software-factory/realm/parse-result.gts
index ae9742eafe..48a101f634 100644
--- a/packages/software-factory/realm/parse-result.gts
+++ b/packages/software-factory/realm/parse-result.gts
@@ -15,7 +15,6 @@ import {
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
-import { ResultDetailsSection } from './result-details-section.gts';
 
 import FileCode from '@cardstack/boxel-icons/file-code';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -31,35 +30,39 @@ export class ParseError extends FieldDef {
 
   static embedded = class Embedded extends Component<typeof ParseError> {
     <template>
-      <div class='error-entry'>
-        <span class='status-icon'>✗</span>
-        <span class='location'>{{@model.file}}{{#if
-            @model.line
-          }}:{{@model.line}}{{/if}}</span>
-        <span class='message'>{{@model.message}}</span>
+      <div class='error-row'>
+        <CircleX
+          class='sev-icon sev-error'
+          width='14'
+          height='14'
+          aria-label='error'
+        />
+        {{#if @model.line}}
+          <span class='error-location'>{{@model.line}}:{{@model.column}}</span>
+        {{/if}}
+        <span class='error-message-text'>{{@model.message}}</span>
       </div>
       <style scoped>
-        .error-entry {
+        .error-row {
           display: flex;
           align-items: baseline;
-          gap: 0.5rem;
-          padding: 0.25rem 0;
-          font-size: 0.85rem;
+          gap: var(--boxel-sp-xs);
+          font-size: var(--boxel-font-size-sm);
         }
-        .status-icon {
-          font-weight: bold;
-          width: 1.25rem;
-          text-align: center;
+        .sev-icon {
           flex-shrink: 0;
-          color: var(--boxel-red, #dc2626);
+          align-self: center;
         }
-        .location {
-          color: var(--muted-foreground);
-          font-family: monospace;
-          font-size: 0.8rem;
+        .sev-error {
+          color: oklch(55% 0.22 25);
+        }
+        .error-location {
           flex-shrink: 0;
+          color: var(--muted-foreground, var(--boxel-500));
+          font-family: var(--boxel-monospace-font-family, monospace);
+          font-size: var(--boxel-font-size-xs);
         }
-        .message {
+        .error-message-text {
           flex: 1;
         }
       </style>
@@ -93,52 +96,75 @@ export class ParseFileResult extends FieldDef {
 
   static embedded = class Embedded extends Component<typeof ParseFileResult> {
     <template>
-      <div class='file-result'>
-        <div class='file-header'>
-          <span class='file-name'>{{@model.displayFile}}</span>
+      <div class='detail-group {{unless @model.passed "has-errors"}}'>
+        <div class='detail-group-header'>
+          <span class='detail-group-name'>{{@model.displayFile}}</span>
           {{#if @model.passed}}
-            <span class='file-status passed'>valid</span>
+            <span class='group-status clean'>valid</span>
           {{else}}
-            <span class='file-status failed'>
-              {{@model.errorCount}}
-              error(s)
-            </span>
+            <span class='group-status errors'>{{@model.errorCount}}
+              error(s)</span>
           {{/if}}
         </div>
         {{#if @model.errorCount}}
-          <div class='file-errors'>
-            <@fields.errors />
+          <div class='error-rows'>
+            <@fields.errors @format='embedded' />
           </div>
         {{/if}}
       </div>
       <style scoped>
-        .file-result {
-          margin-bottom: 0.75rem;
+        .detail-group {
+          border: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 60%,
+              transparent
+            );
+          border-radius: var(--boxel-border-radius);
+          padding: var(--boxel-sp-sm);
+        }
+        .detail-group.has-errors {
+          border-color: color-mix(
+            in oklch,
+            oklch(55% 0.22 25) 50%,
+            transparent
+          );
         }
-        .file-header {
+        .detail-group-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          padding: 0.25rem 0;
-          border-bottom: 1px solid var(--boxel-200, #e5e7eb);
-          margin-bottom: 0.25rem;
+          gap: var(--boxel-sp-xs);
+          padding-bottom: var(--boxel-sp-xs);
+          border-bottom: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 50%,
+              transparent
+            );
+          margin-bottom: var(--boxel-sp-xs);
         }
-        .file-name {
+        .detail-group-name {
           font-weight: 600;
-          font-size: 0.85rem;
-          font-family: monospace;
+          font-size: var(--boxel-font-size-sm);
+          font-family: var(--boxel-monospace-font-family, monospace);
+          word-break: break-all;
         }
-        .file-status {
-          font-size: 0.8rem;
+        .group-status {
+          flex-shrink: 0;
+          font-size: var(--boxel-font-size-xs);
+          font-weight: 500;
+          color: var(--muted-foreground, var(--boxel-500));
+          text-transform: uppercase;
         }
-        .file-status.passed {
-          color: var(--boxel-green, #16a34a);
+        .group-status.clean {
+          color: oklch(60% 0.17 150);
         }
-        .file-status.failed {
-          color: var(--boxel-red, #dc2626);
+        .group-status.errors {
+          color: oklch(55% 0.22 25);
         }
-        .file-errors {
-          padding-left: 0.5rem;
+        .error-rows :deep(.containsMany-field.embedded-format) {
+          gap: var(--boxel-sp-4xs);
         }
       </style>
     </template>
@@ -241,8 +267,6 @@ export class ParseResult extends ValidationResult {
       return resultRunTitle('Parse', this.args.model.sequenceNumber);
     }
 
-    fileHasErrors = (file: ParseFileResult) => !file.passed;
-
     <template>
       <ResultIsolatedCard
         @title={{this.titleText}}
@@ -254,6 +278,8 @@ export class ParseResult extends ValidationResult {
         @hasProject={{@model.project}}
         @hasIssue={{@model.issue}}
         @hasError={{@model.errorMessage}}
+        @hasDetails={{@model.fileResults.length}}
+        @detailsTitle='File Results'
       >
         <:summary>
           <span>{{@model.filesClean}}/{{@model.filesChecked}}
@@ -265,94 +291,9 @@ export class ParseResult extends ValidationResult {
         <:issue><@fields.issue @format='embedded' /></:issue>
         <:error>{{@model.errorMessage}}</:error>
         <:details>
-          <ResultDetailsSection
-            @sectionTitle='File Results'
-            @items={{@model.fileResults}}
-            @hasErrors={{this.fileHasErrors}}
-          >
-            <:header as |fileResult|>
-              <span class='detail-group-name'>{{fileResult.displayFile}}</span>
-              {{#if fileResult.passed}}
-                <span class='group-status clean'>valid</span>
-              {{else}}
-                <span class='group-status errors'>
-                  {{fileResult.errorCount}}
-                  error(s)
-                </span>
-              {{/if}}
-            </:header>
-            <:body as |fileResult|>
-              {{#if fileResult.errorCount}}
-                <div class='error-rows'>
-                  {{#each fileResult.errors as |error|}}
-                    <div class='error-row'>
-                      <CircleX
-                        class='sev-icon sev-error'
-                        width='14'
-                        height='14'
-                        aria-label='error'
-                      />
-                      {{#if error.line}}
-                        <span
-                          class='error-location'
-                        >{{error.line}}:{{error.column}}</span>
-                      {{/if}}
-                      <span class='error-message-text'>{{error.message}}</span>
-                    </div>
-                  {{/each}}
-                </div>
-              {{/if}}
-            </:body>
-          </ResultDetailsSection>
+          <@fields.fileResults @format='embedded' />
         </:details>
       </ResultIsolatedCard>
-      <style scoped>
-        .detail-group-name {
-          font-weight: 600;
-          font-size: var(--boxel-font-size-sm);
-          font-family: var(--boxel-monospace-font-family, monospace);
-          word-break: break-all;
-        }
-        .group-status {
-          flex-shrink: 0;
-          font-size: var(--boxel-font-size-xs);
-          font-weight: 500;
-          color: var(--muted-foreground, var(--boxel-500));
-          text-transform: uppercase;
-        }
-        .group-status.clean {
-          color: oklch(60% 0.17 150);
-        }
-        .group-status.errors {
-          color: oklch(55% 0.22 25);
-        }
-        .error-rows {
-          display: grid;
-          gap: var(--boxel-sp-4xs);
-        }
-        .error-row {
-          display: flex;
-          align-items: baseline;
-          gap: var(--boxel-sp-xs);
-          font-size: var(--boxel-font-size-sm);
-        }
-        .sev-icon {
-          flex-shrink: 0;
-          align-self: center;
-        }
-        .sev-error {
-          color: oklch(55% 0.22 25);
-        }
-        .error-location {
-          flex-shrink: 0;
-          color: var(--muted-foreground, var(--boxel-500));
-          font-family: var(--boxel-monospace-font-family, monospace);
-          font-size: var(--boxel-font-size-xs);
-        }
-        .error-message-text {
-          flex: 1;
-        }
-      </style>
     </template>
   };
 
diff --git a/packages/software-factory/realm/result-details-section.gts b/packages/software-factory/realm/result-details-section.gts
deleted file mode 100644
index 8a0d96b738..0000000000
--- a/packages/software-factory/realm/result-details-section.gts
+++ /dev/null
@@ -1,87 +0,0 @@
-import GlimmerComponent from '@glimmer/component';
-
-interface Signature<T> {
-  Args: {
-    // Section heading, e.g. "File Results".
-    sectionTitle: string;
-    // The per-file / per-module / per-card entries to render as groups.
-    items: T[] | undefined;
-    // Per-item predicate; truthy marks the group with the error border.
-    hasErrors: (item: T) => unknown;
-  };
-  Blocks: {
-    // Rendered inside the group header row (name + status badge).
-    header: [item: T];
-    // Rendered below the header (the card-specific row list or error block).
-    body: [item: T];
-  };
-  Element: HTMLElement;
-}
-
-// Shared scaffold for the detail list shown in every result card's isolated
-// view: the section heading, the bordered groups, and the group header row.
-// Callers supply the header contents and the per-item body via blocks, since
-// those differ per result type (violation rows, error blocks, test rows, …).
-export class ResultDetailsSection<T> extends GlimmerComponent<Signature<T>> {
-  <template>
-    {{#if @items.length}}
-      <section class='detail-section' ...attributes>
-        <h2>{{@sectionTitle}}</h2>
-        <div class='detail-groups'>
-          {{#each @items as |item|}}
-            <div class='detail-group {{if (@hasErrors item) "has-errors"}}'>
-              <div class='detail-group-header'>
-                {{yield item to='header'}}
-              </div>
-              {{yield item to='body'}}
-            </div>
-          {{/each}}
-        </div>
-      </section>
-    {{/if}}
-    <style scoped>
-      .detail-section {
-        display: grid;
-        gap: var(--boxel-sp-xs);
-      }
-      .detail-section > h2 {
-        margin: 0;
-        font: 600 var(--boxel-font-sm);
-        text-transform: uppercase;
-        letter-spacing: 0.06em;
-        color: var(--muted-foreground, var(--boxel-500));
-      }
-      .detail-groups {
-        display: grid;
-        gap: var(--boxel-sp-sm);
-      }
-      .detail-group {
-        border: 1px solid
-          color-mix(
-            in oklch,
-            var(--border, var(--boxel-border-color)) 60%,
-            transparent
-          );
-        border-radius: var(--boxel-border-radius);
-        padding: var(--boxel-sp-sm);
-      }
-      .detail-group.has-errors {
-        border-color: color-mix(in oklch, oklch(55% 0.22 25) 50%, transparent);
-      }
-      .detail-group-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: var(--boxel-sp-xs);
-        padding-bottom: var(--boxel-sp-xs);
-        border-bottom: 1px solid
-          color-mix(
-            in oklch,
-            var(--border, var(--boxel-border-color)) 50%,
-            transparent
-          );
-        margin-bottom: var(--boxel-sp-xs);
-      }
-    </style>
-  </template>
-}
diff --git a/packages/software-factory/realm/result-isolated-card.gts b/packages/software-factory/realm/result-isolated-card.gts
index 3104a42ae6..7de6f54ff7 100644
--- a/packages/software-factory/realm/result-isolated-card.gts
+++ b/packages/software-factory/realm/result-isolated-card.gts
@@ -20,6 +20,9 @@ interface Signature {
     hasProject?: unknown;
     hasIssue?: unknown;
     hasError?: unknown;
+    // Heading for the details section; the section shows only when hasDetails.
+    detailsTitle?: string;
+    hasDetails?: unknown;
   };
   Blocks: {
     summary: [];
@@ -100,7 +103,12 @@ export class ResultIsolatedCard extends GlimmerComponent<Signature> {
         </section>
       {{/if}}
 
-      {{yield to='details'}}
+      {{#if @hasDetails}}
+        <section class='result-section'>
+          {{#if @detailsTitle}}<h2>{{@detailsTitle}}</h2>{{/if}}
+          {{yield to='details'}}
+        </section>
+      {{/if}}
     </article>
     <style scoped>
       .result-surface {
diff --git a/packages/software-factory/realm/test-results.gts b/packages/software-factory/realm/test-results.gts
index bb313f00c5..db26b46e9c 100644
--- a/packages/software-factory/realm/test-results.gts
+++ b/packages/software-factory/realm/test-results.gts
@@ -18,7 +18,6 @@ import {
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
-import { ResultDetailsSection } from './result-details-section.gts';
 
 import FlaskConical from '@cardstack/boxel-icons/flask-conical';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -46,69 +45,101 @@ export class TestResultEntry extends FieldDef {
   @field stackTrace = contains(StringField);
   @field durationMs = contains(NumberField);
 
-  get statusIcon() {
-    switch (this.status) {
-      case 'passed':
-        return '\u2713';
-      case 'failed':
-        return '\u2717';
-      case 'error':
-        return '!';
-      case 'skipped':
-        return '\u2192';
-      case 'pending':
-        return '\u2013';
-      default:
-        return '?';
-    }
-  }
-
   static embedded = class Embedded extends Component<typeof TestResultEntry> {
     <template>
-      <div class='result-entry'>
-        <span
-          class='status status-{{@model.status}}'
-        >{{@model.statusIcon}}</span>
-        <span class='test-name'>{{@model.testName}}</span>
-        {{#if @model.durationMs}}
-          <span class='duration'>{{@model.durationMs}}ms</span>
+      <div class='test-row'>
+        <div class='test-row-main'>
+          {{#if (eq @model.status 'passed')}}
+            <CircleCheck
+              class='test-icon icon-passed'
+              width='14'
+              height='14'
+              aria-label='passed'
+            />
+          {{else if (eq @model.status 'failed')}}
+            <CircleX
+              class='test-icon icon-failed'
+              width='14'
+              height='14'
+              aria-label='failed'
+            />
+          {{else if (eq @model.status 'error')}}
+            <CircleAlert
+              class='test-icon icon-error'
+              width='14'
+              height='14'
+              aria-label='error'
+            />
+          {{else if (eq @model.status 'skipped')}}
+            <CircleMinus
+              class='test-icon icon-skipped'
+              width='14'
+              height='14'
+              aria-label='skipped'
+            />
+          {{else}}
+            <CircleDashed
+              class='test-icon icon-pending'
+              width='14'
+              height='14'
+              aria-label='pending'
+            />
+          {{/if}}
+          <span class='test-name'>{{@model.testName}}</span>
+          {{#if @model.durationMs}}
+            <span class='test-duration'>{{@model.durationMs}}ms</span>
+          {{/if}}
+        </div>
+        {{#if @model.message}}
+          <pre class='failure-message'>{{@model.message}}</pre>
+        {{/if}}
+        {{#if @model.stackTrace}}
+          <pre class='failure-stack'>{{@model.stackTrace}}</pre>
         {{/if}}
       </div>
       <style scoped>
-        .result-entry {
+        .test-row-main {
           display: flex;
           align-items: center;
-          gap: 0.5rem;
-          padding: 0.25rem 0;
-          font-size: 0.85rem;
-        }
-        .status {
-          font-weight: bold;
-          width: 1.25rem;
-          text-align: center;
+          gap: var(--boxel-sp-xs);
+          font-size: var(--boxel-font-size-sm);
         }
-        .status-passed {
-          color: var(--boxel-green, #16a34a);
+        .test-icon {
+          flex-shrink: 0;
         }
-        .status-failed {
-          color: var(--boxel-red, #dc2626);
+        .icon-passed {
+          color: oklch(60% 0.17 150);
         }
-        .status-error {
-          color: var(--boxel-orange, #ea580c);
+        .icon-failed {
+          color: oklch(55% 0.22 25);
         }
-        .status-pending {
-          color: var(--boxel-400, #9ca3af);
+        .icon-error {
+          color: oklch(68% 0.17 55);
         }
-        .status-skipped {
-          color: var(--boxel-400, #9ca3af);
-          font-style: italic;
+        .icon-skipped,
+        .icon-pending {
+          color: var(--muted-foreground, var(--boxel-500));
         }
         .test-name {
           flex: 1;
         }
-        .duration {
-          color: var(--boxel-400, #9ca3af);
-          font-size: 0.75rem;
+        .test-duration {
+          flex-shrink: 0;
+          color: var(--muted-foreground, var(--boxel-500));
+          font-size: var(--boxel-font-size-xs);
+        }
+        .failure-message,
+        .failure-stack {
+          margin: var(--boxel-sp-4xs) 0 var(--boxel-sp-4xs) var(--boxel-sp-lg);
+          font-family: var(--boxel-monospace-font-family, monospace);
+          font-size: var(--boxel-font-size-xs);
+          white-space: pre-wrap;
+          overflow-x: auto;
+          max-width: 100%;
+          color: var(--muted-foreground, var(--boxel-500));
+        }
+        .failure-stack {
+          opacity: 0.7;
         }
       </style>
     </template>
@@ -155,54 +186,95 @@ export class TestModuleResult extends FieldDef {
 
   static embedded = class Embedded extends Component<typeof TestModuleResult> {
     <template>
-      <div class='module-result'>
-        <div class='module-header'>
-          <span class='module-name'>{{@model.moduleName}}</span>
+      <div class='detail-group {{if @model.failedCount "has-errors"}}'>
+        <div class='detail-group-header'>
+          <span class='detail-group-name'>{{@model.moduleName}}</span>
           {{#if @model.isComplete}}
-            <span class='module-counts'>
-              {{@model.passedCount}}/{{@model.totalCount}}
-              passed
+            <span
+              class='group-status
+                {{if
+                  @model.failedCount
+                  "errors"
+                  (if @model.passedCount "clean" "muted")
+                }}'
+            >
+              {{#if @model.failedCount}}
+                {{@model.passedCount}}
+                passed,
+                {{@model.failedCount}}
+                failed
+              {{else}}
+                {{@model.passedCount}}/{{@model.totalCount}}
+                passed
+              {{/if}}
               {{#if @model.skippedCount}}
-                <span class='skipped-label'>
-                  ({{@model.skippedCount}}
-                  skipped)
-                </span>
+                ({{@model.skippedCount}}
+                skipped)
               {{/if}}
             </span>
           {{else}}
-            <span class='module-counts'>running...</span>
+            <span class='group-status running'>running…</span>
           {{/if}}
         </div>
-        <div class='module-entries'>
-          <@fields.results />
+        <div class='test-rows'>
+          <@fields.results @format='embedded' />
         </div>
       </div>
       <style scoped>
-        .module-result {
-          margin-bottom: 0.75rem;
-        }
-        .module-header {
+        .detail-group {
+          border: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 60%,
+              transparent
+            );
+          border-radius: var(--boxel-border-radius);
+          padding: var(--boxel-sp-sm);
+        }
+        .detail-group.has-errors {
+          border-color: color-mix(
+            in oklch,
+            oklch(55% 0.22 25) 50%,
+            transparent
+          );
+        }
+        .detail-group-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          padding: 0.25rem 0;
-          border-bottom: 1px solid var(--boxel-200, #e5e7eb);
-          margin-bottom: 0.25rem;
+          gap: var(--boxel-sp-xs);
+          padding-bottom: var(--boxel-sp-xs);
+          border-bottom: 1px solid
+            color-mix(
+              in oklch,
+              var(--border, var(--boxel-border-color)) 50%,
+              transparent
+            );
+          margin-bottom: var(--boxel-sp-xs);
         }
-        .module-name {
+        .detail-group-name {
           font-weight: 600;
-          font-size: 0.85rem;
+          font-size: var(--boxel-font-size-sm);
+          word-break: break-all;
         }
-        .module-counts {
-          font-size: 0.8rem;
-          color: var(--muted-foreground);
+        .group-status {
+          flex-shrink: 0;
+          font-size: var(--boxel-font-size-xs);
+          font-weight: 500;
+          color: var(--muted-foreground, var(--boxel-500));
+          text-transform: uppercase;
         }
-        .skipped-label {
-          color: var(--boxel-400, #9ca3af);
-          font-style: italic;
+        .group-status.clean {
+          color: oklch(60% 0.17 150);
+        }
+        .group-status.errors {
+          color: oklch(55% 0.22 25);
+        }
+        .group-status.running {
+          color: oklch(60% 0.16 250);
         }
-        .module-entries {
-          padding-left: 0.5rem;
+        .test-rows :deep(.containsMany-field.embedded-format) {
+          gap: var(--boxel-sp-4xs);
         }
       </style>
     </template>
@@ -326,8 +398,6 @@ export class TestRun extends ValidationResult {
       return resultRunTitle('Test', this.args.model.sequenceNumber);
     }
 
-    moduleHasFailures = (module: TestModuleResult) => module.failedCount;
-
     <template>
       <ResultIsolatedCard
         @title={{this.titleText}}
@@ -339,6 +409,8 @@ export class TestRun extends ValidationResult {
         @hasProject={{@model.project}}
         @hasIssue={{@model.issue}}
         @hasError={{@model.errorMessage}}
+        @hasDetails={{@model.moduleResults.length}}
+        @detailsTitle='Test Results'
       >
         <:summary>
           <span>{{@model.passedCount}}/{{this.total}}
@@ -350,173 +422,13 @@ export class TestRun extends ValidationResult {
         <:issue><@fields.issue @format='embedded' /></:issue>
         <:error>{{@model.errorMessage}}</:error>
         <:details>
-          <ResultDetailsSection
-            @sectionTitle='Test Results'
-            @items={{@model.moduleResults}}
-            @hasErrors={{this.moduleHasFailures}}
-          >
-            <:header as |moduleResult|>
-              <span class='detail-group-name'>{{moduleResult.moduleName}}</span>
-              {{#if moduleResult.isComplete}}
-                <span
-                  class='group-status
-                    {{if
-                      moduleResult.failedCount
-                      "errors"
-                      (if moduleResult.passedCount "clean" "muted")
-                    }}'
-                >
-                  {{#if moduleResult.failedCount}}
-                    {{moduleResult.passedCount}}
-                    passed,
-                    {{moduleResult.failedCount}}
-                    failed
-                  {{else}}
-                    {{moduleResult.passedCount}}/{{moduleResult.totalCount}}
-                    passed
-                  {{/if}}
-                  {{#if moduleResult.skippedCount}}
-                    ({{moduleResult.skippedCount}}
-                    skipped)
-                  {{/if}}
-                </span>
-              {{else}}
-                <span class='group-status running'>running…</span>
-              {{/if}}
-            </:header>
-            <:body as |moduleResult|>
-              <div class='test-rows'>
-                {{#each moduleResult.results as |result|}}
-                  <div class='test-row'>
-                    <div class='test-row-main'>
-                      {{#if (eq result.status 'passed')}}
-                        <CircleCheck
-                          class='test-icon icon-passed'
-                          width='14'
-                          height='14'
-                          aria-label='passed'
-                        />
-                      {{else if (eq result.status 'failed')}}
-                        <CircleX
-                          class='test-icon icon-failed'
-                          width='14'
-                          height='14'
-                          aria-label='failed'
-                        />
-                      {{else if (eq result.status 'error')}}
-                        <CircleAlert
-                          class='test-icon icon-error'
-                          width='14'
-                          height='14'
-                          aria-label='error'
-                        />
-                      {{else if (eq result.status 'skipped')}}
-                        <CircleMinus
-                          class='test-icon icon-skipped'
-                          width='14'
-                          height='14'
-                          aria-label='skipped'
-                        />
-                      {{else}}
-                        <CircleDashed
-                          class='test-icon icon-pending'
-                          width='14'
-                          height='14'
-                          aria-label='pending'
-                        />
-                      {{/if}}
-                      <span class='test-name'>{{result.testName}}</span>
-                      {{#if result.durationMs}}
-                        <span
-                          class='test-duration'
-                        >{{result.durationMs}}ms</span>
-                      {{/if}}
-                    </div>
-                    {{#if result.message}}
-                      <pre class='failure-message'>{{result.message}}</pre>
-                    {{/if}}
-                    {{#if result.stackTrace}}
-                      <pre class='failure-stack'>{{result.stackTrace}}</pre>
-                    {{/if}}
-                  </div>
-                {{/each}}
-              </div>
-            </:body>
-          </ResultDetailsSection>
+          <@fields.moduleResults @format='embedded' />
         </:details>
       </ResultIsolatedCard>
       <style scoped>
         .skipped {
           font-style: italic;
         }
-        .detail-group-name {
-          font-weight: 600;
-          font-size: var(--boxel-font-size-sm);
-          word-break: break-all;
-        }
-        .group-status {
-          flex-shrink: 0;
-          font-size: var(--boxel-font-size-xs);
-          font-weight: 500;
-          color: var(--muted-foreground, var(--boxel-500));
-          text-transform: uppercase;
-        }
-        .group-status.clean {
-          color: oklch(60% 0.17 150);
-        }
-        .group-status.errors {
-          color: oklch(55% 0.22 25);
-        }
-        .group-status.running {
-          color: oklch(60% 0.16 250);
-        }
-        .test-rows {
-          display: grid;
-          gap: var(--boxel-sp-4xs);
-        }
-        .test-row-main {
-          display: flex;
-          align-items: center;
-          gap: var(--boxel-sp-xs);
-          font-size: var(--boxel-font-size-sm);
-        }
-        .test-icon {
-          flex-shrink: 0;
-        }
-        .icon-passed {
-          color: oklch(60% 0.17 150);
-        }
-        .icon-failed {
-          color: oklch(55% 0.22 25);
-        }
-        .icon-error {
-          color: oklch(68% 0.17 55);
-        }
-        .icon-skipped,
-        .icon-pending {
-          color: var(--muted-foreground, var(--boxel-500));
-        }
-        .test-name {
-          flex: 1;
-        }
-        .test-duration {
-          flex-shrink: 0;
-          color: var(--muted-foreground, var(--boxel-500));
-          font-size: var(--boxel-font-size-xs);
-        }
-        .failure-message,
-        .failure-stack {
-          margin: var(--boxel-sp-4xs) 0 var(--boxel-sp-4xs) var(--boxel-sp-lg);
-          font-family: var(--boxel-monospace-font-family, monospace);
-          font-size: var(--boxel-font-size-xs);
-          white-space: pre-wrap;
-          overflow-x: auto;
-          max-width: 100%;
-          color: var(--muted-foreground, var(--boxel-500));
-        }
-        .failure-stack {
-          opacity: 0.7;
-        }
       </style>
     </template>
   };

From 23924f79ad8e928db13f3a4eb8ad98d9ae661fed Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Tue, 30 Jun 2026 15:23:47 -0400
Subject: [PATCH 23/24] refactor result template

---
 .../software-factory/realm/eval-result.gts    |  88 ++--------
 .../realm/instantiate-result.gts              |  88 ++--------
 .../software-factory/realm/lint-result.gts    | 153 +++---------------
 .../software-factory/realm/parse-result.gts   | 127 +++------------
 .../realm/result-detail-group.gts             | 110 +++++++++++++
 .../realm/result-detail-row.gts               |  81 ++++++++++
 .../software-factory/realm/test-results.gts   | 120 ++++----------
 7 files changed, 285 insertions(+), 482 deletions(-)
 create mode 100644 packages/software-factory/realm/result-detail-group.gts
 create mode 100644 packages/software-factory/realm/result-detail-row.gts

diff --git a/packages/software-factory/realm/eval-result.gts b/packages/software-factory/realm/eval-result.gts
index 5124b53cb0..2e1fc0da09 100644
--- a/packages/software-factory/realm/eval-result.gts
+++ b/packages/software-factory/realm/eval-result.gts
@@ -15,6 +15,7 @@ import {
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
+import { ResultDetailGroup } from './result-detail-group.gts';
 
 import Code from '@cardstack/boxel-icons/code';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -33,85 +34,14 @@ export class EvalModuleResult extends FieldDef {
 
   static embedded = class Embedded extends Component<typeof EvalModuleResult> {
     <template>
-      <div class='detail-group {{if @model.hasError "has-errors"}}'>
-        <div class='detail-group-header'>
-          <span class='detail-group-name'>{{@model.path}}</span>
-          {{#if @model.hasError}}
-            <span class='group-status errors'>error</span>
-          {{else}}
-            <span class='group-status clean'>passed</span>
-          {{/if}}
-        </div>
-        {{#if @model.error}}
-          <pre class='error-code-block'>{{@model.error}}</pre>
-        {{/if}}
-      </div>
-      <style scoped>
-        .detail-group {
-          border: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 60%,
-              transparent
-            );
-          border-radius: var(--boxel-border-radius);
-          padding: var(--boxel-sp-sm);
-        }
-        .detail-group.has-errors {
-          border-color: color-mix(
-            in oklch,
-            oklch(55% 0.22 25) 50%,
-            transparent
-          );
-        }
-        .detail-group-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          gap: var(--boxel-sp-xs);
-          padding-bottom: var(--boxel-sp-xs);
-          border-bottom: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 50%,
-              transparent
-            );
-          margin-bottom: var(--boxel-sp-xs);
-        }
-        .detail-group-name {
-          font-weight: 600;
-          font-size: var(--boxel-font-size-sm);
-          font-family: var(--boxel-monospace-font-family, monospace);
-          word-break: break-all;
-        }
-        .group-status {
-          flex-shrink: 0;
-          font-size: var(--boxel-font-size-xs);
-          font-weight: 500;
-          color: var(--muted-foreground, var(--boxel-500));
-          text-transform: uppercase;
-        }
-        .group-status.clean {
-          color: oklch(60% 0.17 150);
-        }
-        .group-status.errors {
-          color: oklch(55% 0.22 25);
-        }
-        .error-code-block {
-          margin: 0;
-          padding: var(--boxel-sp-sm);
-          border-radius: var(--boxel-border-radius);
-          background: color-mix(in oklch, oklch(55% 0.22 25) 8%, transparent);
-          color: oklch(55% 0.22 25);
-          font-family: var(--boxel-monospace-font-family, monospace);
-          font-size: var(--boxel-font-size-xs);
-          white-space: pre-wrap;
-          word-break: break-word;
-          max-height: 15rem;
-          overflow-y: auto;
-          line-height: 1.4;
-        }
-      </style>
+      <ResultDetailGroup
+        @name={{@model.path}}
+        @monospaceName={{true}}
+        @hasErrors={{@model.hasError}}
+        @statusLabel={{if @model.hasError 'error' 'passed'}}
+        @statusTone={{if @model.hasError 'errors' 'clean'}}
+        @error={{@model.error}}
+      />
     </template>
   };
 }
diff --git a/packages/software-factory/realm/instantiate-result.gts b/packages/software-factory/realm/instantiate-result.gts
index cbef751713..17d08331b0 100644
--- a/packages/software-factory/realm/instantiate-result.gts
+++ b/packages/software-factory/realm/instantiate-result.gts
@@ -18,6 +18,7 @@ import {
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
+import { ResultDetailGroup } from './result-detail-group.gts';
 
 import Box from '@cardstack/boxel-icons/box';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -56,85 +57,14 @@ export class InstantiateCardEntry extends FieldDef {
     typeof InstantiateCardEntry
   > {
     <template>
-      <div class='detail-group {{if @model.hasError "has-errors"}}'>
-        <div class='detail-group-header'>
-          <span class='detail-group-name'>{{@model.instancePath}}</span>
-          {{#if @model.hasError}}
-            <span class='group-status errors'>error</span>
-          {{else}}
-            <span class='group-status clean'>passed</span>
-          {{/if}}
-        </div>
-        {{#if @model.error}}
-          <pre class='error-code-block'>{{@model.error}}</pre>
-        {{/if}}
-      </div>
-      <style scoped>
-        .detail-group {
-          border: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 60%,
-              transparent
-            );
-          border-radius: var(--boxel-border-radius);
-          padding: var(--boxel-sp-sm);
-        }
-        .detail-group.has-errors {
-          border-color: color-mix(
-            in oklch,
-            oklch(55% 0.22 25) 50%,
-            transparent
-          );
-        }
-        .detail-group-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          gap: var(--boxel-sp-xs);
-          padding-bottom: var(--boxel-sp-xs);
-          border-bottom: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 50%,
-              transparent
-            );
-          margin-bottom: var(--boxel-sp-xs);
-        }
-        .detail-group-name {
-          font-weight: 600;
-          font-size: var(--boxel-font-size-sm);
-          font-family: var(--boxel-monospace-font-family, monospace);
-          word-break: break-all;
-        }
-        .group-status {
-          flex-shrink: 0;
-          font-size: var(--boxel-font-size-xs);
-          font-weight: 500;
-          color: var(--muted-foreground, var(--boxel-500));
-          text-transform: uppercase;
-        }
-        .group-status.clean {
-          color: oklch(60% 0.17 150);
-        }
-        .group-status.errors {
-          color: oklch(55% 0.22 25);
-        }
-        .error-code-block {
-          margin: 0;
-          padding: var(--boxel-sp-sm);
-          border-radius: var(--boxel-border-radius);
-          background: color-mix(in oklch, oklch(55% 0.22 25) 8%, transparent);
-          color: oklch(55% 0.22 25);
-          font-family: var(--boxel-monospace-font-family, monospace);
-          font-size: var(--boxel-font-size-xs);
-          white-space: pre-wrap;
-          word-break: break-word;
-          max-height: 15rem;
-          overflow-y: auto;
-          line-height: 1.4;
-        }
-      </style>
+      <ResultDetailGroup
+        @name={{@model.instancePath}}
+        @monospaceName={{true}}
+        @hasErrors={{@model.hasError}}
+        @statusLabel={{if @model.hasError 'error' 'passed'}}
+        @statusTone={{if @model.hasError 'errors' 'clean'}}
+        @error={{@model.error}}
+      />
     </template>
   };
 }
diff --git a/packages/software-factory/realm/lint-result.gts b/packages/software-factory/realm/lint-result.gts
index 0ba2dcb09a..c2236dfc68 100644
--- a/packages/software-factory/realm/lint-result.gts
+++ b/packages/software-factory/realm/lint-result.gts
@@ -17,6 +17,8 @@ import {
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
+import { ResultDetailGroup } from './result-detail-group.gts';
+import { ResultDetailRow } from './result-detail-row.gts';
 
 import ListChecks from '@cardstack/boxel-icons/list-checks';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -42,62 +44,13 @@ export class LintViolation extends FieldDef {
 
   static embedded = class Embedded extends Component<typeof LintViolation> {
     <template>
-      <div class='violation-row'>
-        {{#if (eq @model.severity 'error')}}
-          <CircleX
-            class='sev-icon sev-error'
-            width='14'
-            height='14'
-            aria-label='error'
-          />
-        {{else}}
-          <CircleAlert
-            class='sev-icon sev-warning'
-            width='14'
-            height='14'
-            aria-label='warning'
-          />
-        {{/if}}
-        <span
-          class='violation-location'
-        >{{@model.line}}:{{@model.column}}</span>
-        <span class='violation-message'>{{@model.message}}</span>
-        {{#if @model.rule}}
-          <span class='violation-rule'>[{{@model.rule}}]</span>
-        {{/if}}
-      </div>
-      <style scoped>
-        .violation-row {
-          display: flex;
-          align-items: baseline;
-          gap: var(--boxel-sp-xs);
-          font-size: var(--boxel-font-size-sm);
-        }
-        .sev-icon {
-          flex-shrink: 0;
-          align-self: center;
-        }
-        .sev-error {
-          color: oklch(55% 0.22 25);
-        }
-        .sev-warning {
-          color: oklch(68% 0.17 55);
-        }
-        .violation-location {
-          flex-shrink: 0;
-          color: var(--muted-foreground, var(--boxel-500));
-          font-family: var(--boxel-monospace-font-family, monospace);
-          font-size: var(--boxel-font-size-xs);
-        }
-        .violation-message {
-          flex: 1;
-        }
-        .violation-rule {
-          flex-shrink: 0;
-          color: var(--muted-foreground, var(--boxel-500));
-          font-size: var(--boxel-font-size-xs);
-        }
-      </style>
+      <ResultDetailRow
+        @tone={{if (eq @model.severity 'error') 'error' 'warning'}}
+        @line={{@model.line}}
+        @column={{@model.column}}
+        @message={{@model.message}}
+        @trailing={{@model.rule}}
+      />
     </template>
   };
 }
@@ -131,80 +84,26 @@ export class LintFileResult extends FieldDef {
   }
 
   static embedded = class Embedded extends Component<typeof LintFileResult> {
+    get statusLabel() {
+      let m = this.args.model;
+      if (m.passed) return 'clean';
+      let label = `${m.errorCount} error(s)`;
+      if (m.warningCount) label += `, ${m.warningCount} warning(s)`;
+      return label;
+    }
+
     <template>
-      <div class='detail-group {{unless @model.passed "has-errors"}}'>
-        <div class='detail-group-header'>
-          <span class='detail-group-name'>{{@model.file}}</span>
-          {{#if @model.passed}}
-            <span class='group-status clean'>clean</span>
-          {{else}}
-            <span class='group-status errors'>{{@model.errorCount}}
-              error(s){{#if @model.warningCount}},
-                {{@model.warningCount}}
-                warning(s){{/if}}</span>
-          {{/if}}
-        </div>
+      <ResultDetailGroup
+        @name={{@model.file}}
+        @monospaceName={{true}}
+        @hasErrors={{unless @model.passed true}}
+        @statusLabel={{this.statusLabel}}
+        @statusTone={{if @model.passed 'clean' 'errors'}}
+      >
         {{#if @model.totalCount}}
-          <div class='violation-rows'>
-            <@fields.violations @format='embedded' />
-          </div>
+          <@fields.violations @format='embedded' />
         {{/if}}
-      </div>
-      <style scoped>
-        .detail-group {
-          border: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 60%,
-              transparent
-            );
-          border-radius: var(--boxel-border-radius);
-          padding: var(--boxel-sp-sm);
-        }
-        .detail-group.has-errors {
-          border-color: color-mix(
-            in oklch,
-            oklch(55% 0.22 25) 50%,
-            transparent
-          );
-        }
-        .detail-group-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          gap: var(--boxel-sp-xs);
-          padding-bottom: var(--boxel-sp-xs);
-          border-bottom: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 50%,
-              transparent
-            );
-          margin-bottom: var(--boxel-sp-xs);
-        }
-        .detail-group-name {
-          font-weight: 600;
-          font-size: var(--boxel-font-size-sm);
-          font-family: var(--boxel-monospace-font-family, monospace);
-          word-break: break-all;
-        }
-        .group-status {
-          flex-shrink: 0;
-          font-size: var(--boxel-font-size-xs);
-          font-weight: 500;
-          color: var(--muted-foreground, var(--boxel-500));
-          text-transform: uppercase;
-        }
-        .group-status.clean {
-          color: oklch(60% 0.17 150);
-        }
-        .group-status.errors {
-          color: oklch(55% 0.22 25);
-        }
-        .violation-rows :deep(.containsMany-field.embedded-format) {
-          gap: var(--boxel-sp-4xs);
-        }
-      </style>
+      </ResultDetailGroup>
     </template>
   };
 }
diff --git a/packages/software-factory/realm/parse-result.gts b/packages/software-factory/realm/parse-result.gts
index 48a101f634..24e21d3cb1 100644
--- a/packages/software-factory/realm/parse-result.gts
+++ b/packages/software-factory/realm/parse-result.gts
@@ -15,6 +15,8 @@ import {
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
+import { ResultDetailGroup } from './result-detail-group.gts';
+import { ResultDetailRow } from './result-detail-row.gts';
 
 import FileCode from '@cardstack/boxel-icons/file-code';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -30,42 +32,12 @@ export class ParseError extends FieldDef {
 
   static embedded = class Embedded extends Component<typeof ParseError> {
     <template>
-      <div class='error-row'>
-        <CircleX
-          class='sev-icon sev-error'
-          width='14'
-          height='14'
-          aria-label='error'
-        />
-        {{#if @model.line}}
-          <span class='error-location'>{{@model.line}}:{{@model.column}}</span>
-        {{/if}}
-        <span class='error-message-text'>{{@model.message}}</span>
-      </div>
-      <style scoped>
-        .error-row {
-          display: flex;
-          align-items: baseline;
-          gap: var(--boxel-sp-xs);
-          font-size: var(--boxel-font-size-sm);
-        }
-        .sev-icon {
-          flex-shrink: 0;
-          align-self: center;
-        }
-        .sev-error {
-          color: oklch(55% 0.22 25);
-        }
-        .error-location {
-          flex-shrink: 0;
-          color: var(--muted-foreground, var(--boxel-500));
-          font-family: var(--boxel-monospace-font-family, monospace);
-          font-size: var(--boxel-font-size-xs);
-        }
-        .error-message-text {
-          flex: 1;
-        }
-      </style>
+      <ResultDetailRow
+        @tone='error'
+        @line={{@model.line}}
+        @column={{@model.column}}
+        @message={{@model.message}}
+      />
     </template>
   };
 }
@@ -95,78 +67,23 @@ export class ParseFileResult extends FieldDef {
   }
 
   static embedded = class Embedded extends Component<typeof ParseFileResult> {
+    get statusLabel() {
+      let m = this.args.model;
+      return m.passed ? 'valid' : `${m.errorCount} error(s)`;
+    }
+
     <template>
-      <div class='detail-group {{unless @model.passed "has-errors"}}'>
-        <div class='detail-group-header'>
-          <span class='detail-group-name'>{{@model.displayFile}}</span>
-          {{#if @model.passed}}
-            <span class='group-status clean'>valid</span>
-          {{else}}
-            <span class='group-status errors'>{{@model.errorCount}}
-              error(s)</span>
-          {{/if}}
-        </div>
+      <ResultDetailGroup
+        @name={{@model.displayFile}}
+        @monospaceName={{true}}
+        @hasErrors={{unless @model.passed true}}
+        @statusLabel={{this.statusLabel}}
+        @statusTone={{if @model.passed 'clean' 'errors'}}
+      >
         {{#if @model.errorCount}}
-          <div class='error-rows'>
-            <@fields.errors @format='embedded' />
-          </div>
+          <@fields.errors @format='embedded' />
         {{/if}}
-      </div>
-      <style scoped>
-        .detail-group {
-          border: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 60%,
-              transparent
-            );
-          border-radius: var(--boxel-border-radius);
-          padding: var(--boxel-sp-sm);
-        }
-        .detail-group.has-errors {
-          border-color: color-mix(
-            in oklch,
-            oklch(55% 0.22 25) 50%,
-            transparent
-          );
-        }
-        .detail-group-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          gap: var(--boxel-sp-xs);
-          padding-bottom: var(--boxel-sp-xs);
-          border-bottom: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 50%,
-              transparent
-            );
-          margin-bottom: var(--boxel-sp-xs);
-        }
-        .detail-group-name {
-          font-weight: 600;
-          font-size: var(--boxel-font-size-sm);
-          font-family: var(--boxel-monospace-font-family, monospace);
-          word-break: break-all;
-        }
-        .group-status {
-          flex-shrink: 0;
-          font-size: var(--boxel-font-size-xs);
-          font-weight: 500;
-          color: var(--muted-foreground, var(--boxel-500));
-          text-transform: uppercase;
-        }
-        .group-status.clean {
-          color: oklch(60% 0.17 150);
-        }
-        .group-status.errors {
-          color: oklch(55% 0.22 25);
-        }
-        .error-rows :deep(.containsMany-field.embedded-format) {
-          gap: var(--boxel-sp-4xs);
-        }
-      </style>
+      </ResultDetailGroup>
     </template>
   };
 }
diff --git a/packages/software-factory/realm/result-detail-group.gts b/packages/software-factory/realm/result-detail-group.gts
new file mode 100644
index 0000000000..3732a262c7
--- /dev/null
+++ b/packages/software-factory/realm/result-detail-group.gts
@@ -0,0 +1,110 @@
+import GlimmerComponent from '@glimmer/component';
+
+interface Signature {
+  Args: {
+    // Group heading (file path, module path, instance path, …).
+    name?: string;
+    // Render the name in monospace (paths) vs. the default face (module names).
+    monospaceName?: boolean;
+    // Truthy applies the error border.
+    hasErrors?: unknown;
+    // Status badge text and tone ('clean' | 'errors' | 'running' | 'muted').
+    statusLabel: string;
+    statusTone: string;
+    // When set, renders the error block; pair with no body for error-only rows.
+    error?: string | null;
+  };
+  Blocks: { default: [] };
+  Element: HTMLElement;
+}
+
+// Shared chrome for a single result detail group: the bordered card, the
+// header (name + status badge), an optional error block, and a slot for the
+// row list. Composed by every result FieldDef's embedded template so the group
+// markup and styling live in one place.
+export class ResultDetailGroup extends GlimmerComponent<Signature> {
+  <template>
+    <div class='detail-group {{if @hasErrors "has-errors"}}' ...attributes>
+      <div class='detail-group-header'>
+        <span
+          class='detail-group-name {{if @monospaceName "mono"}}'
+        >{{@name}}</span>
+        <span class='group-status {{@statusTone}}'>{{@statusLabel}}</span>
+      </div>
+      {{#if @error}}
+        <pre class='error-code-block'>{{@error}}</pre>
+      {{/if}}
+      {{yield}}
+    </div>
+    <style scoped>
+      .detail-group {
+        border: 1px solid
+          color-mix(
+            in oklch,
+            var(--border, var(--boxel-border-color)) 60%,
+            transparent
+          );
+        border-radius: var(--boxel-border-radius);
+        padding: var(--boxel-sp-sm);
+      }
+      .detail-group.has-errors {
+        border-color: color-mix(in oklch, oklch(55% 0.22 25) 50%, transparent);
+      }
+      .detail-group-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--boxel-sp-xs);
+        padding-bottom: var(--boxel-sp-xs);
+        border-bottom: 1px solid
+          color-mix(
+            in oklch,
+            var(--border, var(--boxel-border-color)) 50%,
+            transparent
+          );
+        margin-bottom: var(--boxel-sp-xs);
+      }
+      .detail-group-name {
+        font-weight: 600;
+        font-size: var(--boxel-font-size-sm);
+        word-break: break-all;
+      }
+      .detail-group-name.mono {
+        font-family: var(--boxel-monospace-font-family, monospace);
+      }
+      .group-status {
+        flex-shrink: 0;
+        font-size: var(--boxel-font-size-xs);
+        font-weight: 500;
+        color: var(--muted-foreground, var(--boxel-500));
+        text-transform: uppercase;
+      }
+      .group-status.clean {
+        color: oklch(60% 0.17 150);
+      }
+      .group-status.errors {
+        color: oklch(55% 0.22 25);
+      }
+      .group-status.running {
+        color: oklch(60% 0.16 250);
+      }
+      .error-code-block {
+        margin: 0;
+        padding: var(--boxel-sp-sm);
+        border-radius: var(--boxel-border-radius);
+        background: color-mix(in oklch, oklch(55% 0.22 25) 8%, transparent);
+        color: oklch(55% 0.22 25);
+        font-family: var(--boxel-monospace-font-family, monospace);
+        font-size: var(--boxel-font-size-xs);
+        white-space: pre-wrap;
+        word-break: break-word;
+        max-height: 15rem;
+        overflow-y: auto;
+        line-height: 1.4;
+      }
+      .detail-group :deep(.containsMany-field.embedded-format) {
+        gap: var(--boxel-sp-4xs);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/software-factory/realm/result-detail-row.gts b/packages/software-factory/realm/result-detail-row.gts
new file mode 100644
index 0000000000..6b1a041c9a
--- /dev/null
+++ b/packages/software-factory/realm/result-detail-row.gts
@@ -0,0 +1,81 @@
+import GlimmerComponent from '@glimmer/component';
+import { eq } from '@cardstack/boxel-ui/helpers';
+import CircleX from '@cardstack/boxel-icons/circle-x';
+import CircleAlert from '@cardstack/boxel-icons/circle-alert';
+
+interface Signature {
+  Args: {
+    // 'error' → red CircleX; anything else → amber CircleAlert.
+    tone: string;
+    // Optional source location, rendered as "line:column" when line is set.
+    line?: number;
+    column?: number;
+    message?: string;
+    // Optional trailing badge text, rendered as "[trailing]" (e.g. a lint rule).
+    trailing?: string;
+  };
+  Element: HTMLElement;
+}
+
+// A single error/violation row: severity icon, optional location, message, and
+// an optional trailing badge. Shared by the lint and parse row templates.
+export class ResultDetailRow extends GlimmerComponent<Signature> {
+  <template>
+    <div class='detail-row' ...attributes>
+      {{#if (eq @tone 'error')}}
+        <CircleX
+          class='row-icon row-error'
+          width='14'
+          height='14'
+          aria-label='error'
+        />
+      {{else}}
+        <CircleAlert
+          class='row-icon row-warning'
+          width='14'
+          height='14'
+          aria-label='warning'
+        />
+      {{/if}}
+      {{#if @line}}
+        <span class='row-location'>{{@line}}:{{@column}}</span>
+      {{/if}}
+      <span class='row-message'>{{@message}}</span>
+      {{#if @trailing}}
+        <span class='row-trailing'>[{{@trailing}}]</span>
+      {{/if}}
+    </div>
+    <style scoped>
+      .detail-row {
+        display: flex;
+        align-items: baseline;
+        gap: var(--boxel-sp-xs);
+        font-size: var(--boxel-font-size-sm);
+      }
+      .row-icon {
+        flex-shrink: 0;
+        align-self: center;
+      }
+      .row-error {
+        color: oklch(55% 0.22 25);
+      }
+      .row-warning {
+        color: oklch(68% 0.17 55);
+      }
+      .row-location {
+        flex-shrink: 0;
+        color: var(--muted-foreground, var(--boxel-500));
+        font-family: var(--boxel-monospace-font-family, monospace);
+        font-size: var(--boxel-font-size-xs);
+      }
+      .row-message {
+        flex: 1;
+      }
+      .row-trailing {
+        flex-shrink: 0;
+        color: var(--muted-foreground, var(--boxel-500));
+        font-size: var(--boxel-font-size-xs);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/software-factory/realm/test-results.gts b/packages/software-factory/realm/test-results.gts
index db26b46e9c..e98b94e2c9 100644
--- a/packages/software-factory/realm/test-results.gts
+++ b/packages/software-factory/realm/test-results.gts
@@ -18,6 +18,7 @@ import {
   type ResultMetaItem,
 } from './result-fitted-card.gts';
 import { ResultIsolatedCard } from './result-isolated-card.gts';
+import { ResultDetailGroup } from './result-detail-group.gts';
 
 import FlaskConical from '@cardstack/boxel-icons/flask-conical';
 import CircleCheck from '@cardstack/boxel-icons/circle-check';
@@ -185,104 +186,39 @@ export class TestModuleResult extends FieldDef {
   }
 
   static embedded = class Embedded extends Component<typeof TestModuleResult> {
+    get statusTone() {
+      let m = this.args.model;
+      if (!m.isComplete) return 'running';
+      if (m.failedCount) return 'errors';
+      return m.passedCount ? 'clean' : 'muted';
+    }
+
+    get statusLabel() {
+      let m = this.args.model;
+      if (!m.isComplete) return 'running…';
+      let label = m.failedCount
+        ? `${m.passedCount} passed, ${m.failedCount} failed`
+        : `${m.passedCount}/${m.totalCount} passed`;
+      if (m.skippedCount) label += ` (${m.skippedCount} skipped)`;
+      return label;
+    }
+
     <template>
-      <div class='detail-group {{if @model.failedCount "has-errors"}}'>
-        <div class='detail-group-header'>
-          <span class='detail-group-name'>{{@model.moduleName}}</span>
-          {{#if @model.isComplete}}
-            <span
-              class='group-status
-                {{if
-                  @model.failedCount
-                  "errors"
-                  (if @model.passedCount "clean" "muted")
-                }}'
-            >
-              {{#if @model.failedCount}}
-                {{@model.passedCount}}
-                passed,
-                {{@model.failedCount}}
-                failed
-              {{else}}
-                {{@model.passedCount}}/{{@model.totalCount}}
-                passed
-              {{/if}}
-              {{#if @model.skippedCount}}
-                ({{@model.skippedCount}}
-                skipped)
-              {{/if}}
-            </span>
-          {{else}}
-            <span class='group-status running'>running…</span>
-          {{/if}}
-        </div>
-        <div class='test-rows'>
-          <@fields.results @format='embedded' />
-        </div>
-      </div>
-      <style scoped>
-        .detail-group {
-          border: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 60%,
-              transparent
-            );
-          border-radius: var(--boxel-border-radius);
-          padding: var(--boxel-sp-sm);
-        }
-        .detail-group.has-errors {
-          border-color: color-mix(
-            in oklch,
-            oklch(55% 0.22 25) 50%,
-            transparent
-          );
-        }
-        .detail-group-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          gap: var(--boxel-sp-xs);
-          padding-bottom: var(--boxel-sp-xs);
-          border-bottom: 1px solid
-            color-mix(
-              in oklch,
-              var(--border, var(--boxel-border-color)) 50%,
-              transparent
-            );
-          margin-bottom: var(--boxel-sp-xs);
-        }
-        .detail-group-name {
-          font-weight: 600;
-          font-size: var(--boxel-font-size-sm);
-          word-break: break-all;
-        }
-        .group-status {
-          flex-shrink: 0;
-          font-size: var(--boxel-font-size-xs);
-          font-weight: 500;
-          color: var(--muted-foreground, var(--boxel-500));
-          text-transform: uppercase;
-        }
-        .group-status.clean {
-          color: oklch(60% 0.17 150);
-        }
-        .group-status.errors {
-          color: oklch(55% 0.22 25);
-        }
-        .group-status.running {
-          color: oklch(60% 0.16 250);
-        }
-        .test-rows :deep(.containsMany-field.embedded-format) {
-          gap: var(--boxel-sp-4xs);
-        }
-      </style>
+      <ResultDetailGroup
+        @name={{@model.moduleName}}
+        @hasErrors={{@model.failedCount}}
+        @statusLabel={{this.statusLabel}}
+        @statusTone={{this.statusTone}}
+      >
+        <@fields.results @format='embedded' />
+      </ResultDetailGroup>
     </template>
   };
 }
 
 export class TestRun extends ValidationResult {
   static displayName = 'Test Run';
+  static icon = FlaskConical;
 
   @field moduleResults = containsMany(TestModuleResult);
 
@@ -363,7 +299,7 @@ export class TestRun extends ValidationResult {
 
     <template>
       <ResultFittedCard
-        @icon={{FlaskConical}}
+        @icon={{@model.constructor.icon}}
         @label='Tests'
         @sequenceNumber={{@model.sequenceNumber}}
         @status={{this.displayStatus}}

From 860d46d6396e8a18e62c584f841145a06088d49f Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Tue, 30 Jun 2026 15:31:19 -0400
Subject: [PATCH 24/24] icons

---
 packages/software-factory/realm/eval-result.gts        | 3 ++-
 packages/software-factory/realm/instantiate-result.gts | 3 ++-
 packages/software-factory/realm/lint-result.gts        | 3 ++-
 packages/software-factory/realm/parse-result.gts       | 3 ++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/software-factory/realm/eval-result.gts b/packages/software-factory/realm/eval-result.gts
index 2e1fc0da09..209e432533 100644
--- a/packages/software-factory/realm/eval-result.gts
+++ b/packages/software-factory/realm/eval-result.gts
@@ -48,6 +48,7 @@ export class EvalModuleResult extends FieldDef {
 
 export class EvalResult extends ValidationResult {
   static displayName = 'Eval Result';
+  static icon = Code;
 
   @field moduleResults = containsMany(EvalModuleResult);
 
@@ -105,7 +106,7 @@ export class EvalResult extends ValidationResult {
 
     <template>
       <ResultFittedCard
-        @icon={{Code}}
+        @icon={{@model.constructor.icon}}
         @label='Eval'
         @sequenceNumber={{@model.sequenceNumber}}
         @status={{this.displayStatus}}
diff --git a/packages/software-factory/realm/instantiate-result.gts b/packages/software-factory/realm/instantiate-result.gts
index 17d08331b0..224891b850 100644
--- a/packages/software-factory/realm/instantiate-result.gts
+++ b/packages/software-factory/realm/instantiate-result.gts
@@ -71,6 +71,7 @@ export class InstantiateCardEntry extends FieldDef {
 
 export class InstantiateResult extends ValidationResult {
   static displayName = 'Instantiate Result';
+  static icon = Box;
 
   @field cardResults = containsMany(InstantiateCardEntry);
 
@@ -128,7 +129,7 @@ export class InstantiateResult extends ValidationResult {
 
     <template>
       <ResultFittedCard
-        @icon={{Box}}
+        @icon={{@model.constructor.icon}}
         @label='Instantiate'
         @sequenceNumber={{@model.sequenceNumber}}
         @status={{this.displayStatus}}
diff --git a/packages/software-factory/realm/lint-result.gts b/packages/software-factory/realm/lint-result.gts
index c2236dfc68..3dfb5c84a3 100644
--- a/packages/software-factory/realm/lint-result.gts
+++ b/packages/software-factory/realm/lint-result.gts
@@ -110,6 +110,7 @@ export class LintFileResult extends FieldDef {
 
 export class LintResult extends ValidationResult {
   static displayName = 'Lint Result';
+  static icon = ListChecks;
 
   @field fileResults = containsMany(LintFileResult);
 
@@ -190,7 +191,7 @@ export class LintResult extends ValidationResult {
 
     <template>
       <ResultFittedCard
-        @icon={{ListChecks}}
+        @icon={{@model.constructor.icon}}
         @label='Lint'
         @sequenceNumber={{@model.sequenceNumber}}
         @status={{this.displayStatus}}
diff --git a/packages/software-factory/realm/parse-result.gts b/packages/software-factory/realm/parse-result.gts
index 24e21d3cb1..bd61e26d0a 100644
--- a/packages/software-factory/realm/parse-result.gts
+++ b/packages/software-factory/realm/parse-result.gts
@@ -90,6 +90,7 @@ export class ParseFileResult extends FieldDef {
 
 export class ParseResult extends ValidationResult {
   static displayName = 'Parse Result';
+  static icon = FileCode;
 
   @field fileResults = containsMany(ParseFileResult);
 
@@ -154,7 +155,7 @@ export class ParseResult extends ValidationResult {
 
     <template>
       <ResultFittedCard
-        @icon={{FileCode}}
+        @icon={{@model.constructor.icon}}
         @label='Parse'
         @sequenceNumber={{@model.sequenceNumber}}
         @status={{this.displayStatus}}