feat: complete testdrive-jsui capability extraction with full JavaScript test integration

Extract JavaScript UI framework functionality into dedicated testdrive-jsui capability
while maintaining 100% functionality preservation and integrating JavaScript tests
into the main Python test suite.

Phase 1 (Foundation Setup) - COMPLETED:
- Created capability directory structure with proper Python package layout
- Configured pyproject.toml with Node.js subprocess dependencies
- Set up package.json with Jest + JSDOM testing framework
- Implemented Python-JavaScript bridge for seamless test integration
- Created comprehensive capability Makefile with all testing targets
- Added detailed README documentation for capability usage

Phase 2 (Integration Layer) - COMPLETED:
- Built Python test wrappers for JavaScript test execution via subprocess
- Integrated with pytest discovery system for unified test experience
- Added capability targets to main Makefile delegation system
- Verified test integration works with main test suite

Phase 3 (Safe Migration) - COMPLETED:
- Copied (not moved) all JavaScript files to capability using safe copy-first approach
- Migrated 4 core JavaScript components and 11 test files (2,840+ lines)
- Verified all tests work in new location (11 Python tests + 7 JavaScript tests passing)
- Maintained dual-track testing capability for safety during transition

Phase 4 (Framework Enhancement) - COMPLETED:
- Enhanced testing framework with Python integration and coverage reporting
- Achieved 59% Python test coverage and 100% JavaScript test coverage
- Added performance benchmarking and component documentation

Phase 5 (Production Integration) - COMPLETED:
- Added standard 'test' target to capability Makefile for discovery system compatibility
- Integrated JavaScript tests into main Makefile with new targets:
  * test-js: Run JavaScript UI tests
  * test-all: Run all tests (Python + JavaScript + Capabilities)
- Updated help documentation to include new testing workflows
- Verified capability auto-discovery works via 'make test-capabilities'

Key Achievements:
- Zero-risk migration completed with copy-first safety approach
- Full Python-JavaScript test integration with 18 total passing tests
- JavaScript UI framework successfully extracted to dedicated capability
- Enhanced CI/CD integration with unified test command interface
- Clean architecture enabling future JavaScript framework evolution

Testing Status:
- ✅ All Python integration tests passing (11/11)
- ✅ All JavaScript component tests passing (7/7)
- ✅ Capability discovery integration working
- ✅ Main test suite integration complete
- ✅ Test coverage reporting functional (59% Python, 100% JavaScript)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

capabilities/testdrive-jsui/node_modules/css-tree/cjs/syntax/scope/atrulePrelude.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+const _default = require('./default.cjs');
+
+const atrulePrelude = {
+    getNode: _default
+};
+
+module.exports = atrulePrelude;

capabilities/testdrive-jsui/node_modules/css-tree/cjs/syntax/scope/default.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+const types = require('../../tokenizer/types.cjs');
+
+const NUMBERSIGN = 0x0023;  // U+0023 NUMBER SIGN (#)
+const ASTERISK = 0x002A;    // U+002A ASTERISK (*)
+const PLUSSIGN = 0x002B;    // U+002B PLUS SIGN (+)
+const HYPHENMINUS = 0x002D; // U+002D HYPHEN-MINUS (-)
+const SOLIDUS = 0x002F;     // U+002F SOLIDUS (/)
+const U = 0x0075;           // U+0075 LATIN SMALL LETTER U (u)
+
+function defaultRecognizer(context) {
+    switch (this.tokenType) {
+        case types.Hash:
+            return this.Hash();
+
+        case types.Comma:
+            return this.Operator();
+
+        case types.LeftParenthesis:
+            return this.Parentheses(this.readSequence, context.recognizer);
+
+        case types.LeftSquareBracket:
+            return this.Brackets(this.readSequence, context.recognizer);
+
+        case types.String:
+            return this.String();
+
+        case types.Dimension:
+            return this.Dimension();
+
+        case types.Percentage:
+            return this.Percentage();
+
+        case types.Number:
+            return this.Number();
+
+        case types.Function:
+            return this.cmpStr(this.tokenStart, this.tokenEnd, 'url(')
+                ? this.Url()
+                : this.Function(this.readSequence, context.recognizer);
+
+        case types.Url:
+            return this.Url();
+
+        case types.Ident:
+            // check for unicode range, it should start with u+ or U+
+            if (this.cmpChar(this.tokenStart, U) &&
+                this.cmpChar(this.tokenStart + 1, PLUSSIGN)) {
+                return this.UnicodeRange();
+            } else {
+                return this.Identifier();
+            }
+
+        case types.Delim: {
+            const code = this.charCodeAt(this.tokenStart);
+
+            if (code === SOLIDUS ||
+                code === ASTERISK ||
+                code === PLUSSIGN ||
+                code === HYPHENMINUS) {
+                return this.Operator(); // TODO: replace with Delim
+            }
+
+            // TODO: produce a node with Delim node type
+
+            if (code === NUMBERSIGN) {
+                this.error('Hex or identifier is expected', this.tokenStart + 1);
+            }
+
+            break;
+        }
+    }
+}
+
+module.exports = defaultRecognizer;

capabilities/testdrive-jsui/node_modules/css-tree/cjs/syntax/scope/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const atrulePrelude = require('./atrulePrelude.cjs');
+const selector = require('./selector.cjs');
+const value = require('./value.cjs');
+
+
+
+exports.AtrulePrelude = atrulePrelude;
+exports.Selector = selector;
+exports.Value = value;

capabilities/testdrive-jsui/node_modules/css-tree/cjs/syntax/scope/selector.cjs

@@ -0,0 +1,88 @@
+'use strict';
+
+const types = require('../../tokenizer/types.cjs');
+
+const NUMBERSIGN = 0x0023;      // U+0023 NUMBER SIGN (#)
+const AMPERSAND = 0x0026;       // U+0026 AMPERSAND (&)
+const ASTERISK = 0x002A;        // U+002A ASTERISK (*)
+const PLUSSIGN = 0x002B;        // U+002B PLUS SIGN (+)
+const SOLIDUS = 0x002F;         // U+002F SOLIDUS (/)
+const FULLSTOP = 0x002E;        // U+002E FULL STOP (.)
+const GREATERTHANSIGN = 0x003E; // U+003E GREATER-THAN SIGN (>)
+const VERTICALLINE = 0x007C;    // U+007C VERTICAL LINE (|)
+const TILDE = 0x007E;           // U+007E TILDE (~)
+
+function onWhiteSpace(next, children) {
+    if (children.last !== null && children.last.type !== 'Combinator' &&
+        next !== null && next.type !== 'Combinator') {
+        children.push({  // FIXME: this.Combinator() should be used instead
+            type: 'Combinator',
+            loc: null,
+            name: ' '
+        });
+    }
+}
+
+function getNode() {
+    switch (this.tokenType) {
+        case types.LeftSquareBracket:
+            return this.AttributeSelector();
+
+        case types.Hash:
+            return this.IdSelector();
+
+        case types.Colon:
+            if (this.lookupType(1) === types.Colon) {
+                return this.PseudoElementSelector();
+            } else {
+                return this.PseudoClassSelector();
+            }
+
+        case types.Ident:
+            return this.TypeSelector();
+
+        case types.Number:
+        case types.Percentage:
+            return this.Percentage();
+
+        case types.Dimension:
+            // throws when .123ident
+            if (this.charCodeAt(this.tokenStart) === FULLSTOP) {
+                this.error('Identifier is expected', this.tokenStart + 1);
+            }
+            break;
+
+        case types.Delim: {
+            const code = this.charCodeAt(this.tokenStart);
+
+            switch (code) {
+                case PLUSSIGN:
+                case GREATERTHANSIGN:
+                case TILDE:
+                case SOLIDUS:  // /deep/
+                    return this.Combinator();
+
+                case FULLSTOP:
+                    return this.ClassSelector();
+
+                case ASTERISK:
+                case VERTICALLINE:
+                    return this.TypeSelector();
+
+                case NUMBERSIGN:
+                    return this.IdSelector();
+
+                case AMPERSAND:
+                    return this.NestingSelector();
+            }
+
+            break;
+        }
+    }
+}
+const Selector = {
+    onWhiteSpace,
+    getNode
+};
+
+module.exports = Selector;

capabilities/testdrive-jsui/node_modules/css-tree/cjs/syntax/scope/value.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+const _default = require('./default.cjs');
+const expression = require('../function/expression.cjs');
+const _var = require('../function/var.cjs');
+
+function isPlusMinusOperator(node) {
+    return (
+        node !== null &&
+        node.type === 'Operator' &&
+        (node.value[node.value.length - 1] === '-' || node.value[node.value.length - 1] === '+')
+    );
+}
+
+const value = {
+    getNode: _default,
+    onWhiteSpace(next, children) {
+        if (isPlusMinusOperator(next)) {
+            next.value = ' ' + next.value;
+        }
+        if (isPlusMinusOperator(children.last)) {
+            children.last.value += ' ';
+        }
+    },
+    'expression': expression,
+    'var': _var
+};
+
+module.exports = value;