feat: Add Outlook support to Deep Clean feature

.gitignore

@@ -77,4 +77,7 @@ docker-compose.override.yml
 # cli logs
 logs
 
-coverage
+coverage
+
+# Memory bank (Cline AI documentation)
+memory-bank/

apps/web/app/(app)/[emailAccountId]/clean/ActionSelectionStep.tsx

@@ -6,9 +6,10 @@ import { TypographyH3 } from "@/components/Typography";
 import { useStep } from "@/app/(app)/[emailAccountId]/clean/useStep";
 import { ButtonListSurvey } from "@/components/ButtonListSurvey";
 import { CleanAction } from "@prisma/client";
+import { Button } from "@/components/ui/button";
 
 export function ActionSelectionStep() {
-  const { onNext } = useStep();
+  const { onNext, onPrevious } = useStep();
   const [_, setAction] = useQueryState(
     "action",
     parseAsStringEnum([CleanAction.ARCHIVE, CleanAction.MARK_READ]),
@@ -39,6 +40,12 @@ export function ActionSelectionStep() {
         ]}
         onClick={(value) => onSetAction(value as CleanAction)}
       />
+
+      <div className="mt-6">
+        <Button variant="outline" onClick={onPrevious}>
+          Back
+        </Button>
+      </div>
     </div>
   );
 }

apps/web/app/(app)/[emailAccountId]/clean/CleanInstructionsStep.tsx

@@ -17,7 +17,7 @@ const schema = z.object({ instructions: z.string().optional() });
 type Inputs = z.infer<typeof schema>;
 
 export function CleanInstructionsStep() {
-  const { onNext } = useStep();
+  const { onNext, onPrevious } = useStep();
   const {
     register,
     handleSubmit,
@@ -51,7 +51,7 @@ export function CleanInstructionsStep() {
           name="starred"
           enabled={skipStates.skipStarred}
           onChange={(value) => setSkipStates({ skipStarred: value })}
-          labelRight="Starred emails"
+          labelRight="Starred/Flagged emails"
         />
         <Toggle
           name="calendar"
@@ -103,7 +103,10 @@ I'm in the middle of a building project, keep those emails too.`}
         </div>
       )}
 
-      <div className="mt-6 flex justify-center">
+      <div className="mt-6 flex justify-center gap-2">
+        <Button type="button" variant="outline" onClick={onPrevious}>
+          Back
+        </Button>
         <Button type="submit">Continue</Button>
       </div>
     </form>

apps/web/app/(app)/[emailAccountId]/clean/ConfirmationStep.tsx

@@ -13,6 +13,8 @@ import { PREVIEW_RUN_COUNT } from "@/app/(app)/[emailAccountId]/clean/consts";
 import { HistoryIcon, SettingsIcon } from "lucide-react";
 import { useAccount } from "@/providers/EmailAccountProvider";
 import { prefixPath } from "@/utils/path";
+import { isGoogleProvider } from "@/utils/email/provider-types";
+import { useStep } from "@/app/(app)/[emailAccountId]/clean/useStep";
 
 export function ConfirmationStep({
   showFooter,
@@ -36,7 +38,9 @@ export function ConfirmationStep({
   reuseSettings: boolean;
 }) {
   const router = useRouter();
-  const { emailAccountId } = useAccount();
+  const { emailAccountId, emailAccount } = useAccount();
+  const { onPrevious } = useStep();
+  const isGmail = isGoogleProvider(emailAccount?.provider);
 
   const handleStartCleaning = async () => {
     const result = await cleanInboxAction(emailAccountId, {
@@ -89,13 +93,15 @@ export function ConfirmationStep({
         <li>
           {action === CleanAction.ARCHIVE ? (
             <>
-              Archived emails will be labeled{" "}
-              <Badge color="green">Archived</Badge> in Gmail.
+              Archived emails will be {isGmail ? "labeled" : "moved to the"}{" "}
+              <Badge color="green">Archive{isGmail ? "d" : ""}</Badge>{" "}
+              {isGmail ? "in Gmail" : "folder in Outlook"}.
             </>
           ) : (
             <>
               Emails marked as read will be labeled{" "}
-              <Badge color="green">Read</Badge> in Gmail.
+              <Badge color="green">Read</Badge>{" "}
+              {isGmail ? "in Gmail" : "in Outlook"}.
             </>
           )}
         </li>
@@ -115,7 +121,10 @@ export function ConfirmationStep({
         )}
       </ul>
 
-      <div className="mt-6">
+      <div className="mt-6 flex justify-center gap-2">
+        <Button size="lg" variant="outline" onClick={onPrevious}>
+          Back
+        </Button>
         <Button size="lg" onClick={handleStartCleaning}>
           Start Cleaning
         </Button>

apps/web/app/(app)/[emailAccountId]/clean/PreviewStep.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { useCallback, useEffect, useState, useMemo } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { CleanAction } from "@prisma/client";
+import { LoadingContent } from "@/components/LoadingContent";
+import { EmailFirehose } from "@/app/(app)/[emailAccountId]/clean/EmailFirehose";
+import { cleanInboxAction } from "@/utils/actions/clean";
+import { PREVIEW_RUN_COUNT } from "@/app/(app)/[emailAccountId]/clean/consts";
+import { useAccount } from "@/providers/EmailAccountProvider";
+import { toastError } from "@/components/Toast";
+import { Button } from "@/components/ui/button";
+import {
+  CardGreen,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { useEmailStream } from "@/app/(app)/[emailAccountId]/clean/useEmailStream";
+
+export function PreviewStep() {
+  const router = useRouter();
+  const { emailAccountId } = useAccount();
+  const searchParams = useSearchParams();
+  const [isLoading, setIsLoading] = useState(true);
+  const [jobId, setJobId] = useState<string | null>(null);
+  const [error, setError] = useState<string | undefined>(undefined);
+  const [isLoadingPreview, setIsLoadingPreview] = useState(false);
+  const [isLoadingFull, setIsLoadingFull] = useState(false);
+
+  const action =
+    (searchParams.get("action") as CleanAction) ?? CleanAction.ARCHIVE;
+  const timeRange = searchParams.get("timeRange")
+    ? Number.parseInt(searchParams.get("timeRange")!)
+    : 7;
+  const instructions = searchParams.get("instructions") ?? undefined;
+  const skipReply = searchParams.get("skipReply") === "true";
+  const skipStarred = searchParams.get("skipStarred") === "true";
+  const skipCalendar = searchParams.get("skipCalendar") === "true";
+  const skipReceipt = searchParams.get("skipReceipt") === "true";
+  const skipAttachment = searchParams.get("skipAttachment") === "true";
+
+  const runPreview = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    const result = await cleanInboxAction(emailAccountId, {
+      daysOld: timeRange,
+      instructions: instructions || "",
+      action,
+      maxEmails: PREVIEW_RUN_COUNT,
+      skips: {
+        reply: skipReply,
+        starred: skipStarred,
+        calendar: skipCalendar,
+        receipt: skipReceipt,
+        attachment: skipAttachment,
+        conversation: false,
+      },
+    });
+
+    if (result?.serverError) {
+      setError(result.serverError);
+      toastError({ description: result.serverError });
+    } else if (result?.data?.jobId) {
+      setJobId(result.data.jobId);
+    }
+
+    setIsLoading(false);
+  }, [
+    emailAccountId,
+    action,
+    timeRange,
+    instructions,
+    skipReply,
+    skipStarred,
+    skipCalendar,
+    skipReceipt,
+    skipAttachment,
+  ]);
+
+  const handleProcessPreviewOnly = async () => {
+    setIsLoadingPreview(true);
+    const result = await cleanInboxAction(emailAccountId, {
+      daysOld: timeRange,
+      instructions: instructions || "",
+      action,
+      maxEmails: PREVIEW_RUN_COUNT,
+      skips: {
+        reply: skipReply,
+        starred: skipStarred,
+        calendar: skipCalendar,
+        receipt: skipReceipt,
+        attachment: skipAttachment,
+        conversation: false,
+      },
+    });
+
+    setIsLoadingPreview(false);
+
+    if (result?.serverError) {
+      toastError({ description: result.serverError });
+    } else if (result?.data?.jobId) {
+      setJobId(result.data.jobId);
+    }
+  };
+
+  const handleRunOnFullInbox = async () => {
+    setIsLoadingFull(true);
+    const result = await cleanInboxAction(emailAccountId, {
+      daysOld: timeRange,
+      instructions: instructions || "",
+      action,
+      skips: {
+        reply: skipReply,
+        starred: skipStarred,
+        calendar: skipCalendar,
+        receipt: skipReceipt,
+        attachment: skipAttachment,
+        conversation: false,
+      },
+    });
+
+    setIsLoadingFull(false);
+
+    if (result?.serverError) {
+      toastError({ description: result.serverError });
+    } else if (result?.data?.jobId) {
+      setJobId(result.data.jobId);
+    }
+  };
+
+  useEffect(() => {
+    runPreview();
+  }, [runPreview]);
+
+  // Use the email stream hook to get real-time email data
+  const { emails } = useEmailStream(emailAccountId, false, []);
+
+  // Calculate stats from the emails
+  const stats = useMemo(() => {
+    const total = emails.length;
+    const done = emails.filter(
+      (email) => email.archive || email.label || email.status === "completed",
+    ).length;
+    return { total, done };
+  }, [emails]);
+
+  return (
+    <LoadingContent loading={isLoading} error={error}>
+      {jobId && (
+        <>
+          <div className="mb-4">
+            <Button
+              variant="outline"
+              onClick={() =>
+                router.push(`/${emailAccountId}/clean/onboarding?step=4`)
+              }
+            >
+              ← Back
+            </Button>
+          </div>
+          <CardGreen className="mb-4">
+            <CardHeader>
+              <CardTitle>Preview run</CardTitle>
+              <CardDescription>
+                We're cleaning up {PREVIEW_RUN_COUNT} emails so you can see how
+                it works.
+              </CardDescription>
+              <CardDescription>
+                To undo any, hover over the "
+                {action === CleanAction.ARCHIVE ? "Archive" : "Mark as read"}"
+                badge and click undo.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-3">
+              <div className="flex items-center gap-3">
+                {/* Temporarily hidden as requested */}
+                {/* <Button
+                  onClick={handleProcessPreviewOnly}
+                  loading={isLoadingPreview}
+                  variant="secondary"
+                >
+                  Process Only These {PREVIEW_RUN_COUNT} Emails
+                </Button> */}
+                <Button onClick={handleRunOnFullInbox} loading={isLoadingFull}>
+                  Run on Full Inbox
+                </Button>
+              </div>
+              <CardDescription className="text-sm">
+                Click to process your entire mailbox
+              </CardDescription>
+            </CardContent>
+          </CardGreen>
+          <EmailFirehose threads={emails} stats={stats} action={action} />
+        </>
+      )}
+    </LoadingContent>
+  );
+}

apps/web/app/(app)/[emailAccountId]/clean/TimeRangeStep.tsx

@@ -6,9 +6,10 @@ import { TypographyH3 } from "@/components/Typography";
 import { timeRangeOptions } from "@/app/(app)/[emailAccountId]/clean/types";
 import { useStep } from "@/app/(app)/[emailAccountId]/clean/useStep";
 import { ButtonListSurvey } from "@/components/ButtonListSurvey";
+import { Button } from "@/components/ui/button";
 
 export function TimeRangeStep() {
-  const { onNext } = useStep();
+  const { onNext, onPrevious } = useStep();
 
   const [_, setTimeRange] = useQueryState("timeRange", parseAsInteger);
 
@@ -30,6 +31,12 @@ export function TimeRangeStep() {
         options={timeRangeOptions}
         onClick={handleTimeRangeSelect}
       />
+
+      <div className="mt-6">
+        <Button variant="outline" onClick={onPrevious}>
+          Back
+        </Button>
+      </div>
     </div>
   );
 }

apps/web/app/(app)/[emailAccountId]/clean/useStep.tsx

@@ -14,9 +14,14 @@ export function useStep() {
     setStep(step + 1);
   }, [step, setStep]);
 
+  const onPrevious = useCallback(() => {
+    setStep(step - 1);
+  }, [step, setStep]);
+
   return {
     step,
     setStep,
     onNext,
+    onPrevious,
   };
 }