From 1d88ab96c81747d99b87feae2e1fd77918adc0c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 31 Aug 2026 17:19:24 +0200
Subject: [PATCH] Move STATUS_VARIANT out of the "use client" SessionsTable
 module

The session detail page (a server component) was importing STATUS_VARIANT
from SessionsTable.tsx, a "use client" file. Next.js compiles client
modules separately for the server and client bundles, and pulling a plain
value (not a component) across that boundary let the two compiler caches
drift out of sync in dev, so the same session status could render a
different Badge color depending on which page rendered it. Moved the
constant into its own plain module that both files import.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd
---
 app/(app)/sessions/[id]/page.tsx      | 2 +-
 components/sessions/SessionsTable.tsx | 7 +------
 components/sessions/session-status.ts | 8 ++++++++
 3 files changed, 10 insertions(+), 7 deletions(-)
 create mode 100644 components/sessions/session-status.ts

diff --git a/app/(app)/sessions/[id]/page.tsx b/app/(app)/sessions/[id]/page.tsx
index 28167a4..f2163a7 100644
--- a/app/(app)/sessions/[id]/page.tsx
+++ b/app/(app)/sessions/[id]/page.tsx
@@ -7,7 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { SessionTimelineChart } from "@/components/sessions/SessionTimelineChart";
 import { SessionTitleEditor } from "@/components/sessions/SessionTitleEditor";
 import { SessionDescriptionEditor } from "@/components/sessions/SessionDescriptionEditor";
-import { STATUS_VARIANT } from "@/components/sessions/SessionsTable";
+import { STATUS_VARIANT } from "@/components/sessions/session-status";
 import { getSessionDetail, getSessionName } from "@/lib/db/queries/sessions";
 import { getSessionTimeline } from "@/lib/db/queries/stats";
 import { Play } from "lucide-react";
diff --git a/components/sessions/SessionsTable.tsx b/components/sessions/SessionsTable.tsx
index 65d1a6a..576b55b 100644
--- a/components/sessions/SessionsTable.tsx
+++ b/components/sessions/SessionsTable.tsx
@@ -16,6 +16,7 @@ import {
 } from "@/components/ui/dialog";
 import { Play, Trash2 } from "lucide-react";
 import { toast } from "sonner";
+import { STATUS_VARIANT } from "@/components/sessions/session-status";
 
 export interface SessionRow {
   id: number;
@@ -25,12 +26,6 @@ export interface SessionRow {
   durationMs: number | null;
 }
 
-export const STATUS_VARIANT = {
-  active: "default",
-  completed: "secondary",
-  aborted: "destructive",
-} as const;
-
 function formatDuration(ms: number | null): string {
   if (ms === null) return "-";
   const totalSeconds = Math.round(ms / 1000);
diff --git a/components/sessions/session-status.ts b/components/sessions/session-status.ts
new file mode 100644
index 0000000..82537e6
--- /dev/null
+++ b/components/sessions/session-status.ts
@@ -0,0 +1,8 @@
+// Plain data, deliberately kept out of SessionsTable.tsx (a "use client"
+// module) so server components (e.g. the session detail page) can import it
+// without pulling a value across the client/server compilation boundary.
+export const STATUS_VARIANT = {
+  active: "default",
+  completed: "secondary",
+  aborted: "destructive",
+} as const;