feat(web-ui): file operation tool card expand and open-in-editor

src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss

@@ -8,6 +8,7 @@
   --tool-card-header-pad-y: 7px;
   --tool-card-header-pad-x: 0px;
   --tool-card-header-icon-rail: 24px;
+  --tool-card-header-icon-slot: calc(var(--tool-card-header-icon-rail) + 10px);
 }
 
 /* ========== Card wrapper ========== */
@@ -139,10 +140,10 @@
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
   flex-shrink: 0;
   align-self: stretch;
-  padding-right: 10px;
+  width: var(--tool-card-header-icon-slot);
   margin-right: 8px;
   box-sizing: border-box;
   min-height: 0;
@@ -299,7 +300,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  flex: 1;
+  flex: 1 1 auto;
   min-width: 0;
   font-size: 12px;
   font-weight: 500;
@@ -310,6 +311,14 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  > * {
+    min-width: 0;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
 }
 
 /* Right extra content */
@@ -318,6 +327,11 @@
   align-items: center;
   gap: 2px;
   flex-shrink: 0;
+  min-width: 0;
+
+  svg {
+    flex-shrink: 0;
+  }
 }
 
 /* ========== Expanded content area ========== */

src/web-ui/src/flow_chat/tool-cards/FileOperationToolCard.scss

@@ -70,11 +70,7 @@
     }
   }
 
-  /*
-   * Git 轨道在 ToolCardHeader 里位于 .tool-card-extra 内；默认 extra 高度跟子项走，轨道只有图标高，
-   * 竖线与悬停底无法贴齐头部上下内边距、也无法铺到右侧 padding。与头部行同高后再用负 inset 顶满。
-   */
-  .base-tool-card-header .tool-card-extra:has(.file-op-git-rail) {
+  .base-tool-card-header .tool-card-extra:has(.file-op-open-full-button) {
     align-self: stretch;
     display: flex;
     flex-direction: row;
@@ -85,6 +81,11 @@
 }
 
 .file-name {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-weight: 500;
   color: var(--color-text-primary);
 
@@ -130,16 +131,42 @@
   color: var(--color-text-muted);
 }
 
-.diff-preview-group {
-  display: flex;
+.file-op-diff-pill {
+  display: inline-flex;
   align-items: center;
-  gap: 3px;
+  gap: 4px;
   flex-shrink: 0;
+  margin-left: 2px;
+  padding: 2px 5px;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
   font-family: var(--tool-card-font-mono);
   font-size: 10px;
   font-weight: 600;
   color: var(--color-text-muted);
   line-height: 1;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+
+  &:hover:not(.file-op-diff-pill--disabled) {
+    background-color: var(--tool-card-bg-hover, var(--color-bg-hover, rgba(255, 255, 255, 0.09)));
+    color: var(--color-text-primary);
+  }
+
+  &--disabled {
+    cursor: default;
+    opacity: 0.45;
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
+    flex-shrink: 0;
+    stroke: currentColor;
+  }
 
   .additions {
     color: var(--color-success);
@@ -150,18 +177,24 @@
   }
 }
 
-/* Right rail for “查看 Git diff” — aligned with Task tool header rail (TaskToolDisplay). */
-.file-op-git-rail {
+.file-op-open-full-button {
   position: relative;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
   align-self: stretch;
   flex-shrink: 0;
-  min-width: 32px;
-  padding: 0 0 0 8px;
+  width: 40px;
+  padding: 0;
   margin-left: 4px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  appearance: none;
+  font: inherit;
+  transition: color 0.15s ease;
 
   &::before {
     content: '';
@@ -177,11 +210,11 @@
     z-index: 0;
   }
 
-  &:hover:not(.file-op-git-rail--disabled)::before {
+  &:hover::before {
     background-color: var(--tool-card-bg-hover, var(--color-bg-hover, rgba(255, 255, 255, 0.09)));
   }
 
-  &:hover:not(.file-op-git-rail--disabled) .file-op-git-rail__visual {
+  &:hover {
     color: var(--color-text-primary);
   }
 
@@ -197,46 +230,14 @@
     z-index: 1;
   }
 
-  &--disabled {
-    opacity: 0.45;
-
-    .file-op-git-rail__visual {
-      color: var(--color-text-muted);
-    }
-  }
-}
-
-.file-op-git-rail__hit {
-  position: absolute;
-  left: 0;
-  top: calc(-1 * var(--tool-card-header-pad-y, 10px));
-  right: calc(-1 * var(--tool-card-header-pad-x, 10px));
-  bottom: calc(-1 * var(--tool-card-header-pad-y, 10px));
-  z-index: 2;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  appearance: none;
-  font: inherit;
-
   &:focus-visible {
     outline: 2px solid var(--color-accent-500, #60a5fa);
     outline-offset: -2px;
   }
-}
-
-.file-op-git-rail__visual {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-muted);
-  pointer-events: none;
 
   svg {
+    position: relative;
+    z-index: 1;
     width: 16px;
     height: 16px;
     flex-shrink: 0;