Surface missing schema fields in Simulation Details page

[Copilot]

Description

Several SimulationOut schema fields exist on the backend but aren't rendered in the details view. This PR surfaces them across four UI areas.

Configuration Card

• caseGroup — shown conditionally under Case Name
• compsetAlias — shown under Compset
• description — read-only Textarea at bottom, preserves line breaks

Provenance Card

• Display createdByUser / lastUpdatedByUser names (fullName → email fallback → raw UUID fallback)
• Extracted UserDisplay helper to DRY the pattern

Scientific Metadata Card (new, below Timeline)

• keyFeatures and knownIssues rendered as markdown via react-markdown
• Card hidden when both fields are empty

Advanced Metadata (new, collapsible)

• Formatted JSON viewer for extra, using existing Collapsible primitive
• Hidden when extra is empty

Type changes (frontend/src/types/simulation.ts)

• Added UserPreview interface
• Added createdByUser and lastUpdatedByUser to SimulationOut

Dependencies

• Added react-markdown@^10.1.0 (no known advisories)

case_id is explicitly not exposed per spec.

Checklist

• Code follows project style guidelines
• Self-reviewed code
• No new warnings
• Tests added or updated (if needed)
• All tests pass (locally and CI/CD)
• Documentation/comments updated (if needed)
• Breaking change noted (if applicable)

Deployment Notes (if any)

None — UI-only change, no schema/API/migration changes.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Enhancement]: Simulation Details Page – Surface Missing Schema Fields</issue_title>
<issue_description>## Summary

Expose currently available but undisplayed simulation fields in the Simulation Details view.

UI expansion only.

Motivation

Several schema fields exist but are not rendered, resulting in incomplete simulation metadata visibility.

Scope

1. Configuration Card

Add:

• case_group (under Case Name, if present)
• compset_alias (under Compset)
• description as multiline read-only field at bottom (preserve line breaks)

2. Provenance Card

Replace raw UUID display with:

• created_by_user
• last_updated_by_user

Fallback to UUID only if related user object is missing.

3. New Card: Scientific Metadata

Place below Timeline.

Add:

• key_features (markdown-rendered)
• known_issues (markdown-rendered)

4. Advanced Metadata (Collapsible)

Add collapsible section labeled “Advanced Metadata” containing formatted JSON viewer for extra.

Explicitly Not Displayed

• Do not expose case_id

Non-Goals

• No schema changes
• No API contract changes
• No new routes
• No database migrations</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [Enhancement]: Simulation Details Page – Surface Missing Schema Fields #123

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

Pull request overview

Surfaces additional SimulationOut metadata on the Simulation Details page (configuration/provenance/scientific/advanced metadata) and updates frontend types/dependencies to support the new UI.

Changes:

• Add createdByUser / lastUpdatedByUser typing and render richer provenance display.
• Render new Scientific Metadata section (markdown) and Advanced Metadata collapsible JSON viewer.
• Add react-markdown dependency and update lockfile.

Reviewed changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 4 comments.

File	Description
frontend/src/types/simulation.ts	Adds UserPreview type and extends SimulationOut with nested user preview fields.
frontend/src/features/simulations/components/SimulationDetailsView.tsx	Renders additional schema fields, adds markdown rendering, and adds an “Advanced Metadata” collapsible.
frontend/package.json	Adds react-markdown dependency.
frontend/pnpm-lock.yaml	Lockfile update for react-markdown and transitive deps.

Files not reviewed (1)

• frontend/pnpm-lock.yaml: Language not supported

[Copilot]

ChevronDown rotation styling won’t activate because data-state is applied to CollapsibleTrigger, not the icon. Move the open-state selector to the trigger (targeting the child svg) or use a group/data-[state=open] pattern so the icon rotates when the collapsible is open.

Suggested change

	<CollapsibleTrigger className="flex w-full items-center justify-between">
	<CardTitle className="text-base">Advanced Metadata</CardTitle>
	<ChevronDown className="h-4 w-4 text-muted-foreground transition-transform duration-200 [&[data-state=open]]:rotate-180" />
	<CollapsibleTrigger className="flex w-full items-center justify-between [&[data-state=open]>svg]:rotate-180">
	<CardTitle className="text-base">Advanced Metadata</CardTitle>
	<ChevronDown className="h-4 w-4 text-muted-foreground transition-transform duration-200" />

[Copilot]

JSON.stringify(simulation.extra, null, 2) runs on every render even when the collapsible is closed, which can be expensive for large extra payloads. Consider controlling the open state and only rendering/stringifying the JSON when open (or memoizing the string).

[Copilot]

Backend UserPreview schema uses full_name (snake_case). As a nested object under createdByUser/lastUpdatedByUser, this will serialize as full_name, so the frontend type fullName won’t match the API payload. Align the field name (e.g., full_name) or update the backend preview schema to use camelCase aliases consistently.

Suggested change

	fullName?: string | null;
	full_name?: string | null;

[Copilot]

UserDisplay reads user.fullName, but the backend UserPreview schema exposes full_name (snake_case). With the current code, full names won’t display and will always fall back to email. Update this to match the actual API field name (or normalize the user preview shape before rendering).

Suggested change

	user?: { fullName?: string | null; email: string } | null;
	fallbackId?: string | null;
	}) => {
	if (user) return <span className="text-sm">by {user.fullName ?? user.email}</span>;
	user?: { fullName?: string | null; full_name?: string | null; email: string } | null;
	fallbackId?: string | null;
	}) => {
	if (user) {
	return (
	<span className="text-sm">
	by {user.fullName ?? user.full_name ?? user.email}
	</span>
	);
	}