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;