Skip to content

feat: replace ref-based messages with component-based message bubbles#553

Closed
avoidwork wants to merge 1 commit into
mainfrom
feat/replace-ref-based-messages-with-component-message-bubbles
Closed

feat: replace ref-based messages with component-based message bubbles#553
avoidwork wants to merge 1 commit into
mainfrom
feat/replace-ref-based-messages-with-component-message-bubbles

Conversation

@avoidwork

Copy link
Copy Markdown
Owner

Summary

Replace the ref-based message array architecture in the TUI with a component-based system where each message is a standalone MessageBubble component managing its own state.

Motivation

The current architecture uses messages state array + array spreading ([...prev]) + element mutation on every render. This fights React's model and causes:

  • Memory leaks from constant array allocation during streaming
  • Unnecessary re-renders of unchanged messages
  • Complex scroll management that doesn't work reliably
  • ~12 scattered setMessages(prev => { clone + mutate }) call sites across app.js

Changes

  • New: src/tui/messageBubble.js — Standalone MessageBubble component with internal state and imperative update() method via React.forwardRef
  • New: src/tui/messageList.js — Manages array of MessageBubble instances with imperative addMessage()/updateMessage()/clear() API and scroll management
  • Modified: src/tui/conversationPanel.js — Simplified to a thin wrapper (delegates to MessageList)
  • Modified: src/tui/app.js — Replaces array-mutation state updates with imperative ref calls
  • New: openspec/changes/... — Full OpenSpec proposal, design, specs, and tasks

Spec Coverage

  • component-message-bubbles (new spec): 15 requirement scenarios covering MessageBubble state, MessageList imperative API, scroll management, and rendering window
  • tui-scroll-view (modified spec): Delta updating scroll responsibility from ConversationPanel to MessageList

Implementation Plan

See openspec/changes/replace-ref-based-messages-with-component-message-bubbles/tasks.md for 47 implementation tasks across 8 groups.

Testing

  • Unit tests for MessageBubble (rendering, update behavior)
  • Unit tests for MessageList (addMessage, updateMessage, clear, setMessages)
  • Update ConversationPanel tests
  • Visual verification: user messages appear on send, assistant streams, interrupt clears

Security

No new dependencies, no network changes. All changes are internal TUI component architecture.

@avoidwork avoidwork closed this Jul 18, 2026
@avoidwork
avoidwork deleted the feat/replace-ref-based-messages-with-component-message-bubbles branch July 18, 2026 03:03
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.

1 participant