appium-session-recorder 0.0.2 → 0.0.3

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

@@ -1,304 +0,0 @@
-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

@@ -1,27 +0,0 @@
-.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

@@ -1,31 +0,0 @@
-.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

@@ -1,37 +0,0 @@
-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>
-    );
-};

package/src/ui/src/hooks/useInteractions.ts

@@ -1,73 +0,0 @@
-import { createSignal, onCleanup, createEffect } from 'solid-js';
-import type { Interaction } from '../types';
-import { api } from '../services/api';
-
-export function useInteractions() {
-    const [interactions, setInteractions] = createSignal<Interaction[]>([]);
-    const [loading, setLoading] = createSignal(true);
-
-    // Load initial history
-    async function loadHistory() {
-        setLoading(true);
-        try {
-            const history = await api.getHistory();
-            setInteractions(history);
-        } catch (error) {
-            console.error('Failed to load history:', error);
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    // Connect to SSE stream
-    createEffect(() => {
-        const unsubscribe = api.connectToStream((event) => {
-            if (event.type === 'init') {
-                setInteractions(event.data);
-                setLoading(false);
-            } else if (event.type === 'interaction') {
-                setInteractions(prev => {
-                    const existing = prev.findIndex(i => i.id === event.data.id);
-                    if (existing >= 0) {
-                        // Update existing
-                        const updated = [...prev];
-                        updated[existing] = event.data;
-                        return updated;
-                    } else {
-                        // Add new
-                        return [...prev, event.data];
-                    }
-                });
-            } else if (event.type === 'clear') {
-                setInteractions([]);
-            }
-        });
-
-        onCleanup(unsubscribe);
-    });
-
-    // Note: loadHistory() is not called here because the SSE stream
-    // already sends the complete initial history via the 'init' event
-
-    async function clearHistory() {
-        await api.clearHistory();
-    }
-
-    async function refresh() {
-        await loadHistory();
-    }
-
-    const actions = interactions().filter(i => i.screenshot);
-    const stats = () => ({
-        total: interactions().length,
-        actions: actions.length,
-    });
-
-    return {
-        interactions,
-        loading,
-        stats,
-        clearHistory,
-        refresh,
-    };
-}

package/src/ui/src/index.tsx

@@ -1,11 +0,0 @@
-import { render } from 'solid-js/web';
-import App from './App';
-import './styles/tokens.css';
-
-const root = document.getElementById('root');
-
-if (!root) {
-    throw new Error('Root element not found');
-}
-
-render(() => <App />, root);

package/src/ui/src/services/api.ts

@@ -1,41 +0,0 @@
-import type { Interaction } from '../types';
-
-class ApiClient {
-    async getHistory(): Promise<Interaction[]> {
-        const response = await fetch('/_recorder/api/history');
-
-        if(!response.ok) {
-            throw new Error(`Failed to fetch history: ${response.statusText}`);
-        }
-
-        return response.json();
-    }
-
-    async clearHistory(): Promise<void> {
-        const response = await fetch('/_recorder/api/clear', { method: 'POST' });
-        if(!response.ok) {
-            throw new Error(`Failed to clear history: ${response.statusText}`);
-        }
-    }
-
-    connectToStream(onEvent: (event: any) => void): () => void {
-        const eventSource = new EventSource('/_recorder/api/stream');
-
-        eventSource.onmessage = (event) => {
-            try {
-                const data = JSON.parse(event.data);
-                onEvent(data);
-            } catch (error) {
-                console.error('Failed to parse SSE event:', error);
-            }
-        };
-
-        eventSource.onerror = (error) => {
-            console.error('SSE connection error:', error);
-        };
-
-        return () => eventSource.close();
-    }
-}
-
-export const api = new ApiClient();

package/src/ui/src/styles/tokens.css

@@ -1,126 +0,0 @@
-:root {
-  /* Colors - Claude-inspired warm light theme */
-  --color-bg-primary: #F9F7F3;
-  --color-bg-secondary: #FFFFFF;
-  --color-bg-tertiary: #F0EDE6;
-  --color-bg-elevated: #FFFFFF;
-
-  --color-accent-primary: #C4682A;
-  --color-accent-secondary: #B05C26;
-  --color-accent-success: #2D7D4F;
-  --color-accent-warning: #B8862E;
-  --color-accent-error: #C4453A;
-
-  --color-text-primary: #1B1B18;
-  --color-text-secondary: #6B6B64;
-  --color-text-tertiary: #9B9B94;
-
-  --color-border: #E3DFD7;
-  --color-border-hover: #C4682A;
-
-  /* Typography */
-  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.8125rem;
-  --font-size-base: 0.9375rem;
-  --font-size-lg: 1.0625rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 2rem;
-
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  /* Spacing */
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-8: 2rem;
-  --spacing-10: 2.5rem;
-  --spacing-12: 3rem;
-
-  /* Border radius */
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-2xl: 1.25rem;
-  --radius-full: 9999px;
-
-  /* Shadows - soft and subtle */
-  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
-  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
-  --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.08), 0 4px 12px -4px rgba(0, 0, 0, 0.04);
-
-  /* Transitions */
-  --transition-fast: 150ms ease;
-  --transition-base: 200ms ease;
-  --transition-slow: 300ms ease;
-
-  /* Z-index */
-  --z-dropdown: 1000;
-  --z-sticky: 1020;
-  --z-modal: 1050;
-  --z-tooltip: 1080;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: var(--font-family);
-  background: var(--color-bg-primary);
-  color: var(--color-text-primary);
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-#root {
-  min-height: 100vh;
-}
-
-/* Scrollbar styling */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: var(--radius-full);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-tertiary);
-}
-
-/* Utility classes */
-.text-xs { font-size: var(--font-size-xs); }
-.text-sm { font-size: var(--font-size-sm); }
-.text-base { font-size: var(--font-size-base); }
-.text-lg { font-size: var(--font-size-lg); }
-.text-xl { font-size: var(--font-size-xl); }
-.text-2xl { font-size: var(--font-size-2xl); }
-.text-3xl { font-size: var(--font-size-3xl); }
-
-.font-normal { font-weight: var(--font-weight-normal); }
-.font-medium { font-weight: var(--font-weight-medium); }
-.font-semibold { font-weight: var(--font-weight-semibold); }
-.font-bold { font-weight: var(--font-weight-bold); }
-
-.transition { transition: all var(--transition-base); }

package/src/ui/src/types.ts

@@ -1,34 +0,0 @@
-export type Interaction = {
-    id: number;
-    timestamp: string;
-    method: string;
-    path: string;
-    body?: any;
-    screenshot?: string;
-    source?: string;
-    elementInfo?: {
-        using: string;
-        value: string;
-    };
-};
-
-export type ParsedElement = {
-    type: string;
-    name: string;
-    label: string;
-    value: string;
-    enabled: boolean;
-    visible: boolean;
-    accessible: boolean;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    xpath: string;
-    node: Element;
-};
-
-export type Locator = {
-    strategy: string;
-    value: string;
-};