🎨 Palette: Character counter and button tooltip UX improvement

[CassieMarie0728]

🎨 Palette UX Improvement: Fork Setup Feedback Loop

💡 What:

I implemented a character limit and counter for the fork statement input, and added a descriptive tooltip to the main "Open the Other Door" button when it is disabled.

🎯 Why:

• Prevent Data Loss: The backend silently truncates the fork statement to 180 characters. Enforcing this in the UI prevents users from writing long statements only for the AI to ignore most of them.
• Immediate Feedback: A real-time character counter shows users exactly how much space they have left, changing to a red color when they are within 10 characters of the limit.
• Actionability: Icon-only or disabled buttons can be frustrating. Adding a title explaining why the button is disabled ("Tell me the decision first") makes the next step clear to the user.

📸 Visuals:

• Counter: A discrete 179 / 180 indicator appears below the textarea. It turns text-crimson when nearing the limit.
• Button: Hovering over the disabled "Open the Other Door" button now reveals the instruction to provide a decision first.

♿ Accessibility:

• Added aria-live="polite" to the character counter to inform screen reader users of their current input length.
• Associated the counter and textarea visually and semantically with proper spacing and color contrast.

🛠️ Verification:

• Ran full E2E test suite in frontend/e2e/fork.spec.js.
• Created and ran a targeted verification script for the counter and tooltip.
• Visually confirmed changes via screenshots.
• Verified that all changes are under the 50-line micro-UX limit.

---

PR created automatically by Jules for task 3661168831634817018 started by @CassieMarie0728

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[gitnotebooks]

Review these changes at https://app.gitnotebooks.com/CassieMarie0728/the-fork/pull/16

[kilo-code-bot]

Kilo Code Review could not run — your account is out of credits.

Add credits at app.kilo.ai to enable reviews on this change.

[gemini-code-assist]

Code Review

This pull request introduces a 180-character limit for the fork statement input, accompanied by a visual counter that changes color as the limit is approached. It also adds a tooltip to the start button to explain why it is disabled. A review comment suggests replacing the hardcoded character limits with constants to enhance maintainability and readability.

[gemini-code-assist]

To improve maintainability and avoid magic numbers, it's a good practice to define 180 and 170 as constants. This makes the code easier to read and update if the character limit changes. You could define them at the top of the component or in a shared constants file. Don't forget to update maxLength={180} on line 75 as well.

For example:

const FORK_STATEMENT_MAX_LENGTH = 180;
const WARNING_THRESHOLD = FORK_STATEMENT_MAX_LENGTH - 10;

// ... then in your component
// ...
maxLength={FORK_STATEMENT_MAX_LENGTH}
// ...
className={`... ${
  forkStatement.length >= WARNING_THRESHOLD
    ? "text-crimson"
    : "text-zinc-500"
}`}
>
  {forkStatement.length} / {FORK_STATEMENT_MAX_LENGTH}
// ...