refactor(profile): hand the profile a section, not a section's props

`ProfilePage` took the seven props of the practice-group card, read none of
them, and spread them straight through. It now takes the rendered section, so
it places a slot instead of carrying a type for a component it never touches —
and the route that owns the queries also owns the rendering.

The review-run card had one story for a component that branches on provider,
artifact kind, whether the work links anywhere, and how many observations it
holds. The four kinds that were wrong before this branch — a Slack thread, an
Outline document, a GitLab merge request — now each have one, and two play
functions cover the cases a snapshot cannot: no link means no anchor, and the
disclosure counts what it is holding back.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MAQxdMw579siMh1wXKEEh4

Author: Valentin Grüner

webapp/src/components/profile/ProfilePage.stories.tsx

@@ -7,6 +7,7 @@ import { STORY_NOW } from "@/components/common/story-clock";
 import { withStandardPage } from "@/stories/decorators";
 import { expectNoPageOverflow } from "@/test/reflow";
 
+import { PracticeGroupStandingCard } from "./PracticeGroupStandingCard";
 import { ProfilePage } from "./ProfilePage";
 
 const now = new Date(STORY_NOW);
@@ -70,13 +71,15 @@ const groupPractices: PracticeStanding[] = [
 ];
 
 /** The section a developer sees on their own profile, above the activity monitor. */
-const practiceGroupStandings = {
-	groups: [practiceGroup],
-	standings: { [practiceGroup.slug]: practiceGroupStanding },
-	practicesByGroup: { [practiceGroup.slug]: groupPractices },
-	isLoading: false,
-	onOpenDetails: fn(),
-};
+const practiceGroupStandings = (
+	<PracticeGroupStandingCard
+		groups={[practiceGroup]}
+		standings={{ [practiceGroup.slug]: practiceGroupStanding }}
+		practicesByGroup={{ [practiceGroup.slug]: groupPractices }}
+		isLoading={false}
+		onOpenDetails={fn()}
+	/>
+);
 
 export const Default: Story = {
 	args: {

webapp/src/components/profile/ProfilePage.tsx

@@ -1,4 +1,5 @@
 import { XCircleIcon } from "lucide-react";
+import type { ReactNode } from "react";
 
 import type { Profile, ProfileActivityMonitor } from "@/api/types.gen";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -7,10 +8,6 @@ import type { ActivityMonitorFilters } from "@/lib/activity-monitor";
 import type { ProviderType } from "@/lib/provider";
 import type { LeaderboardSchedule } from "@/lib/timeframe";
 
-import {
-	PracticeGroupStandingCard,
-	type PracticeGroupStandingSectionProps,
-} from "./PracticeGroupStandingCard";
 import { ProfileContent } from "./ProfileContent";
 import { ProfileHeader } from "./ProfileHeader";
 
@@ -32,7 +29,11 @@ interface ProfileProps {
 	achievementsEnabled?: boolean;
 	progressionEnabled?: boolean;
 	leaguesEnabled?: boolean;
-	practiceGroupStandings?: PracticeGroupStandingSectionProps;
+	/**
+	 * The practice-group section, rendered by the route that has its data. A slot rather than that
+	 * component's props, so this page does not carry a type for a section it only places.
+	 */
+	practiceGroupStandings?: ReactNode;
 }
 
 export function ProfilePage({
@@ -83,7 +84,7 @@ export function ProfilePage({
 			/>
 			{practiceGroupStandings && (
 				<>
-					<PracticeGroupStandingCard {...practiceGroupStandings} />
+					{practiceGroupStandings}
 					<Separator />
 				</>
 			)}

webapp/src/components/profile/ReviewRunCard.stories.tsx

@@ -1,10 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn } from "storybook/test";
 import type { PracticeGroupReviewRun } from "@/api/types.gen";
+import { daysBefore } from "@/components/common/story-clock";
 import { ReviewRunCard } from "./ReviewRunCard";
 
 const run: PracticeGroupReviewRun = {
 	reviewId: "00000000-0000-0000-0000-000000000101",
-	reviewedAt: new Date("2026-08-12T10:26:00Z"),
+	reviewedAt: daysBefore(2),
 	reviewedWork: {
 		type: "scm.pull_request",
 		id: 902,
@@ -53,3 +55,114 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = { args: { run } };
+
+/**
+ * A Slack thread. Its channel is the identity, and the mark is Slack's — the card reads the artifact
+ * kind off the wire, where it arrives as `chat.conversation_thread` rather than a constant's name.
+ */
+export const SlackConversation: Story = {
+	args: {
+		run: {
+			...run,
+			reviewId: "00000000-0000-0000-0000-000000000201",
+			reviewedWork: {
+				type: "chat.conversation_thread",
+				id: 41,
+				provider: "SLACK",
+				channelName: "backend-guild",
+				url: "https://example.slack.com/archives/C01/p1700000000",
+			},
+		},
+	},
+};
+
+/** An Outline document: its own mark, not the one the default provider would have lent it. */
+export const OutlineDocument: Story = {
+	args: {
+		run: {
+			...run,
+			reviewId: "00000000-0000-0000-0000-000000000202",
+			reviewedWork: {
+				type: "docs.document",
+				id: 77,
+				provider: "OUTLINE",
+				title: "Runbook: rotating the signing key",
+				url: "https://outline.example.com/doc/runbook-rotating-the-signing-key",
+			},
+		},
+	},
+};
+
+/** A merge request on GitLab, where the number and title carry the identity. */
+export const GitLabMergeRequest: Story = {
+	args: {
+		run: {
+			...run,
+			reviewId: "00000000-0000-0000-0000-000000000203",
+			reviewedWork: {
+				...run.reviewedWork,
+				provider: "GITLAB",
+				number: 128,
+				title: "Move the export retention sweep into a transaction",
+				repositoryName: "aet/hephaestus",
+				url: "https://gitlab.example.com/aet/hephaestus/-/merge_requests/128",
+			},
+		},
+	},
+};
+
+/** No link to follow: the identity stays plain text rather than a dead anchor. */
+export const WithoutALink: Story = {
+	args: {
+		run: {
+			...run,
+			reviewId: "00000000-0000-0000-0000-000000000204",
+			reviewedWork: { ...run.reviewedWork, url: undefined, repositoryName: undefined },
+		},
+	},
+	play: async ({ canvas }) => {
+		await expect(canvas.queryByRole("link")).toBeNull();
+	},
+};
+
+const denseRun: PracticeGroupReviewRun = {
+	...run,
+	reviewId: "00000000-0000-0000-0000-000000000205",
+	observations: [
+		...run.observations,
+		{
+			observationId: "00000000-0000-0000-0000-000000000104",
+			practiceSlug: "small-changes",
+			practiceName: "Keep changes focused",
+			title: "The refactor and the fix arrived together",
+			presence: "PRESENT",
+			assessment: "BAD",
+			severity: "MAJOR",
+		},
+		{
+			observationId: "00000000-0000-0000-0000-000000000105",
+			practiceSlug: "covers-new-behavior",
+			practiceName: "Cover new behavior with a test",
+			title: "The new branch has no test exercising it",
+			presence: "ABSENT",
+			assessment: "BAD",
+			severity: "CRITICAL",
+		},
+	],
+};
+
+/** More observations than a card shows at once: it says how many it is holding back. */
+export const ManyObservations: Story = {
+	args: { run: denseRun, onToggleObservation: fn() },
+	play: async ({ canvas, userEvent }) => {
+		// The fourth observation is the one held back, and the button counts it rather than saying "more".
+		const held = "The new branch has no test exercising it";
+		await expect(canvas.queryByText(held)).toBeNull();
+
+		await userEvent.click(canvas.getByRole("button", { name: "Show more (1)" }));
+		await expect(canvas.getByText(held)).toBeVisible();
+
+		await userEvent.click(canvas.getByRole("button", { name: "Show less" }));
+		await expect(canvas.queryByText(held)).toBeNull();
+	},
+};

webapp/src/routes/_authenticated/w/$workspaceSlug/user/$username/index.tsx

@@ -13,6 +13,7 @@ import {
 import type { PracticeStanding } from "@/api/types.gen";
 import { QueryErrorAlert } from "@/components/common/QueryErrorAlert";
 import { useNow } from "@/components/common/use-now";
+import { PracticeGroupStandingCard } from "@/components/profile/PracticeGroupStandingCard";
 import { ProfilePage } from "@/components/profile/ProfilePage";
 import { useWorkspaceFeatures } from "@/hooks/use-workspace-features";
 import { useAuth } from "@/integrations/auth/AuthContext";
@@ -218,28 +219,30 @@ function UserProfile() {
 			progressionEnabled={progressionEnabled === true}
 			leaguesEnabled={leaguesEnabled === true}
 			practiceGroupStandings={
-				currUserIsDashboardUser
-					? {
-							groups: practiceGroups,
-							standings: groupStandings,
-							practicesByGroup,
-							isLoading:
-								groupsQuery.isPending || groupStandingsQuery.isPending || standingsQuery.isPending,
-							error:
-								groupsQuery.error ?? groupStandingsQuery.error ?? standingsQuery.error ?? undefined,
-							onRetry: () => {
-								if (groupsQuery.isError) void groupsQuery.refetch();
-								if (groupStandingsQuery.isError) void groupStandingsQuery.refetch();
-								if (standingsQuery.isError) void standingsQuery.refetch();
-							},
-							onOpenDetails: (group) => {
-								void navigate({
-									to: "/w/$workspaceSlug/user/$username/practice-groups/$groupSlug",
-									params: { workspaceSlug, username, groupSlug: group.slug },
-								});
-							},
+				currUserIsDashboardUser ? (
+					<PracticeGroupStandingCard
+						groups={practiceGroups}
+						standings={groupStandings}
+						practicesByGroup={practicesByGroup}
+						isLoading={
+							groupsQuery.isPending || groupStandingsQuery.isPending || standingsQuery.isPending
 						}
-					: undefined
+						error={
+							groupsQuery.error ?? groupStandingsQuery.error ?? standingsQuery.error ?? undefined
+						}
+						onRetry={() => {
+							if (groupsQuery.isError) void groupsQuery.refetch();
+							if (groupStandingsQuery.isError) void groupStandingsQuery.refetch();
+							if (standingsQuery.isError) void standingsQuery.refetch();
+						}}
+						onOpenDetails={(group) => {
+							void navigate({
+								to: "/w/$workspaceSlug/user/$username/practice-groups/$groupSlug",
+								params: { workspaceSlug, username, groupSlug: group.slug },
+							});
+						}}
+					/>
+				) : undefined
 			}
 		/>
 	);