Follow up reminders

.claude/commands/write-tests.md

@@ -49,6 +49,14 @@ import { getEmail, getEmailAccount, getRule } from "@/__tests__/helpers";
 
 ## Workflow
 
+### Step 0: Determine Scope
+
+Auto-detect: staged → branch diff → specified files
+
+```bash
+git diff --cached --name-only  # or main...HEAD
+```
+
 ### Step 1: Identify Test Targets
 
 Look for functions with:

.cursor/rules/posthog-feature-flags.mdc

@@ -25,9 +25,9 @@ We use PostHog for two main purposes:
 All feature flag hooks should be defined in `apps/web/hooks/useFeatureFlags.ts`:
 
 ```typescript
-// For early access features (boolean flags)
-export function useFeatureName() {
-  return useFeatureFlagEnabled("feature-flag-key");
+// For early access features (boolean flags with env override)
+export function useFeatureNameEnabled() {
+  return useFeatureFlagEnabled("feature-flag-key") || env.NEXT_PUBLIC_FEATURE_NAME_ENABLED;
 }
 
 // For A/B test variants
@@ -39,6 +39,11 @@ export function useFeatureVariant() {
 }
 ```
 
+Early access features should support both PostHog flags AND environment variables using an OR (`||`). This allows:
+- Production users to opt-in via PostHog Early Access
+- Developers to enable features locally via `.env`
+- Self-hosted users to enable features without PostHog
+
 ### 2. Early Access Features
 
 Early access features are automatically displayed on the Early Access page (`/early-access`) through the `EarlyAccessFeatures` component. No manual configuration needed.
@@ -47,7 +52,7 @@ Early access features are automatically displayed on the Early Access page (`/ea
 ```typescript
 // In useFeatureFlags.ts
 export function useCleanerEnabled() {
-  return useFeatureFlagEnabled("inbox-cleaner");
+  return useFeatureFlagEnabled("inbox-cleaner") || env.NEXT_PUBLIC_CLEANER_ENABLED;
 }
 
 // Usage in components
@@ -62,6 +67,11 @@ function MyComponent() {
 }
 ```
 
+When adding a new early access feature:
+1. Add the hook with PostHog flag + env override
+2. Add the env variable to `apps/web/env.ts` (schema + runtimeEnv)
+3. Gate the UI component with the hook
+
 ### 3. A/B Test Variants
 
 For A/B tests, define the variant types and provide a default fallback:

apps/web/__tests__/e2e/flows/full-reply-cycle.test.ts

@@ -31,7 +31,6 @@ import {
 } from "./helpers/polling";
 import { logStep, clearLogs, setTestStartTime } from "./helpers/logging";
 import type { TestAccount } from "./helpers/accounts";
-import prisma from "@/utils/prisma";
 
 describe.skipIf(!shouldRunFlowTests())("Full Reply Cycle", () => {
   let gmail: TestAccount;
@@ -157,26 +156,12 @@ describe.skipIf(!shouldRunFlowTests())("Full Reply Cycle", () => {
       );
 
       if (labelAction?.labelId) {
-        // Look up the label name from the database
-        const label = await prisma.label.findUnique({
-          where: { id: labelAction.labelId },
-          select: { name: true },
-        });
-
         const message = await outlook.emailProvider.getMessage(
           outlookMessage.messageId,
         );
         expect(message.labelIds).toBeDefined();
-
-        // Check if the label name is in the message's labels
-        // Outlook returns label names (categories), not IDs
-        if (label?.name) {
-          expect(message.labelIds).toContain(label.name);
-          logStep("Label verified on message", {
-            labelName: label.name,
-            messageLabels: message.labelIds,
-          });
-        }
+        expect(message.labelIds).toContain(labelAction.labelId);
+        logStep("Labels on message", { labels: message.labelIds });
       }
 
       // ========================================
@@ -302,10 +287,10 @@ describe.skipIf(!shouldRunFlowTests())("Full Reply Cycle", () => {
         body: "This is the reply from Outlook.",
       });
 
-      // Wait for Gmail to receive - use fullSubject for unique match
+      // Wait for Gmail to receive
       const gmailReply = await waitForMessageInInbox({
         provider: gmail.emailProvider,
-        subjectContains: initialEmail.fullSubject,
+        subjectContains: "Thread continuity test",
         timeout: TIMEOUTS.EMAIL_DELIVERY,
       });
 
@@ -325,10 +310,10 @@ describe.skipIf(!shouldRunFlowTests())("Full Reply Cycle", () => {
         body: "This is the second reply from Gmail.",
       });
 
-      // Wait for Outlook to receive - use fullSubject for unique match
+      // Wait for Outlook to receive
       const outlookMsg2 = await waitForMessageInInbox({
         provider: outlook.emailProvider,
-        subjectContains: initialEmail.fullSubject,
+        subjectContains: "Thread continuity test",
         timeout: TIMEOUTS.EMAIL_DELIVERY,
       });
 

apps/web/app/(app)/[emailAccountId]/assistant/settings/FollowUpRemindersSetting.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useForm } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { SettingCard } from "@/components/SettingCard";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/Input";
+import { Toggle } from "@/components/Toggle";
+import { Badge } from "@/components/Badge";
+import { useEmailAccountFull } from "@/hooks/useEmailAccountFull";
+import { useFollowUpRemindersEnabled } from "@/hooks/useFeatureFlags";
+import { useAccount } from "@/providers/EmailAccountProvider";
+import { useAction } from "next-safe-action/hooks";
+import {
+  toggleFollowUpRemindersAction,
+  updateFollowUpSettingsAction,
+  scanFollowUpRemindersAction,
+} from "@/utils/actions/follow-up-reminders";
+import {
+  type SaveFollowUpSettingsFormInput,
+  DEFAULT_FOLLOW_UP_DAYS,
+} from "@/utils/actions/follow-up-reminders.validation";
+import { toastError, toastSuccess } from "@/components/Toast";
+import { getEmailTerminology } from "@/utils/terminology";
+
+export function FollowUpRemindersSetting() {
+  const isFeatureEnabled = useFollowUpRemindersEnabled();
+
+  if (!isFeatureEnabled) return null;
+
+  return <FollowUpRemindersSettingContent />;
+}
+
+function FollowUpRemindersSettingContent() {
+  const [open, setOpen] = useState(false);
+  const { data, mutate } = useEmailAccountFull();
+
+  const enabled =
+    data?.followUpAwaitingReplyDays !== null ||
+    data?.followUpNeedsReplyDays !== null;
+
+  const { execute: executeToggle } = useAction(
+    toggleFollowUpRemindersAction.bind(null, data?.id ?? ""),
+    {
+      onError: (error) => {
+        mutate();
+        toastError({
+          description: error.error?.serverError ?? "Failed to update settings",
+        });
+      },
+    },
+  );
+
+  const handleToggle = useCallback(
+    (enable: boolean) => {
+      if (!data) return;
+
+      const optimisticData = {
+        ...data,
+        followUpAwaitingReplyDays: enable ? DEFAULT_FOLLOW_UP_DAYS : null,
+        followUpNeedsReplyDays: enable ? DEFAULT_FOLLOW_UP_DAYS : null,
+      };
+      mutate(optimisticData, false);
+      executeToggle({ enabled: enable });
+    },
+    [data, mutate, executeToggle],
+  );
+
+  return (
+    <SettingCard
+      title="Follow-up Reminders"
+      description="Get reminded when you haven't heard back or haven't replied."
+      right={
+        <div className="flex items-center gap-2">
+          {enabled && (
+            <Dialog open={open} onOpenChange={setOpen}>
+              <DialogTrigger asChild>
+                <Button variant="outline" size="sm">
+                  Configure
+                </Button>
+              </DialogTrigger>
+              <FollowUpSettingsDialog
+                emailAccountId={data?.id ?? ""}
+                followUpAwaitingReplyDays={data?.followUpAwaitingReplyDays}
+                followUpNeedsReplyDays={data?.followUpNeedsReplyDays}
+                followUpAutoDraftEnabled={
+                  data?.followUpAutoDraftEnabled ?? true
+                }
+                onSuccess={() => {
+                  mutate();
+                  setOpen(false);
+                }}
+              />
+            </Dialog>
+          )}
+          <Toggle
+            name="follow-up-enabled"
+            enabled={enabled}
+            onChange={handleToggle}
+            disabled={!data}
+          />
+        </div>
+      }
+    />
+  );
+}
+
+function FollowUpSettingsDialog({
+  emailAccountId,
+  followUpAwaitingReplyDays,
+  followUpNeedsReplyDays,
+  followUpAutoDraftEnabled,
+  onSuccess,
+}: {
+  emailAccountId: string;
+  followUpAwaitingReplyDays: number | null | undefined;
+  followUpNeedsReplyDays: number | null | undefined;
+  followUpAutoDraftEnabled: boolean;
+  onSuccess: () => void;
+}) {
+  const { provider } = useAccount();
+  const terminology = getEmailTerminology(provider);
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<SaveFollowUpSettingsFormInput>({
+    defaultValues: {
+      followUpAwaitingReplyDays: followUpAwaitingReplyDays?.toString() ?? "",
+      followUpNeedsReplyDays: followUpNeedsReplyDays?.toString() ?? "",
+      followUpAutoDraftEnabled,
+    },
+  });
+
+  const autoDraftValue = watch("followUpAutoDraftEnabled");
+
+  const { execute, isExecuting } = useAction(
+    updateFollowUpSettingsAction.bind(null, emailAccountId),
+    {
+      onSuccess: () => {
+        toastSuccess({ description: "Settings saved!" });
+        onSuccess();
+      },
+      onError: (error) => {
+        toastError({
+          description: error.error?.serverError ?? "Failed to save settings",
+        });
+      },
+    },
+  );
+
+  const { execute: executeScan, isExecuting: isScanning } = useAction(
+    scanFollowUpRemindersAction.bind(null, emailAccountId),
+    {
+      onSuccess: () => {
+        toastSuccess({ description: "Scan complete!" });
+      },
+      onError: (error) => {
+        toastError({
+          description: error.error?.serverError ?? "Failed to scan",
+        });
+      },
+    },
+  );
+
+  const onSubmit = (formData: SaveFollowUpSettingsFormInput) => {
+    execute({
+      followUpAwaitingReplyDays: formData.followUpAwaitingReplyDays
+        ? Number(formData.followUpAwaitingReplyDays)
+        : null,
+      followUpNeedsReplyDays: formData.followUpNeedsReplyDays
+        ? Number(formData.followUpNeedsReplyDays)
+        : null,
+      followUpAutoDraftEnabled: formData.followUpAutoDraftEnabled,
+    });
+  };
+
+  return (
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Follow-up Reminders</DialogTitle>
+        <DialogDescription>
+          Get reminded about conversations that need attention.
+          <br />
+          We'll add a <Badge color="blue">Follow-up</Badge>{" "}
+          {terminology.label.singular} so you can easily find them.
+        </DialogDescription>
+      </DialogHeader>
+
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        <Input
+          type="number"
+          name="followUpAwaitingReplyDays"
+          label="Remind me when they haven't replied after"
+          explainText="Leave blank to disable"
+          registerProps={register("followUpAwaitingReplyDays")}
+          error={errors.followUpAwaitingReplyDays}
+          min={0.001}
+          max={90}
+          step={0.001}
+          rightText="days"
+        />
+
+        <Input
+          type="number"
+          name="followUpNeedsReplyDays"
+          label="Remind me when I haven't replied after"
+          explainText="Leave blank to disable"
+          registerProps={register("followUpNeedsReplyDays")}
+          error={errors.followUpNeedsReplyDays}
+          min={0.001}
+          max={90}
+          step={0.001}
+          rightText="days"
+        />
+
+        <div className="flex items-center justify-between">
+          <div>
+            <label
+              htmlFor="followUpAutoDraftEnabled"
+              className="block text-sm font-medium text-foreground"
+            >
+              Auto-generate drafts
+            </label>
+            <p className="text-muted-foreground text-sm">
+              Draft a nudge when you haven't heard back.
+            </p>
+          </div>
+          <Toggle
+            name="followUpAutoDraftEnabled"
+            enabled={autoDraftValue}
+            onChange={(value) => setValue("followUpAutoDraftEnabled", value)}
+          />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button type="submit" size="sm" loading={isExecuting}>
+            Save
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            loading={isScanning}
+            onClick={() => executeScan({})}
+          >
+            Scan now
+          </Button>
+        </div>
+      </form>
+    </DialogContent>
+  );
+}