Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/tanitaka-tech/todome

A Trello-style Kanban app with a Claude Agent SDK assistant that knows your board, goals, and profile — task management that thinks with you.
https://github.com/tanitaka-tech/todome

claude-code dialy open-source react task-management todoapp typescript

Last synced: 10 days ago
JSON representation

A Trello-style Kanban app with a Claude Agent SDK assistant that knows your board, goals, and profile — task management that thinks with you.

Awesome Lists containing this project

README 

          
# todome



日本語 | [English](README_EN.md)



- **Kanbanボード** — TODO / 進行中 / 完了の3カラム、ドラッグ&ドロップ

- **AIアシスタント** — Claude がボードと目標を把握した上でアドバイス・タスク操作

- **目標管理** — 目標名・メモ・KPI(複数)・期日を設定し、タスクと紐付け

- **作業時間計測** — タスクごとに再生/一時停止、見積もり対比表示、完了時刻の記録

- **統計ダッシュボード** — 目標別作業時間の円グラフ、日/月/年の推移棒グラフ

- **プロフィール定義** — 現在の状態、バランスホイール、行動指針、やりたいことをAIコンテキストに反映

- **GitHub連携** — 端末間でのデータを共有 & 目標にリポジトリを紐付けてAIコンテキストに反映 ([利用規約との関係](docs/github-sync-compliance.md))

- **iCloudカレンダー連携 (CalDAV)** — Apple ID と App用パスワードで接続し、iCloud のカレンダーをスケジュールタブに読み込み（読み取り専用、RRULE 展開対応）



| Kanban形式でのタスク管理 | タスク管理をAIにお任せ | 目標もタスクもAIに相談 |

|:---:|:---:|:---:|

| ![Kanban形式でのタスク管理](docs/manual/assets/animations/celebration.webp) | ![タスク管理をAIにお任せ](docs/manual/assets/animations/chat-ai.webp) | ![目標もタスクもAIに相談](docs/manual/assets/animations/goal-ai.webp) |

| **AIと一緒に振り返り** | **テーマを切り替えて気分を変える** | **Gitによる履歴管理** |

| ![AIと一緒に振り返り](docs/manual/assets/animations/retro-ai.webp) | ![テーマを切り替えて気分を変える](docs/manual/assets/animations/theme-switch.webp) | ![Gitによる履歴管理](docs/manual/assets/animations/git-history.webp) |



## コンセプト



todome は完成したアプリでありながら、**ユーザーがForkして、自分専用のマネジメント環境として育てていくアプリ**としても設計されています。

ぜひお手元の環境で自分好みに調整してみてください。



- 自前のAIエージェントで独自機能を追加

- 自分の使い勝手に合わせて画面や挙動を自由に書き換え



### ストア配布しない理由



簡単なアプリならAIですぐに作れる時代では、「ストアでアプリを探す」よりも「自分で作ったほうが早い」という場面も珍しくありません。それほど、自分の要望に100%合致するアプリを見つけるのは難しくなっています。



今後AI製アプリがストアに溢れていくと、ユーザーは目的のアプリを探すこと自体に疲れてしまい、やがて個人開発アプリはユーザーから選ばれなくなっていくのではないか——私はそう考えています。



そこで行き着いたのは、「ユーザーはストアで欲しいアプリを探し続けるよりも、自分で欲しいアプリを作れたほうが幸せなのではないか」という発想です。それに自分だけがチート釣り竿を持った状態でユーザーに魚を売り捌くのは、どこかフェアではないと感じます。ユーザーにも同じ釣り竿を渡したうえで、「自分で作ったものより、このアプリのほうが質が良いから使いたい」と言ってもらえるのが理想です。



todome は、各ユーザーが自分のローカル環境で理想の形に育てていけるアプリとして設計しています。アプリを開発プラットフォームとして公開することで「自分のアプリを作る楽しさ」を体験していただく——それが todome のコンセプトです。



## 画面説明書



画面説明書を `docs/manual/` に配置しています。



- 公開 URL: https://tanitaka-tech.github.io/todome/manual/

- 更新手順: [docs/manual/README.md](docs/manual/README.md) を参照

- ローカル表示: `cd docs && python3 -m http.server 8765` → `http://127.0.0.1:8765/manual/`



## セットアップ



### 前提条件



- **Node.js** 18+

- **[Bun](https://bun.sh/)** 1.3+ (サーバーランタイム)

- 契約済みのClaudeCode と **Anthropic API Key** もしくは `claude login` でログイン済みの環境

- **[gh CLI](https://cli.github.com/)** (任意 — GitHub 同期機能を使う場合)



### 1. リポジトリをクローン



```bash

git clone https://github.com//todome.git

cd todome

```



### 2. 環境変数を設定（`claude login` 済みならスキップ可）



`claude login` でログイン済みの環境では Anthropic API Key の設定は不要です。このステップは飛ばして次へ進んでください。



API Key で利用する場合や、データ保存先・ポートを変更したい場合のみ、プロジェクトルートに `.env` を作成します。サンプルとして `.env.example` を同梱しているので、そこからコピーするのが手早いです。



```bash

cp .env.example .env

# 必要な行のコメントを外して値を編集

```



設定可能な環境変数:



| 変数 | デフォルト | 説明 |

|---|---|---|

| `ANTHROPIC_API_KEY` | (未設定) | Anthropic API Key。`claude login` 済みなら不要。 |

| `TODOME_DATA_DIR` | `./data` | SQLite DB・GitHub 同期状態・各種設定 JSON の保存先。 |

| `TODOME_BACKEND_PORT` | `3002` | Bun サーバーが listen するポート。 |



### データの保存場所と認証情報の取り扱い



`TODOME_DATA_DIR`（デフォルト `./data`）配下に以下が保存されます。**いずれも平文**です。`data/` は `.gitignore` 済みでローカル限定ですが、暗号化はしていないので取り扱いに注意してください。



| ファイル | 内容 |

|---|---|

| `todome.db` | Kanban / 目標 / プロフィール / 振り返り / スケジュール 等の SQLite DB |

| `github_config.json` | GitHub 同期先リポジトリの紐付け情報（OAuth トークンは `gh` CLI 側に保存） |

| `ai_config.json` | AI ツール許可リストとモデル設定 |

| `app_config.json` | 日の境界時刻などのアプリ設定 |

| `caldav_config.json` | **iCloud (CalDAV) の Apple ID と App用パスワード**。接続切断時に削除されます。 |

| `repo/` | GitHub 連携時に clone されるリポジトリ（DB はここに切り替わる） |



iCloud 連携を使う場合は [appleid.apple.com](https://appleid.apple.com) で **App用パスワード** を発行してください。Apple ID の本パスワードは絶対に入力しないでください。



### 3. 依存関係をインストール



```bash

# サーバー (Bun)

bun install



# フロントエンド

cd client

npm install

cd ..

```



## 起動方法



### ワンコマンド起動 (推奨)



```bash

./start.sh          # 開発モード (Vite + bun --watch を並列起動)

./start.sh prod     # 本番モード (client をビルドして Bun のみ起動)

```



- 開発モードはブラウザで **http://localhost:5173**、本番モードは **http://localhost:3002** でアクセスします。

- Ctrl+C で両方のプロセスが停止します。

- `client/node_modules` / `node_modules` が無ければ初回に `npm install` / `bun install` が自動実行されます。



### 手動で起動する場合



開発モード (ターミナル2つ)



```bash

# ターミナル 1: フロントエンド (HMR)

cd client && npm run dev

```



```bash

# ターミナル 2: バックエンド (Bun ホットリロード)

bun --watch server/index.ts

```



本番モード (サーバー1つ)



```bash

cd client && npm run build && cd ..

bun server/index.ts

```



## 使用例



- **スマホからアクセスする** — PC で起動した todome をスマホのブラウザから開く方法(同一LAN / Tailscale / cloudflared)。詳細は [docs/smartphone-access.md](docs/smartphone-access.md) を参照。



## 技術スタック



| レイヤー | 技術 |

|---|---|

| フロントエンド | React 19 + Vite + TypeScript |

| バックエンド | Bun + Hono + WebSocket (TypeScript) |

| AI | Claude Agent SDK (Sonnet) |

| 通信 | WebSocket リアルタイム双方向 |



## ファイル構成



```

todome/

├── server/                  # Bun + Hono + WebSocket バックエンド

│   ├── index.ts             # エントリポイント (Bun.serve)

│   ├── config.ts / db.ts / state.ts

│   ├── storage/             # SQLite I/O (kanban / goals / profile / retro / github)

│   ├── ai/                  # Claude Agent SDK ラッパー

│   ├── github/              # gh CLI / git 連携 (sync / diff / autosync)

│   └── ws/                  # WebSocket endpoint と handler dispatch

├── package.json             # サーバー依存関係 (Bun)

├── .gitignore

├── README.md

├── data/                    # SQLite DB・GitHub 同期状態 (gitignore)

└── client/

    ├── package.json         # フロントエンド依存関係

    ├── index.html           # HTML エントリポイント

    ├── vite.config.ts       # Vite 設定

    ├── tsconfig*.json       # TypeScript 設定

    ├── public/

    │   └── favicon.svg

    └── src/

        ├── main.tsx         # React マウントポイント

        ├── types.ts         # 型定義

        ├── style.css        # スタイリング

        ├── hooks/

        │   └── useWebSocket.ts

        └── components/

            ├── App.tsx             # ルートコンポーネント (状態管理・タイマー)

            ├── KanbanBoard.tsx     # Kanban ボード (D&D・タイマー)

            ├── ChatPanel.tsx       # AI チャットパネル

            ├── AskUserCard.tsx     # AI 質問カード

            ├── TaskDetailModal.tsx  # タスク詳細モーダル

            ├── GoalPanel.tsx       # 目標管理パネル

            ├── StatsPanel.tsx      # 統計ダッシュボード

            └── ProfilePanel.tsx    # プロフィール編集

```



## アーキテクチャ



```

ブラウザ (React)                        サーバー (Bun + Hono)

┌──────────────────┐                   ┌──────────────────┐

│  KanbanBoard     │──kanban_*────→    │                  │

│  GoalPanel       │──goal_*──────→    │  状態管理         │

│  ProfilePanel    │──profile_*───→    │  (タスク/目標/    │

│                  │←─*_sync──────     │   プロフィール)   │

├──────────────────┤                   │                  │

│  ChatPanel       │──message─────→    │  Claude Agent SDK │

│                  │──ask_response─→   │  - TodoWrite     │

│                  │←─stream_delta─    │  - AskUser       │

│                  │←─assistant────    │  - GOAL_ADD/UPDATE│

│                  │←─kanban_sync──    │                  │

│                  │←─goal_sync────    │                  │

└──────────────────┘                   └──────────────────┘

```



## Special Thanks



開発にあたって参考にさせていただいた資料は [docs/special-thanks.md](docs/special-thanks.md) に記載しています。



## ライセンス



MIT