integrate-todo-list

Todo リストの統合

TodoWrite ツールとパネルを追加し、アプリ内の Atlas エージェントにタスクの進行状況を表示できるようにします。

アプリで Atlas / EOS サイドバー（integrate-fusion-agent）を使用している場合はスキップしてください。前提条件：integrate-atlas-chat による useAtlasChat + src/atlas-agent/ + @sinclair/typebox。

---

ステップ 1 — アプリを確認する

作業を始める前に、以下を確認してください。

• package.json — @tabler/icons-react がインストールされていることを確認します。インストールされていない場合は、アプリのパッケージマネージャーでインストールします
• src/App.tsx — TodoProvider を追加する場所を確認します
• useAtlasChat を呼び出すファイル（おそらく src/chat/useChatViewModel.ts または src/App.tsx）— ここでツールを接続します
• メッセージを表示するチャットビューコンポーネント — ここに TodoPanel と TodoToolResultCard を追加します

---

ステップ 2 — src/todo/ モジュールを作成する

プロジェクトのルートから find . -path "*/.agents/skills/integrate-todo-list/code" -type d を実行し、スキルディレクトリを探します。

<skill-dir>/code/ 内の各ファイルを読み込み、同じファイル名で src/todo/ に書き込みます。

ファイル	用途
types.ts	TodoItem と TodoList の型
TodoContext.tsx	React コンテキスト + TodoProvider
useTodoList.ts	Todo リストを読み書きするフック
todoWriteTool.ts	createTodoWriteTool ファクトリー — CDF タスク分解ガイダンスをすべて含む AtlasTool
useTodoWriteTool.ts	現在の状態にアクセスできるツールをメモ化するフック
TodoPanel.tsx	カード UI：進捗バー + タスク行
TodoItemRow.tsx	アニメーション付きステータスアイコンを備えた単一の行
TodoToolResultCard.tsx	ツール呼び出し表示用のコンパクトな概要カード

すべてのファイルで相対インポート（./types、./TodoContext など）を使用するため、変更は不要です。

---

ステップ 3 — アプリを TodoProvider でラップする

src/App.tsx（またはルートコンポーネント）で、既存のツリーを <TodoProvider> でラップします。

import { TodoProvider } from './todo/TodoContext'; // adjust path to match app conventions

function App() {
  return (
    <TodoProvider>
      {/* existing children */}
    </TodoProvider>
  );
}

---

ステップ 4 — ツールを useAtlasChat に接続する

useAtlasChat を呼び出すファイルに、以下を追加します。アプリの規約に合わせてインポートパスを調整してください。

import { useRef, useCallback } from 'react';
import { useTodoList } from './todo/useTodoList';
import { useTodoWriteTool } from './todo/useTodoWriteTool';

// Inside the hook/component:
const { todos, setTodos } = useTodoList();
const todoWriteTool = useTodoWriteTool();

// Keep a ref so getAppContext always reads fresh state without re-creating the callback.
const todosRef = useRef(todos);
todosRef.current = todos;

const getAppContext = useCallback(() => {
  const t = todosRef.current;
  if (t.length === 0) return undefined;
  const lines = t.map((item, i) => `${i + 1}. [${item.status}] ${item.content}`);
  return `Current todo list:\n${lines.join('\n')}`;
}, []);

// Add to useAtlasChat options:
const { messages, send, isStreaming, progress, error, reset, abort } = useAtlasChat({
  client: isLoading ? null : sdk,
  agentExternalId: AGENT_EXTERNAL_ID,
  tools: [todoWriteTool],   // add alongside any existing tools
  getAppContext,
});

// In the reset handler, clear the todo list:
const handleReset = useCallback(() => {
  reset();
  setTodos([]);
}, [reset, setTodos]);

// Expose todos in the return value so the view can render TodoPanel:
return { ..., todos };

---

ステップ 5 — チャットビューに TodoPanel を表示する

チャット入力エリアを表示するコンポーネントで、入力フィールドの上に <TodoPanel> を追加します。

import { TodoPanel } from './todo/TodoPanel'; // adjust path

// In the render:
<TodoPanel todos={todos} />
<YourChatInput ... />

リストが空の場合、TodoPanel は null を返すため、常に表示しても問題ありません。

---

ステップ 6 — ツール呼び出しのステップに TodoToolResultCard を表示する

メッセージごとのツール呼び出しを表示するコンポーネント（通常はステップのアコーディオンなど）で、ツール名に応じて分岐します。

import { TodoToolResultCard } from './todo/TodoToolResultCard'; // adjust path

{toolCalls.map((tc, i) =>
  tc.name === 'TodoWrite' ? (
    <TodoToolResultCard key={i} toolCall={tc} />
  ) : (
    <YourDefaultToolCallCard key={i} toolCall={tc} />
  )
)}

---

ステップ 7 — 検証する

アプリの型チェックコマンド（通常は pnpm tsc --noEmit）を実行し、エラーがないことを確認します。 プロジェクトにテストがある場合は、回帰がないことを確認するために実行してください。

---

完了

エージェントが TodoWrite を使ってタスクを作成し、進捗を追跡できるようになりました。次のことができます。

• 複数ステップの作業を開始するとすぐにタスクパネルを表示する
• タスクのステータスをリアルタイムで更新する（pending → in_progress → completed）
• すべてのタスクが完了するとリストを自動的に消去する
• getAppContext を通じて現在のタスクリストを各プロンプトに挿入し、作業の続きがわかるようにする