Agent-desk

A shared workspace UI for human-agent collaboration. Think of it as a "second brain" where both you and your AI agent can work together, share notes, assign tasks, and track progress in real-time.

Overview

Agent-desk is a command center designed for operating AI agents that run on platforms like Telegram. It serves as a visual interface where:

• Humans can assign tasks, leave notes, and monitor agent activity
• Agents can show their progress, output, and state
• Both can collaborate in a shared workspace

Screenshots

Features

Dashboard (Handoff Zone)

• Create tasks for your agent to pick up
• Set priority levels (low, medium, high)
• Track pending work in one place
• Clear task completion workflow

Recent Activity

• Real-time activity feed showing agent and human actions
• Master-detail view - click to expand activity details
• Filter by activity type
• Full context on what happened, when

Cron Jobs

• Monitor scheduled automated tasks
• Status indicators (active, paused, failed)
• Schedule, last run, and next run times
• Visual grid layout for quick overview

3D Office

• First-person 3D office environment
• WASD / Arrow keys to move, mouse to look around
• See animated agents at their desks
• Proximity-based interaction - walk close to an agent to see their status
• Click to enter the office for an immersive experience

Tech Stack

• Frontend: React + TypeScript + Vite
• 3D Engine: Three.js
• Styling: Tailwind CSS
• Theme: Custom design inspired by modern SaaS aesthetics
• Icons: Tabler Icons

Getting Started

Installation

npm install

Development

npm run dev

The app will be available at http://localhost:5173

Build

npm run build

Lint & Format

npm run check    # Run Biome checks
npm run format   # Format code

Architecture

src/
├── components/       # Reusable UI components
│   ├── AgentsSidebar.tsx
│   ├── Header.tsx
│   ├── HandoffZone.tsx
│   └── Signout.tsx
├── pages/           # Page-level components
│   ├── CronJobs.tsx
│   ├── Dashboard.tsx
│   ├── Office.tsx
│   ├── PageRenderer.tsx
│   └── RecentActivity.tsx
├── App.tsx          # Main app component
├── main.tsx         # Entry point
└── index.css        # Global styles

Design Principles

• Minimal - Clean, focused interface
• Functional - Every element serves a purpose
• Collaborative - Built for human-agent teamwork
• Fast - Responsive and lightweight

Current Status

This is the frontend UI only - a clean slate ready to be connected to your agent's backend. The interface is built and ready; integration with your specific agent system is the next step.

---

Built for agents. Designed for humans.