Fix QuickType validation error messages, duplicate toasts, and panel overflow

[Copilot]

Three QuickType interaction issues identified during manual testing: misleading validation errors for malformed HTML tags, duplicate success toasts on save, and hidden shortcuts when panel content exceeds max height.

Changes

• Validation error clarity: Changed error message from "HTML must include a full opening and closing tag or be self-closing" to "Invalid HTML tag. Tag names must start with a letter and contain only letters, numbers, underscores, or hyphens." Prevents confusion when entering tags like <bry@n></bry@n> where the tag name itself is invalid.

• Invalid entry handling: Reordered validation logic to check duplicates before validation, then reject invalid entries with error status instead of adding them with warning status. Previously <bry@n></bry@n> would be added to the list despite being invalid.

• Duplicate toast elimination: Removed redundant saveShortcuts() call in manager's event handler. Dialog already saves and shows success toast; manager now only updates local state on quicktype-editor-saved event.

• Panel scrolling: Added overflow-y: auto to .char-panel.show CSS. With hundreds of shortcuts wrapping beyond 500px max-height, content is now scrollable rather than clipped.

Files Modified

• components/quicktype/validation.js - error message
• components/quicktype-tool/quicktype-editor-dialog.js - validation flow
• components/quicktype-manager/index.js - event handler
• components/quicktype-tool/index.js - panel CSS

Original prompt

---

This section details on the original issue you should resolve

<issue_title>QuickType interaction quirks</issue_title>
<issue_description>Manually tested locally and using properly I encountered no errors.

It was pretty tough to break using improperly. I noticed the following, which we can make issues for instead of fixing them here.

1. When I try to add <bry@n></bry@n> it tells me that html must include a full opening and closing tag or be self closing. It is not a proper tag, but the message is wrong.
- In interfaces/quicktype when I follow that up with <bryan></bryan> it goes in, and will save.
- In the modal when I follow that up with <bryan></bryan> it does not go in.
- If I am persistent and try <bryan></bryan> again, it tells me the tag is already there

Note this issues only occurs when starting with an improper tag. When I did this same thing, but starting with <bryan></bryan> I did not encounter this issue.

2. I get a double toast on the interface when I reorder tags and save

3. If I add hundreds of tags I have no way to see them in the workspace in the transcription interface, they are cut off. This could be a problem if I only had 10-15 tags that were "Some Phrase".

Originally posted by @thehabes in #318 (review)
</issue_description>

<agent_instructions>confirm that these vulnerabilites or inconsistencies have already been fixed. You should not need new code, but feel free to commit something if there is a change required.</agent_instructions>

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

• Fixes QuickType interaction quirks #322

---

💡 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.

[github-actions]

🚀 Deployed on https://69447ae27c6c5b008e2ca3e0--tpen-interfaces-preview.netlify.app