refactor(ui): Antigravity-style conversation — task cards group tool actions, remove internal steps, mode badges
This commit is contained in:
@@ -500,6 +500,30 @@ body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
word-break: break-word;
|
||||
font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.msg-step-check {
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.msg-mode-badge {
|
||||
margin-left: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.md-code {
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
font-family: 'JetBrains Mono', 'Cascadia Code', monospace;
|
||||
font-size: 12px;
|
||||
overflow-x: auto;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
/* --- 텍스트 메시지 --- */
|
||||
|
||||
105
public/js/app.js
105
public/js/app.js
@@ -159,20 +159,46 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* Trajectory 스텝 배열을 ChatPanel message[] 형식으로 변환
|
||||
* Trajectory 스텝을 Antigravity 스타일 대화 흐름으로 변환
|
||||
*
|
||||
* 규칙:
|
||||
* - USER_INPUT → 사용자 턴 구분자 (새 대화 블록 시작)
|
||||
* - NOTIFY_USER → AI의 최종 응답 (마크다운)
|
||||
* - TASK_BOUNDARY → 작업 카드 (이후 도구 스텝들을 내부 요약으로 포함)
|
||||
* - RUN_COMMAND, CODE_ACTION → task 카드 내부 도구 호출 요약
|
||||
* - 기타 (PLANNER_RESPONSE, EPHEMERAL, VIEW_FILE 등) → 건너뛰기
|
||||
*/
|
||||
function parseTrajectoryToMessages(steps) {
|
||||
const msgs = [];
|
||||
let currentTask = null; // 현재 활성 task 카드
|
||||
let toolActions = []; // 현재 task 내 도구 호출들
|
||||
|
||||
function flushTask() {
|
||||
if (currentTask) {
|
||||
currentTask.tools = [...toolActions];
|
||||
msgs.push(currentTask);
|
||||
currentTask = null;
|
||||
toolActions = [];
|
||||
}
|
||||
}
|
||||
|
||||
for (const step of steps) {
|
||||
switch (step.type) {
|
||||
case 'CORTEX_STEP_TYPE_USER_INPUT': {
|
||||
// 이전 task 플러시
|
||||
flushTask();
|
||||
// 사용자 턴 구분
|
||||
const text = step.userInput?.items?.[0]?.chunk?.value || '';
|
||||
if (text) {
|
||||
msgs.push({ type: 'user', text });
|
||||
}
|
||||
msgs.push({
|
||||
type: 'user',
|
||||
text: text || '(사용자 입력)',
|
||||
time: step.metadata?.createdAt || '',
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'CORTEX_STEP_TYPE_NOTIFY_USER': {
|
||||
// 이전 task 플러시
|
||||
flushTask();
|
||||
const content = step.notifyUser?.notificationContent || '';
|
||||
if (content) {
|
||||
msgs.push({
|
||||
@@ -184,13 +210,32 @@
|
||||
}
|
||||
case 'CORTEX_STEP_TYPE_TASK_BOUNDARY': {
|
||||
const tb = step.taskBoundary || {};
|
||||
if (tb.taskName) {
|
||||
msgs.push({
|
||||
if (!tb.taskName) break;
|
||||
// 같은 이름의 task는 업데이트 (중복 카드 방지)
|
||||
if (currentTask && currentTask.title === tb.taskName) {
|
||||
currentTask.summary = tb.taskSummary || currentTask.summary;
|
||||
currentTask.status = tb.taskStatus || currentTask.status;
|
||||
currentTask.mode = tb.mode || currentTask.mode;
|
||||
} else {
|
||||
flushTask();
|
||||
currentTask = {
|
||||
type: 'task',
|
||||
title: tb.taskName || '',
|
||||
title: tb.taskName,
|
||||
summary: tb.taskSummary || '',
|
||||
status: tb.taskStatus || '',
|
||||
mode: tb.mode || '',
|
||||
tools: [],
|
||||
};
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'CORTEX_STEP_TYPE_RUN_COMMAND': {
|
||||
const cmd = step.runCommand?.commandLine || step.runCommand?.command || '';
|
||||
if (cmd) {
|
||||
toolActions.push({
|
||||
icon: '⚡',
|
||||
label: cmd.length > 60 ? cmd.substring(0, 57) + '...' : cmd,
|
||||
done: step.status === 'CORTEX_STEP_STATUS_DONE',
|
||||
});
|
||||
}
|
||||
break;
|
||||
@@ -198,55 +243,37 @@
|
||||
case 'CORTEX_STEP_TYPE_CODE_ACTION': {
|
||||
const ca = step.codeAction || {};
|
||||
const file = ca.filePath || ca.targetFile || '';
|
||||
const desc = ca.description || '';
|
||||
if (file || desc) {
|
||||
msgs.push({
|
||||
type: 'code',
|
||||
language: '',
|
||||
code: '',
|
||||
description: `📝 ${file ? file.split(/[\\/]/).pop() : '파일'}: ${desc || '코드 수정'}`,
|
||||
});
|
||||
}
|
||||
const desc = ca.description || '코드 수정';
|
||||
toolActions.push({
|
||||
icon: '📝',
|
||||
label: file ? file.split(/[\\/]/).pop() + ': ' + desc : desc,
|
||||
done: step.status === 'CORTEX_STEP_STATUS_DONE',
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'CORTEX_STEP_TYPE_RUN_COMMAND': {
|
||||
const cmd = step.runCommand?.commandLine || step.runCommand?.command || '';
|
||||
if (cmd) {
|
||||
msgs.push({
|
||||
type: 'code',
|
||||
language: 'bash',
|
||||
code: cmd,
|
||||
description: `⚡ 명령 실행 (${step.status === 'CORTEX_STEP_STATUS_DONE' ? '완료' : '실행 중'})`,
|
||||
});
|
||||
}
|
||||
case 'CORTEX_STEP_TYPE_VIEW_FILE':
|
||||
case 'CORTEX_STEP_TYPE_LIST_DIRECTORY': {
|
||||
// 카운트만 — 개별 표시 안 함
|
||||
break;
|
||||
}
|
||||
case 'CORTEX_STEP_TYPE_PLANNER_RESPONSE': {
|
||||
// 에이전트 사고 과정 — 접기 가능
|
||||
const text = step.plannerResponse?.text || step.plannerResponse?.rawText || '';
|
||||
if (text && text.length > 10) {
|
||||
msgs.push({
|
||||
type: 'thought',
|
||||
text: text.substring(0, 300) + (text.length > 300 ? '...' : ''),
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
// 덜 중요한 스텝은 생략 (VIEW_FILE, LIST_DIRECTORY, EPHEMERAL 등)
|
||||
// PLANNER_RESPONSE, EPHEMERAL, CHECKPOINT, CONVERSATION_HISTORY, KNOWLEDGE_ARTIFACTS → 건너뛰기
|
||||
}
|
||||
}
|
||||
flushTask();
|
||||
return msgs;
|
||||
}
|
||||
|
||||
function simpleMarkdown(text) {
|
||||
return text
|
||||
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||
.replace(/```(\w*)\n([\s\S]*?)```/g, '<pre class="md-code"><code>$2</code></pre>')
|
||||
.replace(/\n/g, '<br>')
|
||||
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
|
||||
.replace(/`([^`]+)`/g, '<code>$1</code>')
|
||||
.replace(/^## (.*)/gm, '<h3>$1</h3>')
|
||||
.replace(/^### (.*)/gm, '<h4>$1</h4>')
|
||||
.replace(/\| (.+?) \|/g, (m) => `<span style="font-family:monospace">${m}</span>`);
|
||||
.replace(/^\- (.*)/gm, '<li>$1</li>')
|
||||
.replace(/^\d+\. (.*)/gm, '<li>$1</li>');
|
||||
}
|
||||
|
||||
// ─── 서버 메시지 핸들러 ───────────────────────────────
|
||||
|
||||
@@ -122,7 +122,7 @@ class ChatPanel {
|
||||
|
||||
const toggle = document.createElement('span');
|
||||
toggle.className = 'msg-toggle';
|
||||
toggle.textContent = msg.collapsed ? '▸' : '▾';
|
||||
toggle.textContent = '▾';
|
||||
|
||||
const title = document.createElement('span');
|
||||
title.className = 'msg-card-title';
|
||||
@@ -131,7 +131,17 @@ class ChatPanel {
|
||||
header.appendChild(toggle);
|
||||
header.appendChild(title);
|
||||
|
||||
// 요약
|
||||
// 모드 뱃지
|
||||
if (msg.mode) {
|
||||
const badge = document.createElement('span');
|
||||
badge.className = 'msg-mode-badge';
|
||||
const modeMap = { PLANNING: '📋', EXECUTION: '⚙️', VERIFICATION: '✅' };
|
||||
badge.textContent = modeMap[msg.mode] || msg.mode;
|
||||
badge.title = msg.mode;
|
||||
header.appendChild(badge);
|
||||
}
|
||||
|
||||
// 요약
|
||||
if (msg.summary) {
|
||||
const summary = document.createElement('div');
|
||||
summary.className = 'msg-card-summary';
|
||||
@@ -141,26 +151,32 @@ class ChatPanel {
|
||||
|
||||
card.appendChild(header);
|
||||
|
||||
// 하위 항목
|
||||
if (msg.steps && msg.steps.length > 0) {
|
||||
// 도구 호출 목록 (tools)
|
||||
const toolList = msg.tools || msg.steps || [];
|
||||
if (toolList.length > 0) {
|
||||
const body = document.createElement('div');
|
||||
body.className = 'msg-card-body';
|
||||
if (msg.collapsed) body.style.display = 'none';
|
||||
|
||||
for (const step of msg.steps) {
|
||||
for (const tool of toolList) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'msg-step';
|
||||
|
||||
const icon = document.createElement('span');
|
||||
icon.className = 'msg-step-icon';
|
||||
icon.textContent = step.icon || '•';
|
||||
icon.textContent = tool.icon || '•';
|
||||
|
||||
const text = document.createElement('span');
|
||||
text.className = 'msg-step-text';
|
||||
text.textContent = step.text;
|
||||
text.textContent = tool.label || tool.text || '';
|
||||
|
||||
const check = document.createElement('span');
|
||||
check.className = 'msg-step-check';
|
||||
check.textContent = tool.done ? '✓' : '…';
|
||||
check.style.color = tool.done ? '#22c55e' : '#94a3b8';
|
||||
|
||||
row.appendChild(icon);
|
||||
row.appendChild(text);
|
||||
row.appendChild(check);
|
||||
body.appendChild(row);
|
||||
}
|
||||
|
||||
@@ -175,7 +191,7 @@ class ChatPanel {
|
||||
});
|
||||
}
|
||||
|
||||
// 카드 내부 액션 버튼 (Cancel, Review Changes 등)
|
||||
// 카드 내부 액션 버튼
|
||||
if (msg.actions && msg.actions.length > 0) {
|
||||
const actionsDiv = document.createElement('div');
|
||||
actionsDiv.className = 'msg-card-actions';
|
||||
@@ -192,7 +208,7 @@ class ChatPanel {
|
||||
if (btn.x && btn.y) {
|
||||
el.style.cursor = 'pointer';
|
||||
el.addEventListener('click', (e) => {
|
||||
e.stopPropagation(); // 카드 토글 방지
|
||||
e.stopPropagation();
|
||||
if (this.onActionClick) {
|
||||
this.onActionClick({ label: btn.label, x: btn.x, y: btn.y });
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user