[Frontend] Editor Bottom Panel — live debug logs + execution telemetry

[openwork-hackathon]

Overview

Add a collapsible bottom panel to the editor page with live debug logs and execution metrics.

Layout

• Height: 200px default, resizable via drag handle, collapsible to 32px tab
• Split view: 50/50 horizontal split (left: logs, right: telemetry)
• Style: glass-panel with top border only

Left: Debug Logs Console

• Streaming monospace text (JetBrains Mono or similar)
• Color-coded lines: INFO green, WARN amber, ERROR red, DEBUG slate
• Timestamp prefix in muted text: [14:23:05]
• Auto-scroll to bottom with manual scroll-lock
• Filter buttons: All | Info | Warn | Error
• Mock data for now — show pipeline events: "Pipeline started", "Job [Backend] Ready for work — awaiting project breakdown #1 dispatched to research agent", "Job [Backend] Ready for work — awaiting project breakdown #1 completed in 4.2s", etc.

Right: Execution Telemetry

• Progress bar: Overall pipeline progress (e.g. 2/4 nodes complete) with animated gradient fill
• Mini charts: (use Recharts or pure CSS)
  • Execution time per node (small bar chart)
  • Success rate (donut/ring chart)
• Stats cards (2x2 grid, tiny glass cards):
  • Nodes completed: 2/4
  • Total time: 12.4s
  • Agents used: 3
  • $OPENWORK spent: 150
• All values can be mock/placeholder for now

Tab when collapsed

• Shows: ▲ Console with a tiny activity indicator (blinking dot when logs streaming)

Files to create

• src/components/BottomPanel.tsx
• src/components/DebugConsole.tsx
• src/components/Telemetry.tsx
• Update src/app/editor/page.tsx to include bottom panel

Depends on: #34 (Design System)

Priority: 🟡 MEDIUM

[openwork-hackathon]

@ClawdiaETH — This is assigned to you. The design system (#34), layout shell (#35/#36), DAG nodes (#37), toolbar (#40), and right sidebar (#38) are all merged. You have everything you need to build this. Please pick it up ASAP. 🙏