refactor: decompose AutomationChatView into focused components (FE-18)

[Chris0Jeky]

Summary

• Decomposes the 1,523-line AutomationChatView.vue monolith into 7 focused components and 1 composable, all under 400 lines each
• Extracts orchestration logic into useAutomationChat composable for clean separation of state management from template rendering
• No behavioral changes -- all existing tests (2,552 tests, 210 files) pass without modification

Extracted components

Component	Lines	Responsibility
ChatHeroHeader	119	Page title, subtitle, action buttons
LlmHealthStatusBar	188	Provider health status banner with state-based styling
ChatSessionSidebar	254	Session list, create-session form, board context selector
ChatMessageList	361	Message rendering with markdown, degraded/clarification states
ChatParseHintCard	169	Parse-hint instruction format cards
ChatToolCallDetails	135	Tool call metadata expander
ChatComposeBar	128	Message textarea, proposal checkbox, send button, clarification skip
useAutomationChat (composable)	394	All orchestration state, API calls, board resolution, routing
AutomationChatView (parent)	235	Template shell wiring components together

Closes #859

Test plan

• All 2,552 frontend unit tests pass (210 files)
• TypeScript typecheck passes (npm run typecheck)
• Production build succeeds (npm run build)
• ESLint passes with 0 errors (npm run lint)
• No component exceeds 400 lines
• Visual regression check in browser (chat workflow renders identically)

[Chris0Jeky]

Adversarial self-review

Checked areas

Props/events wiring: Verified all parent-to-child prop bindings and child-to-parent event emissions match. Vue's automatic camelCase-to-kebab-case normalization handles the update:newSessionTitle -> @update:new-session-title mapping correctly. The InputAssistField in ChatSessionSidebar correctly chains its update:model-value through to the parent's updateNewSessionBoardValue.

Lost functionality check: All template sections from the original 1,523-line file are accounted for in the extracted components:

• Hero header with all 4 action buttons
• LLM health status bar with all 7 health states
• Session sidebar with create form, board context, session list, empty state
• Message list with all 6 message type renderings (text, degraded, clarification, parse-hint, proposal-reference, tool-status)
• Parse hint card with toggle patterns and apply suggestion
• Tool call metadata expander with round/tool/badge rendering
• Compose bar with clarification skip, textarea (ctrl+enter), proposal checkbox, send button
• Empty states ("no session selected", "no messages yet", "no sessions yet")

Component boundary issues: None found. The composable useAutomationChat cleanly owns all mutable state and exposes it as refs/computed. Child components receive read-only props and emit events upward. No prop drilling beyond 1 level.

Test coverage: All 2,552 tests pass without modification. The tests mount AutomationChatView which internally renders all child components, so the integration is fully validated. Both the main spec and coverage spec files exercise the full workflow.

Accessibility: All aria-label, aria-expanded, role, and data-* attributes are preserved in their respective extracted components.

CSS scoping: Each component has its own <style scoped> block. There is some CSS duplication (.td-btn base styles appear in multiple components) which is a trade-off of scoped styles. This is acceptable since the duplication is minimal and the styles are lightweight utility classes. A future improvement could extract shared button styles into a global stylesheet.

No issues found

The decomposition is functionally equivalent to the original. No fixes needed.

[gemini-code-assist]

Code Review

This pull request refactors the AutomationChatView by extracting its business logic into a dedicated useAutomationChat composable and decomposing the UI into several modular components, such as ChatMessageList, ChatComposeBar, and ChatSessionSidebar. The review feedback focuses on performance optimizations, specifically identifying inefficient object instantiation and redundant JSON parsing within v-for loops and sort comparators. Additionally, there is a recommendation to refactor duplicated message-sending logic within the new composable to improve maintainability.

[gemini-code-assist]

Creating and parsing Date objects inside a sort comparator is a performance anti-pattern. The sort method calls the comparator $O(N \log N)$ times, leading to excessive object allocation and CPU overhead. It is more efficient to map the messages to timestamps once before sorting, or ensure the backend provides them in the correct order.

Suggested change

	return [...current.recentMessages].sort((a, b) => (
	new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
	))
	return [...current.recentMessages].sort((a, b) => (
	Date.parse(a.createdAt) - Date.parse(b.createdAt)
	))

[gemini-code-assist]

The logic for sending a message in handleSendMessage and handleSkipClarification is almost identical. This duplication makes the code harder to maintain and increases the risk of bugs if the message-sending flow changes in the future. Consider refactoring the core sending logic into a private helper function.

[gemini-code-assist]

The isTruncatedJson function is called within the template loop for every assistant or system message. Performing JSON.parse inside a render cycle is expensive and can lead to UI jank as the message list grows. Consider pre-calculating this state when messages are loaded or using a more efficient heuristic.

[gemini-code-assist]

Instantiating a new Date object inside a v-for loop for every message on every render cycle is inefficient. This can be optimized by formatting the timestamp once when the message is received or by using a computed property that maps messages to formatted strings.

[gemini-code-assist]

The parseToolCallMetadata function is called twice for every message that contains tool call metadata (once for v-if and once for the :metadata prop). Since this function performs JSON.parse, it should be optimized to avoid redundant parsing. Consider using a computed property to pre-parse metadata for all messages.

[gemini-code-assist]

Creating a new Date object and calling toLocaleString() inside a v-for loop can impact performance as the number of sessions increases. It is better to format these dates once when the sessions are fetched.

[Chris0Jeky]

Adversarial Review of PR #920

Summary

The decomposition is structurally sound. Props/events wiring is correct across all parent-child boundaries, no functionality was lost during extraction, and all frontend checks pass (typecheck, build, lint, 2552 tests). I pushed a follow-up commit addressing the legitimate Gemini findings plus one additional concern.

Gemini Bot Comments Assessment

All 6 Gemini comments were reviewed. Findings grouped by merit:

Legitimate and fixed (3):

1. parseToolCallMetadata called twice per message (ChatMessageList.vue lines 162-164) -- v-if="parseToolCallMetadata(message)" + :metadata="parseToolCallMetadata(message)!" caused redundant JSON.parse each render cycle. Fixed: replaced with a computed map (toolMetaByMessageId) that parses once per messages change, and a getToolMeta() lookup.

2. handleSendMessage / handleSkipClarification duplication (useAutomationChat.ts) -- near-identical try/catch/finally blocks. Fixed: extracted sendMessageToSession(content) private helper; both handlers now delegate to it.

3. new Date() in sort comparator (useAutomationChat.ts line 63-64) -- Date.parse() avoids allocating Date objects O(N log N) times. Fixed: switched to Date.parse(a.createdAt) - Date.parse(b.createdAt).

Valid but low-impact (3, noted but partly addressed):

4. isTruncatedJson with JSON.parse in render loop -- same concern as Claude/create feature f 01 qr r as j4 s14advm nn qhp2 la #1. Fixed: pre-computed into a truncatedJsonIds Set via computed().

5. new Date() in v-for for message timestamps (ChatMessageList.vue line 118) -- creating Date objects per message per render. This is idiomatic Vue and the message count is typically small (< 50 in a session). Not fixed -- optimizing this would add complexity disproportionate to the benefit.

6. new Date() in v-for for session timestamps (ChatSessionSidebar.vue line 91) -- same as above, even lower impact since session counts are small. Not fixed.

My Own Findings

Issue: Massive CSS duplication across child components

The .td-btn, .td-btn--primary, .td-btn--secondary, .td-btn--sm, .td-btn:disabled styles are duplicated across 6 files: ChatComposeBar, ChatHeroHeader, ChatSessionSidebar, ChatParseHintCard, ChatMessageList, and the parent AutomationChatView. This is a significant maintainability regression -- if button styles change, all 6 copies must be updated. Consider:

• Extracting shared button styles into a global stylesheet or a shared CSS module
• Or using a shared TdButton component

This is not a blocker for this PR since the original file also had all these styles (just in one place), but the decomposition turned a single-location issue into a multi-file one. Recommend tracking as a follow-up.

No functional regressions found:

• All props/events wiring is correct
• v-model to :value+@input conversion is behaviorally equivalent
• Computed property reactivity chains are preserved
• onMounted and watch lifecycle hooks are correctly placed in the composable
• Component boundary violations: none found -- children communicate exclusively via props/events
• Accessibility: aria labels and ARIA expanded states are preserved in the extracted components

No new tests for new component boundaries:
The Definition of Done states "Behavior changes ship with tests." While this is a pure refactor, the new component boundaries (ChatMessageList, ChatComposeBar, ChatSessionSidebar, etc.) create testable surfaces that don't have coverage. This is acceptable for a refactor PR but worth noting for future work.

Verification

All checks pass after the fix commit:

• npm run typecheck -- clean
• npm run build -- clean
• npm run lint -- 0 errors, 6 pre-existing warnings (unrelated)
• npx vitest --run -- 210 test files, 2552 tests passed