Warp 垂直标签页 Primary Info 设置：自定义面板行首行信息（命令/对话 或 目录/分支）

桌面应用开发者工具人工智能AI 应用AI Agent代码智能体【免费下载链接】warpWarp is an agentic development environment, born out of the terminal.项目地址https://gitcode.com/GitHub_Trending/wa/warp点击查看免费下载导读Warp当前仓库 wa/warp在垂直标签页Vertical Tabs面板中引入了一个新的用户设置项VerticalTabsPrimaryInfo用于决定终端面板行terminal pane row的第一行primary line优先展示**“正在运行什么”终端命令 / Agent 对话标题还是“当前身处何处”工作目录 / Git 分支**。本文以产品规格 APP-3713 PRODUCT.md 为骨架结合仓库内真实实现设置注册、动作分发、弹窗渲染、行渲染等源码完整讲解该功能的交互设计、配置模型、两种视图模式下的布局规则以及从点击选项到云同步持久化的完整链路。读完本文你将掌握该设置的配置位置、行为规则、源码实现路径与验收方法。一、功能背景为什么需要一个 Show first 选择器1.1 问题来源在引入本功能之前垂直标签页的设置弹窗settings popup中包含一个Group panes by按……分组区块其中只有一个写死的Tab选项点击没有任何实际作用——它不派发任何 action、也不读取任何设置纯粹是视觉占位白白占据弹窗空间。与此同时不同用户的工作流诉求截然相反一部分用户更关心在跑什么当前终端命令、Agent 对话标题、CLI Agent 标题另一部分用户更关心在哪工作目录、Git 分支。规格文档将其定义为“一个不提供任何价值的占位区块”与“无法自定义面板行中哪类信息最醒目”的双重痛点见 PRODUCT.md 的 Summary 与 Problem 小节。1.2 解决方案概述将弹窗中无效的 Group panes by 区块替换为一个Show first优先展示选择器提供两个选项Command / Conversation默认保持现状主行展示终端命令 / Agent 对话标题次行展示工作目录 • Git 分支Directory / Branch交换主次行工作目录 • Git 分支成为主行终端命令 / Agent 对话标题成为次行。该偏好通过云同步设置跨会话持久化并同时作用于展开expanded与紧凑compact两种视图模式。二、需求目标与边界Goals / Non-goals规格文档明确列出了目标的四要素与三条明确的“不做”边界Goals让用户选择面板行主行优先展示终端命令 / Agent 对话标题还是工作目录 / Git 分支从设置弹窗中移除无功能的 Group panes by 区块偏好作为云同步设置跨会话持久化同时作用于展开与紧凑两种视图模式。Non-goals不新增分组group-by功能——被移除的区块本就是未来工作的占位符重做分组功能是独立议题不影响非终端面板行代码、笔记本、设置等本功能只作用于终端面板行不改动弹窗中分隔线下方的紧凑/展开分段控件segmented control。三、新设置项VerticalTabsPrimaryInfo 的配置模型3.1 设置定义与两种取值规格文档定义了新设置VerticalTabsPrimaryInfo含两个变体Command默认值终端命令 / Agent 对话标题为主行工作目录 / Git 分支为次行等价于当前行为WorkingDirectory工作目录 / Git 分支为主行终端命令 / Agent 对话标题为次行。该设置是云同步设置与既有设置VerticalTabsViewMode紧凑/展开切换采用完全相同的同步策略SyncToCloud::Globally(RespectUserSyncSetting::Yes)即“全局同步、尊重用户同步开关”。3.2 源码实现枚举注册与配置层级在当前仓库中该设置已经落地实现。枚举定义位于 app/src/workspace/tab_settings.rs#[derive( Default, Debug, serde::Serialize, serde::Deserialize, PartialEq, Copy, Clone, schemars::JsonSchema, settings_value::SettingsValue, )] #[schemars( description Primary information displayed on vertical tabs., rename_all snake_case )] pub enum VerticalTabsPrimaryInfo { #[default] Command, WorkingDirectory, Branch, }随后通过implement_setting_for_enum!宏注册进TabSettings设置组tab_settings.rssettings::macros::implement_setting_for_enum!( VerticalTabsPrimaryInfo, TabSettings, SupportedPlatforms::ALL, SyncToCloud::Globally(RespectUserSyncSetting::Yes), surface: settings::SettingSurfaces::GUI, private: false, toml_path: appearance.vertical_tabs.primary_info, description: The primary information displayed on vertical tabs., );关键信息解读注册参数含义SupportedPlatforms::ALL全平台支持macOS / Linux / WindowsSyncToCloud::Globally(RespectUserSyncSetting::Yes)作为全局设置云同步遵循用户的同步开关surface: GUI通过 GUI 界面暴露该设置toml_path: appearance.vertical_tabs.primary_info持久化配置路径写入appearance.vertical_tabs层级最终vertical_tabs_primary_info: VerticalTabsPrimaryInfo被挂载进TabSettings设置组tab_settings.rs与vertical_tabs_view_mode、vertical_tabs_compact_subtitle等相邻成员并列。仓库现状提示规格文档描述的是两个变体Command / WorkingDirectory而当前源码中的枚举已经演化为三个变体——新增了Branch主行直接展示 Git 分支。这是规格落地后被后续迭代扩展的体现本文后续涉及“三变体”的内容均以当前源码为准。四、设置弹窗 UI 改造从 Group panes by 到 Show first4.1 目标布局规格文档给出了弹窗的目标布局保持分隔线与分段控件不变┌──────────────────────────────────┐ │ Show first │ ← 区块标题次文本色 │ ✓ Command / Conversation │ ← 选项选中态 │ Directory / Branch │ ← 选项 │ ─────────────────────────── │ ← 分隔线不变 │ [ compact ] [ expanded ] │ ← 分段控件不变 └──────────────────────────────────┘4.2 区块标题与选项行的视觉规格区块标题文本Show first样式与旧 Group panes by 标题完全一致——次文本色sub-text color、12px 字号、16px 水平内边距、8px 底部外边距选项行每行 16px 水平内边距选中项左侧显示 16×16 的勾选图标WarpIcon::Check主文本色未选中项显示同尺寸透明占位保证文字对齐图标与文字之间 8px 间距标签 12px 主文本色悬停时高亮沿用弹窗内统一的fg_overlay_1背景模式鼠标指针变为手型点击行为点击选项后立即更新设置并触发重渲染弹窗保持打开与ToggleVerticalTabsSettingsPopup不同点击不会关闭弹窗让用户看到勾选标记移动、面板行实时变化后再手动关闭。4.3 源码实现弹窗渲染与选项行弹窗入口函数为render_settings_popupapp/src/workspace/view/vertical_tabs.rs它会一次性读取当前全部相关设置值包括let current_primary_info *TabSettings::as_ref(app).vertical_tabs_primary_info.value();选项行的渲染由render_primary_info_option完成vertical_tabs.rs其结构完全对应规格描述fn render_primary_info_option( label: str, is_selected: bool, mouse_state: MouseStateHandle, value: VerticalTabsPrimaryInfo, appearance: Appearance, theme: WarpTheme, ) - Boxdyn Element { const ICON_SIZE: f32 16.; const FONT_SIZE: f32 12.; const GAP: f32 8.; // 选中项WarpIcon::Check主文本色未选中项16×16 Empty 占位 // Flex::row 内图标 8px 间距 12px 标签文本 // 悬停internal_colors::fg_overlay_1(theme) 背景 // 点击dispatch WorkspaceAction::SetVerticalTabsPrimaryInfo(value) // 光标Cursor::PointingHand }其中 16×16 图标尺寸、8px 间距、12px 字号、16px 水平内边距、悬停高亮与手型光标均以常量形式显式编码在渲染函数中与规格文档逐项吻合。五、展开视图Expanded下的行布局规则规格文档将终端面板行定义为三段式结构主行primary 次行secondary 第三行tertiarykind 徽标 右侧徽标。5.1 选中Command默认——现状行为主行主文本色终端标题、Agent 对话状态 标题、CLI Agent 标题或最近完成的命令遵循 APP-3651 规定的优先级级联规则次行次文本色工作目录 • Git 分支第三行kind 徽标 徽标不变。5.2 选中WorkingDirectory主次行交换主行主文本色工作目录 • Git 分支。复用原次行的布局但以主文本色渲染工作目录从开头裁剪start-clippedGit 分支从末尾裁剪end-clipped次行次文本色终端标题、Agent 对话状态 标题、CLI Agent 标题或最近完成的命令与当前主行相同的优先级规则但以次文本色渲染对于 Agent 对话状态指示图标仍然前置在标题文本之前第三行kind 徽标 徽标不变。5.3 源码验证行渲染的按设置分支当前仓库中展开模式的行内容渲染已经按primary_info分支出三条路径vertical_tabs.rs代码注释中明确画出了三变体下的行分配表// | Setting | Line 1 (title) | Line 2 (description) | Line 3 left | // |------------------|----------------------|------------------------|----------------------| // | Command | command/conversation | working directory | git branch | // | WorkingDirectory | working directory | command/conversation | git branch | // | Branch | git branch | command/conversation | working directory |其中Command分支调用render_terminal_primary_line_for_view(...)以主文本色渲染第一行、工作目录以次文本色渲染第二行WorkingDirectory分支则完全反过来——第一行渲染工作目录ClipConfig::start()起始裁剪、主文本色第二行调用render_terminal_primary_line_for_view并以次文本色渲染。颜色契约要点来自 TECH.md原实现中render_terminal_primary_line硬编码main_text_color、render_terminal_secondary_line硬编码sub_text_color为了支持行交换两个函数都增加了text_color: WarpThemeFill参数由调用方决定每行使用的颜色。状态指示图标的颜色不随文本色变化由独立的render_status_element决定。六、紧凑视图Compact下的行布局规则6.1 选中Command默认——现状行为无变化紧凑行以单行展示“终端图标 终端标题”或“Agent 状态图标 对话标题”。6.2 选中WorkingDirectory单行内容变为非 Agent 终端终端图标 工作目录替代终端标题工作目录从开头裁剪Agent 终端Oz 或 CLI Agent对话状态图标 工作目录替代对话标题工作目录从开头裁剪环境 AgentAmbient agentOzCloud图标 工作目录。6.3 图标行为图标与文本解耦规格文档特别强调紧凑行开头的 kind 图标始终由面板类型与 Agent 状态决定而非由 primary info 设置决定——非 Agent 终端恒为终端图标Agent 终端恒为对话状态图标环境 Agent 恒为OzCloud图标。切换设置只改变行的文本部分。这与 TECH.md 中“图标解析逻辑已与文本逻辑分离因此这是顺理成章的”风险缓解说明一致。6.4 源码验证紧凑行渲染当前实现的紧凑行渲染位于 vertical_tabs.rs同样按primary_info分支构建标题行Line 1Commandrender_terminal_primary_line_for_view 主文本色WorkingDirectory直接用Text::new_inline(working_directory_text, ...)以ClipConfig::start()起始裁剪 主文本色渲染Branch优先渲染 Git 分支文本无分支时回退为工作目录文本。紧凑模式还引入了配套的VerticalTabsCompactSubtitle“Additional metadata”次标题设置渲染前通过resolve_compact_subtitlevertical_tabs.rs检测主设置与次标题是否冲突如主行已是 Command 时次标题不能再是 Command冲突时自动回退到该主设置对应的默认次标题vertical_tabs.rs。七、非终端面板与搜索行为不受影响非终端面板代码、笔记本、设置等非终端面板行在两种视图模式下都不受该设置影响布局保持不变搜索行为搜索输入框本来就同时索引终端面板的主文本与工作目录terminal_pane_search_text_fragments索引两个字段与显示顺序无关。即使把 Directory / Branch 设为主行按终端标题搜索仍然命中。因此本功能无需改动搜索逻辑。八、端到端事件链路与持久化8.1 完整交互链路规格文档TECH.md 的 End-to-end flow给出了完整链路用户点击垂直标签页控制栏中的设置图标 → 派发ToggleVerticalTabsSettingsPopup→show_settings_popup置为true→ 弹窗通过render_settings_popup渲染弹窗顶部显示 Show first 标题默认勾选 Command / Conversation下方为分段控件用户点击 Directory / Branch → 派发SetVerticalTabsPrimaryInfo(WorkingDirectory)→TabSettings.vertical_tabs_primary_info被更新 →ctx.notify()触发重渲染弹窗保持打开勾选标记移动到 Directory / Branch面板内所有终端面板行重渲染展开模式交换主次行紧凑模式显示工作目录文本设置通过设置同步框架持久化到云端下次启动时TabSettings::as_ref(app).vertical_tabs_primary_info.value()返回WorkingDirectory行立即以交换后的顺序渲染。8.2 源码验证动作定义与处理器动作变体定义在 app/src/workspace/action.rs紧邻SetVerticalTabsViewModeSetVerticalTabsPrimaryInfo(VerticalTabsPrimaryInfo),处理器位于 app/src/workspace/view.rsSetVerticalTabsPrimaryInfo(primary_info) { let primary_info *primary_info; TabSettings::handle(ctx).update(ctx, |settings, ctx| { let _ settings .vertical_tabs_primary_info .set_value(primary_info, ctx); }); send_telemetry_from_ctx!( VerticalTabsTelemetryEvent::DisplayOptionChanged( VerticalTabsDisplayOption::PrimaryInfo(primary_info), ), ctx ); ctx.notify(); }可以看到实际实现比规格文档更进一步除了set_value与ctx.notify()还发送了遥测事件VerticalTabsTelemetryEvent::DisplayOptionChanged(PrimaryInfo(...))用于记录用户对主行信息的显示偏好变更遥测枚举定义于 app/src/workspace/view/vertical_tabs/telemetry.rs会序列化为command/working_directory/branch等 JSON 值。8.3 持久化语义不写入工作区状态动作测试 app/src/workspace/action_tests.rs 验证了SetVerticalTabsPrimaryInfo的所有变体都应从should_save_app_state_on_action返回false——即该设置通过设置框架持久化而不是作为工作区workspace状态保存。这与SetVerticalTabsViewMode的模式完全一致。九、验收标准与验证清单9.1 成功标准来自产品规格设置弹窗中的 Group panes by 标题与 Tab 项被移除弹窗顶部出现 Show first 标题含两个选项Command / Conversation默认勾选与 Directory / Branch点击 Directory / Branch 后勾选标记移动所有终端面板行的主次行立即交换点击 Command / Conversation 恢复默认行序并移回勾选标记展开模式 Directory / Branch主行以主文本色显示工作目录起始裁剪与 Git 分支次行以次文本色显示终端标题或 Agent 对话标题展开模式 Directory / Branch 活跃 Agent 对话次行以次文本色显示“对话状态指示器 对话标题”紧凑模式 Directory / Branch单行显示“终端图标 工作目录起始裁剪”替代终端标题紧凑模式 Directory / Branch Agent 对话显示“对话状态图标 工作目录”设置跨会话持久化退出并重启 Warp 后勾选 Working directory 仍保持相同的行序点击选项后弹窗保持打开用户可看到变化后手动关闭分隔线下方的紧凑/展开分段控件不变非终端面板不受该设置影响。9.2 手动验证清单Validation手动切换打开设置弹窗在 Command / Conversation 与 Directory / Branch 之间切换验证面板行立即更新且勾选标记移动展开模式选中 Directory / Branch验证主行显示工作目录起始裁剪 Git 分支主文本色次行显示终端标题或 Agent 信息次文本色紧凑模式选中 Directory / Branch 后切到紧凑模式验证单行显示终端图标 工作目录Agent 面板启动 Agent 对话在 Directory / Branch 下验证展开次行显示状态指示器 对话标题紧凑模式显示状态图标 工作目录持久化选中 Directory / Branch退出 Warp、重启验证设置保留非终端面板打开代码面板或笔记本验证切换该设置对其行布局无影响搜索以 Directory / Branch 为主行时搜索终端标题字符串验证仍能命中搜索索引两个字段与显示顺序无关。十、当前仓库实现状态与后续演进10.1 实现现状以当前仓库源码为准设置枚举、宏注册与TabSettings挂载均已落地tab_settings.rs动作与处理器、遥测事件均已实现action.rs、view.rs弹窗渲染与选项行、展开/紧凑行渲染均已按设置分支vertical_tabs.rs、vertical_tabs.rs、vertical_tabs.rs规格中“两个变体”的设计在实现中已扩展为三变体新增Branch并配套新增VerticalTabsCompactSubtitle次标题设置与冲突自动回退逻辑resolve_compact_subtitlevertical_tabs.rs。10.2 后续演进Follow-ups未来若实现分组group-by功能Show first 区块与 Group by 区块可共存于同一弹窗布局演变为“Show first” 选项 → 分隔线 → “Group by” 选项 → 分隔线 → 分段控件可考虑为切换主行信息设置增加键盘快捷键。参考文件索引产品规格specs/APP-3713/PRODUCT.md技术规格specs/APP-3713/TECH.md设置定义与注册app/src/workspace/tab_settings.rs动作定义app/src/workspace/action.rs动作处理器与遥测app/src/workspace/view.rs弹窗与行渲染app/src/workspace/view/vertical_tabs.rs、vertical_tabs.rs、vertical_tabs.rs遥测枚举app/src/workspace/view/vertical_tabs/telemetry.rs动作持久化测试app/src/workspace/action_tests.rs赞分享桌面应用开发者工具人工智能AI 应用AI Agent代码智能体【免费下载链接】warpWarp is an agentic development environment, born out of the terminal.项目地址https://gitcode.com/GitHub_Trending/wa/warp点击查看免费下载相关推荐gRPC C SSL 认证实战基于 SslServerCredentials 与 SslCredentials 搭建 TLS 加密 RPC 服务gRPC C SSL 认证实战基于 SslServerCredentials 与 SslCredentials 搭建 TLS 加密 RPC 服务 导读 本桌面应用开发者工具人工智能AI 应用AI Agent代码智能体Warp 垂直标签面板新会话菜单Vertical Tabs Dropdown设计与实现解析Warp 垂直标签面板新会话菜单Vertical Tabs Dropdown设计与实现解析 导读 Warp 在终端标签栏之上加入了可选的垂直标签面板但初版桌面应用开发者工具人工智能AI 应用AI Agent代码智能体Warp 垂直标签面板紧凑模式VerticalTabsViewMode 设置、视图切换 Popup 与单行 Pane 渲染深度解析Warp 垂直标签面板紧凑模式 VerticalTabsViewMode 设置、视图切换 Popup 与单行 Pane 渲染深度解析 导读 本文围绕 Warp桌面应用开发者工具人工智能AI 应用AI Agent代码智能体上一篇Puter性能瓶颈分析使用火焰图定位系统热点问题下一篇如何安装与配置Obsidian Primary主题从新手到高手的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考