v2.2.16: Astra Office UI Overhaul & Operations Floor

src/features/astraOffice/view/officeBody.ts

@@ -1,21 +1,102 @@
-// 자동 분리: src/sidebarProvider.ts 3984-4001 에서 추출. 동작 동등.
 export const OFFICE_BODY = `
-<body>
-<header><div><div class="h-title">🏢 ASTRA OFFICE</div><div class="h-sub" id="agent">Astra</div></div><div style="display:flex;gap:8px;align-items:center;"><button id="editBtn" class="edit-btn" title="배치 편집 모드 토글">✏️ 편집</button><div class="status" id="status">idle</div></div></header>
-<div id="miniMap" class="mini-map" style="display:none;"></div>
-<div id="editToolbar" class="edit-toolbar" style="display:none;">
-  <span class="et-hint">드래그로 이동 · <b>R</b> 회전 · <b>]</b>/<b>[</b> 레이어 · 4px snap</span>
-  <button id="addDeskBtn" class="add" title="책상 추가">+ 책상</button>
-  <button id="addPropBtn" class="add" title="프랍(소품) 추가">+ 프랍</button>
-  <button id="deleteSelBtn" class="del" title="선택 항목 삭제" disabled>🗑 삭제</button>
-  <button id="layerUpBtn" title="레이어 위로 (])">⬆</button>
-  <button id="layerDownBtn" title="레이어 아래로 ([)">⬇</button>
-  <button id="saveBtn">💾 저장</button>
-  <button id="resetBtn" title="기본 배치로 복귀">↻ 디폴트</button>
-  <button id="cancelBtn" title="저장 안 하고 종료">✕ 취소</button>
+<div class="office-app">
+  <header class="topbar">
+    <div class="brand-block">
+      <div class="eyebrow">ASTRA OFFICE</div>
+      <div class="h-title">Operations Floor</div>
+    </div>
+    <div class="topbar-center">
+      <div class="phase-pill" id="phasePill"><span class="phase-dot"></span><span id="status">대기 중</span></div>
+      <div class="agent-pill"><span class="agent-label">현재 담당</span><strong id="agent">Astra</strong></div>
+    </div>
+    <div class="topbar-actions">
+      <button id="editBtn" class="edit-btn" title="오피스 배치 편집 모드 토글">Customize</button>
+    </div>
+  </header>
+
+  <div id="editToolbar" class="edit-toolbar" style="display:none;">
+    <span class="et-hint">드래그로 이동 · <b>R</b> 회전 · <b>]</b>/<b>[</b> 레이어 · 4px snap</span>
+    <button id="addDeskBtn" class="add" title="책상 추가">+ 책상</button>
+    <button id="addPropBtn" class="add" title="프랍(소품) 추가">+ 프랍</button>
+    <button id="deleteSelBtn" class="del" title="선택 항목 삭제" disabled>삭제</button>
+    <button id="layerUpBtn" title="레이어 위로 (])">위로</button>
+    <button id="layerDownBtn" title="레이어 아래로 ([)">아래로</button>
+    <button id="saveBtn">저장</button>
+    <button id="resetBtn" title="기본 배치로 복귀">초기화</button>
+    <button id="cancelBtn" title="저장 안 하고 종료">취소</button>
+  </div>
+
+  <main class="workspace">
+    <aside class="side-panel team-panel">
+      <div class="panel-head">
+        <div>
+          <div class="panel-kicker">Team</div>
+          <h2>오늘의 라인업</h2>
+        </div>
+        <div class="count-badge" id="rosterCount">0</div>
+      </div>
+      <div id="rosterList" class="roster-list"></div>
+    </aside>
+
+    <section class="office-shell">
+      <div class="mission-strip">
+        <div>
+          <div class="panel-kicker">Current Mission</div>
+          <div class="mission-title" id="task">새 요청을 기다리고 있습니다.</div>
+        </div>
+        <div class="mission-step-wrap">
+          <span>현재 단계</span>
+          <strong id="step">대기 중</strong>
+        </div>
+      </div>
+      <div id="miniMap" class="mini-map" style="display:none;"></div>
+      <div class="office-stage-wrap">
+        <div class="office">
+          <div class="stage" id="stage">
+            <div class="wall-window w1"></div>
+            <div class="wall-window w2"></div>
+          </div>
+          <div id="propPanel" class="prop-panel"></div>
+        </div>
+      </div>
+    </section>
+
+    <aside class="side-panel mission-panel">
+      <div class="panel-head compact">
+        <div>
+          <div class="panel-kicker">Signal</div>
+          <h2>운영 브리프</h2>
+        </div>
+      </div>
+      <div class="brief-grid">
+        <section class="brief-card hero">
+          <span>현재 흐름</span>
+          <strong id="phaseLabel">대기 중</strong>
+          <p id="phaseNote">새로운 작업 요청을 기다리고 있습니다.</p>
+        </section>
+        <section class="brief-card">
+          <span>진행률</span>
+          <strong id="progressLabel">0%</strong>
+          <div class="progress"><div class="bar" id="bar"></div></div>
+        </section>
+        <section class="brief-card" id="attentionCard">
+          <span>주의 신호</span>
+          <strong id="attentionTitle">없음</strong>
+          <p id="attentionBody">현재 막힘 없이 진행 중입니다.</p>
+        </section>
+      </div>
+    </aside>
+  </main>
+
+  <footer class="activity-dock">
+    <div class="activity-head">
+      <div>
+        <div class="panel-kicker">Activity</div>
+        <strong>최근 실행</strong>
+      </div>
+      <div id="log" class="last-log">아직 기록된 활동이 없습니다.</div>
+    </div>
+    <div id="ticker" class="ticker" style="display:none;"><div class="tk-track" id="tickerTrack"></div></div>
+  </footer>
 </div>
-<div class="strip"><span><b>작업</b> <span id="task">—</span></span><span><b>단계</b> <span id="step">—</span></span></div>
-<main class="office"><div class="stage" id="stage"><div class="wall-window w1"></div><div class="wall-window w2"></div></div><div id="propPanel" class="prop-panel"></div></main>
-<div id="ticker" class="ticker" style="display:none;"><div class="tk-track" id="tickerTrack"></div></div>
-<footer><div class="progress"><div class="bar" id="bar"></div></div><div id="log">—</div></footer>
 `;