Proper runs structure

src/app/runs/[runId]/page.tsx

@@ -8,7 +8,7 @@ import { File } from "lucide-react";
 import Editor from "./components/Editor";
 import useAction, { useActionInterval } from "@/hook/use-action";
 import { getLiveRun } from "@/modules/live-run/actions";
-import ProblemCard from "../problems/components/ProblemCard";
+import ProblemCard from "@/app/problems/components/ProblemCard";
 import ProfileCard from "./components/ProfileCard";
 import { getProblem } from "@/modules/problems/actions";
 

src/app/runs/components/LiveRunRow.tsx

@@ -8,7 +8,8 @@ import formatTime from "@/lib/time-format";
 import useAction from "@/hook/use-action";
 import { getProblem } from "@/modules/problems/actions";
 import Link from "next/link";
-import { LinkIcon } from "lucide-react";
+import { Eye, LinkIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 export default function LiveRunRow({
   index,
@@ -57,10 +58,22 @@ export default function LiveRunRow({
       </TableCell>
 
       {/* Views */}
-      <TableCell>{isTop ? <Badge>{run.views}</Badge> : run.views}</TableCell>
+      <TableCell className="text-center">
+        {isTop ? <Badge>{run.views}</Badge> : run.views}
+      </TableCell>
 
-      {/* Live status with category color */}
+      {/* Category */}
-      <TableCell>{run.category}</TableCell>
+      <TableCell className="text-center">{run.category}</TableCell>
+
+      {/* Actions */}
+      <TableCell className="pr-5 text-end">
+        <Link href={`/runs/${run.id}`}>
+          <Button size="sm" variant={isTop ? "default" : "ghost"}>
+            <Eye className="h-4 w-4 mr-1" />
+            Watch
+          </Button>
+        </Link>
+      </TableCell>
     </TableRow>
   );
 }

src/app/runs/page.tsx

@@ -49,9 +49,10 @@ export default function LiveRuns() {
               <TableRow>
                 <TableHead className="pl-5">Runner</TableHead>
                 <TableHead>Problem</TableHead>
-                <TableHead className="w-20">Time</TableHead>
+                <TableHead className="w-20 text-center">Time</TableHead>
-                <TableHead className="w-20">Views</TableHead>
+                <TableHead className="w-20 text-center">Views</TableHead>
-                <TableHead className="pr-5">Category</TableHead>
+                <TableHead className="w-20 text-center">Category</TableHead>
+                <TableHead className="pr-5 w-24" />
               </TableRow>
             </TableHeader>