automaker/apps/ui/src/components/dialogs/sandbox-risk-dialog.tsx

/**
 * Sandbox Risk Confirmation Dialog
 *
 * Shows when the app is running outside a containerized environment.
 * Users must acknowledge the risks before proceeding.
 */

import { useState } from 'react';
import { ShieldAlert } from 'lucide-react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';

interface SandboxRiskDialogProps {
  open: boolean;
  onConfirm: (skipInFuture: boolean) => void;
  onDeny: () => void;
}

export function SandboxRiskDialog({ open, onConfirm, onDeny }: SandboxRiskDialogProps) {
  const [skipInFuture, setSkipInFuture] = useState(false);

  const handleConfirm = () => {
    onConfirm(skipInFuture);
    // Reset checkbox state after confirmation
    setSkipInFuture(false);
  };

  return (
    <Dialog open={open} onOpenChange={() => {}}>
      <DialogContent
        className="bg-popover border-border max-w-lg"
        onPointerDownOutside={(e) => e.preventDefault()}
        onEscapeKeyDown={(e) => e.preventDefault()}
        showCloseButton={false}
      >
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-destructive">
            <ShieldAlert className="w-6 h-6" />
            Sandbox Environment Not Detected
          </DialogTitle>
          <DialogDescription asChild>
            <div className="space-y-4 pt-2">
              <p className="text-muted-foreground">
                <strong>Warning:</strong> This application is running outside of a containerized
                sandbox environment. AI agents will have direct access to your filesystem and can
                execute commands on your system.
              </p>

              <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-4 space-y-2">
                <p className="text-sm font-medium text-destructive">Potential Risks:</p>
                <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
                  <li>Agents can read, modify, or delete files on your system</li>
                  <li>Agents can execute arbitrary commands and install software</li>
                  <li>Agents can access environment variables and credentials</li>
                  <li>Unintended side effects from agent actions may affect your system</li>
                </ul>
              </div>

              <p className="text-sm text-muted-foreground">
                For safer operation, consider running Automaker in Docker. See the README for
                instructions.
              </p>

              <div className="bg-muted/50 border border-border rounded-lg p-4 space-y-2">
                <p className="text-sm font-medium text-foreground">
                  Already running in Docker? Try these troubleshooting steps:
                </p>
                <ul className="text-sm text-muted-foreground list-disc list-inside space-y-1">
                  <li>
                    Ensure <code className="bg-muted px-1 rounded">IS_CONTAINERIZED=true</code> is
                    set in your docker-compose environment
                  </li>
                  <li>
                    Verify the server container has the environment variable:{' '}
                    <code className="bg-muted px-1 rounded">
                      docker exec automaker-server printenv IS_CONTAINERIZED
                    </code>
                  </li>
                  <li>Rebuild and restart containers if you recently changed the configuration</li>
                  <li>
                    Check the server logs for startup messages:{' '}
                    <code className="bg-muted px-1 rounded">docker-compose logs server</code>
                  </li>
                </ul>
              </div>
            </div>
          </DialogDescription>
        </DialogHeader>

        <DialogFooter className="flex-col gap-4 sm:flex-col pt-4">
          <div className="flex items-center space-x-2 self-start">
            <Checkbox
              id="skip-sandbox-warning"
              checked={skipInFuture}
              onCheckedChange={(checked) => setSkipInFuture(checked === true)}
              data-testid="sandbox-skip-checkbox"
            />
            <Label
              htmlFor="skip-sandbox-warning"
              className="text-sm text-muted-foreground cursor-pointer"
            >
              Do not show this warning again
            </Label>
          </div>
          <div className="flex gap-2 sm:gap-2 w-full sm:justify-end">
            <Button variant="outline" onClick={onDeny} className="px-4" data-testid="sandbox-deny">
              Deny &amp; Exit
            </Button>
            <Button
              variant="destructive"
              onClick={handleConfirm}
              className="px-4"
              data-testid="sandbox-confirm"
            >
              <ShieldAlert className="w-4 h-4 mr-2" />I Accept the Risks
            </Button>
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}