Skip to content

perf(ui): render read-only todo checkbox without Kobalte - #14005

Merged
marius-kilocode merged 1 commit into
mainfrom
perf/todowrite-render
Sep 10, 2026
Merged

perf(ui): render read-only todo checkbox without Kobalte#14005
marius-kilocode merged 1 commit into
mainfrom
perf/todowrite-render

Conversation

@marius-kilocode

Copy link
Copy Markdown
Collaborator

What Problem This Solves

The todowrite tool card rendered every to-do item with a full Kobalte Checkbox tree (Root + Input + Control + Indicator + Label + ErrorMessage, plus reactive state per item). The card is read-only, so that work buys no interactivity. A 6-item list cost about 8.9 ms of synchronous render in the isolated harness and 4.8 ms in the real webview, making it an outlier versus other non-diff tool cards.

Why This Change Was Made

Replace the read-only Kobalte checkbox with lightweight markup that emits the same DOM slots and accessibility semantics: data-component="checkbox", checkbox-checkbox-input/control/indicator/label, data-readonly, data-checked, a native checkbox with aria-readonly="true" and role="group", and a label tied by for/id. The indicator mounts only when checked. No CSS changes.

User Impact

No visual change. To-do cards render faster. The check icon for completed items, the unchecked box for pending items, in-progress styling, data-completed/data-changed attributes, and compact hidden-count rows are all unchanged.

Evidence

Storybook harness (BENCH_MODE=append BENCH_TOOLS=todowrite BENCH_REPEATS=7, median of 3 runs):

Build syncMs
Before 8.9
After 3.6

In-app VS Code profiling (isolated Extension Development Host, seeded 6-item todowrite session, collapse and expand remount, 34 iterations):

Build Median p95 DOM nodes / inputs / slots
Before 4.8 ms 5.3 ms 42 / 6 / 32
After 3.9 ms 4.7 ms 42 / 6 / 32

bun run typecheck and bun run lint pass in packages/kilo-vscode. Added a Playwright test covering checked states, aria-readonly, label association, indicator count, and that Space does not toggle.

To-do card in the VS Code chat showing completed, in-progress, and pending items

@kilo-code-bot

kilo-code-bot Bot commented Sep 10, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (3 files)
  • .changeset/todo-card-render.md
  • packages/kilo-ui/src/components/message-part.tsx
  • packages/kilo-vscode/tests/accessibility.spec.ts

Reviewed by grok-4.6 · Input: 109.1K · Output: 12K · Cached: 442.2K

Review guidance: REVIEW.md from base branch main

Comment thread packages/kilo-ui/src/components/message-part.tsx
Comment thread packages/kilo-ui/src/components/message-part.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants