thanh-kit 2.5.0

package/templates/skills/webapp-testing/examples/console_logging.py

@@ -0,0 +1,35 @@
+from playwright.sync_api import sync_playwright
+
+# Example: Capturing console logs during browser automation
+
+url = 'http://localhost:5173'  # Replace with your URL
+
+console_logs = []
+
+with sync_playwright() as p:
+    browser = p.chromium.launch(headless=True)
+    page = browser.new_page(viewport={'width': 1920, 'height': 1080})
+
+    # Set up console log capture
+    def handle_console_message(msg):
+        console_logs.append(f"[{msg.type}] {msg.text}")
+        print(f"Console: [{msg.type}] {msg.text}")
+
+    page.on("console", handle_console_message)
+
+    # Navigate to page
+    page.goto(url)
+    page.wait_for_load_state('networkidle')
+
+    # Interact with the page (triggers console logs)
+    page.click('text=Dashboard')
+    page.wait_for_timeout(1000)
+
+    browser.close()
+
+# Save console logs to file
+with open('/mnt/user-data/outputs/console.log', 'w') as f:
+    f.write('\n'.join(console_logs))
+
+print(f"\nCaptured {len(console_logs)} console messages")
+print(f"Logs saved to: /mnt/user-data/outputs/console.log")

package/templates/skills/webapp-testing/examples/element_discovery.py

@@ -0,0 +1,40 @@
+from playwright.sync_api import sync_playwright
+
+# Example: Discovering buttons and other elements on a page
+
+with sync_playwright() as p:
+    browser = p.chromium.launch(headless=True)
+    page = browser.new_page()
+
+    # Navigate to page and wait for it to fully load
+    page.goto('http://localhost:5173')
+    page.wait_for_load_state('networkidle')
+
+    # Discover all buttons on the page
+    buttons = page.locator('button').all()
+    print(f"Found {len(buttons)} buttons:")
+    for i, button in enumerate(buttons):
+        text = button.inner_text() if button.is_visible() else "[hidden]"
+        print(f"  [{i}] {text}")
+
+    # Discover links
+    links = page.locator('a[href]').all()
+    print(f"\nFound {len(links)} links:")
+    for link in links[:5]:  # Show first 5
+        text = link.inner_text().strip()
+        href = link.get_attribute('href')
+        print(f"  - {text} -> {href}")
+
+    # Discover input fields
+    inputs = page.locator('input, textarea, select').all()
+    print(f"\nFound {len(inputs)} input fields:")
+    for input_elem in inputs:
+        name = input_elem.get_attribute('name') or input_elem.get_attribute('id') or "[unnamed]"
+        input_type = input_elem.get_attribute('type') or 'text'
+        print(f"  - {name} ({input_type})")
+
+    # Take screenshot for visual reference
+    page.screenshot(path='/tmp/page_discovery.png', full_page=True)
+    print("\nScreenshot saved to /tmp/page_discovery.png")
+
+    browser.close()

package/templates/skills/webapp-testing/examples/static_html_automation.py

@@ -0,0 +1,33 @@
+from playwright.sync_api import sync_playwright
+import os
+
+# Example: Automating interaction with static HTML files using file:// URLs
+
+html_file_path = os.path.abspath('path/to/your/file.html')
+file_url = f'file://{html_file_path}'
+
+with sync_playwright() as p:
+    browser = p.chromium.launch(headless=True)
+    page = browser.new_page(viewport={'width': 1920, 'height': 1080})
+
+    # Navigate to local HTML file
+    page.goto(file_url)
+
+    # Take screenshot
+    page.screenshot(path='/mnt/user-data/outputs/static_page.png', full_page=True)
+
+    # Interact with elements
+    page.click('text=Click Me')
+    page.fill('#name', 'John Doe')
+    page.fill('#email', 'john@example.com')
+
+    # Submit form
+    page.click('button[type="submit"]')
+    page.wait_for_timeout(500)
+
+    # Take final screenshot
+    page.screenshot(path='/mnt/user-data/outputs/after_submit.png', full_page=True)
+
+    browser.close()
+
+print("Static HTML automation completed!")

package/templates/skills/webapp-testing/scripts/with_server.py

@@ -0,0 +1,106 @@
+#!/usr/bin/env python3
+"""
+Start one or more servers, wait for them to be ready, run a command, then clean up.
+
+Usage:
+    # Single server
+    python scripts/with_server.py --server "npm run dev" --port 5173 -- python automation.py
+    python scripts/with_server.py --server "npm start" --port 3000 -- python test.py
+
+    # Multiple servers
+    python scripts/with_server.py \
+      --server "cd backend && python server.py" --port 3000 \
+      --server "cd frontend && npm run dev" --port 5173 \
+      -- python test.py
+"""
+
+import subprocess
+import socket
+import time
+import sys
+import argparse
+
+def is_server_ready(port, timeout=30):
+    """Wait for server to be ready by polling the port."""
+    start_time = time.time()
+    while time.time() - start_time < timeout:
+        try:
+            with socket.create_connection(('localhost', port), timeout=1):
+                return True
+        except (socket.error, ConnectionRefusedError):
+            time.sleep(0.5)
+    return False
+
+
+def main():
+    parser = argparse.ArgumentParser(description='Run command with one or more servers')
+    parser.add_argument('--server', action='append', dest='servers', required=True, help='Server command (can be repeated)')
+    parser.add_argument('--port', action='append', dest='ports', type=int, required=True, help='Port for each server (must match --server count)')
+    parser.add_argument('--timeout', type=int, default=30, help='Timeout in seconds per server (default: 30)')
+    parser.add_argument('command', nargs=argparse.REMAINDER, help='Command to run after server(s) ready')
+
+    args = parser.parse_args()
+
+    # Remove the '--' separator if present
+    if args.command and args.command[0] == '--':
+        args.command = args.command[1:]
+
+    if not args.command:
+        print("Error: No command specified to run")
+        sys.exit(1)
+
+    # Parse server configurations
+    if len(args.servers) != len(args.ports):
+        print("Error: Number of --server and --port arguments must match")
+        sys.exit(1)
+
+    servers = []
+    for cmd, port in zip(args.servers, args.ports):
+        servers.append({'cmd': cmd, 'port': port})
+
+    server_processes = []
+
+    try:
+        # Start all servers
+        for i, server in enumerate(servers):
+            print(f"Starting server {i+1}/{len(servers)}: {server['cmd']}")
+
+            # Use shell=True to support commands with cd and &&
+            process = subprocess.Popen(
+                server['cmd'],
+                shell=True,
+                stdout=subprocess.PIPE,
+                stderr=subprocess.PIPE
+            )
+            server_processes.append(process)
+
+            # Wait for this server to be ready
+            print(f"Waiting for server on port {server['port']}...")
+            if not is_server_ready(server['port'], timeout=args.timeout):
+                raise RuntimeError(f"Server failed to start on port {server['port']} within {args.timeout}s")
+
+            print(f"Server ready on port {server['port']}")
+
+        print(f"\nAll {len(servers)} server(s) ready")
+
+        # Run the command
+        print(f"Running: {' '.join(args.command)}\n")
+        result = subprocess.run(args.command)
+        sys.exit(result.returncode)
+
+    finally:
+        # Clean up all servers
+        print(f"\nStopping {len(server_processes)} server(s)...")
+        for i, process in enumerate(server_processes):
+            try:
+                process.terminate()
+                process.wait(timeout=5)
+            except subprocess.TimeoutExpired:
+                process.kill()
+                process.wait()
+            print(f"Server {i+1} stopped")
+        print("All servers stopped")
+
+
+if __name__ == '__main__':
+    main()

package/templates/statusline.cjs

@@ -0,0 +1,306 @@
+#!/usr/bin/env node
+'use strict';
+
+/**
+ * Custom Claude Code statusline for Node.js
+ * Cross-platform support: Windows, macOS, Linux
+ * Theme: detailed | Features: directory, git, model, usage, session, tokens
+ * No external dependencies - uses only Node.js built-in modules
+ *
+ * Context Window Calculation:
+ * - 100% = compaction threshold (not model limit)
+ * - Self-calibrates via PreCompact hook
+ * - Falls back to smart defaults based on window size
+ */
+
+const { stdin, env } = require('process');
+const { execSync } = require('child_process');
+const os = require('os');
+const fs = require('fs');
+const path = require('path');
+
+// Use modularized context tracker with 3-layer self-healing detection
+const { trackContext } = require('./hooks/lib/context-tracker.cjs');
+
+
+/**
+ * Safe command execution wrapper
+ */
+function exec(cmd) {
+    try {
+        return execSync(cmd, {
+            encoding: 'utf8',
+            stdio: ['pipe', 'pipe', 'ignore'],
+            windowsHide: true
+        }).trim();
+    } catch (err) {
+        return '';
+    }
+}
+
+/**
+ * Format epoch timestamp as HH:mm
+ */
+function formatTimeHM(epoch) {
+    try {
+        const date = new Date(epoch * 1000);
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        return `${hours}:${minutes}`;
+    } catch (err) {
+        return '00:00';
+    }
+}
+
+// Context tracking functions moved to ./hooks/lib/context-tracker.cjs
+// Provides 3-layer self-healing detection:
+// - Layer 1: Session ID change detection
+// - Layer 2: Token drop detection (50% threshold)
+// - Layer 3: Hook marker system (SessionStart/SessionEnd)
+
+/**
+ * Generate Unicode progress bar (horizontal rectangles)
+ * Uses smooth block characters for consistent rendering
+ *
+ * @param {number} percent - 0-100 percentage
+ * @param {number} width - bar width in characters (default 12)
+ * @returns {string} Unicode progress bar like ▰▰▰▰▰▱▱▱▱▱▱▱
+ */
+function progressBar(percent, width = 12) {
+    const clamped = Math.max(0, Math.min(100, percent));
+    const filled = Math.round(clamped * width / 100);
+    const empty = width - filled;
+    // ▰ (U+25B0) filled, ▱ (U+25B1) empty - smooth horizontal rectangles
+    return '▰'.repeat(filled) + '▱'.repeat(empty);
+}
+
+/**
+ * Get severity emoji based on percentage (no color codes)
+ *
+ * @param {number} percent - 0-100 percentage
+ * @returns {string} Emoji indicator
+ */
+function getSeverityEmoji(percent) {
+    if (percent >= 90) return '🔴';      // Critical
+    if (percent >= 70) return '🟡';      // Warning
+    return '🟢';                          // Healthy
+}
+
+/**
+ * Expand home directory to ~
+ */
+function expandHome(filePath) {
+    const homeDir = os.homedir();
+    if (filePath.startsWith(homeDir)) {
+        return filePath.replace(homeDir, '~');
+    }
+    return filePath;
+}
+
+/**
+ * Read stdin asynchronously
+ */
+async function readStdin() {
+    return new Promise((resolve, reject) => {
+        const chunks = [];
+        stdin.setEncoding('utf8');
+
+        stdin.on('data', (chunk) => {
+            chunks.push(chunk);
+        });
+
+        stdin.on('end', () => {
+            resolve(chunks.join(''));
+        });
+
+        stdin.on('error', (err) => {
+            reject(err);
+        });
+    });
+}
+
+/**
+ * Main function
+ */
+async function main() {
+    try {
+        // Read and parse JSON input
+        const input = await readStdin();
+        if (!input.trim()) {
+            console.error('No input provided');
+            process.exit(1);
+        }
+
+        const data = JSON.parse(input);
+
+        // Extract basic information
+        let currentDir = 'unknown';
+        if (data.workspace?.current_dir) {
+            currentDir = data.workspace.current_dir;
+        } else if (data.cwd) {
+            currentDir = data.cwd;
+        }
+        currentDir = expandHome(currentDir);
+
+        const modelName = data.model?.display_name || 'Claude';
+        const modelVersion = data.model?.version && data.model.version !== 'null' ? data.model.version : '';
+
+        // Git branch detection
+        let gitBranch = '';
+        const gitCheck = exec('git rev-parse --git-dir');
+        if (gitCheck) {
+            gitBranch = exec('git branch --show-current');
+            if (!gitBranch) {
+                gitBranch = exec('git rev-parse --short HEAD');
+            }
+        }
+
+        // Native Claude Code data integration
+        let sessionText = '';
+        let costUSD = '';
+        let linesAdded = 0;
+        let linesRemoved = 0;
+        let contextPercent = 0;
+        let contextText = '';
+        const billingMode = env.CLAUDE_BILLING_MODE || 'api';
+
+        // Extract native cost data from Claude Code
+        costUSD = data.cost?.total_cost_usd || '';
+        linesAdded = data.cost?.total_lines_added || 0;
+        linesRemoved = data.cost?.total_lines_removed || 0;
+
+        // Extract context window usage (Claude Code v2.0.65+)
+        // Uses 3-layer self-healing detection from context-tracker module:
+        // - Layer 1: Session ID change detection
+        // - Layer 2: Token drop detection (50% threshold)
+        // - Layer 3: Hook marker system (SessionStart/SessionEnd)
+        const contextInput = data.context_window?.total_input_tokens || 0;
+        const contextOutput = data.context_window?.total_output_tokens || 0;
+        const contextSize = data.context_window?.context_window_size || 0;
+
+        if (contextSize > 0) {
+            const result = trackContext({
+                sessionId: data.session_id,
+                contextInput,
+                contextOutput,
+                contextWindowSize: contextSize
+            });
+
+            contextPercent = result.percentage;
+
+            if (result.showCompactIndicator) {
+                // First render after compaction - show indicator once
+                contextText = `🔄 ▱▱▱▱▱▱▱▱▱▱▱▱`;
+            } else {
+                const emoji = getSeverityEmoji(contextPercent);
+                const bar = progressBar(contextPercent, 12);
+                contextText = `${emoji} ${bar} ${contextPercent}%`;
+            }
+        }
+
+        // Session timer - parse local transcript JSONL (zero external dependencies)
+        const transcriptPath = data.transcript_path;
+
+        if (transcriptPath) {
+            try {
+                if (fs.existsSync(transcriptPath)) {
+                    const content = fs.readFileSync(transcriptPath, 'utf8');
+                    const lines = content.split('\n').filter(l => l.trim());
+
+                    // Find first API call with usage data
+                    let firstApiCall = null;
+                    for (const line of lines) {
+                        try {
+                            const entry = JSON.parse(line);
+                            if (entry.usage && entry.timestamp) {
+                                firstApiCall = entry.timestamp;
+                                break;
+                            }
+                        } catch (e) {
+                            continue;
+                        }
+                    }
+
+                    if (firstApiCall) {
+                        // Calculate 5-hour billing block (Anthropic windows)
+                        const now = new Date();
+                        const currentUtcHour = now.getUTCHours();
+                        const blockStart = Math.floor(currentUtcHour / 5) * 5;
+                        let blockEnd = blockStart + 5;
+
+                        // Handle day wraparound
+                        let blockEndDate = new Date(now);
+                        if (blockEnd >= 24) {
+                            blockEnd -= 24;
+                            blockEndDate.setUTCDate(blockEndDate.getUTCDate() + 1);
+                        }
+                        blockEndDate.setUTCHours(blockEnd, 0, 0, 0);
+
+                        const nowSec = Math.floor(Date.now() / 1000);
+                        const blockEndSec = Math.floor(blockEndDate.getTime() / 1000);
+                        const remaining = blockEndSec - nowSec;
+
+                        if (remaining > 0 && remaining < 18000) {
+                            const rh = Math.floor(remaining / 3600);
+                            const rm = Math.floor((remaining % 3600) / 60);
+                            const blockEndLocal = formatTimeHM(blockEndSec);
+                            sessionText = `${rh}h ${rm}m until reset at ${blockEndLocal}`;
+                        }
+                    }
+                }
+            } catch (err) {
+                // Silent fail - transcript not readable
+            }
+        }
+
+        // Render statusline (no ANSI colors - emoji only for indicators)
+        let output = '';
+
+        // Directory
+        output += `📁 ${currentDir}`;
+
+        // Git branch
+        if (gitBranch) {
+            output += `  🌿 ${gitBranch}`;
+        }
+
+        // Model
+        output += `  🤖 ${modelName}`;
+
+        // Model version
+        if (modelVersion) {
+            output += ` ${modelVersion}`;
+        }
+
+        // Session time
+        if (sessionText) {
+            output += `  ⌛ ${sessionText}`;
+        }
+
+        // Cost (only show for API billing mode)
+        if (billingMode === 'api' && costUSD && /^\d+(\.\d+)?$/.test(costUSD.toString())) {
+            const costUSDNum = parseFloat(costUSD);
+            output += `  💵 $${costUSDNum.toFixed(4)}`;
+        }
+
+        // Lines changed
+        if ((linesAdded > 0 || linesRemoved > 0)) {
+            output += `  📝 +${linesAdded} -${linesRemoved}`;
+        }
+
+        // Context window usage (Claude Code v2.0.65+)
+        if (contextText) {
+            output += `  ${contextText}`;
+        }
+
+        console.log(output);
+    } catch (err) {
+        console.error('Error:', err.message);
+        process.exit(1);
+    }
+}
+
+main().catch(err => {
+    console.error('Fatal error:', err);
+    process.exit(1);
+});