@@ -46,7 +65,9 @@ export function Component() {
>
{id}
- {info.state === 'waiting' && !}
+ {notifications[id] > 0 && (
+ {notifications[id]}
+ )}
))}
{pendingTasks.length > 0 && (
@@ -64,22 +85,10 @@ export function Component() {
/>
)}
- {showHistory && (
- setShowHistory(null)}
- />
+ {showDocument && (
+ setShowDocument(false)} />
)}
-
-
- {Object.keys(agents).map(id => (
-
- ))}
-
);
}
diff --git a/src/pages/agent-office/canvas/AgentSprite.js b/src/pages/agent-office/canvas/AgentSprite.js
index caad3c9..0f0ecfd 100644
--- a/src/pages/agent-office/canvas/AgentSprite.js
+++ b/src/pages/agent-office/canvas/AgentSprite.js
@@ -6,6 +6,7 @@ export class AgentSprite {
this.waypoints = waypoints;
this.state = 'idle';
this.detail = '';
+ this.notificationCount = 0;
const deskKey = `${agentId}_desk`;
const desk = waypoints[deskKey] || { x: 5, y: 3 };
@@ -20,6 +21,10 @@ export class AgentSprite {
this._moveSpeed = 0.05;
}
+ setNotification(count) {
+ this.notificationCount = count;
+ }
+
setState(newState, detail = '') {
this.state = newState;
this.detail = detail;
diff --git a/src/pages/agent-office/canvas/OfficeRenderer.js b/src/pages/agent-office/canvas/OfficeRenderer.js
index 9f37f9b..5feca98 100644
--- a/src/pages/agent-office/canvas/OfficeRenderer.js
+++ b/src/pages/agent-office/canvas/OfficeRenderer.js
@@ -1,6 +1,6 @@
import { drawTileMap } from './TileMap';
import { AgentSprite } from './AgentSprite';
-import { getCharLabel } from './SpriteSheet';
+import { getCharLabel, drawNotificationBadge } from './SpriteSheet';
const STATUS_ICONS = {
idle: null,
@@ -19,6 +19,8 @@ export class OfficeRenderer {
this.agents = {};
this._animId = null;
this._onClick = null;
+ this._onCeoClick = null;
+ this._ceoDocBadge = 0;
const agentIds = ['stock', 'music'];
for (const id of agentIds) {
@@ -56,6 +58,21 @@ export class OfficeRenderer {
return id;
}
}
+ // CEO desk click detection
+ const ceo = this.mapData.waypoints.ceo_desk;
+ if (ceo) {
+ const { scale, offsetX, offsetY, tileSize } = this.renderInfo;
+ const cx = offsetX + ceo.x * tileSize * scale;
+ const cy = offsetY + ceo.y * tileSize * scale;
+ const hitW = 5 * tileSize * scale;
+ const hitH = 2 * tileSize * scale;
+ if (canvasX >= cx - tileSize * scale && canvasY >= cy - tileSize * scale &&
+ canvasX <= cx + hitW && canvasY <= cy + hitH) {
+ if (this._onCeoClick) this._onCeoClick();
+ return 'ceo_desk';
+ }
+ }
+
return null;
}
@@ -76,6 +93,19 @@ export class OfficeRenderer {
}
}
+ setOnCeoClick(handler) {
+ this._onCeoClick = handler;
+ }
+
+ setCeoDocBadge(count) {
+ this._ceoDocBadge = count;
+ }
+
+ setAgentNotification(agentId, count) {
+ const sprite = this.agents[agentId];
+ if (sprite) sprite.setNotification(count);
+ }
+
_loop(timestamp) {
const { ctx, canvas, mapData } = this;
@@ -95,6 +125,9 @@ export class OfficeRenderer {
this._drawOverlay(ctx, sprite, id);
}
+ // CEO desk document icon
+ this._drawCeoDoc(ctx);
+
this._animId = requestAnimationFrame(this._loop);
}
@@ -111,6 +144,11 @@ export class OfficeRenderer {
ctx.fillText(icon, cx, cy - 15 * scale);
}
+ // Notification badge (separate from status icon)
+ if (sprite.notificationCount > 0) {
+ drawNotificationBadge(ctx, cx, cy - 15 * scale, sprite.notificationCount, scale * 1.5);
+ }
+
ctx.fillStyle = 'rgba(255,255,255,0.7)';
ctx.font = `${8 * scale}px monospace`;
ctx.textAlign = 'center';
@@ -126,4 +164,48 @@ export class OfficeRenderer {
ctx.fillText(sprite.detail, cx, bubbleY);
}
}
+
+ _drawCeoDoc(ctx) {
+ if (!this.renderInfo) return;
+ const ceo = this.mapData.waypoints.ceo_desk;
+ if (!ceo) return;
+
+ const { scale, offsetX, offsetY, tileSize } = this.renderInfo;
+ const dx = offsetX + (ceo.x - 1) * tileSize * scale;
+ const dy = offsetY + (ceo.y - 1) * tileSize * scale;
+ const docW = 12 * scale;
+ const docH = 16 * scale;
+
+ // Paper
+ ctx.fillStyle = '#e8e0d0';
+ ctx.fillRect(dx, dy, docW, docH);
+ // Lines on paper
+ ctx.fillStyle = '#bbb';
+ for (let i = 0; i < 4; i++) {
+ ctx.fillRect(dx + 2 * scale, dy + (3 + i * 3) * scale, 8 * scale, 1);
+ }
+ // Folded corner
+ ctx.fillStyle = '#d0c8b8';
+ ctx.beginPath();
+ ctx.moveTo(dx + docW - 3 * scale, dy);
+ ctx.lineTo(dx + docW, dy + 3 * scale);
+ ctx.lineTo(dx + docW - 3 * scale, dy + 3 * scale);
+ ctx.fill();
+
+ // Badge on document
+ if (this._ceoDocBadge > 0) {
+ const bx = dx + docW;
+ const by = dy;
+ const r = 4 * scale;
+ ctx.beginPath();
+ ctx.arc(bx, by, r, 0, Math.PI * 2);
+ ctx.fillStyle = '#f43f5e';
+ ctx.fill();
+ ctx.fillStyle = '#fff';
+ ctx.font = `bold ${5 * scale}px monospace`;
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+ ctx.fillText(this._ceoDocBadge > 9 ? '9+' : String(this._ceoDocBadge), bx, by);
+ }
+ }
}
diff --git a/src/pages/agent-office/canvas/SpriteSheet.js b/src/pages/agent-office/canvas/SpriteSheet.js
index 1693617..6460265 100644
--- a/src/pages/agent-office/canvas/SpriteSheet.js
+++ b/src/pages/agent-office/canvas/SpriteSheet.js
@@ -87,3 +87,25 @@ export function getAnimSpeed(state) {
export function getCharLabel(agentId) {
return (PIXEL_CHARS[agentId] || {}).label || agentId;
}
+
+export function drawNotificationBadge(ctx, x, y, count, scale = 2) {
+ const s = scale;
+ const badgeX = x + 5 * s;
+ const badgeY = y - 8 * s;
+ const radius = 5 * s;
+
+ ctx.beginPath();
+ ctx.arc(badgeX, badgeY, radius, 0, Math.PI * 2);
+ ctx.fillStyle = '#f43f5e';
+ ctx.fill();
+
+ ctx.strokeStyle = '#fff';
+ ctx.lineWidth = 1;
+ ctx.stroke();
+
+ ctx.fillStyle = '#fff';
+ ctx.font = `bold ${7 * s}px monospace`;
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+ ctx.fillText('!', badgeX, badgeY);
+}
diff --git a/src/pages/agent-office/components/ChatPanel.jsx b/src/pages/agent-office/components/ChatPanel.jsx
index f9f5363..9aedc87 100644
--- a/src/pages/agent-office/components/ChatPanel.jsx
+++ b/src/pages/agent-office/components/ChatPanel.jsx
@@ -4,6 +4,7 @@ const AGENT_COMMANDS = {
stock: [
{ action: 'fetch_news', label: 'λ΄μ€ μμ§', icon: 'π°' },
{ action: 'list_alerts', label: 'μλ λͺ©λ‘', icon: 'π' },
+ { action: 'test_telegram', label: 'ν
λ κ·Έλ¨ ν
μ€νΈ', icon: 'π¨' },
],
music: [
{ action: 'compose', label: 'μ곑 μμ', icon: 'π΅', needsInput: true },
diff --git a/src/pages/agent-office/components/DocumentPanel.jsx b/src/pages/agent-office/components/DocumentPanel.jsx
new file mode 100644
index 0000000..e5033e6
--- /dev/null
+++ b/src/pages/agent-office/components/DocumentPanel.jsx
@@ -0,0 +1,190 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { getActivityFeed, getAgentTasks, getAgentLogs } from '../../../api';
+
+const STATUS_BADGE = {
+ pending: { label: 'λκΈ°', color: '#fbbf24' },
+ approved: { label: 'μΉμΈλ¨', color: '#60a5fa' },
+ working: { label: 'μ§νμ€', color: '#818cf8' },
+ succeeded: { label: 'μλ£', color: '#34d399' },
+ failed: { label: 'μ€ν¨', color: '#f87171' },
+ rejected: { label: 'κ±°μ λ¨', color: '#fb923c' },
+};
+
+const LOG_LEVEL_COLOR = {
+ info: '#60a5fa',
+ warning: '#fbbf24',
+ error: '#f87171',
+};
+
+const DocumentPanel = ({ onClose }) => {
+ const [tab, setTab] = useState('feed');
+ const [feed, setFeed] = useState([]);
+ const [feedLoading, setFeedLoading] = useState(false);
+
+ const [selectedAgent, setSelectedAgent] = useState('stock');
+ const [detailTab, setDetailTab] = useState('tasks');
+ const [tasks, setTasks] = useState([]);
+ const [logs, setLogs] = useState([]);
+ const [detailLoading, setDetailLoading] = useState(false);
+
+ const loadFeed = useCallback(() => {
+ setFeedLoading(true);
+ getActivityFeed(80)
+ .then(data => setFeed(data.items || []))
+ .catch(() => setFeed([]))
+ .finally(() => setFeedLoading(false));
+ }, []);
+
+ const loadDetail = useCallback(() => {
+ setDetailLoading(true);
+ Promise.all([
+ getAgentTasks(selectedAgent, 30).then(d => d.tasks || []).catch(() => []),
+ getAgentLogs(selectedAgent, 50).then(d => d.logs || []).catch(() => []),
+ ]).then(([t, l]) => {
+ setTasks(t);
+ setLogs(l);
+ }).finally(() => setDetailLoading(false));
+ }, [selectedAgent]);
+
+ useEffect(() => {
+ if (tab === 'feed') loadFeed();
+ else loadDetail();
+ }, [tab, loadFeed, loadDetail]);
+
+ const formatTime = (t) => t ? t.replace('T', ' ').slice(0, 19) : '';
+
+ return (
+
+
+ CEO λ³΄κ³ μ
+
+
+
+
+
+
+
+
+ {tab === 'feed' && (
+
+
+
+
+ {feedLoading &&
λ‘λ© μ€...
}
+ {!feedLoading && feed.length === 0 &&
νλ μμ
}
+ {feed.map((item, i) => (
+
+
+
+ {item.agent_id}
+
+ {item.type === 'task' ? (
+
+ {(STATUS_BADGE[item.status] || STATUS_BADGE.pending).label}
+
+ ) : (
+
+ [{item.level}]
+
+ )}
+ {item.telegram_sent !== undefined && (
+ {item.telegram_sent ? 'TG OK' : 'TG Fail'}
+ )}
+
+
{item.message}
+
+ {formatTime(item.created_at)}
+ {item.duration_seconds != null && ` Β· ${item.duration_seconds}s`}
+
+
+ ))}
+
+ )}
+
+ {tab === 'detail' && (
+
+
+ {['stock', 'music'].map(id => (
+
+ ))}
+
+
+
+
+
+
+
+ {detailLoading &&
λ‘λ© μ€...
}
+
+ {!detailLoading && detailTab === 'tasks' && (
+
+ {tasks.length === 0 &&
μ΄λ ₯ μμ
}
+ {tasks.map(task => {
+ const badge = STATUS_BADGE[task.status] || STATUS_BADGE.pending;
+ return (
+
+
+ {task.task_type}
+
+ {badge.label}
+
+
+
+ {formatTime(task.created_at)}
+ {task.completed_at && ` β ${formatTime(task.completed_at)}`}
+
+ {task.result_data && (
+
+
+ 결과 보기
+ {task.result_data.telegram_sent !== undefined && (
+
+ {task.result_data.telegram_sent ? ' TG OK' : ' TG Fail'}
+
+ )}
+
+ {JSON.stringify(task.result_data, null, 2)}
+
+ )}
+
+ );
+ })}
+
+ )}
+
+ {!detailLoading && detailTab === 'logs' && (
+
+ {logs.length === 0 &&
λ‘κ·Έ μμ
}
+ {logs.map(log => (
+
+
+ [{log.level}]
+
+ {log.message}
+ {formatTime(log.created_at)}
+
+ ))}
+
+ )}
+
+ )}
+
-
- μμ
μ΄λ ₯ β {agentId}
-
-
-
- {loading &&
λ‘λ© μ€...
}
- {!loading && tasks.length === 0 &&
μ΄λ ₯ μμ
}
- {tasks.map(task => {
- const badge = STATUS_BADGE[task.status] || STATUS_BADGE.pending;
- return (
-
-
- {task.task_type}
-
- {badge.label}
-
-
-
- {task.created_at?.replace('T', ' ').slice(0, 19)}
-
- {task.result_data && (
-
- 결과 보기
- {JSON.stringify(task.result_data, null, 2)}
-
- )}
-
- );
- })}
-
-