Integrate Todo List

import { createContext, useState, useMemo } from 'react';
import type { ReactNode } from 'react';
import type { TodoList } from './types';

export interface TodoStoreValue {
  todos: TodoList;
  setTodos: (todos: TodoList) => void;
}

export const TodoContext = createContext<TodoStoreValue>({
  todos: [],
  setTodos: () => undefined,
});

export function TodoProvider({ children }: { children: ReactNode }) {
  const [todos, setTodos] = useState<TodoList>([]);
  const value = useMemo(() => ({ todos, setTodos }), [todos]);
  return <TodoContext.Provider value={value}>{children}</TodoContext.Provider>;
}


import { IconCircle, IconCircleFilled, IconCircleCheckFilled } from '@tabler/icons-react';
import type { TodoItem } from './types';

interface TodoItemRowProps {
  item: TodoItem;
}

const STATUS_ICONS = {
  pending: <IconCircle size={13} className="shrink-0 text-muted-foreground/50" />,
  in_progress: <IconCircleFilled size={13} className="shrink-0 text-primary animate-pulse" />,
  completed: <IconCircleCheckFilled size={13} className="shrink-0 text-success" />,
};

export function TodoItemRow({ item }: TodoItemRowProps) {
  const label = item.status === 'in_progress' ? item.activeForm : item.content;
  const isInProgress = item.status === 'in_progress';
  const isCompleted = item.status === 'completed';

  return (
    <div
      className={[
        'flex items-start gap-2.5 rounded-sm px-2 py-1 -mx-2',
        isInProgress ? 'bg-primary/5' : '',
      ].join(' ')}
    >
      <span className="mt-0.5">{STATUS_ICONS[item.status]}</span>
      <span
        className={[
          'text-sm leading-snug',
          isCompleted ? 'text-muted-foreground/60 line-through' : '',
          isInProgress ? 'text-foreground font-medium' : 'text-muted-foreground',
        ].join(' ')}
      >
        {label}
      </span>
    </div>
  );
}


import { Badge, Card, CardContent, CardHeader, CardHeaderRight, CardTitle } from '@cognite/aura/components';
import { TodoItemRow } from './TodoItemRow';
import type { TodoList } from './types';

interface TodoPanelProps {
  todos: TodoList;
}

export function TodoPanel({ todos }: TodoPanelProps) {
  if (todos.length === 0) return null;

  const completedCount = todos.filter((t) => t.status === 'completed').length;
  const progressPct = Math.round((completedCount / todos.length) * 100);

  return (
    <div className="mb-3">
      <Card>
        <CardHeader className="pb-2">
          <CardTitle as="h3" className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
            Tasks
          </CardTitle>
          <CardHeaderRight>
            <Badge variant="secondary" size="default">
              {completedCount}/{todos.length}
            </Badge>
          </CardHeaderRight>
        </CardHeader>
        <div className="mx-4 h-px bg-border">
          <div
            className="h-full bg-success transition-all duration-500 ease-out"
            style={{ width: `${progressPct}%` }}
          />
        </div>
        <CardContent className="max-h-40 overflow-y-auto pt-3">
          {todos.map((item, i) => (
            // Index is safe here: the agent only appends to the end and updates in place — it never reorders or inserts in the middle.
            // Using content as a key would cause remounts (and animation resets) whenever the agent updates a task title with discovered node names.
            <TodoItemRow key={i} item={item} />
          ))}
        </CardContent>
      </Card>
    </div>
  );
}


import { Tool, ToolContent, ToolHeader } from '@cognite/aura/components';

interface ToolCall {
  name: string;
  input?: unknown;
  output?: string;
  details?: unknown;
}

interface TodoToolResultCardProps {
  toolCall: ToolCall;
}

interface TodoDetails {
  completed: number;
  inProgress: number;
  pending: number;
  newTodos: { content: string; status: string }[];
}

function isTodoDetails(value: unknown): value is TodoDetails {
  return (
    typeof value === 'object' &&