mirror of
https://github.com/ringhyacinth/Star-Office-UI
synced 2026-04-21 13:27:19 +00:00
A pixel office for your OpenClaw: turn invisible work states into a cozy little space with characters, daily notes, and guest agents. Code under MIT; art assets for non-commercial learning only.
| backend | ||
| frontend | ||
| .gitignore | ||
| LICENSE | ||
| README.md | ||
| set_state.py | ||
| SKILL.md | ||
| state.sample.json | ||
Star Office UI
A tiny “pixel office” status UI for your AI assistant.
- Pixel office background (top-down)
- A little character that moves between areas based on
state - Optional speech bubble / typing effect
- Mobile-friendly access via Cloudflare Tunnel quick tunnel
Language: the demo code/docs are currently mainly in Chinese (中文). PRs welcome.
What it looks like
idle / syncing / error→ breakroom areawriting / researching / executing→ desk area
The UI polls /status and renders the assistant avatar accordingly.
Folder structure
star-office-ui/
backend/ # Flask backend (serves index + status)
frontend/ # Phaser frontend + office_bg.png
state.json # runtime status file
set_state.py # helper to update state.json
Requirements
- Python 3.9+
- Flask
Quick start (local)
1) Install dependencies
pip install flask
2) Put your background image
Put a 800×600 PNG at:
star-office-ui/frontend/office_bg.png
3) Start backend
cd star-office-ui/backend
python app.py
Then open:
4) Update status
From the project root:
python3 star-office-ui/set_state.py writing "Working on a task..."
python3 star-office-ui/set_state.py idle "Standing by"
Public access (Cloudflare quick tunnel)
Install cloudflared, then:
cloudflared tunnel --url http://127.0.0.1:18791
You’ll get a https://xxx.trycloudflare.com URL.
Security notes
- Anyone with the tunnel URL can read
/status. - Don’t put sensitive info in
detail. - If needed, add a token check for
/status(or only return coarse states).
License
MIT