JetBrains Session UI 图标与头部布局一致性治理Kilo 开源仓库实战方案解析【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocodeSession UI 是 KiloJetBrains 插件中承载会话消息、工具结果、推理过程与提问交互的核心界面。随着功能模块增多图标来源不统一、折叠箭头尺寸跳变、头部操作按钮布局易混淆等问题逐渐显现。本篇以仓库计划文档 jetbrains-session-ui-icons-header.md 为骨架结合 packages/kilo-jetbrains 下的真实源码与测试完整拆解这次图标一致性 头部布局收敛的治理方案如何统一图标来源、修复推理头部图标、归一化折叠箭头、并重构会话头部展开/收起详情的交互位置。读完本文你将掌握 Kilo JetBrains 会话 UI 的图标体系结构、折叠卡片基类的实现机制以及一次完整 UI 打磨任务从 Findings 到 Tests 再到 Verification 的落地流程。一、本次治理的目标四件事计划文档开篇即明确了本次 JetBrains Session UI 打磨的四个目标全部聚焦于视觉一致性与误操作防护两个体验维度统一会话视图图标让 JetBrains 会话视图使用与 Kilo/VS Code 对齐的会话图标避免同一语义在不同端出现不同图形修复推理头部图标Reasoning推理视图当前使用了不恰当的图标需替换为与共享 UI 一致的大脑图标归一化折叠/展开箭头会话各卡片部分session part折叠/展开时避免在两种尺寸不同的字形之间跳动迁移详情开关位置将会话详情的显示/隐藏开关从压缩按钮旁边移走放到会话标题之前降低两个相邻按钮被误触的概率。这四个目标都落在 packages/kilo-jetbrains 包内不涉及上游 opencode 共享代码属于纯 JetBrains 端的 UI 打磨。二、现状梳理Findings图标体系的集中点与问题根因计划文档通过一次源码审计定位了所有相关代码的枢纽与三个具体问题这些结论在 packages/kilo-jetbrains 当前源码中均可以逐一印证。2.1 会话视图图标的集中入口会话视图图标被集中定义在 SessionViewIcons.kt并通过IconLoader.getIcon(/icons/views/$name.svg, ...)从 frontend/src/main/resources/icons/views/ 目录加载 SVG 资源。从当前源码可以看到该对象同时暴露了brain大脑、checklist清单、console控制台、warning警告等语义图标两个方向性箭头chevronDown下箭头与chevronRight右箭头以及两个别名chevronCollapsed chevronRight、chevronExpanded chevronDown这正是折叠状态箭头切换的实现点。而资源目录中每个图标都配有_dark深色变体如 brain.svg 与brain_dark.svg这是 JetBrains 插件图标主题化的标准做法。2.2 共享图标源的对照packages/ui 的 icon.tsx计划明确将 packages/ui/src/components/icon.tsx 视为 Kilo Web / 会话字形的上游来源。审计结论是JetBrains 的viewsSVG 已经镜像了共享 VS Code/UI 图标路径中已审计的名称包括brain、chevron-down、chevron-right、checklist、console、warning等。在 icon.tsx 中可以看到这些条目确实存在例如brain一个多段 path 组成的大脑轮廓chevron-downM6.6665 8.33325L9.99984 11.6666L13.3332 8.33325下箭头折线chevron-rightM8 15L13 10L8 5右箭头折线checklist、console、warning等均有对应 path 定义。需要注意一个关键差异共享 UI 的图标使用strokecurrentColor让颜色跟随上下文而 JetBrains 端的 SVG不允许使用currentColor必须使用字面色板literal palette colors并配套深色变体。这正是计划中保留 JetBrains SVG 主题规则这条约束的来源。2.3 三个具体问题问题一推理视图图标错用。计划指出ReasoningView.kt当前渲染的是SessionViewIcons.eye眼睛图标而 VS Code/共享 UI 在推理/思考类表面统一使用brain图标且SessionViewIcons.brain已经存在、资源 brain.svg 也已就位——属于资源具备但接线错误。问题二折叠箭头尺寸跳变。标准可折叠会话卡片在 AbstractSessionPartView.kt 的syncArrow()方法中切换图标展开时用SessionViewIcons.chevronExpanded即 chevronDown折叠时用SessionViewIcons.chevronCollapsed即 chevronRight。问题是chevron-down与chevron-right两个 SVG 路径的视觉范围visual extents不同折叠/展开切换时箭头图形会产生肉眼可见的跳动。问题三头部详情开关与压缩按钮相邻。会话头部 SessionHeaderPanel.kt 将详情显示/隐藏开关放在右侧控制区、紧挨压缩compact按钮。当前源码中右侧是一个水平 Stackcost价格→context上下文→compact压缩按钮两个收起类操作挤在一起用户容易误触。三、实施步骤 1让图标来源与共享 UI 保持对齐计划的第一步不是盲目改图而是先确立单一事实来源原则以 icon.tsx 为 Kilo Web / 会话字形的形状来源后续新增或修改图标时以它为基准逐项复核 SessionViewIcons.kt 的条目与 JetBrains 资源是否一一对应只有当某个会话视图用到了 Kilo 图标、但 frontend/src/main/resources/icons/views/ 目录下缺失该资源时才新增或更新 SVG严格遵守 JetBrains SVG 主题化规则不使用currentColor新增或修改资源时必须同时提供字面色板颜色与深色变体*_dark.svg。这一步本质上是建立校验-补齐的闭环能复用的复用缺资源的才补避免重复造图标造成两套字形漂移。四、实施步骤 2修复推理头部图标这是最小改动的一步计划要求在ReasoningView.kt中把推理头部的字形从SessionViewIcons.eye改为SessionViewIcons.brain在ReasoningViewTest.kt中增加或更新测试通过遍历渲染出的 Swing label 树断言推理图标是SessionViewIcons.brain。从当前仓库源码看这一步已经落地ReasoningView.kt中构建头部的reasoningParts()已经使用JBLabel(SessionViewIcons.brain)作为 leading 图标且 ReasoningViewTest.kt 中已有test reasoning header uses brain icon测试它通过递归collect遍历组件树收集所有JLabel的 icon断言集合包含SessionViewIcons.brain且不包含SessionViewIcons.eye。这说明计划中的图标替换 组件树级断言模式已被测试体系采纳可以作为后续类似改动的范本。五、实施步骤 3归一化折叠/展开箭头这一步解决尺寸跳变问题是本次治理中机制性最强的一环计划给出了明确的技术路线停止使用chevronRight/chevronDown混合对来表现折叠/展开两种状态两种状态统一使用同一个基础 Kilo chevron 字形即会话头部当前使用的自定义 chevron/icons/chevron-down.svg对应SessionViewIcons.chevronDown另一个状态改为共享的旋转图标rotated icon而不是切换到尺寸不同的右向资源倾向于抽取一个小的可复用辅助方法或集中式图标字段而不是把头部专属 UI 引入会话视图同步更新 AbstractSessionPartView.kt 和 QuestionResultView.kt让它们都使用归一化后的 chevron 对。5.1 基类中的切换点折叠箭头的切换逻辑集中在AbstractSessionPartView.kt的syncArrow()private fun syncArrow(): Boolean { val icon if (isExpanded()) SessionViewIcons.chevronExpanded else SessionViewIcons.chevronCollapsed if (arrow.icon icon) return false arrow.icon icon return true }当前chevronExpanded/chevronCollapsed分别指向chevronDown/chevronRight两个不同资源。计划的核心改动就是把这对别名从两个不同 SVG收敛为同一 SVG 旋转。这样无论折叠还是展开箭头的像素尺寸完全一致视觉上只是方向旋转 90°彻底消除跳动。5.2 关于 QuestionView 的边界计划特别叮嘱QuestionView.kt中的导航 chevron 不要动——除非审计证明它们被用于折叠/展开。因为那是上一条/下一条的前后导航控件不是展开/收起控件。这体现了本次治理的克制原则只归一化折叠/展开语义的箭头不越界改动导航语义的图标。5.3 测试的印证AbstractSessionPartViewTest.kt 中已有test toggle uses right and down chevron icons测试它断言折叠态箭头为SessionViewIcons.chevronCollapsed即chevronRight、展开态为chevronExpanded即chevronDown并且断言两次切换后iconWidth/iconHeight相等。这条测试恰好暴露了当前实现的一个隐患尺寸相等的断言建立在测试假设上而实际两个 SVG 的视觉范围不同——计划要求的归一化正是要从资源层面根治它测试随后应改为断言两种状态使用同一基础字形旋转差异。六、实施步骤 4迁移并更换头部详情开关这是布局重构的一步目标是把显示/隐藏详情与压缩会话从视觉上彻底分开。6.1 图标方案在 SessionHeaderPanel.kt 中把头部自定义的详情 chevron 替换为平台AllIcons的箭头折叠态详情收起AllIcons.General.ArrowRight展开态详情展开AllIcons.General.ArrowDown采用平台内置图标的好处是与 IntelliJ 平台其余 UI 的箭头风格天然一致。从当前源码看SessionHeaderPanel已经大量使用AllIcons如todoArrow在 expandTodos 中切换AllIcons.General.ArrowDown/ArrowRight说明该组件与平台图标体系兼容良好。6.2 布局重构从右区相邻到WEST 前置计划要求把详情开关从右侧控制区移出放入头部行的BorderLayout.WEST并把整个头部重建为嵌套 BorderLayout 结构外层 border layoutwest详情开关按钮center内层 border layout内层 center会话标题内层 east水平 Stack/行依次放置 价格/上下文price/context与压缩按钮。同时从右侧行中移除详情开关让压缩在视觉上独立。当前源码中右侧 Stack 依次是cost价格→context上下文→compact压缩按钮详情开关若仍混在其中两个收起类操作确实容易误触迁移到 WEST 后标题左侧成为独立的详情开关专属区域。6.3 行为保持不变的硬约束计划明确要求现有的 tooltip / 无障碍accessibility字符串、展开状态持久化行为全部保持不变。这一点很重要——SessionHeaderPanel的展开状态通过PropertiesComponent持久化EXPANDED_KEY kilo.session.header.expandedsetExpand()同时维护 icon、toolTipText 与accessibleName重构时这些行为必须原样保留只动布局与图标。七、实施步骤 5测试覆盖矩阵计划为四处改动分别指定了对应的测试文件形成完整的回归防线改动点测试文件断言重点头部详情开关SessionHeaderPanelTest.kt折叠/展开态使用选定的AllIcons常量展开状态照旧持久化详情开关与压缩按钮在布局上相互独立parent/布局分离折叠卡片箭头AbstractSessionPartViewTest.kt可折叠部件在折叠/展开两种状态下保持相同图标尺寸不再使用错配的右/下箭头对提问结果视图QuestionResultViewTest.kt同上因其自带 chevron 实现推理头部图标ReasoningViewTest.kt推理头部使用brain图标现有test reasoning header uses brain icon已验证该断言模式其中详情开关与压缩按钮布局分离的断言对应SessionHeaderPanel暴露的expandButton()、compactButton()、rightPanel()等 internal 访问器——这些访问器正是为测试检查组件树而设计的测试可以通过比较两个按钮的 parent 是否不同来验证布局迁移是否生效。八、实施步骤 6验证命令计划给出了最小的验证集从 packages/kilo-jetbrains 目录执行./gradlew test --tests ai.kilocode.client.session.views.ReasoningViewTest \ --tests ai.kilocode.client.session.views.base.AbstractSessionPartViewTest \ --tests ai.kilocode.client.session.views.QuestionResultViewTest \ --tests ai.kilocode.client.session.ui.header.SessionHeaderPanelTest ./gradlew typecheck如果项目不接受这种过滤式--tests语法则回退为从packages/kilo-jetbrains/直接运行./gradlew test。值得说明的是这里的类全限定名与源码目录结构完全一致四个测试类分别对应session/views/、session/views/base/、session/ui/header/三个包路径实际执行时可直接照抄。九、注意事项与发布影响计划文档末尾记录了三点工程约束改动范围边界不涉及共享上游opencode文件所有变更都留在 packages/kilo-jetbrains 包内——这对合并、回滚和跨仓库协作都很友好changeset 评估由于这是面向用户的 JetBrains UI 打磨属于用户可见变更可能需要补充 changeset实施时应确认该私有 JetBrains 包现有的 changeset 策略主题化纪律凡是新增或修改的 SVG 资源都必须遵循无currentColor 字面色板 深色变体的规则这与共享 Web UI 中strokecurrentColor的写法是两套不同的主题机制不可混用。十、总结从计划到落地的可复用模式这次 JetBrains Session UI 治理虽然范围不大但方法论非常完整值得在同类 UI 打磨任务中复用先审计、后动手通过 Findings 精准定位图标集中点SessionViewIcons、共享字形源icon.tsx与三个具体病灶确立单一事实来源Web 端 icon.tsx 为字形基准JetBrains 端只做镜像与补齐杜绝双源漂移机制性修复而非打补丁折叠箭头问题用同一字形 旋转从根上消除尺寸跳变而不是继续维护两套不同尺寸的 SVG布局与行为解耦头部重构只动位置与图标tooltip、无障碍字符串与持久化行为保持不变测试与改动一一对应每个改动点都有专属测试文件与明确断言最后用最小化的./gradlew test --tests ...命令闭环验证。如果你正在维护 JetBrains 插件中某个多视图、多图标源的会话式 UI这份计划及其在 packages/kilo-jetbrains 中的落地实现就是一份可以直接借鉴的图标一致性 头部布局收敛实操模板。【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 JetBrains Session UI 图标与头部布局一致性治理：Kilo 开源仓库实战方案解析
JetBrains Session UI 图标与头部布局一致性治理Kilo 开源仓库实战方案解析【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocodeSession UI 是 KiloJetBrains 插件中承载会话消息、工具结果、推理过程与提问交互的核心界面。随着功能模块增多图标来源不统一、折叠箭头尺寸跳变、头部操作按钮布局易混淆等问题逐渐显现。本篇以仓库计划文档 jetbrains-session-ui-icons-header.md 为骨架结合 packages/kilo-jetbrains 下的真实源码与测试完整拆解这次图标一致性 头部布局收敛的治理方案如何统一图标来源、修复推理头部图标、归一化折叠箭头、并重构会话头部展开/收起详情的交互位置。读完本文你将掌握 Kilo JetBrains 会话 UI 的图标体系结构、折叠卡片基类的实现机制以及一次完整 UI 打磨任务从 Findings 到 Tests 再到 Verification 的落地流程。一、本次治理的目标四件事计划文档开篇即明确了本次 JetBrains Session UI 打磨的四个目标全部聚焦于视觉一致性与误操作防护两个体验维度统一会话视图图标让 JetBrains 会话视图使用与 Kilo/VS Code 对齐的会话图标避免同一语义在不同端出现不同图形修复推理头部图标Reasoning推理视图当前使用了不恰当的图标需替换为与共享 UI 一致的大脑图标归一化折叠/展开箭头会话各卡片部分session part折叠/展开时避免在两种尺寸不同的字形之间跳动迁移详情开关位置将会话详情的显示/隐藏开关从压缩按钮旁边移走放到会话标题之前降低两个相邻按钮被误触的概率。这四个目标都落在 packages/kilo-jetbrains 包内不涉及上游 opencode 共享代码属于纯 JetBrains 端的 UI 打磨。二、现状梳理Findings图标体系的集中点与问题根因计划文档通过一次源码审计定位了所有相关代码的枢纽与三个具体问题这些结论在 packages/kilo-jetbrains 当前源码中均可以逐一印证。2.1 会话视图图标的集中入口会话视图图标被集中定义在 SessionViewIcons.kt并通过IconLoader.getIcon(/icons/views/$name.svg, ...)从 frontend/src/main/resources/icons/views/ 目录加载 SVG 资源。从当前源码可以看到该对象同时暴露了brain大脑、checklist清单、console控制台、warning警告等语义图标两个方向性箭头chevronDown下箭头与chevronRight右箭头以及两个别名chevronCollapsed chevronRight、chevronExpanded chevronDown这正是折叠状态箭头切换的实现点。而资源目录中每个图标都配有_dark深色变体如 brain.svg 与brain_dark.svg这是 JetBrains 插件图标主题化的标准做法。2.2 共享图标源的对照packages/ui 的 icon.tsx计划明确将 packages/ui/src/components/icon.tsx 视为 Kilo Web / 会话字形的上游来源。审计结论是JetBrains 的viewsSVG 已经镜像了共享 VS Code/UI 图标路径中已审计的名称包括brain、chevron-down、chevron-right、checklist、console、warning等。在 icon.tsx 中可以看到这些条目确实存在例如brain一个多段 path 组成的大脑轮廓chevron-downM6.6665 8.33325L9.99984 11.6666L13.3332 8.33325下箭头折线chevron-rightM8 15L13 10L8 5右箭头折线checklist、console、warning等均有对应 path 定义。需要注意一个关键差异共享 UI 的图标使用strokecurrentColor让颜色跟随上下文而 JetBrains 端的 SVG不允许使用currentColor必须使用字面色板literal palette colors并配套深色变体。这正是计划中保留 JetBrains SVG 主题规则这条约束的来源。2.3 三个具体问题问题一推理视图图标错用。计划指出ReasoningView.kt当前渲染的是SessionViewIcons.eye眼睛图标而 VS Code/共享 UI 在推理/思考类表面统一使用brain图标且SessionViewIcons.brain已经存在、资源 brain.svg 也已就位——属于资源具备但接线错误。问题二折叠箭头尺寸跳变。标准可折叠会话卡片在 AbstractSessionPartView.kt 的syncArrow()方法中切换图标展开时用SessionViewIcons.chevronExpanded即 chevronDown折叠时用SessionViewIcons.chevronCollapsed即 chevronRight。问题是chevron-down与chevron-right两个 SVG 路径的视觉范围visual extents不同折叠/展开切换时箭头图形会产生肉眼可见的跳动。问题三头部详情开关与压缩按钮相邻。会话头部 SessionHeaderPanel.kt 将详情显示/隐藏开关放在右侧控制区、紧挨压缩compact按钮。当前源码中右侧是一个水平 Stackcost价格→context上下文→compact压缩按钮两个收起类操作挤在一起用户容易误触。三、实施步骤 1让图标来源与共享 UI 保持对齐计划的第一步不是盲目改图而是先确立单一事实来源原则以 icon.tsx 为 Kilo Web / 会话字形的形状来源后续新增或修改图标时以它为基准逐项复核 SessionViewIcons.kt 的条目与 JetBrains 资源是否一一对应只有当某个会话视图用到了 Kilo 图标、但 frontend/src/main/resources/icons/views/ 目录下缺失该资源时才新增或更新 SVG严格遵守 JetBrains SVG 主题化规则不使用currentColor新增或修改资源时必须同时提供字面色板颜色与深色变体*_dark.svg。这一步本质上是建立校验-补齐的闭环能复用的复用缺资源的才补避免重复造图标造成两套字形漂移。四、实施步骤 2修复推理头部图标这是最小改动的一步计划要求在ReasoningView.kt中把推理头部的字形从SessionViewIcons.eye改为SessionViewIcons.brain在ReasoningViewTest.kt中增加或更新测试通过遍历渲染出的 Swing label 树断言推理图标是SessionViewIcons.brain。从当前仓库源码看这一步已经落地ReasoningView.kt中构建头部的reasoningParts()已经使用JBLabel(SessionViewIcons.brain)作为 leading 图标且 ReasoningViewTest.kt 中已有test reasoning header uses brain icon测试它通过递归collect遍历组件树收集所有JLabel的 icon断言集合包含SessionViewIcons.brain且不包含SessionViewIcons.eye。这说明计划中的图标替换 组件树级断言模式已被测试体系采纳可以作为后续类似改动的范本。五、实施步骤 3归一化折叠/展开箭头这一步解决尺寸跳变问题是本次治理中机制性最强的一环计划给出了明确的技术路线停止使用chevronRight/chevronDown混合对来表现折叠/展开两种状态两种状态统一使用同一个基础 Kilo chevron 字形即会话头部当前使用的自定义 chevron/icons/chevron-down.svg对应SessionViewIcons.chevronDown另一个状态改为共享的旋转图标rotated icon而不是切换到尺寸不同的右向资源倾向于抽取一个小的可复用辅助方法或集中式图标字段而不是把头部专属 UI 引入会话视图同步更新 AbstractSessionPartView.kt 和 QuestionResultView.kt让它们都使用归一化后的 chevron 对。5.1 基类中的切换点折叠箭头的切换逻辑集中在AbstractSessionPartView.kt的syncArrow()private fun syncArrow(): Boolean { val icon if (isExpanded()) SessionViewIcons.chevronExpanded else SessionViewIcons.chevronCollapsed if (arrow.icon icon) return false arrow.icon icon return true }当前chevronExpanded/chevronCollapsed分别指向chevronDown/chevronRight两个不同资源。计划的核心改动就是把这对别名从两个不同 SVG收敛为同一 SVG 旋转。这样无论折叠还是展开箭头的像素尺寸完全一致视觉上只是方向旋转 90°彻底消除跳动。5.2 关于 QuestionView 的边界计划特别叮嘱QuestionView.kt中的导航 chevron 不要动——除非审计证明它们被用于折叠/展开。因为那是上一条/下一条的前后导航控件不是展开/收起控件。这体现了本次治理的克制原则只归一化折叠/展开语义的箭头不越界改动导航语义的图标。5.3 测试的印证AbstractSessionPartViewTest.kt 中已有test toggle uses right and down chevron icons测试它断言折叠态箭头为SessionViewIcons.chevronCollapsed即chevronRight、展开态为chevronExpanded即chevronDown并且断言两次切换后iconWidth/iconHeight相等。这条测试恰好暴露了当前实现的一个隐患尺寸相等的断言建立在测试假设上而实际两个 SVG 的视觉范围不同——计划要求的归一化正是要从资源层面根治它测试随后应改为断言两种状态使用同一基础字形旋转差异。六、实施步骤 4迁移并更换头部详情开关这是布局重构的一步目标是把显示/隐藏详情与压缩会话从视觉上彻底分开。6.1 图标方案在 SessionHeaderPanel.kt 中把头部自定义的详情 chevron 替换为平台AllIcons的箭头折叠态详情收起AllIcons.General.ArrowRight展开态详情展开AllIcons.General.ArrowDown采用平台内置图标的好处是与 IntelliJ 平台其余 UI 的箭头风格天然一致。从当前源码看SessionHeaderPanel已经大量使用AllIcons如todoArrow在 expandTodos 中切换AllIcons.General.ArrowDown/ArrowRight说明该组件与平台图标体系兼容良好。6.2 布局重构从右区相邻到WEST 前置计划要求把详情开关从右侧控制区移出放入头部行的BorderLayout.WEST并把整个头部重建为嵌套 BorderLayout 结构外层 border layoutwest详情开关按钮center内层 border layout内层 center会话标题内层 east水平 Stack/行依次放置 价格/上下文price/context与压缩按钮。同时从右侧行中移除详情开关让压缩在视觉上独立。当前源码中右侧 Stack 依次是cost价格→context上下文→compact压缩按钮详情开关若仍混在其中两个收起类操作确实容易误触迁移到 WEST 后标题左侧成为独立的详情开关专属区域。6.3 行为保持不变的硬约束计划明确要求现有的 tooltip / 无障碍accessibility字符串、展开状态持久化行为全部保持不变。这一点很重要——SessionHeaderPanel的展开状态通过PropertiesComponent持久化EXPANDED_KEY kilo.session.header.expandedsetExpand()同时维护 icon、toolTipText 与accessibleName重构时这些行为必须原样保留只动布局与图标。七、实施步骤 5测试覆盖矩阵计划为四处改动分别指定了对应的测试文件形成完整的回归防线改动点测试文件断言重点头部详情开关SessionHeaderPanelTest.kt折叠/展开态使用选定的AllIcons常量展开状态照旧持久化详情开关与压缩按钮在布局上相互独立parent/布局分离折叠卡片箭头AbstractSessionPartViewTest.kt可折叠部件在折叠/展开两种状态下保持相同图标尺寸不再使用错配的右/下箭头对提问结果视图QuestionResultViewTest.kt同上因其自带 chevron 实现推理头部图标ReasoningViewTest.kt推理头部使用brain图标现有test reasoning header uses brain icon已验证该断言模式其中详情开关与压缩按钮布局分离的断言对应SessionHeaderPanel暴露的expandButton()、compactButton()、rightPanel()等 internal 访问器——这些访问器正是为测试检查组件树而设计的测试可以通过比较两个按钮的 parent 是否不同来验证布局迁移是否生效。八、实施步骤 6验证命令计划给出了最小的验证集从 packages/kilo-jetbrains 目录执行./gradlew test --tests ai.kilocode.client.session.views.ReasoningViewTest \ --tests ai.kilocode.client.session.views.base.AbstractSessionPartViewTest \ --tests ai.kilocode.client.session.views.QuestionResultViewTest \ --tests ai.kilocode.client.session.ui.header.SessionHeaderPanelTest ./gradlew typecheck如果项目不接受这种过滤式--tests语法则回退为从packages/kilo-jetbrains/直接运行./gradlew test。值得说明的是这里的类全限定名与源码目录结构完全一致四个测试类分别对应session/views/、session/views/base/、session/ui/header/三个包路径实际执行时可直接照抄。九、注意事项与发布影响计划文档末尾记录了三点工程约束改动范围边界不涉及共享上游opencode文件所有变更都留在 packages/kilo-jetbrains 包内——这对合并、回滚和跨仓库协作都很友好changeset 评估由于这是面向用户的 JetBrains UI 打磨属于用户可见变更可能需要补充 changeset实施时应确认该私有 JetBrains 包现有的 changeset 策略主题化纪律凡是新增或修改的 SVG 资源都必须遵循无currentColor 字面色板 深色变体的规则这与共享 Web UI 中strokecurrentColor的写法是两套不同的主题机制不可混用。十、总结从计划到落地的可复用模式这次 JetBrains Session UI 治理虽然范围不大但方法论非常完整值得在同类 UI 打磨任务中复用先审计、后动手通过 Findings 精准定位图标集中点SessionViewIcons、共享字形源icon.tsx与三个具体病灶确立单一事实来源Web 端 icon.tsx 为字形基准JetBrains 端只做镜像与补齐杜绝双源漂移机制性修复而非打补丁折叠箭头问题用同一字形 旋转从根上消除尺寸跳变而不是继续维护两套不同尺寸的 SVG布局与行为解耦头部重构只动位置与图标tooltip、无障碍字符串与持久化行为保持不变测试与改动一一对应每个改动点都有专属测试文件与明确断言最后用最小化的./gradlew test --tests ...命令闭环验证。如果你正在维护 JetBrains 插件中某个多视图、多图标源的会话式 UI这份计划及其在 packages/kilo-jetbrains 中的落地实现就是一份可以直接借鉴的图标一致性 头部布局收敛实操模板。【免费下载链接】kilocodeKilo is the all-in-one agentic engineering platform. Build, ship, and iterate faster with the most popular open source coding agent.项目地址: https://gitcode.com/GitHub_Trending/ki/kilocode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考