「AIオフィス」を自分で作る
コピペ・プロンプト集

これから「今このMacで動いている複数のAI（Claude Codeのセッション）を、
1枚のドット絵オフィスに“社員”として表示するローカルツール」のプロトタイプを
一緒に作りたい。いきなり作り込まず、まず設計だけ相談させて。
次の3点を、私の環境を踏まえて整理して提案して：

1. 何を画面に出すか（例：セッションごとに1人の社員・名前・今の作業状態）
2. どこからデータを取るか
   （Claude Codeの会話ログ = ~/.claude/projects/<プロジェクト>/<セッションID>.jsonl。
    末尾だけ読めば十分）
3. どう表示するか（1枚のHTML画面・ローカルサーバーで開く・数秒ごとに自動更新）

まずは一番小さく動く構成（MVP）を、使う技術（なるべく標準ライブラリ中心）と
ファイル構成込みで提案して。私がOKを出すまでコードは書かないで。

さっきの設計でOK。まずはダミーデータで「1人だけ」社員が画面に立つ最小版を作って。

- Pythonの標準ライブラリだけでローカルサーバーを立て、ブラウザで開くと
  1枚のHTML画面が出る
- 画面には机と、その前にいる簡単な人（ドット絵、なければ丸＋名前でよい）を1人ぶん表示
- データはまだ固定のダミーでいい（名前＝"テスト社員"、状態＝"作業中"）

起動コマンドと、開くURLも教えて。まず“動くところ”まで。動いたら私が確認する。

動いた。次は本物のデータにつなぐ。
~/.claude/projects/ の中の各プロジェクトフォルダにある
一番新しい <セッションID>.jsonl を探して、それぞれの「末尾だけ」
（例：最後の80KBぶん）を読み取り、1セッション＝1社員として画面に出して。

- ファイルは読み取り専用。書き換え・外部送信は絶対にしない
- 直近数時間以内に動いたセッションだけ表示する
- 各社員の名前はプロジェクト名（または、セッションIDから毎回同じになる名前）にする

まだ状態は「いる」だけでいい。1機能ずつ足したいので、これができたら見せて。

次は状態を分かりやすくして。各セッションのログの「最後のイベント」を見て、
ざっくり次の3つに分類して表示して：

- 🟢作業中：最近ツールを実行している
- 🟡指示待ち：最後がこちらへの返答・質問で止まっている
- 💤休憩中：しばらく動いていない

色（緑／黄／グレー）と、頭上の小さな吹き出し（「実行中」「指示待ち」など）で表現して。
判定条件は後で調整したいので、どういう基準で分けたかをコメントで残して。動いたら見せて。

社員をクリックしたら、その社員（セッション）の詳細が出るようにして。

- 今どのプロジェクトか／直近の動き数件／最後の状態や発言
- 閉じるボタン、または枠の外をクリックで閉じる
- 他の社員は見えたままにする

まず「出す→閉じる」が気持ちよく動くところまで。動いたら見せて。

最後に見た目を“オフィスらしく”整えて。

- 同じプロジェクトのセッションは近くにまとめる（＝部署の島）
- 背景を簡単なオフィス風にする（床・壁・観葉植物などの雰囲気）
- 人数が増えてもレイアウトが崩れないようにする

凝りすぎず、一目で「誰が働いていて・誰が待っていて・誰が休んでいるか」が
分かることを最優先で。動いたら見せて。

（発展）画面の下に入力欄を付けて、選んだ社員（セッション）に
一言メッセージを送れるようにしたい。
まずは仕組みの案（どうやってそのセッションに届けるか）を、
安全面（ローカルだけで完結・外部に開かない）込みで提案して。
実装はそのあと一緒に決めよう。

エラーが出た。全文を貼るので、原因と直し方を1つずつ教えて。
直したら、動作確認の手順も教えて。
（↓ここにエラー全文を貼る）

動いたけど ◯◯ がイマイチ。△△ な感じに調整して。他の部分は変えないで。

ここまでを一度整理して。ファイル構成と、各ファイルが何をしているかを
短くまとめて。次に足すとよさそうな改善も3つ挙げて。