一个将 Claude Code 的会话和项目以虚拟办公室形式可视化的网页应用,可通过浏览器内终端直接与任意会话交互。

Stars

9

7 天增长

暂无数据

Fork 数

1

开放 Issue

0

开源协议

MIT

最近更新

2026-07-13

AI 仓库情报摘要
FR-AI / ANALYSIS

为什么值得关注

它用独特的视觉方式展示原本分散在不同终端窗口中的 Claude Code 会话,点击即可恢复会话,且完全在本地运行,保护隐私。

适合谁使用

  • 管理多个会话或项目的 Claude Code 用户
  • 希望以仪表盘方式概览 Claude Code 工作的开发者
  • 使用 Claude Code 进行项目协作的个人或团队
  • 追求高效会话管理工具的生产力爱好者

典型使用场景

  • 一目了然地查看所有活跃 Claude Code 会话,并按项目分组
  • 从上次中断的地方继续某个 Claude Code 会话
  • 不离开浏览器即可为任意项目启动新的 Claude Code 会话
  • 在应用内直接创建新项目(自动生成文件夹和 CLAUDE.md)

项目优势

  • 完全运行在本地,数据不会外传,保障隐私安全
  • 自动读取文件系统中已有的 Claude Code 项目和会话数据
  • 交互式界面支持缩放、拖拽,点击会话即可打开终端继续工作
  • 更新时配置持久化(存储在 config/settings.json 中),不会丢失设置

使用前须知

  • 需要 Node.js 20+ 及已安装并登录的 Claude Code
  • 仅适用于 Claude Code 会话,并非通用终端管理器
  • 首次使用需手动指定项目保存文件夹路径(Claude Code 本身没有默认路径)

README 快速开始

Claude Office 🏢

Claude Codeのプロジェクトとセッションを「仮想オフィス」として眺められるアプリです。 従業員=Claude Codeのセッション。従業員をクリックすると、その場でターミナルが開いて続きから指示できます。

このアプリはあなた自身のパソコンの中だけで動きます。 あなたの ~/.claude/projects(Claude Codeのセッション履歴が置かれる場所。Claude Code自体が決めている固定の場所です)をそのまま読み取るので、起動するとあなた自身のオフィス(あなたのプロジェクト・あなたのセッション)が表示されます。外部にデータが送られることはありません。

必要なもの(前提条件)

  • Node.js 20以上
  • Claude Code がインストール済みで、claude コマンドがそのまま使える状態(ログイン済み)であること

セットアップ(初めて動かす人向け)

git clone https://github.com/sho-ai-magic/claude-open-office.git
cd claude-open-office
npm install
npm run build
npm start

その後、ブラウザで http://localhost:3777 を開いてください。

普段使いには上記(本番ビルド)がおすすめですが、コードを変更しながら試したい場合は代わりに次を使うと自動リロードが効きます:

npm run dev

この場合はブラウザで http://localhost:5173 を開いてください。

初回起動時に起きること

  • ~/.claude/projects を読み取り、既存のClaude Codeプロジェクトを自動でオフィスの部屋として表示します
  • 「新規プロジェクト立案」機能を使うときは、初回だけプロジェクトの保存先フォルダ(絶対パスで指定するあなた自身のフォルダ、例: /home/you/projects)を入力する画面が出ます。Claude Code自体には「プロジェクトフォルダの既定値」という概念が無いため、このアプリでも決め打ちの場所は用意していません。一度入力すれば次回以降は自動で入力された状態になります

アップデート方法

すでにクローン済みの人は、以下で最新版に更新できます。

cd claude-open-office
git pull
npm install
npm run build
npm start

npm run dev で使っている場合は、最後の2行の代わりに npm run dev をやり直すだけで構いません。サーバーを起動しっぱなしにしている場合は、一度プロセスを終了してから起動し直してください。)

あなたの設定(表示中のプロジェクト、プロジェクトの保存先フォルダなど)は config/settings.json に保存されており、git pull をしても上書き・削除されません。アップデートで新しい設定項目が増えた場合は、初期値(未設定)から始まります。

画面の見方

見た目意味
部屋プロジェクト(部署)
従業員セッション。直近の活動順に最大8人まで表示
島(机4席のかたまり)従業員1〜4人で1島、5人目の入社で増築工事が始まり2島に
🟢 緑バッジ作業中(Claudeが動いている)
🟡 黄バッジ返事待ち(指示を待っている)
⚪ 灰バッジ(Zzz)休憩中(ターミナル未接続)
掲示板その部署の直近の作業内容

操作方法

  • ホイール:ズーム / ドラッグ:マップ移動
  • 従業員をクリック:ターミナルが開き、そのセッションの続きから指示できる
  • 空席をクリック:新しい従業員を雇う(=新しいセッションを開始)。最初の指示を送ると、新入社員が入り口から歩いてきて着席します
  • 新規プロジェクト立案(ヘッダー):プロジェクトフォルダとCLAUDE.mdを自動作成
  • 表示プロジェクト選択(ヘッダー):オフィスに表示する部署を選ぶ
  • OB名簿(ヘッダー):表示枠から外れた古いセッションを呼び戻す

注意

  • このアプリはパソコンの中だけで動きます(外部公開されません)
  • ターミナルパネルを閉じても従業員は裏で働き続けます。完全に終了させたいときはターミナル上で通常どおりClaude Codeを終了してください

ライセンス

MIT License

项目描述

Claude Codeのプロジェクト・セッションを仮想オフィスとして可視化するアプリ

相关仓库与替代方案

根据分类、Topic 和编程语言匹配的相似项目。

TanStack
精选
TanStack GitHub avatar

router

TanStack Router is a type-safe, data-driven React router with built-in caching, prefetching, and nested layouts, while TanStack Start extends it into a full-stack SSR framework.

Web 开发前端框架
14,861
vercel-labs
精选
vercel-labs GitHub avatar

scriptc

scriptc compiles ordinary TypeScript into small, fast native executables without needing Node.js, V8, or any JavaScript runtime in the binary.

开发者工具代码质量与构建
1,985
Jakubantalik
精选
Jakubantalik GitHub avatar

thinking-orbs

A React component library that renders six hand-tuned animated thought orb loading indicators on a plain 2D canvas, with two purpose-tuned sizes and automatic theme detection for AI and agent UIs.

AI 与机器学习AI 智能体
1,191