integrate-todo-list

Todo List の統合

この Dune アプリに、構造化されたタスク追跡機能を追加します。エージェントは、複数ステップのクエリに取り組みながら TodoWrite ツールを使ってタスクリストを作成・更新し、エージェントが何をしているのか、またその理由をユーザーがリアルタイムで確認できるようにします。

前提条件： integrate-atlas-chat がすでにセットアップされている必要があります。useAtlasChat が接続されており、@cognite/dune-industrial-components、@sinclair/typebox、ajv、ajv-formats がインストールされている必要があります。

---

ステップ 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 を介して現在のタスクリストを各プロンプトに挿入し、作業の続きから開始できるようにする