v2.2.267: 채팅 사이드바 Pixel Office 배너 제거 (화면 점유 해소)
채팅 위에 항상 떠 있던 Pixel Office 카드(캐릭터·Agent/Status/Task 표)가 화면을 과도하게 가리는 문제 — 시각 레이어만 제거, 기능은 보존: 제거 (media 웹뷰 시각 레이어): - sidebar.html: #pixelOffice 배너 DOM 블록 - sidebar.js: Pixel Office 렌더러 IIFE + pixelOfficeUpdate/officeSnapshot 핸들러 no-op 화 - sidebar.css: .pixel-office / .po-* 스타일 전부 보존 (백엔드·별도 패널): - 파이프라인 상태 추적(pixelOfficeOn*) 및 브로드캐스트 전부 유지 — 에이전트 동작 무영향 - 풀스크린 Astra Office 패널(Astra: Open Pixel Office (Full Screen)) 그대로 동작 - 설정 pixelOffice.enabled/bubbles 유지, 설명만 풀스크린 패널 전용으로 정정 (검증: node --check ✓ · 잔여 참조 grep 0 ✓ · tsc ✓ · jest 728/730 ✓) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1105,237 +1105,6 @@
|
|||||||
border-style: solid;
|
border-style: solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─────────────── Pixel Office ─────────────── */
|
|
||||||
.pixel-office {
|
|
||||||
display: none;
|
|
||||||
background: var(--surface);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 10px;
|
|
||||||
margin: 0 12px 6px 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.pixel-office[data-enabled="true"] { display: block; }
|
|
||||||
.pixel-office[data-collapsed="true"] .po-body { display: none; }
|
|
||||||
.po-head {
|
|
||||||
display: flex; align-items: center; justify-content: space-between;
|
|
||||||
padding: 6px 10px;
|
|
||||||
background: rgba(99,102,241,0.08);
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
.pixel-office[data-collapsed="true"] .po-head { border-bottom: none; }
|
|
||||||
.po-head-left { display: flex; align-items: center; gap: 8px; }
|
|
||||||
.po-title { font-size: 11px; font-weight: 700; color: var(--text-bright); }
|
|
||||||
.po-status-label {
|
|
||||||
font-size: 10px; padding: 2px 8px; border-radius: 9999px;
|
|
||||||
background: var(--bg); color: var(--text-dim);
|
|
||||||
font-weight: 600; letter-spacing: 0.02em;
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
/* 상태별 색상 강조 — webview JS가 po-status-{status} 클래스를 셋팅. */
|
|
||||||
.po-status-label.po-status-idle { color: var(--text-dim); }
|
|
||||||
.po-status-label.po-status-intake { color: #60A5FA; border-color: #60A5FA; }
|
|
||||||
.po-status-label.po-status-analyzing { color: #A78BFA; border-color: #A78BFA; }
|
|
||||||
.po-status-label.po-status-need_clarification { color: #F5C518; border-color: #F5C518; }
|
|
||||||
.po-status-label.po-status-contract_ready { color: #10B981; border-color: #10B981; }
|
|
||||||
.po-status-label.po-status-planning { color: #22D3EE; border-color: #22D3EE; }
|
|
||||||
.po-status-label.po-status-executing { color: var(--accent); border-color: var(--accent); }
|
|
||||||
.po-status-label.po-status-reviewing { color: #FB923C; border-color: #FB923C; }
|
|
||||||
.po-status-label.po-status-waiting_approval { color: #F472B6; border-color: #F472B6; }
|
|
||||||
.po-status-label.po-status-error { color: var(--error); border-color: var(--error); }
|
|
||||||
.po-status-label.po-status-done { color: #10B981; border-color: #10B981; }
|
|
||||||
|
|
||||||
.po-head-actions { display: flex; gap: 4px; align-items: center; }
|
|
||||||
.po-collapse, .po-expand {
|
|
||||||
background: transparent; border: none; cursor: pointer;
|
|
||||||
color: var(--text-dim); font-size: 12px; line-height: 1;
|
|
||||||
padding: 2px 6px; border-radius: 4px;
|
|
||||||
}
|
|
||||||
.po-collapse:hover, .po-expand:hover {
|
|
||||||
color: var(--accent); background: rgba(99,102,241,0.1);
|
|
||||||
}
|
|
||||||
.pixel-office[data-collapsed="true"] .po-collapse { transform: rotate(-90deg); }
|
|
||||||
|
|
||||||
.po-body {
|
|
||||||
display: grid; grid-template-columns: minmax(140px, 180px) 1fr;
|
|
||||||
gap: 8px; padding: 8px 10px;
|
|
||||||
}
|
|
||||||
@media (max-width: 540px) {
|
|
||||||
.po-body { grid-template-columns: 1fr; }
|
|
||||||
}
|
|
||||||
/* 좌측 — 픽셀 오피스 씬 (캐릭터 + 책상 + 진행률) */
|
|
||||||
.po-scene {
|
|
||||||
display: flex; flex-direction: column; gap: 4px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.po-char-wrap {
|
|
||||||
position: relative;
|
|
||||||
width: 100%; min-height: 90px;
|
|
||||||
display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
|
|
||||||
padding: 4px 0;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: linear-gradient(180deg, rgba(99,102,241,0.05) 0%, rgba(99,102,241,0.0) 70%);
|
|
||||||
}
|
|
||||||
.po-char {
|
|
||||||
position: relative;
|
|
||||||
width: 48px; height: 48px;
|
|
||||||
display: flex; align-items: center; justify-content: center;
|
|
||||||
background: var(--bg);
|
|
||||||
border: 2px solid var(--border);
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: transform 0.18s, border-color 0.18s;
|
|
||||||
}
|
|
||||||
.po-char-emoji {
|
|
||||||
font-size: 28px; line-height: 1;
|
|
||||||
}
|
|
||||||
/* 상태에 따른 캐릭터 동작 */
|
|
||||||
.pixel-office[data-status="executing"] .po-char { animation: po-bob 1.6s ease-in-out infinite; }
|
|
||||||
.pixel-office[data-status="analyzing"] .po-char { animation: po-tilt 2.4s ease-in-out infinite; }
|
|
||||||
.pixel-office[data-status="reviewing"] .po-char { animation: po-tilt 1.8s ease-in-out infinite; }
|
|
||||||
.pixel-office[data-status="need_clarification"] .po-char { border-color: #F5C518; }
|
|
||||||
.pixel-office[data-status="waiting_approval"] .po-char { border-color: #F472B6; }
|
|
||||||
.pixel-office[data-status="error"] .po-char {
|
|
||||||
border-color: var(--error);
|
|
||||||
animation: po-shake 0.4s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.pixel-office[data-status="done"] .po-char { border-color: #10B981; }
|
|
||||||
@keyframes po-bob {
|
|
||||||
0%,100% { transform: translateY(0); }
|
|
||||||
50% { transform: translateY(-3px); }
|
|
||||||
}
|
|
||||||
@keyframes po-tilt {
|
|
||||||
0%,100% { transform: rotate(0deg); }
|
|
||||||
50% { transform: rotate(-4deg); }
|
|
||||||
}
|
|
||||||
@keyframes po-shake {
|
|
||||||
0%,100% { transform: translateX(0); }
|
|
||||||
25% { transform: translateX(-2px); }
|
|
||||||
75% { transform: translateX(2px); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 캐릭터 옆 소품 — 상태에 따라 작은 이모지 (돋보기·체크리스트·코드 등) */
|
|
||||||
.po-char-prop {
|
|
||||||
position: absolute;
|
|
||||||
right: -22px; top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
font-size: 16px;
|
|
||||||
opacity: 0.85;
|
|
||||||
}
|
|
||||||
|
|
||||||
.po-desk {
|
|
||||||
width: 100%;
|
|
||||||
height: 8px;
|
|
||||||
margin-top: -4px;
|
|
||||||
background: linear-gradient(180deg, var(--border) 0%, var(--bg) 100%);
|
|
||||||
border-radius: 0 0 6px 6px;
|
|
||||||
}
|
|
||||||
.po-progress {
|
|
||||||
width: 100%; height: 4px;
|
|
||||||
background: var(--border);
|
|
||||||
border-radius: 2px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-top: 6px;
|
|
||||||
}
|
|
||||||
.po-progress-bar {
|
|
||||||
height: 100%; background: var(--accent);
|
|
||||||
transition: width 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 말풍선 영역 */
|
|
||||||
.po-bubbles {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%; transform: translateX(-50%);
|
|
||||||
bottom: 56px;
|
|
||||||
display: flex; flex-direction: column; align-items: center; gap: 4px;
|
|
||||||
pointer-events: none;
|
|
||||||
width: max-content; max-width: 220px;
|
|
||||||
}
|
|
||||||
.po-bubble {
|
|
||||||
background: var(--bg);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 10.5px;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
|
|
||||||
position: relative;
|
|
||||||
animation: po-bubble-in 0.25s ease-out;
|
|
||||||
max-width: 220px;
|
|
||||||
line-height: 1.35;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.po-bubble::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 50%; bottom: -4px;
|
|
||||||
transform: translateX(-50%) rotate(45deg);
|
|
||||||
width: 6px; height: 6px;
|
|
||||||
background: var(--bg);
|
|
||||||
border-right: 1px solid var(--border);
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
.po-bubble.po-bubble-warning { border-color: #F5C518; color: #F5C518; }
|
|
||||||
.po-bubble.po-bubble-warning::after { border-color: #F5C518; }
|
|
||||||
.po-bubble.po-bubble-error { border-color: var(--error); color: var(--error); }
|
|
||||||
.po-bubble.po-bubble-error::after { border-color: var(--error); }
|
|
||||||
.po-bubble.po-bubble-success { border-color: #10B981; color: #10B981; }
|
|
||||||
.po-bubble.po-bubble-success::after { border-color: #10B981; }
|
|
||||||
.po-bubble.po-bubble-fading { animation: po-bubble-out 0.3s ease-in forwards; }
|
|
||||||
@keyframes po-bubble-in {
|
|
||||||
from { opacity: 0; transform: translateY(4px) scale(0.92); }
|
|
||||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
||||||
}
|
|
||||||
@keyframes po-bubble-out {
|
|
||||||
to { opacity: 0; transform: translateY(-4px) scale(0.92); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 우측 — 정보 패널 */
|
|
||||||
.po-panel {
|
|
||||||
display: flex; flex-direction: column; gap: 4px;
|
|
||||||
font-size: 10.5px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
.po-row {
|
|
||||||
display: grid; grid-template-columns: 60px 1fr;
|
|
||||||
gap: 6px; align-items: baseline;
|
|
||||||
}
|
|
||||||
.po-key {
|
|
||||||
color: var(--text-dim); font-weight: 600;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.po-val {
|
|
||||||
color: var(--text-primary);
|
|
||||||
word-break: break-word;
|
|
||||||
overflow-wrap: anywhere;
|
|
||||||
}
|
|
||||||
.po-val-status { font-weight: 700; text-transform: lowercase; }
|
|
||||||
.po-section {
|
|
||||||
margin-top: 4px; padding-top: 4px;
|
|
||||||
border-top: 1px dashed var(--border);
|
|
||||||
}
|
|
||||||
.po-section-head {
|
|
||||||
font-size: 10px; font-weight: 700; color: var(--text-bright);
|
|
||||||
margin-bottom: 3px;
|
|
||||||
text-transform: uppercase; letter-spacing: 0.04em;
|
|
||||||
}
|
|
||||||
.po-need-input { margin: 0 0 0 14px; padding: 0; color: var(--text-primary); }
|
|
||||||
.po-need-input li { margin-bottom: 2px; }
|
|
||||||
.po-approval {
|
|
||||||
color: #F472B6; font-style: italic;
|
|
||||||
}
|
|
||||||
.po-contract {
|
|
||||||
display: grid; grid-template-columns: 40px 1fr;
|
|
||||||
gap: 2px 6px;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
.po-contract-key { color: var(--text-dim); font-weight: 600; }
|
|
||||||
.po-contract-val { color: var(--text-primary); word-break: break-word; }
|
|
||||||
.po-logs {
|
|
||||||
font-size: 9.5px; line-height: 1.4;
|
|
||||||
color: var(--text-dim);
|
|
||||||
max-height: 90px; overflow-y: auto;
|
|
||||||
font-family: var(--font-mono, ui-monospace, monospace);
|
|
||||||
}
|
|
||||||
.po-logs div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
||||||
|
|
||||||
/* 의도 분류기가 chat/followup 으로 판정했을 때 채팅에 끼우는 작은 라벨.
|
/* 의도 분류기가 chat/followup 으로 판정했을 때 채팅에 끼우는 작은 라벨.
|
||||||
파이프라인 카드는 절대 만들지 않고 한 줄짜리 메타 텍스트만 — 사용자가
|
파이프라인 카드는 절대 만들지 않고 한 줄짜리 메타 텍스트만 — 사용자가
|
||||||
|
|||||||
+2
-57
@@ -403,64 +403,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Pixel Office — Agent Work Pipeline 상태 시각화 패널.
|
Pixel Office 채팅 사이드바 배너는 v2.2.267 에서 제거됨 (화면 점유 문제).
|
||||||
백엔드의 SidebarChatProvider.pixelOfficeOn*() 콜이 push하는 `pixelOfficeUpdate`
|
백엔드 파이프라인 상태·풀스크린 Astra Office 패널(g1nation.company.pixelOffice.open)은 유지.
|
||||||
메시지를 받아 그대로 그린다. dispatcher / agent 로직은 절대 건드리지 않는
|
|
||||||
read-only 시각화 레이어. data-enabled 속성으로 보이기/숨기기 토글.
|
|
||||||
-->
|
-->
|
||||||
<div id="pixelOffice" class="pixel-office" data-enabled="false" data-collapsed="false">
|
|
||||||
<div class="po-head">
|
|
||||||
<div class="po-head-left">
|
|
||||||
<span class="po-title">🏢 Pixel Office</span>
|
|
||||||
<span class="po-status-label" id="poStatusLabel">idle</span>
|
|
||||||
</div>
|
|
||||||
<div class="po-head-actions">
|
|
||||||
<button class="po-expand" id="poExpandBtn" title="전체 사무실 뷰 열기">⛶</button>
|
|
||||||
<button class="po-collapse" id="poCollapseBtn" title="접기/펼치기">▾</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="po-body" id="poBody">
|
|
||||||
<div class="po-scene">
|
|
||||||
<!-- 캐릭터 영역: 단일 캐릭터 + 머리 위 말풍선 슬롯. -->
|
|
||||||
<div class="po-char-wrap">
|
|
||||||
<div class="po-bubbles" id="poBubbles"></div>
|
|
||||||
<div class="po-char" id="poChar">
|
|
||||||
<div class="po-char-emoji" id="poCharEmoji">🧑💼</div>
|
|
||||||
<div class="po-char-prop" id="poCharProp"></div>
|
|
||||||
</div>
|
|
||||||
<div class="po-desk"></div>
|
|
||||||
</div>
|
|
||||||
<!-- 진행률 막대. -->
|
|
||||||
<div class="po-progress" id="poProgress">
|
|
||||||
<div class="po-progress-bar" id="poProgressBar" style="width:0%"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="po-panel" id="poPanel">
|
|
||||||
<div class="po-row"><span class="po-key">Agent</span><span class="po-val" id="poAgentName">—</span></div>
|
|
||||||
<div class="po-row"><span class="po-key">Status</span><span class="po-val po-val-status" id="poStatusVal">idle</span></div>
|
|
||||||
<div class="po-row"><span class="po-key">Task</span><span class="po-val" id="poTask">—</span></div>
|
|
||||||
<div class="po-row"><span class="po-key">Step</span><span class="po-val" id="poStep">—</span></div>
|
|
||||||
<div class="po-row" id="poNextStepRow" style="display:none;"><span class="po-key">Next</span><span class="po-val" id="poNextStep">—</span></div>
|
|
||||||
<div class="po-row" id="poMessageRow" style="display:none;"><span class="po-key">Note</span><span class="po-val" id="poMessage">—</span></div>
|
|
||||||
<div class="po-section" id="poNeedInputSection" style="display:none;">
|
|
||||||
<div class="po-section-head">Need User Input</div>
|
|
||||||
<ol class="po-need-input" id="poNeedInputList"></ol>
|
|
||||||
</div>
|
|
||||||
<div class="po-section" id="poApprovalSection" style="display:none;">
|
|
||||||
<div class="po-section-head">Awaiting Approval</div>
|
|
||||||
<div class="po-approval" id="poApprovalText">—</div>
|
|
||||||
</div>
|
|
||||||
<div class="po-section" id="poContractSection" style="display:none;">
|
|
||||||
<div class="po-section-head">Requirement Contract</div>
|
|
||||||
<div class="po-contract" id="poContract"></div>
|
|
||||||
</div>
|
|
||||||
<div class="po-section" id="poLogsSection" style="display:none;">
|
|
||||||
<div class="po-section-head">Recent Logs</div>
|
|
||||||
<div class="po-logs" id="poLogs"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chat" id="chat">
|
<div class="chat" id="chat">
|
||||||
<!-- Dynamic welcome panel — JS의 _renderWelcome()이 두뇌/모델 상태에 맞춰
|
<!-- Dynamic welcome panel — JS의 _renderWelcome()이 두뇌/모델 상태에 맞춰
|
||||||
|
|||||||
+3
-250
@@ -1102,50 +1102,10 @@
|
|||||||
chatEl.scrollTop = chatEl.scrollHeight;
|
chatEl.scrollTop = chatEl.scrollHeight;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'pixelOfficeUpdate': {
|
case 'pixelOfficeUpdate':
|
||||||
// 새 path (officeSnapshot) 가 한 번이라도 도착했다면 옛 message 는 무시.
|
|
||||||
if (window.__officeSnapshotSeen) break;
|
|
||||||
if (typeof window.__pixelOfficeApply === 'function') {
|
|
||||||
window.__pixelOfficeApply(msg.value || {});
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'officeSnapshot': {
|
case 'officeSnapshot': {
|
||||||
// refactor #E — mini view 도 OfficeSnapshot 수신.
|
// Pixel Office 채팅 배너는 v2.2.267 에서 제거 — 백엔드가 여전히 보내는
|
||||||
// OfficeSnapshot 을 옛 {state, bubbles, config} payload 모양으로 변환 후
|
// 상태 메시지는 조용히 무시 (풀스크린 Astra Office 패널은 별도 webview 로 수신).
|
||||||
// 기존 __pixelOfficeApply 재사용. dual-mode 안전 전환.
|
|
||||||
window.__officeSnapshotSeen = true;
|
|
||||||
const snap = msg.value;
|
|
||||||
if (!snap || typeof window.__pixelOfficeApply !== 'function') break;
|
|
||||||
const roster = Array.isArray(snap.roster) ? snap.roster : [];
|
|
||||||
const active = (snap.activeAgentId && roster.find((a) => a.agentId === snap.activeAgentId)) || roster[0];
|
|
||||||
const phaseToStatus = (p) => {
|
|
||||||
if (p === 'awaiting-approval') return 'waiting_approval';
|
|
||||||
if (p === 'reporting') return 'done';
|
|
||||||
if (p === 'intake') return 'analyzing';
|
|
||||||
return p || 'idle';
|
|
||||||
};
|
|
||||||
const synthetic = {
|
|
||||||
agentId: snap.activeAgentId || (active && active.agentId) || 'main',
|
|
||||||
agentName: (active && active.agentName) || 'Agent',
|
|
||||||
status: (active && active.status) || phaseToStatus(snap.phase),
|
|
||||||
currentTask: snap.task && snap.task.goal,
|
|
||||||
currentStep: active && active.currentStep,
|
|
||||||
message: snap.activeAgentId || '',
|
|
||||||
recentLogs: (active && active.lastLog) ? [active.lastLog] : [],
|
|
||||||
progress: snap.pipeline ? (snap.pipeline.index / Math.max(1, snap.pipeline.stages.length)) : 0,
|
|
||||||
pipelineStages: snap.pipeline && snap.pipeline.stages,
|
|
||||||
needUserInput: (snap.awaiting && snap.awaiting.kind === 'clarification') ? snap.awaiting.questions : undefined,
|
|
||||||
awaitingApproval: (snap.awaiting && snap.awaiting.kind === 'approval') ? snap.awaiting.questions[0] : undefined,
|
|
||||||
requirementContract: snap.task,
|
|
||||||
updatedAt: snap.updatedAt,
|
|
||||||
};
|
|
||||||
window.__pixelOfficeApply({
|
|
||||||
state: synthetic,
|
|
||||||
bubbles: Array.isArray(snap.newBubbles) ? snap.newBubbles : [],
|
|
||||||
// config 는 그대로 유지 — snapshot 에는 enabled 만 함의적, 옛 cfg 가 살아있음.
|
|
||||||
config: undefined,
|
|
||||||
});
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case 'devilRebuttal': {
|
case 'devilRebuttal': {
|
||||||
@@ -3032,213 +2992,6 @@
|
|||||||
window.__renderCompanyPipelines = renderCompanyPipelines;
|
window.__renderCompanyPipelines = renderCompanyPipelines;
|
||||||
window.__closePipelineEditor = _closePipelineEditor;
|
window.__closePipelineEditor = _closePipelineEditor;
|
||||||
|
|
||||||
// ──────────────────────────────────────────────────────────────────────
|
|
||||||
// Pixel Office 렌더러 — 백엔드의 pixelOfficeUpdate 메시지를 받아 캐릭터,
|
|
||||||
// 정보 패널, 말풍선 큐를 갱신. 어떤 상태도 그대로 그리기만 함 (read-only).
|
|
||||||
// ──────────────────────────────────────────────────────────────────────
|
|
||||||
(function setupPixelOffice() {
|
|
||||||
const root = document.getElementById('pixelOffice');
|
|
||||||
if (!root) return;
|
|
||||||
const collapseBtn = document.getElementById('poCollapseBtn');
|
|
||||||
const expandBtn = document.getElementById('poExpandBtn');
|
|
||||||
const head = document.querySelector('#pixelOffice .po-head');
|
|
||||||
const charEl = document.getElementById('poChar');
|
|
||||||
const charEmoji = document.getElementById('poCharEmoji');
|
|
||||||
const charProp = document.getElementById('poCharProp');
|
|
||||||
const bubblesEl = document.getElementById('poBubbles');
|
|
||||||
const progressBar = document.getElementById('poProgressBar');
|
|
||||||
const statusLabel = document.getElementById('poStatusLabel');
|
|
||||||
const statusVal = document.getElementById('poStatusVal');
|
|
||||||
const agentName = document.getElementById('poAgentName');
|
|
||||||
const taskEl = document.getElementById('poTask');
|
|
||||||
const stepEl = document.getElementById('poStep');
|
|
||||||
const nextStepRow = document.getElementById('poNextStepRow');
|
|
||||||
const nextStepEl = document.getElementById('poNextStep');
|
|
||||||
const messageRow = document.getElementById('poMessageRow');
|
|
||||||
const messageEl = document.getElementById('poMessage');
|
|
||||||
const needInputSection = document.getElementById('poNeedInputSection');
|
|
||||||
const needInputList = document.getElementById('poNeedInputList');
|
|
||||||
const approvalSection = document.getElementById('poApprovalSection');
|
|
||||||
const approvalText = document.getElementById('poApprovalText');
|
|
||||||
const contractSection = document.getElementById('poContractSection');
|
|
||||||
const contractEl = document.getElementById('poContract');
|
|
||||||
const logsSection = document.getElementById('poLogsSection');
|
|
||||||
const logsEl = document.getElementById('poLogs');
|
|
||||||
|
|
||||||
// 상태별 캐릭터·소품 매핑 — 픽셀아트 대신 이모지 조합으로.
|
|
||||||
const STATUS_VIS = {
|
|
||||||
idle: { emoji: '🧑💼', prop: '' },
|
|
||||||
intake: { emoji: '🧑💼', prop: '📨' },
|
|
||||||
analyzing: { emoji: '🧐', prop: '🔍' },
|
|
||||||
need_clarification: { emoji: '🤔', prop: '❓' },
|
|
||||||
contract_ready: { emoji: '🧑💼', prop: '📋' },
|
|
||||||
planning: { emoji: '🧑💼', prop: '📝' },
|
|
||||||
executing: { emoji: '🧑💻', prop: '⚙️' },
|
|
||||||
reviewing: { emoji: '🧐', prop: '✅' },
|
|
||||||
waiting_approval: { emoji: '🧑💼', prop: '🛑' },
|
|
||||||
error: { emoji: '😵', prop: '⚠️' },
|
|
||||||
done: { emoji: '😎', prop: '☕' },
|
|
||||||
};
|
|
||||||
|
|
||||||
// ── 말풍선 큐 ──
|
|
||||||
// 큐 크기 제한 + 자동 사라짐 타이머. 같은 텍스트 연속 등장 시 1개로 합침.
|
|
||||||
let cfg = { enabled: true, bubblesEnabled: true, maxVisibleBubbles: 3, bubbleDurationMs: 4500 };
|
|
||||||
const bubbleQueue = []; // { el, timer }
|
|
||||||
let lastBubbleText = '';
|
|
||||||
|
|
||||||
const collapseToggle = () => {
|
|
||||||
const cur = root.getAttribute('data-collapsed') === 'true';
|
|
||||||
root.setAttribute('data-collapsed', cur ? 'false' : 'true');
|
|
||||||
};
|
|
||||||
if (collapseBtn) collapseBtn.onclick = (e) => { e.stopPropagation(); collapseToggle(); };
|
|
||||||
if (expandBtn) expandBtn.onclick = (e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
// 백엔드에 전체보기 panel 열기 요청.
|
|
||||||
vscode.postMessage({ type: 'openPixelOfficePanel' });
|
|
||||||
};
|
|
||||||
// head 영역 자체 클릭으로도 토글 (버튼 외 영역).
|
|
||||||
if (head) head.addEventListener('click', (e) => {
|
|
||||||
if (e.target instanceof HTMLElement && (e.target.closest('.po-collapse') || e.target.closest('.po-expand'))) return;
|
|
||||||
collapseToggle();
|
|
||||||
});
|
|
||||||
|
|
||||||
const dropOldestBubble = () => {
|
|
||||||
const first = bubbleQueue.shift();
|
|
||||||
if (!first) return;
|
|
||||||
if (first.timer) clearTimeout(first.timer);
|
|
||||||
first.el.classList.add('po-bubble-fading');
|
|
||||||
setTimeout(() => { try { first.el.remove(); } catch {} }, 300);
|
|
||||||
};
|
|
||||||
|
|
||||||
const pushBubble = (b) => {
|
|
||||||
if (!cfg.bubblesEnabled) return;
|
|
||||||
if (!b || !b.text) return;
|
|
||||||
if (b.text === lastBubbleText) return; // 연속 중복 차단
|
|
||||||
lastBubbleText = b.text;
|
|
||||||
const el = document.createElement('div');
|
|
||||||
el.className = 'po-bubble po-bubble-' + (b.type || 'status');
|
|
||||||
el.textContent = b.text;
|
|
||||||
bubblesEl.appendChild(el);
|
|
||||||
const duration = b.durationMs || cfg.bubbleDurationMs || 4500;
|
|
||||||
const timer = setTimeout(() => {
|
|
||||||
const idx = bubbleQueue.findIndex((x) => x.el === el);
|
|
||||||
if (idx >= 0) {
|
|
||||||
bubbleQueue.splice(idx, 1);
|
|
||||||
el.classList.add('po-bubble-fading');
|
|
||||||
setTimeout(() => { try { el.remove(); } catch {} }, 300);
|
|
||||||
}
|
|
||||||
}, duration);
|
|
||||||
bubbleQueue.push({ el, timer });
|
|
||||||
while (bubbleQueue.length > Math.max(1, cfg.maxVisibleBubbles)) {
|
|
||||||
dropOldestBubble();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const setText = (el, val) => { if (el) el.textContent = (val == null || val === '') ? '—' : String(val); };
|
|
||||||
|
|
||||||
const apply = (payload) => {
|
|
||||||
cfg = Object.assign(cfg, payload && payload.config ? payload.config : {});
|
|
||||||
root.setAttribute('data-enabled', cfg.enabled ? 'true' : 'false');
|
|
||||||
if (!cfg.enabled) return;
|
|
||||||
const state = payload && payload.state;
|
|
||||||
if (state) {
|
|
||||||
const vis = STATUS_VIS[state.status] || STATUS_VIS.idle;
|
|
||||||
if (charEmoji) charEmoji.textContent = vis.emoji;
|
|
||||||
if (charProp) charProp.textContent = vis.prop;
|
|
||||||
root.setAttribute('data-status', state.status || 'idle');
|
|
||||||
// 상태 라벨 색상 클래스 새로.
|
|
||||||
if (statusLabel) {
|
|
||||||
statusLabel.className = 'po-status-label po-status-' + (state.status || 'idle');
|
|
||||||
statusLabel.textContent = state.status || 'idle';
|
|
||||||
}
|
|
||||||
setText(statusVal, state.status);
|
|
||||||
setText(agentName, state.agentName);
|
|
||||||
setText(taskEl, state.currentTask);
|
|
||||||
setText(stepEl, state.currentStep);
|
|
||||||
if (state.nextStep) {
|
|
||||||
nextStepRow.style.display = '';
|
|
||||||
setText(nextStepEl, state.nextStep);
|
|
||||||
} else {
|
|
||||||
nextStepRow.style.display = 'none';
|
|
||||||
}
|
|
||||||
if (state.message) {
|
|
||||||
messageRow.style.display = '';
|
|
||||||
setText(messageEl, state.message);
|
|
||||||
} else {
|
|
||||||
messageRow.style.display = 'none';
|
|
||||||
}
|
|
||||||
// Progress
|
|
||||||
if (progressBar) {
|
|
||||||
const pct = typeof state.progress === 'number'
|
|
||||||
? Math.round(Math.max(0, Math.min(1, state.progress)) * 100)
|
|
||||||
: 0;
|
|
||||||
progressBar.style.width = pct + '%';
|
|
||||||
}
|
|
||||||
// Need input
|
|
||||||
if (Array.isArray(state.needUserInput) && state.needUserInput.length > 0) {
|
|
||||||
needInputSection.style.display = '';
|
|
||||||
needInputList.innerHTML = '';
|
|
||||||
for (const q of state.needUserInput) {
|
|
||||||
const li = document.createElement('li'); li.textContent = q;
|
|
||||||
needInputList.appendChild(li);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
needInputSection.style.display = 'none';
|
|
||||||
}
|
|
||||||
// Approval
|
|
||||||
if (state.awaitingApproval) {
|
|
||||||
approvalSection.style.display = '';
|
|
||||||
setText(approvalText, state.awaitingApproval);
|
|
||||||
} else {
|
|
||||||
approvalSection.style.display = 'none';
|
|
||||||
}
|
|
||||||
// Contract
|
|
||||||
const c = state.requirementContract;
|
|
||||||
if (c && (c.goal || c.context || (c.criteria && c.criteria.length) || c.format)) {
|
|
||||||
contractSection.style.display = '';
|
|
||||||
contractEl.innerHTML = '';
|
|
||||||
const addRow = (k, v) => {
|
|
||||||
if (!v || (Array.isArray(v) && v.length === 0)) return;
|
|
||||||
const ke = document.createElement('div');
|
|
||||||
ke.className = 'po-contract-key'; ke.textContent = k;
|
|
||||||
const ve = document.createElement('div');
|
|
||||||
ve.className = 'po-contract-val';
|
|
||||||
ve.textContent = Array.isArray(v) ? v.map((x) => '• ' + x).join('\n') : String(v);
|
|
||||||
ve.style.whiteSpace = 'pre-line';
|
|
||||||
contractEl.appendChild(ke);
|
|
||||||
contractEl.appendChild(ve);
|
|
||||||
};
|
|
||||||
addRow('Goal', c.goal);
|
|
||||||
addRow('Ctx', c.context);
|
|
||||||
addRow('Crit', c.criteria);
|
|
||||||
addRow('Fmt', c.format);
|
|
||||||
if (c.confidence) addRow('Conf', c.confidence);
|
|
||||||
} else {
|
|
||||||
contractSection.style.display = 'none';
|
|
||||||
}
|
|
||||||
// Recent logs
|
|
||||||
if (Array.isArray(state.recentLogs) && state.recentLogs.length > 0) {
|
|
||||||
logsSection.style.display = '';
|
|
||||||
logsEl.innerHTML = '';
|
|
||||||
for (const line of state.recentLogs) {
|
|
||||||
const d = document.createElement('div');
|
|
||||||
d.textContent = line;
|
|
||||||
logsEl.appendChild(d);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
logsSection.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Bubbles
|
|
||||||
if (Array.isArray(payload?.bubbles)) {
|
|
||||||
for (const b of payload.bubbles) pushBubble(b);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
window.__pixelOfficeApply = apply;
|
|
||||||
|
|
||||||
// webview 로드 직후 백엔드 캐시 상태 요청.
|
|
||||||
try { vscode.postMessage({ type: 'getPixelOfficeState' }); } catch {}
|
|
||||||
})();
|
|
||||||
|
|
||||||
// ──────────────────────────────────────────────────────────────────────
|
// ──────────────────────────────────────────────────────────────────────
|
||||||
// 이어서 진행 가능 세션 렌더링.
|
// 이어서 진행 가능 세션 렌더링.
|
||||||
|
|||||||
+3
-3
@@ -2,7 +2,7 @@
|
|||||||
"name": "astra",
|
"name": "astra",
|
||||||
"displayName": "Astra",
|
"displayName": "Astra",
|
||||||
"description": "The personal intelligence layer for Antigravity and VS Code. A private cognitive partner for deep project context, memory, and proactive strategic decision-making.",
|
"description": "The personal intelligence layer for Antigravity and VS Code. A private cognitive partner for deep project context, memory, and proactive strategic decision-making.",
|
||||||
"version": "2.2.266",
|
"version": "2.2.267",
|
||||||
"publisher": "g1nation",
|
"publisher": "g1nation",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"icon": "assets/icon.png",
|
"icon": "assets/icon.png",
|
||||||
@@ -1074,12 +1074,12 @@
|
|||||||
"g1nation.company.pixelOffice.enabled": {
|
"g1nation.company.pixelOffice.enabled": {
|
||||||
"type": "boolean",
|
"type": "boolean",
|
||||||
"default": true,
|
"default": true,
|
||||||
"description": "Show the Pixel Office visualisation panel above the chat — a small pixel-office-style display that mirrors the agent's current pipeline status (analyzing, need_clarification, executing, reviewing, waiting_approval, done, etc.) and the current task / contract / open questions. UI layer only; turning it off does not change any agent behaviour."
|
"description": "Enable Pixel Office agent-status tracking (feeds the full-screen Astra Office panel opened via 'Astra: Open Pixel Office (Full Screen)'). The in-chat banner was removed in v2.2.267 to free screen space. UI layer only; turning it off does not change any agent behaviour."
|
||||||
},
|
},
|
||||||
"g1nation.company.pixelOffice.bubbles": {
|
"g1nation.company.pixelOffice.bubbles": {
|
||||||
"type": "boolean",
|
"type": "boolean",
|
||||||
"default": true,
|
"default": true,
|
||||||
"description": "Show short comic-style speech bubbles above the Pixel Office character on status changes / key events (e.g. '코드 들어간다', '잠깐, 이건 다시 보자', '좋아, 끝났다!'). Bubbles are purely narrative — they never influence the agent's decisions. Disable for a quieter UI."
|
"description": "Show short comic-style speech bubbles above Pixel Office characters on status changes / key events (full-screen Astra Office panel only — the in-chat banner was removed in v2.2.267). Bubbles are purely narrative — they never influence the agent's decisions. Disable for a quieter UI."
|
||||||
},
|
},
|
||||||
"g1nation.google.clientId": {
|
"g1nation.google.clientId": {
|
||||||
"type": "string",
|
"type": "string",
|
||||||
|
|||||||
Reference in New Issue
Block a user