Replace custom log entry rendering (MonoText, Badge, per-entry HTML) with the LogViewer composite component. Map mock data to LogEntry interface, remove formatLogTime helper, and clean up unused CSS classes and imports (Card, CodeBlock, ProgressBar, sectionHeaderRow, sectionTitle, fdRow). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
165 lines
2.9 KiB
CSS
165 lines
2.9 KiB
CSS
.content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 20px 24px 40px;
|
|
min-width: 0;
|
|
background: var(--bg-body);
|
|
}
|
|
|
|
.notFound {
|
|
padding: 60px;
|
|
text-align: center;
|
|
color: var(--text-faint);
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Stat strip — 5 columns matching /agents */
|
|
.statStrip {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 10px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* Scope trail — matches /agents */
|
|
.scopeTrail {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.scopeLink {
|
|
color: var(--amber);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.scopeLink:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.scopeSep {
|
|
color: var(--text-muted);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.scopeCurrent {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* Charts 3x2 grid */
|
|
.chartsGrid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.chartCard {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-card);
|
|
padding: 16px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chartHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.chartTitle {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.chartMeta {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* Process info card */
|
|
.processCard {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-card);
|
|
padding: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.processGrid {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto 1fr;
|
|
gap: 6px 16px;
|
|
font-size: 12px;
|
|
font-family: var(--font-body);
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.processLabel {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Log + Timeline side by side */
|
|
.bottomRow {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
}
|
|
|
|
/* Log viewer */
|
|
.logCard {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-card);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.logHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
/* Empty state (shared) */
|
|
.logEmpty {
|
|
padding: 24px;
|
|
text-align: center;
|
|
color: var(--text-faint);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Timeline card */
|
|
.timelineCard {
|
|
background: var(--bg-surface);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-card);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 420px;
|
|
}
|
|
|
|
.timelineHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|