---

name: workspace-web-editor description: ブラウザからローカルのワークスペース（Markdown / コード / フロントマター）を閲覧・編集する軽量 Web アプリ。Wiki-link / Backlinks / Quick Switcher / Mermaid / ライト・ダークテーマ対応。「workspace-web-editor 起動して」「web editor で開いて」で使用。

workspace-web-editor

ローカルのワークスペースをブラウザから閲覧・編集する Node.js 製の軽量 Web アプリ。 任意で Tailscale や VPN 越しにスマホから使うこともできる。

機能

• 📁 ディレクトリツリー + パンくず + タグフィルター
• 📝 Markdown プレビュー（Mermaid 図 + シンタックスハイライト）
• 🔗 Wiki-link [[name]] クリック遷移（broken は点線）
• 📎 Backlinks — どこから参照されているかを一覧表示
• 🔍 Quick Switcher（Cmd/Ctrl+P）でファジー検索
• 🌙 ライト / ダークテーマ切替（永続化）
• ✏️ 編集 + Ctrl+S 保存
• 🏷️ フロントマター解析
• 🔄 任意の Git sync（pull → add → commit → push）

起動方法

以下、<repo> は workspace-web-editor のチェックアウトディレクトリ、<workspace> は閲覧したいワークスペースの絶対パスとする。

初回セットアップ

cd <repo>
npm install

手動起動

cd <repo>
WORKSPACE_DIR=<workspace> PORT=9080 node src/server.js

バックグラウンド起動（xangi / Codex 配下では setsid でプロセスグループを分離する）：

cd <repo>
setsid env WORKSPACE_DIR=<workspace> PORT=9080 node src/server.js > /tmp/workspace-web-editor.log 2>&1 < /dev/null &
echo $!

停止：

ss -ltnp | grep ':9080'
kill <PID>

起動後の確認・報告（必須）

1. プロセス確認: ps -o pid,ppid,sid,pgid,stat,etime,cmd -p <PID> で PPID 1 / SID=PID になっていることを確認
2. ヘルスチェック: curl -s -o /dev/null -w "%{http_code}" http://localhost:9080/ で 200 を確認
3. ログ確認: tail -n 30 /tmp/workspace-web-editor.log で Workspace : <workspace> を確認
4. アクセス URL を報告:
   • ローカルのみ: http://localhost:9080/
   • Tailscale 経由（スマホ等から）: echo "http://$(tailscale ip -4):9080" を実行し、その URL を伝える

Tailscale が利用可能な環境なら Tailscale IP の URL を優先して返す。

環境変数

変数	デフォルト	説明
PORT	9080	リッスンするポート
WORKSPACE_DIR	process.cwd()	閲覧・編集するワークスペースのルート
EXCLUDE_EXTRA	（なし）	デフォルト除外に追加するディレクトリ名（カンマ区切り）
VIEWABLE_EXT	.md,.txt,.json,.yaml,.yml,.toml,.py,.js,.ts,.sh	表示対象の拡張子をカンマ区切りで上書き

詳しい使い方とトラブルシューティングは USAGE.md を参照。