refactor(web-ui): extract shared component primitives
Introduce components.js with barTrack, barRow, barRankList, metricPill, metricStrip, and chartHeader helpers. Migrate dashboard.js and usage.js to use these primitives, replacing 13 families of duplicated CSS (stat-list, fw-bar, token-bar, metric-pill, chart-insight, chart-header, usage-chart-total, etc.) with a unified .am-* namespace. Net: -256 lines. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
William Valentin
+191
-329
@@ -1416,56 +1416,214 @@ tr.expandable:hover .expand-icon::before {
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.stat-list {
|
||||
list-style: none;
|
||||
}
|
||||
/* ============================================================
|
||||
Shared primitives (am-*): bars, pills, chart headers.
|
||||
See modules/components.js for the renderers.
|
||||
============================================================ */
|
||||
|
||||
.stat-list li {
|
||||
/* ── Bars ─────────────────────────────────────────────── */
|
||||
.am-bar-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.am-bar-list li {
|
||||
padding: 0.35rem 0;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.stat-list li:last-child {
|
||||
border-bottom: none;
|
||||
.am-bar-list li:last-child { border-bottom: none; }
|
||||
|
||||
.am-bar-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.stat-list-name {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.stat-list-count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-dim);
|
||||
background: var(--surface-2);
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.stat-list-header {
|
||||
.am-bar-row-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-list-bar-track {
|
||||
height: 3px;
|
||||
background: var(--surface-2);
|
||||
border-radius: 2px;
|
||||
margin-top: 0.3rem;
|
||||
overflow: hidden;
|
||||
.am-bar-row-name {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.stat-list-bar-fill {
|
||||
.am-bar-row-count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.am-bar-track {
|
||||
background: var(--surface-2);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.am-bar-track--xs { height: 3px; border-radius: 2px; }
|
||||
.am-bar-track--sm { height: 4px; border-radius: 2px; }
|
||||
.am-bar-track--md { height: 6px; border-radius: 3px; }
|
||||
.am-bar-track--lg { height: 8px; border-radius: 4px; }
|
||||
|
||||
.am-bar-fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
|
||||
/* Framework / category color modifiers (applied to .am-bar-fill) */
|
||||
.am-bar-fill.fw-openclaw { background: var(--accent); }
|
||||
.am-bar-fill.fw-claude-code { background: var(--success); }
|
||||
.am-bar-fill.fw-opencode { background: var(--purple); }
|
||||
.am-bar-fill.fw-hermes { background: var(--warning); }
|
||||
.am-bar-fill.fw-codex { background: #60a5fa; }
|
||||
.am-bar-fill.fw-gemini { background: #f97316; }
|
||||
.am-bar-fill.fw-copilot { background: #2dd4bf; }
|
||||
.am-bar-fill.fw-unknown { background: var(--text-dim); }
|
||||
.am-bar-fill.model { background: var(--success); }
|
||||
.am-bar-fill.input { background: var(--accent); }
|
||||
.am-bar-fill.output { background: var(--purple); }
|
||||
|
||||
/* ── Pills ────────────────────────────────────────────── */
|
||||
.am-pill-strip {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.am-pill-strip--insights {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.am-pill-strip--insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.am-pill-strip--insights { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.am-pill {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0.85rem;
|
||||
min-width: 130px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.am-pill-label {
|
||||
font-size: 0.68rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.am-pill-value {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
.am-pill-meta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.am-pill.alert .am-pill-value { color: var(--error); }
|
||||
|
||||
/* Variant: chart insight (taller, gradient background) */
|
||||
.am-pill--insight {
|
||||
min-height: 62px;
|
||||
border-color: var(--border-soft);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
|
||||
padding: 0.75rem 0.85rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.am-pill--insight .am-pill-value { font-size: 0.95rem; }
|
||||
|
||||
/* Variant: tight inline total (e.g. usage chart totals) */
|
||||
.am-pill--total {
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
gap: 0.3rem;
|
||||
background: var(--surface-2);
|
||||
border-color: var(--border-soft);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.22rem 0.55rem;
|
||||
min-width: auto;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.am-pill--total .am-pill-label { font-size: 0.6rem; }
|
||||
.am-pill--total .am-pill-value { font-size: 0.8rem; font-weight: normal; }
|
||||
|
||||
/* Variant: latency-range item (centered, borderless) */
|
||||
.am-pill--range {
|
||||
flex: 0 0 auto;
|
||||
min-width: auto;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
.am-pill--range .am-pill-label { font-size: 0.68rem; }
|
||||
.am-pill--range .am-pill-value { font-size: 1rem; font-weight: 600; color: var(--text); }
|
||||
|
||||
/* ── Chart headers ────────────────────────────────────── */
|
||||
.am-chart-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.am-chart-title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.am-chart-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-bright);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.am-chart-subtitle {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.am-chart-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.event-icon {
|
||||
@@ -1592,7 +1750,7 @@ tr.expandable:hover .expand-icon::before {
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.metric-pill-value.bumped {
|
||||
.am-pill-value.bumped {
|
||||
animation: counterBump 400ms ease;
|
||||
}
|
||||
|
||||
@@ -1635,44 +1793,6 @@ tr.expandable:hover .expand-icon::before {
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-bright);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.chart-title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.chart-subtitle {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.chart-header-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.window-selector {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
@@ -1746,50 +1866,6 @@ tr.expandable:hover .expand-icon::before {
|
||||
background: rgba(52, 211, 153, 0.12);
|
||||
}
|
||||
|
||||
.chart-insights {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.chart-insights {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.chart-insights {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-insight-pill {
|
||||
min-height: 62px;
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius);
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
|
||||
padding: 0.75rem 0.85rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.chart-insight-label,
|
||||
.chart-insight-meta {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.chart-insight-pill strong {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
@@ -1869,59 +1945,6 @@ tr.expandable:hover .expand-icon::before {
|
||||
.chart-hover-metric.errors strong { color: #f87171; }
|
||||
.chart-hover-metric.delta strong { color: var(--accent); }
|
||||
|
||||
.fw-bars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.fw-bar-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.fw-bar-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fw-bar-name {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.78rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.fw-bar-count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.fw-bar-track {
|
||||
height: 8px;
|
||||
background: var(--surface-2);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fw-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
|
||||
.fw-bar-fill.openclaw { background: var(--accent); }
|
||||
.fw-bar-fill.claude-code { background: var(--success); }
|
||||
.fw-bar-fill.opencode { background: var(--purple); }
|
||||
.fw-bar-fill.hermes { background: var(--warning); }
|
||||
.fw-bar-fill.codex { background: #60a5fa; }
|
||||
.fw-bar-fill.gemini { background: #f97316; }
|
||||
.fw-bar-fill.copilot { background: #2dd4bf; }
|
||||
.fw-bar-fill.unknown { background: var(--text-dim); }
|
||||
|
||||
.bottom-panels {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 320px;
|
||||
@@ -2017,10 +2040,6 @@ tr.expandable:hover .expand-icon::before {
|
||||
box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.2);
|
||||
}
|
||||
|
||||
.stat-list-bar-fill.model {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
/* ── Framework dots ───────────────────────────────────────── */
|
||||
.fw-dot {
|
||||
display: inline-block;
|
||||
@@ -3122,44 +3141,6 @@ tr.clickable.active-session td:first-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Metrics strip ────────────────────────────────────────── */
|
||||
.metrics-strip {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.metric-pill {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0.85rem;
|
||||
min-width: 130px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.metric-pill-label {
|
||||
font-size: 0.68rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.metric-pill-value {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.metric-pill-alert.alert {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
/* ── Right panel tabs ─────────────────────────────────────── */
|
||||
.right-panel-tabs {
|
||||
display: flex;
|
||||
@@ -3229,47 +3210,6 @@ tr.clickable.active-session td:first-child {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.token-bar-row {
|
||||
display: grid;
|
||||
grid-template-columns: 3.5rem 1fr 3rem;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.token-bar-label {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-dim);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.token-bar-track {
|
||||
height: 6px;
|
||||
background: var(--border);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.token-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.token-bar-fill.input {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.token-bar-fill.output {
|
||||
background: var(--purple, #a78bfa);
|
||||
}
|
||||
|
||||
.token-bar-count {
|
||||
font-size: 0.72rem;
|
||||
font-family: 'Fira Code', monospace;
|
||||
color: var(--text-muted, var(--text-dim));
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.token-cost-display {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -3298,27 +3238,6 @@ tr.clickable.active-session td:first-child {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.latency-range-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.latency-range-label {
|
||||
font-size: 0.68rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.latency-range-val {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
font-family: 'Fira Code', monospace;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.latency-mini-bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
@@ -3640,7 +3559,7 @@ tr.clickable.active-session td:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chart-header-controls {
|
||||
.am-chart-controls {
|
||||
justify-content: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
@@ -3944,15 +3863,6 @@ tr.clickable:focus-visible {
|
||||
.usage-chart-panel { flex: 2 1 400px; }
|
||||
.usage-fw-panel { flex: 1 1 240px; }
|
||||
|
||||
.usage-chart-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.usage-chart-tabs {
|
||||
display: flex;
|
||||
border: 1px solid var(--border);
|
||||
@@ -3976,33 +3886,6 @@ tr.clickable:focus-visible {
|
||||
.usage-chart-tab:hover { color: var(--text-bright); background: var(--surface-2); }
|
||||
.usage-chart-tab.active { color: var(--accent); background: var(--accent-dim); }
|
||||
|
||||
.usage-chart-totals {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.usage-chart-total-pill {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.3rem;
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.22rem 0.55rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.usage-chart-total-label {
|
||||
font-size: 0.6rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.usage-chart-total-pill strong { color: var(--text-bright); }
|
||||
.usage-total-errors { color: var(--error); }
|
||||
|
||||
/* ── Usage Page: Framework Breakdown ─────────────────────── */
|
||||
.usage-fw-row {
|
||||
display: flex;
|
||||
@@ -4056,27 +3939,6 @@ tr.clickable:focus-visible {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.usage-fw-bar-track {
|
||||
height: 4px;
|
||||
background: var(--surface-2);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.usage-fw-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
transition: width 0.4s ease;
|
||||
background: var(--text-dim);
|
||||
}
|
||||
.usage-fw-bar-fill.openclaw { background: var(--accent); }
|
||||
.usage-fw-bar-fill.claude-code { background: var(--success); }
|
||||
.usage-fw-bar-fill.opencode { background: var(--purple); }
|
||||
.usage-fw-bar-fill.hermes { background: var(--warning); }
|
||||
.usage-fw-bar-fill.codex { background: #60a5fa; }
|
||||
.usage-fw-bar-fill.gemini { background: #f97316; }
|
||||
.usage-fw-bar-fill.copilot { background: #2dd4bf; }
|
||||
|
||||
/* ── Run Detail: Prompt Preview ──────────────────────────── */
|
||||
.prompt-preview-section {
|
||||
background: var(--surface);
|
||||
|
||||
Reference in New Issue
Block a user