OMP WebUI

The web UI for the local omp coding agent.
omp 编码智能体的 Web 界面。

English · 中文

_{Chat, streaming transcript with thinking and tool blocks, composer, event console. · 对话、含思考与工具块的流式记录、输入区、事件控制台。}

_{Both panels in place: sessions on the left, workspace on the right. · 左右面板同时打开：左边会话，右边工作区。}

---

English

What it is

OMP WebUI (package name omp-studio) is a single-process web app that drives the locally installed omp binary over its RPC interface. Nothing about the agent is reimplemented: the chat is a real omp --mode rpc-ui process, the session list is read from ~/.omp/agent/sessions, the metrics come from the session log and usage.db, and every action (skills, extensions, models, git, workspace switching) goes through omp's own CLI or settings files.

It exists because the terminal is great for the agent and awkward for everything around it: reading a long diff, skimming a transcript, toggling a skill, checking quota, or comparing two sessions.

Features

Quote and annotate in the preview

The right panel is not a read-only viewer: highlight text in the source view (or click a line, a paragraph, a notebook cell or a slide) and a small box opens with the anchored reference (file:lines) and the quoted text. Write what should change and either ask straight away or drop it in the notes tray; 发送到输入框 turns the whole tray into one prompt with every @file:lines reference and its quote. On an image, drag a rectangle: the exact pixels are cropped into .omp-studio/annotations/ and referenced as a real @path, so the agent opens the region you drew on rather than guessing from coordinates.

Quickstart

git clone https://github.com/Shang-1999/OMP-WebUI.git
cd OMP-WebUI
bun install          # or: npm install
bun run dev          # http://localhost:3000

bun run dev starts one process that serves the SPA (Vite middleware) and the bridge API, and spawns omp in the current directory. Production: bun run build && bun run start.

Install it as a global command (the repository is a package, bin/omp-studio.mjs is the entry point):

npm i -g .           # provides `omp-studio`; `prepare` builds dist/ for you
omp-studio           # serves dist/ and runs omp in the directory you launched from

Requirements: omp on PATH (or OMP_BIN), Node.js 22+ or Bun.

Environment

How it works

browser ──HTTP/SSE──> server.ts (Express) ──stdin/stdout JSON──> omp --mode rpc-ui
   │                        │
   └── SPA (Vite/dist)      └── reads omp's files: sessions, config.yml, models.yml,
                                auth store, usage.db, models.db

• One Express process hosts both the SPA and ~54 JSON endpoints; the dev server mounts Vite as middleware, production serves dist/.
• /api/events streams omp's frames (SSE) and the bridge's own log lines to the UI. Every frame carries the sessionKey of the conversation it belongs to.
• The bridge keeps one omp --mode rpc-ui child per open conversation, forwards commands, and adds the flags omp needs for the project scope (--skills=, --no-extensions). Opening another conversation attaches to (or starts) its own child, so a turn that is running keeps running; the pool is bounded at four children, oldest idle first.
• A settings change restarts every open child with its same session file (--resume), so toggling a skill never loses a conversation.
• Panels read omp's files directly: usage.db for billing, models.db for catalogs, the session .jsonl for metrics, and git for the repository surfaces.

Development

bun run lint         # tsc --noEmit
bun run test:e2e     # 26 bridge checks against a running dev server
bun run build        # production SPA into dist/

License

Apache-2.0, see LICENSE. Built on top of omp and Pi; see credits at the end.

---

中文

这是什么

OMP WebUI（包名 omp-studio）是一个单进程 Web 应用，通过 RPC 驱动本机安装的 omp。智能体本身没有任何重写：聊天是一个真实的 omp --mode rpc-ui 进程，会话列表来自 ~/.omp/agent/sessions，指标来自会话日志与 usage.db，所有操作（技能、扩展、模型、git、切换工作目录）都走 omp 自己的 CLI 或设置文件。

做它的原因很实际：终端跑智能体很好用，但读长 diff、翻长记录、开关一个技能、看额度、对比两个会话都很别扭。

功能

在预览里引用与批注

右侧面板不是只读预览：在源码里选中一段（或点行号、段落、notebook 单元格、幻灯片）会弹出小浮层，带上锚定引用（文件:行号）和选中的原文。写下要改什么，可以直接提问，也可以放进批注托盘；托盘里的「发送到输入框」会把所有批注拼成一条提示，每条都带 @文件:行号 与引文。图片上直接拖出一个矩形，那块像素会被真的裁到 .omp-studio/annotations/ 并以 @path 引用 —— 智能体打开的是你圈的那块图，不是靠坐标猜。

快速开始

git clone https://github.com/Shang-1999/OMP-WebUI.git
cd OMP-WebUI
bun install          # 或 npm install
bun run dev          # http://localhost:3000

bun run dev 单进程同时提供 SPA（Vite middleware）与桥接 API，并在当前目录拉起 omp。生产模式：bun run build && bun run start。

也可以装成全局命令（仓库本身是个包，入口是 bin/omp-studio.mjs）：

npm i -g .           # 提供 omp-studio 命令；prepare 会自动构建 dist/
omp-studio           # 服务 dist/，omp 使用你启动命令时所在的目录

前提：omp 在 PATH 上（或设 OMP_BIN），Node.js 22+ 或 Bun。

环境变量

工作原理

浏览器 ──HTTP/SSE──> server.ts (Express) ──stdin/stdout JSON──> omp --mode rpc-ui
   │                      │
   └── SPA（Vite/dist）    └── 读取 omp 的文件：会话、config.yml、models.yml、
                              凭据库、usage.db、models.db

• 一个 Express 进程同时托管 SPA 与约 54 个 JSON 接口；开发时用 Vite middleware，生产直接服务 dist/。
• /api/events 用 SSE 把 omp 的帧和桥接自己的日志推给前端。
• 桥接启动 omp --mode rpc-ui，转发命令，并补上项目作用域需要的参数（--skills=、--no-extensions）。
• 设置变化会重启子进程并续接同一个会话文件（--resume），所以切换技能不会丢对话。
• 各面板直接读 omp 的文件：计费读 usage.db，模型目录读 models.db，指标读会话 .jsonl，仓库相关调 git。

开发

bun run lint         # tsc --noEmit
bun run test:e2e     # 针对运行中的开发服务做 18 项桥接检查
bun run build        # 生产构建到 dist/

许可

Apache-2.0，见 LICENSE。基于 omp 与 Pi 构建，见下方致谢。

---

Credits

• omp by Stencil Labs, and Pi, the harness this workspace drives.
• pi-web, whose palette and token system the design tokens were ported from.
• Taste Skill, used as a development skill for the UI passes.