Move status badge and duration next to the Replay button

They now sit inline in the right-hand column alongside Replay instead
of prefixing the left column's meta line, which now only shows the
replay-lineage/play-count info when there is any.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd
This commit is contained in:
2026-08-30 21:07:18 +02:00
co-authored by Claude Sonnet 5
parent e9d5bb37d2
commit a94f2f33b6
+25 -21
View File
@@ -38,31 +38,35 @@ export default async function SessionDetailPage({ params }: { params: Promise<{
<div className="flex items-center justify-between gap-4"> <div className="flex items-center justify-between gap-4">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<SessionTitleEditor sessionId={detail.session.id} initialName={detail.session.name} /> <SessionTitleEditor sessionId={detail.session.id} initialName={detail.session.name} />
<p className="mt-1 flex flex-wrap items-center gap-x-1 text-sm text-muted-foreground"> {(detail.session.kind === "replay" || detail.session.playCount > 0) && (
<Badge variant={STATUS_VARIANT[detail.session.status]}>{detail.session.status}</Badge> <p className="mt-1 text-sm text-muted-foreground">
· {formatDuration(detail.session.durationMs)} {detail.session.kind === "replay" && detail.replayedFromName !== undefined && (
{detail.session.kind === "replay" && detail.replayedFromName !== undefined && ( <>replayed from {detail.replayedFromName ?? `session #${detail.session.replayedSessionId}`}</>
<> · replayed from {detail.replayedFromName ?? `session #${detail.session.replayedSessionId}`}</> )}
)} {detail.session.playCount > 0 && (
{detail.session.playCount > 0 && ( <>
<> {detail.session.kind === "replay" && detail.replayedFromName !== undefined && " · "}
{" "} replayed {detail.session.playCount}×
· replayed {detail.session.playCount}× {detail.session.lastPlayedAt && ` (last ${new Date(detail.session.lastPlayedAt).toLocaleString()})`}
{detail.session.lastPlayedAt && ` (last ${new Date(detail.session.lastPlayedAt).toLocaleString()})`} </>
</> )}
)} </p>
</p> )}
{detail.session.description && ( {detail.session.description && (
<p className="mt-1 text-sm text-muted-foreground">{detail.session.description}</p> <p className="mt-1 text-sm text-muted-foreground">{detail.session.description}</p>
)} )}
</div> </div>
{canReplay && ( <div className="flex shrink-0 items-center gap-3">
<Button asChild> <Badge variant={STATUS_VARIANT[detail.session.status]}>{detail.session.status}</Badge>
<Link href={`/sessions/${detail.session.id}/replay`}> <span className="bp-readout text-sm text-muted-foreground">{formatDuration(detail.session.durationMs)}</span>
<Play className="size-4" /> Replay {canReplay && (
</Link> <Button asChild>
</Button> <Link href={`/sessions/${detail.session.id}/replay`}>
)} <Play className="size-4" /> Replay
</Link>
</Button>
)}
</div>
</div> </div>
<Card className="bp-glass"> <Card className="bp-glass">