feat(ui): 将权限请求改为内联显示在聊天流中

- 添加 PermissionMessagePart 类型
- 创建 PermissionRequestInline 内联组件
- 修改 useChat 将权限请求作为 Part 处理
- 移除模态对话框，不再阻断 IDE 操作

packages/ui/src/components/ChatMessage.tsx

@@ -23,8 +23,9 @@ import { fadeInUp, smoothTransition } from '../utils/animations';
 import { getAgentDisplayName } from '../utils/agent';
 import { Markdown } from './Markdown';
 import { FileMentionText } from './FileMentionTag';
-import type { Message, ToolStatus, ToolMessagePart, QuestionMessagePart, FileDiffInfo } from '../api/types.js';
+import type { Message, ToolStatus, ToolMessagePart, QuestionMessagePart, PermissionMessagePart, FileDiffInfo } from '../api/types.js';
 import { AskUserQuestion } from './AskUserQuestion.js';
+import { PermissionRequestInline } from './PermissionRequestInline.js';
 
 interface ChatMessageProps {
   message: Message;
@@ -34,10 +35,14 @@ interface ChatMessageProps {
   onAnswerQuestion?: (questionPartId: string, answers: string[]) => void;
   /** 查看文件 Diff 的回调 */
   onViewDiff?: (diff: FileDiffInfo) => void;
+  /** 允许权限请求的回调 */
+  onAllowPermission?: (requestId: string, remember: boolean) => void;
+  /** 拒绝权限请求的回调 */
+  onDenyPermission?: (requestId: string, remember: boolean) => void;
 }
 
 export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
-  ({ message, isStreaming = false, onAnswerQuestion, onViewDiff }, ref) => {
+  ({ message, isStreaming = false, onAnswerQuestion, onViewDiff, onAllowPermission, onDenyPermission }, ref) => {
     const isUser = message.role === 'user';
     const [copied, setCopied] = useState(false);
 
@@ -109,6 +114,19 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
                       {part.text}
                     </div>
                   );
+                case 'permission': {
+                  // 权限请求组件：内联显示，不阻断用户操作
+                  const permissionPart = part as PermissionMessagePart;
+                  return (
+                    <PermissionRequestInline
+                      key={part.id}
+                      part={permissionPart}
+                      onAllow={onAllowPermission || (() => {})}
+                      onDeny={onDenyPermission || (() => {})}
+                      disabled={permissionPart.handled}
+                    />
+                  );
+                }
                 default:
                   return null;
               }

packages/ui/src/components/PermissionRequestInline.tsx

@@ -0,0 +1,348 @@
+/**
+ * PermissionRequestInline Component
+ *
+ * 内联权限请求组件，渲染在聊天消息中，不阻断用户操作 IDE
+ */
+
+import { useState } from 'react';
+import {
+  Shield,
+  Terminal,
+  FileEdit,
+  GitBranch,
+  Globe,
+  X,
+  Check,
+  AlertTriangle,
+  ChevronDown,
+  ChevronRight,
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '../utils/cn';
+import type {
+  PermissionMessagePart,
+  PermissionType,
+  PermissionDiffInfo,
+} from '../api/types.js';
+
+interface PermissionRequestInlineProps {
+  part: PermissionMessagePart;
+  onAllow: (requestId: string, remember: boolean) => void;
+  onDeny: (requestId: string, remember: boolean) => void;
+  disabled?: boolean;
+}
+
+// 获取权限类型图标
+function getPermissionIcon(type: PermissionType) {
+  switch (type) {
+    case 'bash':
+      return <Terminal size={16} className="text-yellow-400" />;
+    case 'file':
+      return <FileEdit size={16} className="text-blue-400" />;
+    case 'git':
+      return <GitBranch size={16} className="text-purple-400" />;
+    case 'web':
+      return <Globe size={16} className="text-green-400" />;
+    default:
+      return <Shield size={16} className="text-fg-muted" />;
+  }
+}
+
+// 获取权限类型标题
+function getPermissionTitle(type: PermissionType) {
+  switch (type) {
+    case 'bash':
+      return '执行命令';
+    case 'file':
+      return '文件操作';
+    case 'git':
+      return 'Git 操作';
+    case 'web':
+      return '网络访问';
+    default:
+      return '权限请求';
+  }
+}
+
+// 获取权限类型的边框和背景颜色
+function getPermissionColors(type: PermissionType) {
+  switch (type) {
+    case 'bash':
+      return 'border-yellow-500/30 bg-yellow-500/5';
+    case 'file':
+      return 'border-blue-500/30 bg-blue-500/5';
+    case 'git':
+      return 'border-purple-500/30 bg-purple-500/5';
+    case 'web':
+      return 'border-green-500/30 bg-green-500/5';
+    default:
+      return 'border-line bg-surface-subtle';
+  }
+}
+
+// Diff 查看器
+function DiffViewer({ diff }: { diff: PermissionDiffInfo }) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (!diff.hunks || diff.hunks.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mt-3 rounded-lg border border-line overflow-hidden">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center justify-between px-3 py-2 bg-surface-base/50 hover:bg-surface-muted/50 transition-colors"
+      >
+        <span className="text-xs text-fg-muted">
+          {diff.isNew ? '新文件' : '变更预览'}
+        </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>
+          {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+        </div>
+      </button>
+      <AnimatePresence>
+        {expanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <div className="max-h-48 overflow-auto border-t border-line">
+              <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-b 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>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+export function PermissionRequestInline({
+  part,
+  onAllow,
+  onDeny,
+  disabled = false,
+}: PermissionRequestInlineProps) {
+  const [remember, setRemember] = useState(false);
+  const { requestId, permissionType, context, diff, handled, result } = part;
+
+  const handleAllow = () => {
+    if (disabled || handled) return;
+    onAllow(requestId, remember);
+  };
+
+  const handleDeny = () => {
+    if (disabled || handled) return;
+    onDeny(requestId, remember);
+  };
+
+  // 已处理状态
+  if (handled) {
+    return (
+      <div
+        className={cn(
+          'rounded-lg border p-4',
+          result === 'allowed'
+            ? 'border-green-500/30 bg-green-500/5'
+            : 'border-red-500/30 bg-red-500/5'
+        )}
+      >
+        <div className="flex items-center gap-2">
+          {result === 'allowed' ? (
+            <>
+              <Check size={16} className="text-green-500" />
+              <span className="text-sm text-green-500">已允许</span>
+            </>
+          ) : (
+            <>
+              <X size={16} className="text-red-500" />
+              <span className="text-sm text-red-500">已拒绝</span>
+            </>
+          )}
+          <span className="text-xs text-fg-muted ml-2">
+            {getPermissionTitle(permissionType)}
+          </span>
+        </div>
+        {/* 显示简要信息 */}
+        <div className="mt-2 text-xs text-fg-muted font-mono truncate">
+          {context.command || context.path || context.query}
+        </div>
+      </div>
+    );
+  }
+
+  // 渲染上下文信息
+  const renderContext = () => {
+    switch (permissionType) {
+      case 'bash':
+        return (
+          <div className="space-y-2">
+            <code className="block px-3 py-2 bg-surface-base rounded-lg font-mono text-xs text-yellow-300 break-all max-h-24 overflow-auto">
+              {context.command}
+            </code>
+            {context.externalPaths && context.externalPaths.length > 0 && (
+              <div className="flex items-start gap-2 p-2 bg-yellow-500/10 rounded-lg">
+                <AlertTriangle size={14} className="text-yellow-400 mt-0.5 flex-shrink-0" />
+                <div className="text-xs text-yellow-300">
+                  <div className="font-medium">检测到外部路径:</div>
+                  <div className="mt-1 text-yellow-400/80 font-mono">
+                    {context.externalPaths.map((p, i) => (
+                      <div key={i}>{p}</div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        );
+
+      case 'file':
+        return (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 text-xs">
+              <span className="text-fg-muted">操作:</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>
+            <code className="block px-3 py-2 bg-surface-base rounded-lg font-mono text-xs 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-xs">
+              <span className="text-fg-muted">Git 操作:</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 && (
+              <code className="block px-3 py-2 bg-surface-base rounded-lg font-mono text-xs text-purple-300 break-all">
+                {context.command}
+              </code>
+            )}
+          </div>
+        );
+
+      case 'web':
+        return (
+          <code className="block px-3 py-2 bg-surface-base rounded-lg font-mono text-xs text-green-300 break-all">
+            {context.query || context.command}
+          </code>
+        );
+
+      default:
+        return (
+          <pre className="bg-surface-base p-3 rounded-lg overflow-auto text-xs">
+            {JSON.stringify(context, null, 2)}
+          </pre>
+        );
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      className={cn('rounded-lg border p-4', getPermissionColors(permissionType))}
+    >
+      {/* 标题 */}
+      <div className="flex items-center gap-2 mb-3">
+        {getPermissionIcon(permissionType)}
+        <span className="text-sm font-medium">{getPermissionTitle(permissionType)}</span>
+        <span className="text-xs text-fg-subtle">AI 请求权限</span>
+      </div>
+
+      {/* 内容 */}
+      <div className="mb-4">{renderContext()}</div>
+
+      {/* Remember 选项 */}
+      <label className="flex items-center gap-2 text-xs text-fg-muted cursor-pointer mb-3">
+        <input
+          type="checkbox"
+          checked={remember}
+          onChange={(e) => setRemember(e.target.checked)}
+          disabled={disabled}
+          className="w-3.5 h-3.5 rounded border-line-muted bg-surface-base text-primary-500 focus:ring-primary-500"
+        />
+        本次会话记住选择
+      </label>
+
+      {/* 操作按钮 */}
+      <div className="flex items-center gap-2">
+        <button
+          onClick={handleDeny}
+          disabled={disabled}
+          className={cn(
+            'flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
+            'border border-red-400/50 text-red-400 hover:border-red-400 hover:bg-red-400/10',
+            disabled && 'opacity-50 cursor-not-allowed'
+          )}
+        >
+          <X size={14} />
+          拒绝
+        </button>
+        <button
+          onClick={handleAllow}
+          disabled={disabled}
+          className={cn(
+            'flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
+            'bg-primary-600 text-white hover:bg-primary-700',
+            disabled && 'opacity-50 cursor-not-allowed'
+          )}
+        >
+          <Check size={14} />
+          允许
+        </button>
+      </div>
+    </motion.div>
+  );
+}