feat: Implement trial event logging, archiving, experiment soft deletion, and new analytics/event data tables.

src/components/experiments/ExperimentsTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { type ColumnDef } from "@tanstack/react-table";
-import { ArrowUpDown, MoreHorizontal, Copy, Eye, Edit, LayoutTemplate, PlayCircle, Archive } from "lucide-react";
+import { ArrowUpDown, MoreHorizontal, Edit, LayoutTemplate, Trash2 } from "lucide-react";
 import * as React from "react";
 
 import { formatDistanceToNow } from "date-fns";
@@ -243,65 +243,57 @@ export const columns: ColumnDef<Experiment>[] = [
   {
     id: "actions",
     enableHiding: false,
-    cell: ({ row }) => {
-      const experiment = row.original;
-
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="h-8 w-8 p-0">
-              <span className="sr-only">Open menu</span>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuItem
-              onClick={() => navigator.clipboard.writeText(experiment.id)}
-            >
-              <Copy className="mr-2 h-4 w-4" />
-              Copy ID
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem asChild>
-              <Link href={`/studies/${experiment.studyId}/experiments/${experiment.id}`}>
-                <Eye className="mr-2 h-4 w-4" />
-                Details
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem asChild>
-              <Link href={`/studies/${experiment.studyId}/experiments/${experiment.id}/edit`}>
-                <Edit className="mr-2 h-4 w-4" />
-                Edit
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem asChild>
-              <Link href={`/studies/${experiment.studyId}/experiments/${experiment.id}/designer`}>
-                <LayoutTemplate className="mr-2 h-4 w-4" />
-                Designer
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem asChild>
-              <Link
-                href={`/studies/${experiment.studyId}/trials/new?experimentId=${experiment.id}`}
-              >
-                <PlayCircle className="mr-2 h-4 w-4" />
-                Start Trial
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem className="text-red-600">
-              <Archive className="mr-2 h-4 w-4" />
-              Archive
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      );
-    },
+    cell: ({ row }) => <ExperimentActions experiment={row.original} />,
   },
 ];
 
+function ExperimentActions({ experiment }: { experiment: Experiment }) {
+  const utils = api.useUtils();
+  const deleteMutation = api.experiments.delete.useMutation({
+    onSuccess: () => {
+      utils.experiments.list.invalidate();
+    },
+  });
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0">
+          <span className="sr-only">Open menu</span>
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuItem asChild>
+          <Link href={`/studies/${experiment.studyId}/experiments/${experiment.id}/edit`}>
+            <Edit className="mr-2 h-4 w-4" />
+            Edit Metadata
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild>
+          <Link href={`/studies/${experiment.studyId}/experiments/${experiment.id}/designer`}>
+            <LayoutTemplate className="mr-2 h-4 w-4" />
+            Design
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="text-red-600 focus:text-red-700"
+          onClick={() => {
+            if (confirm("Are you sure you want to delete this experiment?")) {
+              deleteMutation.mutate({ id: experiment.id });
+            }
+          }}
+        >
+          <Trash2 className="mr-2 h-4 w-4" />
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 export function ExperimentsTable() {
   const { selectedStudyId } = useStudyContext();
 

src/components/experiments/experiments-columns.tsx

@@ -27,6 +27,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
+import { api } from "~/trpc/react";
 
 export type Experiment = {
   id: string;
@@ -78,29 +79,25 @@ const statusConfig = {
 };
 
 function ExperimentActionsCell({ experiment }: { experiment: Experiment }) {
-  const handleDelete = async () => {
+  const utils = api.useUtils();
+  const deleteMutation = api.experiments.delete.useMutation({
+    onSuccess: () => {
+      toast.success("Experiment deleted successfully");
+      utils.experiments.list.invalidate();
+    },
+    onError: (error) => {
+      toast.error(`Failed to delete experiment: ${error.message}`);
+    },
+  });
+
+  const handleDelete = () => {
     if (
       window.confirm(`Are you sure you want to delete "${experiment.name}"?`)
     ) {
-      try {
-        // TODO: Implement delete experiment mutation
-        toast.success("Experiment deleted successfully");
-      } catch {
-        toast.error("Failed to delete experiment");
-      }
+      deleteMutation.mutate({ id: experiment.id });
     }
   };
 
-  const handleCopyId = () => {
-    void navigator.clipboard.writeText(experiment.id);
-    toast.success("Experiment ID copied to clipboard");
-  };
-
-  const handleStartTrial = () => {
-    // Navigate to new trial creation with this experiment pre-selected
-    window.location.href = `/studies/${experiment.studyId}/trials/new?experimentId=${experiment.id}`;
-  };
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -111,45 +108,20 @@ function ExperimentActionsCell({ experiment }: { experiment: Experiment }) {
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <DropdownMenuLabel>Actions</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-
         <DropdownMenuItem asChild>
-          <Link href={`/studies/${experiment.studyId}/experiments/${experiment.id}`}>
-            <Eye className="mr-2 h-4 w-4" />
-            View Details
+          <Link href={`/studies/${experiment.studyId}/experiments/${experiment.id}/edit`}>
+            <Edit className="mr-2 h-4 w-4" />
+            Edit Metadata
           </Link>
         </DropdownMenuItem>
 
         <DropdownMenuItem asChild>
           <Link href={`/studies/${experiment.studyId}/experiments/${experiment.id}/designer`}>
             <FlaskConical className="mr-2 h-4 w-4" />
-            Open Designer
+            Design
           </Link>
         </DropdownMenuItem>
 
-        {experiment.canEdit && (
-          <DropdownMenuItem asChild>
-            <Link href={`/studies/${experiment.studyId}/experiments/${experiment.id}/edit`}>
-              <Edit className="mr-2 h-4 w-4" />
-              Edit Experiment
-            </Link>
-          </DropdownMenuItem>
-        )}
-
-        <DropdownMenuSeparator />
-
-        {experiment.status === "ready" && (
-          <DropdownMenuItem onClick={handleStartTrial}>
-            <Play className="mr-2 h-4 w-4" />
-            Start New Trial
-          </DropdownMenuItem>
-        )}
-
-        <DropdownMenuItem onClick={handleCopyId}>
-          <Copy className="mr-2 h-4 w-4" />
-          Copy Experiment ID
-        </DropdownMenuItem>
-
         {experiment.canDelete && (
           <>
             <DropdownMenuSeparator />
@@ -158,7 +130,7 @@ function ExperimentActionsCell({ experiment }: { experiment: Experiment }) {
               className="text-red-600 focus:text-red-600"
             >
               <Trash2 className="mr-2 h-4 w-4" />
-              Delete Experiment
+              Delete
             </DropdownMenuItem>
           </>
         )}
@@ -315,20 +287,7 @@ export const experimentsColumns: ColumnDef<Experiment>[] = [
     },
     enableSorting: false,
   },
-  {
-    accessorKey: "createdAt",
-    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Created" />
-    ),
-    cell: ({ row }) => {
-      const date = row.getValue("createdAt");
-      return (
-        <div className="text-sm whitespace-nowrap">
-          {formatDistanceToNow(date as Date, { addSuffix: true })}
-        </div>
-      );
-    },
-  },
+
   {
     accessorKey: "updatedAt",
     header: ({ column }) => (