ai-terminal-assistant/packages/ui/src/components/PermissionDialog.tsx

/**
 * PermissionDialog Component
 *
 * Shows permission confirmation dialogs for bash commands, file operations, etc.
 * Integrates with WebSocket for real-time permission requests from the server.
 */

import { useState } from 'react';
import {
  Shield,
  Terminal,
  FileEdit,
  GitBranch,
  Globe,
  X,
  Check,
  AlertTriangle,
} from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '../utils/cn';
import { modalOverlay, modalContent, smoothTransition } from '../utils/animations';
import { Button } from '../primitives/Button';

// Permission types
export type PermissionType = 'bash' | 'file' | 'git' | 'web';

// Permission request context
export interface PermissionRequestContext {
  command?: string;
  operation?: string;
  path?: string;
  gitOperation?: string;
  query?: string;
  patterns?: string[];
  externalPaths?: string[];
}

// Diff line for file operations
interface DiffLine {
  type: 'add' | 'remove' | 'context';
  lineNumber: number | null;
  content: string;
}

// Diff hunk
interface DiffHunk {
  oldStart: number;
  oldCount: number;
  newStart: number;
  newCount: number;
  lines: DiffLine[];
}

// Diff info for file operations
export interface DiffInfo {
  isNew: boolean;
  additions: number;
  deletions: number;
  hunks: DiffHunk[];
}

// Permission request payload
export interface PermissionRequest {
  requestId: string;
  permissionType: PermissionType;
  context: PermissionRequestContext;
  diff?: DiffInfo;
}

interface PermissionDialogProps {
  request: PermissionRequest;
  onAllow: (requestId: string, remember: boolean) => void;
  onDeny: (requestId: string, remember: boolean) => void;
  responsive?: boolean;
}

// Icon component based on permission type
function getPermissionIcon(type: PermissionType) {
  switch (type) {
    case 'bash':
      return <Terminal size={24} className="text-yellow-400" />;
    case 'file':
      return <FileEdit size={24} className="text-blue-400" />;
    case 'git':
      return <GitBranch size={24} className="text-purple-400" />;
    case 'web':
      return <Globe size={24} className="text-green-400" />;
    default:
      return <Shield size={24} className="text-fg-muted" />;
  }
}

// Title based on permission type
function getPermissionTitle(type: PermissionType) {
  switch (type) {
    case 'bash':
      return 'Execute Command';
    case 'file':
      return 'File Operation';
    case 'git':
      return 'Git Operation';
    case 'web':
      return 'Web Access';
    default:
      return 'Permission Required';
  }
}

// Render diff content
function DiffViewer({ diff }: { diff: DiffInfo }) {
  if (!diff.hunks || diff.hunks.length === 0) {
    return null;
  }

  return (
    <div className="mt-4 rounded-lg border border-line overflow-hidden">
      <div className="flex items-center justify-between px-3 py-2 bg-surface-base/50 border-b border-line">
        <span className="text-xs text-fg-muted">
          {diff.isNew ? 'New file' : 'Changes'}
        </span>
        <div className="flex items-center gap-3 text-xs">
          <span className="text-green-400">+{diff.additions}</span>
          <span className="text-red-400">-{diff.deletions}</span>
        </div>
      </div>
      <div className="max-h-64 overflow-auto">
        <pre className="text-xs font-mono">
          {diff.hunks.map((hunk, hunkIndex) => (
            <div key={hunkIndex}>
              <div className="px-3 py-1 bg-blue-500/10 text-blue-400 border-y border-line/50">
                @@ -{hunk.oldStart},{hunk.oldCount} +{hunk.newStart},{hunk.newCount} @@
              </div>
              {hunk.lines.map((line, lineIndex) => {
                let className = 'px-3 py-0.5 ';
                let prefix = ' ';

                if (line.type === 'add') {
                  className += 'bg-green-500/10 text-green-400';
                  prefix = '+';
                } else if (line.type === 'remove') {
                  className += 'bg-red-500/10 text-red-400';
                  prefix = '-';
                } else {
                  className += 'text-fg-muted';
                }

                return (
                  <div key={lineIndex} className={className}>
                    <span className="select-none opacity-50 mr-2">{prefix}</span>
                    {line.content}
                  </div>
                );
              })}
            </div>
          ))}
        </pre>
      </div>
    </div>
  );
}

export function PermissionDialog({
  request,
  onAllow,
  onDeny,
  responsive = false,
}: PermissionDialogProps) {
  const [remember, setRemember] = useState(false);
  const { requestId, permissionType, context, diff } = request;

  const handleAllow = () => {
    onAllow(requestId, remember);
  };

  const handleDeny = () => {
    onDeny(requestId, remember);
  };

  // Format context for display
  const renderContext = () => {
    switch (permissionType) {
      case 'bash':
        return (
          <div className="space-y-2">
            <div className="text-sm text-fg-muted">Command:</div>
            <code className="block px-3 py-2 bg-surface-base rounded-lg font-mono text-sm text-yellow-300 break-all">
              {context.command}
            </code>
            {context.externalPaths && context.externalPaths.length > 0 && (
              <div className="flex items-start gap-2 mt-3 p-2 bg-yellow-500/10 rounded-lg">
                <AlertTriangle size={16} className="text-yellow-400 mt-0.5 flex-shrink-0" />
                <div className="text-xs text-yellow-300">
                  <div className="font-medium">External paths detected:</div>
                  <div className="mt-1 text-yellow-400/80">
                    {context.externalPaths.map((p, i) => (
                      <div key={i} className="font-mono">{p}</div>
                    ))}
                  </div>
                </div>
              </div>
            )}
          </div>
        );

      case 'file':
        return (
          <div className="space-y-2">
            <div className="flex items-center gap-2 text-sm">
              <span className="text-fg-muted">Operation:</span>
              <span className={cn(
                'px-2 py-0.5 rounded text-xs font-medium',
                context.operation === 'delete' ? 'bg-red-500/20 text-red-400' :
                context.operation === 'write' ? 'bg-yellow-500/20 text-yellow-400' :
                'bg-blue-500/20 text-blue-400'
              )}>
                {context.operation?.toUpperCase()}
              </span>
            </div>
            <div className="text-sm text-fg-muted">Path:</div>
            <code className="block px-3 py-2 bg-surface-base rounded-lg font-mono text-sm text-blue-300 break-all">
              {context.path}
            </code>
            {diff && <DiffViewer diff={diff} />}
          </div>
        );

      case 'git':
        return (
          <div className="space-y-2">
            <div className="flex items-center gap-2 text-sm">
              <span className="text-fg-muted">Git operation:</span>
              <span className="px-2 py-0.5 rounded text-xs font-medium bg-purple-500/20 text-purple-400">
                {context.gitOperation?.toUpperCase()}
              </span>
            </div>
            {context.command && (
              <>
                <div className="text-sm text-fg-muted">Command:</div>
                <code className="block px-3 py-2 bg-surface-base rounded-lg font-mono text-sm text-purple-300 break-all">
                  {context.command}
                </code>
              </>
            )}
          </div>
        );

      case 'web':
        return (
          <div className="space-y-2">
            <div className="text-sm text-fg-muted">Request:</div>
            <code className="block px-3 py-2 bg-surface-base rounded-lg font-mono text-sm text-green-300 break-all">
              {context.query || context.command}
            </code>
          </div>
        );

      default:
        return (
          <div className="text-sm text-fg-muted">
            <pre className="bg-surface-base p-3 rounded-lg overflow-auto">
              {JSON.stringify(context, null, 2)}
            </pre>
          </div>
        );
    }
  };

  return (
    <AnimatePresence>
      <motion.div
        variants={modalOverlay}
        initial="initial"
        animate="animate"
        exit="exit"
        transition={{ duration: 0.2 }}
        className={cn(
          'fixed inset-0 bg-black/50 flex z-50',
          responsive ? 'items-end md:items-center justify-center' : 'items-center justify-center'
        )}
      >
        <motion.div
          variants={modalContent}
          initial="initial"
          animate="animate"
          exit="exit"
          transition={smoothTransition}
          className={cn(
            'bg-surface-subtle overflow-hidden flex flex-col',
            responsive
              ? 'w-full md:w-full md:max-w-lg md:mx-4 rounded-t-2xl md:rounded-lg'
              : 'rounded-lg w-full max-w-lg mx-4'
          )}
        >
          {/* Header */}
          <div className="flex items-center justify-between px-5 py-4 border-b border-line">
            {responsive && (
              <div className="absolute top-2 left-1/2 -translate-x-1/2 w-10 h-1 bg-surface-emphasis rounded-full md:hidden" />
            )}
            <div className={cn('flex items-center gap-3', responsive && 'mt-2 md:mt-0')}>
              <div className="p-2 rounded-lg bg-surface-base">
                {getPermissionIcon(permissionType)}
              </div>
              <div>
                <h2 className="text-lg font-semibold">{getPermissionTitle(permissionType)}</h2>
                <p className="text-xs text-fg-subtle">AI is requesting permission</p>
              </div>
            </div>
            <Button
              variant="ghost"
              size="icon"
              onClick={handleDeny}
              className={cn(responsive && 'min-w-[44px] min-h-[44px]')}
            >
              <X size={20} />
            </Button>
          </div>

          {/* Content */}
          <div className="px-5 py-4 overflow-y-auto max-h-[60vh]">
            {renderContext()}
          </div>

          {/* Footer */}
          <div className={cn(
            'flex flex-col gap-3 border-t border-line',
            responsive ? 'px-4 py-4 safe-area-pb' : 'px-5 py-4'
          )}>
            {/* Remember checkbox */}
            <label className="flex items-center gap-2 text-sm text-fg-muted cursor-pointer">
              <input
                type="checkbox"
                checked={remember}
                onChange={(e) => setRemember(e.target.checked)}
                className="w-4 h-4 rounded border-line-muted bg-surface-base text-primary-500 focus:ring-primary-500"
              />
              Remember for this session
            </label>

            {/* Action buttons */}
            <div className="flex items-center gap-3">
              <Button
                variant="outline"
                className="flex-1 text-red-400 border-red-400/50 hover:border-red-400 hover:bg-red-400/10"
                onClick={handleDeny}
              >
                <X size={16} className="mr-2" />
                Deny
              </Button>
              <Button
                variant="default"
                className="flex-1"
                onClick={handleAllow}
              >
                <Check size={16} className="mr-2" />
                Allow
              </Button>
            </div>
          </div>
        </motion.div>
      </motion.div>
    </AnimatePresence>
  );
}