feat(auto-edit): full debug panel UI implementation (#7306)

- Implements UI for the auto-edit debug panel based on the data we
already have in store. I'll share a demo video in Slack later today.
- Built on top of #7304
- There are several minor issues with the UI. E.g., context summary
shows the total number of items as 0 while it's definitely not. The
side-by-side diff view highlighting is inaccurate for some inline
changes. We address such problems in follow-ups or keep them as is
because this UI is for internal use, so we should not spend much extra
time on it.

vscode/src/autoedits/debug-panel/debug-store.ts

@@ -91,10 +91,8 @@ export class AutoeditDebugStore implements vscode.Disposable {
     }
 
     private calculateSideBySideDiff(state: AutoeditRequestState): DecorationInfo | undefined {
-        // TODO: remove @ts-ignore once all auto-edit debug panel changes are merged.
         return 'prediction' in state
-            ? // @ts-ignore
-              getDecorationInfo(state.codeToReplaceData.codeToRewrite, state.prediction, CHARACTER_REGEX)
+            ? getDecorationInfo(state.codeToReplaceData.codeToRewrite, state.prediction, CHARACTER_REGEX)
             : undefined
     }
 

vscode/webviews/autoedit-debug.tsx

@@ -1,3 +1,4 @@
+import './autoedit-debug/autoedit-debug.css'
 import { useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
 
@@ -7,6 +8,7 @@ import type {
 } from '../src/autoedits/debug-panel/debug-protocol'
 import type { AutoeditRequestDebugState } from '../src/autoedits/debug-panel/debug-store'
 
+import { AutoeditDebugPanel } from './autoedit-debug/AutoeditDebugPanel'
 import { getVSCodeAPI } from './utils/VSCodeApi'
 
 /**
@@ -84,8 +86,7 @@ function App() {
 
     return (
         <div className="tw-h-full tw-w-full tw-p-4">
-            <h1>Auto-Edit Debug Panel </h1>
-            <p>We have {entries.length} entries</p>
+            <AutoeditDebugPanel entries={entries} />
         </div>
     )
 }

vscode/webviews/autoedit-debug/AutoeditDebugPanel.tsx

@@ -0,0 +1,93 @@
+import { type FC, useState } from 'react'
+
+import type { AutoeditRequestDebugState } from '../../src/autoedits/debug-panel/debug-store'
+
+import { AutoeditDetailView } from './components/AutoeditDetailView'
+import { AutoeditListItem } from './components/AutoeditListItem'
+import { EmptyState } from './components/EmptyState'
+
+export const AutoeditDebugPanel: FC<{ entries: AutoeditRequestDebugState[] }> = ({ entries }) => {
+    const [selectedEntryId, setSelectedEntryId] = useState<string | null>(
+        entries.length > 0 ? entries[0].state.requestId : null
+    )
+
+    const selectedEntry = entries.find(entry => entry.state.requestId === selectedEntryId) || null
+
+    // Handle entry selection
+    const handleEntrySelect = (entryId: string) => {
+        setSelectedEntryId(entryId)
+    }
+
+    // Navigate to previous request
+    const handlePrevious = () => {
+        if (!selectedEntryId || entries.length <= 1) return
+
+        const currentIndex = entries.findIndex(entry => entry.state.requestId === selectedEntryId)
+        if (currentIndex > 0) {
+            setSelectedEntryId(entries[currentIndex - 1].state.requestId)
+        }
+    }
+
+    // Navigate to next request
+    const handleNext = () => {
+        if (!selectedEntryId || entries.length <= 1) return
+
+        const currentIndex = entries.findIndex(entry => entry.state.requestId === selectedEntryId)
+        if (currentIndex < entries.length - 1) {
+            setSelectedEntryId(entries[currentIndex + 1].state.requestId)
+        }
+    }
+
+    // Close the detail view
+    const handleClose = () => {
+        setSelectedEntryId(null)
+    }
+
+    if (entries.length === 0) {
+        return <EmptyState />
+    }
+
+    // Render the entries list component to avoid duplication
+    const entriesList = (
+        <div className="tw-flex tw-flex-col tw-gap-2 tw-p-2">
+            {entries.map(entry => (
+                <AutoeditListItem
+                    key={entry.state.requestId}
+                    entry={entry}
+                    isSelected={entry.state.requestId === selectedEntryId}
+                    onSelect={handleEntrySelect}
+                />
+            ))}
+        </div>
+    )
+
+    // When no entry is selected, display the list at full width
+    if (!selectedEntry) {
+        return <div className="tw-h-full tw-overflow-y-auto">{entriesList}</div>
+    }
+
+    // When an entry is selected, display the split view
+    return (
+        <div className="tw-flex tw-h-full tw-overflow-hidden">
+            {/* List panel (left side) */}
+            <div className="tw-w-2/5 tw-overflow-y-auto tw-border-r tw-border-gray-200 tw-dark:tw-border-gray-700 tw-pr-2">
+                {entriesList}
+            </div>
+
+            {/* Detail panel (right side) */}
+            <div className="tw-w-3/5 tw-overflow-y-auto tw-p-4">
+                <AutoeditDetailView
+                    entry={selectedEntry}
+                    onPrevious={handlePrevious}
+                    onNext={handleNext}
+                    onClose={handleClose}
+                    hasPrevious={entries.findIndex(e => e.state.requestId === selectedEntryId) > 0}
+                    hasNext={
+                        entries.findIndex(e => e.state.requestId === selectedEntryId) <
+                        entries.length - 1
+                    }
+                />
+            </div>
+        </div>
+    )
+}