x-ipe 1.0.24__py3-none-any.whl → 1.0.25__py3-none-any.whl

x_ipe/static/css/tracing-dashboard.css

@@ -0,0 +1,796 @@
+/**
+ * FEATURE-023-B: Tracing Dashboard UI Styles
+ * Matches mockup tracing-dashboard-v4.html
+ */
+
+/* Color variables - matching mockup */
+:root {
+    --tracing-bg-primary: #ffffff;
+    --tracing-bg-secondary: #f8fafc;
+    --tracing-bg-tertiary: #f1f5f9;
+    --tracing-bg-hover: #e2e8f0;
+    
+    --tracing-text-primary: #0f172a;
+    --tracing-text-secondary: #475569;
+    --tracing-text-muted: #94a3b8;
+    
+    --tracing-status-success: #10b981;
+    --tracing-status-success-light: #d1fae5;
+    --tracing-status-error: #ef4444;
+    --tracing-status-error-light: #fee2e2;
+    --tracing-status-warning: #f59e0b;
+    --tracing-status-warning-light: #fef3c7;
+    --tracing-status-processing: #3b82f6;
+    --tracing-status-processing-light: #dbeafe;
+    
+    --tracing-accent-primary: #6366f1;
+    --tracing-accent-light: #e0e7ff;
+    
+    --tracing-border-subtle: #e2e8f0;
+    --tracing-border-default: #cbd5e1;
+    
+    --tracing-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --tracing-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+/* Main container */
+.tracing-dashboard {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--tracing-bg-secondary);
+    color: var(--tracing-text-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* ===== HEADER ===== */
+.tracing-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    height: 56px;
+    background: var(--tracing-bg-primary);
+    border-bottom: 1px solid var(--tracing-border-subtle);
+    flex-shrink: 0;
+}
+
+.tracing-header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.tracing-header h2 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--tracing-text-primary);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.tracing-header-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+/* Tracing Control Group */
+.tracing-control {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.tracing-label {
+    font-size: 13px;
+    color: var(--tracing-text-secondary);
+    font-weight: 500;
+}
+
+/* Duration Toggle - Pill style like mockup */
+.duration-toggle {
+    display: flex;
+    background: var(--tracing-bg-tertiary);
+    border-radius: 8px;
+    padding: 3px;
+    gap: 2px;
+}
+
+.duration-option {
+    padding: 6px 12px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--tracing-text-muted);
+    background: none;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.duration-option:hover {
+    color: var(--tracing-text-secondary);
+}
+
+.duration-option.active {
+    background: var(--tracing-accent-primary);
+    color: white;
+    box-shadow: var(--tracing-shadow-sm);
+}
+
+/* Countdown Timer - Matching mockup */
+.countdown-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 14px;
+    background: var(--tracing-status-success-light);
+    border: 1px solid var(--tracing-status-success);
+    border-radius: 8px;
+    transition: all 0.25s;
+}
+
+.countdown-container.inactive {
+    background: var(--tracing-bg-tertiary);
+    border-color: var(--tracing-border-subtle);
+}
+
+.countdown-container.warning {
+    background: var(--tracing-status-warning-light);
+    border-color: var(--tracing-status-warning);
+}
+
+.countdown-icon {
+    width: 16px;
+    height: 16px;
+    color: var(--tracing-status-success);
+    animation: tracing-pulse 2s infinite;
+}
+
+.countdown-container.inactive .countdown-icon {
+    color: var(--tracing-text-muted);
+    animation: none;
+}
+
+.countdown-container.warning .countdown-icon {
+    color: var(--tracing-status-warning);
+    animation: tracing-pulse 1s infinite;
+}
+
+@keyframes tracing-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+.countdown-text {
+    font-family: 'JetBrains Mono', 'Consolas', monospace;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--tracing-status-success);
+    min-width: 50px;
+}
+
+.countdown-container.inactive .countdown-text {
+    color: var(--tracing-text-muted);
+}
+
+.countdown-container.warning .countdown-text {
+    color: var(--tracing-status-warning);
+}
+
+.countdown-label {
+    font-size: 11px;
+    color: var(--tracing-status-success);
+    font-weight: 500;
+}
+
+.countdown-container.inactive .countdown-label {
+    color: var(--tracing-text-muted);
+}
+
+.countdown-container.warning .countdown-label {
+    color: var(--tracing-status-warning);
+}
+
+/* Stop Button */
+.stop-btn {
+    padding: 6px 12px;
+    background: var(--tracing-status-error-light);
+    border: 1px solid var(--tracing-status-error);
+    border-radius: 6px;
+    color: var(--tracing-status-error);
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.stop-btn:hover {
+    background: var(--tracing-status-error);
+    color: white;
+}
+
+.stop-btn.hidden {
+    display: none;
+}
+
+/* Icon Buttons */
+.icon-btn {
+    width: 34px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--tracing-bg-tertiary);
+    border: 1px solid var(--tracing-border-subtle);
+    border-radius: 8px;
+    color: var(--tracing-text-secondary);
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.icon-btn:hover {
+    background: var(--tracing-bg-hover);
+    color: var(--tracing-text-primary);
+    border-color: var(--tracing-border-default);
+}
+
+/* ===== MAIN CONTENT ===== */
+.tracing-content {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
+/* ===== SIDEBAR ===== */
+.trace-list-sidebar {
+    width: 340px;
+    background: var(--tracing-bg-primary);
+    border-right: 1px solid var(--tracing-border-subtle);
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+}
+
+.trace-list-header {
+    padding: 16px;
+    border-bottom: 1px solid var(--tracing-border-subtle);
+}
+
+.trace-list-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--tracing-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 12px;
+}
+
+/* Search Box */
+.trace-search-box {
+    position: relative;
+}
+
+.trace-search-box input {
+    width: 100%;
+    padding: 10px 12px 10px 36px;
+    background: var(--tracing-bg-tertiary);
+    border: 1px solid var(--tracing-border-subtle);
+    border-radius: 8px;
+    color: var(--tracing-text-primary);
+    font-size: 13px;
+    font-family: inherit;
+    transition: all 0.15s;
+}
+
+.trace-search-box input::placeholder {
+    color: var(--tracing-text-muted);
+}
+
+.trace-search-box input:focus {
+    outline: none;
+    border-color: var(--tracing-accent-primary);
+    box-shadow: 0 0 0 3px var(--tracing-accent-light);
+}
+
+.trace-search-box .search-icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 14px;
+    height: 14px;
+    color: var(--tracing-text-muted);
+}
+
+/* Filter Chips */
+.filter-row {
+    display: flex;
+    gap: 8px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--tracing-border-subtle);
+}
+
+.filter-chip {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 5px 10px;
+    background: var(--tracing-bg-primary);
+    border: 1px solid var(--tracing-border-subtle);
+    border-radius: 16px;
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--tracing-text-secondary);
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.filter-chip:hover {
+    background: var(--tracing-bg-tertiary);
+    border-color: var(--tracing-border-default);
+}
+
+.filter-chip.active {
+    background: var(--tracing-accent-light);
+    border-color: var(--tracing-accent-primary);
+    color: var(--tracing-accent-primary);
+}
+
+.filter-chip .dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+}
+
+.filter-chip .dot.success { background: var(--tracing-status-success); }
+.filter-chip .dot.error { background: var(--tracing-status-error); }
+.filter-chip .dot.processing { background: var(--tracing-status-processing); }
+
+/* Trace List */
+.trace-list-items {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px;
+}
+
+.trace-item {
+    padding: 12px 14px;
+    background: var(--tracing-bg-primary);
+    border: 1px solid var(--tracing-border-subtle);
+    border-radius: 10px;
+    margin-bottom: 6px;
+    cursor: pointer;
+    transition: all 0.15s;
+    position: relative;
+}
+
+.trace-item::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    border-radius: 10px 0 0 10px;
+    opacity: 0;
+    transition: opacity 0.15s;
+}
+
+.trace-item.success::before { background: var(--tracing-status-success); }
+.trace-item.error::before { background: var(--tracing-status-error); }
+.trace-item.processing::before { background: var(--tracing-status-processing); }
+
+.trace-item:hover {
+    background: var(--tracing-bg-tertiary);
+    border-color: var(--tracing-border-default);
+}
+
+.trace-item:hover::before,
+.trace-item.selected::before {
+    opacity: 1;
+}
+
+.trace-item.selected {
+    background: var(--tracing-accent-light);
+    border-color: var(--tracing-accent-primary);
+}
+
+/* Trace ID Row */
+.trace-id-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    gap: 6px;
+}
+
+.trace-id {
+    font-family: 'JetBrains Mono', 'Consolas', monospace;
+    font-size: 11px;
+    color: var(--tracing-text-muted);
+    background: var(--tracing-bg-tertiary);
+    padding: 3px 8px;
+    border-radius: 4px;
+}
+
+.trace-block-btn {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--tracing-text-muted);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    margin-left: auto;
+}
+
+.trace-item:hover .trace-block-btn {
+    display: flex;
+}
+
+.trace-block-btn:hover {
+    background: var(--tracing-status-error-light);
+    color: var(--tracing-status-error);
+}
+
+.trace-block-btn i {
+    font-size: 12px;
+}
+
+.trace-status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.trace-status-dot.success { background: var(--tracing-status-success); }
+.trace-status-dot.error { background: var(--tracing-status-error); }
+.trace-status-dot.processing { 
+    background: var(--tracing-status-processing);
+    animation: tracing-pulse 2s infinite;
+}
+
+/* Trace Entry API */
+.trace-entry-api {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 6px;
+}
+
+.method-badge {
+    padding: 2px 6px;
+    background: var(--tracing-bg-tertiary);
+    border-radius: 4px;
+    font-family: 'JetBrains Mono', 'Consolas', monospace;
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--tracing-status-processing);
+}
+
+.method-badge.get { color: var(--tracing-status-processing); }
+.method-badge.post { color: var(--tracing-status-success); }
+.method-badge.put { color: var(--tracing-status-warning); }
+.method-badge.delete { color: var(--tracing-status-error); }
+
+.trace-path {
+    font-family: 'JetBrains Mono', 'Consolas', monospace;
+    font-size: 12px;
+    color: var(--tracing-text-primary);
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.trace-nested {
+    font-size: 11px;
+    color: var(--tracing-text-muted);
+    margin-left: 4px;
+}
+
+/* Trace Meta */
+.trace-meta {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 11px;
+    color: var(--tracing-text-muted);
+}
+
+.trace-meta span {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* ===== DETAIL PANEL ===== */
+.trace-detail-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: var(--tracing-bg-secondary);
+    overflow: hidden;
+}
+
+.trace-detail-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--tracing-text-muted);
+    font-size: 14px;
+    gap: 8px;
+}
+
+.trace-detail-placeholder i {
+    font-size: 48px;
+    opacity: 0.3;
+}
+
+/* Empty state */
+.trace-list-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 20px;
+    text-align: center;
+    color: var(--tracing-text-muted);
+    font-size: 13px;
+}
+
+.trace-list-empty-icon {
+    font-size: 32px;
+    margin-bottom: 12px;
+    opacity: 0.5;
+}
+
+/* ===== MODALS ===== */
+.tracing-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.tracing-modal {
+    background: var(--tracing-bg-primary);
+    border-radius: 12px;
+    box-shadow: var(--tracing-shadow-md);
+    width: 90%;
+    max-width: 480px;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.tracing-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--tracing-border-subtle);
+}
+
+.tracing-modal-header h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.tracing-modal-close {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: var(--tracing-bg-tertiary);
+    border-radius: 6px;
+    font-size: 18px;
+    cursor: pointer;
+    color: var(--tracing-text-secondary);
+}
+
+.tracing-modal-close:hover {
+    background: var(--tracing-bg-hover);
+}
+
+.tracing-modal-body {
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.tracing-modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 16px 20px;
+    border-top: 1px solid var(--tracing-border-subtle);
+}
+
+/* Form elements */
+.tracing-form-group {
+    margin-bottom: 16px;
+}
+
+.tracing-form-group label {
+    display: block;
+    margin-bottom: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--tracing-text-secondary);
+}
+
+.tracing-form-group input,
+.tracing-form-group select {
+    width: 100%;
+    padding: 10px 12px;
+    font-size: 13px;
+    border: 1px solid var(--tracing-border-subtle);
+    border-radius: 8px;
+    background: var(--tracing-bg-primary);
+    color: var(--tracing-text-primary);
+    font-family: inherit;
+}
+
+.tracing-form-group input:focus,
+.tracing-form-group select:focus {
+    outline: none;
+    border-color: var(--tracing-accent-primary);
+    box-shadow: 0 0 0 3px var(--tracing-accent-light);
+}
+
+/* Buttons */
+.btn-primary {
+    padding: 8px 16px;
+    font-size: 13px;
+    font-weight: 500;
+    border: none;
+    border-radius: 8px;
+    background: var(--tracing-accent-primary);
+    color: white;
+    cursor: pointer;
+    transition: background 0.15s;
+}
+
+.btn-primary:hover {
+    background: #4f46e5;
+}
+
+.btn-secondary {
+    padding: 8px 16px;
+    font-size: 13px;
+    font-weight: 500;
+    border: 1px solid var(--tracing-border-subtle);
+    border-radius: 8px;
+    background: var(--tracing-bg-primary);
+    color: var(--tracing-text-secondary);
+    cursor: pointer;
+}
+
+.btn-secondary:hover {
+    background: var(--tracing-bg-tertiary);
+}
+
+/* Ignored APIs list */
+.ignored-apis-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.ignored-api-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px;
+    background: var(--tracing-bg-tertiary);
+    border-radius: 8px;
+    font-family: 'JetBrains Mono', 'Consolas', monospace;
+    font-size: 12px;
+}
+
+.ignored-api-item button {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: var(--tracing-status-error);
+    cursor: pointer;
+    font-size: 16px;
+    border-radius: 4px;
+}
+
+.ignored-api-item button:hover {
+    background: var(--tracing-status-error-light);
+}
+
+.add-ignored-api {
+    display: flex;
+    gap: 8px;
+    margin-top: 12px;
+}
+
+.add-ignored-api input {
+    flex: 1;
+}
+
+/* Toast notification */
+.tracing-toast {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 12px 20px;
+    border-radius: 8px;
+    color: white;
+    font-size: 13px;
+    font-weight: 500;
+    z-index: 1100;
+    animation: slideIn 0.3s ease;
+    box-shadow: var(--tracing-shadow-md);
+}
+
+.tracing-toast.success {
+    background: var(--tracing-status-success);
+}
+
+.tracing-toast.error {
+    background: var(--tracing-status-error);
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* ==========================================================================
+   FEATURE-023-C: DAG Graph Visualization
+   ========================================================================== */
+
+.trace-graph-container {
+    width: 100%;
+    height: 100%;
+    min-height: 350px;
+    position: relative;
+    background: #ffffff;
+    border-radius: 8px;
+}
+
+/* Zoom controls positioning */
+.trace-detail-panel {
+    position: relative;
+}
+
+.trace-detail-panel .trace-graph-zoom-controls {
+    position: absolute;
+    bottom: 16px;
+    right: 16px;
+    z-index: 100;
+}