360 Secure SkillHub
360 安全技能中心

TODO Web App

提供零依赖 Node.js 服务器脚本与 macOS launchd 自启模板,把 TODO.md 渲染为深色玻璃拟态网页,支持 SSE 实时刷新、点击勾选写回、归档已完成项到 TODO-done.md;需手动复制脚本并配置 node 路径,配套 plist 模板文件在文件列表中缺失。

jwhowa
jwhowa
热度 56.64
最近更新 2026-05-17 14:59:01
分类:自动化依赖:代码执行 / 读写文件 / 联网浏览搜索应用场景:任务管理 / 工作流 / 自动化脚本

安装技能

复制下面的话术发给你的 Agent,它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill: npx secure-skills-cli add todo-webapp
Metadata
name
todo-webapp
description
Deploy a local TODO web app that reads and writes a Markdown TODO.md file. Serves a beautiful dark-themed, glassmorphism UI on the LAN (no HTTPS needed). Features live SSE auto-refresh, click-to-toggle checkboxes, and an "Archive Done" button that moves completed items to TODO-done.md. Auto-starts on boot via launchd (macOS). Use when a user wants a web UI to view and manage their OpenClaw TODO list from any device on their LAN.

todo-webapp

A zero-dependency Node.js web app that turns your TODO.md into a live, interactive task board.

Preview

What it does

  • Serves a dark glassmorphism UI at http://<hostname>.local:3456 (LAN only)
  • Reads TODO.md directly — ## headings become section cards, ### become subheadings, - [ ]/- [x] become clickable items
  • Live updates via Server-Sent Events: any change to TODO.md (by the agent or anyone else) pushes instantly to all open browser tabs
  • Click to toggle: checking an item off saves immediately to TODO.md
  • Archive Done button: moves all [x] items to TODO-done.md with a date stamp and removes them from TODO.md
  • Auto-starts on boot and self-restarts on crash via macOS launchd

Setup

1. Copy the server script

Copy scripts/server.js to your desired app directory (e.g. ~/.openclaw/workspace/todo-app/server.js).

The server expects:

  • TODO.md at ../TODO.md relative to the script (i.e. one directory up)
  • TODO-done.md at ../TODO-done.md (created automatically if missing)
  • bg.jpg in the same directory as the script (optional background image)

2. Add a background image (optional)

Drop any bg.jpg into the same folder as server.js. It will be rendered at ~22% opacity behind the UI. Works best with abstract or dark imagery.

3. Install the launchd agent

Copy assets/com.todo.plist.template to ~/Library/LaunchAgents/com.todo.plist.

Edit the plist and update these two values:

  • The path to node (run which node to find it)
  • The path to server.js

Then load it:

launchctl load ~/Library/LaunchAgents/com.todo.plist

4. Open in browser

Navigate to http://<your-mac-hostname>.local:3456 from any device on your LAN.

Restart command

If you update server.js, restart with:

kill $(lsof -ti :3456) && sleep 1 && launchctl kickstart -k gui/$(id -u)/com.todo

TODO.md format

The app parses standard OpenClaw-style markdown:

## Section Name

### Subheading

- [ ] Open task
- [x] Completed task
- **Bold text** is rendered in item labels

Any section added to TODO.md appears automatically. No app restart needed.

Port

Default port is 3456. To change it, edit the PORT constant at the top of server.js.