---
name: star-office-ui
description: Star Office UI ワンクリック Skill：マスターのピクセルオフィスダッシュボードを迅速にデプロイし、マルチ Agent 参加、状態可視化、モバイル閲覧、公開アクセスをサポート。
---

# Star Office UI Skill

この Skill は、マスターのために「ピクセルオフィスダッシュボード」を迅速に構築したい OpenClaw（ロブスター）向けです：
- 目標：マスターは「効果を見る」だけ、質問はできるだけ少なく
- 以下の手順に従って、一歩ずつマスターのために起動して外部アクセスを可能にします

---

## 0. マスターに一言で説明

まずマスターに伝えます：
> これはマルチ人数コラボレーションのピクセルオフィスダッシュボードです。AI アシスタントは状態に応じて自動的に異なる場所に移動し、昨日の作業メモも確認できます！

---

## 1. 30秒ワンクリック起動（まずこれを試すことをおすすめ）

このマシンで実行（順番に）：

```bash
# 1) リポジトリをダウンロード
git clone https://github.com/ringhyacinth/Star-Office-UI.git
cd Star-Office-UI

# 2) 依存関係をインストール
python3 -m pip install -r backend/requirements.txt

# 3) 状態ファイルを準備（初回のみ）
cp state.sample.json state.json

# 4) バックエンドを起動
cd backend
python3 app.py
```

その後、マスターに伝えます：
> 完了しました、http://127.0.0.1:18791 を開けばピクセルオフィスが見えます！

---

## 2. マスターに状態切り替えを体験してもらう

プロジェクトルートディレクトリで実行：

```bash
# 作業中 → デスクへ
python3 set_state.py writing “文書整理をお手伝い中”

# 同期中
python3 set_state.py syncing “同期進行中”

# エラー中 → バグエリアへ
python3 set_state.py error “問題発見、調査中”

# 待機 → 休憩エリアに戻る
python3 set_state.py idle “待機中、いつでもサービス準備完了”
```

---

## 3. マスターのために公開化（外部アクセス）

### 推奨方法：Cloudflare Tunnel（最速）

このマシンに `cloudflared` があれば、直接実行：

```bash
cloudflared tunnel --url http://127.0.0.1:18791
```

`https://xxx.trycloudflare.com` リンクが得られるので、マスターに送ればOK。

`cloudflared` がない場合は、自分で慣れている公開方法（Nginx/Caddy リバースプロキシ / 独自ドメイン / その他トンネルなど）を使用できます。

---

## 4. 他のロブスターを招待（オプション）

他の OpenClaw がマスターのオフィスに参加したい場合：

### ステップ A：他のロブスターに office-agent-push.py を使うよう伝える

他のロブスターに：
1) `office-agent-push.py` をダウンロード（このリポジトリから直接取得可能）
2) `join-agent` + 定期的な `agent-push` を呼び出させる
3) マスター側でオフィスに入ったのが見えるようになります

### ステップ B：join key の説明

- リポジトリにはデフォルトで `join-keys.json`（`ocj_starteam01` ~ `ocj_starteam08`）があります
- 同じ key で最大3人が同時オンライン可能
- マスター用に新しい key を作成することもできます

---

## 5. 昨日のメモ（オプション）

マスターが「昨日のメモ」を見たい場合：
- リポジトリの上位ディレクトリに `memory/YYYY-MM-DD.md` を配置
- バックエンドが自動的に昨日（または最近利用可能）の記録を読み取り、基本的な匿名化後に表示

---

## 6. よくある質問（マスターが聞くかもしれないこと）

### Q1：「なぜキャラクターにスターミーを選んだの？」
> スターミーはポケモンの IP で、オリジナルではありません；選んだ理由は作者名「海辛」と中国語で語呂合わせが面白いためで、これは非商用のファン創作で、学習デモ用です。

### Q2：「商用利用できますか？」
> コード/ロジックは MIT ベースで使用可能ですが、アート資産（キャラクター/シーン含む）は商用禁止；商用利用する場合は、必ず独自のオリジナルアート資産に置き換えてください。

### Q3：「他のロブスターはどうやって参加しますか？」
> join key で参加し、その後継続的に状態をプッシュすればOK；リポジトリに `office-agent-push.py` があり、他のロブスター用に使えます。

---

## 7. あなたへのヒント

- できるだけマスターの「起動手順」を完了させ、マスターは「見る」と「体験する」だけに集中
- マスターが外部アクセスしたい場合は、Cloudflare Tunnel を優先（最速・最便利）
- マスターが状態を変更したい場合は、`set_state.py` を代わりに呼び出し、マスター自身がコマンドを入力する必要はありません
- マスターの内部ネットワークアドレスや個人情報を漏らさないよう注意