ide-assi 0.441.0 → 0.442.0

package/dist/bundle.cjs.js

@@ -234903,22 +234903,34 @@ const tobeButtonDecorations = StateField.define({
 class MergeButtonWidget extends WidgetType {
 	constructor(isAsisButton, textToApply, targetEditorView, diffRange, hostComponent) {
 		super();
-		this.isAsisButton = isAsisButton;
-		this.textToApply = textToApply;
-		this.targetEditorView = targetEditorView;
-		this.diffRange = diffRange;
-		this.hostComponent = hostComponent;
+		this.isAsisButton = isAsisButton; // 이 버튼이 ASIS 에디터에 붙는 버튼인가 (true) TOBE 에디터에 붙는 버튼인가 (false)
+		this.textToApply = textToApply; // 적용할 텍스트
+		this.targetEditorView = targetEditorView; // 텍스트를 적용할 에디터 뷰 (상대편 에디터)
+		this.diffRange = diffRange; // 대상 에디터에서 변경이 일어날 정확한 from/to 오프셋
+		this.hostComponent = hostComponent; // IdeDiff 인스턴스 참조
 	}
 
+	// 위젯이 차지할 공간을 텍스트 줄에 할당할지 여부. false로 설정하여 버튼이 줄 사이에 끼어들지 않도록 함.
 	eq(other) { return false; }
 
+	// 위젯의 DOM 요소를 생성합니다.
 	toDOM(view) {
 		const button = document.createElement("button");
-		button.className = `cm-merge-button ${this.isAsisButton ? 'accept' : 'revert'}`;
-		button.textContent = this.isAsisButton ? "→ 적용" : "← 되돌리기";
+		// SVN 기준 명칭으로 변경
+		if (this.isAsisButton) {
+			// ASIS (왼쪽) 에디터에 붙는 버튼: AI가 삭제한 것을 '되돌리기'
+			button.className = "cm-merge-button revert"; // 'revert' 클래스 사용
+			button.textContent = "← 되돌리기";
+		} else {
+			// TOBE (오른쪽) 에디터에 붙는 버튼: AI가 추가한 것을 '적용'
+			button.className = "cm-merge-button accept"; // 'accept' 클래스 사용
+			button.textContent = "→ 적용";
+		}
+
 
+		// 클릭 이벤트 핸들러
 		button.addEventListener("click", () => {
-			console.log(`버튼 클릭: ${this.isAsisButton ? 'ASIS -> TOBE' : 'TOBE -> ASIS'}`, this.textToApply);
+			console.log(`버튼 클릭: ${this.isAsisButton ? 'ASIS 쪽 (되돌리기)' : 'TOBE 쪽 (적용)'}`, this.textToApply);
 			console.log("대상 에디터:", this.targetEditorView === this.hostComponent.asisEditorView ? "ASIS" : "TOBE");
 			console.log("대상 범위:", this.diffRange);
 
@@ -234931,22 +234943,13 @@ class MergeButtonWidget extends WidgetType {
 		return container;
 	}
 
+	// 실제 변경 적용 로직
 	applyChanges(text, editorView, range) {
 		if (!editorView || !range) {
 			console.error("Target editor view or range is undefined.", editorView, range);
 			return;
 		}
 
-		// 특정 줄의 시작 오프셋과 끝 오프셋을 정확히 계산하여 적용해야 합니다.
-		// 현재 로직은 단순 치환이므로 Diff 유형에 따라 복잡해질 수 있습니다.
-		// 예를 들어, TOBE에 삽입된 내용을 ASIS에서 되돌릴 경우, ASIS에서 해당 내용 길이만큼의 공백을 지워야 합니다.
-		// ASIS에서 삭제된 내용을 TOBE에 적용할 경우, TOBE의 해당 위치에 내용을 삽입해야 합니다.
-
-		// CodeMirror의 Doc에서 특정 범위를 가져오는 것은 `state.sliceDoc(from, to)`
-		// `dmp.diff_main`의 결과는 줄 단위로 매핑된 문자열이므로,
-		// 실제 오프셋 계산 및 적용 로직은 더 정교해야 합니다.
-		// 지금은 임시로 range.from, range.to를 사용합니다.
-
 		editorView.dispatch({
 			changes: {
 				from: range.from,
@@ -234974,9 +234977,14 @@ class IdeDiff extends HTMLElement {
 	_asisScrollHandler = null;
 	_tobeScrollHandler = null;
 
+	// MergeButtonWidget에서 접근할 수 있도록 Getter를 공개합니다.
 	get asisEditorView() {
 		return this.#asisEditorView;
-	};
+	}
+	get tobeEditorView() {
+		return this.#tobeEditorView;
+	}
+
 
 	constructor() {
 		super();
@@ -234986,7 +234994,9 @@ class IdeDiff extends HTMLElement {
 	connectedCallback() {
 		this.shadowRoot.innerHTML = `
             <style>
+                /* ninegrid CSS 및 필요한 기본 스타일 임포트 */
                 @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
+                /* 새로 만든 ideDiff.css 파일 임포트 */
                 ${ninegrid.getCustomPath(this, "ideDiff.css")}
             </style>
 
@@ -235057,9 +235067,9 @@ class IdeDiff extends HTMLElement {
 				extensions: [
 					basicExtensions,
 					this.#languageCompartment.of(javascript()),
-					EditorState.readOnly.of(true),
+					EditorState.readOnly.of(true), // ASIS는 읽기 전용 유지 (원본 소스)
 					asisDiffDecorations,
-					asisButtonDecorations, // ⭐️ 새로운 StateField 추가
+					asisButtonDecorations,
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
 							update.view._initialAsisContentLoaded = true;
@@ -235077,8 +235087,9 @@ class IdeDiff extends HTMLElement {
 				extensions: [
 					basicExtensions,
 					this.#languageCompartment.of(javascript()),
+					// EditorState.readOnly.of(true), // TOBE는 AI 추천 소스이므로 편집 가능 (혹은 ASIS로만 적용)
 					tobeDiffDecorations,
-					tobeButtonDecorations, // ⭐️ 새로운 StateField 추가
+					tobeButtonDecorations,
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
 							update.view._initialTobeContentLoaded = true;
@@ -235144,8 +235155,8 @@ class IdeDiff extends HTMLElement {
 
 		const asisLineBuilder = new RangeSetBuilder();
 		const tobeLineBuilder = new RangeSetBuilder();
-		const asisButtonBuilder = new RangeSetBuilder(); // ⭐️ 새로운 빌더
-		const tobeButtonBuilder = new RangeSetBuilder(); // ⭐️ 새로운 빌더
+		const asisButtonBuilder = new RangeSetBuilder();
+		const tobeButtonBuilder = new RangeSetBuilder();
 
 		let asisCursor = 0;
 		let tobeCursor = 0;
@@ -235162,7 +235173,7 @@ class IdeDiff extends HTMLElement {
 			const tobeRangeStart = tobeCursor;
 
 			switch (op) {
-				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT: // TOBE에 추가된 내용 (ASIS에는 없음)
+				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT: // TOBE (AI 추천)에 추가된 내용 (ASIS에는 없음)
 					console.log("DIFF_INSERT (TOBE added):", JSON.stringify(text));
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
@@ -235172,27 +235183,24 @@ class IdeDiff extends HTMLElement {
 						tobeCursor += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
 					}
 
-					// ⭐️ TOBE 에디터에 버튼 추가: TOBE의 추가 내용을 ASIS로 '되돌리기' (ASIS에서 제거)
-					// TOBE의 해당 Diff가 끝나는 지점에 버튼을 붙이는 것이 자연스럽습니다.
-					// tobeRangeStart는 Diff 청크의 시작 오프셋입니다.
-					// 버튼을 Line Decoration과 같은 위치에 추가하되, 별도의 builder 사용
+					// ⭐️ TOBE (AI 추천) 에디터에 버튼 추가: TOBE의 추가 내용을 ASIS (현재 소스)에 '적용'
 					tobeButtonBuilder.add(
-						tobeRangeStart, // TOBE에서의 해당 Diff 청크 시작 오프셋
+						tobeRangeStart,
 						tobeRangeStart,
 						Decoration.widget({
 							widget: new MergeButtonWidget(
-								false, // 이 버튼은 TOBE 에디터에 붙는 버튼 (되돌리기)
-								"",    // ASIS에서 해당 내용을 제거하므로 삽입할 텍스트는 없음 (즉, 삭제)
-								currentInstance.#asisEditorView, // 대상 에디터는 ASIS
-								{ from: asisRangeStart, to: asisRangeStart + text.length }, // ASIS에서 '삭제될' 범위
+								false, // 이 버튼은 TOBE 에디터에 붙는 버튼
+								text,  // AI가 추가한 내용을 ASIS에 '삽입'
+								currentInstance.#asisEditorView, // 대상 에디터는 ASIS (현재 소스)
+								{ from: asisRangeStart, to: asisRangeStart + 0 }, // ASIS에서의 '삽입될' 위치
 								currentInstance
 							),
-							side: 1 // 텍스트 뒤에 삽입 (이전에 `side: -1`로 시도했다면 `-1`이 우선순위가 더 높습니다.)
+							side: 1
 						})
 					);
 					break;
 
-				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // ASIS에서 삭제된 내용 (TOBE에는 없음)
+				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // ASIS (현재 소스)에서 삭제된 내용 (TOBE에는 없음)
 					console.log("DIFF_DELETE (ASIS deleted):", JSON.stringify(text));
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
@@ -235202,19 +235210,19 @@ class IdeDiff extends HTMLElement {
 						asisCursor += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
 					}
 
-					// ⭐️ ASIS 에디터에 버튼 추가: ASIS의 삭제 내용을 TOBE로 '적용' (TOBE에 해당 내용 삽입)
+					// ⭐️ ASIS (현재 소스) 에디터에 버튼 추가: AI가 삭제한 것을 ASIS 기준으로 '되돌리기' (TOBE에서 해당 내용을 제거)
 					asisButtonBuilder.add(
-						asisRangeStart, // ASIS에서의 해당 Diff 청크 시작 오프셋
+						asisRangeStart,
 						asisRangeStart,
 						Decoration.widget({
 							widget: new MergeButtonWidget(
-								true, // 이 버튼은 ASIS 에디터에 붙는 버튼 (적용)
-								text, // ASIS에서 삭제된 내용을 TOBE에 삽입
-								currentInstance.#tobeEditorView, // 대상 에디터는 TOBE
-								{ from: tobeRangeStart, to: tobeRangeStart + 0 }, // TOBE에서 '삽입될' 위치
+								true, // 이 버튼은 ASIS 에디터에 붙는 버튼
+								"",   // TOBE에서 해당 내용을 '제거'하므로 삽입할 텍스트는 없음
+								currentInstance.#tobeEditorView, // 대상 에디터는 TOBE (AI 추천)
+								{ from: tobeRangeStart, to: tobeRangeStart + text.length }, // TOBE에서 '삭제될' 범위
 								currentInstance
 							),
-							side: 1 // 텍스트 뒤에 삽입
+							side: 1
 						})
 					);
 					break;
@@ -235229,8 +235237,8 @@ class IdeDiff extends HTMLElement {
 		return {
 			asisDecorations: asisLineBuilder.finish(),
 			tobeDecorations: tobeLineBuilder.finish(),
-			asisButtonDecorations: asisButtonBuilder.finish(), // ⭐️ 추가 반환
-			tobeButtonDecorations: tobeButtonBuilder.finish()  // ⭐️ 추가 반환
+			asisButtonDecorations: asisButtonBuilder.finish(),
+			tobeButtonDecorations: tobeButtonBuilder.finish()
 		};
 	};
 
@@ -235243,13 +235251,13 @@ class IdeDiff extends HTMLElement {
 		this.#asisEditorView.dispatch({
 			effects: [
 				setAsisDecorationsEffect.of(asisDecorations),
-				setAsisButtonDecorationsEffect.of(asisButtonDecorations) // ⭐️ Effect 추가
+				setAsisButtonDecorationsEffect.of(asisButtonDecorations)
 			]
 		});
 		this.#tobeEditorView.dispatch({
 			effects: [
 				setTobeDecorationsEffect.of(tobeDecorations),
-				setTobeButtonDecorationsEffect.of(tobeButtonDecorations) // ⭐️ Effect 추가
+				setTobeButtonDecorationsEffect.of(tobeButtonDecorations)
 			]
 		});
 	};

package/dist/bundle.esm.js

@@ -234899,22 +234899,34 @@ const tobeButtonDecorations = StateField.define({
 class MergeButtonWidget extends WidgetType {
 	constructor(isAsisButton, textToApply, targetEditorView, diffRange, hostComponent) {
 		super();
-		this.isAsisButton = isAsisButton;
-		this.textToApply = textToApply;
-		this.targetEditorView = targetEditorView;
-		this.diffRange = diffRange;
-		this.hostComponent = hostComponent;
+		this.isAsisButton = isAsisButton; // 이 버튼이 ASIS 에디터에 붙는 버튼인가 (true) TOBE 에디터에 붙는 버튼인가 (false)
+		this.textToApply = textToApply; // 적용할 텍스트
+		this.targetEditorView = targetEditorView; // 텍스트를 적용할 에디터 뷰 (상대편 에디터)
+		this.diffRange = diffRange; // 대상 에디터에서 변경이 일어날 정확한 from/to 오프셋
+		this.hostComponent = hostComponent; // IdeDiff 인스턴스 참조
 	}
 
+	// 위젯이 차지할 공간을 텍스트 줄에 할당할지 여부. false로 설정하여 버튼이 줄 사이에 끼어들지 않도록 함.
 	eq(other) { return false; }
 
+	// 위젯의 DOM 요소를 생성합니다.
 	toDOM(view) {
 		const button = document.createElement("button");
-		button.className = `cm-merge-button ${this.isAsisButton ? 'accept' : 'revert'}`;
-		button.textContent = this.isAsisButton ? "→ 적용" : "← 되돌리기";
+		// SVN 기준 명칭으로 변경
+		if (this.isAsisButton) {
+			// ASIS (왼쪽) 에디터에 붙는 버튼: AI가 삭제한 것을 '되돌리기'
+			button.className = "cm-merge-button revert"; // 'revert' 클래스 사용
+			button.textContent = "← 되돌리기";
+		} else {
+			// TOBE (오른쪽) 에디터에 붙는 버튼: AI가 추가한 것을 '적용'
+			button.className = "cm-merge-button accept"; // 'accept' 클래스 사용
+			button.textContent = "→ 적용";
+		}
+
 
+		// 클릭 이벤트 핸들러
 		button.addEventListener("click", () => {
-			console.log(`버튼 클릭: ${this.isAsisButton ? 'ASIS -> TOBE' : 'TOBE -> ASIS'}`, this.textToApply);
+			console.log(`버튼 클릭: ${this.isAsisButton ? 'ASIS 쪽 (되돌리기)' : 'TOBE 쪽 (적용)'}`, this.textToApply);
 			console.log("대상 에디터:", this.targetEditorView === this.hostComponent.asisEditorView ? "ASIS" : "TOBE");
 			console.log("대상 범위:", this.diffRange);
 
@@ -234927,22 +234939,13 @@ class MergeButtonWidget extends WidgetType {
 		return container;
 	}
 
+	// 실제 변경 적용 로직
 	applyChanges(text, editorView, range) {
 		if (!editorView || !range) {
 			console.error("Target editor view or range is undefined.", editorView, range);
 			return;
 		}
 
-		// 특정 줄의 시작 오프셋과 끝 오프셋을 정확히 계산하여 적용해야 합니다.
-		// 현재 로직은 단순 치환이므로 Diff 유형에 따라 복잡해질 수 있습니다.
-		// 예를 들어, TOBE에 삽입된 내용을 ASIS에서 되돌릴 경우, ASIS에서 해당 내용 길이만큼의 공백을 지워야 합니다.
-		// ASIS에서 삭제된 내용을 TOBE에 적용할 경우, TOBE의 해당 위치에 내용을 삽입해야 합니다.
-
-		// CodeMirror의 Doc에서 특정 범위를 가져오는 것은 `state.sliceDoc(from, to)`
-		// `dmp.diff_main`의 결과는 줄 단위로 매핑된 문자열이므로,
-		// 실제 오프셋 계산 및 적용 로직은 더 정교해야 합니다.
-		// 지금은 임시로 range.from, range.to를 사용합니다.
-
 		editorView.dispatch({
 			changes: {
 				from: range.from,
@@ -234970,9 +234973,14 @@ class IdeDiff extends HTMLElement {
 	_asisScrollHandler = null;
 	_tobeScrollHandler = null;
 
+	// MergeButtonWidget에서 접근할 수 있도록 Getter를 공개합니다.
 	get asisEditorView() {
 		return this.#asisEditorView;
-	};
+	}
+	get tobeEditorView() {
+		return this.#tobeEditorView;
+	}
+
 
 	constructor() {
 		super();
@@ -234982,7 +234990,9 @@ class IdeDiff extends HTMLElement {
 	connectedCallback() {
 		this.shadowRoot.innerHTML = `
             <style>
+                /* ninegrid CSS 및 필요한 기본 스타일 임포트 */
                 @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
+                /* 새로 만든 ideDiff.css 파일 임포트 */
                 ${ninegrid.getCustomPath(this, "ideDiff.css")}
             </style>
 
@@ -235053,9 +235063,9 @@ class IdeDiff extends HTMLElement {
 				extensions: [
 					basicExtensions,
 					this.#languageCompartment.of(javascript()),
-					EditorState.readOnly.of(true),
+					EditorState.readOnly.of(true), // ASIS는 읽기 전용 유지 (원본 소스)
 					asisDiffDecorations,
-					asisButtonDecorations, // ⭐️ 새로운 StateField 추가
+					asisButtonDecorations,
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
 							update.view._initialAsisContentLoaded = true;
@@ -235073,8 +235083,9 @@ class IdeDiff extends HTMLElement {
 				extensions: [
 					basicExtensions,
 					this.#languageCompartment.of(javascript()),
+					// EditorState.readOnly.of(true), // TOBE는 AI 추천 소스이므로 편집 가능 (혹은 ASIS로만 적용)
 					tobeDiffDecorations,
-					tobeButtonDecorations, // ⭐️ 새로운 StateField 추가
+					tobeButtonDecorations,
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
 							update.view._initialTobeContentLoaded = true;
@@ -235140,8 +235151,8 @@ class IdeDiff extends HTMLElement {
 
 		const asisLineBuilder = new RangeSetBuilder();
 		const tobeLineBuilder = new RangeSetBuilder();
-		const asisButtonBuilder = new RangeSetBuilder(); // ⭐️ 새로운 빌더
-		const tobeButtonBuilder = new RangeSetBuilder(); // ⭐️ 새로운 빌더
+		const asisButtonBuilder = new RangeSetBuilder();
+		const tobeButtonBuilder = new RangeSetBuilder();
 
 		let asisCursor = 0;
 		let tobeCursor = 0;
@@ -235158,7 +235169,7 @@ class IdeDiff extends HTMLElement {
 			const tobeRangeStart = tobeCursor;
 
 			switch (op) {
-				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT: // TOBE에 추가된 내용 (ASIS에는 없음)
+				case diffMatchPatchExports.diff_match_patch.DIFF_INSERT: // TOBE (AI 추천)에 추가된 내용 (ASIS에는 없음)
 					console.log("DIFF_INSERT (TOBE added):", JSON.stringify(text));
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
@@ -235168,27 +235179,24 @@ class IdeDiff extends HTMLElement {
 						tobeCursor += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
 					}
 
-					// ⭐️ TOBE 에디터에 버튼 추가: TOBE의 추가 내용을 ASIS로 '되돌리기' (ASIS에서 제거)
-					// TOBE의 해당 Diff가 끝나는 지점에 버튼을 붙이는 것이 자연스럽습니다.
-					// tobeRangeStart는 Diff 청크의 시작 오프셋입니다.
-					// 버튼을 Line Decoration과 같은 위치에 추가하되, 별도의 builder 사용
+					// ⭐️ TOBE (AI 추천) 에디터에 버튼 추가: TOBE의 추가 내용을 ASIS (현재 소스)에 '적용'
 					tobeButtonBuilder.add(
-						tobeRangeStart, // TOBE에서의 해당 Diff 청크 시작 오프셋
+						tobeRangeStart,
 						tobeRangeStart,
 						Decoration.widget({
 							widget: new MergeButtonWidget(
-								false, // 이 버튼은 TOBE 에디터에 붙는 버튼 (되돌리기)
-								"",    // ASIS에서 해당 내용을 제거하므로 삽입할 텍스트는 없음 (즉, 삭제)
-								currentInstance.#asisEditorView, // 대상 에디터는 ASIS
-								{ from: asisRangeStart, to: asisRangeStart + text.length }, // ASIS에서 '삭제될' 범위
+								false, // 이 버튼은 TOBE 에디터에 붙는 버튼
+								text,  // AI가 추가한 내용을 ASIS에 '삽입'
+								currentInstance.#asisEditorView, // 대상 에디터는 ASIS (현재 소스)
+								{ from: asisRangeStart, to: asisRangeStart + 0 }, // ASIS에서의 '삽입될' 위치
 								currentInstance
 							),
-							side: 1 // 텍스트 뒤에 삽입 (이전에 `side: -1`로 시도했다면 `-1`이 우선순위가 더 높습니다.)
+							side: 1
 						})
 					);
 					break;
 
-				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // ASIS에서 삭제된 내용 (TOBE에는 없음)
+				case diffMatchPatchExports.diff_match_patch.DIFF_DELETE: // ASIS (현재 소스)에서 삭제된 내용 (TOBE에는 없음)
 					console.log("DIFF_DELETE (ASIS deleted):", JSON.stringify(text));
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
@@ -235198,19 +235206,19 @@ class IdeDiff extends HTMLElement {
 						asisCursor += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
 					}
 
-					// ⭐️ ASIS 에디터에 버튼 추가: ASIS의 삭제 내용을 TOBE로 '적용' (TOBE에 해당 내용 삽입)
+					// ⭐️ ASIS (현재 소스) 에디터에 버튼 추가: AI가 삭제한 것을 ASIS 기준으로 '되돌리기' (TOBE에서 해당 내용을 제거)
 					asisButtonBuilder.add(
-						asisRangeStart, // ASIS에서의 해당 Diff 청크 시작 오프셋
+						asisRangeStart,
 						asisRangeStart,
 						Decoration.widget({
 							widget: new MergeButtonWidget(
-								true, // 이 버튼은 ASIS 에디터에 붙는 버튼 (적용)
-								text, // ASIS에서 삭제된 내용을 TOBE에 삽입
-								currentInstance.#tobeEditorView, // 대상 에디터는 TOBE
-								{ from: tobeRangeStart, to: tobeRangeStart + 0 }, // TOBE에서 '삽입될' 위치
+								true, // 이 버튼은 ASIS 에디터에 붙는 버튼
+								"",   // TOBE에서 해당 내용을 '제거'하므로 삽입할 텍스트는 없음
+								currentInstance.#tobeEditorView, // 대상 에디터는 TOBE (AI 추천)
+								{ from: tobeRangeStart, to: tobeRangeStart + text.length }, // TOBE에서 '삭제될' 범위
 								currentInstance
 							),
-							side: 1 // 텍스트 뒤에 삽입
+							side: 1
 						})
 					);
 					break;
@@ -235225,8 +235233,8 @@ class IdeDiff extends HTMLElement {
 		return {
 			asisDecorations: asisLineBuilder.finish(),
 			tobeDecorations: tobeLineBuilder.finish(),
-			asisButtonDecorations: asisButtonBuilder.finish(), // ⭐️ 추가 반환
-			tobeButtonDecorations: tobeButtonBuilder.finish()  // ⭐️ 추가 반환
+			asisButtonDecorations: asisButtonBuilder.finish(),
+			tobeButtonDecorations: tobeButtonBuilder.finish()
 		};
 	};
 
@@ -235239,13 +235247,13 @@ class IdeDiff extends HTMLElement {
 		this.#asisEditorView.dispatch({
 			effects: [
 				setAsisDecorationsEffect.of(asisDecorations),
-				setAsisButtonDecorationsEffect.of(asisButtonDecorations) // ⭐️ Effect 추가
+				setAsisButtonDecorationsEffect.of(asisButtonDecorations)
 			]
 		});
 		this.#tobeEditorView.dispatch({
 			effects: [
 				setTobeDecorationsEffect.of(tobeDecorations),
-				setTobeButtonDecorationsEffect.of(tobeButtonDecorations) // ⭐️ Effect 추가
+				setTobeButtonDecorationsEffect.of(tobeButtonDecorations)
 			]
 		});
 	};

package/dist/components/ideDiff.js

@@ -99,22 +99,34 @@ const tobeButtonDecorations = StateField.define({
 class MergeButtonWidget extends WidgetType {
 	constructor(isAsisButton, textToApply, targetEditorView, diffRange, hostComponent) {
 		super();
-		this.isAsisButton = isAsisButton;
-		this.textToApply = textToApply;
-		this.targetEditorView = targetEditorView;
-		this.diffRange = diffRange;
-		this.hostComponent = hostComponent;
+		this.isAsisButton = isAsisButton; // 이 버튼이 ASIS 에디터에 붙는 버튼인가 (true) TOBE 에디터에 붙는 버튼인가 (false)
+		this.textToApply = textToApply; // 적용할 텍스트
+		this.targetEditorView = targetEditorView; // 텍스트를 적용할 에디터 뷰 (상대편 에디터)
+		this.diffRange = diffRange; // 대상 에디터에서 변경이 일어날 정확한 from/to 오프셋
+		this.hostComponent = hostComponent; // IdeDiff 인스턴스 참조
 	}
 
+	// 위젯이 차지할 공간을 텍스트 줄에 할당할지 여부. false로 설정하여 버튼이 줄 사이에 끼어들지 않도록 함.
 	eq(other) { return false; }
 
+	// 위젯의 DOM 요소를 생성합니다.
 	toDOM(view) {
 		const button = document.createElement("button");
-		button.className = `cm-merge-button ${this.isAsisButton ? 'accept' : 'revert'}`;
-		button.textContent = this.isAsisButton ? "→ 적용" : "← 되돌리기";
+		// SVN 기준 명칭으로 변경
+		if (this.isAsisButton) {
+			// ASIS (왼쪽) 에디터에 붙는 버튼: AI가 삭제한 것을 '되돌리기'
+			button.className = "cm-merge-button revert"; // 'revert' 클래스 사용
+			button.textContent = "← 되돌리기";
+		} else {
+			// TOBE (오른쪽) 에디터에 붙는 버튼: AI가 추가한 것을 '적용'
+			button.className = "cm-merge-button accept"; // 'accept' 클래스 사용
+			button.textContent = "→ 적용";
+		}
+
 
+		// 클릭 이벤트 핸들러
 		button.addEventListener("click", () => {
-			console.log(`버튼 클릭: ${this.isAsisButton ? 'ASIS -> TOBE' : 'TOBE -> ASIS'}`, this.textToApply);
+			console.log(`버튼 클릭: ${this.isAsisButton ? 'ASIS 쪽 (되돌리기)' : 'TOBE 쪽 (적용)'}`, this.textToApply);
 			console.log("대상 에디터:", this.targetEditorView === this.hostComponent.asisEditorView ? "ASIS" : "TOBE");
 			console.log("대상 범위:", this.diffRange);
 
@@ -127,22 +139,13 @@ class MergeButtonWidget extends WidgetType {
 		return container;
 	}
 
+	// 실제 변경 적용 로직
 	applyChanges(text, editorView, range) {
 		if (!editorView || !range) {
 			console.error("Target editor view or range is undefined.", editorView, range);
 			return;
 		}
 
-		// 특정 줄의 시작 오프셋과 끝 오프셋을 정확히 계산하여 적용해야 합니다.
-		// 현재 로직은 단순 치환이므로 Diff 유형에 따라 복잡해질 수 있습니다.
-		// 예를 들어, TOBE에 삽입된 내용을 ASIS에서 되돌릴 경우, ASIS에서 해당 내용 길이만큼의 공백을 지워야 합니다.
-		// ASIS에서 삭제된 내용을 TOBE에 적용할 경우, TOBE의 해당 위치에 내용을 삽입해야 합니다.
-
-		// CodeMirror의 Doc에서 특정 범위를 가져오는 것은 `state.sliceDoc(from, to)`
-		// `dmp.diff_main`의 결과는 줄 단위로 매핑된 문자열이므로,
-		// 실제 오프셋 계산 및 적용 로직은 더 정교해야 합니다.
-		// 지금은 임시로 range.from, range.to를 사용합니다.
-
 		editorView.dispatch({
 			changes: {
 				from: range.from,
@@ -170,9 +173,14 @@ export class IdeDiff extends HTMLElement {
 	_asisScrollHandler = null;
 	_tobeScrollHandler = null;
 
+	// MergeButtonWidget에서 접근할 수 있도록 Getter를 공개합니다.
 	get asisEditorView() {
 		return this.#asisEditorView;
-	};
+	}
+	get tobeEditorView() {
+		return this.#tobeEditorView;
+	}
+
 
 	constructor() {
 		super();
@@ -182,7 +190,9 @@ export class IdeDiff extends HTMLElement {
 	connectedCallback() {
 		this.shadowRoot.innerHTML = `
             <style>
+                /* ninegrid CSS 및 필요한 기본 스타일 임포트 */
                 @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
+                /* 새로 만든 ideDiff.css 파일 임포트 */
                 ${ninegrid.getCustomPath(this, "ideDiff.css")}
             </style>
 
@@ -253,9 +263,9 @@ export class IdeDiff extends HTMLElement {
 				extensions: [
 					basicExtensions,
 					this.#languageCompartment.of(javascript()),
-					EditorState.readOnly.of(true),
+					EditorState.readOnly.of(true), // ASIS는 읽기 전용 유지 (원본 소스)
 					asisDiffDecorations,
-					asisButtonDecorations, // ⭐️ 새로운 StateField 추가
+					asisButtonDecorations,
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
 							update.view._initialAsisContentLoaded = true;
@@ -273,8 +283,9 @@ export class IdeDiff extends HTMLElement {
 				extensions: [
 					basicExtensions,
 					this.#languageCompartment.of(javascript()),
+					// EditorState.readOnly.of(true), // TOBE는 AI 추천 소스이므로 편집 가능 (혹은 ASIS로만 적용)
 					tobeDiffDecorations,
-					tobeButtonDecorations, // ⭐️ 새로운 StateField 추가
+					tobeButtonDecorations,
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
 							update.view._initialTobeContentLoaded = true;
@@ -340,8 +351,8 @@ export class IdeDiff extends HTMLElement {
 
 		const asisLineBuilder = new RangeSetBuilder();
 		const tobeLineBuilder = new RangeSetBuilder();
-		const asisButtonBuilder = new RangeSetBuilder(); // ⭐️ 새로운 빌더
-		const tobeButtonBuilder = new RangeSetBuilder(); // ⭐️ 새로운 빌더
+		const asisButtonBuilder = new RangeSetBuilder();
+		const tobeButtonBuilder = new RangeSetBuilder();
 
 		let asisCursor = 0;
 		let tobeCursor = 0;
@@ -358,7 +369,7 @@ export class IdeDiff extends HTMLElement {
 			const tobeRangeStart = tobeCursor;
 
 			switch (op) {
-				case diff_match_patch.DIFF_INSERT: // TOBE에 추가된 내용 (ASIS에는 없음)
+				case diff_match_patch.DIFF_INSERT: // TOBE (AI 추천)에 추가된 내용 (ASIS에는 없음)
 					console.log("DIFF_INSERT (TOBE added):", JSON.stringify(text));
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
@@ -368,27 +379,24 @@ export class IdeDiff extends HTMLElement {
 						tobeCursor += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
 					}
 
-					// ⭐️ TOBE 에디터에 버튼 추가: TOBE의 추가 내용을 ASIS로 '되돌리기' (ASIS에서 제거)
-					// TOBE의 해당 Diff가 끝나는 지점에 버튼을 붙이는 것이 자연스럽습니다.
-					// tobeRangeStart는 Diff 청크의 시작 오프셋입니다.
-					// 버튼을 Line Decoration과 같은 위치에 추가하되, 별도의 builder 사용
+					// ⭐️ TOBE (AI 추천) 에디터에 버튼 추가: TOBE의 추가 내용을 ASIS (현재 소스)에 '적용'
 					tobeButtonBuilder.add(
-						tobeRangeStart, // TOBE에서의 해당 Diff 청크 시작 오프셋
+						tobeRangeStart,
 						tobeRangeStart,
 						Decoration.widget({
 							widget: new MergeButtonWidget(
-								false, // 이 버튼은 TOBE 에디터에 붙는 버튼 (되돌리기)
-								"",    // ASIS에서 해당 내용을 제거하므로 삽입할 텍스트는 없음 (즉, 삭제)
-								currentInstance.#asisEditorView, // 대상 에디터는 ASIS
-								{ from: asisRangeStart, to: asisRangeStart + text.length }, // ASIS에서 '삭제될' 범위
+								false, // 이 버튼은 TOBE 에디터에 붙는 버튼
+								text,  // AI가 추가한 내용을 ASIS에 '삽입'
+								currentInstance.#asisEditorView, // 대상 에디터는 ASIS (현재 소스)
+								{ from: asisRangeStart, to: asisRangeStart + 0 }, // ASIS에서의 '삽입될' 위치
 								currentInstance
 							),
-							side: 1 // 텍스트 뒤에 삽입 (이전에 `side: -1`로 시도했다면 `-1`이 우선순위가 더 높습니다.)
+							side: 1
 						})
 					);
 					break;
 
-				case diff_match_patch.DIFF_DELETE: // ASIS에서 삭제된 내용 (TOBE에는 없음)
+				case diff_match_patch.DIFF_DELETE: // ASIS (현재 소스)에서 삭제된 내용 (TOBE에는 없음)
 					console.log("DIFF_DELETE (ASIS deleted):", JSON.stringify(text));
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
@@ -398,19 +406,19 @@ export class IdeDiff extends HTMLElement {
 						asisCursor += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
 					}
 
-					// ⭐️ ASIS 에디터에 버튼 추가: ASIS의 삭제 내용을 TOBE로 '적용' (TOBE에 해당 내용 삽입)
+					// ⭐️ ASIS (현재 소스) 에디터에 버튼 추가: AI가 삭제한 것을 ASIS 기준으로 '되돌리기' (TOBE에서 해당 내용을 제거)
 					asisButtonBuilder.add(
-						asisRangeStart, // ASIS에서의 해당 Diff 청크 시작 오프셋
+						asisRangeStart,
 						asisRangeStart,
 						Decoration.widget({
 							widget: new MergeButtonWidget(
-								true, // 이 버튼은 ASIS 에디터에 붙는 버튼 (적용)
-								text, // ASIS에서 삭제된 내용을 TOBE에 삽입
-								currentInstance.#tobeEditorView, // 대상 에디터는 TOBE
-								{ from: tobeRangeStart, to: tobeRangeStart + 0 }, // TOBE에서 '삽입될' 위치
+								true, // 이 버튼은 ASIS 에디터에 붙는 버튼
+								"",   // TOBE에서 해당 내용을 '제거'하므로 삽입할 텍스트는 없음
+								currentInstance.#tobeEditorView, // 대상 에디터는 TOBE (AI 추천)
+								{ from: tobeRangeStart, to: tobeRangeStart + text.length }, // TOBE에서 '삭제될' 범위
 								currentInstance
 							),
-							side: 1 // 텍스트 뒤에 삽입
+							side: 1
 						})
 					);
 					break;
@@ -425,8 +433,8 @@ export class IdeDiff extends HTMLElement {
 		return {
 			asisDecorations: asisLineBuilder.finish(),
 			tobeDecorations: tobeLineBuilder.finish(),
-			asisButtonDecorations: asisButtonBuilder.finish(), // ⭐️ 추가 반환
-			tobeButtonDecorations: tobeButtonBuilder.finish()  // ⭐️ 추가 반환
+			asisButtonDecorations: asisButtonBuilder.finish(),
+			tobeButtonDecorations: tobeButtonBuilder.finish()
 		};
 	};
 
@@ -439,13 +447,13 @@ export class IdeDiff extends HTMLElement {
 		this.#asisEditorView.dispatch({
 			effects: [
 				setAsisDecorationsEffect.of(asisDecorations),
-				setAsisButtonDecorationsEffect.of(asisButtonDecorations) // ⭐️ Effect 추가
+				setAsisButtonDecorationsEffect.of(asisButtonDecorations)
 			]
 		});
 		this.#tobeEditorView.dispatch({
 			effects: [
 				setTobeDecorationsEffect.of(tobeDecorations),
-				setTobeButtonDecorationsEffect.of(tobeButtonDecorations) // ⭐️ Effect 추가
+				setTobeButtonDecorationsEffect.of(tobeButtonDecorations)
 			]
 		});
 	};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ide-assi",
   "type": "module",
-  "version": "0.441.0",
+  "version": "0.442.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/components/ideDiff.js

@@ -99,22 +99,34 @@ const tobeButtonDecorations = StateField.define({
 class MergeButtonWidget extends WidgetType {
 	constructor(isAsisButton, textToApply, targetEditorView, diffRange, hostComponent) {
 		super();
-		this.isAsisButton = isAsisButton;
-		this.textToApply = textToApply;
-		this.targetEditorView = targetEditorView;
-		this.diffRange = diffRange;
-		this.hostComponent = hostComponent;
+		this.isAsisButton = isAsisButton; // 이 버튼이 ASIS 에디터에 붙는 버튼인가 (true) TOBE 에디터에 붙는 버튼인가 (false)
+		this.textToApply = textToApply; // 적용할 텍스트
+		this.targetEditorView = targetEditorView; // 텍스트를 적용할 에디터 뷰 (상대편 에디터)
+		this.diffRange = diffRange; // 대상 에디터에서 변경이 일어날 정확한 from/to 오프셋
+		this.hostComponent = hostComponent; // IdeDiff 인스턴스 참조
 	}
 
+	// 위젯이 차지할 공간을 텍스트 줄에 할당할지 여부. false로 설정하여 버튼이 줄 사이에 끼어들지 않도록 함.
 	eq(other) { return false; }
 
+	// 위젯의 DOM 요소를 생성합니다.
 	toDOM(view) {
 		const button = document.createElement("button");
-		button.className = `cm-merge-button ${this.isAsisButton ? 'accept' : 'revert'}`;
-		button.textContent = this.isAsisButton ? "→ 적용" : "← 되돌리기";
+		// SVN 기준 명칭으로 변경
+		if (this.isAsisButton) {
+			// ASIS (왼쪽) 에디터에 붙는 버튼: AI가 삭제한 것을 '되돌리기'
+			button.className = "cm-merge-button revert"; // 'revert' 클래스 사용
+			button.textContent = "← 되돌리기";
+		} else {
+			// TOBE (오른쪽) 에디터에 붙는 버튼: AI가 추가한 것을 '적용'
+			button.className = "cm-merge-button accept"; // 'accept' 클래스 사용
+			button.textContent = "→ 적용";
+		}
+
 
+		// 클릭 이벤트 핸들러
 		button.addEventListener("click", () => {
-			console.log(`버튼 클릭: ${this.isAsisButton ? 'ASIS -> TOBE' : 'TOBE -> ASIS'}`, this.textToApply);
+			console.log(`버튼 클릭: ${this.isAsisButton ? 'ASIS 쪽 (되돌리기)' : 'TOBE 쪽 (적용)'}`, this.textToApply);
 			console.log("대상 에디터:", this.targetEditorView === this.hostComponent.asisEditorView ? "ASIS" : "TOBE");
 			console.log("대상 범위:", this.diffRange);
 
@@ -127,22 +139,13 @@ class MergeButtonWidget extends WidgetType {
 		return container;
 	}
 
+	// 실제 변경 적용 로직
 	applyChanges(text, editorView, range) {
 		if (!editorView || !range) {
 			console.error("Target editor view or range is undefined.", editorView, range);
 			return;
 		}
 
-		// 특정 줄의 시작 오프셋과 끝 오프셋을 정확히 계산하여 적용해야 합니다.
-		// 현재 로직은 단순 치환이므로 Diff 유형에 따라 복잡해질 수 있습니다.
-		// 예를 들어, TOBE에 삽입된 내용을 ASIS에서 되돌릴 경우, ASIS에서 해당 내용 길이만큼의 공백을 지워야 합니다.
-		// ASIS에서 삭제된 내용을 TOBE에 적용할 경우, TOBE의 해당 위치에 내용을 삽입해야 합니다.
-
-		// CodeMirror의 Doc에서 특정 범위를 가져오는 것은 `state.sliceDoc(from, to)`
-		// `dmp.diff_main`의 결과는 줄 단위로 매핑된 문자열이므로,
-		// 실제 오프셋 계산 및 적용 로직은 더 정교해야 합니다.
-		// 지금은 임시로 range.from, range.to를 사용합니다.
-
 		editorView.dispatch({
 			changes: {
 				from: range.from,
@@ -170,9 +173,14 @@ export class IdeDiff extends HTMLElement {
 	_asisScrollHandler = null;
 	_tobeScrollHandler = null;
 
+	// MergeButtonWidget에서 접근할 수 있도록 Getter를 공개합니다.
 	get asisEditorView() {
 		return this.#asisEditorView;
-	};
+	}
+	get tobeEditorView() {
+		return this.#tobeEditorView;
+	}
+
 
 	constructor() {
 		super();
@@ -182,7 +190,9 @@ export class IdeDiff extends HTMLElement {
 	connectedCallback() {
 		this.shadowRoot.innerHTML = `
             <style>
+                /* ninegrid CSS 및 필요한 기본 스타일 임포트 */
                 @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/ideDiff.css";
+                /* 새로 만든 ideDiff.css 파일 임포트 */
                 ${ninegrid.getCustomPath(this, "ideDiff.css")}
             </style>
 
@@ -253,9 +263,9 @@ export class IdeDiff extends HTMLElement {
 				extensions: [
 					basicExtensions,
 					this.#languageCompartment.of(javascript()),
-					EditorState.readOnly.of(true),
+					EditorState.readOnly.of(true), // ASIS는 읽기 전용 유지 (원본 소스)
 					asisDiffDecorations,
-					asisButtonDecorations, // ⭐️ 새로운 StateField 추가
+					asisButtonDecorations,
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialAsisContentLoaded) {
 							update.view._initialAsisContentLoaded = true;
@@ -273,8 +283,9 @@ export class IdeDiff extends HTMLElement {
 				extensions: [
 					basicExtensions,
 					this.#languageCompartment.of(javascript()),
+					// EditorState.readOnly.of(true), // TOBE는 AI 추천 소스이므로 편집 가능 (혹은 ASIS로만 적용)
 					tobeDiffDecorations,
-					tobeButtonDecorations, // ⭐️ 새로운 StateField 추가
+					tobeButtonDecorations,
 					EditorView.updateListener.of((update) => {
 						if (update.view.contentDOM.firstChild && !update.view._initialTobeContentLoaded) {
 							update.view._initialTobeContentLoaded = true;
@@ -340,8 +351,8 @@ export class IdeDiff extends HTMLElement {
 
 		const asisLineBuilder = new RangeSetBuilder();
 		const tobeLineBuilder = new RangeSetBuilder();
-		const asisButtonBuilder = new RangeSetBuilder(); // ⭐️ 새로운 빌더
-		const tobeButtonBuilder = new RangeSetBuilder(); // ⭐️ 새로운 빌더
+		const asisButtonBuilder = new RangeSetBuilder();
+		const tobeButtonBuilder = new RangeSetBuilder();
 
 		let asisCursor = 0;
 		let tobeCursor = 0;
@@ -358,7 +369,7 @@ export class IdeDiff extends HTMLElement {
 			const tobeRangeStart = tobeCursor;
 
 			switch (op) {
-				case diff_match_patch.DIFF_INSERT: // TOBE에 추가된 내용 (ASIS에는 없음)
+				case diff_match_patch.DIFF_INSERT: // TOBE (AI 추천)에 추가된 내용 (ASIS에는 없음)
 					console.log("DIFF_INSERT (TOBE added):", JSON.stringify(text));
 					const tobeLines = text.split('\n');
 					for (let i = 0; i < tobeLines.length; i++) {
@@ -368,27 +379,24 @@ export class IdeDiff extends HTMLElement {
 						tobeCursor += tobeLines[i].length + (i < tobeLines.length - 1 ? 1 : 0);
 					}
 
-					// ⭐️ TOBE 에디터에 버튼 추가: TOBE의 추가 내용을 ASIS로 '되돌리기' (ASIS에서 제거)
-					// TOBE의 해당 Diff가 끝나는 지점에 버튼을 붙이는 것이 자연스럽습니다.
-					// tobeRangeStart는 Diff 청크의 시작 오프셋입니다.
-					// 버튼을 Line Decoration과 같은 위치에 추가하되, 별도의 builder 사용
+					// ⭐️ TOBE (AI 추천) 에디터에 버튼 추가: TOBE의 추가 내용을 ASIS (현재 소스)에 '적용'
 					tobeButtonBuilder.add(
-						tobeRangeStart, // TOBE에서의 해당 Diff 청크 시작 오프셋
+						tobeRangeStart,
 						tobeRangeStart,
 						Decoration.widget({
 							widget: new MergeButtonWidget(
-								false, // 이 버튼은 TOBE 에디터에 붙는 버튼 (되돌리기)
-								"",    // ASIS에서 해당 내용을 제거하므로 삽입할 텍스트는 없음 (즉, 삭제)
-								currentInstance.#asisEditorView, // 대상 에디터는 ASIS
-								{ from: asisRangeStart, to: asisRangeStart + text.length }, // ASIS에서 '삭제될' 범위
+								false, // 이 버튼은 TOBE 에디터에 붙는 버튼
+								text,  // AI가 추가한 내용을 ASIS에 '삽입'
+								currentInstance.#asisEditorView, // 대상 에디터는 ASIS (현재 소스)
+								{ from: asisRangeStart, to: asisRangeStart + 0 }, // ASIS에서의 '삽입될' 위치
 								currentInstance
 							),
-							side: 1 // 텍스트 뒤에 삽입 (이전에 `side: -1`로 시도했다면 `-1`이 우선순위가 더 높습니다.)
+							side: 1
 						})
 					);
 					break;
 
-				case diff_match_patch.DIFF_DELETE: // ASIS에서 삭제된 내용 (TOBE에는 없음)
+				case diff_match_patch.DIFF_DELETE: // ASIS (현재 소스)에서 삭제된 내용 (TOBE에는 없음)
 					console.log("DIFF_DELETE (ASIS deleted):", JSON.stringify(text));
 					const asisLines = text.split('\n');
 					for (let i = 0; i < asisLines.length; i++) {
@@ -398,19 +406,19 @@ export class IdeDiff extends HTMLElement {
 						asisCursor += asisLines[i].length + (i < asisLines.length - 1 ? 1 : 0);
 					}
 
-					// ⭐️ ASIS 에디터에 버튼 추가: ASIS의 삭제 내용을 TOBE로 '적용' (TOBE에 해당 내용 삽입)
+					// ⭐️ ASIS (현재 소스) 에디터에 버튼 추가: AI가 삭제한 것을 ASIS 기준으로 '되돌리기' (TOBE에서 해당 내용을 제거)
 					asisButtonBuilder.add(
-						asisRangeStart, // ASIS에서의 해당 Diff 청크 시작 오프셋
+						asisRangeStart,
 						asisRangeStart,
 						Decoration.widget({
 							widget: new MergeButtonWidget(
-								true, // 이 버튼은 ASIS 에디터에 붙는 버튼 (적용)
-								text, // ASIS에서 삭제된 내용을 TOBE에 삽입
-								currentInstance.#tobeEditorView, // 대상 에디터는 TOBE
-								{ from: tobeRangeStart, to: tobeRangeStart + 0 }, // TOBE에서 '삽입될' 위치
+								true, // 이 버튼은 ASIS 에디터에 붙는 버튼
+								"",   // TOBE에서 해당 내용을 '제거'하므로 삽입할 텍스트는 없음
+								currentInstance.#tobeEditorView, // 대상 에디터는 TOBE (AI 추천)
+								{ from: tobeRangeStart, to: tobeRangeStart + text.length }, // TOBE에서 '삭제될' 범위
 								currentInstance
 							),
-							side: 1 // 텍스트 뒤에 삽입
+							side: 1
 						})
 					);
 					break;
@@ -425,8 +433,8 @@ export class IdeDiff extends HTMLElement {
 		return {
 			asisDecorations: asisLineBuilder.finish(),
 			tobeDecorations: tobeLineBuilder.finish(),
-			asisButtonDecorations: asisButtonBuilder.finish(), // ⭐️ 추가 반환
-			tobeButtonDecorations: tobeButtonBuilder.finish()  // ⭐️ 추가 반환
+			asisButtonDecorations: asisButtonBuilder.finish(),
+			tobeButtonDecorations: tobeButtonBuilder.finish()
 		};
 	};
 
@@ -439,13 +447,13 @@ export class IdeDiff extends HTMLElement {
 		this.#asisEditorView.dispatch({
 			effects: [
 				setAsisDecorationsEffect.of(asisDecorations),
-				setAsisButtonDecorationsEffect.of(asisButtonDecorations) // ⭐️ Effect 추가
+				setAsisButtonDecorationsEffect.of(asisButtonDecorations)
 			]
 		});
 		this.#tobeEditorView.dispatch({
 			effects: [
 				setTobeDecorationsEffect.of(tobeDecorations),
-				setTobeButtonDecorationsEffect.of(tobeButtonDecorations) // ⭐️ Effect 추가
+				setTobeButtonDecorationsEffect.of(tobeButtonDecorations)
 			]
 		});
 	};