modularize tool-call rendering and styles

packages/ui/src/styles/messaging/tool-call.css

@@ -1,4 +1,7 @@
 /* Tool call rendering */
+@import "./tool-call/todo.css";
+@import "./tool-call/task.css";
+
 .tool-call-message {
   @apply flex flex-col gap-2 p-3 w-full;
   background-color: var(--message-tool-bg);
@@ -671,164 +674,6 @@
   font-size: inherit;
 }
 
-.tool-call-todo-region {
-  @apply flex flex-col;
-}
-
-.tool-call-todo-empty {
-  @apply text-sm text-muted;
-  padding: 0.75rem 0;
-}
-
-.tool-call-todos {
-  @apply flex flex-col gap-0;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.tool-call-todo-item {
-  @apply flex items-start gap-3;
-  border: 1px solid var(--border-base);
-  border-radius: 0;
-  padding: 10px 12px;
-  background-color: var(--surface-secondary);
-}
-
-.tool-call-todo-item-completed {
-  background-color: var(--surface-code);
-}
-
-.tool-call-todo-item-active {
-  border-color: var(--accent-primary);
-  background-color: var(--surface-hover);
-}
-
-.tool-call-todo-item-cancelled {
-  opacity: 0.75;
-}
-
-.tool-call-todo-checkbox {
-  width: 1.1rem;
-  height: 1.1rem;
-  border-radius: 9999px;
-  border: 2px solid var(--border-base);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-muted);
-  background-color: transparent;
-}
-
-.tool-call-todo-checkbox::after {
-  content: "";
-  line-height: 1;
-}
-
-.tool-call-todo-checkbox[data-status="completed"] {
-  background-color: var(--accent-primary);
-  border-color: var(--accent-primary);
-  color: var(--text-inverted);
-}
-
-.tool-call-todo-checkbox[data-status="completed"]::after {
-  content: "✓";
-}
-
-.tool-call-todo-checkbox[data-status="in_progress"]::after {
-  content: "…";
-  color: var(--accent-primary);
-}
-
-.tool-call-todo-checkbox[data-status="cancelled"]::after {
-  content: "×";
-  color: var(--status-error);
-}
-
-.tool-call-todo-body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.tool-call-todo-heading {
-  @apply flex items-start justify-between gap-3;
-}
-
-.tool-call-todo-status {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  border-radius: 9999px;
-  padding: 2px 8px;
-  background-color: var(--surface-hover);
-  color: var(--text-muted);
-  white-space: nowrap;
-}
-
-.tool-call-todo-status-completed {
-  background-color: var(--badge-success-bg);
-  color: var(--status-success);
-}
-
-.tool-call-todo-status-in_progress {
-  background-color: var(--badge-neutral-bg);
-  color: var(--text-primary);
-}
-
-.tool-call-todo-status-cancelled {
-  background-color: var(--status-error-bg);
-  color: var(--status-error);
-}
-
-.tool-call-todo-text {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-tight);
-  color: var(--text-primary);
-}
-
-.tool-call-todo-item-cancelled .tool-call-todo-text {
-  text-decoration: line-through;
-  color: var(--text-muted);
-}
-
-.tool-call-todo-tag {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  border-radius: 9999px;
-  padding: 2px 8px;
-  background-color: var(--surface-hover);
-  color: var(--text-muted);
-}
-
-.tool-call-todo-item-active .tool-call-todo-tag {
-  background-color: var(--accent-primary);
-  color: var(--text-inverted);
-}
-
-.tool-call-task-container {
-  padding: 12px;
-}
-
-.tool-call-task-summary {
-  @apply my-2 flex flex-col gap-1.5;
-}
-
-.tool-call-task-item {
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-normal);
-  padding-left: 8px;
-  border-left: 2px solid var(--border-base);
-}
-
-.tool-call-task-item::before {
-  content: "∟ ";
-  color: var(--text-muted);
-}
 
 .tool-call-error-content {
   background-color: var(--message-error-bg);