appium-session-recorder 0.0.1 → 0.0.3

package/src/ui/package.json

@@ -1,20 +0,0 @@
-{
-    "name": "appium-recorder-ui",
-    "version": "2.0.0",
-    "private": true,
-    "type": "module",
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "preview": "vite preview"
-    },
-    "dependencies": {
-        "@kobalte/core": "^0.13.11",
-        "solid-js": "^1.9.11"
-    },
-    "devDependencies": {
-        "typescript": "^5.9.3",
-        "vite": "^6.3.5",
-        "vite-plugin-solid": "^2.11.10"
-    }
-}

package/src/ui/src/App.css

@@ -1,12 +0,0 @@
-.app {
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    background: var(--color-bg-primary);
-    overflow: hidden;
-}
-
-.app-main {
-    flex: 1;
-    overflow: hidden;
-}

package/src/ui/src/App.tsx

@@ -1,41 +0,0 @@
-import { type Component, createSignal, createMemo, createEffect } from 'solid-js';
-import { useInteractions } from './hooks/useInteractions';
-import { ActionCarousel } from './components/ActionCarousel';
-import { MainInspector } from './components/MainInspector';
-import './App.css';
-
-const App: Component = () => {
-    const { interactions } = useInteractions();
-    const [currentIndex, setCurrentIndex] = createSignal(0);
-
-    // Filter to only actions (interactions with screenshots)
-    const actions = createMemo(() =>
-        interactions().filter(i => i.screenshot)
-    );
-
-    // Get the current action
-    const currentAction = createMemo(() => actions()[currentIndex()]);
-
-    // Auto-select the latest action when new ones are added
-    createEffect(() => {
-        const actionsCount = actions().length;
-        if (actionsCount > 0) {
-            setCurrentIndex(actionsCount - 1);
-        }
-    });
-
-    return (
-        <div class="app">
-            <ActionCarousel
-                interactions={interactions()}
-                currentIndex={currentIndex()}
-                onNavigate={setCurrentIndex}
-            />
-            <main class="app-main">
-                <MainInspector interaction={currentAction()} />
-            </main>
-        </div>
-    );
-};
-
-export default App;

package/src/ui/src/components/ActionCarousel.css

@@ -1,128 +0,0 @@
-.carousel {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-4);
-    padding: var(--spacing-3) var(--spacing-6);
-    background: var(--color-bg-secondary);
-    border-bottom: 1px solid var(--color-border);
-}
-
-.carousel-empty {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacing-3);
-    color: var(--color-text-tertiary);
-    font-size: var(--font-size-sm);
-    padding: var(--spacing-2) 0;
-}
-
-.carousel-empty-icon {
-    font-size: var(--font-size-lg);
-}
-
-.carousel-btn {
-    background: var(--color-bg-secondary);
-    color: var(--color-text-secondary);
-    border: 1px solid var(--color-border);
-    padding: var(--spacing-2) var(--spacing-4);
-    border-radius: var(--radius-lg);
-    cursor: pointer;
-    font-weight: var(--font-weight-medium);
-    font-size: var(--font-size-sm);
-    transition: all var(--transition-fast);
-    white-space: nowrap;
-}
-
-.carousel-btn:hover:not(:disabled) {
-    background: var(--color-accent-primary);
-    color: white;
-    border-color: var(--color-accent-primary);
-}
-
-.carousel-btn:disabled {
-    opacity: 0.35;
-    cursor: not-allowed;
-}
-
-.carousel-info {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-1);
-}
-
-.carousel-counter {
-    font-size: var(--font-size-xs);
-    color: var(--color-text-tertiary);
-    font-weight: var(--font-weight-medium);
-    letter-spacing: 0.02em;
-}
-
-.carousel-details {
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-3);
-    flex-wrap: wrap;
-    justify-content: center;
-}
-
-.carousel-id {
-    font-size: var(--font-size-xs);
-    color: var(--color-text-tertiary);
-    font-weight: var(--font-weight-medium);
-}
-
-.carousel-method {
-    font-size: var(--font-size-xs);
-    font-weight: var(--font-weight-semibold);
-    padding: 2px var(--spacing-2);
-    border-radius: var(--radius-sm);
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-}
-
-.carousel-method.POST {
-    background: #E8F5EE;
-    color: var(--color-accent-success);
-}
-
-.carousel-method.GET {
-    background: #FFF3E0;
-    color: var(--color-accent-warning);
-}
-
-.carousel-method.DELETE {
-    background: #FDECEB;
-    color: var(--color-accent-error);
-}
-
-.carousel-path {
-    font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
-    max-width: 400px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.carousel-time {
-    font-size: var(--font-size-xs);
-    color: var(--color-text-tertiary);
-}
-
-.carousel-element {
-    font-size: var(--font-size-xs);
-    color: var(--color-text-secondary);
-}
-
-.carousel-element-using {
-    color: var(--color-accent-secondary);
-    font-weight: var(--font-weight-medium);
-}
-
-.carousel-element-value {
-    color: var(--color-accent-primary);
-}

package/src/ui/src/components/ActionCarousel.tsx

@@ -1,92 +0,0 @@
-import { type Component, Show, createMemo } from 'solid-js';
-import type { Interaction } from '../types';
-import './ActionCarousel.css';
-
-type ActionCarouselProps = {
-    interactions: Interaction[];
-    currentIndex: number;
-    onNavigate: (index: number) => void;
-};
-
-export const ActionCarousel: Component<ActionCarouselProps> = (props) => {
-    const actions = createMemo(() =>
-        props.interactions.filter(i => i.screenshot)
-    );
-
-    const currentAction = createMemo(() => actions()[props.currentIndex]);
-    const total = createMemo(() => actions().length);
-
-    const goToPrevious = () => {
-        if (props.currentIndex > 0) {
-            props.onNavigate(props.currentIndex - 1);
-        }
-    };
-
-    const goToNext = () => {
-        if (props.currentIndex < total() - 1) {
-            props.onNavigate(props.currentIndex + 1);
-        }
-    };
-
-    const formattedTime = () => {
-        const action = currentAction();
-        return action ? new Date(action.timestamp).toLocaleTimeString() : '';
-    };
-
-    return (
-        <div class="carousel">
-            <Show
-                when={total() > 0}
-                fallback={
-                    <div class="carousel-empty">
-                        <span class="carousel-empty-icon">📱</span>
-                        <span>No actions recorded yet. Connect Appium Inspector to port 4724 and start interacting.</span>
-                    </div>
-                }
-            >
-                <button
-                    class="carousel-btn"
-                    onClick={goToPrevious}
-                    disabled={props.currentIndex === 0}
-                >
-                    ← Previous
-                </button>
-
-                <div class="carousel-info">
-                    <div class="carousel-counter">
-                        Action {props.currentIndex + 1} of {total()}
-                    </div>
-                    <Show when={currentAction()}>
-                        <div class="carousel-details">
-                            <span class="carousel-id">#{currentAction()!.id}</span>
-                            <span classList={{
-                                'carousel-method': true,
-                                [currentAction()!.method]: true
-                            }}>
-                                {currentAction()!.method}
-                            </span>
-                            <span class="carousel-path">{currentAction()!.path}</span>
-                            <span class="carousel-time">{formattedTime()}</span>
-                        </div>
-                        <Show when={currentAction()!.elementInfo}>
-                            <div class="carousel-element">
-                                <span class="carousel-element-using">{currentAction()!.elementInfo!.using}:</span>
-                                {' "'}
-                                <span class="carousel-element-value">{currentAction()!.elementInfo!.value}</span>
-                                {'"'}
-                            </div>
-                        </Show>
-                    </Show>
-                </div>
-
-                <button
-                    class="carousel-btn"
-                    onClick={goToNext}
-                    disabled={props.currentIndex === total() - 1}
-                >
-                    Next →
-                </button>
-            </Show>
-        </div>
-    );
-};

package/src/ui/src/components/Inspector.css

@@ -1,314 +0,0 @@
-.inspector-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(4px);
-    z-index: var(--z-modal);
-    animation: fadeIn var(--transition-base);
-}
-
-.inspector-modal {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: var(--color-bg-primary);
-    border-radius: var(--radius-2xl);
-    padding: var(--spacing-6);
-    width: 90vw;
-    max-width: 1400px;
-    max-height: 90vh;
-    overflow: hidden;
-    z-index: var(--z-modal);
-    box-shadow: var(--shadow-lg);
-    border: 1px solid var(--color-border);
-    animation: slideIn var(--transition-base);
-}
-
-.inspector-close {
-    position: absolute;
-    top: var(--spacing-4);
-    right: var(--spacing-4);
-    background: var(--color-bg-tertiary);
-    border: 1px solid var(--color-border);
-    width: 36px;
-    height: 36px;
-    border-radius: var(--radius-full);
-    font-size: var(--font-size-base);
-    cursor: pointer;
-    color: var(--color-text-secondary);
-    transition: all var(--transition-fast);
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.inspector-close:hover {
-    background: var(--color-accent-error);
-    border-color: var(--color-accent-error);
-    color: white;
-}
-
-.inspector-panel {
-    display: flex;
-    gap: var(--spacing-6);
-    height: 100%;
-}
-
-.inspector-left {
-    flex-shrink: 0;
-}
-
-.inspector-screenshot {
-    max-height: 80vh;
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow-md);
-    border: 1px solid var(--color-border);
-}
-
-.inspector-right {
-    flex: 1;
-    overflow-y: auto;
-    padding-right: var(--spacing-2);
-    max-height: calc(90vh - var(--spacing-12));
-}
-
-.inspector-section {
-    background: var(--color-bg-secondary);
-    border-radius: var(--radius-xl);
-    padding: var(--spacing-5);
-    margin-bottom: var(--spacing-3);
-    border: 1px solid var(--color-border);
-}
-
-.inspector-section h3 {
-    color: var(--color-text-primary);
-    font-size: var(--font-size-sm);
-    margin-bottom: var(--spacing-3);
-    font-weight: var(--font-weight-semibold);
-}
-
-.query-tester {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-3);
-}
-
-.query-row {
-    display: flex;
-    gap: var(--spacing-2);
-}
-
-.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: 150px;
-}
-
-.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);
-}
-
-.query-result.success {
-    background: #E8F5EE;
-    color: var(--color-accent-success);
-}
-
-.element-details {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-2);
-}
-
-.element-attr {
-    display: flex;
-    gap: var(--spacing-4);
-    font-size: var(--font-size-sm);
-}
-
-.attr-name {
-    color: var(--color-text-tertiary);
-    min-width: 90px;
-    font-weight: var(--font-weight-medium);
-}
-
-.attr-value {
-    color: var(--color-text-primary);
-}
-
-.locators-list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-1);
-}
-
-.locator-row {
-    display: flex;
-    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);
-    border: 1px solid transparent;
-}
-
-.locator-row:hover {
-    background: var(--color-bg-tertiary);
-    border-color: var(--color-border);
-}
-
-.locator-strategy {
-    color: var(--color-accent-primary);
-    font-size: var(--font-size-xs);
-    min-width: 140px;
-    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);
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-@keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translate(-50%, -48%);
-    }
-    to {
-        opacity: 1;
-        transform: translate(-50%, -50%);
-    }
-}
-
-.element-item {
-    display: flex;
-    gap: var(--spacing-3);
-    padding: var(--spacing-2) var(--spacing-3);
-    background: var(--color-bg-primary);
-    border-radius: var(--radius-sm);
-    cursor: pointer;
-    transition: all var(--transition-fast);
-    font-size: var(--font-size-xs);
-    border: 1px solid transparent;
-}
-
-.element-item:hover {
-    background: var(--color-bg-tertiary);
-    border-color: var(--color-border);
-}
-
-.element-item.selected {
-    background: var(--color-accent-primary);
-    color: white;
-    border-color: var(--color-accent-primary);
-}
-
-.element-item.selected .element-type {
-    color: white;
-}
-
-.element-type {
-    color: var(--color-accent-primary);
-    font-weight: var(--font-weight-medium);
-    min-width: 100px;
-}
-
-.element-name {
-    color: var(--color-text-secondary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.element-item.selected .element-name {
-    color: rgba(255, 255, 255, 0.85);
-}
-
-.elements-more {
-    padding: var(--spacing-2);
-    color: var(--color-text-tertiary);
-    font-size: var(--font-size-xs);
-    text-align: center;
-}
-
-/* XML Source */
-.source-toggle-btn {
-    background: var(--color-bg-tertiary);
-    color: var(--color-text-secondary);
-    border: 1px solid var(--color-border);
-    padding: var(--spacing-2) var(--spacing-4);
-    border-radius: var(--radius-lg);
-    cursor: pointer;
-    font-size: var(--font-size-sm);
-    transition: all var(--transition-fast);
-    margin-bottom: var(--spacing-3);
-}
-
-.source-toggle-btn:hover {
-    background: var(--color-border);
-    color: var(--color-text-primary);
-}
-
-.xml-source {
-    background: var(--color-bg-primary);
-    padding: var(--spacing-4);
-    border-radius: var(--radius-lg);
-    font-size: var(--font-size-xs);
-    font-family: var(--font-mono);
-    max-height: 300px;
-    overflow: auto;
-    white-space: pre-wrap;
-    word-break: break-all;
-    color: var(--color-text-secondary);
-    border: 1px solid var(--color-border);
-    line-height: 1.7;
-}