Comment Thread Component

Problem/Feature Description

A community news platform is adding an inline comment thread feature to their Vue 3 app. When a user clicks "Reply" on an article, a text area should appear and immediately be focused so they can start typing right away without clicking again — a small but important UX detail that the product manager flagged after user testing showed a high abandonment rate on the reply flow.

The component also fetches existing comments from /api/comments?articleId={id} (returning { data: Comment[] } where each Comment has id, author, body, and createdAt). The fetch can be slow on mobile networks, so the team wants to make sure the loading state is properly communicated to both sighted users and screen reader users. If fetching fails, users should be able to retry without refreshing the page.

Output Specification

Produce the following Vue 3 component files:

• src/components/CommentThread.vue — receives an articleId: number prop, fetches and displays comments from the API, shows loading and error states, and renders a reply text area when the user clicks a "Reply" button. The text area should receive focus automatically when it appears.
• src/components/CommentItem.vue — a child component that renders a single comment (author, body, createdAt) and has an "Add reply" trigger button.

Use TypeScript throughout.