Раздел 7: Визуализация

┌─────────────────────────────────────────────────┐
│  WATCHER                                        │
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│  ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐               │
│  │Agent│ │Agent│ │Agent│ │Agent│               │
│  └─────┘ └─────┘ └─────┘ └─────┘               │
│  ┌─────┐                                        │
│  │Agent│                                        │
│  └─────┘                                        │
├─────────────────────────────────────────────────┤
│  REPUTATION                                     │
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│  ┌─────┐ ┌─────┐                                │
│  │Agent│ │Agent│                                │
│  └─────┘ └─────┘                                │
├─────────────────────────────────────────────────┤
│  KNOWLEDGE                                      │
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│  ┌─────┐                                        │
│  │Agent│                                        │
│  └─────┘                                        │
└─────────────────────────────────────────────────┘

function buildOfficeLayout(agents) {
  // 1. Группировка по модулям
  const departments = groupBy(agents, 'parent_module');
  
  // 2. Сортировка отделов (по алфавиту)
  const sortedModules = Object.keys(departments).sort();
  
  let yOffset = 0;
  
  for (const module of sortedModules) {
    const moduleAgents = departments[module];
    
    // 3. Отрисовка заголовка отдела
    renderDepartmentHeader(module, yOffset);
    yOffset += HEADER_HEIGHT;
    
    // 4. Отрисовка цветовой зоны
    const rows = Math.ceil(moduleAgents.length / 4);
    renderDepartmentZone(module, yOffset, rows);
    
    // 5. Расстановка столов (4 в ряд)
    moduleAgents.forEach((agent, index) => {
      const col = index % 4;
      const row = Math.floor(index / 4);
      renderDesk(agent, col, yOffset + row * DESK_HEIGHT);
    });
    
    yOffset += rows * DESK_HEIGHT + PADDING;
  }
}

<svg id="office" viewBox="0 0 640 800">
  <!-- Динамически генерируется -->
  
  <!-- Отдел Watcher -->
  <g id="dept-watcher" class="department">
    <rect class="dept-zone" fill="#F3E5F5" />
    <text class="dept-label">Watcher</text>
    
    <g class="desk" data-agent="watcher_price_monitor">
      <use href="#desk-template"/>
      <foreignObject>
        <img src="/static/office/avatars/working.gif" class="avatar" />
      </foreignObject>
      <text class="agent-label">Мониторинг цен</text>
    </g>
    
    <!-- ... другие столы ... -->
  </g>
  
  <!-- Отдел Reputation -->
  <g id="dept-reputation" class="department">
    <!-- ... -->
  </g>
</svg>

/* Зона отдела */
.dept-zone {
  rx: 8px;
  opacity: 0.7;
}

/* Заголовок отдела */
.dept-label {
  font-size: 14px;
  font-weight: bold;
  fill: #424242;
}

/* Подпись агента */
.agent-label {
  font-size: 11px;
  fill: #757575;
  text-anchor: middle;
}

/* Подсветка стола */
.desk--ok .desk-glow { fill: #4CAF50; opacity: 0.3; }
.desk--warning .desk-glow { fill: #FFC107; animation: pulse 2s infinite; }
.desk--error .desk-glow { fill: #F44336; animation: pulse 1s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

async function renderOffice() {
  const response = await fetch('/api/v1/office/agents');
  const data = await response.json();
  
  const svg = document.getElementById('office');
  svg.innerHTML = ''; // Очистка
  
  buildOfficeLayout(data.departments);
}

// Polling
setInterval(renderOffice, 30000);

/static/office/
  ├── office.css          # Стили
  ├── office.js           # Логика компоновки
  ├── sprites.svg         # SVG-шаблоны (стол, стул)
  └── avatars/
      ├── working.gif     # Работает
      ├── idle.gif        # Ожидает
      ├── tired.gif       # Устал
      └── error.gif       # Ошибка