dev-integration: header tweaks — badge to far right, use display_name

Two changes only relevant once PR #944 (header badge) and PR #947
(display_name on WorkspaceItem) are both present:

1. Move workspace badge to the right of the user dropdown so it's the
   rightmost element. Matches "where am I?" reading order — identity
   first, current-context last.
2. Use `display_name ?? group` for the badge label instead of `group`
   alone, mirroring what the picker (Workspaces.tsx, PR #947) already
   does. With #947 deployed, this means the badge now shows the user's
   email for their personal tenant instead of `eval-<sub>`.

NOT applied to PR #944's branch directly — its `WorkspaceItem` doesn't
yet include `display_name` (that comes from #947), so a TypeScript
error blocks the change there. After both #944 + #947 merge to main,
a small follow-up PR will land these two tweaks on main as the
canonical home.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: bjagg

frontends/mdr-frontend/src/components/Header/Header.tsx

@@ -83,24 +83,11 @@ const Header: React.FC = () => {
           </NavLink>
         </nav>
 
-        {/* Current-workspace indicator + user menu */}
+        {/* User menu + current-workspace indicator. Indicator sits to the
+            right of the user dropdown so it's the rightmost element in the
+            header — matches a "where am I?" reading order (identity first,
+            current context last). */}
         <Flex align="center" gap="3">
-          {currentWorkspace && (
-            <Badge
-              color="iris"
-              variant="soft"
-              size="2"
-              title={`Schema: ${currentWorkspace.tenant_schema}`}
-            >
-              <LayersIcon />
-              <Flex direction="column" align="start" gap="0">
-                <Text size="2" weight="medium">{currentWorkspace.group}</Text>
-                <Text size="1" color="gray" style={{ fontFamily: "monospace" }}>
-                  {currentWorkspace.tenant_schema}
-                </Text>
-              </Flex>
-            </Badge>
-          )}
           <DropdownMenu.Root>
             <DropdownMenu.Trigger>
               <Button variant="ghost" size="2">
@@ -130,6 +117,27 @@ const Header: React.FC = () => {
               </DropdownMenu.Item>
             </DropdownMenu.Content>
           </DropdownMenu.Root>
+          {currentWorkspace && (
+            <Badge
+              color="iris"
+              variant="soft"
+              size="2"
+              title={`Schema: ${currentWorkspace.tenant_schema}`}
+            >
+              <LayersIcon />
+              <Flex direction="column" align="start" gap="0">
+                {/* display_name (#943) — email for personal tenants, group
+                    name for shared. Falls back to group during any window
+                    where the backend hasn't shipped display_name yet. */}
+                <Text size="2" weight="medium">
+                  {currentWorkspace.display_name ?? currentWorkspace.group}
+                </Text>
+                <Text size="1" color="gray" style={{ fontFamily: "monospace" }}>
+                  {currentWorkspace.tenant_schema}
+                </Text>
+              </Flex>
+            </Badge>
+          )}
         </Flex>
       </div>
     </header>