CAI Mobile UI 用户界面指南iOS 端移动安全测试的完整交互解析【免费下载链接】caiCybersecurity AI (CAI), the framework for AI Security项目地址: https://gitcode.com/GitHub_Trending/cai3/cai本篇指南以 CAI 开源仓库中的 docs/mui/user_interface.md 为主体系统讲解 CAI Mobile UICAI-Pro 专属的原生 iOS 客户端的界面布局、交互手势、视觉规范、状态指示与性能优化机制。读者将掌握五大功能区域的用途与操作方式、消息输入与渲染的完整能力边界并能理解移动端界面与 CAI 后端多 Agent 体系如red_teamer_agent、blue_teamer_agent、bug_bounter_agent之间的对应关系从而在手机端高效完成渗透测试、应急响应与远程 Agent 管理。CAI Mobile UI 是一个基于 SwiftUI 构建的原生 iOS 应用面向需要随时随地进行安全评估、事件响应与 Agent 管理的安全专业人员。它将 CAI 的完整能力实时流式对话、多 Agent 切换、MCP 工具接入、会话历史管理打包为符合 iOS 交互习惯的触控界面。官方对比说明指出TUI 已逐步被 Mobile UI 取代CAI-Pro 用户的所有新功能开发都集中在该移动端见 docs/mui/mui_index.md。CAI Mobile UI 聊天主界面顶部 Agent/模型选择、中部流式对话区、底部消息输入栏与标签栏截图来源docs/media/MUI/界面总览五大功能区域CAI Mobile UI 的整体界面被划分为五个纵向堆叠的功能区域从上到下依次为┌─────────────────────────────┐ │ Navigation Bar │ ← Agent/Model Selection ├─────────────────────────────┤ │ │ │ │ │ Chat Display │ ← Conversation Area │ │ │ │ ├─────────────────────────────┤ │ Message Input Bar │ ← Text Input ├─────────────────────────────┤ │ Tab Bar │ ← Navigation └─────────────────────────────┘Navigation Bar顶部导航栏承担 Agent 选择、模型切换与全局快捷操作Chat Display聊天展示区对话内容的渲染主区域支持流式输出与富文本格式Message Input Bar消息输入栏文本输入、附件、语音与命令调色板入口Tab Bar底部标签栏切换 Chats / Agents / Tools / History / Settings 五个主模块。这一导航栏—内容区—输入栏—标签栏的四段式结构与 iOS 主流即时通讯 App 的交互心智保持一致让安全人员几乎零学习成本即可上手。顶部导航栏Navigation Bar导航栏分为左、中、右三个区域覆盖会话级高频操作。左侧菜单按钮☰点击左上角菜单按钮可呼出侧边栏包含Settings应用级设置主题、网络、账号等Session History历史会话入口Export Options会话导出Help Documentation内置帮助与文档。中间Agent 选择器导航栏中央显示当前 Agent 名称点击展开下拉列表点击即可切换 Agent实时展示 Agent 状态active / thinking为不同类型 Agent 显示专属图标。Agent 选择器背后对应的是 CAI 后端多 Agent 体系。从 src/cai/agents/factory.py 可以看到所有 Agent 通过create_generic_agent_factory动态实例化模型名按显式覆盖 → Agent 专属环境变量如CAI_RED_TEAMER_AGENT_MODEL→ 全局CAI_MODEL默认alias1三级优先级解析并支持为每个 Agent 动态挂载 MCP 工具。移动端下拉列表中的候选 Agent 直接映射到仓库中的模块定义例如src/cai/agents/red_teamer.py 定义的Red Team Agent进攻性安全测试src/cai/agents/blue_teamer.py 定义的Blue Team Agent防御性分析src/cai/agents/bug_bounter.py 定义的Bug Bounter漏洞挖掘。在 docs/mui/getting_started.md 的首次会话指引中官方推荐的起点是selection_agent负责推荐最适合当前任务的 Agent随后再切换到red_teamer_agent、blue_teamer_agent或bug_hunter_agent等专职 Agent。右侧模型徽章与快捷操作Model Badge模型徽章显示当前模型点击切换按 Provider 使用不同颜色标识并展示 token 限制。官方推荐模型包括gpt-4o、claude-3.5-sonnet、alias1针对安全任务优化以及cohere/command-r-plus-08-2024Action Button⋯弹出快捷操作包括清空当前会话Clear conversation、导出聊天Export chat与查看原始输出View raw output。聊天展示区Chat Display Area消息类型消息类型对齐方式视觉特征附加能力用户消息右对齐气泡蓝色背景可自定义长按显示时间戳、支持滑动操作助手消息左对齐气泡白/灰背景 Agent 头像/图标生成期间显示流式指示器系统消息居中弱化muted外观状态更新与通知内容渲染能力聊天区对 Agent 输出做了完整的 Markdown 级渲染文本格式粗体、斜体、行内代码含语法高亮、引用块代码块语言自动检测、右上角悬浮复制按钮、超长行横向滚动。例如# Syntax highlighted code def security_scan(target): return results列表与表格项目符号与编号自动排序、表格响应式布局、宽表格横向滚动特殊元素 工具调用指示器、 思考/推理过程展示、⚠️ 警告/错误消息、✅ 成功确认。其中推理展示是安全任务的关键交互——当 Agent 处于thinking状态时界面会呈现可读的推理过程CAI Mobile UI 推理展示Agent 处理中实时呈现思考过程与工具调用状态截图来源docs/media/MUI/消息输入栏Message Input Bar文本输入框多行输入支持自动扩展至最多 5 行长内容粘贴检测Mention 支持agent、file可直接在会话中引用 Agent 或文件Markdown 预览开关。操作按钮按钮图标功能Send→提交消息Attach添加文件/图片相册、相机、文件 App、剪贴板粘贴Voice语音输入可用时启用Commands/快速命令面板输入栏的提及 Agent 快速命令能力与后端 REPL 命令体系src/cai/repl/commands/ 中的agent.py、model.py、run.py等在理念上保持一致安全人员在移动端也能用命令式交互驱动 Agent 完成扫描、切换模型等操作。底部标签栏Tab Bar Navigation底部标签栏承载应用级五大模块Chats活跃会话列表、未读消息指示器、滑动删除/归档、会话搜索Agents浏览全部可用 Agent、按类别过滤、查看描述、快速选择/收藏ToolsMCP 工具管理、已连接服务器、工具文档、配置选项History历史会话、搜索与过滤、导出选项、用量分析视图Settings账号管理、外观选项、网络配置、高级设置。其中Tools 标签页直接对接 CAI 的 MCPModel Context Protocol集成能力。仓库源码显示每个 Agent 实例化时会通过get_mcp_tools_for_agent见 src/cai/agents/factory.py将配置的 MCP 工具动态合并进 Agent 的工具列表移动端因此可以在安全测试过程中实时查看已连接服务器与其工具文档。视觉设计规范配色方案浅色模式Light Mode用途色值背景#FFFFFF主色#007AFFiOS Blue文本#000000次要#8E8E93深色模式Dark Mode用途色值背景#000000主色#0A84FF文本#FFFFFF次要#8E8E93Agent 状态色状态颜色Active激活绿#34C759Thinking思考橙#FF9500Error错误红#FF3B30Idle空闲灰#8E8E93字体与字号字体标题 SF Pro DisplayBold、正文 SF Pro TextRegular、代码 SF MonoRegular、CAI 品牌字体 Suisse Intl字号Large Title 34pt、Title 1 28pt、Body 17pt、Caption 12pt、Code 14pt。间距与自适应布局边距屏幕边缘 16pt、元素间距 8pt、消息气泡内边距 12pt自适应布局iPhone SE 紧凑宽度、iPhone 14 常规宽度、iPad 多列布局。交互元素手势体系手势动作Tap点按单击选中/激活、双击快捷操作、长按上下文菜单Swipe滑动横向切换会话、纵向滚动内容、下拉刷新/取消Pinch捏合缩放调节文本大小、张开查看图片全屏完整手势矩阵可参考 docs/mui/gestures_shortcuts.md包括双指上滑跳到顶部、双指下滑跳到底部、摇动设备触发撤销/上报等进阶操作。动画转场Push/pop 0.3s ease-in-out、Fade 0.2s linear、Spring阻尼 0.8、速度 0.5加载态骨架屏、思考脉冲动画、上传进度指示器。触觉反馈Haptic FeedbackLight轻选择变化、开关切换、标签页选择Medium中发送消息、错误告警、成功操作Heavy重严重错误、破坏性操作、3D Touch 菜单。自适应特性Dynamic Type动态字号支持 iOS 无障碍字号范围 14pt53pt布局自动调整并保持可读行宽。方向支持竖屏完整界面、单手优化、键盘避让横屏扩展消息视图、iPad 分屏并排、浮动键盘支持。显示模式Compact Mode简化导航、消息紧凑、仅保留必要操作Regular Mode完整功能集、富文本格式、全部工具可用iPad Mode多列布局、浮动面板、键盘快捷键。状态指示器连接状态 已连接纯绿 连接中黄色脉冲 已断开纯红 同步中旋转图标。Agent 状态 思考中动画圆点️ 使用工具工具图标✍️ 生成中打字指示器✅ 完成对勾。网络质量信号质量延迟满格Excellent50ms3 格Good50–150ms2 格Fair150–300ms1 格Poor300ms这些状态指示器与后端 Agent 生命周期直接对应。在 CAI 的 Agent 执行模型中Agent 处理流会依次经历思考、工具调用、输出生成等阶段相关生命周期定义可参考 src/cai/sdk/agents/lifecycle.py 与 src/cai/sdk/agents/stream_events.py移动端 UI 正是通过订阅这些事件来驱动上述动画指示。无障碍AccessibilityVoiceOver完整标签覆盖、逻辑导航顺序、操作提示、自定义 rotor 操作视觉适配高对比度模式、减弱动态效果选项、色盲滤镜、文本大小偏好运动适配触控目标最小 44×44pt、手势替代方案、语音控制支持、Switch Control 兼容。自定义选项外观主题选择浅色/深色/自动、强调色、字体大小、消息气泡样式布局紧凑/舒适/宽松三档、时间戳显隐、头像显示选项、标签栏配置行为滑动灵敏度、动画速度、触觉强度、音效开关。性能优化图片处理历史记录懒加载、缩略图生成、渐进式图片加载、内存高效缓存。消息渲染虚拟化滚动、增量渲染、文本测量缓存、60fps 平滑滚动。网络效率消息批量处理、压缩支持、仅增量更新、离线队列管理。配合 docs/mui/chat_features.md 中描述的离线模式安全人员即使在无网络环境下也可阅读历史会话、搜索记录并导出内容恢复连接后自动排队重发消息。快速上手与延伸阅读若尚未配置移动端环境可参考 docs/mui/getting_started.md 完成连接在桌面端通过cai --api启动 CAI API 服务端口示例http://192.168.1.100:8000iOS 设备上选择Scan Network自动发现服务器或手动输入服务器 URL 与ALIAS_API_KEY连接认证失败时可通过cai --keys重新生成密钥。移动端要求 CAI API Server v0.7.0、iOS 15.0具体系统要求见 docs/mui/mui_index.md。进一步学习手势与快捷键完整矩阵高级聊天功能导出、模板、离线、安全Mobile UI 总览与架构理解界面是高效移动安全测试的起点借助 Agent 选择器直达专职安全 Agent、通过状态指示器实时掌握推理与工具执行进度、利用完整的手势与自定义体系把移动端打造成真正可用的安全工作台。【免费下载链接】caiCybersecurity AI (CAI), the framework for AI Security项目地址: https://gitcode.com/GitHub_Trending/cai3/cai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考