ui: Refactor data-attrs constants, enum for bool strings (#27002)

* refactor: Data-attribute constants + boolean string enum

* refactor: Use CSS class string constants

* refactor: Address review comments

tools/ui/src/lib/constants/chat-form.constants.ts

@@ -1,3 +1,6 @@
+/** Data attribute that tags ChatFormInputRich code spans and blocks. */
+export const CODE_TOKEN_ATTR = 'data-code-token';
+
 export const INITIAL_FILE_SIZE = 0;
 export const PROMPT_CONTENT_SEPARATOR = '\n\n';
 export const CLIPBOARD_CONTENT_QUOTE_PREFIX = '"';

tools/ui/src/lib/constants/headers.constants.ts

@@ -1,3 +1,6 @@
+/** Number of trailing characters to keep visible when partially redacting mcp-session-id */
+const MCP_SESSION_ID_VISIBLE_CHARS = 5;
+
 /** HTTP header handling for API and MCP requests. */
 export const HEADERS = {
 	/** Canonical casing for the Authorization header (RFC 7235) */
@@ -7,7 +10,7 @@ export const HEADERS = {
 	/** Content-Type HTTP header name */
 	CONTENT_TYPE: 'Content-Type',
 	/** Partial-redaction rules for MCP headers: header name -> visible trailing chars */
-	PARTIAL_REDACT: new Map<string, number>([['mcp-session-id', 5]]),
+	PARTIAL_REDACT: new Map<string, number>([['mcp-session-id', MCP_SESSION_ID_VISIBLE_CHARS]]),
 
 	/** Header names whose values should be redacted in diagnostic logs */
 	REDACTED: new Set([

tools/ui/src/lib/constants/markdown.constants.ts

@@ -1,8 +1,14 @@
 export const IMAGE_NOT_ERROR_BOUND_SELECTOR = 'img:not([data-error-bound])';
-export const DATA_ERROR_BOUND_ATTR = 'errorBound';
-export const DATA_ERROR_HANDLED_ATTR = 'errorHandled';
-export const BOOL_TRUE_STRING = 'true';
-export const BOOL_FALSE_STRING = 'false';
+
+/** Data attributes for the markdown renderer DOM contract. */
+export const MARKDOWN_DATA_ATTRS = {
+	BLOCK_ID: 'data-block-id',
+	CODE_ID: 'data-code-id',
+	ERROR_BOUND: 'data-error-bound',
+	ERROR_HANDLED: 'data-error-handled',
+	LISTENER_BOUND: 'data-listener-bound',
+	ORIGINAL_SRC: 'data-original-src'
+} as const;
 
 /** Markdown structural markers used by `looksLikeMarkdown`. Inline / line-level. */
 export const MARKDOWN = {

tools/ui/src/lib/constants/mention-badge.constants.ts

@@ -1,6 +1,6 @@
 /**
  * Shared visual contract between the two DOM-only badge paths (the
- * contenteditable tokenizer + the rehype plugin). Svelte cannot be
+ * ChatFormInputRich tokenizer + the rehype plugin). Svelte cannot be
  * mounted at the per-keystroke tokenizer hot path nor from a hast tree,
  * so both emit the badge with the same class string literal; Tailwind's
  * scanner picks it up in both sources.
@@ -10,6 +10,13 @@ export const MENTION_BADGE_CLASSNAME =
 
 export const MENTION_BADGE_ICON_CLASSNAME = 'h-3 w-3 shrink-0';
 
+/** Full `data-*` attribute names that tag ChatFormInputRich mention badges. */
+export const MENTION_BADGE_DATA_ATTRS = {
+	BADGE: 'data-mention-badge',
+	NAME: 'data-mention-name',
+	PATH: 'data-mention-path'
+} as const;
+
 /** Regex flag that makes the mention scanner walk every link in a message instead of the first. */
 export const MENTION_LINK_SCAN_FLAGS = 'g';
 

tools/ui/src/lib/constants/ui.constants.ts

@@ -7,6 +7,16 @@ import type { DesktopIconStripItem } from '$lib/types';
 export const FORK_TREE_DEPTH_PADDING = 8;
 export const SYSTEM_MESSAGE_PLACEHOLDER = 'System message';
 
+/** Data attributes for app-level DOM contracts. */
+export const UI_DATA_ATTRS = {
+	ACTIVE: 'data-active',
+	CONVERSATION_ROW: 'data-conversation-row',
+	HIGHLIGHT_THEME_PREVIEW: 'data-highlight-theme-preview',
+	PICKER_INDEX: 'data-picker-index',
+	RESULT_INDEX: 'data-result-index',
+	THUMBNAIL_INDEX: 'data-thumbnail-index'
+} as const;
+
 export const TOOL_GROUP_LABELS = {
 	[ToolSource.BUILTIN]: 'Built-in',
 	[ToolSource.CUSTOM]: 'JSON Schema',