Feat: now you can delete a episode

apps/webapp/app/components/logs/log-text-collapse.tsx

@@ -0,0 +1,166 @@
+import { useState } from "react";
+import { useFetcher } from "@remix-run/react";
+import { AlertCircle, Info, Trash } from "lucide-react";
+import { cn } from "~/lib/utils";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
+import { Button } from "../ui";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "../ui/alert-dialog";
+
+interface LogTextCollapseProps {
+  text?: string;
+  error?: string;
+  logData: any;
+  episodeUUID?: string;
+}
+
+export function LogTextCollapse({
+  episodeUUID,
+  text,
+  error,
+  logData,
+}: LogTextCollapseProps) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const deleteFetcher = useFetcher();
+
+  const handleDelete = () => {
+    console.log(logData);
+    if (!episodeUUID) {
+      console.error("No episodeUuid found in log data");
+      return;
+    }
+
+    deleteFetcher.submit(
+      { episodeUuid: episodeUUID },
+      {
+        method: "DELETE",
+        action: "/api/v1/episode/delete",
+        encType: "application/json",
+      },
+    );
+    setDeleteDialogOpen(false);
+  };
+
+  // Show collapse if text is long (by word count)
+  const COLLAPSE_WORD_LIMIT = 30;
+
+  if (!text) {
+    return (
+      <div className="text-muted-foreground mb-2 text-xs italic">
+        No log details.
+      </div>
+    );
+  }
+
+  // Split by words for word count
+  const words = text.split(/\s+/);
+  const isLong = words.length > COLLAPSE_WORD_LIMIT;
+
+  let displayText: string;
+  if (isLong) {
+    displayText = words.slice(0, COLLAPSE_WORD_LIMIT).join(" ") + " ...";
+  } else {
+    displayText = text;
+  }
+
+  return (
+    <>
+      <div className="mb-2">
+        <p
+          className={cn(
+            "whitespace-p-wrap pt-2 text-sm break-words",
+            isLong ? "max-h-16 overflow-hidden" : "",
+          )}
+          style={{ lineHeight: "1.5" }}
+        >
+          {displayText}
+        </p>
+        {isLong && (
+          <>
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+              <DialogContent className="max-w-2xl p-4">
+                <DialogHeader>
+                  <DialogTitle className="flex w-full items-center justify-between">
+                    <span>Log Details</span>
+                  </DialogTitle>
+                </DialogHeader>
+                <div className="max-h-[70vh] overflow-auto p-0">
+                  <p
+                    className="px-3 py-2 text-sm break-words whitespace-pre-wrap"
+                    style={{ lineHeight: "1.5" }}
+                  >
+                    {text}
+                  </p>
+                </div>
+              </DialogContent>
+            </Dialog>
+          </>
+        )}
+      </div>
+      <div
+        className={cn(
+          "text-muted-foreground flex items-center justify-end text-xs",
+          isLong && "justify-between",
+        )}
+      >
+        {isLong && (
+          <div className="flex items-center">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="-ml-2 rounded px-2"
+              onClick={() => setDialogOpen(true)}
+            >
+              <Info size={15} />
+            </Button>
+            {episodeUUID && (
+              <AlertDialog
+                open={deleteDialogOpen}
+                onOpenChange={setDeleteDialogOpen}
+              >
+                <AlertDialogTrigger asChild>
+                  <Button variant="ghost" size="sm" className="rounded px-2">
+                    <Trash size={15} />
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Delete Episode</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      Are you sure you want to delete this episode? This action
+                      cannot be undone.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction onClick={handleDelete}>
+                      Continue
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            )}
+          </div>
+        )}
+        {error && (
+          <div className="flex items-center gap-1 text-red-600">
+            <AlertCircle className="h-3 w-3" />
+            <span className="max-w-[200px] truncate" title={error}>
+              {error}
+            </span>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

apps/webapp/app/components/logs/virtual-logs-list.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import {
   InfiniteLoader,
   AutoSizer,
@@ -10,96 +10,9 @@ import {
 import { type LogItem } from "~/hooks/use-logs";
 import { Badge } from "~/components/ui/badge";
 import { Card, CardContent } from "~/components/ui/card";
-import { AlertCircle } from "lucide-react";
 import { cn } from "~/lib/utils";
 import { ScrollManagedList } from "../virtualized-list";
-
+import { LogTextCollapse } from "./log-text-collapse";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
-import { Button } from "../ui";
-
-// --- LogTextCollapse component ---
-function LogTextCollapse({ text, error }: { text?: string; error?: string }) {
-  const [dialogOpen, setDialogOpen] = useState(false);
-
-  // Show collapse if text is long (by word count)
-  const COLLAPSE_WORD_LIMIT = 30;
-
-  if (!text) {
-    return (
-      <div className="text-muted-foreground mb-2 text-xs italic">
-        No log details.
-      </div>
-    );
-  }
-
-  // Split by words for word count
-  const words = text.split(/\s+/);
-  const isLong = words.length > COLLAPSE_WORD_LIMIT;
-
-  let displayText: string;
-  if (isLong) {
-    displayText = words.slice(0, COLLAPSE_WORD_LIMIT).join(" ") + " ...";
-  } else {
-    displayText = text;
-  }
-
-  return (
-    <>
-      <div className="mb-2">
-        <p
-          className={cn(
-            "whitespace-p-wrap pt-2 text-sm break-words",
-            isLong ? "max-h-16 overflow-hidden" : "",
-          )}
-          style={{ lineHeight: "1.5" }}
-        >
-          {displayText}
-        </p>
-        {isLong && (
-          <>
-            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-              <DialogContent className="max-w-2xl p-4">
-                <DialogHeader>
-                  <DialogTitle className="flex w-full items-center justify-between">
-                    <span>Log Details</span>
-                  </DialogTitle>
-                </DialogHeader>
-                <div className="max-h-[70vh] overflow-auto p-0">
-                  <p
-                    className="px-3 py-2 text-sm break-words whitespace-pre-wrap"
-                    style={{ lineHeight: "1.5" }}
-                  >
-                    {text}
-                  </p>
-                </div>
-              </DialogContent>
-            </Dialog>
-          </>
-        )}
-      </div>
-      <div
-        className={cn(
-          "text-muted-foreground flex items-center justify-end text-xs",
-          isLong && "justify-between",
-        )}
-      >
-        {isLong && (
-          <Button variant="ghost" size="sm" className="-ml-2 rounded">
-            See full
-          </Button>
-        )}
-        {error && (
-          <div className="flex items-center gap-1 text-red-600">
-            <AlertCircle className="h-3 w-3" />
-            <span className="max-w-[200px] truncate" title={error}>
-              {error}
-            </span>
-          </div>
-        )}
-      </div>
-    </>
-  );
-}
 
 interface VirtualLogsListProps {
   logs: LogItem[];
@@ -183,7 +96,12 @@ function LogItemRenderer(
               </div>
             </div>
 
-            <LogTextCollapse text={log.ingestText} error={log.error} />
+            <LogTextCollapse
+              text={log.ingestText}
+              error={log.error}
+              logData={log.data}
+              episodeUUID={log.episodeUUID}
+            />
           </CardContent>
         </Card>
       </div>
@@ -196,7 +114,6 @@ export function VirtualLogsList({
   hasMore,
   loadMore,
   isLoading,
-  height = 600,
 }: VirtualLogsListProps) {
   // Create a CellMeasurerCache instance using useRef to prevent recreation
   const cacheRef = useRef<CellMeasurerCache | null>(null);

apps/webapp/app/components/ui/alert-dialog.tsx

@@ -0,0 +1,139 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import React from "react";
+
+import { buttonVariants } from "./button";
+import { cn } from "../../lib/utils";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "bg-grayAlpha-700 dark:bg-grayAlpha-500 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "bg-background-2 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 font-sans shadow-lg duration-200 sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants({ variant: "secondary" }), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "ghost" }),
+      "mt-2 sm:mt-0",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

apps/webapp/app/hooks/use-logs.tsx

@@ -12,6 +12,8 @@ export interface LogItem {
   sourceURL?: string;
   integrationSlug?: string;
   activityId?: string;
+  episodeUUID?: string;
+  data?: any;
 }
 
 export interface LogsResponse {

apps/webapp/app/routes/api.v1.episode.delete.tsx

@@ -1,13 +1,13 @@
 import { z } from "zod";
 import { json } from "@remix-run/node";
-import { createActionApiRoute } from "~/services/routeBuilders/apiBuilder.server";
+import { createHybridActionApiRoute } from "~/services/routeBuilders/apiBuilder.server";
 import { deleteEpisodeWithRelatedNodes } from "~/services/graphModels/episode";
 
 export const DeleteEpisodeBodyRequest = z.object({
   episodeUuid: z.string().uuid("Episode UUID must be a valid UUID"),
 });
 
-const { action, loader } = createActionApiRoute(
+const { action, loader } = createHybridActionApiRoute(
   {
     body: DeleteEpisodeBodyRequest,
     allowJWT: true,

apps/webapp/app/routes/api.v1.logs.activity.tsx

@@ -116,10 +116,12 @@ export async function loader({ request }: LoaderFunctionArgs) {
     processedAt: log.processedAt,
     status: log.status,
     error: log.error,
+    episodeUUID: (log.output as any)?.episodeUuid,
     sourceURL: log.activity?.sourceURL,
     integrationSlug:
       log.activity?.integrationAccount?.integrationDefinition?.slug,
     activityId: log.activityId,
+    data: log.data,
   }));
 
   return json({

apps/webapp/app/routes/api.v1.logs.all.tsx

@@ -60,6 +60,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
         processedAt: true,
         status: true,
         error: true,
+        output: true,
         data: true,
         activity: {
           select: {
@@ -120,10 +121,12 @@ export async function loader({ request }: LoaderFunctionArgs) {
         "No content",
       time: log.createdAt,
       processedAt: log.processedAt,
+      episodeUUID: (log.output as any)?.episodeUuid,
       status: log.status,
       error: log.error,
       sourceURL: log.activity?.sourceURL,
       integrationSlug: integrationDef?.slug,
+      data: log.data,
     };
   });