@codingame/monaco-vscode-api 15.0.3 → 16.0.0

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/components/gutterIndicatorView.js

@@ -2,36 +2,92 @@
 import { __decorate, __param } from '../../../../../../../../../../external/tslib/tslib.es6.js';
 import { trackFocus } from '../../../../../../../base/browser/dom.js';
 import { renderIcon } from '../../../../../../../base/browser/ui/iconLabel/iconLabels.js';
+import { timeout } from '../../../../../../../base/common/async.js';
 import { Codicon } from '../../../../../../../base/common/codicons.js';
-import { Disposable, DisposableStore, toDisposable } from '../../../../../../../base/common/lifecycle.js';
+import { BugIndicatingError } from '../../../../../../../base/common/errors.js';
+import { Disposable, MutableDisposable, DisposableStore, toDisposable } from '../../../../../../../base/common/lifecycle.js';
 import '../../../../../../../base/common/observableInternal/index.js';
 import { observableFromEvent, constObservable, debouncedObservable, runOnChange } from '../../../../../../../base/common/observableInternal/utils.js';
 import { IAccessibilityService } from '../../../../../../../platform/accessibility/common/accessibility.service.js';
 import { IHoverService } from '../../../../../../../platform/hover/browser/hover.service.js';
 import { IInstantiationService } from '../../../../../../../platform/instantiation/common/instantiation.js';
+import { StorageScope, StorageTarget } from '../../../../../../../platform/storage/common/storage.js';
+import { IStorageService } from '../../../../../../../platform/storage/common/storage.service.js';
 import { asCssVariable } from '../../../../../../../platform/theme/common/colorUtils.js';
+import { IThemeService } from '../../../../../../../platform/theme/common/themeService.service.js';
+import { Point } from '../../../../../../browser/point.js';
 import { Rect } from '../../../../../../browser/rect.js';
-import { EditorOption } from '../../../../../../common/config/editorOptions.js';
+import { EditorOption, RenderLineNumbersType } from '../../../../../../common/config/editorOptions.js';
 import { OffsetRange } from '../../../../../../common/core/offsetRange.js';
 import { StickyScrollController } from '../../../../../stickyScroll/browser/stickyScrollController.js';
-import { inlineEditIndicatorBackground, inlineEditIndicatorsuccessfulForeground, inlineEditIndicatorPrimaryForeground, inlineEditIndicatorSecondaryForeground, inlineEditIndicatorsuccessfulBackground, inlineEditIndicatorPrimaryBackground, inlineEditIndicatorSecondaryBackground } from '../theme.js';
-import { mapOutFalsy, rectToProps, InlineEditTabAction } from '../utils/utils.js';
+import { InlineEditTabAction } from '../inlineEditsViewInterface.js';
+import { inlineEditIndicatorBackground, getEditorBlendedColor, inlineEditIndicatorsuccessfulBorder, inlineEditIndicatorsuccessfulForeground, inlineEditIndicatorsuccessfulBackground, inlineEditIndicatorPrimaryBorder, inlineEditIndicatorPrimaryForeground, inlineEditIndicatorPrimaryBackground, inlineEditIndicatorSecondaryBorder, inlineEditIndicatorSecondaryForeground, inlineEditIndicatorSecondaryBackground } from '../theme.js';
+import { mapOutFalsy, rectToProps } from '../utils/utils.js';
 import { GutterIndicatorMenuContent } from './gutterIndicatorMenu.js';
 import { derived } from '../../../../../../../base/common/observableInternal/derived.js';
 import { n } from '../../../../../../../base/browser/domImpl/n.js';
 import { observableValue } from '../../../../../../../base/common/observableInternal/base.js';
+import { autorun, autorunWithStore } from '../../../../../../../base/common/observableInternal/autorun.js';
 
+var UserKind;
+(function (UserKind) {
+    UserKind["FirstTime"] = "firstTime";
+    UserKind["SecondTime"] = "secondTime";
+    UserKind["Active"] = "active";
+})(UserKind || (UserKind = {}));
 let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Disposable {
-    constructor(_editorObs, _originalRange, _verticalOffset, _host, _isHoveringOverInlineEdit, _focusIsInMenu, _hoverService, _instantiationService, accessibilityService) {
+    get model() {
+        const model = this._model.get();
+        if (!model) {
+            throw ( new BugIndicatingError('Inline Edit Model not available'));
+        }
+        return model;
+    }
+    get _newUserType() {
+        return this._storageService.get('inlineEditsGutterIndicatorUserKind', StorageScope.APPLICATION, UserKind.FirstTime);
+    }
+    set _newUserType(value) {
+        switch (value) {
+            case UserKind.FirstTime:
+                throw ( new BugIndicatingError('UserKind should not be set to first time'));
+            case UserKind.SecondTime:
+                this._firstToSecondTimeUserDisposable.clear();
+                break;
+            case UserKind.Active:
+                this._newUserAnimationDisposable.clear();
+                this._firstToSecondTimeUserDisposable.clear();
+                this._secondTimeToActiveUserDisposable.clear();
+                break;
+        }
+        this._storageService.store('inlineEditsGutterIndicatorUserKind', value, StorageScope.APPLICATION, StorageTarget.USER);
+    }
+    constructor(_editorObs, _originalRange, _verticalOffset, _host, _model, _isHoveringOverInlineEdit, _focusIsInMenu, _hoverService, _instantiationService, _storageService, _accessibilityService, themeService) {
         super();
         this._editorObs = _editorObs;
         this._originalRange = _originalRange;
         this._verticalOffset = _verticalOffset;
         this._host = _host;
+        this._model = _model;
         this._isHoveringOverInlineEdit = _isHoveringOverInlineEdit;
         this._focusIsInMenu = _focusIsInMenu;
         this._hoverService = _hoverService;
         this._instantiationService = _instantiationService;
+        this._storageService = _storageService;
+        this._accessibilityService = _accessibilityService;
+        this._activeCompletionId = derived(reader => {
+            const layout = this._layout.read(reader);
+            if (!layout) {
+                return undefined;
+            }
+            const model = this._model.read(reader);
+            if (!model) {
+                return undefined;
+            }
+            return model.inlineEdit.inlineCompletion.id;
+        });
+        this._newUserAnimationDisposable = this._register(( new MutableDisposable()));
+        this._firstToSecondTimeUserDisposable = this._register(( new MutableDisposable()));
+        this._secondTimeToActiveUserDisposable = this._register(( new MutableDisposable()));
         this._originalRangeObs = mapOutFalsy(this._originalRange);
         this._state = derived(reader => {
             const range = this._originalRangeObs.read(reader);
@@ -47,48 +103,131 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
         this._stickyScrollHeight = this._stickyScrollController
             ? observableFromEvent(this._stickyScrollController.onDidChangeStickyScrollHeight, () => this._stickyScrollController.stickyScrollWidgetHeight)
             : constObservable(0);
+        this._lineNumberToRender = derived(this, reader => {
+            if (this._verticalOffset.read(reader) !== 0) {
+                return '';
+            }
+            const lineNumber = this._originalRange.read(reader)?.startLineNumber;
+            const lineNumberOptions = this._editorObs.getOption(EditorOption.lineNumbers).read(reader);
+            if (lineNumber === undefined || lineNumberOptions.renderType === RenderLineNumbersType.Off) {
+                return '';
+            }
+            if (lineNumberOptions.renderType === RenderLineNumbersType.Interval) {
+                const cursorPosition = this._editorObs.cursorPosition.read(reader);
+                if (lineNumber % 10 === 0 || cursorPosition && cursorPosition.lineNumber === lineNumber) {
+                    return ( lineNumber.toString());
+                }
+                return '';
+            }
+            if (lineNumberOptions.renderType === RenderLineNumbersType.Relative) {
+                const cursorPosition = this._editorObs.cursorPosition.read(reader);
+                if (!cursorPosition) {
+                    return '';
+                }
+                const relativeLineNumber = Math.abs(lineNumber - cursorPosition.lineNumber);
+                if (relativeLineNumber === 0) {
+                    return ( lineNumber.toString());
+                }
+                return ( relativeLineNumber.toString());
+            }
+            if (lineNumberOptions.renderType === RenderLineNumbersType.Custom) {
+                if (lineNumberOptions.renderFn) {
+                    return lineNumberOptions.renderFn(lineNumber);
+                }
+                return '';
+            }
+            return ( lineNumber.toString());
+        });
         this._layout = derived(this, reader => {
             const s = this._state.read(reader);
             if (!s) {
                 return undefined;
             }
             const layout = this._editorObs.layoutInfo.read(reader);
+            const lineHeight = this._editorObs.getOption(EditorOption.lineHeight).read(reader);
             const bottomPadding = 1;
+            const leftPadding = 1;
+            const rightPadding = 1;
             const fullViewPort = Rect.fromLeftTopRightBottom(0, 0, layout.width, layout.height - bottomPadding);
             const viewPortWithStickyScroll = fullViewPort.withTop(this._stickyScrollHeight.read(reader));
             const targetVertRange = s.lineOffsetRange.read(reader);
-            const space = 1;
-            const targetRect = Rect.fromRanges(OffsetRange.fromTo(space + layout.glyphMarginLeft, layout.lineNumbersLeft + layout.lineNumbersWidth + 4), targetVertRange);
-            const lineHeight = this._editorObs.getOption(EditorOption.lineHeight).read(reader);
+            const targetRect = Rect.fromRanges(OffsetRange.fromTo(leftPadding + layout.glyphMarginLeft, layout.decorationsLeft + layout.decorationsWidth - rightPadding), targetVertRange);
             const pillOffset = this._verticalOffset.read(reader);
-            const pillRect = targetRect.withHeight(lineHeight).withWidth(22).translateY(pillOffset);
+            let pillRect = targetRect.withHeight(lineHeight).withWidth(22).translateY(pillOffset);
             const pillRectMoved = pillRect.moveToBeContainedIn(viewPortWithStickyScroll);
             const rect = targetRect;
-            const iconRect = (targetRect.containsRect(pillRectMoved))
+            pillRect = (targetRect.containsRect(pillRectMoved))
                 ? pillRectMoved
                 : pillRectMoved.moveToBeContainedIn(fullViewPort.intersect(targetRect.union(fullViewPort.withHeight(lineHeight))));
+            const docked = rect.containsRect(pillRect) && viewPortWithStickyScroll.containsRect(pillRect);
+            let iconDirecion = targetRect.containsRect(pillRect) ?
+                'right'
+                : pillRect.top > targetRect.top ?
+                    'top' :
+                    'bottom';
+            let lineNumberRect = pillRect.withWidth(0);
+            let iconRect = pillRect;
+            if (docked && pillRect.top === targetRect.top + pillOffset) {
+                pillRect = pillRect.withWidth(layout.decorationsLeft + layout.decorationsWidth - layout.glyphMarginLeft - leftPadding - rightPadding);
+                lineNumberRect = pillRect.intersectHorizontal(( new OffsetRange(
+                    0,
+                    Math.max(layout.lineNumbersLeft + layout.lineNumbersWidth - leftPadding - 1, 0)
+                )));
+                iconRect = iconRect.translateX(lineNumberRect.width);
+            }
+            let icon;
+            if (docked && (this._isHoveredOverIconDebounced.read(reader) || this._isHoveredOverInlineEditDebounced.read(reader))) {
+                icon = renderIcon(Codicon.check);
+                iconDirecion = 'right';
+            }
+            else {
+                icon = this._tabAction.read(reader) === InlineEditTabAction.Accept ? renderIcon(Codicon.keyboardTab) : renderIcon(Codicon.arrowRight);
+            }
+            let rotation = 0;
+            switch (iconDirecion) {
+                case 'right':
+                    rotation = 0;
+                    break;
+                case 'bottom':
+                    rotation = 90;
+                    break;
+                case 'top':
+                    rotation = -90;
+                    break;
+            }
             return {
                 rect,
+                icon,
+                rotation,
+                docked,
                 iconRect,
-                arrowDirection: (targetRect.containsRect(iconRect) ? 'right'
-                    : iconRect.top > targetRect.top ? 'top' : 'bottom'),
-                docked: rect.containsRect(iconRect) && viewPortWithStickyScroll.containsRect(iconRect),
+                pillRect,
+                lineHeight,
+                lineNumberRect,
             };
         });
         this._iconRef = n.ref();
         this._hoverVisible = observableValue(this, false);
         this.isHoverVisible = this._hoverVisible;
         this._isHoveredOverIcon = observableValue(this, false);
+        this._isHoveredOverIconDebounced = debouncedObservable(this._isHoveredOverIcon, 100);
+        this._tabAction = derived(this, reader => {
+            const model = this._model.read(reader);
+            if (!model) {
+                return InlineEditTabAction.Inactive;
+            }
+            return model.tabAction.read(reader);
+        });
         this._indicator = n.div({
             class: 'inline-edits-view-gutter-indicator',
             onclick: () => {
                 const docked = ( this._layout.map(l => l && l.docked)).get();
                 this._editorObs.editor.focus();
                 if (docked) {
-                    this._host.accept();
+                    this.model.accept();
                 }
                 else {
-                    this._host.jump();
+                    this.model.jump();
                 }
             },
             tabIndex: 0,
@@ -109,85 +248,192 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
                 class: 'icon',
                 ref: this._iconRef,
                 onmouseenter: () => {
-                    this._isHoveredOverIcon.set(true, undefined);
                     this._showHover();
                 },
-                onmouseleave: () => { this._isHoveredOverIcon.set(false, undefined); },
                 style: {
                     cursor: 'pointer',
                     zIndex: '1000',
                     position: 'absolute',
-                    backgroundColor: ( this._host.tabAction.map(v => {
-                        switch (v) {
-                            case InlineEditTabAction.Inactive: return asCssVariable(inlineEditIndicatorSecondaryBackground);
-                            case InlineEditTabAction.Jump: return asCssVariable(inlineEditIndicatorPrimaryBackground);
-                            case InlineEditTabAction.Accept: return asCssVariable(inlineEditIndicatorsuccessfulBackground);
-                        }
-                    })),
-                    ['--vscodeIconForeground']: ( this._host.tabAction.map(v => {
-                        switch (v) {
-                            case InlineEditTabAction.Inactive: return asCssVariable(inlineEditIndicatorSecondaryForeground);
-                            case InlineEditTabAction.Jump: return asCssVariable(inlineEditIndicatorPrimaryForeground);
-                            case InlineEditTabAction.Accept: return asCssVariable(inlineEditIndicatorsuccessfulForeground);
-                        }
-                    })),
+                    backgroundColor: ( this._gutterIndicatorStyles.map(v => v.background)),
+                    ['--vscodeIconForeground']: ( this._gutterIndicatorStyles.map(v => v.foreground)),
+                    border: ( this._gutterIndicatorStyles.map(v => `1px solid ${v.border}`)),
+                    boxSizing: 'border-box',
                     borderRadius: '4px',
                     display: 'flex',
                     justifyContent: 'center',
-                    transition: 'background-color 0.2s ease-in-out',
-                    ...rectToProps(reader => layout.read(reader).iconRect),
+                    transition: 'background-color 0.2s ease-in-out, width 0.2s ease-in-out',
+                    ...rectToProps(reader => layout.read(reader).pillRect),
                 }
             }, [
+                n.div({
+                    className: 'line-number',
+                    style: {
+                        lineHeight: ( layout.map(l => `${l.lineHeight}px`)),
+                        display: ( layout.map(l => l.lineNumberRect.width > 0 ? 'flex' : 'none')),
+                        alignItems: 'center',
+                        justifyContent: 'flex-end',
+                        width: ( layout.map(l => l.lineNumberRect.width)),
+                        height: '100%',
+                        color: ( this._gutterIndicatorStyles.map(v => v.foreground)),
+                    }
+                }, this._lineNumberToRender),
                 n.div({
                     style: {
-                        rotate: ( layout.map(l => {
-                            switch (l.arrowDirection) {
-                                case 'right': return '0deg';
-                                case 'bottom': return '90deg';
-                                case 'top': return '-90deg';
-                            }
-                        })),
+                        rotate: ( layout.map(i => `${i.rotation}deg`)),
                         transition: 'rotate 0.2s ease-in-out',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
+                        height: '100%',
+                        width: ( layout.map(l => `${l.iconRect.width}px`)),
                     }
                 }, [
-                    ( this._host.tabAction.map(
-                        v => v === InlineEditTabAction.Accept ? renderIcon(Codicon.keyboardTab) : renderIcon(Codicon.arrowRight)
-                    ))
+                    ( layout.map(i => i.icon)),
                 ])
             ]),
         ]))).keepUpdated(this._store);
+        this._gutterIndicatorStyles = ( this._tabAction.map((v, reader) => {
+            switch (v) {
+                case InlineEditTabAction.Inactive: return {
+                    background: ( getEditorBlendedColor(inlineEditIndicatorSecondaryBackground, themeService).read(reader).toString()),
+                    foreground: ( getEditorBlendedColor(inlineEditIndicatorSecondaryForeground, themeService).read(reader).toString()),
+                    border: ( getEditorBlendedColor(inlineEditIndicatorSecondaryBorder, themeService).read(reader).toString()),
+                };
+                case InlineEditTabAction.Jump: return {
+                    background: ( getEditorBlendedColor(inlineEditIndicatorPrimaryBackground, themeService).read(reader).toString()),
+                    foreground: ( getEditorBlendedColor(inlineEditIndicatorPrimaryForeground, themeService).read(reader).toString()),
+                    border: ( getEditorBlendedColor(inlineEditIndicatorPrimaryBorder, themeService).read(reader).toString())
+                };
+                case InlineEditTabAction.Accept: return {
+                    background: ( getEditorBlendedColor(inlineEditIndicatorsuccessfulBackground, themeService).read(reader).toString()),
+                    foreground: ( getEditorBlendedColor(inlineEditIndicatorsuccessfulForeground, themeService).read(reader).toString()),
+                    border: ( getEditorBlendedColor(inlineEditIndicatorsuccessfulBorder, themeService).read(reader).toString())
+                };
+            }
+        }));
         this._register(this._editorObs.createOverlayWidget({
             domNode: this._indicator.element,
             position: constObservable(null),
             allowEditorOverflow: false,
             minContentWidthInPx: constObservable(0),
         }));
-        if (!accessibilityService.isMotionReduced()) {
-            const debouncedIsHovering = debouncedObservable(this._isHoveringOverInlineEdit, 100);
-            this._register(runOnChange(debouncedIsHovering, (isHovering) => {
-                if (!isHovering) {
-                    return;
+        this._register(this._editorObs.editor.onMouseMove((e) => {
+            const el = this._iconRef.element;
+            const rect = el.getBoundingClientRect();
+            const rectangularArea = Rect.fromLeftTopWidthHeight(rect.left, rect.top, rect.width, rect.height);
+            const point = ( new Point(e.event.posx, e.event.posy));
+            this._isHoveredOverIcon.set(rectangularArea.containsPoint(point), undefined);
+        }));
+        this._register(this._editorObs.editor.onDidScrollChange(() => {
+            this._isHoveredOverIcon.set(false, undefined);
+        }));
+        this._isHoveredOverInlineEditDebounced = debouncedObservable(this._isHoveringOverInlineEdit, 100);
+        this._register(runOnChange(this._isHoveredOverInlineEditDebounced, (isHovering) => {
+            if (isHovering) {
+                this._triggerAnimation();
+            }
+        }));
+        if (this._newUserType === UserKind.Active) {
+            this._register(this.setupNewUserExperience());
+        }
+        this._register(autorun(reader => {
+            this._indicator.readEffect(reader);
+            if (this._indicator.element) {
+                this._editorObs.editor.applyFontInfo(this._indicator.element);
+            }
+        }));
+        this._register(autorunWithStore((reader, store) => {
+            const host = this._host.read(reader);
+            if (!host) {
+                return;
+            }
+            store.add(host.onDidAccept(() => {
+                this._storageService.store('inlineEditsGutterIndicatorUserKind', UserKind.Active, StorageScope.APPLICATION, StorageTarget.USER);
+            }));
+        }));
+    }
+    setupNewUserExperience() {
+        if (this._newUserType === UserKind.Active) {
+            return Disposable.None;
+        }
+        const disposableStore = ( new DisposableStore());
+        let userHasHoveredOverIcon = false;
+        let inlineEditHasBeenAccepted = false;
+        let firstTimeUserAnimationCount = 0;
+        let secondTimeUserAnimationCount = 0;
+        disposableStore.add(runOnChange(this._activeCompletionId, async (id) => {
+            if (id === undefined) {
+                return;
+            }
+            const userType = this._newUserType;
+            switch (userType) {
+                case UserKind.FirstTime: {
+                    for (let i = 0; i < 3 && this._activeCompletionId.get() === id; i++) {
+                        await this._triggerAnimation();
+                        await timeout(500);
+                    }
+                    break;
+                }
+                case UserKind.SecondTime: {
+                    this._triggerAnimation();
+                    break;
+                }
+            }
+            switch (userType) {
+                case UserKind.FirstTime: {
+                    if (++firstTimeUserAnimationCount >= 5 || userHasHoveredOverIcon) {
+                        this._newUserType = UserKind.SecondTime;
+                    }
+                    break;
+                }
+                case UserKind.SecondTime: {
+                    if (++secondTimeUserAnimationCount >= 5 && inlineEditHasBeenAccepted) {
+                        this._newUserType = UserKind.Active;
+                    }
+                    break;
                 }
-                this._iconRef.element.animate([
-                    { transform: 'rotate(0) scale(1)', offset: 0 },
-                    { transform: 'rotate(14.4deg) scale(1.1)', offset: 0.15 },
-                    { transform: 'rotate(-14.4deg) scale(1.2)', offset: 0.3 },
-                    { transform: 'rotate(14.4deg) scale(1.1)', offset: 0.45 },
-                    { transform: 'rotate(-14.4deg) scale(1.2)', offset: 0.6 },
-                    { transform: 'rotate(0) scale(1)', offset: 1 }
-                ], { duration: 800 });
+            }
+        }));
+        disposableStore.add(runOnChange(this._isHoveredOverIconDebounced, async (isHovered) => {
+            if (isHovered) {
+                userHasHoveredOverIcon = true;
+            }
+        }));
+        disposableStore.add(autorunWithStore((reader, store) => {
+            const host = this._host.read(reader);
+            if (!host) {
+                return;
+            }
+            store.add(host.onDidAccept(() => {
+                inlineEditHasBeenAccepted = true;
             }));
+        }));
+        return disposableStore;
+    }
+    _triggerAnimation() {
+        if (this._accessibilityService.isMotionReduced()) {
+            return ( new Animation(null, null)).finished;
         }
+        const animation = this._iconRef.element.animate([
+            {
+                outline: `2px solid ${( this._gutterIndicatorStyles.map(v => v.border)).get()}`,
+                outlineOffset: '-1px',
+                offset: 0
+            },
+            {
+                outline: `2px solid transparent`,
+                outlineOffset: '10px',
+                offset: 1
+            },
+        ], { duration: 500 });
+        return animation.finished;
     }
     _showHover() {
         if (this._hoverVisible.get()) {
             return;
         }
         const disposableStore = ( new DisposableStore());
-        const content = disposableStore.add(this._instantiationService.createInstance(GutterIndicatorMenuContent, this._host, (focusEditor) => {
+        const content = disposableStore.add(this._instantiationService.createInstance(GutterIndicatorMenuContent, this.model, (focusEditor) => {
             if (focusEditor) {
                 this._editorObs.editor.focus();
             }
@@ -197,12 +443,13 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
         disposableStore.add(focusTracker.onDidBlur(() => this._focusIsInMenu.set(false, undefined)));
         disposableStore.add(focusTracker.onDidFocus(() => this._focusIsInMenu.set(true, undefined)));
         disposableStore.add(toDisposable(() => this._focusIsInMenu.set(false, undefined)));
-        const h = this._hoverService.showHover({
+        const h = this._hoverService.showInstantHover({
             target: this._iconRef.element,
             content: content.element,
         });
         if (h) {
             this._hoverVisible.set(true, undefined);
+            disposableStore.add(this._editorObs.editor.onDidScrollChange(() => h.dispose()));
             disposableStore.add(h.onDispose(() => {
                 this._hoverVisible.set(false, undefined);
                 disposableStore.dispose();
@@ -214,9 +461,11 @@ let InlineEditsGutterIndicator = class InlineEditsGutterIndicator extends Dispos
     }
 };
 InlineEditsGutterIndicator = ( __decorate([
-    ( __param(6, IHoverService)),
-    ( __param(7, IInstantiationService)),
-    ( __param(8, IAccessibilityService))
+    ( __param(7, IHoverService)),
+    ( __param(8, IInstantiationService)),
+    ( __param(9, IStorageService)),
+    ( __param(10, IAccessibilityService)),
+    ( __param(11, IThemeService))
 ], InlineEditsGutterIndicator));
 
 export { InlineEditsGutterIndicator };

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditWithChanges.d.ts

@@ -7,12 +7,11 @@ export declare class InlineEditWithChanges {
     readonly originalText: AbstractText;
     readonly edit: TextEdit;
     readonly cursorPosition: Position;
-    readonly userJumpedToIt: boolean;
     readonly commands: readonly Command[];
     readonly inlineCompletion: InlineCompletionItem;
     readonly lineEdit: SingleLineEdit;
     readonly originalLineRange: import("../../../../../common/core/lineRange.js").LineRange;
     readonly modifiedLineRange: import("../../../../../common/core/lineRange.js").LineRange;
-    constructor(originalText: AbstractText, edit: TextEdit, cursorPosition: Position, userJumpedToIt: boolean, commands: readonly Command[], inlineCompletion: InlineCompletionItem);
+    constructor(originalText: AbstractText, edit: TextEdit, cursorPosition: Position, commands: readonly Command[], inlineCompletion: InlineCompletionItem);
     equals(other: InlineEditWithChanges): boolean;
 }

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditWithChanges.js

@@ -2,11 +2,10 @@
 import { SingleLineEdit } from '../../../../../common/core/lineEdit.js';
 
 class InlineEditWithChanges {
-    constructor(originalText, edit, cursorPosition, userJumpedToIt, commands, inlineCompletion) {
+    constructor(originalText, edit, cursorPosition, commands, inlineCompletion) {
         this.originalText = originalText;
         this.edit = edit;
         this.cursorPosition = cursorPosition;
-        this.userJumpedToIt = userJumpedToIt;
         this.commands = commands;
         this.inlineCompletion = inlineCompletion;
         this.lineEdit = SingleLineEdit.fromSingleTextEdit(this.edit.toSingle(this.originalText), this.originalText);
@@ -17,7 +16,6 @@ class InlineEditWithChanges {
         return this.originalText.getValue() === other.originalText.getValue() &&
             this.edit.equals(other.edit) &&
             this.cursorPosition.equals(other.cursorPosition) &&
-            this.userJumpedToIt === other.userJumpedToIt &&
             this.commands === other.commands &&
             this.inlineCompletion === other.inlineCompletion;
     }

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsModel.d.ts

@@ -0,0 +1,35 @@
+import { Event } from "../../../../../../base/common/event.js";
+import { IObservable } from "../../../../../../base/common/observable.js";
+import { ICodeEditor } from "../../../../../browser/editorBrowser.js";
+import { LineRange } from "../../../../../common/core/lineRange.js";
+import { Command } from "../../../../../common/languages.js";
+import { InlineCompletionsModel } from "../../model/inlineCompletionsModel.js";
+import { InlineCompletionWithUpdatedRange } from "../../model/inlineCompletionsSource.js";
+import { IInlineEditHost, IInlineEditModel, InlineEditTabAction } from "./inlineEditsViewInterface.js";
+import { InlineEditWithChanges } from "./inlineEditWithChanges.js";
+export declare class InlineEditModel implements IInlineEditModel {
+    private readonly _model;
+    readonly inlineEdit: InlineEditWithChanges;
+    readonly tabAction: IObservable<InlineEditTabAction>;
+    readonly action: Command | undefined;
+    readonly displayName: string;
+    readonly extensionCommands: Command[];
+    readonly showCollapsed: IObservable<boolean>;
+    constructor(_model: InlineCompletionsModel, inlineEdit: InlineEditWithChanges, tabAction: IObservable<InlineEditTabAction>);
+    accept(): void;
+    jump(): void;
+    abort(reason: string): void;
+    handleInlineEditShown(): void;
+}
+export declare class InlineEditHost implements IInlineEditHost {
+    private readonly _model;
+    readonly onDidAccept: Event<void>;
+    readonly inAcceptFlow: IObservable<boolean>;
+    readonly inPartialAcceptFlow: IObservable<boolean>;
+    constructor(_model: InlineCompletionsModel);
+}
+export declare class GhostTextIndicator {
+    readonly lineRange: LineRange;
+    readonly model: InlineEditModel;
+    constructor(editor: ICodeEditor, model: InlineCompletionsModel, lineRange: LineRange, inlineCompletion: InlineCompletionWithUpdatedRange);
+}

package/vscode/src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsModel.js

@@ -0,0 +1,58 @@
+
+import '../../../../../../base/common/observableInternal/index.js';
+import { localize } from '../../../../../../nls.js';
+import { observableCodeEditor } from '../../../../../browser/observableCodeEditor.js';
+import { StringText, TextEdit } from '../../../../../common/core/textEdit.js';
+import { InlineEditTabAction } from './inlineEditsViewInterface.js';
+import { InlineEditWithChanges } from './inlineEditWithChanges.js';
+import { derived } from '../../../../../../base/common/observableInternal/derived.js';
+
+class InlineEditModel {
+    constructor(_model, inlineEdit, tabAction) {
+        this._model = _model;
+        this.inlineEdit = inlineEdit;
+        this.tabAction = tabAction;
+        this.action = this.inlineEdit.inlineCompletion.action;
+        this.displayName = this.inlineEdit.inlineCompletion.source.provider.displayName ?? ( localize(1280, "Inline Edit"));
+        this.extensionCommands = this.inlineEdit.inlineCompletion.source.inlineCompletions.commands ?? [];
+        this.showCollapsed = this._model.showCollapsed;
+    }
+    accept() {
+        this._model.accept();
+    }
+    jump() {
+        this._model.jump();
+    }
+    abort(reason) {
+        console.error(reason);
+        this._model.stop();
+    }
+    handleInlineEditShown() {
+        this._model.handleInlineEditShown(this.inlineEdit.inlineCompletion);
+    }
+}
+class InlineEditHost {
+    constructor(_model) {
+        this._model = _model;
+        this.onDidAccept = this._model.onDidAccept;
+        this.inAcceptFlow = this._model.inAcceptFlow;
+        this.inPartialAcceptFlow = this._model.inPartialAcceptFlow;
+    }
+}
+class GhostTextIndicator {
+    constructor(editor, model, lineRange, inlineCompletion) {
+        this.lineRange = lineRange;
+        const editorObs = observableCodeEditor(editor);
+        const tabAction = derived(this, reader => {
+            if (editorObs.isFocused.read(reader)) {
+                if (model.inlineCompletionState.read(reader)?.inlineCompletion?.sourceInlineCompletion.showInlineEditMenu) {
+                    return InlineEditTabAction.Accept;
+                }
+            }
+            return InlineEditTabAction.Inactive;
+        });
+        this.model = ( new InlineEditModel(model, ( new InlineEditWithChanges(( new StringText('')), ( new TextEdit([])), model.primaryPosition.get(), inlineCompletion.source.inlineCompletions.commands ?? [], inlineCompletion.inlineCompletion)), tabAction));
+    }
+}
+
+export { GhostTextIndicator, InlineEditHost, InlineEditModel };