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, Copy, Check } from 'lucide-react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';

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

const DOCKER_COMMAND = 'npm run dev:docker';

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

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(DOCKER_COMMAND);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  };

  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>

              <div className="space-y-2">
                <p className="text-sm text-muted-foreground">
                  For safer operation, consider running Automaker in Docker:
                </p>
                <div className="flex items-center gap-2 bg-muted/50 border border-border rounded-lg p-2">
                  <code className="flex-1 text-sm font-mono px-2">{DOCKER_COMMAND}</code>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={handleCopy}
                    className="h-8 px-2 hover:bg-muted"
                  >
                    {copied ? (
                      <Check className="w-4 h-4 text-green-500" />
                    ) : (
                      <Copy className="w-4 h-4" />
                    )}
                  </Button>
                </div>
              </div>
            </div>
          </DialogDescription>
        </DialogHeader>

        <DialogFooter className="gap-2 sm:gap-2 pt-4">
          <Button variant="outline" onClick={onDeny} className="px-4" data-testid="sandbox-deny">
            Deny &amp; Exit
          </Button>
          <Button
            variant="destructive"
            onClick={onConfirm}
            className="px-4"
            data-testid="sandbox-confirm"
          >
            <ShieldAlert className="w-4 h-4 mr-2" />I Accept the Risks
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}