Response preview not requiring IU (#457)

* Optimize tab group restoration by comparing current and saved states before closing editors_

* Disable elapsed time display in checkpoint creation progress indicator

* Implement a failed application state for files and display it in the response preview UI when patches cannot be automatically applied

* Add the ability to preview AI-generated code in a temporary file when changes fail to apply

* Implement real-time per-file application progress and status reporting within the response preview interface

* Introduce inline-file items to support parsing and rendering unmapped code blocks in response previews

* Improve file block parsing logic to use append mode only when git-style conflict markers are detected during file path reuse

* Update test case to handle merge conflicts with inline files by renaming and correcting file references

* Add intelligent update success state and improve file preview error/warning UI with fix actions

* Refactor response preview UI to improve error handling and action visibility with enhanced status indicators and interactive controls

* Implement functionality to batch fix all files that failed to apply in the response preview using intelligent updates

Author: robertpiosik

packages/shared/src/types/file-in-preview.ts

@@ -9,11 +9,27 @@ export type FileInPreview = {
   diff_application_method?: 'recount' | 'search_and_replace'
   content?: string
   proposed_content?: string
+  apply_failed?: boolean
+  ai_content?: string
+  is_applying?: boolean
+  apply_status?: 'waiting' | 'thinking' | 'receiving' | 'done' | 'retrying'
+  apply_progress?: number
+  apply_tokens_per_second?: number
+  fixed_with_intelligent_update?: boolean
 }
 
 export type TextContentInPreview = {
   type: 'text'
   content: string
 }
 
-export type ItemInPreview = FileInPreview | TextContentInPreview
+export type InlineFileInPreview = {
+  type: 'inline-file'
+  content: string
+  language?: string
+}
+
+export type ItemInPreview =
+  | FileInPreview
+  | TextContentInPreview
+  | InlineFileInPreview

packages/ui/.storybook/preview.ts

@@ -1,7 +1,7 @@
 import '@vscode/codicons/dist/codicon.css'
 import 'simplebar-react/dist/simplebar.min.css'
 import '../src/styles/global.scss'
-import './variables.css'
+import './styles.css'
 
 export const parameters = {
   layout: 'fullscreen'

packages/ui/.storybook/styles.css

@@ -6,17 +6,54 @@
 }
 
 .info {
-  padding: 4px 7px;
+  display: flex;
+  justify-content: space-between;
+  gap: 4px;
   color: var(--vscode-descriptionForeground);
   font-size: 12px;
   border: 1px solid var(--vscode-sideBarSectionHeader-border);
-  opacity: var(--dimmed-opacity);
   margin: 0 12px;
   border-radius: 8px;
+  overflow: hidden;
+
+  &--error {
+    border-color: var(--vscode-errorForeground);
+    color: var(--vscode-errorForeground);
+  }
 
-  > span {
-    vertical-align: middle;
+  &--warning {
+    border-color: var(--vscode-inputValidation-warningBorder);
+    color: var(--vscode-inputValidation-warningBorder);
+  }
+
+  &__content {
+    gap: 6px;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 4px 0 4px 7px;
+
+    > span:first-child {
+      font-size: 12px;
+      transform: translateY(2px);
+      margin-right: 4px;
+    }
+  }
+
+  &__action {
+    display: flex;
     font-size: 12px;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    white-space: nowrap;
+    color: var(--vscode-textLink-foreground);
+    padding: 0 7px 0 4px;
+
+    &:hover {
+      background-color: var(--vscode-list-hoverBackground);
+    }
   }
 }
 
@@ -54,78 +91,161 @@
     margin-bottom: 0;
   }
 
-  &__file {
+  &__item {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    border: 1px solid var(--cwc-border-color-dimmed);
-    padding: 0 8px;
-    margin: 0 12px;
-    height: 34px;
-    border-radius: 8px;
-
-    &:hover {
-      background-color: var(--vscode-list-hoverBackground);
-      border-color: var(--cwc-border-color);
-
-      .list__file__actions {
-        display: flex;
-      }
-    }
+    flex-direction: column;
 
-    &--selected {
-      background-color: var(--vscode-list-inactiveSelectionBackground);
+    &__progress {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      color: var(--vscode-descriptionForeground);
+      margin-right: 4px;
     }
 
-    &__left {
+    &__file {
       display: flex;
       align-items: center;
+      justify-content: space-between;
       gap: 8px;
-      overflow: hidden;
+      border: 1px solid var(--cwc-border-color-dimmed);
+      padding: 0 8px;
+      margin: 0 12px;
+      height: 34px;
+      border-radius: 8px;
+
+      &:hover {
+        background-color: var(--vscode-list-hoverBackground);
+        border-color: var(--cwc-border-color);
+
+        .list__item__file__actions {
+          display: flex;
+        }
+      }
+
+      &--selected {
+        background-color: var(--vscode-list-inactiveSelectionBackground);
+      }
+
+      &--error {
+        border-color: var(--vscode-errorForeground) !important;
+      }
+
+      &--warning {
+        border-color: var(--vscode-inputValidation-warningBorder) !important;
+      }
 
-      &__label {
-        flex: 1;
-        text-overflow: ellipsis;
+      &__left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
         overflow: hidden;
-        white-space: nowrap;
 
-        > span:last-child {
-          opacity: 0.7;
-          margin-left: 0.5em;
-          font-size: 0.9em;
+        &__label {
+          flex: 1;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+
+          > span:last-child {
+            opacity: 0.7;
+            margin-left: 0.5em;
+            font-size: 0.9em;
+          }
+
+          &--new {
+            color: var(--vscode-gitDecoration-untrackedResourceForeground);
+          }
+
+          &--deleted {
+            text-decoration: line-through;
+            color: var(--vscode-gitDecoration-deletedResourceForeground);
+          }
         }
+      }
 
-        &--new {
-          color: var(--vscode-gitDecoration-untrackedResourceForeground);
-        }
+      &__right {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
 
-        &--deleted {
-          text-decoration: line-through;
+      &__actions {
+        display: none;
+        align-items: center;
+      }
+
+      &__line-numbers {
+        display: flex;
+        gap: 3px;
+
+        &__added {
+          color: var(--vscode-gitDecoration-addedResourceForeground);
+        }
+        &__removed {
           color: var(--vscode-gitDecoration-deletedResourceForeground);
         }
       }
     }
+  }
 
-    &__right {
-      display: flex;
-      align-items: center;
-      gap: 8px;
+  &__message {
+    margin: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    gap: 4px;
+    border: 1px solid var(--cwc-border-color-dimmed);
+    border-top: none;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+    overflow: hidden;
+
+    &--error {
+      color: var(--vscode-errorForeground);
+      border-color: var(--vscode-errorForeground);
     }
 
-    &__actions {
-      display: none;
+    &--warning {
+      color: var(--vscode-inputValidation-warningBorder);
+      border-color: var(--vscode-inputValidation-warningBorder);
     }
 
-    &__line-numbers {
-      display: flex;
-      gap: 0.3em;
+    &--success {
+      color: var(--vscode-notebookStatusSuccessIcon-foreground);
+    }
 
-      &__added {
-        color: var(--vscode-gitDecoration-addedResourceForeground);
+    &__content {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 11px;
+      padding: 2px 0 2px 6px;
+
+      > span:first-child {
+        font-size: 12px !important;
+        margin-right: 4px;
+        transform: translateY(2px);
       }
-      &__removed {
-        color: var(--vscode-gitDecoration-deletedResourceForeground);
+    }
+
+    &__actions {
+      display: flex;
+
+      &__item {
+        display: flex;
+        font-size: 12px;
+        align-items: center;
+        gap: 4px;
+        cursor: pointer;
+        white-space: nowrap;
+        color: var(--vscode-textLink-foreground);
+        padding: 0 6px 0 3px;
+
+        &:hover {
+          background-color: var(--vscode-list-hoverBackground);
+        }
       }
     }
   }