Claude Todo List

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4/**
5 * ClaudeTodoList — Claude Code's task list (TaskCreate / TaskUpdate).
6 *
7 * Capture grammar (v2.1.207), with one intentional deviation: icons stay in a
8 * single column. Real Claude puts `  ⎿\u00a0` before the first ✔ (space + nbsp),
9 * which shoves that check a cell right of a natural `⎿ ` pairing — we use a
10 * single space after ⎿ so ✔ / ◼ / ◻ line up.
11 *
12 *   ⎿ ✔ done     (green + strikethrough)
13 *     ◼ active   (terracotta + bold)
14 *     ◻ pending  (default foreground)
15 */
16export type Todo = {
17  label: string;
18  status: "done" | "active" | "todo";
19};
20 
21const DONE = "#87d787"; // 38;5;114
22const ACTIVE = "#d78787"; // 38;5;174 — Claude terracotta
23const DIM = "#949494"; // 38;5;246
24 
25const ICON: Record<Todo["status"], string> = {
26  done: "✔",
27  active: "◼",
28  todo: "◻",
29};
30 
31export function ClaudeTodoList({
32  todos,
33  className,
34}: {
35  todos: Todo[];
36  className?: string;
37}) {
38  return (
39    <ol className={cn("font-mono text-[13px] leading-[1.6]", className)}>
40      {todos.map((t, i) => {
41        const iconColor =
42          t.status === "done"
43            ? DONE
44            : t.status === "active"
45              ? ACTIVE
46              : undefined;
47 
48        return (
49          <li key={i} className="whitespace-pre">
50            {/*
51              First row: "  ⎿ " then icon. Later rows: four spaces so the
52              icon column lines up under ✔ (no capture-style nbsp jump).
53            */}
54            <span aria-hidden style={{ color: DIM }}>
55              {i === 0 ? "  ⎿ " : "    "}
56            </span>
57            <span aria-hidden style={{ color: iconColor }}>
58              {ICON[t.status]}{" "}
59            </span>
60            <span
61              className={cn(
62                t.status === "done" && "line-through",
63                t.status === "active" && "font-semibold",
64              )}
65              style={{
66                color: t.status === "done" ? DIM : undefined,
67              }}
68            >
69              {t.label}
70              <span className="sr-only">
71                {" "}
72                ({t.status === "done"
73                  ? "completed"
74                  : t.status === "active"
75                    ? "in progress"
76                    : "pending"})
77              </span>
78            </span>
79          </li>
80        );
81      })}
82    </ol>
83  );
84}