ProModeSelector.tsx

import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { Sparkles, Info } from "lucide-react";
import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@/components/ui/tooltip";
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/ui/accordion";
import { useSettings } from "@/hooks/useSettings";
import { ipc } from "@/ipc/types";
import { hasDyadProKey, type UserSettings } from "@/lib/schemas";

export function ProModeSelector() {
  const { settings, updateSettings } = useSettings();

  const toggleWebSearch = () => {
    updateSettings({
      enableProWebSearch: !settings?.enableProWebSearch,
    });
  };

  const handleTurboEditsChange = (newValue: "off" | "v1" | "v2") => {
    updateSettings({
      enableProLazyEditsMode: newValue !== "off",
      proLazyEditsMode: newValue,
    });
  };

  const handleSmartContextChange = (newValue: "off" | "deep" | "balanced") => {
    if (newValue === "off") {
      updateSettings({
        enableProSmartFilesContextMode: false,
        proSmartContextOption: undefined,
      });
    } else if (newValue === "deep") {
      updateSettings({
        enableProSmartFilesContextMode: true,
        proSmartContextOption: "deep",
      });
    } else if (newValue === "balanced") {
      updateSettings({
        enableProSmartFilesContextMode: true,
        proSmartContextOption: "balanced",
      });
    }
  };

  const toggleProEnabled = () => {
    updateSettings({
      enableDyadPro: !settings?.enableDyadPro,
    });
  };

  const hasProKey = settings ? hasDyadProKey(settings) : false;
  const proModeTogglable = hasProKey && Boolean(settings?.enableDyadPro);

  return (
    <Popover>
      <Tooltip>
        <TooltipTrigger
          render={
            <PopoverTrigger className="inline-flex items-center justify-center whitespace-nowrap rounded-lg text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border-none bg-transparent shadow-none text-primary/95 hover:text-primary hover:bg-primary/10 h-7 px-2 gap-1 cursor-pointer" />
          }
        >
          <Sparkles className="h-3.5 w-3.5" />
          <span className="font-medium">Pro</span>
        </TooltipTrigger>
        <TooltipContent>Configure Dyad Pro settings</TooltipContent>
      </Tooltip>
      <PopoverContent className="w-80 border-primary/20">
        <div className="space-y-4">
          <div className="space-y-1">
            <h4 className="font-medium flex items-center gap-1.5">
              <Sparkles className="h-4 w-4 text-primary" />
              <span className="text-primary font-medium">Dyad Pro</span>
            </h4>
            <div className="h-px bg-gradient-to-r from-primary/50 via-primary/20 to-transparent" />
          </div>
          {!hasProKey && (
            <div className="text-sm text-center text-muted-foreground">
              <a
                className="inline-flex items-center justify-center gap-2 rounded-md border border-primary/30 bg-primary/10 px-3 py-2 text-sm font-medium text-primary shadow-sm transition-colors hover:bg-primary/20 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring cursor-pointer"
                onClick={() => {
                  ipc.system.openExternalUrl("https://dyad.sh/pro#ai");
                }}
                title="Visit dyad.sh/pro to unlock Pro features"
              >
                Unlock Pro modes
              </a>
            </div>
          )}
          <div className="flex flex-col gap-3">
            <SelectorRow
              id="pro-enabled"
              label="Enable Dyad Pro"
              tooltip="Uses Dyad Pro AI credits for the main AI model and Pro modes."
              isTogglable={hasProKey}
              settingEnabled={Boolean(settings?.enableDyadPro)}
              toggle={toggleProEnabled}
            />
            <Accordion>
              <AccordionItem
                value="build-mode-settings"
                className="rounded-lg border border-border/60 bg-muted/30 px-3 border-b-0"
              >
                <AccordionTrigger className="cursor-pointer py-2 text-foreground/80 hover:text-foreground hover:no-underline">
                  Build mode settings
                </AccordionTrigger>
                <AccordionContent className="pb-3">
                  <div className="flex flex-col gap-5 pt-2">
                    <SelectorRow
                      id="web-search"
                      label="Web Access"
                      tooltip="Allows Dyad to access the web (e.g. search for information)"
                      isTogglable={proModeTogglable}
                      settingEnabled={Boolean(settings?.enableProWebSearch)}
                      toggle={toggleWebSearch}
                    />

                    <TurboEditsSelector
                      isTogglable={proModeTogglable}
                      settings={settings}
                      onValueChange={handleTurboEditsChange}
                    />
                    <SmartContextSelector
                      isTogglable={proModeTogglable}
                      settings={settings}
                      onValueChange={handleSmartContextChange}
                    />
                  </div>
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}

function SelectorRow({
  id,
  label,
  tooltip,
  isTogglable,
  settingEnabled,
  toggle,
}: {
  id: string;
  label: string;
  tooltip: string;
  isTogglable: boolean;
  settingEnabled: boolean;
  toggle: () => void;
}) {
  return (
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-1.5">
        <Label
          htmlFor={id}
          className={!isTogglable ? "text-muted-foreground/50" : ""}
        >
          {label}
        </Label>
        <span title={tooltip}>
          <Info
            className={`h-4 w-4 cursor-help ${!isTogglable ? "text-muted-foreground/50" : "text-muted-foreground"}`}
          />
        </span>
      </div>
      <Switch
        id={id}
        aria-label={label}
        checked={isTogglable ? settingEnabled : false}
        onCheckedChange={toggle}
        disabled={!isTogglable}
      />
    </div>
  );
}

function TurboEditsSelector({
  isTogglable,
  settings,
  onValueChange,
}: {
  isTogglable: boolean;
  settings: UserSettings | null;
  onValueChange: (value: "off" | "v1" | "v2") => void;
}) {
  // Determine current value based on settings
  const getCurrentValue = (): "off" | "v1" | "v2" => {
    if (!settings?.enableProLazyEditsMode) {
      return "off";
    }
    if (settings?.proLazyEditsMode === "v1") {
      return "v1";
    }
    if (settings?.proLazyEditsMode === "v2") {
      return "v2";
    }
    // Keep in sync with getModelClient in get_model_client.ts
    // If enabled but no option set (undefined/falsey), it's v1
    return "v1";
  };

  const currentValue = getCurrentValue();

  return (
    <div className="space-y-2">
      <div className="flex items-center gap-1.5">
        <Label className={!isTogglable ? "text-muted-foreground/50" : ""}>
          Turbo Edits
        </Label>
        <span title="Edits files efficiently without full rewrites. Classic: Uses a smaller model to complete edits. Search & replace: Find and replaces specific text blocks.">
          <Info
            className={`h-4 w-4 cursor-help ${!isTogglable ? "text-muted-foreground/50" : "text-muted-foreground"}`}
          />
        </span>
      </div>
      <div
        className="inline-flex rounded-md border border-input"
        data-testid="turbo-edits-selector"
      >
        <Tooltip>
          <TooltipTrigger
            render={
              <Button
                variant={currentValue === "off" ? "default" : "ghost"}
                size="sm"
                onClick={() => onValueChange("off")}
                disabled={!isTogglable}
                className="rounded-r-none border-r border-input h-8 px-3 text-xs flex-shrink-0"
              />
            }
          >
            Off
          </TooltipTrigger>
          <TooltipContent>Disable Turbo Edits</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger
            render={
              <Button
                variant={currentValue === "v1" ? "default" : "ghost"}
                size="sm"
                onClick={() => onValueChange("v1")}
                disabled={!isTogglable}
                className="rounded-none border-r border-input h-8 px-3 text-xs flex-shrink-0"
              />
            }
          >
            Classic
          </TooltipTrigger>
          <TooltipContent>
            Uses a smaller model to complete edits
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger
            render={
              <Button
                variant={currentValue === "v2" ? "default" : "ghost"}
                size="sm"
                onClick={() => onValueChange("v2")}
                disabled={!isTogglable}
                className="rounded-l-none h-8 px-3 text-xs flex-shrink-0"
              />
            }
          >
            Search & replace
          </TooltipTrigger>
          <TooltipContent>
            Find and replaces specific text blocks
          </TooltipContent>
        </Tooltip>
      </div>
    </div>
  );
}

function SmartContextSelector({
  isTogglable,
  settings,
  onValueChange,
}: {
  isTogglable: boolean;
  settings: UserSettings | null;
  onValueChange: (value: "off" | "balanced" | "deep") => void;
}) {
  // Determine current value based on settings
  const getCurrentValue = (): "off" | "conservative" | "balanced" | "deep" => {
    if (!settings?.enableProSmartFilesContextMode) {
      return "off";
    }
    if (settings?.proSmartContextOption === "deep") {
      return "deep";
    }
    if (settings?.proSmartContextOption === "balanced") {
      return "balanced";
    }
    // Keep logic in sync with isDeepContextEnabled in chat_stream_handlers.ts
    return "deep";
  };

  const currentValue = getCurrentValue();

  return (
    <div className="space-y-2">
      <div className="flex items-center gap-1.5">
        <Label className={!isTogglable ? "text-muted-foreground/50" : ""}>
          Smart Context
        </Label>
        <span title="Selects the most relevant files as context to save credits working on large codebases.">
          <Info
            className={`h-4 w-4 cursor-help ${!isTogglable ? "text-muted-foreground/50" : "text-muted-foreground"}`}
          />
        </span>
      </div>
      <div
        className="inline-flex rounded-md border border-input"
        data-testid="smart-context-selector"
      >
        <Tooltip>
          <TooltipTrigger
            render={
              <Button
                variant={currentValue === "off" ? "default" : "ghost"}
                size="sm"
                onClick={() => onValueChange("off")}
                disabled={!isTogglable}
                className="rounded-r-none border-r border-input h-8 px-3 text-xs flex-shrink-0"
              />
            }
          >
            Off
          </TooltipTrigger>
          <TooltipContent>Disable Smart Context</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger
            render={
              <Button
                variant={currentValue === "balanced" ? "default" : "ghost"}
                size="sm"
                onClick={() => onValueChange("balanced")}
                disabled={!isTogglable}
                className="rounded-none border-r border-input h-8 px-3 text-xs flex-shrink-0"
              />
            }
          >
            Balanced
          </TooltipTrigger>
          <TooltipContent>
            Selects most relevant files with balanced context size
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger
            render={
              <Button
                variant={currentValue === "deep" ? "default" : "ghost"}
                size="sm"
                onClick={() => onValueChange("deep")}
                disabled={!isTogglable}
                className="rounded-l-none h-8 px-3 text-xs flex-shrink-0"
              />
            }
          >
            Deep
          </TooltipTrigger>
          <TooltipContent>
            Experimental: Keeps full conversation history for maximum context
            and cache-optimized to control costs
          </TooltipContent>
        </Tooltip>
      </div>
    </div>
  );
}