appium-session-recorder 0.0.1

package/src/ui/src/components/MainInspector.css

@@ -0,0 +1,304 @@
+.main-inspector {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+.inspector-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background: var(--color-bg-primary);
+}
+
+.inspector-empty-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-4);
+    color: var(--color-text-tertiary);
+}
+
+.inspector-empty-icon {
+    font-size: 3rem;
+    opacity: 0.4;
+}
+
+.inspector-empty-text {
+    font-size: var(--font-size-base);
+}
+
+/* Query Section */
+.query-section {
+    background: var(--color-bg-secondary);
+    padding: var(--spacing-4) var(--spacing-5);
+    border-bottom: 1px solid var(--color-border);
+    flex-shrink: 0;
+}
+
+.section-title {
+    color: var(--color-text-primary);
+    font-size: var(--font-size-sm);
+    margin: 0 0 var(--spacing-3) 0;
+    font-weight: var(--font-weight-semibold);
+    letter-spacing: 0.01em;
+}
+
+.query-row {
+    display: flex;
+    gap: var(--spacing-2);
+    margin-bottom: var(--spacing-3);
+}
+
+.query-select,
+.query-input {
+    background: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    border: 1px solid var(--color-border);
+    padding: var(--spacing-2) var(--spacing-3);
+    border-radius: var(--radius-lg);
+    font-size: var(--font-size-sm);
+    font-family: var(--font-family);
+    transition: border-color var(--transition-fast);
+}
+
+.query-select:focus,
+.query-input:focus {
+    outline: none;
+    border-color: var(--color-accent-primary);
+}
+
+.query-select {
+    min-width: 170px;
+}
+
+.query-input {
+    flex: 1;
+}
+
+.query-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);
+}
+
+.query-btn:hover {
+    background: var(--color-accent-secondary);
+}
+
+.query-result {
+    padding: var(--spacing-2) var(--spacing-3);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+    margin-bottom: var(--spacing-3);
+}
+
+.query-result.success {
+    background: #E8F5EE;
+    color: var(--color-accent-success);
+}
+
+.query-result.error {
+    background: #FDECEB;
+    color: var(--color-accent-error);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-3);
+}
+
+.error-icon {
+    font-size: var(--font-size-sm);
+}
+
+.error-dismiss {
+    margin-left: auto;
+    background: transparent;
+    border: none;
+    color: var(--color-accent-error);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+    padding: 0;
+    opacity: 0.6;
+    transition: opacity var(--transition-fast);
+}
+
+.error-dismiss:hover {
+    opacity: 1;
+}
+
+/* Element Panel */
+.element-panel {
+    display: flex;
+    gap: var(--spacing-6);
+    padding-top: var(--spacing-3);
+    border-top: 1px solid var(--color-border);
+    margin-top: var(--spacing-3);
+}
+
+.element-details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    min-width: 240px;
+}
+
+.element-attr {
+    display: flex;
+    gap: var(--spacing-3);
+    font-size: var(--font-size-sm);
+}
+
+.attr-name {
+    color: var(--color-text-tertiary);
+    min-width: 55px;
+    font-weight: var(--font-weight-medium);
+}
+
+.attr-value {
+    color: var(--color-text-primary);
+}
+
+.locators-section {
+    flex: 1;
+}
+
+.locators-section h4 {
+    color: var(--color-text-secondary);
+    font-size: var(--font-size-sm);
+    margin: 0 0 var(--spacing-2) 0;
+    font-weight: var(--font-weight-medium);
+}
+
+.locators-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-1);
+}
+
+.locator-row {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-3);
+    padding: var(--spacing-2) var(--spacing-3);
+    background: var(--color-bg-primary);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    position: relative;
+    border: 1px solid transparent;
+}
+
+.locator-row:hover {
+    background: var(--color-bg-tertiary);
+    border-color: var(--color-border);
+}
+
+.locator-row.copied {
+    background: #E8F5EE;
+    border-color: #C6E7D4;
+}
+
+.locator-strategy {
+    color: var(--color-accent-primary);
+    font-size: var(--font-size-xs);
+    min-width: 130px;
+    font-weight: var(--font-weight-medium);
+    font-family: var(--font-mono);
+}
+
+.locator-value {
+    flex: 1;
+    font-size: var(--font-size-xs);
+    color: var(--color-text-secondary);
+    word-break: break-all;
+    font-family: var(--font-mono);
+}
+
+.copied-badge {
+    font-size: var(--font-size-xs);
+    color: var(--color-accent-success);
+    font-weight: var(--font-weight-medium);
+}
+
+/* Content Area: Screenshot Left, XML Right */
+.content-area {
+    flex: 1;
+    display: flex;
+    gap: var(--spacing-4);
+    padding: var(--spacing-4);
+    overflow: hidden;
+    background: var(--color-bg-primary);
+}
+
+/* Screenshot Section */
+.screenshot-section {
+    flex-shrink: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    overflow: auto;
+}
+
+.screenshot-image {
+    max-height: 100%;
+    max-width: 350px;
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-md);
+    object-fit: contain;
+    border: 1px solid var(--color-border);
+}
+
+/* XML Section */
+.xml-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.xml-section .section-title {
+    flex-shrink: 0;
+    margin-bottom: var(--spacing-3);
+}
+
+.xml-source {
+    flex: 1;
+    background: var(--color-bg-secondary);
+    padding: var(--spacing-4);
+    border-radius: var(--radius-lg);
+    font-size: var(--font-size-xs);
+    font-family: var(--font-mono);
+    overflow: auto;
+    white-space: pre;
+    color: var(--color-text-secondary);
+    border: 1px solid var(--color-border);
+    margin: 0;
+    line-height: 1.7;
+}
+
+.xml-source::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.xml-source::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: var(--radius-sm);
+}
+
+.xml-source::-webkit-scrollbar-thumb {
+    background: var(--color-border);
+    border-radius: var(--radius-sm);
+}
+
+.xml-source::-webkit-scrollbar-thumb:hover {
+    background: var(--color-text-tertiary);
+}

package/src/ui/src/components/MainInspector.tsx

@@ -0,0 +1,304 @@
+import { type Component, createSignal, Show, For, createEffect, createRenderEffect, onCleanup } from 'solid-js';
+import type { Interaction } from '../types';
+import { parseXmlSource } from '../utils/xml-parser';
+import { generateLocators } from '../utils/locators';
+import type { ParsedElement, Locator } from '../types';
+import './MainInspector.css';
+
+type MainInspectorProps = {
+    interaction: Interaction | null;
+};
+
+export const MainInspector: Component<MainInspectorProps> = (props) => {
+    const [selectedElement, setSelectedElement] = createSignal<ParsedElement | null>(null);
+    const [queryStrategy, setQueryStrategy] = createSignal('accessibility id');
+    const [queryValue, setQueryValue] = createSignal('');
+    const [foundElements, setFoundElements] = createSignal<ParsedElement[]>([]);
+    const [copiedText, setCopiedText] = createSignal<string | null>(null);
+    const [queryError, setQueryError] = createSignal<string | null>(null);
+    const [xmlPreRef, setXmlPreRef] = createSignal<HTMLPreElement | undefined>(undefined);
+
+    // Reset state when interaction changes
+    createEffect(() => {
+        if (props.interaction) {
+            setSelectedElement(null);
+            setQueryValue('');
+            setFoundElements([]);
+        }
+    });
+
+    const parsedElements = () => {
+        if (!props.interaction?.source) return [];
+        return parseXmlSource(props.interaction.source);
+    };
+
+    const runQuery = () => {
+        const strategy = queryStrategy();
+        const value = queryValue().trim();
+
+        setQueryError(null);
+
+        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':
+                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);
+                            }
+                        }
+                        found = elements.filter(el => matchedNodes.some(node => el.node.isEqualNode(node)));
+                    } catch (e) {
+                        console.error('Invalid XPath expression:', e);
+                    }
+                }
+                break;
+            case '-ios predicate string':
+                found = elements.filter(el => {
+                    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':
+                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;
+                        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]);
+            setQueryError(null);
+        } else {
+            setSelectedElement(null);
+            setQueryError(`No elements found for ${strategy}: "${value}"`);
+        }
+    };
+
+    const copyText = (text: string) => {
+        navigator.clipboard.writeText(text);
+        setCopiedText(text);
+        setTimeout(() => setCopiedText(null), 2000);
+    };
+
+    const locators = (): Locator[] => {
+        const el = selectedElement();
+        return el ? generateLocators(el) : [];
+    };
+
+    const formatXml = (xml: string) => {
+        // Simple XML formatting for better readability
+        let formatted = '';
+        let indent = 0;
+        const lines = xml.replace(/></g, '>\n<').split('\n');
+
+        for (const line of lines) {
+            const trimmed = line.trim();
+            if (!trimmed) continue;
+
+            if (trimmed.startsWith('</')) {
+                indent = Math.max(0, indent - 1);
+            }
+
+            formatted += '  '.repeat(indent) + trimmed + '\n';
+
+            if (trimmed.startsWith('<') && !trimmed.startsWith('</') && !trimmed.endsWith('/>') && !trimmed.includes('</')) {
+                indent++;
+            }
+        }
+
+        return formatted;
+    };
+
+    // Defense-in-depth: render XML as textContent (never HTML)
+    createRenderEffect(() => {
+        const el = xmlPreRef();
+        if (!el) return;
+        el.textContent = formatXml(props.interaction?.source || '');
+    });
+
+    return (
+        <div class="main-inspector">
+            <Show
+                when={props.interaction}
+                fallback={
+                    <div class="inspector-empty">
+                        <div class="inspector-empty-content">
+                            <span class="inspector-empty-icon">🔍</span>
+                            <span class="inspector-empty-text">Select an action to inspect</span>
+                        </div>
+                    </div>
+                }
+            >
+                {/* Query Tester Section */}
+                <div class="query-section">
+                    <h3 class="section-title">Query Tester</h3>
+                    <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>
+
+                    <Show when={queryError()}>
+                        <div class="query-result error">
+                            <span class="error-icon">⚠️</span>
+                            <span>{queryError()}</span>
+                            <button class="error-dismiss" onClick={() => setQueryError(null)}>✕</button>
+                        </div>
+                    </Show>
+
+                    {/* Element Details */}
+                    <Show when={selectedElement()}>
+                        <div class="element-panel">
+                            <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 class="locators-section">
+                                <h4>Locators (click to copy)</h4>
+                                <div class="locators-list">
+                                    <For each={locators()}>
+                                        {(locator) => (
+                                            <div
+                                                class="locator-row"
+                                                classList={{ copied: copiedText() === locator.value }}
+                                                onClick={() => copyText(locator.value)}
+                                            >
+                                                <span class="locator-strategy">{locator.strategy}</span>
+                                                <span class="locator-value">{locator.value}</span>
+                                                <Show when={copiedText() === locator.value}>
+                                                    <span class="copied-badge">Copied!</span>
+                                                </Show>
+                                            </div>
+                                        )}
+                                    </For>
+                                </div>
+                            </div>
+                        </div>
+                    </Show>
+                </div>
+
+                {/* Content Area: Screenshot Left, XML Right */}
+                <div class="content-area">
+                    {/* Screenshot Section */}
+                    <div class="screenshot-section">
+                        <Show when={props.interaction!.screenshot}>
+                            <img
+                                src={`data:image/png;base64,${props.interaction!.screenshot}`}
+                                alt="Screenshot"
+                                class="screenshot-image"
+                            />
+                        </Show>
+                    </div>
+
+	                    {/* XML Source Section */}
+	                    <div class="xml-section">
+	                        <h3 class="section-title">XML Source</h3>
+	                        <pre
+	                            ref={(el) => {
+	                                setXmlPreRef(el);
+	                                onCleanup(() => {
+	                                    setXmlPreRef(undefined);
+	                                });
+	                            }}
+	                            class="xml-source"
+	                        />
+	                    </div>
+	                </div>
+	            </Show>
+	        </div>
+	    );
+};

package/src/ui/src/components/Stats.css

@@ -0,0 +1,27 @@
+.stats {
+    display: flex;
+    gap: var(--spacing-6);
+    padding: var(--spacing-5);
+    background: var(--color-bg-secondary);
+    border-radius: var(--radius-xl);
+    margin-bottom: var(--spacing-6);
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--color-border);
+}
+
+.stat {
+    text-align: center;
+    flex: 1;
+}
+
+.stat-value {
+    font-size: var(--font-size-3xl);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-accent-primary);
+}
+
+.stat-label {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-tertiary);
+    margin-top: var(--spacing-2);
+}

package/src/ui/src/components/Timeline.css

@@ -0,0 +1,31 @@
+.timeline {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+}
+
+.empty-state {
+    text-align: center;
+    padding: var(--spacing-12) var(--spacing-6);
+    background: var(--color-bg-secondary);
+    border-radius: var(--radius-2xl);
+    border: 1px dashed var(--color-border);
+}
+
+.empty-icon {
+    font-size: 3rem;
+    margin-bottom: var(--spacing-4);
+    opacity: 0.4;
+}
+
+.empty-title {
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
+    margin-bottom: var(--spacing-2);
+}
+
+.empty-text {
+    color: var(--color-text-tertiary);
+    font-size: var(--font-size-sm);
+}

package/src/ui/src/components/Timeline.tsx

@@ -0,0 +1,37 @@
+import { type Component, For, Show } from 'solid-js';
+import type { Interaction } from '../types';
+import { InteractionCard } from './InteractionCard';
+import './Timeline.css';
+
+type TimelineProps = {
+    interactions: Interaction[];
+    onInspect?: (interaction: Interaction) => void;
+};
+
+export const Timeline: Component<TimelineProps> = (props) => {
+    return (
+        <div class="timeline">
+            <Show
+                when={props.interactions.length > 0}
+                fallback={
+                    <div class="empty-state">
+                        <div class="empty-icon">📱</div>
+                        <div class="empty-title">No interactions recorded yet</div>
+                        <div class="empty-text">
+                            Connect Appium Inspector to port 4724 and start interacting
+                        </div>
+                    </div>
+                }
+            >
+                <For each={props.interactions}>
+                    {(interaction) => (
+                        <InteractionCard
+                            interaction={interaction}
+                            onInspect={() => props.onInspect?.(interaction)}
+                        />
+                    )}
+                </For>
+            </Show>
+        </div>
+    );
+};