diff --git a/autobot-frontend/src/components/analytics/CodebaseAnalytics.vue b/autobot-frontend/src/components/analytics/CodebaseAnalytics.vue index 2ed702484..510e2f1cb 100644 --- a/autobot-frontend/src/components/analytics/CodebaseAnalytics.vue +++ b/autobot-frontend/src/components/analytics/CodebaseAnalytics.vue @@ -3085,8 +3085,6 @@ const declarationsForPanel = computed(() => overflow-x: hidden; } -/* analytics-header CSS moved to AnalyticsHeaderControls (#1579) */ - /* Project Header Card (#1713) */ .project-header-card { background: var(--bg-card); @@ -3125,9 +3123,7 @@ const declarationsForPanel = computed(() => .project-meta-item.status-syncing { color: var(--color-warning, #f59e0b); } .project-meta-item.status-error { color: var(--color-error, #ef4444); } -/* header-content, header-controls, path-input CSS moved to AnalyticsHeaderControls (#1579) */ - -.btn-primary, .btn-secondary, .btn-debug { +.btn-primary { padding: 10px 20px; border: none; border-radius: var(--radius-lg); @@ -3137,9 +3133,6 @@ const declarationsForPanel = computed(() => display: flex; align-items: center; gap: 8px; -} - -.btn-primary { background: var(--chart-green); color: var(--text-on-success); } @@ -3149,25 +3142,13 @@ const declarationsForPanel = computed(() => transform: translateY(-1px); } -.btn-secondary { - background: var(--color-primary); - color: var(--text-on-primary); -} - -.btn-secondary:hover:not(:disabled) { - background: var(--color-primary-hover); - transform: translateY(-1px); -} - -.btn-primary:disabled, .btn-secondary:disabled { +.btn-primary:disabled { background: var(--bg-tertiary); color: var(--text-secondary); cursor: not-allowed; transform: none; } -/* btn-cancel, btn-back CSS moved to AnalyticsHeaderControls (#1579) */ - .empty-state-container { padding: var(--spacing-8) var(--spacing-4); display: flex; @@ -3179,200 +3160,12 @@ const declarationsForPanel = computed(() => font-size: var(--text-base); } -/* debug-controls, btn-debug CSS moved to AnalyticsHeaderControls (#1579) */ - -/* Progress container + scan runner CSS moved to AnalyticsProgressSection (#1579) */ - -/* Enhanced Analytics Grid */ -.enhanced-analytics-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 20px; - margin-bottom: 32px; -} - -.card-header-content { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -} - -.card-header-content h3 { - margin: 0; - color: var(--text-primary); - font-size: 1.1em; - font-weight: 600; -} - -.refresh-indicator { - display: flex; - align-items: center; - gap: 6px; - font-size: 0.8em; - color: var(--text-muted); -} - -.refresh-indicator.active { - color: var(--chart-green); -} - -.refresh-indicator .fas { - font-size: 0.7em; -} - -.refresh-btn { - background: var(--bg-tertiary); - border: 1px solid var(--bg-hover); - color: var(--text-secondary); - padding: 6px 8px; - border-radius: 6px; - cursor: pointer; - transition: all 0.2s; -} - -.refresh-btn:hover { - background: var(--bg-hover); - color: var(--text-on-primary); -} - -/* Issue #609: Section Export Buttons */ -.section-export-buttons { - display: inline-flex; - gap: 4px; - margin-left: 10px; -} - -.export-btn { - background: var(--bg-secondary); - border: 1px solid var(--bg-tertiary); - color: var(--text-muted); - padding: 4px 8px; - border-radius: 4px; - font-size: 0.75rem; - cursor: pointer; - transition: all 0.2s; - display: inline-flex; - align-items: center; - gap: 4px; -} - -.export-btn:hover { - background: var(--bg-tertiary); - color: var(--color-info); - border-color: var(--color-info); -} - -.export-btn i { - font-size: 0.7rem; -} - -.metrics-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 16px; -} - -.metric-item { - text-align: center; -} - -.metric-label { - font-size: 0.8em; - color: var(--text-muted); - margin-bottom: 4px; -} - -.metric-value { - font-size: 1.4em; - font-weight: 700; - color: var(--text-on-primary); -} - -.metric-value.health-good { color: var(--chart-green); } -.metric-value.health-warning { color: var(--color-warning); } -.metric-value.health-critical { color: var(--color-error); } -.metric-value.health-unknown { color: var(--text-tertiary); } - -.communication-metrics, .performance-details, .quality-details { - display: flex; - flex-direction: column; - gap: 12px; -} - -.pattern-item, .performance-item, .quality-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 0; - border-bottom: 1px solid var(--bg-tertiary); -} - -.pattern-item:last-child, .performance-item:last-child, .quality-item:last-child { - border-bottom: none; -} - -.pattern-label, .performance-label, .quality-label { - color: var(--text-secondary); - font-size: 0.9em; -} - -.pattern-value, .performance-value, .quality-value { - color: var(--text-on-primary); - font-weight: 600; -} - -.quality-score, .performance-gauge { - text-align: center; - margin-bottom: 16px; - padding: 16px; - border-radius: 8px; -} - -.score-value, .gauge-value { - font-size: 2.5em; - font-weight: 700; - margin-bottom: 4px; -} - -.score-label, .gauge-label { - font-size: 0.9em; - color: var(--text-muted); -} - -.quality-high, .efficiency-high { - background: rgba(34, 197, 94, 0.1); - color: var(--chart-green); -} - -.quality-medium, .efficiency-medium { - background: rgba(251, 191, 36, 0.1); - color: var(--color-warning-light); -} - -.quality-low, .efficiency-low { - background: rgba(239, 68, 68, 0.1); - color: var(--color-error); -} - -.btn-link { - background: none; - border: none; - color: var(--chart-blue); - cursor: pointer; - text-decoration: underline; - font-size: 0.9em; -} - -.btn-link:hover { - color: var(--color-info-dark); -} - /* Traditional Analytics Section */ .analytics-section { + margin-top: 24px; + padding: 20px; background: var(--bg-secondary); border-radius: 12px; - padding: 24px; border: 1px solid var(--bg-tertiary); } @@ -3443,623 +3236,6 @@ const declarationsForPanel = computed(() => background: var(--chart-indigo-dark); } -.stats-section, .problems-section, .duplicates-section, .declarations-section { - margin-bottom: 32px; -} - -.stats-section h3, .problems-section h3, .duplicates-section h3, .declarations-section h3 { - color: var(--text-primary); - margin-bottom: 16px; - font-size: 1.2em; - font-weight: 600; -} - -.stats-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: 16px; -} - -.stat-value { - font-size: 2em; - font-weight: 700; - color: var(--chart-green); - margin-bottom: 4px; - text-align: center; -} - -.stat-label { - color: var(--text-muted); - font-size: 0.9em; - text-align: center; -} - -.problems-list, .duplicates-list, .declarations-list { - display: flex; - flex-direction: column; - gap: 12px; -} - -.problem-item, .duplicate-item, .declaration-item { - background: var(--bg-card); - border: 1px solid var(--bg-tertiary); - border-radius: 8px; - padding: 16px; - transition: all 0.2s; -} - -.problem-item:hover, .duplicate-item:hover, .declaration-item:hover { - border-color: var(--bg-hover); - transform: translateX(4px); -} - -.problem-item.priority-critical { - border-left: 4px solid var(--color-error-hover); -} - -.problem-item.priority-high { - border-left: 4px solid var(--chart-orange); -} - -.problem-item.priority-medium { - border-left: 4px solid var(--color-warning-dark); -} - -.problem-item.priority-low { - border-left: 4px solid var(--color-success-dark); -} - -.problem-header, .duplicate-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 8px; -} - -.problem-type, .duplicate-similarity { - font-weight: 600; - color: var(--text-on-primary); -} - -.problem-severity, .duplicate-lines { - font-size: 0.8em; - font-weight: 600; - padding: 2px 8px; - border-radius: 4px; - background: rgba(0, 0, 0, 0.3); -} - -.problem-description, .problem-file, .problem-suggestion { - margin-bottom: 4px; - font-size: 0.9em; -} - -.problem-description { - color: var(--text-secondary); -} - -.problem-file { - color: var(--text-muted); - font-family: 'JetBrains Mono', monospace; - font-size: 0.8em; -} - -.problem-suggestion { - color: var(--color-warning-light); - font-style: italic; -} - -.duplicate-files { - display: flex; - flex-direction: column; - gap: 4px; - margin-top: 8px; -} - -.duplicate-file { - color: var(--text-muted); - font-family: 'JetBrains Mono', monospace; - font-size: 0.8em; -} - -/* Grouped Problems Section */ -.problems-grouped { - display: flex; - flex-direction: column; - gap: 20px; -} - -.severity-summary { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); - gap: 12px; - margin-bottom: 8px; -} - -.severity-card { - background: var(--bg-card); - border-radius: 8px; - padding: 16px; - text-align: center; - border: 2px solid var(--bg-tertiary); - transition: all 0.2s ease; -} - -.severity-card:hover { - transform: translateY(-2px); -} - -.severity-card.severity-critical { - border-color: var(--color-error-hover); - background: rgba(220, 38, 38, 0.1); -} - -.severity-card.severity-high { - border-color: var(--chart-orange); - background: rgba(234, 88, 12, 0.1); -} - -.severity-card.severity-medium { - border-color: var(--color-warning-dark); - background: rgba(217, 119, 6, 0.1); -} - -.severity-card.severity-low { - border-color: var(--color-success-dark); - background: rgba(5, 150, 105, 0.1); -} - -.severity-count { - font-size: 2em; - font-weight: 700; - color: var(--text-on-primary); - line-height: 1; -} - -.severity-card.severity-critical .severity-count { color: var(--color-error); } -.severity-card.severity-high .severity-count { color: var(--chart-orange); } -.severity-card.severity-medium .severity-count { color: var(--color-warning); } -.severity-card.severity-low .severity-count { color: var(--color-success); } - -.severity-label { - font-size: 0.8em; - color: var(--text-muted); - text-transform: uppercase; - margin-top: 4px; - font-weight: 500; -} - -.problems-by-type { - display: flex; - flex-direction: column; - gap: 8px; -} - -.problem-type-group { - background: var(--bg-secondary); - border-radius: 8px; - border: 1px solid var(--bg-tertiary); - overflow: hidden; -} - -.problem-type-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 16px; - cursor: pointer; - transition: background 0.2s ease; -} - -.problem-type-header:hover { - background: var(--bg-tertiary); -} - -.type-info { - display: flex; - align-items: center; - gap: 10px; -} - -.type-info i { - color: var(--text-tertiary); - font-size: 0.9em; - transition: transform 0.2s ease; -} - -.type-name { - font-weight: 600; - color: var(--text-secondary); -} - -.type-count { - color: var(--text-muted); - font-size: 0.9em; -} - -.type-severity-badges { - display: flex; - gap: 6px; -} - -.badge { - font-size: 0.7em; - padding: 2px 8px; - border-radius: 10px; - font-weight: 600; -} - -.badge-critical { - background: var(--color-error-bg); - color: var(--color-error-light); -} - -.badge-high { - background: var(--color-warning-bg); - color: var(--chart-orange-light); -} - -.badge-medium { - background: var(--color-warning-bg); - color: var(--color-warning-light); -} - -.badge-low { - background: var(--color-success-bg); - color: var(--color-success-light); -} - -.problem-type-items { - padding: 8px 16px 16px; - display: flex; - flex-direction: column; - gap: 8px; - background: var(--bg-card); - border-top: 1px solid var(--bg-tertiary); -} - -.problem-type-items .problem-item { - margin: 0; - padding: 12px; - background: var(--bg-secondary); -} - -.more-problems-note { - text-align: center; - color: var(--text-tertiary); - font-style: italic; - padding: 8px; - font-size: 0.9em; -} - -/* ============================================ - UNIFIED ANALYTICS SECTION STYLES - Consistent formatting across all sections - ============================================ */ - -/* Base Analytics Section */ -.analytics-section { - margin-top: 24px; - padding: 20px; - background: var(--bg-secondary); - border-radius: 12px; - border: 1px solid var(--bg-tertiary); -} - -.analytics-section h3 { - display: flex; - align-items: center; - gap: 12px; - margin: 0 0 16px 0; - color: var(--text-secondary); - font-size: 1.1em; - flex-wrap: wrap; -} - -.analytics-section .total-count { - font-size: 0.85em; - color: var(--text-muted); - font-weight: normal; -} - -/* Section Content Container */ -.section-content { - display: flex; - flex-direction: column; - gap: 16px; -} - -/* Unified Summary Cards */ -.summary-cards { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); - gap: 12px; -} - -.summary-card { - background: var(--bg-card); - border-radius: 8px; - padding: 16px; - text-align: center; - border: 1px solid var(--bg-tertiary); - transition: transform 0.2s ease, border-color 0.2s ease; -} - -.summary-card:hover { - transform: translateY(-2px); -} - -.summary-value { - font-size: 1.8em; - font-weight: 700; - color: var(--text-on-primary); -} - -.summary-label { - font-size: 0.75em; - color: var(--text-muted); - text-transform: uppercase; - margin-top: 4px; -} - -/* Summary Card Variants */ -.summary-card.total { border-color: var(--chart-indigo); } -.summary-card.total .summary-value { color: var(--chart-indigo-light); } -.summary-card.critical { border-color: var(--color-error); } -.summary-card.critical .summary-value { color: var(--color-error); } -.summary-card.high { border-color: var(--chart-orange); } -.summary-card.high .summary-value { color: var(--chart-orange); } -.summary-card.medium { border-color: var(--color-warning); } -.summary-card.medium .summary-value { color: var(--color-warning); } -.summary-card.low { border-color: var(--chart-green); } -.summary-card.low .summary-value { color: var(--chart-green); } -.summary-card.info { border-color: var(--chart-blue); } -.summary-card.info .summary-value { color: var(--chart-blue); } - -/* Declaration Type Variants */ -.summary-card.type-function { border-color: var(--chart-purple); } -.summary-card.type-function .summary-value { color: var(--chart-purple-light); } -.summary-card.type-class { border-color: var(--chart-teal); } -.summary-card.type-class .summary-value { color: var(--chart-teal-light); } -.summary-card.type-method { border-color: var(--chart-pink); } -.summary-card.type-method .summary-value { color: var(--chart-pink-light); } -.summary-card.type-variable { border-color: var(--chart-lime); } -.summary-card.type-variable .summary-value { color: var(--chart-lime-light); } -.summary-card.type-constant { border-color: var(--color-warning); } -.summary-card.type-constant .summary-value { color: var(--color-warning-light); } -.summary-card.type-import { border-color: var(--text-tertiary); } -.summary-card.type-import .summary-value { color: var(--text-muted); } -.summary-card.type-other { border-color: var(--text-tertiary); } -.summary-card.type-other .summary-value { color: var(--text-muted); } - - -/* Panel-specific CSS migrated to panels/ — Issue #1589 */ - -/* Issue #566: Code Intelligence Section Styles */ -.code-intelligence-section h3 { - display: flex; - align-items: center; - gap: 12px; - flex-wrap: wrap; -} - -.code-intelligence-section .section-actions { - display: flex; - gap: 8px; - margin-left: auto; -} - -.code-intelligence-section .action-btn { - padding: 6px 12px; - border: 1px solid var(--border-primary); - border-radius: var(--radius-md); - background: var(--bg-tertiary); - color: var(--text-primary); - font-size: 0.85em; - cursor: pointer; - display: flex; - align-items: center; - gap: 6px; - transition: all 0.15s ease; -} - -.code-intelligence-section .action-btn:hover:not(:disabled) { - background: var(--bg-card); - border-color: var(--color-info-dark); -} - -.code-intelligence-section .action-btn.primary { - background: var(--color-info-dark); - border-color: var(--color-info-dark); - color: white; -} - -.code-intelligence-section .action-btn.primary:hover:not(:disabled) { - background: var(--color-info-hover); -} - -.code-intelligence-section .action-btn:disabled { - opacity: 0.5; - cursor: not-allowed; -} - -/* Code Intelligence Tabs */ -.code-intel-tabs { - margin-top: 16px; -} - -.code-intel-tabs .tabs-header { - display: flex; - gap: 4px; - border-bottom: 1px solid var(--border-primary); - margin-bottom: 16px; -} - -.code-intel-tabs .tab-btn { - padding: 8px 16px; - background: transparent; - border: none; - border-bottom: 2px solid transparent; - color: var(--text-secondary); - cursor: pointer; - display: flex; - align-items: center; - gap: 8px; - font-size: 0.9em; - transition: all 0.15s ease; -} - -.code-intel-tabs .tab-btn:hover { - color: var(--text-primary); -} - -.code-intel-tabs .tab-btn.active { - color: var(--color-info-dark); - border-bottom-color: var(--color-info-dark); -} - -.code-intel-tabs .tab-count { - background: var(--bg-tertiary); - padding: 2px 8px; - border-radius: var(--radius-full); - font-size: 0.8em; -} - -.code-intel-tabs .tab-btn.active .tab-count { - background: rgba(99, 102, 241, 0.2); - color: var(--color-info-dark); -} - -.code-intel-tabs .tabs-content { - min-height: 200px; -} - -/* Issue #1133: Source Registry Styles */ -.source-selector-row { - display: flex; - gap: var(--spacing-2); - align-items: center; - width: 100%; -} - -.source-selector-wrapper { - position: relative; - flex: 2; -} - -.source-select { - width: 100%; - padding: 10px 32px 10px 16px; - background: var(--bg-secondary); - border: 1px solid var(--border-default); - border-radius: var(--radius-lg); - color: var(--text-primary); - font-size: var(--text-sm); - appearance: none; - cursor: pointer; - transition: border-color var(--duration-200); -} - -.source-select:focus { - outline: none; - border-color: var(--color-info); -} - -.select-chevron { - position: absolute; - right: 12px; - top: 50%; - transform: translateY(-50%); - pointer-events: none; - color: var(--text-muted); - font-size: 11px; -} - -.btn-manage-sources { - padding: 10px 16px; - background: var(--bg-secondary); - border: 1px solid var(--border-default); - border-radius: var(--radius-lg); - color: var(--text-primary); - font-size: var(--text-sm); - font-weight: var(--font-medium); - cursor: pointer; - display: flex; - align-items: center; - gap: 6px; - white-space: nowrap; - transition: all var(--duration-200); -} - -.btn-manage-sources:hover { - border-color: var(--color-info); - color: var(--color-info); -} - -.selected-source-bar { - display: flex; - align-items: center; - gap: 10px; - background: rgba(59, 130, 246, 0.08); - border: 1px solid rgba(59, 130, 246, 0.25); - border-radius: var(--radius-lg); - padding: 8px 16px; - width: 100%; - min-width: 0; -} - -.selected-source-bar > i { - color: var(--color-info); - flex-shrink: 0; -} - -.selected-source-name { - font-weight: var(--font-semibold); - font-size: var(--text-sm); - color: var(--text-primary); - white-space: nowrap; -} - -.selected-source-path { - font-size: var(--text-xs); - color: var(--text-muted); - font-family: var(--font-mono, monospace); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex: 1; - min-width: 0; -} - -.selected-source-status { - font-size: var(--text-xs); - font-weight: var(--font-medium); - padding: 2px 8px; - border-radius: var(--radius-full); - text-transform: capitalize; - flex-shrink: 0; - background: var(--bg-tertiary); - color: var(--text-secondary); -} - -.btn-clear-source { - background: none; - border: none; - color: var(--text-muted); - cursor: pointer; - padding: 4px; - border-radius: var(--radius-sm); - display: flex; - align-items: center; - flex-shrink: 0; - font-size: 11px; - transition: color var(--duration-200); -} - -.btn-clear-source:hover { - color: var(--color-error); -} - /* Knowledge Base Opt-in Banner */ .kb-optin-banner { position: fixed; @@ -4143,6 +3319,4 @@ const declarationsForPanel = computed(() => .kb-optin-dismiss:hover { color: var(--text-primary); } - -/* Scan Runner Progress CSS moved to AnalyticsProgressSection (#1579) */