Simplify intelligent update modal UI and increase API chain resolution delay

Author: robertpiosik

apps/editor/src/commands/apply-chat-response-command/handlers/active-editor-intelligent-update-handler.ts

@@ -92,12 +92,8 @@ export const handle_active_editor_intelligent_update = async (params: {
     params.panel_provider.api_call_cancel_token_source = cancel_token_source
     params.panel_provider.send_message({
       command: 'SHOW_ACTIVE_EDITOR_INTELLIGENT_UPDATE_MODAL',
-      title: 'Called Intelligent Update API tool',
-      file: {
-        file_path: file_item.file_path,
-        workspace_name: file_item.workspace_name,
-        status: 'thinking'
-      }
+      title: 'Updating file...',
+      status: 'thinking'
     })
   }
 
@@ -131,40 +127,29 @@ export const handle_active_editor_intelligent_update = async (params: {
 
           params.panel_provider.send_message({
             command: 'SHOW_ACTIVE_EDITOR_INTELLIGENT_UPDATE_MODAL',
-            title: 'Called Intelligent Update API tool',
-            file: {
-              file_path: file_item.file_path,
-              workspace_name: file_item.workspace_name,
-              status: 'receiving',
-              tokens_per_second,
-              progress
-            }
+            title: 'Updating file...',
+            status: 'receiving',
+            tokens_per_second,
+            progress,
+            total_tokens
           })
         }
       },
       on_retry_attempt: () => {
         if (params.panel_provider) {
           params.panel_provider.send_message({
             command: 'SHOW_ACTIVE_EDITOR_INTELLIGENT_UPDATE_MODAL',
-            title: 'Called Intelligent Update API tool',
-            file: {
-              file_path: file_item.file_path,
-              workspace_name: file_item.workspace_name,
-              status: 'thinking'
-            }
+            title: 'Updating file...',
+            status: 'thinking'
           })
         }
       },
       on_retry: () => {
         if (params.panel_provider) {
           params.panel_provider.send_message({
             command: 'SHOW_ACTIVE_EDITOR_INTELLIGENT_UPDATE_MODAL',
-            title: 'Called Intelligent Update API tool',
-            file: {
-              file_path: file_item.file_path,
-              workspace_name: file_item.workspace_name,
-              status: 'retrying'
-            }
+            title: 'Updating file...',
+            status: 'retrying'
           })
         }
       }

apps/editor/src/services/api-manager.ts

@@ -4,7 +4,7 @@ import axios, { CancelTokenSource } from 'axios'
 import { randomUUID, createHash } from 'crypto'
 import { Logger } from '@shared/utils/logger'
 
-const CHAIN_RESOLUTION_DELAY_MS = 2000
+const CHAIN_RESOLUTION_DELAY_MS = 3000
 
 export class ApiManager {
   private cancel_token_sources: Map<string, CancelTokenSource> = new Map()

apps/editor/src/views/panel/frontend/Panel.tsx

@@ -665,7 +665,12 @@ export const Panel = () => {
           <div className={styles.slot}>
             <UiActiveEditorIntelligentUpdateModal
               title={active_editor_intelligent_update_state.title}
-              file={active_editor_intelligent_update_state.file}
+              status={active_editor_intelligent_update_state.status}
+              progress={active_editor_intelligent_update_state.progress}
+              tokens_per_second={
+                active_editor_intelligent_update_state.tokens_per_second
+              }
+              total_tokens={active_editor_intelligent_update_state.total_tokens}
               on_cancel={() => {
                 post_message(vscode, { command: 'CANCEL_API_REQUEST' })
               }}

apps/editor/src/views/panel/frontend/hooks/use-panel.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { Preset } from '@shared/types/preset'
 import {
   BackendMessage,
-  FileProgress,
+  FileProgressStatus,
   FrontendMessage,
   SelectionState
 } from '../../types/messages'
@@ -135,7 +135,13 @@ export const use_panel = (vscode: any) => {
   const [
     active_editor_intelligent_update_state,
     set_active_editor_intelligent_update_state
-  ] = useState<{ title: string; file?: FileProgress }>()
+  ] = useState<{
+    title: string
+    status?: FileProgressStatus
+    progress?: number
+    tokens_per_second?: number
+    total_tokens?: number
+  }>()
 
   const handle_instructions_change = (
     value: string,
@@ -386,7 +392,10 @@ export const use_panel = (vscode: any) => {
       ) {
         set_active_editor_intelligent_update_state({
           title: message.title,
-          file: message.file
+          status: message.status,
+          progress: message.progress,
+          tokens_per_second: message.tokens_per_second,
+          total_tokens: message.total_tokens
         })
       } else if (
         message.command == 'HIDE_ACTIVE_EDITOR_INTELLIGENT_UPDATE_MODAL'

apps/editor/src/views/panel/types/messages.ts

@@ -51,14 +51,6 @@ export type FileProgressStatus =
   | 'done'
   | 'retrying'
 
-export type FileProgress = {
-  file_path: string
-  workspace_name?: string
-  status: FileProgressStatus
-  progress?: number
-  tokens_per_second?: number
-}
-
 // === FROM FRONTEND TO BACKEND ===
 export interface GetInstructionsMessage extends BaseMessage {
   command: 'GET_INSTRUCTIONS'
@@ -793,7 +785,10 @@ export interface HideApiManagerProgressMessage extends BaseMessage {
 export interface ShowActiveEditorIntelligentUpdateModalMessage extends BaseMessage {
   command: 'SHOW_ACTIVE_EDITOR_INTELLIGENT_UPDATE_MODAL'
   title: string
-  file?: FileProgress
+  status?: FileProgressStatus
+  progress?: number
+  tokens_per_second?: number
+  total_tokens?: number
 }
 
 export interface HideActiveEditorIntelligentUpdateModalMessage extends BaseMessage {

packages/ui/src/components/editor/panel/Scrollable/Scrollable.tsx

@@ -18,7 +18,6 @@ type Props = {
   on_scroll?: (top: number) => void
   on_scrolled_change?: (is_scrolled: boolean) => void
   scroll_trigger?: number
-  className?: string
 }
 
 export const Scrollable = forwardRef<any, Props>((props, ref) => {
@@ -86,7 +85,7 @@ export const Scrollable = forwardRef<any, Props>((props, ref) => {
 
   return (
     <div
-      className={cn(styles.scrollable, props.className, {
+      className={cn(styles.scrollable, {
         [styles['scrollable--shadow']]: has_top_shadow
       })}
     >

packages/ui/src/components/editor/panel/modals/ActiveEditorIntelligentUpdateModal/ActiveEditorIntelligentUpdateModal.module.scss

@@ -1,22 +1,11 @@
-.elapsed-time {
-  text-align: center;
-  font-size: 20px;
-  font-family: monospace;
-}
-
-.tokens-per-second {
-  text-align: center;
-  font-family: monospace;
-  color: var(--cwc-text-color-dimmed);
-}
-
 .progress {
   width: 100%;
   height: 3px;
   background-color: var(--vscode-dropdown-border);
   border-radius: 999px;
   overflow: hidden;
   position: relative;
+  margin: 6px 0;
 
   &__fill {
     height: 100%;
@@ -36,62 +25,39 @@
 .content {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  padding: 0 4px;
 }
 
 .file-item {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-}
-
-.file-item__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-}
-
-.file-item__name {
-  font-size: 12px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--cwc-text-color-dimmed);
-  flex-shrink: 1;
+  width: 100%;
 
-  > span:nth-child(2) {
-    margin-left: 0.5em;
+  &__bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 12px;
+    color: var(--vscode-editorWidget-foreground);
     opacity: 0.7;
-    font-size: 0.9em;
-  }
-}
 
-.file-item__status {
-  font-size: 12px;
-  flex-shrink: 0;
+    &__status {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-right: 8px;
+    }
 
-  &--waiting {
-    color: var(--cwc-text-color-dimmed);
-  }
-  &--thinking {
-    color: var(--vscode-focusBorder);
-  }
-  &--receiving {
-    color: var(--vscode-focusBorder);
-  }
-  &--done {
-    color: var(--vscode-testing-iconPassed);
+    &__right {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-shrink: 0;
+      font-variant-numeric: tabular-nums;
+    }
   }
 }
 
-.file-item__details {
-  font-family: monospace;
-  font-size: 10px;
-  color: var(--cwc-text-color-dimmed);
-  text-align: right;
-}
-
 @keyframes indeterminate-progress {
   from {
     left: -50px;