diff --git a/.opencode/skill/browser-automation/SKILL.md b/.opencode/skill/browser-automation/SKILL.md
new file mode 100644
index 0000000..5a1aa8d
--- /dev/null
+++ b/.opencode/skill/browser-automation/SKILL.md
@@ -0,0 +1,50 @@
+---
+name: browser-automation
+description: Reliable, composable browser automation using minimal OpenCode Browser primitives.
+license: MIT
+compatibility: opencode
+metadata:
+  audience: agents
+  domain: browser
+---
+
+## What I do
+
+- Provide a safe, composable workflow for browsing tasks
+- Use `browser_query` list and index selection to click reliably
+- Confirm state changes after each action
+
+## Best-practice workflow
+
+1. Inspect tabs with `browser_get_tabs`
+2. Open new tabs with `browser_open_tab` when needed
+3. Navigate with `browser_navigate` if needed
+4. Wait for UI using `browser_query` with `timeoutMs`
+5. Discover candidates using `browser_query` with `mode=list`
+6. Click, type, or select using `index`
+7. Confirm using `browser_query` or `browser_snapshot`
+
+## Selecting options
+
+- Use `browser_select` for native `<select>` elements
+- Prefer `value` or `label`; use `optionIndex` when needed
+- Example: `browser_select({ selector: "select", value: "plugin" })`
+
+## Query modes
+
+- `text`: read visible text from a matched element
+- `value`: read input values
+- `list`: list many matches with text/metadata
+- `exists`: check presence and count
+- `page_text`: extract visible page text
+
+## Opening tabs
+
+- Use `browser_open_tab` to create a new tab, optionally with `url` and `active`
+- Example: `browser_open_tab({ url: "https://example.com", active: false })`
+
+## Troubleshooting
+
+- If a selector fails, run `browser_query` with `mode=page_text` to confirm the content exists
+- Use `mode=list` on broad selectors (`button`, `a`, `*[role="button"]`) and choose by index
+- Confirm results after each action
diff --git a/TOOL_STATUS.md b/TOOL_STATUS.md
index b53e049..5d664a4 100644
--- a/TOOL_STATUS.md
+++ b/TOOL_STATUS.md
@@ -23,7 +23,7 @@ This document tracks the refactoring and development status of each tool compone
 | **CodeFormatter** | 🟢 Done | Unified code formatting tool supporting JSON (with jq filters), XML (with XPath), HTML (with CSS selectors), SQL, CSS, and JavaScript. Features: format/minify modes, filter/query support for structured data, auto-format on input change, persistent state. Backend: Go with gojq library for jq support. Replaces: JsonFormatter, SqlFormatter | Completed 2026-01-31 |
 | **ColorConverter** | 🟢 Done | Comprehensive color conversion tool with visual picker and eyedropper support. Features: 11 programming languages (CSS, Swift, .NET, Java, Android, Obj-C, Flutter, Unity, React Native, OpenGL, SVG), 5 color formats (HEX, RGB, HSL, HSV, CMYK), color history with 10 recent colors, random color generator, copy-to-clipboard for all code snippets. Uses Carbon Tabs for language selection. | Completed 2026-02-01 |
 | **CronJobParser** | 🟢 Done | Refactored to follow Carbon Design System. Features: Split-pane layout, 8 common examples in clickable tiles, real-time parsing, large centered output display, layout toggle. | Completed 2026-01-31 |
-| **RegExpTester** | 🟡 In Progress | Refactored with improved UI. Features: Flag toggle tags (g, i, m, s, u, y), split-pane layout, match count in output label, error display with styling, layout toggle. | Updated 2026-01-31 |
+| **RegExpTester** | 🟢 Done | Enhanced with live highlighting. Features: Unified regex input group with visual connection, expandable auto-resizing textarea (1-10 lines), theme-aware scrollbar, flags popover accessible via flags input, live match highlighting with group colors in test string and match details, hover tooltips, split-pane layout, copy full regex button, layout toggle. | Completed 2026-02-11 |
 | **TextDiffChecker** | 🟡 In Progress | Refactored with enhanced features. Features: Diff mode switcher (Lines/Words/Chars), auto-compare on input change, Clear button, improved diff view with color coding, layout toggle. | Updated 2026-01-31 |
 | **DateTimeConverter** | 🟢 Done | Complete redesign as unified DateTime Converter. All features on single screen - no tabs. Client-side only (no backend dependency). Features: Auto-detect input format (Unix timestamps: s/ms/μs/ns, ISO dates, SQL dates, US/EU formats), Quick presets (Now, Start/End of Day, Tomorrow, Yesterday, Next Week, Unix Epoch), Output format selector (ISO, RFC, SQL, US, EU, Compact), Timezone support, Main result display with relative time, All formats grid with copy buttons, Toggle-able sections: Visual Widgets (Calendar + Analog Clock), Time Calculator (Date A vs B with delta), Batch Converter (multi-line input with table results), Timezone Comparison (6 major cities), History persistence (localStorage, last 20), URL share support (?ts=). Unified, user-friendly interface designed for real-world datetime conversion needs. | Completed 2026-02-01 |
 
diff --git a/frontend/src/pages/RegExpTester.jsx b/frontend/src/pages/RegExpTester.jsx
index 6bcda49..039ea9b 100644
--- a/frontend/src/pages/RegExpTester.jsx
+++ b/frontend/src/pages/RegExpTester.jsx
@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from 'react';
-import { TextInput, Tag } from '@carbon/react';
-import { ToolHeader, ToolControls, ToolPane, ToolSplitPane } from '../components/ToolUI';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { TextInput, CopyButton } from '@carbon/react';
+import { ChevronDown } from '@carbon/icons-react';
+import { ToolHeader, ToolSplitPane } from '../components/ToolUI';
 import useLayoutToggle from '../hooks/useLayoutToggle';
 
 const FLAG_OPTIONS = [
@@ -12,41 +13,162 @@ const FLAG_OPTIONS = [
     { flag: 'y', label: 'Sticky', desc: 'Match from lastIndex' },
 ];
 
-const HighlightedText = ({ text, regex, flags }) => {
-    if (!regex || !text) return <span>{text}</span>;
+// Escape HTML special characters to prevent XSS and rendering issues
+const escapeHtml = (text) => {
+    if (!text) return '';
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+};
+
+const GROUP_COLORS = [
+    { bg: 'rgba(66, 190, 101, 0.15)', border: 'rgba(66, 190, 101, 0.3)', text: 'var(--cds-text-primary)' },      // Green (full match)
+    { bg: 'rgba(69, 137, 245, 0.15)', border: 'rgba(69, 137, 245, 0.3)', text: 'var(--cds-text-primary)' },      // Blue
+    { bg: 'rgba(241, 194, 27, 0.15)', border: 'rgba(241, 194, 27, 0.3)', text: 'var(--cds-text-primary)' },      // Yellow
+    { bg: 'rgba(218, 30, 40, 0.15)', border: 'rgba(218, 30, 40, 0.3)', text: 'var(--cds-text-primary)' },      // Red
+    { bg: 'rgba(165, 110, 255, 0.15)', border: 'rgba(165, 110, 255, 0.3)', text: 'var(--cds-text-primary)' },      // Purple
+    { bg: 'rgba(0, 189, 186, 0.15)', border: 'rgba(0, 189, 186, 0.3)', text: 'var(--cds-text-primary)' },      // Teal
+    { bg: 'rgba(255, 118, 178, 0.15)', border: 'rgba(255, 118, 178, 0.3)', text: 'var(--cds-text-primary)' },      // Pink
+    { bg: 'rgba(255, 140, 0, 0.15)', border: 'rgba(255, 140, 0, 0.3)', text: 'var(--cds-text-primary)' },      // Orange
+];
+
+// Premium Regex Syntax Highlighter
+const highlightRegex = (regexStr) => {
+    if (!regexStr) return '';
+
+    // 1: escaped, 2: charClass, 3: group, 4: quantifier, 5: operator
+    const tokenRegex = /(\\.)|(\[(?:\\.|[^\]])*\])|(\((?:\\.|[^\)])*\))|([\*\+\?]\??|\{\d+(?:,\d*)?\}\??)|([\^$\|])/g;
+
+    let lastIndex = 0;
+    let result = '';
+    let match;
+
+    while ((match = tokenRegex.exec(regexStr)) !== null) {
+        // Add text before match
+        result += escapeHtml(regexStr.slice(lastIndex, match.index));
+
+        const [full, escaped, charClass, group, quantifier, operator] = match;
+
+        if (escaped) {
+            result += `<span style="color: #ff7eb6;">${escapeHtml(full)}</span>`;
+        } else if (charClass) {
+            result += `<span style="color: #78a9ff;">${escapeHtml(full)}</span>`;
+        } else if (group) {
+            result += `<span style="color: #42be65;">${escapeHtml(full)}</span>`;
+        } else if (quantifier) {
+            result += `<span style="color: #33b1ff;">${escapeHtml(full)}</span>`;
+        } else if (operator) {
+            result += `<span style="color: #be95ff; font-weight: bold;">${escapeHtml(full)}</span>`;
+        }
+
+        lastIndex = tokenRegex.lastIndex;
+    }
+
+    result += escapeHtml(regexStr.slice(lastIndex));
+    return result;
+};
+
+// Generate highlighted HTML with match data attributes for tooltips and group colors
+const generateHighlightedHtml = (text, regex, flags) => {
+    if (!regex || !text) return escapeHtml(text);
 
     try {
         const re = new RegExp(regex, flags.includes('g') ? flags : flags + 'g');
-        const parts = [];
+        let result = '';
         let lastIndex = 0;
         let match;
+        let matchCount = 0;
 
         while ((match = re.exec(text)) !== null) {
             // Add text before match
             if (match.index > lastIndex) {
-                parts.push(
-                    <span key={`text-${lastIndex}`}>{text.slice(lastIndex, match.index)}</span>
+                result += escapeHtml(text.slice(lastIndex, match.index));
+            }
+
+            matchCount++;
+            const matchIndex = match.index;
+            const fullMatchText = match[0];
+
+            // Build tooltip data
+            let tooltipData = `Match #${matchCount} at index ${matchIndex}`;
+            if (match.groups && Object.keys(match.groups).length > 0) {
+                const groups = Object.entries(match.groups)
+                    .map(([k, v]) => `${k}: "${escapeHtml(v || '')}"`)
+                    .join('\n');
+                tooltipData += `\nGroups:\n${groups}`;
+            }
+            if (match.length > 1) {
+                const unnamedGroups = match.slice(1).filter((g, idx) =>
+                    !match.groups || !Object.values(match.groups).includes(g)
                 );
+                if (unnamedGroups.length > 0) {
+                    const groups = unnamedGroups
+                        .map((g, i) => `${i + 1}: "${escapeHtml(g || '')}"`)
+                        .join('\n');
+                    tooltipData += `\nCaptures:\n${groups}`;
+                }
             }
 
-            // Add highlighted match
-            parts.push(
-                <mark 
-                    key={`match-${match.index}`}
-                    style={{
-                        backgroundColor: 'var(--cds-support-success-inverse)',
-                        color: 'var(--cds-text-on-color)',
-                        padding: '1px 2px',
-                        borderRadius: '2px',
-                        fontWeight: 600
-                    }}
-                >
-                    {match[0]}
-                </mark>
-            );
+            // If there are capture groups, render them with different colors
+            if (match.length > 1) {
+                // Find all group positions in the match
+                const groupPositions = [];
+                let currentPos = 0;
+
+                for (let i = 1; i < match.length; i++) {
+                    const groupText = match[i];
+                    if (groupText !== undefined) {
+                        const groupIndex = fullMatchText.indexOf(groupText, currentPos);
+                        if (groupIndex !== -1) {
+                            groupPositions.push({
+                                index: groupIndex,
+                                text: groupText,
+                                groupNum: i
+                            });
+                            currentPos = groupIndex + groupText.length;
+                        }
+                    }
+                }
+
+                // Sort by position
+                groupPositions.sort((a, b) => a.index - b.index);
+
+                // Build the highlighted match with different colors for groups
+                let matchResult = '';
+                let matchPos = 0;
+                const fullMatchColor = GROUP_COLORS[0];
+
+                // Process the match text, applying different colors to groups
+                groupPositions.forEach((group) => {
+                    // Add text before this group (part of full match)
+                    if (group.index > matchPos) {
+                        const beforeText = escapeHtml(fullMatchText.slice(matchPos, group.index));
+                        matchResult += `<span style="background-color: ${fullMatchColor.bg}; color: ${fullMatchColor.text}; padding: 2px 0; font-weight: 600;">${beforeText}</span>`;
+                    }
+
+                    // Add the group with its color
+                    const groupColor = GROUP_COLORS[group.groupNum % GROUP_COLORS.length] || GROUP_COLORS[1];
+                    matchResult += `<mark class="regex-match regex-group-${group.groupNum}" style="background-color: ${groupColor.bg}; color: ${groupColor.text};" data-match-index="${matchIndex + group.index}" data-match-num="${matchCount}" data-group-num="${group.groupNum}" title="${tooltipData}">${escapeHtml(group.text)}</mark>`;
+
+                    matchPos = group.index + group.text.length;
+                });
+
+                // Add remaining text after last group
+                if (matchPos < fullMatchText.length) {
+                    const afterText = escapeHtml(fullMatchText.slice(matchPos));
+                    matchResult += `<span style="background-color: ${fullMatchColor.bg}; color: ${fullMatchColor.text}; padding: 2px 0; font-weight: 600;">${afterText}</span>`;
+                }
+
+                result += matchResult;
+            } else {
+                // No groups - just highlight the full match
+                const fullMatchColor = GROUP_COLORS[0];
+                result += `<mark class="regex-match" style="background-color: ${fullMatchColor.bg}; color: ${fullMatchColor.text};" data-match-index="${matchIndex}" data-match-num="${matchCount}" title="${tooltipData}">${escapeHtml(fullMatchText)}</mark>`;
+            }
 
             lastIndex = re.lastIndex;
-            
+
             // Prevent infinite loop for zero-length matches
             if (match.index === re.lastIndex) {
                 re.lastIndex++;
@@ -55,25 +177,456 @@ const HighlightedText = ({ text, regex, flags }) => {
 
         // Add remaining text
         if (lastIndex < text.length) {
-            parts.push(
-                <span key={`text-${lastIndex}`}>{text.slice(lastIndex)}</span>
-            );
+            result += escapeHtml(text.slice(lastIndex));
         }
 
-        return <>{parts}</>;
+        return result;
     } catch (e) {
-        return <span>{text}</span>;
+        return escapeHtml(text);
     }
 };
 
+// Live Highlighted Editor Component
+const LiveHighlightedEditor = ({ text, setText, regex, flags }) => {
+    const textareaRef = useRef(null);
+    const backdropRef = useRef(null);
+    const [highlightedHtml, setHighlightedHtml] = useState('');
+
+    // Update highlighting when text, regex, or flags change
+    useEffect(() => {
+        const html = generateHighlightedHtml(text, regex, flags);
+        setHighlightedHtml(html);
+    }, [text, regex, flags]);
+
+    // Sync scroll between textarea and backdrop
+    const handleScroll = useCallback(() => {
+        if (textareaRef.current && backdropRef.current) {
+            backdropRef.current.scrollTop = textareaRef.current.scrollTop;
+            backdropRef.current.scrollLeft = textareaRef.current.scrollLeft;
+        }
+    }, []);
+
+    return (
+        <div style={{
+            position: 'relative',
+            flex: 1,
+            minHeight: 0,
+            overflow: 'hidden',
+        }}>
+            {/* Backdrop - shows highlighted text */}
+            <div
+                ref={backdropRef}
+                style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    overflow: 'auto',
+                    padding: '0.75rem',
+                    backgroundColor: 'var(--cds-layer)',
+                    border: '1px solid var(--cds-border-strong)',
+                    fontFamily: "'IBM Plex Mono', monospace",
+                    fontSize: '0.875rem',
+                    lineHeight: '1.6',
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                    color: 'var(--cds-text-primary)',
+                    pointerEvents: 'none',
+                }}
+                dangerouslySetInnerHTML={{ __html: highlightedHtml || escapeHtml(text) || '<br>' }}
+            />
+
+            {/* Textarea - for user input */}
+            <textarea
+                ref={textareaRef}
+                value={text}
+                onChange={(e) => setText(e.target.value)}
+                onScroll={handleScroll}
+                placeholder="Enter the text to test against..."
+                spellCheck={false}
+                style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    width: '100%',
+                    height: '100%',
+                    padding: '0.75rem',
+                    background: 'transparent',
+                    border: '1px solid var(--cds-border-strong)',
+                    fontFamily: "'IBM Plex Mono', monospace",
+                    fontSize: '0.875rem',
+                    lineHeight: '1.6',
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                    color: 'transparent',
+                    caretColor: 'var(--cds-text-primary)',
+                    resize: 'none',
+                    outline: 'none',
+                    zIndex: 1,
+                }}
+            />
+
+            {/* CSS for highlighted matches */}
+            <style>{`
+                .regex-match {
+                    padding: 0 1px;
+                    border-radius: 2px;
+                    font-weight: 600;
+                    pointer-events: auto;
+                    cursor: help;
+                    transition: all 0.15s ease;
+                }
+                .regex-match:hover {
+                    filter: contrast(1.1) brightness(1.1);
+                    box-shadow: 0 0 0 2px var(--cds-focus);
+                    z-index: 2;
+                }
+            `}</style>
+        </div>
+    );
+};
+
+// Expandable Regex Input Component with auto-resize and syntax highlighting
+const ExpandableRegexInput = ({ value, onChange, error }) => {
+    const textareaRef = useRef(null);
+    const backdropRef = useRef(null);
+    const highlightedHtml = React.useMemo(() => highlightRegex(value), [value]);
+
+    const LINE_HEIGHT = 20;
+    const MIN_LINES = 1;
+    const MAX_LINES = 10;
+    const MIN_HEIGHT = MIN_LINES * LINE_HEIGHT + 16;
+    const MAX_HEIGHT = MAX_LINES * LINE_HEIGHT + 16;
+
+    // Sync scroll
+    const handleScroll = useCallback(() => {
+        if (textareaRef.current && backdropRef.current) {
+            backdropRef.current.scrollTop = textareaRef.current.scrollTop;
+            backdropRef.current.scrollLeft = textareaRef.current.scrollLeft;
+        }
+    }, []);
+
+    // Auto-resize
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = 'auto';
+            const scrollHeight = textareaRef.current.scrollHeight;
+            const newHeight = Math.min(Math.max(scrollHeight, MIN_HEIGHT), MAX_HEIGHT);
+            textareaRef.current.style.height = `${newHeight}px`;
+        }
+    }, [value]);
+
+    return (
+        <div style={{ position: 'relative', flex: 1, display: 'flex', alignItems: 'stretch' }}>
+            {/* Syntax Highlighting Backdrop */}
+            <div
+                ref={backdropRef}
+                style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    padding: '0.5rem 24px 0.5rem 0.75rem',
+                    fontFamily: "'IBM Plex Mono', monospace",
+                    fontSize: '0.875rem',
+                    lineHeight: '1.4',
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-all',
+                    color: error ? 'var(--cds-support-error)' : 'var(--cds-text-primary)',
+                    pointerEvents: 'none',
+                    overflow: 'hidden',
+                    backgroundColor: 'transparent',
+                    zIndex: 0
+                }}
+                dangerouslySetInnerHTML={{ __html: highlightedHtml || '<br>' }}
+            />
+
+            <textarea
+                ref={textareaRef}
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                onScroll={handleScroll}
+                placeholder="Regular Expression..."
+                spellCheck={false}
+                className="regex-input-scrollbar"
+                style={{
+                    width: '100%',
+                    minHeight: `${MIN_HEIGHT}px`,
+                    maxHeight: `${MAX_HEIGHT}px`,
+                    padding: '0.5rem 24px 0.5rem 0.75rem',
+                    backgroundColor: 'transparent',
+                    border: 'none',
+                    fontFamily: "'IBM Plex Mono', monospace",
+                    fontSize: '0.875rem',
+                    lineHeight: '1.4',
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-all',
+                    resize: 'vertical',
+                    outline: 'none',
+                    overflowY: 'auto',
+                    overflowX: 'hidden',
+                    color: 'transparent',
+                    caretColor: 'var(--cds-text-primary)',
+                    display: 'block',
+                    scrollbarWidth: 'thin',
+                    scrollbarGutter: 'stable',
+                    zIndex: 1,
+                    position: 'relative'
+                }}
+            />
+        </div>
+    );
+};
+
+// Flags Input Component
+const FlagsInputWithPopover = ({ flags, setFlags }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+
+    const toggleFlag = (flag) => {
+        if (flags.includes(flag)) {
+            setFlags(flags.replace(flag, ''));
+        } else {
+            setFlags(flags + flag);
+        }
+    };
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen]);
+
+    return (
+        <div ref={containerRef} style={{ position: 'relative', display: 'flex', alignItems: 'stretch' }}>
+            <div
+                onClick={() => setIsOpen(!isOpen)}
+                style={{
+                    padding: '0.75rem 0.75rem 0',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    cursor: 'pointer',
+                    fontFamily: "'IBM Plex Mono', monospace",
+                    fontSize: '0.875rem',
+                    color: 'var(--cds-text-secondary)',
+                    backgroundColor: isOpen ? 'var(--cds-layer-selected-01)' : 'transparent',
+                    transition: 'all 0.2s ease',
+                    userSelect: 'none',
+                    borderLeft: '1px solid var(--cds-border-subtle)',
+                    minWidth: '60px',
+                    justifyContent: 'center',
+                    lineHeight: '1.4'
+                }}
+                onMouseEnter={(e) => !isOpen && (e.currentTarget.style.backgroundColor = 'var(--cds-layer-hover-01)')}
+                onMouseLeave={(e) => !isOpen && (e.currentTarget.style.backgroundColor = 'transparent')}
+            >
+                {flags || <span style={{ opacity: 0.5, fontSize: '0.875rem' }}>flags</span>}
+            </div>
+
+            {isOpen && (
+                <div style={{
+                    position: 'absolute',
+                    top: 'calc(100% + 8px)',
+                    right: 0,
+                    padding: '0.5rem',
+                    backgroundColor: 'var(--cds-layer-01)',
+                    border: '1px solid var(--cds-border-strong)',
+                    borderRadius: '4px',
+                    boxShadow: '0 12px 24px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.2)',
+                    zIndex: 1000,
+                    minWidth: '240px',
+                }}>
+                    <div style={{
+                        fontSize: '0.7rem',
+                        fontWeight: 600,
+                        color: 'var(--cds-text-secondary)',
+                        textTransform: 'uppercase',
+                        marginBottom: '0.5rem',
+                        padding: '0 0.5rem'
+                    }}>
+                        Regex Flags
+                    </div>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+                        {FLAG_OPTIONS.map(({ flag, label, desc }) => (
+                            <div
+                                key={flag}
+                                onClick={() => toggleFlag(flag)}
+                                style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '0.75rem',
+                                    padding: '0.625rem 0.5rem',
+                                    cursor: 'pointer',
+                                    borderRadius: '2px',
+                                    backgroundColor: flags.includes(flag) ? 'var(--cds-layer-selected-01)' : 'transparent',
+                                    transition: 'all 0.15s',
+                                }}
+                                onMouseEnter={(e) => !flags.includes(flag) && (e.currentTarget.style.backgroundColor = 'var(--cds-layer-hover-01)')}
+                                onMouseLeave={(e) => !flags.includes(flag) && (e.currentTarget.style.backgroundColor = 'transparent')}
+                            >
+                                <span style={{
+                                    fontFamily: "'IBM Plex Mono', monospace",
+                                    fontWeight: 600,
+                                    color: flags.includes(flag) ? 'var(--cds-link-primary)' : 'var(--cds-text-secondary)',
+                                    minWidth: '16px',
+                                }}>
+                                    {flag}
+                                </span>
+                                <div style={{ flex: 1 }}>
+                                    <div style={{
+                                        fontSize: '0.875rem',
+                                        color: 'var(--cds-text-primary)',
+                                        fontWeight: flags.includes(flag) ? 600 : 400
+                                    }}>
+                                        {label}
+                                    </div>
+                                    <div style={{
+                                        fontSize: '0.7rem',
+                                        color: 'var(--cds-text-secondary)',
+                                        marginTop: '2px'
+                                    }}>
+                                        {desc}
+                                    </div>
+                                </div>
+                                {flags.includes(flag) && (
+                                    <span style={{ color: 'var(--cds-link-primary)' }}>✓</span>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+// Match Info Row Component
+const MatchInfoRow = ({ label, range, value, color, indent = false }) => (
+    <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0.4rem 0.75rem',
+        borderBottom: '1px solid var(--cds-border-subtle)',
+        fontFamily: "'IBM Plex Mono', monospace",
+        fontSize: '0.875rem',
+        backgroundColor: 'transparent',
+    }}>
+        <div style={{
+            width: '120px',
+            paddingLeft: indent ? '1rem' : '0',
+            position: 'relative',
+        }}>
+            <span style={{
+                borderBottom: `2px solid ${color}`,
+                paddingBottom: '2px',
+                fontWeight: 600,
+                color: 'var(--cds-text-primary)'
+            }}>
+                {label}
+            </span>
+        </div>
+        <div style={{ width: '80px', color: 'var(--cds-text-secondary)', fontSize: '0.75rem', textAlign: 'center' }}>
+            {range}
+        </div>
+        <div style={{
+            flex: 1,
+            paddingLeft: '1.5rem',
+            borderLeft: '1px solid var(--cds-border-subtle)',
+            color: 'var(--cds-text-primary)',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        }}>
+            {value}
+        </div>
+    </div>
+);
+
+// Tool Pane with Label Component
+const ToolPaneWithLabel = ({ label, children, action }) => (
+    <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        minHeight: 0,
+        flex: 1
+    }}>
+        <div style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            minHeight: '28px',
+            marginBottom: '0',
+            borderBottom: '1px solid var(--cds-border-subtle)',
+            padding: '0.25rem 0.75rem',
+            backgroundColor: 'transparent'
+        }}>
+            <label style={{
+                fontSize: '0.75rem',
+                fontWeight: 600,
+                lineHeight: 1.5,
+                letterSpacing: '0.32px',
+                color: 'var(--cds-text-secondary)',
+                textTransform: 'uppercase'
+            }}>
+                {label}
+            </label>
+            {label === 'MATCH INFORMATION' ? (
+                <ChevronDown size={16} fill="var(--cds-icon-secondary)" />
+            ) : action}
+        </div>
+        {children}
+    </div>
+);
+
 export default function RegExpTester() {
     const [regexStr, setRegexStr] = useState('');
     const [flags, setFlags] = useState('gm');
     const [text, setText] = useState('');
-    const [output, setOutput] = useState('');
+    const [output, setOutput] = useState([]);
     const [error, setError] = useState('');
     const [matches, setMatches] = useState([]);
 
+    // Add scrollbar styles
+    useEffect(() => {
+        const style = document.createElement('style');
+        style.textContent = `
+            .regex-input-scrollbar::-webkit-scrollbar {
+                width: 6px;
+            }
+            .regex-input-scrollbar::-webkit-scrollbar-track {
+                background: transparent;
+                margin: 2px 0;
+            }
+            .regex-input-scrollbar::-webkit-scrollbar-thumb {
+                background-color: var(--cds-border-subtle);
+                border-radius: 3px;
+                border: 1px solid transparent;
+                background-clip: padding-box;
+            }
+            .regex-input-scrollbar::-webkit-scrollbar-thumb:hover {
+                background-color: var(--cds-border-strong);
+            }
+            .regex-input-scrollbar::-webkit-scrollbar-corner {
+                background: transparent;
+            }
+        `;
+        document.head.appendChild(style);
+        return () => document.head.removeChild(style);
+    }, []);
+
     const layout = useLayoutToggle({
         toolKey: 'regexp-tester-layout',
         defaultDirection: 'horizontal',
@@ -87,270 +640,285 @@ export default function RegExpTester() {
 
     const runRegex = () => {
         if (!regexStr) {
-            setOutput('');
+            setOutput([]);
             setError('');
             setMatches([]);
             return;
         }
         try {
-            const re = new RegExp(regexStr, flags);
+            const startTime = performance.now();
+            const isGlobal = flags.includes('g');
+            const sanitizedFlags = isGlobal ? flags : flags + 'g';
+            const re = new RegExp(regexStr, sanitizedFlags);
             const foundMatches = Array.from(text.matchAll(re));
             setMatches(foundMatches);
-            
+
             if (foundMatches.length === 0) {
-                setOutput('No matches found.');
+                const endTime = performance.now();
+                const duration = (endTime - startTime).toFixed(3);
+                setOutput([
+                    <div key="summary" style={{ padding: '0.75rem', borderBottom: '1px solid var(--cds-border-subtle)', color: 'var(--cds-text-secondary)', fontSize: '0.875rem' }}>
+                        No matches found. ({parseFloat(duration) < 0.001 ? '< 0.001' : duration}ms)
+                    </div>
+                ]);
             } else {
-                const matchDetails = foundMatches.map((match, i) => {
-                    let detail = `Match ${i + 1}: "${match[0]}"\nIndex: ${match.index}`;
-                    if (match.groups) {
-                        const groupEntries = Object.entries(match.groups);
-                        if (groupEntries.length > 0) {
-                            detail += '\nGroups:\n' + groupEntries.map(([key, value]) => `  ${key}: "${value}"`).join('\n');
-                        }
-                    }
+                const matchRows = foundMatches.flatMap((match, i) => {
+                    const rows = [];
+                    const fullMatchColor = GROUP_COLORS[0];
+
+                    rows.push(
+                        <MatchInfoRow
+                            key={`match-${i}`}
+                            label={`Match ${i + 1}`}
+                            range={`${match.index}-${match.index + match[0].length}`}
+                            value={match[0]}
+                            color={fullMatchColor.border}
+                        />
+                    );
+
                     if (match.length > 1) {
-                        const unnamedGroups = match.slice(1).filter((g, idx) => !Object.values(match.groups || {}).includes(g));
-                        if (unnamedGroups.length > 0) {
-                             detail += '\nUnnamed Groups:\n' + unnamedGroups.map((g, gi) => `  ${gi + 1}: "${g}"`).join('\n');
+                        const fullMatchText = match[0];
+                        let currentSearchPos = 0;
+
+                        for (let gi = 1; gi < match.length; gi++) {
+                            const groupText = match[gi];
+                            if (groupText !== undefined && groupText !== '') {
+                                const groupIndexInMatch = fullMatchText.indexOf(groupText, currentSearchPos);
+                                if (groupIndexInMatch !== -1) {
+                                    const absoluteStart = match.index + groupIndexInMatch;
+                                    const absoluteEnd = absoluteStart + groupText.length;
+                                    const groupColor = GROUP_COLORS[gi % GROUP_COLORS.length] || GROUP_COLORS[1];
+
+                                    rows.push(
+                                        <MatchInfoRow
+                                            key={`match-${i}-g-${gi}`}
+                                            label={`Group ${gi}`}
+                                            range={`${absoluteStart}-${absoluteEnd}`}
+                                            value={groupText}
+                                            color={groupColor.border}
+                                            indent={true}
+                                        />
+                                    );
+                                    currentSearchPos = groupIndexInMatch + groupText.length;
+                                }
+                            }
                         }
                     }
-                    return detail;
-                }).join('\n\n');
-                setOutput(`Found ${foundMatches.length} match(es):\n\n${matchDetails}`);
+                    return rows;
+                });
+
+                const endTime = performance.now();
+                const duration = (endTime - startTime).toFixed(3);
+
+                setOutput([
+                    <div key="summary" style={{
+                        padding: '0.75rem',
+                        borderBottom: '1px solid var(--cds-border-subtle)',
+                        fontSize: '0.875rem',
+                        fontWeight: 600,
+                        color: 'var(--cds-text-primary)',
+                        backgroundColor: 'var(--cds-layer-01)'
+                    }}>
+                        Found {foundMatches.length} match{foundMatches.length !== 1 ? 'es' : ''}
+                        <span style={{ color: 'var(--cds-text-secondary)', fontSize: '0.75rem', fontWeight: 400, marginLeft: '0.5rem' }}>
+                            ({parseFloat(duration) < 0.001 ? '< 0.001' : duration}ms)
+                        </span>
+                    </div>,
+                    <div key="table-header" style={{
+                        display: 'flex',
+                        padding: '0.5rem 0.75rem',
+                        borderBottom: '1px solid var(--cds-border-strong)',
+                        color: 'var(--cds-text-secondary)',
+                        fontSize: '0.75rem',
+                        fontWeight: 600,
+                        textTransform: 'uppercase',
+                        backgroundColor: 'var(--cds-layer)'
+                    }}>
+                        <div style={{ width: '120px' }}>Name</div>
+                        <div style={{ width: '80px', textAlign: 'center' }}>Range</div>
+                        <div style={{ flex: 1, paddingLeft: '1.5rem' }}>Value</div>
+                    </div>,
+                    <div key="match-rows-container" style={{ backgroundColor: 'var(--cds-layer)' }}>
+                        {matchRows}
+                    </div>
+                ]);
             }
             setError('');
         } catch (e) {
             setError(e.message);
-            setOutput('');
+            setOutput([]);
             setMatches([]);
         }
     };
 
-    const toggleFlag = (flag) => {
-        if (flags.includes(flag)) {
-            setFlags(flags.replace(flag, ''));
-        } else {
-            setFlags(flags + flag);
-        }
+    const handleCopyFullRegex = () => {
+        const fullRegex = `/${regexStr}/${flags}`;
+        navigator.clipboard.writeText(fullRegex);
     };
 
     return (
-        <div className="tool-container" style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', height: '100%' }}>
-            <ToolHeader 
-                title="RegExp Tester" 
-                description="Test Regular Expressions against text. Matches are highlighted in the test string." 
+        <div className="tool-container" style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', height: '100%' }}>
+            <ToolHeader
+                title="RegExp Tester"
+                description="Test Regular Expressions against text. Matches are highlighted in the test string."
             />
 
-            <ToolControls>
-                <div style={{ display: 'flex', alignItems: 'center', flex: 1, gap: '0.5rem' }}>
-                    <span style={{ 
-                        color: 'var(--cds-text-secondary)', 
+            {/* Regex Input Row - Unified Input Group */}
+            <div style={{
+                display: 'flex',
+                alignItems: 'stretch',
+                padding: '0 0.5rem',
+                backgroundColor: 'var(--cds-layer)',
+                border: error ? '2px solid var(--cds-support-error)' : '1px solid var(--cds-border-strong)',
+                borderRadius: '4px',
+                transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+                boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.1)',
+                position: 'relative',
+                overflow: 'visible', // For popover
+            }}
+                className="regex-input-row"
+            >
+                {/* Prefix / */}
+                <div style={{
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    justifyContent: 'center',
+                    padding: '0.75rem 0.5rem 0',
+                    userSelect: 'none',
+                    borderRight: '1px solid var(--cds-border-subtle)',
+                    minWidth: '40px'
+                }}>
+                    <span style={{
+                        color: 'var(--cds-text-secondary)',
                         fontSize: '1.25rem',
-                        fontFamily: "'IBM Plex Mono', monospace"
+                        fontFamily: "'IBM Plex Mono', monospace",
+                        opacity: 0.7,
+                        lineHeight: '1.2'
                     }}>/</span>
-                    <TextInput
-                        id="regex-input"
-                        labelText=""
+                </div>
+
+                <div style={{
+                    flex: 1,
+                    display: 'flex',
+                    alignItems: 'stretch',
+                    padding: '0'
+                }}>
+                    <ExpandableRegexInput
                         value={regexStr}
-                        onChange={(e) => setRegexStr(e.target.value)}
-                        placeholder="Regular Expression..."
-                        invalid={!!error}
-                        style={{ 
-                            flex: 1,
-                            fontFamily: "'IBM Plex Mono', monospace"
-                        }}
+                        onChange={setRegexStr}
+                        error={error}
                     />
-                    <span style={{ 
-                        color: 'var(--cds-text-secondary)', 
+                </div>
+
+                {/* Suffix / */}
+                <div style={{
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    justifyContent: 'center',
+                    padding: '0.75rem 0.5rem 0',
+                    userSelect: 'none',
+                    borderLeft: '1px solid var(--cds-border-subtle)',
+                    minWidth: '40px'
+                }}>
+                    <span style={{
+                        color: 'var(--cds-text-secondary)',
                         fontSize: '1.25rem',
-                        fontFamily: "'IBM Plex Mono', monospace"
+                        fontFamily: "'IBM Plex Mono', monospace",
+                        opacity: 0.7,
+                        lineHeight: '1.2'
                     }}>/</span>
-                    
-                    <TextInput
-                        id="flags-input"
-                        labelText=""
-                        value={flags}
-                        onChange={(e) => setFlags(e.target.value)}
-                        placeholder="flags"
-                        style={{ 
-                            width: '80px',
-                            fontFamily: "'IBM Plex Mono', monospace"
-                        }}
+                </div>
+
+                {/* Flags Input */}
+                <FlagsInputWithPopover
+                    flags={flags}
+                    setFlags={setFlags}
+                />
+
+                {/* Copy Button */}
+                <div style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderLeft: '1px solid var(--cds-border-subtle)',
+                    minWidth: '48px'
+                }}>
+                    <CopyButton
+                        onClick={handleCopyFullRegex}
+                        disabled={!regexStr}
+                        size="md"
+                        iconDescription="Copy full regex string"
+                        align="center"
+                        kind="ghost"
+                        className="transparent-copy-btn"
                     />
                 </div>
-            </ToolControls>
-
-            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginBottom: '0.5rem' }}>
-                {FLAG_OPTIONS.map(({ flag, label }) => (
-                    <Tag
-                        key={flag}
-                        type={flags.includes(flag) ? 'blue' : 'gray'}
-                        onClick={() => toggleFlag(flag)}
-                        style={{ cursor: 'pointer' }}
-                    >
-                        {flag} - {label}
-                    </Tag>
-                ))}
+
+                <style>{`
+                    .regex-input-row:focus-within {
+                        border-color: var(--cds-focus) !important;
+                        box-shadow: 0 0 0 2px var(--cds-focus), inset 0 1px 2px rgba(0,0,0,0.1);
+                    }
+                    .regex-input-row:hover:not(:focus-within) {
+                        border-color: var(--cds-border-interactive);
+                    }
+                    .transparent-copy-btn {
+                        background-color: transparent !important;
+                        border: none !important;
+                        width: 100% !important;
+                        height: 100% !important;
+                    }
+                    .transparent-copy-btn:hover {
+                        background-color: var(--cds-layer-hover-01) !important;
+                    }
+                `}</style>
             </div>
-            
+
+            {/* Error Display */}
             {error && (
-                <div style={{ 
-                    color: 'var(--cds-support-error)', 
-                    marginBottom: '0.5rem',
+                <div style={{
+                    color: 'var(--cds-support-error)',
                     padding: '0.5rem',
                     backgroundColor: 'var(--cds-support-error-inverse)',
-                    borderRadius: '4px'
+                    borderRadius: '4px',
+                    fontSize: '0.875rem',
+                    margin: '0 0.5rem'
                 }}>
                     {error}
                 </div>
             )}
 
             <ToolSplitPane columnCount={layout.direction === 'horizontal' ? 2 : 1}>
-                <div className="pane" style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    minHeight: 0,
-                    flex: 1
-                }}>
-                    <div style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        minHeight: '30px',
-                        marginBottom: '0.5rem'
-                    }}>
-                        <label style={{
-                            fontSize: '0.75rem',
-                            fontWeight: 400,
-                            lineHeight: 1.5,
-                            letterSpacing: '0.32px',
-                            color: 'var(--cds-text-secondary)',
-                            textTransform: 'uppercase'
-                        }}>
-                            Test String
-                        </label>
-                        {matches.length > 0 && (
-                            <span style={{ 
-                                fontSize: '0.75rem', 
-                                color: 'var(--cds-support-success)',
-                                fontWeight: 600
-                            }}>
-                                {matches.length} match{matches.length !== 1 ? 'es' : ''}
-                            </span>
-                        )}
-                    </div>
-                    <div style={{ 
-                        flex: 1,
-                        overflowY: 'auto',
-                        padding: '0.75rem',
-                        backgroundColor: 'var(--cds-layer)',
-                        border: '1px solid var(--cds-border-strong)',
-                        fontFamily: "'IBM Plex Mono', monospace",
-                        fontSize: '0.875rem',
-                        lineHeight: '1.5',
-                        whiteSpace: 'pre-wrap',
-                        wordBreak: 'break-word'
-                    }}>
-                        <textarea
-                            value={text}
-                            onChange={(e) => setText(e.target.value)}
-                            placeholder="Enter the text to test against..."
-                            style={{
-                                width: '100%',
-                                height: '100%',
-                                minHeight: '200px',
-                                background: 'transparent',
-                                border: 'none',
-                                resize: 'none',
-                                fontFamily: "'IBM Plex Mono', monospace",
-                                fontSize: '0.875rem',
-                                lineHeight: '1.5',
-                                color: 'var(--cds-text-primary)',
-                                outline: 'none'
-                            }}
-                        />
-                    </div>
-                </div>
+                {/* Left Pane: Live Highlighted Input */}
+                <ToolPaneWithLabel
+                    label={`Test String${matches.length > 0 ? ` (${matches.length} match${matches.length !== 1 ? 'es' : ''})` : ''}`}
+                >
+                    <LiveHighlightedEditor
+                        text={text}
+                        setText={setText}
+                        regex={regexStr}
+                        flags={flags}
+                    />
+                </ToolPaneWithLabel>
 
-                <div className="pane" style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    minHeight: 0,
-                    flex: 1
-                }}>
+                {/* Right Pane: Match Information */}
+                <ToolPaneWithLabel label="MATCH INFORMATION">
                     <div style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        minHeight: '30px',
-                        marginBottom: '0.5rem'
-                    }}>
-                        <label style={{
-                            fontSize: '0.75rem',
-                            fontWeight: 400,
-                            lineHeight: 1.5,
-                            letterSpacing: '0.32px',
-                            color: 'var(--cds-text-secondary)',
-                            textTransform: 'uppercase'
-                        }}>
-                            Match Details
-                        </label>
-                    </div>
-                    <div style={{ 
                         flex: 1,
                         overflowY: 'auto',
-                        padding: '0.75rem',
                         backgroundColor: 'var(--cds-layer)',
                         border: '1px solid var(--cds-border-strong)',
                         fontFamily: "'IBM Plex Mono', monospace",
-                        fontSize: '0.875rem',
-                        lineHeight: '1.5',
-                        whiteSpace: 'pre-wrap',
-                        color: 'var(--cds-text-primary)'
+                        fontSize: '0.875rem'
                     }}>
-                        {output || (
-                            <span style={{ color: 'var(--cds-text-secondary)' }}>
+                        {output.length > 0 ? output : (
+                            <div style={{ padding: '1rem', color: 'var(--cds-text-secondary)' }}>
                                 Matching results will appear here...
-                            </span>
+                            </div>
                         )}
                     </div>
-                </div>
+                </ToolPaneWithLabel>
             </ToolSplitPane>
-
-            {text && regexStr && !error && (
-                <div style={{ 
-                    marginTop: '1rem',
-                    padding: '1rem',
-                    backgroundColor: 'var(--cds-layer)',
-                    border: '1px solid var(--cds-border-strong)',
-                    borderRadius: '4px'
-                }}>
-                    <div style={{
-                        fontSize: '0.75rem',
-                        fontWeight: 600,
-                        color: 'var(--cds-text-secondary)',
-                        textTransform: 'uppercase',
-                        marginBottom: '0.5rem'
-                    }}>
-                        Highlighted Matches
-                    </div>
-                    <div style={{
-                        fontFamily: "'IBM Plex Mono', monospace",
-                        fontSize: '0.875rem',
-                        lineHeight: '1.6',
-                        whiteSpace: 'pre-wrap',
-                        wordBreak: 'break-word',
-                        padding: '0.75rem',
-                        backgroundColor: 'var(--cds-layer-01)',
-                        borderRadius: '4px',
-                        minHeight: '60px'
-                    }}>
-                        <HighlightedText text={text} regex={regexStr} flags={flags} />
-                    </div>
-                </div>
-            )}
         </div>
     );
 }