appium-session-recorder 0.0.1

package/src/ui/src/components/Inspector.tsx

@@ -0,0 +1,265 @@
+import { type Component, createSignal, Show, For } from 'solid-js';
+import { Dialog } from '@kobalte/core/dialog';
+import type { Interaction } from '../types';
+import { parseXmlSource } from '../utils/xml-parser';
+import { generateLocators } from '../utils/locators';
+import type { ParsedElement, Locator } from '../types';
+import './Inspector.css';
+
+type InspectorProps = {
+    interaction: Interaction | null;
+    open: boolean;
+    onClose: () => void;
+};
+
+export const Inspector: Component<InspectorProps> = (props) => {
+    const [selectedElement, setSelectedElement] = createSignal<ParsedElement | null>(null);
+    const [queryStrategy, setQueryStrategy] = createSignal('accessibility id');
+    const [queryValue, setQueryValue] = createSignal('');
+    const [foundElements, setFoundElements] = createSignal<ParsedElement[]>([]);
+    const [showSource, setShowSource] = createSignal(false);
+
+    const parsedElements = () => {
+        if (!props.interaction?.source) return [];
+        return parseXmlSource(props.interaction.source);
+    };
+
+    const runQuery = () => {
+        const strategy = queryStrategy();
+        const value = queryValue().trim();
+
+        if (!value) return;
+
+        const elements = parsedElements();
+        let found: ParsedElement[] = [];
+
+        switch (strategy) {
+            case 'accessibility id':
+                found = elements.filter(el => el.name === value || el.label === value);
+                break;
+            case 'class name':
+                found = elements.filter(el => el.type === value);
+                break;
+            case 'xpath':
+                // Properly evaluate XPath against the XML source
+                if (props.interaction?.source) {
+                    try {
+                        const parser = new DOMParser();
+                        const doc = parser.parseFromString(props.interaction.source, 'text/xml');
+                        const result = doc.evaluate(value, doc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+                        const matchedNodes: Element[] = [];
+                        for (let i = 0; i < result.snapshotLength; i++) {
+                            const node = result.snapshotItem(i);
+                            if (node && node.nodeType === 1) {
+                                matchedNodes.push(node as Element);
+                            }
+                        }
+                        // Match found nodes back to parsed elements
+                        found = elements.filter(el => matchedNodes.some(node => el.node.isEqualNode(node)));
+                    } catch (e) {
+                        console.error('Invalid XPath expression:', e);
+                    }
+                }
+                break;
+            case '-ios predicate string':
+                // iOS predicate string matching (simplified attribute matching)
+                found = elements.filter(el => {
+                    // Parse simple predicates like "name == 'value'" or "label CONTAINS 'text'"
+                    const predicateLower = value.toLowerCase();
+                    if (predicateLower.includes('name')) {
+                        const match = value.match(/name\s*(==|CONTAINS)\s*['"](.*)['"]/i);
+                        if (match) {
+                            return match[1] === '=='
+                                ? el.name === match[2]
+                                : el.name.includes(match[2]);
+                        }
+                    }
+                    if (predicateLower.includes('label')) {
+                        const match = value.match(/label\s*(==|CONTAINS)\s*['"](.*)['"]/i);
+                        if (match) {
+                            return match[1] === '=='
+                                ? el.label === match[2]
+                                : el.label.includes(match[2]);
+                        }
+                    }
+                    if (predicateLower.includes('type')) {
+                        const match = value.match(/type\s*(==|CONTAINS)\s*['"](.*)['"]/i);
+                        if (match) {
+                            return match[1] === '=='
+                                ? el.type === match[2]
+                                : el.type.includes(match[2]);
+                        }
+                    }
+                    return false;
+                });
+                break;
+            case '-ios class chain':
+                // iOS class chain matching (simplified type/index matching)
+                // Format: **/XCUIElementTypeButton[`name == "buttonName"`]
+                const classChainMatch = value.match(/\*\*\/(\w+)(?:\[`(.+?)`\])?/);
+                if (classChainMatch) {
+                    const targetType = classChainMatch[1];
+                    const predicate = classChainMatch[2];
+                    found = elements.filter(el => {
+                        if (el.type !== targetType) return false;
+                        if (!predicate) return true;
+                        // Simple predicate matching within class chain
+                        const nameMatch = predicate.match(/name\s*==\s*['"](.*)['"]/i);
+                        if (nameMatch) return el.name === nameMatch[1];
+                        const labelMatch = predicate.match(/label\s*==\s*['"](.*)['"]/i);
+                        if (labelMatch) return el.label === labelMatch[1];
+                        return true;
+                    });
+                }
+                break;
+        }
+
+        setFoundElements(found);
+        if (found.length > 0) {
+            setSelectedElement(found[0]);
+        }
+    };
+
+    const copyText = (text: string) => {
+        navigator.clipboard.writeText(text);
+    };
+
+    const locators = (): Locator[] => {
+        const el = selectedElement();
+        return el ? generateLocators(el) : [];
+    };
+
+    const resetState = () => {
+        setSelectedElement(null);
+        setQueryStrategy('accessibility id');
+        setQueryValue('');
+        setFoundElements([]);
+        setShowSource(false);
+    };
+
+    const handleClose = () => {
+        resetState();
+        props.onClose();
+    };
+
+    return (
+        <Dialog open={props.open} onOpenChange={(open) => !open && handleClose()}>
+            <Dialog.Portal>
+                <Dialog.Overlay class="inspector-overlay" />
+                <Dialog.Content class="inspector-modal">
+                    <Dialog.CloseButton class="inspector-close">✕</Dialog.CloseButton>
+
+                    <div class="inspector-panel">
+                        <div class="inspector-left">
+                            <Show when={props.interaction?.screenshot}>
+                                <img
+                                    src={`data:image/png;base64,${props.interaction!.screenshot}`}
+                                    alt="Screenshot"
+                                    class="inspector-screenshot"
+                                />
+                            </Show>
+                        </div>
+
+                        <div class="inspector-right">
+                            <div class="inspector-section">
+                                <h3>Query Tester</h3>
+                                <div class="query-tester">
+                                    <div class="query-row">
+                                        <select
+                                            value={queryStrategy()}
+                                            onChange={(e) => setQueryStrategy(e.currentTarget.value)}
+                                            class="query-select"
+                                        >
+                                            <option value="accessibility id">accessibility id</option>
+                                            <option value="xpath">xpath</option>
+                                            <option value="class name">class name</option>
+                                            <option value="-ios predicate string">-ios predicate string</option>
+                                            <option value="-ios class chain">-ios class chain</option>
+                                        </select>
+                                        <input
+                                            type="text"
+                                            value={queryValue()}
+                                            onInput={(e) => setQueryValue(e.currentTarget.value)}
+                                            onKeyPress={(e) => e.key === 'Enter' && runQuery()}
+                                            placeholder="Enter locator value..."
+                                            class="query-input"
+                                        />
+                                        <button onClick={runQuery} class="query-btn">
+                                            Find
+                                        </button>
+                                    </div>
+
+                                    <Show when={foundElements().length > 0}>
+                                        <div class="query-result success">
+                                            Found {foundElements().length} element(s)
+                                        </div>
+                                    </Show>
+                                </div>
+                            </div>
+                            <Show when={selectedElement()}>
+                                <div class="inspector-section">
+                                    <h3>Element Details</h3>
+                                    <div class="element-details">
+                                        <div class="element-attr">
+                                            <span class="attr-name">Type:</span>
+                                            <span class="attr-value">{selectedElement()!.type}</span>
+                                        </div>
+                                        <Show when={selectedElement()!.name}>
+                                            <div class="element-attr">
+                                                <span class="attr-name">Name:</span>
+                                                <span class="attr-value">{selectedElement()!.name}</span>
+                                            </div>
+                                        </Show>
+                                        <Show when={selectedElement()!.label}>
+                                            <div class="element-attr">
+                                                <span class="attr-name">Label:</span>
+                                                <span class="attr-value">{selectedElement()!.label}</span>
+                                            </div>
+                                        </Show>
+                                        <div class="element-attr">
+                                            <span class="attr-name">Bounds:</span>
+                                            <span class="attr-value">
+                                                x={selectedElement()!.x}, y={selectedElement()!.y},
+                                                w={selectedElement()!.width}, h={selectedElement()!.height}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="inspector-section">
+                                    <h3>Locators (click to copy)</h3>
+                                    <div class="locators-list">
+                                        <For each={locators()}>
+                                            {(locator) => (
+                                                <div class="locator-row" onClick={() => copyText(locator.value)}>
+                                                    <span class="locator-strategy">{locator.strategy}</span>
+                                                    <span class="locator-value">{locator.value}</span>
+                                                </div>
+                                            )}
+                                        </For>
+                                    </div>
+                                </div>
+                            </Show>
+
+                            {/* XML Source Toggle */}
+                            <Show when={props.interaction?.source}>
+                                <div class="inspector-section">
+                                    <button
+                                        class="source-toggle-btn"
+                                        onClick={() => setShowSource(!showSource())}
+                                    >
+                                        {showSource() ? 'Hide' : 'Show'} XML Source
+                                    </button>
+                                    <Show when={showSource()}>
+                                        <pre class="xml-source">{props.interaction!.source}</pre>
+                                    </Show>
+                                </div>
+                            </Show>
+                        </div>
+                    </div>
+                </Dialog.Content>
+            </Dialog.Portal>
+        </Dialog>
+    );
+};
+

package/src/ui/src/components/InteractionCard.css

@@ -0,0 +1,159 @@
+.interaction-card {
+    background: var(--color-bg-secondary);
+    border-radius: var(--radius-xl);
+    padding: var(--spacing-5);
+    border-left: 3px solid var(--color-accent-primary);
+    transition: all var(--transition-base);
+    box-shadow: var(--shadow-xs);
+    border-top: 1px solid var(--color-border);
+    border-right: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.interaction-card.action {
+    border-left-color: var(--color-accent-warning);
+}
+
+.interaction-card:hover {
+    box-shadow: var(--shadow-md);
+    transform: translateY(-1px);
+}
+
+.interaction-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-3);
+    flex-wrap: wrap;
+    gap: var(--spacing-2);
+}
+
+.interaction-header-left {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-2);
+    flex-wrap: wrap;
+}
+
+.interaction-id {
+    background: var(--color-bg-tertiary);
+    color: var(--color-text-secondary);
+    padding: 2px var(--spacing-2);
+    border-radius: var(--radius-full);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+}
+
+.interaction-card.action .interaction-id {
+    background: #FFF3E0;
+    color: var(--color-accent-warning);
+}
+
+.interaction-method {
+    font-weight: var(--font-weight-semibold);
+    padding: 2px var(--spacing-2);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+
+.interaction-method.POST {
+    background: #E8F5EE;
+    color: var(--color-accent-success);
+}
+
+.interaction-method.GET {
+    background: #E8F0FE;
+    color: #3B7DD8;
+}
+
+.interaction-method.DELETE {
+    background: #FDECEB;
+    color: var(--color-accent-error);
+}
+
+.interaction-path {
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-sm);
+    word-break: break-all;
+    overflow-wrap: break-word;
+    max-width: 100%;
+}
+
+.interaction-time {
+    color: var(--color-text-tertiary);
+    font-size: var(--font-size-xs);
+}
+
+.element-info {
+    background: var(--color-bg-tertiary);
+    padding: var(--spacing-2) var(--spacing-3);
+    border-radius: var(--radius-md);
+    margin-top: var(--spacing-3);
+    font-size: var(--font-size-sm);
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.element-info-using {
+    color: var(--color-accent-primary);
+    font-weight: var(--font-weight-medium);
+}
+
+.element-info-value {
+    color: var(--color-text-primary);
+    word-break: break-all;
+}
+
+.interaction-body {
+    background: var(--color-bg-primary);
+    padding: var(--spacing-3);
+    border-radius: var(--radius-md);
+    margin-top: var(--spacing-3);
+    font-size: var(--font-size-xs);
+    font-family: var(--font-mono);
+    overflow: auto;
+    max-height: 200px;
+    border: 1px solid var(--color-border);
+    white-space: pre-wrap;
+    word-break: break-all;
+    color: var(--color-text-secondary);
+}
+
+.screenshot-container {
+    margin-top: var(--spacing-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-3);
+    align-items: flex-start;
+}
+
+.screenshot {
+    max-width: 300px;
+    border-radius: var(--radius-xl);
+    cursor: pointer;
+    border: 1px solid var(--color-border);
+    transition: all var(--transition-base);
+}
+
+.screenshot:hover {
+    border-color: var(--color-accent-primary);
+    box-shadow: var(--shadow-md);
+}
+
+.inspect-btn {
+    background: var(--color-accent-primary);
+    color: white;
+    border: none;
+    padding: var(--spacing-2) var(--spacing-5);
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-sm);
+    transition: all var(--transition-fast);
+}
+
+.inspect-btn:hover {
+    background: var(--color-accent-secondary);
+}

package/src/ui/src/components/InteractionCard.tsx

@@ -0,0 +1,60 @@
+import { type Component, Show } from 'solid-js';
+import type { Interaction } from '../types';
+import './InteractionCard.css';
+
+type InteractionCardProps = {
+    interaction: Interaction;
+    onInspect?: () => void;
+};
+
+export const InteractionCard: Component<InteractionCardProps> = (props) => {
+    const formattedTime = () => new Date(props.interaction.timestamp).toLocaleTimeString();
+    const isAction = () => !!props.interaction.screenshot;
+
+    return (
+        <div classList={{ 'interaction-card': true, 'action': isAction() }}>
+            <div class="interaction-header">
+                <div class="interaction-header-left">
+                    <span class="interaction-id">#{props.interaction.id}</span>
+                    <span classList={{
+                        'interaction-method': true,
+                        [props.interaction.method]: true,
+                    }}>
+                        {props.interaction.method}
+                    </span>
+                    <span class="interaction-path">{props.interaction.path}</span>
+                </div>
+                <span class="interaction-time">{formattedTime()}</span>
+            </div>
+
+            <Show when={props.interaction.elementInfo}>
+                <div class="element-info">
+                    <span class="element-info-using">{props.interaction.elementInfo!.using}:</span>
+                    {' "'}
+                    <span class="element-info-value">{props.interaction.elementInfo!.value}</span>
+                    {'"'}
+                </div>
+            </Show>
+
+            <Show when={props.interaction.body}>
+                <pre class="interaction-body">
+                    {JSON.stringify(props.interaction.body, null, 2)}
+                </pre>
+            </Show>
+
+            <Show when={props.interaction.screenshot}>
+                <div class="screenshot-container">
+                    <img
+                        src={`data:image/png;base64,${props.interaction.screenshot}`}
+                        alt="Screenshot"
+                        class="screenshot"
+                        onClick={props.onInspect}
+                    />
+                    <button class="inspect-btn" onClick={props.onInspect}>
+                        Inspect Elements
+                    </button>
+                </div>
+            </Show>
+        </div>
+    );
+};