From a94f2f33b6956ebd3624ecf9b2695955b46c1493 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 30 Aug 2026 21:07:18 +0200
Subject: [PATCH] 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
---
 app/(app)/sessions/[id]/page.tsx | 46 +++++++++++++++++---------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/app/(app)/sessions/[id]/page.tsx b/app/(app)/sessions/[id]/page.tsx
index 805c9a1..afc16e8 100644
--- a/app/(app)/sessions/[id]/page.tsx
+++ b/app/(app)/sessions/[id]/page.tsx
@@ -38,31 +38,35 @@ export default async function SessionDetailPage({ params }: { params: Promise<{
       <div className="flex items-center justify-between gap-4">
         <div className="min-w-0 flex-1">
           <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">
-            <Badge variant={STATUS_VARIANT[detail.session.status]}>{detail.session.status}</Badge>
-            · {formatDuration(detail.session.durationMs)}
-            {detail.session.kind === "replay" && detail.replayedFromName !== undefined && (
-              <> · replayed from {detail.replayedFromName ?? `session #${detail.session.replayedSessionId}`}</>
-            )}
-            {detail.session.playCount > 0 && (
-              <>
-                {" "}
-                · replayed {detail.session.playCount}×
-                {detail.session.lastPlayedAt && ` (last ${new Date(detail.session.lastPlayedAt).toLocaleString()})`}
-              </>
-            )}
-          </p>
+          {(detail.session.kind === "replay" || detail.session.playCount > 0) && (
+            <p className="mt-1 text-sm text-muted-foreground">
+              {detail.session.kind === "replay" && detail.replayedFromName !== undefined && (
+                <>replayed from {detail.replayedFromName ?? `session #${detail.session.replayedSessionId}`}</>
+              )}
+              {detail.session.playCount > 0 && (
+                <>
+                  {detail.session.kind === "replay" && detail.replayedFromName !== undefined && " · "}
+                  replayed {detail.session.playCount}×
+                  {detail.session.lastPlayedAt && ` (last ${new Date(detail.session.lastPlayedAt).toLocaleString()})`}
+                </>
+              )}
+            </p>
+          )}
           {detail.session.description && (
             <p className="mt-1 text-sm text-muted-foreground">{detail.session.description}</p>
           )}
         </div>
-        {canReplay && (
-          <Button asChild>
-            <Link href={`/sessions/${detail.session.id}/replay`}>
-              <Play className="size-4" /> Replay
-            </Link>
-          </Button>
-        )}
+        <div className="flex shrink-0 items-center gap-3">
+          <Badge variant={STATUS_VARIANT[detail.session.status]}>{detail.session.status}</Badge>
+          <span className="bp-readout text-sm text-muted-foreground">{formatDuration(detail.session.durationMs)}</span>
+          {canReplay && (
+            <Button asChild>
+              <Link href={`/sessions/${detail.session.id}/replay`}>
+                <Play className="size-4" /> Replay
+              </Link>
+            </Button>
+          )}
+        </div>
       </div>
 
       <Card className="bp-glass">