v2.2.16: Astra Office UI Overhaul & Operations Floor

2026-05-16 22:21:09 +09:00
parent 9ca95ab997
commit 961e2cb4ea
20 changed files with 2632 additions and 212 deletions
@@ -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>
 `;
@@ -1,40 +1,236 @@
-// 자동 분리: src/sidebarProvider.ts 3866-3982 에서 추출. 동작 동등.
-// design doc: docs/ASTRA_OFFICE_REFACTOR.md
 export const OFFICE_CSS = `
-<style>
-:root{--bg:#0E1019;--wall:#202536;--floor:#302634;--floor2:#281F2C;--text:#F1F4FB;--muted:#A8B0C7;--accent:#7C83FF;}
-*{box-sizing:border-box} body{margin:0;height:100vh;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:flex;flex-direction:column;overflow:hidden}
-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:rgba(0,0,0,.22);border-bottom:1px solid rgba(255,255,255,.08)}
-.h-title{font-weight:800}.h-sub{font-size:11px;color:var(--muted)}.status{font-size:12px;padding:4px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px}
-.strip{display:flex;gap:16px;padding:8px 16px;font-size:12px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.06)}.strip b{color:var(--text)}
-.office{position:relative;flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#21283a 0 16%,transparent 16%),radial-gradient(ellipse at 50% 0%,rgba(124,131,255,.12),transparent 42%),linear-gradient(135deg,#322835,#271f2a)}
-.office:before{content:'';position:absolute;left:0;right:0;top:16%;bottom:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:48px 48px}
-.office:after{content:'';position:absolute;left:0;right:0;top:15.5%;height:8px;background:linear-gradient(180deg,rgba(0,0,0,.36),transparent)}
-.stage{position:relative;width:720px;height:585px;margin:0}
-.wall-window{position:absolute;top:16px;width:86px;height:42px;border:3px solid rgba(206,223,255,.35);background:linear-gradient(180deg,rgba(160,208,255,.3),rgba(110,150,210,.1));box-shadow:inset 0 0 0 2px rgba(15,20,31,.55)}
+:root{
+  --bg:#070A12;
+  --bg-soft:#0D1220;
+  --surface:rgba(15,21,36,.78);
+  --surface-strong:rgba(18,25,43,.94);
+  --surface-faint:rgba(255,255,255,.045);
+  --line:rgba(255,255,255,.09);
+  --line-strong:rgba(255,255,255,.16);
+  --text:#F5F7FC;
+  --muted:#9BA6BF;
+  --accent:#8A7CFF;
+  --accent-2:#46D8FF;
+  --success:#35D7A4;
+  --warning:#F5C45A;
+  --danger:#FF6B7A;
+  --shadow:0 18px 60px rgba(0,0,0,.42);
+  --radius-xl:24px;
+  --radius-lg:18px;
+  --radius-md:14px;
+  --radius-sm:10px;
+}
+*{box-sizing:border-box}
+html,body{height:100%}
+body{
+  margin:0;
+  background:
+    radial-gradient(circle at 12% 0%,rgba(138,124,255,.18),transparent 28%),
+    radial-gradient(circle at 90% 10%,rgba(70,216,255,.12),transparent 24%),
+    radial-gradient(circle at 50% 100%,rgba(53,215,164,.08),transparent 32%),
+    linear-gradient(180deg,#070A12 0%,#0A0F1A 100%);
+  color:var(--text);
+  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
+  overflow:hidden;
+}
+button,input,select{font:inherit}
+.office-app{height:100vh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:14px;padding:18px}
+.topbar{
+  min-height:70px;
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:18px;
+  padding:14px 16px 14px 18px;
+  border:1px solid var(--line);
+  border-radius:var(--radius-xl);
+  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
+  backdrop-filter:blur(18px);
+  box-shadow:var(--shadow);
+}
+.brand-block{display:flex;flex-direction:column;gap:3px;min-width:180px}
+.eyebrow,.panel-kicker{font-size:10px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
+.h-title{font-size:22px;line-height:1.1;font-weight:750;letter-spacing:-.03em}
+.topbar-center{display:flex;align-items:center;justify-content:center;gap:10px;flex:1;min-width:0}
+.phase-pill,.agent-pill{
+  min-height:38px;
+  display:flex;
+  align-items:center;
+  gap:9px;
+  padding:0 14px;
+  border:1px solid var(--line);
+  border-radius:999px;
+  background:rgba(255,255,255,.05);
+  white-space:nowrap;
+}
+.phase-pill{font-weight:650}
+.phase-pill .phase-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px rgba(138,124,255,.8)}
+.phase-pill[data-tone="success"] .phase-dot{background:var(--success);box-shadow:0 0 16px rgba(53,215,164,.8)}
+.phase-pill[data-tone="warning"] .phase-dot{background:var(--warning);box-shadow:0 0 16px rgba(245,196,90,.8)}
+.phase-pill[data-tone="danger"] .phase-dot{background:var(--danger);box-shadow:0 0 16px rgba(255,107,122,.8)}
+.agent-pill{color:var(--muted)}
+.agent-pill strong{color:var(--text);font-size:13px}
+.agent-label{font-size:11px}
+.topbar-actions{display:flex;align-items:center;justify-content:flex-end;min-width:180px}
+.edit-btn{
+  height:38px;
+  border-radius:999px;
+  padding:0 15px;
+  border:1px solid rgba(138,124,255,.35);
+  color:var(--text);
+  background:linear-gradient(180deg,rgba(138,124,255,.22),rgba(138,124,255,.12));
+  cursor:pointer;
+  transition:transform .16s ease,border-color .16s ease,background .16s ease;
+}
+.edit-btn:hover{transform:translateY(-1px);border-color:rgba(138,124,255,.62);background:linear-gradient(180deg,rgba(138,124,255,.3),rgba(138,124,255,.16))}
+.edit-toolbar{
+  display:flex;
+  align-items:center;
+  gap:8px;
+  flex-wrap:wrap;
+  padding:10px 12px;
+  border:1px solid rgba(138,124,255,.28);
+  border-radius:var(--radius-lg);
+  background:rgba(138,124,255,.12);
+  backdrop-filter:blur(16px);
+}
+.edit-toolbar .et-hint{flex:1;min-width:220px;color:#DCE2F2;font-size:12px}
+.edit-toolbar button{
+  min-height:32px;
+  padding:0 11px;
+  border-radius:999px;
+  border:1px solid var(--line-strong);
+  color:var(--text);
+  background:rgba(255,255,255,.07);
+  cursor:pointer;
+}
+.edit-toolbar button:hover{background:rgba(255,255,255,.12)}
+.edit-toolbar button.add{border-color:rgba(53,215,164,.4);background:rgba(53,215,164,.12)}
+.edit-toolbar button.del{border-color:rgba(255,107,122,.42);background:rgba(255,107,122,.12)}
+.edit-toolbar button[disabled]{opacity:.42;cursor:not-allowed}
+.workspace{
+  min-height:0;
+  display:grid;
+  grid-template-columns:260px minmax(620px,1fr) 280px;
+  gap:14px;
+}
+.side-panel,.office-shell,.activity-dock{
+  border:1px solid var(--line);
+  border-radius:var(--radius-xl);
+  background:var(--surface);
+  backdrop-filter:blur(20px);
+  box-shadow:var(--shadow);
+}
+.side-panel{padding:16px;min-height:0;overflow:hidden}
+.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
+.panel-head.compact{margin-bottom:16px}
+.panel-head h2{font-size:16px;line-height:1.2;letter-spacing:-.02em;margin:6px 0 0}
+.count-badge{
+  min-width:28px;
+  height:28px;
+  display:grid;
+  place-items:center;
+  border-radius:999px;
+  border:1px solid rgba(70,216,255,.25);
+  background:rgba(70,216,255,.12);
+  color:#BDEFFF;
+  font-size:12px;
+  font-weight:700;
+}
+.roster-list{display:flex;flex-direction:column;gap:9px;overflow:auto;padding-right:2px;max-height:calc(100vh - 220px)}
+.roster-item{
+  display:grid;
+  grid-template-columns:auto minmax(0,1fr);
+  gap:11px;
+  align-items:center;
+  padding:11px;
+  border-radius:var(--radius-md);
+  border:1px solid transparent;
+  background:rgba(255,255,255,.035);
+  transition:border-color .16s ease,background .16s ease,transform .16s ease;
+}
+.roster-item.active{border-color:rgba(138,124,255,.48);background:linear-gradient(180deg,rgba(138,124,255,.16),rgba(138,124,255,.08));transform:translateX(2px)}
+.roster-avatar{
+  width:33px;height:33px;border-radius:12px;
+  display:grid;place-items:center;
+  background:rgba(255,255,255,.08);
+  border:1px solid var(--line);
+  color:var(--role-color,var(--accent));
+  font-size:11px;font-weight:700;
+}
+.roster-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
+.roster-copy strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.roster-meta{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px}
+.roster-status{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.28)}
+.roster-item.active .roster-status{background:var(--role-color,var(--accent));box-shadow:0 0 12px var(--role-color,var(--accent))}
+.office-shell{min-width:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden}
+.mission-strip{
+  min-height:72px;
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  gap:18px;
+  padding:15px 18px;
+  border-bottom:1px solid var(--line);
+}
+.mission-title{margin-top:6px;font-size:16px;font-weight:650;letter-spacing:-.02em;max-width:min(560px,52vw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.mission-step-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:160px}
+.mission-step-wrap span{font-size:11px;color:var(--muted)}
+.mission-step-wrap strong{font-size:13px;font-weight:650;text-align:right;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.mini-map{display:flex;align-items:center;gap:6px;min-height:42px;padding:0 18px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
+.mini-map::-webkit-scrollbar{display:none}
+.mini-map .mm-dot{position:relative;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);flex-shrink:0;transition:all .2s ease}
+.mini-map .mm-dot[data-status="done"]{background:var(--success);border-color:var(--success);box-shadow:0 0 12px rgba(53,215,164,.35)}
+.mini-map .mm-dot[data-status="active"]{width:14px;height:14px;background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(138,124,255,.16)}
+.mini-map .mm-bar{flex:1;height:1px;min-width:22px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.18))}
+.mini-map .mm-label{position:absolute;left:50%;top:-29px;transform:translateX(-50%);padding:4px 7px;border-radius:999px;background:rgba(6,9,16,.95);border:1px solid var(--line);font-size:10px;white-space:nowrap;color:var(--text);opacity:0;pointer-events:none;transition:opacity .14s ease;z-index:40}
+.mini-map .mm-dot:hover .mm-label{opacity:1}
+.mini-map .mm-counter{margin-left:6px;color:var(--muted);font-size:11px;white-space:nowrap}
+.office-stage-wrap{min-height:0;padding:14px;display:flex}
+.office{
+  position:relative;
+  flex:1;
+  min-height:420px;
+  overflow:hidden;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  border-radius:20px;
+  border:1px solid rgba(255,255,255,.08);
+  background:
+    linear-gradient(180deg,rgba(18,28,48,.98) 0 16%,transparent 16%),
+    radial-gradient(circle at 50% -10%,rgba(138,124,255,.24),transparent 32%),
+    radial-gradient(circle at 18% 100%,rgba(70,216,255,.12),transparent 28%),
+    linear-gradient(135deg,#31283A,#201A29 72%);
+}
+.office:before{content:'';position:absolute;left:0;right:0;top:16%;bottom:0;background-image:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);background-size:48px 48px}
+.office:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0 40%,rgba(0,0,0,.18) 100%);pointer-events:none}
+.stage{position:relative;width:720px;height:585px;margin:0;z-index:2}
+.wall-window{position:absolute;top:16px;width:86px;height:42px;border:2px solid rgba(215,228,255,.35);border-radius:8px;background:linear-gradient(180deg,rgba(160,208,255,.34),rgba(110,150,210,.08));box-shadow:inset 0 0 0 1px rgba(15,20,31,.55)}
 .wall-window.w1{left:84px}.wall-window.w2{left:550px}
 .obj,.desk,.char{position:absolute;image-rendering:pixelated}
-.obj{filter:drop-shadow(3px 4px 0 rgba(0,0,0,.28));z-index:4}
-.desk{width:112px;z-index:5;filter:drop-shadow(4px 5px 0 rgba(0,0,0,.32))}.desk.boss{width:136px}.label{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);font-size:10px;color:rgba(241,244,251,.78);white-space:nowrap;text-shadow:1px 1px #000}
-.char{width:56px;height:72px;z-index:7;transition:left 1.17s cubic-bezier(.2,.7,.2,1),top 1.17s cubic-bezier(.2,.7,.2,1)}.char.walking{z-index:14}.char img{position:absolute;left:0;bottom:0;max-width:100%;max-height:100%;image-rendering:pixelated;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.45));transform-origin:center bottom}
-.char.active:before{content:'';position:absolute;left:24px;top:-10px;width:8px;height:8px;background:var(--role-color,var(--accent));box-shadow:0 0 12px var(--role-color,var(--accent));animation:po-pulse 1.6s ease-in-out infinite}
-@keyframes po-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
-/* ── C. 직군별 페르소나 컬러 ── 책상 outline 가벼운 강조, 활성 캐릭터 위 점이 직군색.
-   data-role attribute로 자동 매핑. 사용자가 PNG sprite로 swap해도 컬러는 유지. */
-.char[data-agent="ceo"],.desk[data-agent="ceo"]               {--role-color:#A78BFA}
-.char[data-agent="planner"],.desk[data-agent="planner"]       {--role-color:#60A5FA}
-.char[data-agent="researcher"],.desk[data-agent="researcher"] {--role-color:#10B981}
-.char[data-agent="designer"],.desk[data-agent="designer"]     {--role-color:#F472B6}
-.char[data-agent="developer"],.desk[data-agent="developer"]   {--role-color:#FBBF24}
-.char[data-agent="qa"],.desk[data-agent="qa"]                 {--role-color:#22D3EE}
-.char[data-agent="inspector"],.desk[data-agent="inspector"]   {--role-color:#FB923C}
-.char[data-agent="support"],.desk[data-agent="support"]       {--role-color:#94A3B8}
-.char.active::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--role-color,var(--accent));box-shadow:0 0 8px var(--role-color,var(--accent));border-radius:2px;animation:po-glow 1.6s ease-in-out infinite}
-@keyframes po-glow{0%,100%{opacity:.7}50%{opacity:1}}
-/* desk 는 line 3878 의 .obj,.desk,.char{position:absolute} 를 그대로 유지해야 한다.
-   과거 .desk{position:relative} 가 cascade로 override 되어, 새로 추가한 책상이 normal-flow Y
-   에 따라 stage 바깥으로 밀려나던 버그가 있었음. ::after pseudo 는 absolute parent 기준으로도 정상 동작. */
-.desk::after{content:'';position:absolute;inset:-2px;border-radius:4px;border:2px solid transparent;pointer-events:none;transition:border-color .3s}
+.obj{filter:drop-shadow(3px 5px 0 rgba(0,0,0,.28));z-index:4}
+.desk{width:112px;z-index:5;filter:drop-shadow(4px 7px 0 rgba(0,0,0,.28))}
+.desk.boss{width:136px}
+.label{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);font-size:10px;color:rgba(245,247,252,.8);white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.8)}
+.char{width:56px;height:72px;z-index:7;transition:left .9s cubic-bezier(.2,.7,.2,1),top .9s cubic-bezier(.2,.7,.2,1)}
+.char.walking{z-index:14}
+.char img{position:absolute;left:0;bottom:0;max-width:100%;max-height:100%;image-rendering:pixelated;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.42));transform-origin:center bottom}
+.char.active:before{content:'';position:absolute;left:19px;top:-14px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,var(--role-color,var(--accent)) 0 28%,rgba(255,255,255,.18) 30%,transparent 72%);filter:blur(.2px);animation:focusPulse 1.8s ease-in-out infinite}
+.char.active::after{content:'';position:absolute;left:-4px;right:-4px;bottom:-7px;height:8px;border-radius:999px;background:radial-gradient(circle,var(--role-color,var(--accent)),transparent 70%);opacity:.82;filter:blur(1px)}
+.char.working img{animation:workLean 1.6s ease-in-out infinite}
+@keyframes focusPulse{0%,100%{transform:scale(.95);opacity:.88}50%{transform:scale(1.12);opacity:1}}
+@keyframes workLean{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
+.char[data-agent="ceo"],.desk[data-agent="ceo"],.roster-item[data-agent="ceo"]{--role-color:#A78BFA}
+.char[data-agent="planner"],.desk[data-agent="planner"],.roster-item[data-agent="planner"]{--role-color:#60A5FA}
+.char[data-agent="researcher"],.desk[data-agent="researcher"],.roster-item[data-agent="researcher"]{--role-color:#35D7A4}
+.char[data-agent="designer"],.desk[data-agent="designer"],.roster-item[data-agent="designer"]{--role-color:#F472B6}
+.char[data-agent="developer"],.desk[data-agent="developer"],.roster-item[data-agent="developer"]{--role-color:#F5C45A}
+.char[data-agent="qa"],.desk[data-agent="qa"],.roster-item[data-agent="qa"]{--role-color:#46D8FF}
+.char[data-agent="inspector"],.desk[data-agent="inspector"],.roster-item[data-agent="inspector"]{--role-color:#FB923C}
+.char[data-agent="support"],.desk[data-agent="support"],.roster-item[data-agent="support"]{--role-color:#94A3B8}
+.char[data-agent="writer"],.desk[data-agent="writer"],.roster-item[data-agent="writer"]{--role-color:#FBBF24}
+.desk::after{content:'';position:absolute;inset:-4px;border-radius:10px;border:1px solid transparent;pointer-events:none;transition:border-color .2s ease,box-shadow .2s ease}
 .stage:has(.char.active[data-agent="ceo"]) .desk[data-agent="ceo"]::after,
 .stage:has(.char.active[data-agent="planner"]) .desk[data-agent="planner"]::after,
 .stage:has(.char.active[data-agent="researcher"]) .desk[data-agent="researcher"]::after,
@@ -42,80 +238,105 @@ header{display:flex;justify-content:space-between;align-items:center;padding:10p
 .stage:has(.char.active[data-agent="developer"]) .desk[data-agent="developer"]::after,
 .stage:has(.char.active[data-agent="qa"]) .desk[data-agent="qa"]::after,
 .stage:has(.char.active[data-agent="inspector"]) .desk[data-agent="inspector"]::after,
-.stage:has(.char.active[data-agent="support"]) .desk[data-agent="support"]::after
-{border-color:var(--role-color)}
+.stage:has(.char.active[data-agent="support"]) .desk[data-agent="support"]::after,
+.stage:has(.char.active[data-agent="writer"]) .desk[data-agent="writer"]::after{border-color:var(--role-color);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 18px color-mix(in srgb,var(--role-color) 35%,transparent)}
 .shadow{position:absolute;left:12px;bottom:0;width:28px;height:7px;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%)}
-.bubble{position:absolute;z-index:20;transform:translate(-50%,-100%);background:#fff;color:#222;padding:5px 8px;border-radius:8px;font-size:11px;box-shadow:2px 2px 0 rgba(0,0,0,.35);white-space:nowrap}
-.edit-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#F1F4FB;padding:4px 10px;border-radius:5px;cursor:pointer;font-size:11px}.edit-btn:hover{background:rgba(99,102,241,.25);border-color:#6366F1}
-/* ── B. 워크플로우 미니 맵 ── 헤더 아래 dot strip. 각 dot이 stage 하나. 완료=
-   채워진 점, 활성=링 펄스, 대기=빈 점. 호버 시 라벨 표시. */
-.mini-map{display:flex;gap:5px;align-items:center;padding:7px 16px;background:rgba(0,0,0,.3);border-bottom:1px solid rgba(255,255,255,.06);overflow-x:auto;scrollbar-width:none}.mini-map::-webkit-scrollbar{display:none}
-.mini-map .mm-dot{position:relative;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.18);flex-shrink:0;cursor:default;transition:all .25s}
-.mini-map .mm-dot[data-status="done"]{background:#10B981;border-color:#10B981;box-shadow:0 0 4px rgba(16,185,129,.5)}
-.mini-map .mm-dot[data-status="active"]{background:var(--accent);border-color:var(--accent);width:14px;height:14px;box-shadow:0 0 0 3px rgba(99,102,241,.3);animation:mm-pulse 1.4s ease-in-out infinite}
-@keyframes mm-pulse{0%,100%{box-shadow:0 0 0 3px rgba(99,102,241,.3)}50%{box-shadow:0 0 0 6px rgba(99,102,241,.15)}}
-.mini-map .mm-bar{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.16))}
-.mini-map .mm-label{position:absolute;left:50%;top:-22px;transform:translateX(-50%);font-size:10px;color:#F1F4FB;background:rgba(0,0,0,.85);padding:2px 6px;border-radius:3px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:50}
-.mini-map .mm-dot:hover .mm-label{opacity:1}
-.mini-map .mm-counter{flex-shrink:0;font-size:10px;color:#94A3B8;margin-left:8px;white-space:nowrap}
-/* ── E. Activity Ticker ── action-tag executor 결과를 하단 strip으로 흘림.
-   사용자가 에이전트의 *실제 행동*(파일 쓰기, 명령 실행)을 실시간으로 보며 신뢰. */
-.ticker{position:relative;padding:5px 16px;background:rgba(99,102,241,.08);border-top:1px solid rgba(99,102,241,.18);overflow:hidden;font-size:11px;font-family:ui-monospace,monospace;height:24px}
-.tk-track{display:flex;gap:18px;white-space:nowrap;animation:tk-roll 22s linear infinite;will-change:transform}
-.ticker:hover .tk-track{animation-play-state:paused}
-.tk-item{flex-shrink:0;color:#D7DBEA}
-.tk-item.tk-ok{color:#10B981}
-.tk-item.tk-warn{color:#F5C518}
-.tk-item.tk-err{color:#EF4444}
-.tk-item .tk-agent{color:#A78BFA;margin-right:5px;font-weight:600}
-@keyframes tk-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
-/* ── D. 캐릭터 컨텍스트 메뉴 ── 편집 모드 X일 때 캐릭터 클릭하면 작은 메뉴 popup.
-   현재 turn 제어 + 최근 활동 보기. */
-.ctx-menu{position:fixed;z-index:1000;background:#13162A;border:1px solid #2A2E3F;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.6);padding:4px;min-width:170px;font-size:12px;color:#F1F4FB}
-.ctx-menu-head{padding:6px 10px 4px;font-size:10px;color:#94A3B8;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:4px}
+.bubble{position:absolute;z-index:20;transform:translate(-50%,-100%);max-width:180px;padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(10,14,24,.92);color:var(--text);font-size:11px;line-height:1.2;box-shadow:0 10px 24px rgba(0,0,0,.28);white-space:nowrap}
+.brief-grid{display:flex;flex-direction:column;gap:10px}
+.brief-card{
+  padding:14px;
+  border-radius:var(--radius-md);
+  border:1px solid var(--line);
+  background:rgba(255,255,255,.035);
+}
+.brief-card.hero{background:linear-gradient(180deg,rgba(138,124,255,.16),rgba(255,255,255,.03));border-color:rgba(138,124,255,.28)}
+.brief-card span{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
+.brief-card strong{display:block;font-size:17px;line-height:1.2;letter-spacing:-.02em}
+.brief-card p{margin:8px 0 0;color:#D6DDF0;font-size:12px;line-height:1.5}
+#attentionCard[data-tone="warning"]{border-color:rgba(245,196,90,.32);background:rgba(245,196,90,.08)}
+#attentionCard[data-tone="danger"]{border-color:rgba(255,107,122,.34);background:rgba(255,107,122,.08)}
+.progress{height:8px;margin-top:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
+.bar{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .22s ease}
+.activity-dock{padding:14px 16px 15px;display:flex;flex-direction:column;gap:10px}
+.activity-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
+.activity-head strong{display:block;font-size:14px;margin-top:5px}
+.last-log{max-width:65%;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ticker{position:relative;overflow:hidden}
+.tk-track{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
+.tk-track::-webkit-scrollbar{display:none}
+.tk-item{
+  flex-shrink:0;
+  display:inline-flex;
+  align-items:center;
+  gap:7px;
+  min-height:30px;
+  padding:0 11px;
+  border-radius:999px;
+  border:1px solid var(--line);
+  background:rgba(255,255,255,.045);
+  color:#DCE3F3;
+  font-size:11px;
+}
+.tk-item.tk-ok{border-color:rgba(53,215,164,.26)}
+.tk-item.tk-warn{border-color:rgba(245,196,90,.28)}
+.tk-item.tk-err{border-color:rgba(255,107,122,.3)}
+.tk-item .tk-agent{color:#C6BEFF;font-weight:650}
+.ctx-menu{position:fixed;z-index:1000;background:rgba(10,14,24,.96);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.5);padding:6px;min-width:180px;font-size:12px;color:var(--text)}
+.ctx-menu-head{padding:7px 10px 8px;font-size:10px;color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:4px}
 .ctx-menu-head .cmh-role{color:var(--role-color,#A78BFA);font-weight:700;text-transform:uppercase}
-.ctx-menu-item{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;border-radius:4px;transition:background .12s}
-.ctx-menu-item:hover{background:rgba(99,102,241,.18)}
-.ctx-menu-item.danger:hover{background:rgba(239,68,68,.18);color:#FCA5A5}
-.ctx-menu-divider{height:1px;background:rgba(255,255,255,.08);margin:3px 4px}
+.ctx-menu-item{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;border-radius:10px;transition:background .12s ease}
+.ctx-menu-item:hover{background:rgba(138,124,255,.16)}
+.ctx-menu-item.danger:hover{background:rgba(255,107,122,.14);color:#FFC3CC}
+.ctx-menu-divider{height:1px;background:var(--line);margin:4px}
 body[data-edit-mode="true"] .ctx-menu{display:none!important}
 body:not([data-edit-mode="true"]) .char{cursor:pointer}
-.ctx-detail{position:fixed;z-index:1001;background:#13162A;border:1px solid #2A2E3F;border-radius:8px;box-shadow:0 12px 36px rgba(0,0,0,.7);padding:16px 18px;color:#F1F4FB;min-width:320px;max-width:520px;max-height:60vh;overflow-y:auto;font-size:12px;line-height:1.5}
-.ctx-detail h3{margin:0 0 8px;font-size:14px;color:var(--role-color,#A78BFA);text-transform:uppercase;letter-spacing:.04em}
-.ctx-detail .cd-close{position:absolute;top:8px;right:10px;background:transparent;border:none;color:#94A3B8;font-size:16px;cursor:pointer}
+.ctx-detail{position:fixed;z-index:1001;background:rgba(10,14,24,.96);border:1px solid var(--line-strong);border-radius:18px;box-shadow:0 20px 56px rgba(0,0,0,.56);padding:18px;color:var(--text);min-width:320px;max-width:520px;max-height:60vh;overflow-y:auto;font-size:12px;line-height:1.5}
+.ctx-detail h3{margin:0 0 10px;font-size:14px;color:var(--role-color,#A78BFA);letter-spacing:.02em}
+.ctx-detail .cd-close{position:absolute;top:10px;right:12px;background:transparent;border:none;color:var(--muted);font-size:16px;cursor:pointer}
 .ctx-detail dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px}
-.ctx-detail dt{color:#94A3B8;font-weight:600;white-space:nowrap}
-.ctx-detail dd{margin:0;color:#F1F4FB;overflow-wrap:anywhere}
-.ctx-detail .cd-logs{margin-top:10px;padding:6px 8px;background:rgba(0,0,0,.3);border-radius:4px;font-family:ui-monospace,monospace;font-size:10.5px;max-height:120px;overflow-y:auto}
-.edit-toolbar{display:flex;gap:8px;align-items:center;padding:6px 16px;background:rgba(99,102,241,.18);border-bottom:1px solid rgba(99,102,241,.4);font-size:11px;flex-wrap:wrap}.edit-toolbar .et-hint{flex:1;color:#D7DBEA;min-width:160px}.edit-toolbar button{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#F1F4FB;padding:3px 10px;border-radius:4px;cursor:pointer;font-size:11px}.edit-toolbar button:hover{background:rgba(99,102,241,.35)}
-.edit-toolbar button.add{background:rgba(16,185,129,.22);border-color:rgba(16,185,129,.55)}.edit-toolbar button.add:hover{background:rgba(16,185,129,.4)}
-.edit-toolbar button.del{background:rgba(239,68,68,.22);border-color:rgba(239,68,68,.55)}.edit-toolbar button.del:hover{background:rgba(239,68,68,.4)}.edit-toolbar button[disabled]{opacity:.4;cursor:not-allowed}
-/* 선택된 item 의 속성 편집 패널 — 우측 슬라이드 */
-.prop-panel{position:absolute;right:12px;top:90px;width:240px;background:#13162A;border:1px solid #2A2E3F;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.6);padding:12px;font-size:11px;color:#F1F4FB;z-index:25;display:none}
+.ctx-detail dt{color:var(--muted);font-weight:600;white-space:nowrap}
+.ctx-detail dd{margin:0;color:var(--text);overflow-wrap:anywhere}
+.ctx-detail .cd-logs{margin-top:10px;padding:8px 10px;background:rgba(255,255,255,.045);border-radius:12px;font-family:ui-monospace,monospace;font-size:10.5px;max-height:120px;overflow-y:auto}
+.prop-panel{position:absolute;right:14px;top:14px;width:250px;background:rgba(10,14,24,.96);border:1px solid var(--line-strong);border-radius:18px;box-shadow:0 18px 48px rgba(0,0,0,.5);padding:14px;font-size:11px;color:var(--text);z-index:25;display:none}
 .prop-panel.show{display:block}
-.prop-panel h4{margin:0 0 8px;font-size:12px;color:#A78BFA;text-transform:uppercase;letter-spacing:.04em}
-.prop-panel .pp-row{margin-bottom:8px}
-.prop-panel label{display:block;font-size:10px;color:#94A3B8;margin-bottom:2px}
-.prop-panel select,.prop-panel input{width:100%;background:#0c1020;color:#F1F4FB;border:1px solid #2A2E3F;border-radius:4px;padding:3px 6px;font-size:11px}
-.prop-panel .pp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:4px}
-.prop-panel .pp-thumb{width:100%;aspect-ratio:1/1;background:#0c1020;border:1px solid #2A2E3F;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px}
+.prop-panel h4{margin:0 0 10px;font-size:12px;color:#C6BEFF;letter-spacing:.04em}
+.prop-panel .pp-row{margin-bottom:9px}
+.prop-panel label{display:block;font-size:10px;color:var(--muted);margin-bottom:4px}
+.prop-panel select,.prop-panel input{width:100%;background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:6px 8px;font-size:11px}
+.prop-panel .pp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:5px}
+.prop-panel .pp-thumb{width:100%;aspect-ratio:1/1;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:3px}
 .prop-panel .pp-thumb img{max-width:100%;max-height:100%;image-rendering:pixelated}
-.prop-panel .pp-thumb.active{border-color:#A78BFA;box-shadow:0 0 0 2px rgba(167,139,250,.35)}
-/* 프랍 추가 picker — 모달 grid */
-.prop-picker{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1100;display:flex;align-items:center;justify-content:center}
-.prop-picker-box{background:#13162A;border:1px solid #2A2E3F;border-radius:10px;padding:14px;max-width:520px;max-height:80vh;overflow-y:auto;color:#F1F4FB}
-.prop-picker-box h3{margin:0 0 10px;font-size:13px;color:#A78BFA}
+.prop-panel .pp-thumb.active{border-color:rgba(138,124,255,.7);box-shadow:0 0 0 2px rgba(138,124,255,.18)}
+.prop-picker{position:fixed;inset:0;background:rgba(3,5,10,.68);z-index:1100;display:flex;align-items:center;justify-content:center}
+.prop-picker-box{background:rgba(10,14,24,.98);border:1px solid var(--line-strong);border-radius:20px;padding:16px;max-width:520px;max-height:80vh;overflow-y:auto;color:var(--text)}
+.prop-picker-box h3{margin:0 0 12px;font-size:13px;color:#C6BEFF}
 .prop-picker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
-.prop-pick{background:#0c1020;border:1px solid #2A2E3F;border-radius:4px;padding:6px;cursor:pointer;text-align:center}
-.prop-pick:hover{border-color:#A78BFA}
+.prop-pick{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:7px;cursor:pointer;text-align:center}
+.prop-pick:hover{border-color:rgba(138,124,255,.6)}
 .prop-pick img{max-width:60px;max-height:60px;image-rendering:pixelated}
-.prop-pick .pp-name{font-size:10px;color:#94A3B8;margin-top:4px;word-break:break-all}
-/* 편집 모드 — 드래그 가능 요소 강조 */
-body[data-edit-mode="true"] .stage{background-image:linear-gradient(rgba(99,102,241,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.15) 1px,transparent 1px);background-size:32px 32px}
-body[data-edit-mode="true"] .desk,body[data-edit-mode="true"] .char,body[data-edit-mode="true"] .obj{cursor:grab;outline:1px dashed rgba(99,102,241,.5)}
-body[data-edit-mode="true"] .desk:hover,body[data-edit-mode="true"] .char:hover,body[data-edit-mode="true"] .obj:hover{outline:2px solid #6366F1;z-index:30}
-body[data-edit-mode="true"] .dragging{cursor:grabbing!important;opacity:.7;outline:2px solid #FB923C!important;z-index:40}
-body[data-edit-mode="true"] .selected{outline:2px solid #F472B6!important;box-shadow:0 0 0 4px rgba(244,114,182,.25);z-index:35}
+.prop-pick .pp-name{font-size:10px;color:var(--muted);margin-top:5px;word-break:break-all}
+body[data-edit-mode="true"] .stage{background-image:linear-gradient(rgba(138,124,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(138,124,255,.18) 1px,transparent 1px);background-size:32px 32px}
+body[data-edit-mode="true"] .desk,body[data-edit-mode="true"] .char,body[data-edit-mode="true"] .obj{cursor:grab;outline:1px dashed rgba(138,124,255,.45)}
+body[data-edit-mode="true"] .desk:hover,body[data-edit-mode="true"] .char:hover,body[data-edit-mode="true"] .obj:hover{outline:2px solid rgba(138,124,255,.8);z-index:30}
+body[data-edit-mode="true"] .dragging{cursor:grabbing!important;opacity:.72;outline:2px solid var(--warning)!important;z-index:40}
+body[data-edit-mode="true"] .selected{outline:2px solid #F472B6!important;box-shadow:0 0 0 4px rgba(244,114,182,.22);z-index:35}
 body[data-edit-mode="true"] .char .shadow{display:none}
-footer{padding:8px 16px 12px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.25);font-size:11px;color:var(--muted)}.progress{height:5px;background:rgba(255,255,255,.08);margin-bottom:6px}.bar{height:100%;width:0;background:var(--accent);transition:width .25s}
+@media (max-width:1180px){
+  .workspace{grid-template-columns:220px minmax(560px,1fr)}
+  .mission-panel{display:none}
+}
+@media (max-width:900px){
+  body{overflow:auto}
+  .office-app{height:auto;min-height:100vh;grid-template-rows:auto auto auto auto;padding:14px}
+  .topbar{flex-wrap:wrap}
+  .topbar-center{order:3;width:100%;justify-content:flex-start}
+  .workspace{grid-template-columns:1fr}
+  .team-panel{display:none}
+  .mission-panel{display:block}
+  .office-shell{min-height:620px}
+  .mission-title{max-width:calc(100vw - 140px)}
+}
+@media (prefers-reduced-motion: reduce){
+  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
+}
 `;
@@ -138,6 +138,7 @@ function setSprite(role,mode,frame=0,dir=0){
  const a=anim[role]; if(!a) return;
  a.mode=mode;a.frame=frame;a.dir=dir;
  ch.classList.toggle('walking',mode==='walk');
+  ch.classList.toggle('working',mode==='work');
  const img=ch.querySelector('img');
  if(mode==='walk'){
    // 4방향 walk sprite — 좌우 sprite를 따로 제공하므로 scaleX 반전은 *안* 한다.
@@ -148,7 +149,9 @@ function setSprite(role,mode,frame=0,dir=0){
    img.src=png('walk-r'+a.row+'-d'+_faceToWalkDir(a.face)+'-f0');
    img.style.transform='none';
  } else if(mode==='work'){
-    img.src=png('work-r'+a.row+'-f'+frame);
+    // 기존 work sprite 는 불꽃 연출이 과도해 제품 톤을 깨뜨렸다.
+    // 작업 중임은 CSS focus treatment 로 표현하고 캐릭터 본체는 idle 계열을 유지.
+    img.src=png('idle-r'+a.row+'-f'+(frame%2));
    img.style.transform=(a.face==='R'?'scaleX(-1)':'none');
  } else {
    img.src=png('idle-r'+a.row+'-f'+frame);
@@ -266,13 +269,14 @@ function sendHome(role,mode='sit'){
  walkPath(role,[st.dock,[hx,hy]],()=>setSprite(role,mode));
 }
 setInterval(()=>{
+  if(!['idle','done'].includes(_prevStatus || 'idle')) return;
  const free=Object.keys(chars).filter(k=>anim[k]?.mode==='sit'&&!chars[k].classList.contains('active'));
  if(!free.length)return;
  const k=free[Math.floor(Math.random()*free.length)],st=stationByKey[k];
  if(!st || !Array.isArray(st.roam) || !st.roam.length || !Array.isArray(st.dock)) return;
  const pt=st.roam[Math.floor(Math.random()*st.roam.length)];
  walkPath(k,[st.dock,pt,st.dock,[st.seatX,st.seatY]],()=>setSprite(k,'sit'));
-},5600);
+},9000);
 function activate(role){Object.keys(chars).forEach(k=>chars[k].classList.toggle('active',k===role))}
 function bubble(role,text){const ch=chars[role];if(!ch||!text)return;const b=document.createElement('div');b.className='bubble';b.textContent=text;b.style.left=(parseFloat(ch.style.left)+28)+'px';b.style.top=(parseFloat(ch.style.top)-6)+'px';stage.appendChild(b);setTimeout(()=>b.remove(),2400)}

@@ -346,19 +350,43 @@ function routeBubble(b){
  const role = roleMap[b?.agentId] || 'ceo';
  bubble(role, b?.text || '');
 }
+const STATUS_COPY = {
+  idle:               { label:'대기 중', note:'새로운 작업 요청을 기다리고 있습니다.', tone:'neutral' },
+  intake:             { label:'요청 수신', note:'요청을 읽고 작업 범위를 정리하고 있습니다.', tone:'neutral' },
+  analyzing:          { label:'의도 분석', note:'목표와 제약을 정리하는 중입니다.', tone:'neutral' },
+  need_clarification: { label:'확인 필요', note:'결정을 위해 추가 입력이 필요합니다.', tone:'warning' },
+  contract_ready:     { label:'브리프 확정', note:'요구사항을 실행 가능한 형태로 정리했습니다.', tone:'neutral' },
+  planning:           { label:'설계 중', note:'실행 순서와 담당을 배치하고 있습니다.', tone:'neutral' },
+  executing:          { label:'실행 중', note:'담당 에이전트가 실제 작업을 진행 중입니다.', tone:'neutral' },
+  reviewing:          { label:'검수 중', note:'산출물의 완성도와 리스크를 점검하고 있습니다.', tone:'neutral' },
+  waiting_approval:   { label:'승인 대기', note:'다음 진행을 위해 사용자의 판단을 기다립니다.', tone:'warning' },
+  error:              { label:'주의 필요', note:'흐름을 멈춘 이슈를 확인해야 합니다.', tone:'danger' },
+  done:               { label:'완료', note:'이번 작업 라운드가 정리되었습니다.', tone:'success' },
+};
+function _statusMeta(status){
+  return STATUS_COPY[status] || STATUS_COPY.idle;
+}
+function _pct(v){
+  return Math.max(0, Math.min(100, Math.round((typeof v === 'number' ? v : 0) * 100)));
+}
 let _prevStatus = null;
 let _lastRenderedLog = null;
 function apply(s){
  _lastState = s; // D. 컨텍스트 메뉴 / 세부보기에서 사용.
  const st = s?.status || 'idle';
+  const meta = _statusMeta(st);
  // 정적 갱신은 *항상* — 헤더/태스크/단계/로그/프로그레스.
-  document.getElementById('status').textContent = st;
-  document.getElementById('status').className = 'status s-' + st;
+  const statusEl = document.getElementById('status');
+  const phasePill = document.getElementById('phasePill');
+  if(statusEl) statusEl.textContent = meta.label;
+  if(phasePill) phasePill.dataset.tone = meta.tone;
  document.getElementById('agent').textContent = s?.agentName || 'Astra';
-  document.getElementById('task').textContent = s?.currentTask || '—';
-  document.getElementById('step').textContent = s?.currentStep || '—';
+  document.getElementById('task').textContent = s?.currentTask || '새 요청을 기다리고 있습니다.';
+  document.getElementById('step').textContent = s?.currentStep || meta.label;
+  document.getElementById('phaseLabel').textContent = meta.label;
+  document.getElementById('phaseNote').textContent = meta.note;
  const lastLog = (s?.recentLogs||[]).slice(-1)[0];
-  document.getElementById('log').textContent = lastLog || '—';
+  document.getElementById('log').textContent = lastLog || '아직 기록된 활동이 없습니다.';
  // 작업 중 (executing/reviewing) 상태에 활성 에이전트 머리 위 말풍선 — 로그 변할 때마다.
  if(lastLog && lastLog !== _lastRenderedLog){
    _lastRenderedLog = lastLog;
@@ -372,7 +400,29 @@ function apply(s){
      _bubbleFromLog(r, lastLog);
    }
  }
-  document.getElementById('bar').style.width = Math.round((s?.progress||0)*100) + '%';
+  const progressPct = _pct(s?.progress);
+  document.getElementById('bar').style.width = progressPct + '%';
+  document.getElementById('progressLabel').textContent = progressPct + '%';
+  const attentionCard = document.getElementById('attentionCard');
+  const attentionTitle = document.getElementById('attentionTitle');
+  const attentionBody = document.getElementById('attentionBody');
+  if(s?.awaitingApproval){
+    attentionCard.dataset.tone = 'warning';
+    attentionTitle.textContent = '승인 필요';
+    attentionBody.textContent = s.awaitingApproval;
+  } else if(Array.isArray(s?.needUserInput) && s.needUserInput.length){
+    attentionCard.dataset.tone = 'warning';
+    attentionTitle.textContent = '추가 입력 필요';
+    attentionBody.textContent = s.needUserInput[0];
+  } else if(st === 'error'){
+    attentionCard.dataset.tone = 'danger';
+    attentionTitle.textContent = '이슈 감지';
+    attentionBody.textContent = lastLog || meta.note;
+  } else {
+    attentionCard.dataset.tone = '';
+    attentionTitle.textContent = '없음';
+    attentionBody.textContent = '현재 막힘 없이 진행 중입니다.';
+  }
  // B. 미니 맵 렌더 — pipelineStages가 있을 때만 보임.
  const mm = document.getElementById('miniMap');
  const stages = s?.pipelineStages;
@@ -555,13 +605,12 @@ function _renderTicker(){
  const track = document.getElementById('tickerTrack');
  if(_tickerItems.length === 0){ wrap.style.display = 'none'; return; }
  wrap.style.display = 'block';
-  // 무한 스크롤처럼 보이게 동일 리스트 2벌 연결.
  const html = _tickerItems.map(it => {
    const cls = _classifyTickerItem(it.text);
    const ag = it.agentId ? '<span class="tk-agent">'+ it.agentId +'</span>' : '';
    return '<span class="tk-item '+ cls +'">'+ ag + (it.text || '').replace(/[<>]/g,'') +'</span>';
  }).join('');
-  track.innerHTML = html + html;
+  track.innerHTML = html;
 }
 // ─────────────── Dual-mode message handler (refactor #D) ───────────────
 // 옛 pixelOfficeUpdate/Activity 와 새 officeSnapshot 둘 다 listen. 첫 officeSnapshot
@@ -576,6 +625,51 @@ function _phaseToStatus(phase){
  if(phase === 'intake') return 'analyzing';
  return phase || 'idle';
 }
+const ROLE_LABELS = {
+  ceo:'CEO',
+  planner:'기획',
+  researcher:'리서치',
+  designer:'디자인',
+  developer:'개발',
+  qa:'QA',
+  inspector:'감리',
+  support:'지원',
+  writer:'문서',
+};
+const ROLE_SHORT = {
+  ceo:'CEO',
+  planner:'PL',
+  researcher:'RS',
+  designer:'UX',
+  developer:'DEV',
+  qa:'QA',
+  inspector:'PO',
+  support:'PM',
+  writer:'WR',
+};
+function _renderRoster(roster, activeAgentId){
+  const wrap = document.getElementById('rosterList');
+  const count = document.getElementById('rosterCount');
+  if(!wrap || !count) return;
+  const list = Array.isArray(roster) ? roster : [];
+  count.textContent = String(list.length);
+  if(!list.length){
+    wrap.innerHTML = '<div class="roster-item"><div class="roster-copy"><strong>등록된 팀이 없습니다</strong><span class="roster-meta">회사 모드를 켜면 라인업이 표시됩니다.</span></div></div>';
+    return;
+  }
+  wrap.innerHTML = list.map((r)=>{
+    const active = r.agentId === activeAgentId;
+    const role = ROLE_LABELS[r.roleCategory] || r.roleCategory || '지원';
+    const short = ROLE_SHORT[r.roleCategory] || 'AG';
+    return '<div class="roster-item '+(active?'active':'')+'" data-agent="'+(r.agentId||'')+'">'+
+      '<div class="roster-avatar">'+short+'</div>'+
+      '<div class="roster-copy">'+
+        '<strong>'+(r.agentName || r.agentId || 'Agent')+'</strong>'+
+        '<div class="roster-meta"><span class="roster-status"></span><span>'+role+'</span></div>'+
+      '</div>'+
+    '</div>';
+  }).join('');
+}
 // refactor #G-full — roster 에 있는 agent 중 desk 가 없는 경우 자동 생성.
 // 한 번 처리된 agentId 는 _autoDeskedFor 에 기록 → 사용자가 그 desk 를 지워도 재생성 안 함.
 const _autoDeskedFor = new Set();
@@ -589,6 +683,7 @@ function _roleCategoryToCharRow(role){
    case 'qa': return 5;
    case 'inspector': return 6;
    case 'support': return 7;
+    case 'writer': return 1;
    default: return 0;
  }
 }
@@ -641,6 +736,7 @@ function _ensureRosterDesks(roster){
 function applyFromSnapshot(snap){
  if(!snap) return;
  const roster = Array.isArray(snap.roster) ? snap.roster : [];
+  _renderRoster(roster, snap.activeAgentId);
  _ensureRosterDesks(roster);
  const active = (snap.activeAgentId && roster.find(a => a.agentId === snap.activeAgentId)) || roster[0];
  const synthetic = {
@@ -872,7 +968,7 @@ function _setEdit(on){
  _editMode=!!on;
  document.body.dataset.editMode = _editMode?'true':'false';
  document.getElementById('editToolbar').style.display = _editMode?'flex':'none';
-  document.getElementById('editBtn').textContent = _editMode?'✓ 편집 종료':'✏️ 편집';
+  document.getElementById('editBtn').textContent = _editMode?'편집 종료':'Customize';
  if(_editMode){
    _snapshotBeforeEdit = _snapshotLayout();
  } else {
@@ -49,28 +49,99 @@ export interface CalendarConfig {
    connectedAt?: string;
 }

+/**
+ * Settings + globalState 두 곳에서 읽어 merge.
+ *
+ *   • VS Code Settings (g1nation.google.*) — 사용자가 직접 편집 가능한 필드:
+ *       clientId, clientSecret, calendarId, defaultDurationMinutes, icalUrl, daysAhead
+ *     이 값이 채워져 있으면 globalState 의 같은 필드보다 *우선*.
+ *
+ *   • globalState (CAL_CONFIG_KEY) — 마법사가 자동 관리하는 secret / runtime 필드:
+ *       refreshToken, accessToken, accessTokenExpiresAt, connectedAs, connectedAt, lastFetchAt
+ *     사용자는 settings 에서 안 보임. 마법사가 OAuth 완료 후 자동 기록.
+ *
+ *   • 옛 사용자 호환: globalState 에 clientId 같은 게 남아있어도 settings 가 비면
+ *     globalState 값으로 fallback. 명시적으로 settings 에 비워두면 globalState 도 무시.
+ */
 export function readCalendarConfig(context: vscode.ExtensionContext): CalendarConfig {
-    const raw = context.globalState.get(CAL_CONFIG_KEY) as Partial<CalendarConfig> | undefined;
+    const raw = (context.globalState.get(CAL_CONFIG_KEY) as Partial<CalendarConfig> | undefined) ?? {};
+    const s = vscode.workspace.getConfiguration('g1nation.google');
+    const fromSettings = <T>(key: string): T | undefined => {
+        const v = s.get<T>(key);
+        // 빈 문자열은 "미설정" 으로 취급 — 사용자가 지운 케이스.
+        if (typeof v === 'string' && v.trim() === '') return undefined;
+        return v;
+    };
+    const clientId = fromSettings<string>('clientId') ?? (typeof raw.clientId === 'string' ? raw.clientId : undefined);
+    const clientSecret = fromSettings<string>('clientSecret') ?? (typeof raw.clientSecret === 'string' ? raw.clientSecret : undefined);
+    const calendarId = fromSettings<string>('calendarId') ?? (typeof raw.calendarId === 'string' ? raw.calendarId : undefined);
+    const defaultDurationMinutes = fromSettings<number>('defaultEventDurationMinutes')
+        ?? (typeof raw.defaultDurationMinutes === 'number' ? raw.defaultDurationMinutes : undefined);
+    const icalUrl = fromSettings<string>('icalUrl') ?? (typeof raw.icalUrl === 'string' ? raw.icalUrl : '');
+    const daysAhead = fromSettings<number>('icalDaysAhead') ?? (typeof raw.daysAhead === 'number' && raw.daysAhead > 0 ? raw.daysAhead : 14);
    return {
-        icalUrl: typeof raw?.icalUrl === 'string' ? raw.icalUrl : '',
-        daysAhead: typeof raw?.daysAhead === 'number' && raw.daysAhead > 0 ? raw.daysAhead : 14,
-        lastFetchAt: typeof raw?.lastFetchAt === 'string' ? raw.lastFetchAt : undefined,
-        clientId: typeof raw?.clientId === 'string' ? raw.clientId : undefined,
-        clientSecret: typeof raw?.clientSecret === 'string' ? raw.clientSecret : undefined,
-        refreshToken: typeof raw?.refreshToken === 'string' ? raw.refreshToken : undefined,
-        calendarId: typeof raw?.calendarId === 'string' ? raw.calendarId : undefined,
-        defaultDurationMinutes: typeof raw?.defaultDurationMinutes === 'number' ? raw.defaultDurationMinutes : undefined,
-        accessToken: typeof raw?.accessToken === 'string' ? raw.accessToken : undefined,
-        accessTokenExpiresAt: typeof raw?.accessTokenExpiresAt === 'number' ? raw.accessTokenExpiresAt : undefined,
-        connectedAs: typeof raw?.connectedAs === 'string' ? raw.connectedAs : undefined,
-        connectedAt: typeof raw?.connectedAt === 'string' ? raw.connectedAt : undefined,
+        icalUrl: icalUrl ?? '',
+        daysAhead: daysAhead ?? 14,
+        lastFetchAt: typeof raw.lastFetchAt === 'string' ? raw.lastFetchAt : undefined,
+        clientId,
+        clientSecret,
+        refreshToken: typeof raw.refreshToken === 'string' ? raw.refreshToken : undefined,
+        calendarId,
+        defaultDurationMinutes,
+        accessToken: typeof raw.accessToken === 'string' ? raw.accessToken : undefined,
+        accessTokenExpiresAt: typeof raw.accessTokenExpiresAt === 'number' ? raw.accessTokenExpiresAt : undefined,
+        connectedAs: typeof raw.connectedAs === 'string' ? raw.connectedAs : undefined,
+        connectedAt: typeof raw.connectedAt === 'string' ? raw.connectedAt : undefined,
    };
 }

+/**
+ * Patch 의 필드를 settings 또는 globalState 의 적절한 곳에 분기 저장.
+ *   • settings 로 가는 것 (사용자 편집 가능): clientId, clientSecret, calendarId,
+ *     defaultDurationMinutes, icalUrl, daysAhead
+ *   • globalState 로 가는 것 (secret / runtime): refreshToken, accessToken,
+ *     accessTokenExpiresAt, connectedAs, connectedAt, lastFetchAt
+ *
+ * 한 번에 양쪽을 patch 해도 OK — 분기 자동.
+ */
 export async function writeCalendarConfig(context: vscode.ExtensionContext, patch: Partial<CalendarConfig>): Promise<void> {
-    const cur = readCalendarConfig(context);
-    const next: CalendarConfig = { ...cur, ...patch };
-    await context.globalState.update(CAL_CONFIG_KEY, next);
+    // Settings (g1nation.google.*) 로 가는 필드들.
+    const s = vscode.workspace.getConfiguration('g1nation.google');
+    const settingsKeys: Array<[keyof CalendarConfig, string]> = [
+        ['clientId', 'clientId'],
+        ['clientSecret', 'clientSecret'],
+        ['calendarId', 'calendarId'],
+        ['defaultDurationMinutes', 'defaultEventDurationMinutes'],
+        ['icalUrl', 'icalUrl'],
+        ['daysAhead', 'icalDaysAhead'],
+    ];
+    for (const [src, dst] of settingsKeys) {
+        if (src in patch) {
+            const v = (patch as any)[src];
+            // undefined → settings 에서 제거 (default 로 복귀). 빈 문자열도 동일 취급.
+            const toWrite = (v === undefined || v === '') ? undefined : v;
+            try { await s.update(dst, toWrite, vscode.ConfigurationTarget.Global); }
+            catch { /* settings 쓰기 실패 시 globalState 로 fallback (다음 read 가 globalState 봄). */
+                const cur = (context.globalState.get(CAL_CONFIG_KEY) as Partial<CalendarConfig>) ?? {};
+                await context.globalState.update(CAL_CONFIG_KEY, { ...cur, [src]: v });
+            }
+        }
+    }
+    // GlobalState 로 가는 secret / runtime 필드.
+    const globalKeys: Array<keyof CalendarConfig> = [
+        'refreshToken', 'accessToken', 'accessTokenExpiresAt',
+        'connectedAs', 'connectedAt', 'lastFetchAt',
+    ];
+    const cur = (context.globalState.get(CAL_CONFIG_KEY) as Partial<CalendarConfig>) ?? {};
+    const next: Partial<CalendarConfig> = { ...cur };
+    let dirty = false;
+    for (const k of globalKeys) {
+        if (k in patch) {
+            (next as any)[k] = (patch as any)[k];
+            dirty = true;
+        }
+    }
+    if (dirty) await context.globalState.update(CAL_CONFIG_KEY, next);
 }

 /** 회사 디렉토리 내부 캐시 파일 경로. workspace 없으면 globalStorage 로 fallback. */