appium-session-recorder 0.0.2 → 0.0.4

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

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

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

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

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