diff --git a/apps/fabro-web/app/components/run-summary-panel.tsx b/apps/fabro-web/app/components/run-summary-panel.tsx
index 953920c20..643a16bc3 100644
--- a/apps/fabro-web/app/components/run-summary-panel.tsx
+++ b/apps/fabro-web/app/components/run-summary-panel.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import type {
+  Principal,
   Run,
   SandboxResources,
   SandboxState,
@@ -50,6 +51,16 @@ function Cell({ label, children }: { label: string; children: ReactNode }) {
   );
 }
 
+function PrincipalValue({ principal }: { principal: Principal }) {
+  const display = principalDisplay(principal);
+  return (
+    <div className="flex items-center gap-2">
+      {display.glyph}
+      <span className={VALUE_CLASS}>{display.label}</span>
+    </div>
+  );
+}
+
 export interface RunSummaryPanelViewProps {
   run:                Run | null;
   runLoading:         boolean;
@@ -126,15 +137,9 @@ export function RunSummaryPanelView({
         <Cell label="Created by">
           {runLoading || !run ? (
             <Skeleton widthClass="w-20" />
-          ) : (() => {
-            const created = principalDisplay(run.created_by);
-            return (
-              <div className="flex items-center gap-2">
-                {created.glyph}
-                <span className={VALUE_CLASS}>{created.label}</span>
-              </div>
-            );
-          })()}
+          ) : (
+            <PrincipalValue principal={run.created_by} />
+          )}
         </Cell>
 
         <Cell label="Changes">
diff --git a/apps/fabro-web/app/components/runs-list/run-table-row.tsx b/apps/fabro-web/app/components/runs-list/run-table-row.tsx
index 7810043e3..7fb2a4299 100644
--- a/apps/fabro-web/app/components/runs-list/run-table-row.tsx
+++ b/apps/fabro-web/app/components/runs-list/run-table-row.tsx
@@ -12,6 +12,17 @@ import { RowActionsMenu } from "./row-actions-menu";
 import { SelectionCheckbox } from "./selection-checkbox";
 import type { ToggleableColumn } from "./toggleable-column";
 
+function CreatedByCell({ run }: { run: Pick<RunWithStatus, "createdBy"> }) {
+  const creatorDisplay = principalDisplay(run.createdBy);
+  return (
+    <td className="relative z-10 w-8 whitespace-nowrap px-3 py-2.5">
+      <Tooltip label={creatorDisplay.label}>
+        <span aria-label={`Created by ${creatorDisplay.label}`}>{creatorDisplay.glyph}</span>
+      </Tooltip>
+    </td>
+  );
+}
+
 function listLifecycleStatusLabel(
   run: Pick<RunWithStatus, "status" | "statusLabel" | "lifecycleStatusLabel">,
 ): string | null {
@@ -52,16 +63,7 @@ export function RunTableRow({
           <span className={`font-mono text-xs ${statusDisplay.text}`}>{run.statusLabel}</span>
         </span>
       </td>
-      {show("created_by") && (() => {
-        const creatorDisplay = principalDisplay(run.createdBy);
-        return (
-          <td className="relative z-10 w-8 whitespace-nowrap px-3 py-2.5">
-            <Tooltip label={creatorDisplay.label}>
-              <span aria-label={`Created by ${creatorDisplay.label}`}>{creatorDisplay.glyph}</span>
-            </Tooltip>
-          </td>
-        );
-      })()}
+      {show("created_by") && <CreatedByCell run={run} />}
       {show("repo") && (
         <td className="whitespace-nowrap px-3 py-2.5 font-mono text-xs font-medium text-teal-500">
           {run.repo}