import { useEffect, useState } from 'react' import { cn } from '@/lib/utils' import type { AgentWorkingRow, AgentWorkingStatus } from './agents-working-panel' import type { ModelPresetId } from './team-panel' import { AGENT_ACCENT_COLORS, AgentAvatar } from './agent-avatar' export type RemoteSession = { sessionKey: string label: string model?: string status: 'active' | 'idle' | 'done' startedAt: number kind: string lastMessage?: string tokenCount?: number } export type OfficeViewProps = { agentRows: AgentWorkingRow[] missionRunning: boolean onViewOutput: (agentId: string) => void onNewMission?: () => void selectedOutputAgentId?: string activeTemplateName?: string processType: 'sequential' | 'hierarchical' | 'parallel' companyName?: string agentTasks?: Record remoteSessions?: RemoteSession[] onViewRemoteOutput?: (sessionKey: string, label: string) => void /** Fixed pixel height for the office container (compact mode) */ containerHeight?: number /** Hide the header bar (title, badges, buttons) */ hideHeader?: boolean } export const OFFICE_MODEL_BADGE: Record = { auto: 'rounded-full border border-neutral-200 bg-neutral-100 text-neutral-600', opus: 'border border-orange-200 bg-orange-50 text-orange-700', sonnet: 'border border-blue-200 bg-blue-50 text-blue-700', codex: 'border border-emerald-200 bg-emerald-50 text-emerald-700', flash: 'border border-violet-200 bg-violet-50 text-violet-700', minimax: 'border border-amber-200 bg-amber-50 text-amber-700', 'pc1-coder': 'border border-cyan-200 bg-cyan-50 text-cyan-700', 'pc1-planner': 'border border-indigo-200 bg-indigo-50 text-indigo-700', 'pc1-critic': 'border border-purple-200 bg-purple-50 text-purple-700', } export const OFFICE_MODEL_LABEL: Record = { auto: 'Auto', opus: 'Opus', sonnet: 'Sonnet', codex: 'Codex', flash: 'Flash', minimax: 'MiniMax', 'pc1-coder': 'PC1 Coder', 'pc1-planner': 'PC1 Planner', 'pc1-critic': 'PC1 Critic', } const DEFAULT_OFFICE_MODEL_BADGE = 'border border-neutral-200 bg-neutral-50 text-neutral-700' type OfficeLayoutTemplate = 'grid' | 'roundtable' | 'warroom' type SocialSpotType = 'coffee' | 'water' | 'plant' | 'snack' type SocialSpot = { x: number; y: number; type: SocialSpotType } export function getOfficeModelBadge(modelId: string): string { return OFFICE_MODEL_BADGE[modelId as ModelPresetId] ?? DEFAULT_OFFICE_MODEL_BADGE } export function getOfficeModelLabel(modelId: string): string { if (!modelId) return 'Unknown' return OFFICE_MODEL_LABEL[modelId as ModelPresetId] ?? modelId.split('/')[1] ?? modelId } export function getAgentStatusMeta(status: AgentWorkingStatus): { label: string className: string dotClassName: string pulse?: boolean } { switch (status) { case 'active': return { label: 'Active', className: 'text-emerald-600', dotClassName: 'bg-emerald-500', pulse: true } case 'ready': case 'idle': return { label: 'Idle', className: 'text-neutral-600', dotClassName: 'bg-neutral-400' } case 'error': return { label: 'Error', className: 'text-red-600', dotClassName: 'bg-red-500' } case 'none': return { label: 'Offline', className: 'text-neutral-400', dotClassName: 'bg-neutral-400' } case 'spawning': return { label: 'Starting', className: 'text-blue-600', dotClassName: 'bg-blue-500', pulse: true } case 'paused': return { label: 'Paused', className: 'text-amber-700', dotClassName: 'bg-amber-500' } default: return { label: String(status), className: 'text-neutral-600', dotClassName: 'bg-neutral-400' } } } const GRID_DESK_POSITIONS = [ { x: 120, y: 180 }, { x: 310, y: 180 }, { x: 500, y: 180 }, { x: 690, y: 180 }, { x: 120, y: 320 }, { x: 310, y: 320 }, { x: 500, y: 320 }, { x: 690, y: 320 }, { x: 215, y: 460 }, { x: 405, y: 460 }, { x: 595, y: 460 }, { x: 785, y: 460 }, ] const ROUNDTABLE_DESK_POSITIONS = Array.from({ length: 12 }, (_, i) => { const angle = (i * 30 - 90) * Math.PI / 180 const cx = 450 const cy = 320 const r = 240 return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle), } }) const WARROOM_DESK_POSITIONS = [ { x: 90, y: 200 }, { x: 228, y: 200 }, { x: 366, y: 200 }, { x: 504, y: 200 }, { x: 642, y: 200 }, { x: 780, y: 200 }, { x: 90, y: 420 }, { x: 228, y: 420 }, { x: 366, y: 420 }, { x: 504, y: 420 }, { x: 642, y: 420 }, { x: 780, y: 420 }, ] const GRID_SOCIAL_SPOTS: SocialSpot[] = [ { x: 840, y: 140, type: 'coffee' as const }, { x: 840, y: 300, type: 'water' as const }, { x: 60, y: 440, type: 'plant' as const }, { x: 840, y: 460, type: 'snack' as const }, ] const ROUNDTABLE_SOCIAL_SPOTS: SocialSpot[] = [ { x: 450, y: 320, type: 'plant' }, { x: 510, y: 320, type: 'snack' }, { x: 870, y: 120, type: 'coffee' }, { x: 870, y: 480, type: 'water' }, ] const WARROOM_SOCIAL_SPOTS: SocialSpot[] = [ { x: 56, y: 300, type: 'coffee' }, { x: 56, y: 350, type: 'water' }, { x: 904, y: 300, type: 'snack' }, { x: 904, y: 350, type: 'plant' }, ] const DESK_POSITIONS_BY_TEMPLATE: Record> = { grid: GRID_DESK_POSITIONS, roundtable: ROUNDTABLE_DESK_POSITIONS, warroom: WARROOM_DESK_POSITIONS, } const SOCIAL_SPOTS_BY_TEMPLATE: Record = { grid: GRID_SOCIAL_SPOTS, roundtable: ROUNDTABLE_SOCIAL_SPOTS, warroom: WARROOM_SOCIAL_SPOTS, } const LAYOUT_TEMPLATE_OPTIONS: Array<{ key: OfficeLayoutTemplate; label: string }> = [ { key: 'grid', label: '⊞ Grid' }, { key: 'roundtable', label: '○ Roundtable' }, { key: 'warroom', label: '▬▬ War Room' }, ] function truncateSpeech(text: string, max = 64): string { const n = text.replace(/\s+/g, ' ').trim() if (!n) return '' return n.length <= max ? n : `${n.slice(0, max - 1).trimEnd()}…` } function getSpeechLine(agent: AgentWorkingRow, phase: number): string { if (agent.status === 'active' && agent.lastLine) return truncateSpeech(agent.lastLine, 60) if (agent.currentTask) return `Working on ${truncateSpeech(agent.currentTask, 48)}` if (agent.status === 'spawning') return 'Booting up...' if (agent.status === 'paused') return 'On break ☕' if (agent.status === 'error') return 'Need help!' // Idle agents cycle through social activities const socialLines = ['Grabbing coffee ☕', 'Checking messages 📱', 'Stretching 🙆', 'Chatting with team 💬', 'Reading docs 📖', 'Getting water 💧'] if (agent.status === 'idle' || agent.status === 'ready') { return socialLines[Math.floor(phase / 4) % socialLines.length] } return '' } function getStatusDotClass(status: AgentWorkingStatus): string { switch (status) { case 'active': return 'bg-emerald-500' case 'idle': case 'ready': case 'none': return 'bg-neutral-400' case 'spawning': return 'bg-blue-500' case 'paused': return 'bg-amber-500' case 'error': return 'bg-red-500' default: return 'bg-neutral-400' } } function getAgentStatusGlowClass(status: AgentWorkingStatus): string { switch (status) { case 'active': return 'office-status-glow-active' case 'spawning': return 'office-status-glow-starting' case 'paused': return 'office-status-glow-paused' case 'error': return 'office-status-glow-error' default: return 'office-status-glow-idle' } } function getAgentStatusGlowColor(status: AgentWorkingStatus): string { switch (status) { case 'active': return '#10b981' case 'spawning': return '#3b82f6' case 'paused': return '#f59e0b' case 'error': return '#ef4444' default: return '#94a3b8' } } function truncateMonitorText(text: string, max = 30): string { const normalized = text.replace(/\s+/g, ' ').trim() if (!normalized) return '' return normalized.length <= max ? normalized : `${normalized.slice(0, max - 1).trimEnd()}…` } function getDeskMonitorText(agent: AgentWorkingRow, agentTaskTitle?: string): string { const taskTitle = agentTaskTitle?.trim() if (taskTitle) return truncateMonitorText(taskTitle, 30) if (agent.status === 'idle' || agent.status === 'ready') return 'Ready' return getAgentStatusMeta(agent.status).label } function getAgentEmoji(agent: AgentWorkingRow): string | null { const row = agent as AgentWorkingRow & { emoji?: string; avatarEmoji?: string } const emoji = row.emoji?.trim() || row.avatarEmoji?.trim() return emoji || null } // ── SVG Office Furniture ── function DeskSVG({ x, y, occupied, accent, monitorText, monitorGlow, }: { x: number y: number occupied: boolean accent?: string monitorText?: string monitorGlow?: string }) { return ( {/* Desk surface */} {/* Desk legs */} {/* Monitor */} {occupied ? ( <> {monitorText ? ( {monitorText} ) : null} ) : ( <> )} {/* Chair */} ) } function CoffeeMachineSVG({ x, y }: { x: number; y: number }) { return ( ☕ Coffee ) } function WaterCoolerSVG({ x, y }: { x: number; y: number }) { return ( Water ) } function SnackBarSVG({ x, y }: { x: number; y: number }) { return ( 🍪 Snacks ) } function PlantSVG({ x, y }: { x: number; y: number }) { return ( ) } function formatRuntime(startedAt: number, tokenCount?: number): string { const diffMs = Date.now() - startedAt let time: string if (diffMs < 60_000) { time = `${Math.floor(diffMs / 1000)}s` } else { const mins = Math.floor(diffMs / 60_000) time = mins < 60 ? `${mins}m` : `${Math.floor(mins / 60)}h` } const tokens = typeof tokenCount === 'number' ? tokenCount : 0 return `${time} · ${tokens}t` } function kindLabel(kind: string): string { if (kind === 'subagent' || kind === 'sub-agent') return 'Sub-Agent' if (kind === 'main') return 'Main' if (kind === 'chat') return 'Chat' return kind.charAt(0).toUpperCase() + kind.slice(1) } function RemoteSessionCard({ session, onClick }: { session: RemoteSession; onClick: () => void }) { const statusColor = session.status === 'active' ? 'bg-emerald-400 animate-pulse' : session.status === 'done' ? 'bg-neutral-300 dark:bg-neutral-600' : 'bg-amber-400' const badgeColorClass = session.kind === 'main' ? 'bg-violet-100 text-violet-600 dark:bg-violet-950/50 dark:text-violet-400 border-violet-200 dark:border-violet-800' : session.kind === 'subagent' || session.kind === 'sub-agent' ? 'bg-emerald-100 text-emerald-600 dark:bg-emerald-950/50 dark:text-emerald-400 border-emerald-200 dark:border-emerald-800' : 'bg-blue-100 text-blue-600 dark:bg-blue-950/50 dark:text-blue-400 border-blue-200 dark:border-blue-800' const modelDisplay = session.model ? session.model.split('/').pop()?.replace(/:latest$/, '') ?? null : null const lastMessageSnippet = session.lastMessage ? session.lastMessage.length > 60 ? `${session.lastMessage.slice(0, 60)}…` : session.lastMessage : null return ( ) } export function OfficeView({ agentRows, missionRunning, onViewOutput, onNewMission, selectedOutputAgentId, activeTemplateName: _activeTemplateName, companyName = 'Swarm', agentTasks = {}, remoteSessions = [], onViewRemoteOutput, containerHeight, hideHeader = false, }: OfficeViewProps) { // When containerHeight is set, we use compact mode: header only (no footer), SVG fills remaining space const compact = Boolean(containerHeight) const [tick, setTick] = useState(0) const [layoutPickerOpen, setLayoutPickerOpen] = useState(false) const [remoteCollapsed, setRemoteCollapsed] = useState(true) const [layoutTemplate, setLayoutTemplate] = useState(() => { if (typeof window === 'undefined') return 'grid' const saved = window.localStorage.getItem('clawsuite:office-layout') return saved === 'roundtable' || saved === 'warroom' || saved === 'grid' ? saved : 'grid' }) const deskPositions = DESK_POSITIONS_BY_TEMPLATE[layoutTemplate] const socialSpots = SOCIAL_SPOTS_BY_TEMPLATE[layoutTemplate] const socialLabelPosition = layoutTemplate === 'roundtable' ? { x: 450, y: 108, text: 'Collaboration Ring' } : layoutTemplate === 'warroom' ? { x: 480, y: 112, text: 'Briefing Lounge' } : { x: 840, y: 110, text: 'Break Area' } const changeLayout = (nextTemplate: OfficeLayoutTemplate) => { setLayoutTemplate(nextTemplate) if (typeof window !== 'undefined') { window.localStorage.setItem('clawsuite:office-layout', nextTemplate) } } // Close layout picker on outside click useEffect(() => { if (!layoutPickerOpen) return function onDown(e: MouseEvent) { const target = e.target as Element if (!target.closest('[data-layout-picker]')) { setLayoutPickerOpen(false) } } document.addEventListener('mousedown', onDown) return () => document.removeEventListener('mousedown', onDown) }, [layoutPickerOpen]) useEffect(() => { // 500ms interval (was 200ms) — the office animations are subtle (drift, bob, walk), // and 200ms x 12 agents was burning frames. 500ms is still fluid visually and // halves the React reconcile + SVG repaint pressure. const timer = window.setInterval(() => setTick((t) => t + 1), 500) return () => window.clearInterval(timer) }, []) useEffect(() => { if (remoteSessions.length > 0) { setRemoteCollapsed(false) } }, [remoteSessions.length]) if (agentRows.length === 0) { return (

🏢

Empty office

Add agents in Configure to fill the office.

) } const sceneW = 1040 const sceneH = 600 const activeCount = agentRows.filter((r) => r.status === 'active').length const sessionCount = agentRows.filter((r) => Boolean(r.sessionKey)).length const phase = tick * 0.2 // Assign agents to desks, idle agents wander to social spots const agentPositions = agentRows.map((agent, index) => { const desk = deskPositions[index % deskPositions.length] const isIdle = agent.status === 'idle' || agent.status === 'ready' const isPaused = agent.status === 'paused' // Idle/paused agents wander between desk and social spots if (isIdle || isPaused) { const wanderCycle = Math.floor((tick + index * 17) / 25) % 4 // 0=desk, 1=walking, 2=social, 3=walking back const socialSpot = socialSpots[(index + Math.floor(tick / 60)) % socialSpots.length] const t = ((tick + index * 17) % 25) / 25 if (wanderCycle === 0) { // At desk return { x: desk.x, y: desk.y - 20, atDesk: true, stationary: true } } else if (wanderCycle === 1) { // Walking to social spot return { x: desk.x + (socialSpot.x - desk.x) * t, y: desk.y - 20 + (socialSpot.y - desk.y + 10) * t, atDesk: false, stationary: false, } } else if (wanderCycle === 2) { // At social spot const bob = Math.sin(phase + index) * 2 return { x: socialSpot.x + (index % 2 === 0 ? -20 : 20), y: socialSpot.y + bob, atDesk: false, stationary: true } } else { // Walking back const socialSpotBack = socialSpots[(index + Math.floor(tick / 60)) % socialSpots.length] return { x: socialSpotBack.x + (desk.x - socialSpotBack.x) * t, y: socialSpotBack.y + (desk.y - 20 - socialSpotBack.y) * t, atDesk: false, stationary: false, } } } // Active/spawning agents stay at desk return { x: desk.x, y: desk.y - 20, atDesk: true, stationary: true } }) return (
{/* Header bar */} {hideHeader ? null :
ClawSuite Office
{agentRows.length} agents {activeCount} working {sessionCount} sessions
{missionRunning ? ( Mission Live ) : null}
} {/* Mobile: compact list instead of desk grid */}
{agentRows.map((agent, index) => { const accent = AGENT_ACCENT_COLORS[index % AGENT_ACCENT_COLORS.length] const statusMeta = getAgentStatusMeta(agent.status) const emoji = getAgentEmoji(agent) return ( ) })}
{/* Desktop office canvas — layout picker (pencil icon) */}
{layoutPickerOpen && (
{LAYOUT_TEMPLATE_OPTIONS.map((opt) => ( ))}
)}
) }