Port wrapText from LLMAnimationPanel to RRTPromptPanel for responsive text rendering

[Copilot]

RRTPromptPanel had hardcoded line breaks requiring manual adjustment for different screen sizes. This ports the canvas-based text wrapping from LLMAnimationPanel.

Changes

• Added dynamic text wrapping: Measures text width via canvas context and wraps at word boundaries when exceeding available width
• Refactored text storage: Converted hardcoded promptLines array to RAW_PROMPT_TEXT source + dynamic promptLines state
• Added resize handling: Debounced (150ms) re-wrap on window resize
• Extracted constants: Moved RAW_PROMPT_TEXT and HIGHLIGHT_LINES outside component to avoid recreation and satisfy exhaustive-deps

Implementation

// Before: Manual line breaks, duplicate text
const promptLines = [
  "The bidirectional RRT-connect",
  "algorithm is my personal favorite.",
  "my personal favorite.",  // duplicate
  // ...
];

// After: Source text + dynamic wrapping
const RAW_PROMPT_TEXT = [
  "The bidirectional RRT-connect algorithm is my personal favorite.",
  // ...
];

useEffect(() => {
  // Wrap text based on canvas width
  function wrapText() {
    const maxWidth = width - padding * 2;
    RAW_PROMPT_TEXT.forEach((para) => {
      const words = para.split(" ");
      // Measure and wrap logic...
    });
  }
  // ...
}, [height]);

Special lines (prompts, decorative borders) are preserved without wrapping.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add wrap text functionality to RRTPromptPanel.jsx</issue_title>
<issue_description>There is a wrapText function used in LLMAnimationPanel.jsx to automatically wrap terminal text to new lines during display. Port a variant of this function to RRTPromptPanel.jsx so that the developer need not have to manually tweak text manually in the file and test on various screen sizes.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Add wrap text functionality to RRTPromptPanel.jsx #2

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.