diff --git a/media/sidebar.css b/media/sidebar.css index 908152e..e94e23e 100644 --- a/media/sidebar.css +++ b/media/sidebar.css @@ -1105,237 +1105,6 @@ 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 으로 판정했을 때 채팅에 끼우는 작은 라벨. 파이프라인 카드는 절대 만들지 않고 한 줄짜리 메타 텍스트만 — 사용자가 diff --git a/media/sidebar.html b/media/sidebar.html index 104a280..d486511 100644 --- a/media/sidebar.html +++ b/media/sidebar.html @@ -403,64 +403,9 @@ -
-
-
- 🏢 Pixel Office - idle -
-
- - -
-
-
-
- -
-
-
-
🧑‍💼
-
-
-
-
- -
-
-
-
-
-
Agent
-
Statusidle
-
Task
-
Step
- - - - - - -
-
-