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:
2026-07-02 20:11:18 +09:00
parent 1dbd5fd186
commit 92d81e38ce
4 changed files with 8 additions and 541 deletions
+2 -57
View File
@@ -403,64 +403,9 @@
</div>
<!--
Pixel Office — Agent Work Pipeline 상태 시각화 패널.
백엔드의 SidebarChatProvider.pixelOfficeOn*() 콜이 push하는 `pixelOfficeUpdate`
메시지를 받아 그대로 그린다. dispatcher / agent 로직은 절대 건드리지 않는
read-only 시각화 레이어. data-enabled 속성으로 보이기/숨기기 토글.
Pixel Office 채팅 사이드바 배너는 v2.2.267 에서 제거됨 (화면 점유 문제).
백엔드 파이프라인 상태·풀스크린 Astra Office 패널(g1nation.company.pixelOffice.open)은 유지.
-->
<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">
<!-- Dynamic welcome panel — JS의 _renderWelcome()이 두뇌/모델 상태에 맞춰