From 7643e9d509dc5abec5da2fe90c7b05a6e9054bd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 30 Aug 2026 20:39:43 +0200
Subject: [PATCH] Style dashboard's Recent sessions as a real table

Reuse SessionsTable (same component as the Sessions page) instead of a
bespoke flex/hairline list, so status badges, replay/delete actions,
and column layout match the rest of the app.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WzyfRyA7h5rs5SCAahLAWd
---
 app/(app)/page.tsx | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/app/(app)/page.tsx b/app/(app)/page.tsx
index da6f174..584afa0 100644
--- a/app/(app)/page.tsx
+++ b/app/(app)/page.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { BrandMark } from "@/components/layout/BrandMark";
+import { SessionsTable } from "@/components/sessions/SessionsTable";
 import { listSessions } from "@/lib/db/queries/sessions";
 import { getSessionsSummary } from "@/lib/db/queries/stats";
 
@@ -55,21 +56,10 @@ export default async function DashboardPage() {
 
       <Card className="bp-glass">
         <CardHeader>
-          <CardTitle>Recent sessions</CardTitle>
+          <CardTitle className="text-base">Recent sessions</CardTitle>
         </CardHeader>
-        <CardContent className="flex flex-col">
-          {recentSessions.length === 0 && <p className="text-sm text-muted-foreground">No sessions yet.</p>}
-          {recentSessions.map((s, i) => (
-            <Link key={s.id} href={`/sessions/${s.id}`} className="group">
-              {i > 0 && <div className="bp-hairline" />}
-              <div className="flex items-center justify-between px-1 py-2 text-sm">
-                <span className="group-hover:text-primary">{s.name ?? `Session #${s.id}`}</span>
-                <span className="bp-readout text-xs text-muted-foreground">
-                  {new Date(s.startedAt).toLocaleDateString()}
-                </span>
-              </div>
-            </Link>
-          ))}
+        <CardContent className="flex flex-col gap-3">
+          <SessionsTable sessions={recentSessions} />
         </CardContent>
       </Card>
     </div>