revert(app): "STUPID SEXY TIMELINE (#16420)" (#16745)

packages/ui/src/components/message-part.css

@@ -1,20 +1,10 @@
 [data-component="assistant-message"] {
   content-visibility: auto;
   width: 100%;
-}
-
-[data-component="assistant-parts"] {
-  width: 100%;
-  min-width: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 0;
-}
-
-[data-component="assistant-part-item"] {
-  width: 100%;
-  min-width: 0;
+  gap: 12px;
 }
 
 [data-component="user-message"] {
@@ -37,14 +27,6 @@
     color: var(--text-weak);
   }
 
-  [data-slot="user-message-inner"] {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    width: 100%;
-    gap: 4px;
-  }
   [data-slot="user-message-attachments"] {
     display: flex;
     flex-wrap: wrap;
@@ -53,7 +35,6 @@
     width: fit-content;
     max-width: min(82%, 64ch);
     margin-left: auto;
-    margin-bottom: 4px;
   }
 
   [data-slot="user-message-attachment"] {
@@ -153,7 +134,7 @@
 
   [data-slot="user-message-copy-wrapper"] {
     min-height: 24px;
-    margin-top: 0;
+    margin-top: 4px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -163,6 +144,7 @@
     pointer-events: none;
     transition: opacity 0.15s ease;
     will-change: opacity;
+
     [data-component="tooltip-trigger"] {
       display: inline-flex;
       width: fit-content;
@@ -205,21 +187,56 @@
     opacity: 1;
     pointer-events: auto;
   }
+
+  .text-text-strong {
+    color: var(--text-strong);
+  }
+
+  .font-medium {
+    font-weight: var(--font-weight-medium);
+  }
 }
 
 [data-component="text-part"] {
   width: 100%;
-  margin-top: 0;
-  padding-block: 4px;
-  position: relative;
+  margin-top: 24px;
 
   [data-slot="text-part-body"] {
     margin-top: 0;
   }
 
-  [data-slot="text-part-turn-summary"] {
+  [data-slot="text-part-copy-wrapper"] {
+    min-height: 24px;
+    margin-top: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    will-change: opacity;
+
+    [data-component="tooltip-trigger"] {
+      display: inline-flex;
+      width: fit-content;
+    }
+  }
+
+  [data-slot="text-part-meta"] {
+    user-select: none;
+  }
+
+  [data-slot="text-part-copy-wrapper"][data-interrupted] {
     width: 100%;
-    min-width: 0;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+
+  &:hover [data-slot="text-part-copy-wrapper"],
+  &:focus-within [data-slot="text-part-copy-wrapper"] {
+    opacity: 1;
+    pointer-events: auto;
   }
 
   [data-component="markdown"] {
@@ -228,10 +245,6 @@
   }
 }
 
-[data-component="assistant-part-item"][data-kind="text"][data-last="true"] [data-component="text-part"] {
-  padding-bottom: 0;
-}
-
 [data-component="compaction-part"] {
   width: 100%;
   display: flex;
@@ -265,6 +278,7 @@
   line-height: var(--line-height-normal);
 
   [data-component="markdown"] {
+    margin-top: 24px;
     font-style: normal;
     font-size: inherit;
     color: var(--text-weak);
@@ -358,16 +372,13 @@
     height: auto;
     max-height: 240px;
     overflow-y: auto;
-    overscroll-behavior: contain;
     scrollbar-width: none;
     -ms-overflow-style: none;
-    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 6px, black calc(100% - 6px), transparent 100%);
-    mask-image: linear-gradient(to bottom, transparent 0, black 6px, black calc(100% - 6px), transparent 100%);
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
+
     &::-webkit-scrollbar {
       display: none;
     }
+
     [data-component="markdown"] {
       overflow: visible;
     }
@@ -437,7 +448,7 @@
 [data-component="write-trigger"] {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   gap: 8px;
   width: 100%;
 
@@ -450,8 +461,7 @@
   }
 
   [data-slot="message-part-title"] {
-    flex-shrink: 1;
-    min-width: 0;
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     gap: 8px;
@@ -483,45 +493,40 @@
   [data-slot="message-part-title-text"] {
     text-transform: capitalize;
     color: var(--text-strong);
-    flex-shrink: 0;
-  }
-
-  [data-slot="message-part-meta-line"],
-  .message-part-meta-line {
-    min-width: 0;
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-weight: var(--font-weight-regular);
-
-    [data-component="diff-changes"] {
-      flex-shrink: 0;
-      gap: 6px;
-    }
-  }
-
-  .message-part-meta-line.soft {
-    [data-slot="message-part-title-filename"] {
-      color: var(--text-base);
-    }
   }
 
   [data-slot="message-part-title-filename"] {
     /* No text-transform - preserve original filename casing */
-    color: var(--text-strong);
-    flex-shrink: 0;
+    font-weight: var(--font-weight-regular);
   }
 
-  [data-slot="message-part-directory-inline"] {
-    color: var(--text-weak);
+  [data-slot="message-part-path"] {
+    display: flex;
+    flex-grow: 1;
     min-width: 0;
-    max-width: min(48vw, 36ch);
+    font-weight: var(--font-weight-regular);
+  }
+
+  [data-slot="message-part-directory"] {
+    color: var(--text-weak);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     direction: rtl;
     text-align: left;
   }
+
+  [data-slot="message-part-filename"] {
+    color: var(--text-strong);
+    flex-shrink: 0;
+  }
+
+  [data-slot="message-part-actions"] {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    justify-content: flex-end;
+  }
 }
 
 [data-component="edit-content"] {
@@ -612,17 +617,6 @@
   }
 }
 
-[data-slot="webfetch-meta"] {
-  min-width: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-
-  [data-component="tool-action"] {
-    flex-shrink: 0;
-  }
-}
-
 [data-component="todos"] {
   padding: 10px 0 24px 0;
   display: flex;
@@ -645,6 +639,7 @@
 }
 
 [data-component="context-tool-group-trigger"] {
+  width: 100%;
   min-height: 24px;
   display: flex;
   align-items: center;
@@ -652,352 +647,28 @@
   gap: 0px;
   cursor: pointer;
 
-  &[data-pending] {
-    cursor: default;
-  }
-
   [data-slot="context-tool-group-title"] {
     flex-shrink: 1;
     min-width: 0;
   }
-}
 
-/* Prevent the trigger content from stretching full-width so the arrow sits after the text */
-[data-slot="basic-tool-tool-trigger-content"]:has([data-component="context-tool-group-trigger"]) {
-  width: auto;
-  flex: 0 1 auto;
-
-  [data-slot="basic-tool-tool-info"] {
-    flex: 0 1 auto;
-  }
-}
-
-[data-component="context-tool-step"] {
-  width: 100%;
-  min-width: 0;
-  padding-left: 12px;
-}
-
-[data-component="context-tool-expanded-list"] {
-  display: flex;
-  flex-direction: column;
-  padding: 4px 0 4px 12px;
-  max-height: 200px;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-[data-component="context-tool-expanded-row"] {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  height: 22px;
-  flex-shrink: 0;
-  white-space: nowrap;
-  overflow: hidden;
-
-  [data-slot="context-tool-expanded-action"] {
-    flex-shrink: 0;
-    font-size: var(--font-size-base);
-    font-weight: 500;
-    color: var(--text-base);
-  }
-
-  [data-slot="context-tool-expanded-detail"] {
-    flex-shrink: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: var(--font-size-base);
-    color: var(--text-base);
-    opacity: 0.75;
-  }
-}
-
-[data-component="context-tool-rolling-row"] {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  padding-left: 12px;
-
-  [data-slot="context-tool-rolling-action"] {
-    flex-shrink: 0;
-    font-size: var(--font-size-base);
-    font-weight: 500;
-    color: var(--text-base);
-  }
-
-  [data-slot="context-tool-rolling-detail"] {
-    flex-shrink: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: var(--font-size-base);
-    color: var(--text-weak);
-  }
-}
-
-[data-component="shell-rolling-results"] {
-  width: 100%;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-
-  [data-slot="shell-rolling-header-clip"] {
-    &:hover [data-slot="shell-rolling-actions"] {
-      opacity: 1;
-    }
-
-    &[data-clickable="true"] {
-      cursor: pointer;
-    }
-  }
-
-  [data-slot="shell-rolling-header"] {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    min-width: 0;
-    max-width: 100%;
-    height: 37px;
-    box-sizing: border-box;
-  }
-
-  [data-slot="shell-rolling-title"] {
-    flex-shrink: 0;
-    font-family: var(--font-family-sans);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-    color: var(--text-strong);
-  }
-
-  [data-slot="shell-rolling-subtitle"] {
-    flex: 0 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-family: var(--font-family-sans);
-    font-size: 14px;
-    font-weight: var(--font-weight-normal);
-    line-height: var(--line-height-large);
-    color: var(--text-weak);
-  }
-
-  [data-slot="shell-rolling-actions"] {
-    flex-shrink: 0;
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-    opacity: 0;
-    transition: opacity 0.15s ease;
-  }
-
-  .shell-rolling-copy {
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-    background: transparent !important;
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-weaker);
-    }
-
-    &:hover:not(:disabled) {
-      background: color-mix(in srgb, var(--text-base) 8%, transparent) !important;
-      box-shadow: 0 0 0 1px color-mix(in srgb, var(--icon-weaker) 40%, transparent) !important;
-      border-radius: var(--radius-sm);
-
-      [data-slot="icon-svg"] {
-        color: var(--icon-base);
-      }
-    }
-  }
-
-  [data-slot="shell-rolling-arrow"] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--icon-weaker);
-    transform: rotate(-90deg);
-    transition: transform 0.15s ease;
-  }
-
-  [data-slot="shell-rolling-arrow"][data-open="true"] {
-    transform: rotate(0deg);
-  }
-}
-
-[data-component="shell-rolling-output"] {
-  width: 100%;
-  min-width: 0;
-}
-
-[data-slot="shell-rolling-preview"] {
-  width: 100%;
-  min-width: 0;
-}
-
-[data-component="shell-expanded-output"] {
-  width: 100%;
-  max-width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-[data-component="shell-expanded-shell"] {
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  border: 1px solid var(--border-weak-base);
-  border-radius: 6px;
-  background: transparent;
-  overflow: hidden;
-}
-
-[data-slot="shell-expanded-body"] {
-  position: relative;
-  width: 100%;
-  min-width: 0;
-}
-
-[data-slot="shell-expanded-top"] {
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  padding: 9px 44px 9px 16px;
-  box-sizing: border-box;
-}
-
-[data-slot="shell-expanded-command"] {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  width: 100%;
-  min-width: 0;
-  font-family: var(--font-family-mono);
-  font-feature-settings: var(--font-family-mono--font-feature-settings);
-  font-size: 13px;
-  line-height: 1.45;
-}
-
-[data-slot="shell-expanded-prompt"] {
-  flex-shrink: 0;
-  color: var(--text-weaker);
-}
-
-[data-slot="shell-expanded-input"] {
-  min-width: 0;
-  color: var(--text-strong);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-[data-slot="shell-expanded-actions"] {
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  z-index: 1;
-  transform: translateY(-50%);
-}
-
-.shell-expanded-copy {
-  border: none !important;
-  outline: none !important;
-  box-shadow: none !important;
-  background: transparent !important;
-
-  [data-slot="icon-svg"] {
+  [data-slot="collapsible-arrow"] {
     color: var(--icon-weaker);
   }
+}
 
-  &:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--text-base) 8%, transparent) !important;
-    box-shadow: 0 0 0 1px color-mix(in srgb, var(--icon-weaker) 40%, transparent) !important;
-    border-radius: var(--radius-sm);
+[data-component="context-tool-group-list"] {
+  padding: 6px 0 4px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 
-    [data-slot="icon-svg"] {
-      color: var(--icon-base);
-    }
+  [data-slot="context-tool-group-item"] {
+    min-width: 0;
+    padding: 6px 0;
   }
 }
 
-[data-slot="shell-expanded-divider"] {
-  width: 100%;
-  height: 1px;
-  background: var(--border-weak-base);
-}
-
-[data-slot="shell-expanded-pre"] {
-  margin: 0;
-  padding: 12px 16px;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-
-  code {
-    font-family: var(--font-family-mono);
-    font-feature-settings: var(--font-family-mono--font-feature-settings);
-    font-size: 13px;
-    line-height: 1.45;
-    color: var(--text-base);
-  }
-}
-
-[data-component="shell-rolling-command"],
-[data-component="shell-rolling-row"] {
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  min-width: 0;
-  overflow: hidden;
-  white-space: pre;
-  padding-left: 12px;
-}
-
-[data-slot="shell-rolling-text"] {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-family: var(--font-family-mono);
-  font-feature-settings: var(--font-family-mono--font-feature-settings);
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-large);
-}
-
-[data-component="shell-rolling-command"] [data-slot="shell-rolling-text"] {
-  color: var(--text-base);
-}
-
-[data-component="shell-rolling-command"] [data-slot="shell-rolling-prompt"] {
-  color: var(--text-weaker);
-}
-
-[data-component="shell-rolling-row"] [data-slot="shell-rolling-text"] {
-  color: var(--text-weak);
-}
-
 [data-component="diagnostics"] {
   display: flex;
   flex-direction: column;
@@ -1058,30 +729,6 @@
   width: 100%;
 }
 
-[data-slot="assistant-part-grow"] {
-  width: 100%;
-  min-width: 0;
-  overflow: visible;
-}
-
-[data-component="tool-part-wrapper"][data-tool="bash"] {
-  [data-component="tool-trigger"] {
-    width: auto;
-    max-width: 100%;
-  }
-
-  [data-slot="basic-tool-tool-info-main"] {
-    align-items: center;
-  }
-
-  [data-slot="basic-tool-tool-title"],
-  [data-slot="basic-tool-tool-subtitle"] {
-    display: inline-flex;
-    align-items: center;
-    line-height: var(--line-height-large);
-  }
-}
-
 [data-component="dock-prompt"][data-kind="permission"] {
   position: relative;
   display: flex;
@@ -1540,7 +1187,8 @@
     position: sticky;
     top: var(--sticky-accordion-top, 0px);
     z-index: 20;
-    height: 37px;
+    height: 40px;
+    padding-bottom: 8px;
     background-color: var(--background-stronger);
   }
 }
@@ -1551,12 +1199,11 @@
   }
 
   [data-slot="apply-patch-trigger-content"] {
-    display: inline-flex;
+    display: flex;
     align-items: center;
-    justify-content: flex-start;
-    max-width: 100%;
-    min-width: 0;
-    gap: 8px;
+    justify-content: space-between;
+    width: 100%;
+    gap: 20px;
   }
 
   [data-slot="apply-patch-file-info"] {
@@ -1590,9 +1237,9 @@
   [data-slot="apply-patch-trigger-actions"] {
     flex-shrink: 0;
     display: flex;
-    gap: 8px;
+    gap: 16px;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: flex-end;
   }
 
   [data-slot="apply-patch-change"] {
@@ -1632,11 +1279,10 @@
 }
 
 [data-component="tool-loaded-file"] {
-  min-width: 0;
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 4px 0 4px 12px;
+  padding: 4px 0 4px 28px;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-regular);
@@ -1647,11 +1293,4 @@
     flex-shrink: 0;
     color: var(--icon-weak);
   }
-
-  span {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
 }