openclaw-multi-auto 1.3.6 → 1.3.8

package/ui/src/ui/views/usage-styles/usageStyles-part2.ts

@@ -0,0 +1,702 @@
+export const usageStylesPart2 = `
+  .usage-list-item .muted {
+    font-size: 11px;
+  }
+  .usage-error-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .usage-error-row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 8px;
+    align-items: center;
+    font-size: 12px;
+  }
+  .usage-error-date {
+    font-weight: 600;
+  }
+  .usage-error-rate {
+    font-variant-numeric: tabular-nums;
+  }
+  .usage-error-sub {
+    grid-column: 1 / -1;
+    font-size: 11px;
+    color: var(--muted);
+  }
+  .usage-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 8px;
+  }
+  .usage-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 8px;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    font-size: 11px;
+    background: var(--bg);
+    color: var(--text);
+  }
+  .usage-meta-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 12px;
+  }
+  .usage-meta-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 12px;
+  }
+  .usage-meta-item span {
+    color: var(--muted);
+    font-size: 11px;
+  }
+  .usage-insights-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 16px;
+    margin-top: 12px;
+  }
+  .usage-insight-card {
+    padding: 14px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    background: var(--bg-secondary);
+  }
+  .usage-insight-title {
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: 10px;
+  }
+  .usage-insight-subtitle {
+    font-size: 11px;
+    color: var(--muted);
+    margin-top: 6px;
+  }
+  /* ===== CHART TOGGLE ===== */
+  .chart-toggle {
+    display: flex;
+    background: var(--bg);
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid var(--border);
+  }
+  .chart-toggle .toggle-btn {
+    padding: 6px 14px;
+    font-size: 13px;
+    background: transparent;
+    border: none;
+    color: var(--muted);
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+  .chart-toggle .toggle-btn:hover {
+    color: var(--text);
+  }
+  .chart-toggle .toggle-btn.active {
+    background: #ff4d4d;
+    color: white;
+  }
+  .chart-toggle.small .toggle-btn {
+    padding: 4px 8px;
+    font-size: 11px;
+  }
+  .sessions-toggle {
+    border-radius: 4px;
+  }
+  .sessions-toggle .toggle-btn {
+    border-radius: 4px;
+  }
+  .daily-chart-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+    margin-bottom: 6px;
+  }
+
+  /* ===== DAILY BAR CHART ===== */
+  .daily-chart {
+    margin-top: 12px;
+  }
+  .daily-chart-bars {
+    display: flex;
+    align-items: flex-end;
+    height: 200px;
+    gap: 4px;
+    padding: 8px 4px 36px;
+  }
+  .daily-bar-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    justify-content: flex-end;
+    cursor: pointer;
+    position: relative;
+    border-radius: 4px 4px 0 0;
+    transition: background 0.15s;
+    min-width: 0;
+  }
+  .daily-bar-wrapper:hover {
+    background: var(--bg-hover);
+  }
+  .daily-bar-wrapper.selected {
+    background: var(--accent-subtle);
+  }
+  .daily-bar-wrapper.selected .daily-bar {
+    background: var(--accent);
+  }
+  .daily-bar {
+    width: 100%;
+    max-width: var(--bar-max-width, 32px);
+    background: #ff4d4d;
+    border-radius: 3px 3px 0 0;
+    min-height: 2px;
+    transition: all 0.15s;
+    overflow: hidden;
+  }
+  .daily-bar-wrapper:hover .daily-bar {
+    background: #cc3d3d;
+  }
+  .daily-bar-label {
+    position: absolute;
+    bottom: -28px;
+    font-size: 10px;
+    color: var(--muted);
+    white-space: nowrap;
+    text-align: center;
+    transform: rotate(-35deg);
+    transform-origin: top center;
+  }
+  .daily-bar-total {
+    position: absolute;
+    top: -16px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 10px;
+    color: var(--muted);
+    white-space: nowrap;
+  }
+  .daily-bar-tooltip {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 8px 12px;
+    font-size: 12px;
+    white-space: nowrap;
+    z-index: 100;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+  .daily-bar-wrapper:hover .daily-bar-tooltip {
+    opacity: 1;
+  }
+
+  /* ===== COST/TOKEN BREAKDOWN BAR ===== */
+  .cost-breakdown {
+    margin-top: 18px;
+    padding: 16px;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+  }
+  .cost-breakdown-header {
+    font-weight: 600;
+    font-size: 15px;
+    letter-spacing: -0.02em;
+    margin-bottom: 12px;
+    color: var(--text-strong);
+  }
+  .cost-breakdown-bar {
+    height: 28px;
+    background: var(--bg);
+    border-radius: 6px;
+    overflow: hidden;
+    display: flex;
+  }
+  .cost-segment {
+    height: 100%;
+    transition: width 0.3s ease;
+    position: relative;
+  }
+  .cost-segment.output {
+    background: #ef4444;
+  }
+  .cost-segment.input {
+    background: #f59e0b;
+  }
+  .cost-segment.cache-write {
+    background: #10b981;
+  }
+  .cost-segment.cache-read {
+    background: #06b6d4;
+  }
+  .cost-breakdown-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 12px;
+  }
+  .cost-breakdown-total {
+    margin-top: 10px;
+    font-size: 12px;
+    color: var(--muted);
+  }
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text);
+    cursor: help;
+  }
+  .legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+  .legend-dot.output {
+    background: #ef4444;
+  }
+  .legend-dot.input {
+    background: #f59e0b;
+  }
+  .legend-dot.cache-write {
+    background: #10b981;
+  }
+  .legend-dot.cache-read {
+    background: #06b6d4;
+  }
+  .legend-dot.system {
+    background: #ff4d4d;
+  }
+  .legend-dot.skills {
+    background: #8b5cf6;
+  }
+  .legend-dot.tools {
+    background: #ec4899;
+  }
+  .legend-dot.files {
+    background: #f59e0b;
+  }
+  .cost-breakdown-note {
+    margin-top: 10px;
+    font-size: 11px;
+    color: var(--muted);
+    line-height: 1.4;
+  }
+
+  /* ===== SESSION BARS (scrollable list) ===== */
+  .session-bars {
+    margin-top: 16px;
+    max-height: 400px;
+    overflow-y: auto;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--bg);
+  }
+  .session-bar-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border);
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+  .session-bar-row:last-child {
+    border-bottom: none;
+  }
+  .session-bar-row:hover {
+    background: var(--bg-hover);
+  }
+  .session-bar-row.selected {
+    background: var(--accent-subtle);
+  }
+  .session-bar-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: 13px;
+    color: var(--text);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .session-bar-title {
+    /* Prefer showing the full name; wrap instead of truncating. */
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+  .session-bar-meta {
+    font-size: 10px;
+    color: var(--muted);
+    font-weight: 400;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .session-bar-track {
+    flex: 0 0 90px;
+    height: 6px;
+    background: var(--bg-secondary);
+    border-radius: 4px;
+    overflow: hidden;
+    opacity: 0.6;
+  }
+  .session-bar-fill {
+    height: 100%;
+    background: rgba(255, 77, 77, 0.7);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+  }
+  .session-bar-value {
+    flex: 0 0 70px;
+    text-align: right;
+    font-size: 12px;
+    font-family: var(--font-mono);
+    color: var(--muted);
+  }
+  .session-bar-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    flex: 0 0 auto;
+  }
+  .session-copy-btn {
+    height: 26px;
+    padding: 0 10px;
+    border-radius: 999px;
+    border: 1px solid var(--border);
+    background: var(--bg-secondary);
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--muted);
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
+  }
+  .session-copy-btn:hover {
+    background: var(--bg);
+    border-color: var(--border-strong);
+    color: var(--text);
+  }
+
+  /* ===== TIME SERIES CHART ===== */
+  .session-timeseries {
+    margin-top: 24px;
+    padding: 16px;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+  }
+  .timeseries-header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+  .timeseries-controls {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+  }
+  .timeseries-header {
+    font-weight: 600;
+    color: var(--text);
+  }
+  .timeseries-chart {
+    width: 100%;
+    overflow: hidden;
+  }
+  .timeseries-svg {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+  .timeseries-svg .axis-label {
+    font-size: 10px;
+    fill: var(--muted);
+  }
+  .timeseries-svg .ts-area {
+    fill: #ff4d4d;
+    fill-opacity: 0.1;
+  }
+  .timeseries-svg .ts-line {
+    fill: none;
+    stroke: #ff4d4d;
+    stroke-width: 2;
+  }
+  .timeseries-svg .ts-dot {
+    fill: #ff4d4d;
+    transition: r 0.15s, fill 0.15s;
+  }
+  .timeseries-svg .ts-dot:hover {
+    r: 5;
+  }
+  .timeseries-svg .ts-bar {
+    fill: #ff4d4d;
+    transition: fill 0.15s;
+  }
+  .timeseries-svg .ts-bar:hover {
+    fill: #cc3d3d;
+  }
+  .timeseries-svg .ts-bar.output { fill: #ef4444; }
+  .timeseries-svg .ts-bar.input { fill: #f59e0b; }
+  .timeseries-svg .ts-bar.cache-write { fill: #10b981; }
+  .timeseries-svg .ts-bar.cache-read { fill: #06b6d4; }
+  .timeseries-summary {
+    margin-top: 12px;
+    font-size: 13px;
+    color: var(--muted);
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .timeseries-loading {
+    padding: 24px;
+    text-align: center;
+    color: var(--muted);
+  }
+
+  /* ===== SESSION LOGS ===== */
+  .session-logs {
+    margin-top: 24px;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .session-logs-header {
+    padding: 10px 14px;
+    font-weight: 600;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 13px;
+    background: var(--bg-secondary);
+  }
+  .session-logs-loading {
+    padding: 24px;
+    text-align: center;
+    color: var(--muted);
+  }
+  .session-logs-list {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+  .session-log-entry {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    background: var(--bg);
+  }
+  .session-log-entry:last-child {
+    border-bottom: none;
+  }
+  .session-log-entry.user {
+    border-left: 3px solid var(--accent);
+  }
+  .session-log-entry.assistant {
+    border-left: 3px solid var(--border-strong);
+  }
+  .session-log-meta {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    font-size: 11px;
+    color: var(--muted);
+    flex-wrap: wrap;
+  }
+  .session-log-role {
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-size: 10px;
+    padding: 2px 6px;
+    border-radius: 999px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+  }
+  .session-log-entry.user .session-log-role {
+    color: var(--accent);
+  }
+  .session-log-entry.assistant .session-log-role {
+    color: var(--muted);
+  }
+  .session-log-content {
+    font-size: 13px;
+    line-height: 1.5;
+    color: var(--text);
+    white-space: pre-wrap;
+    word-break: break-word;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    padding: 8px 10px;
+    border: 1px solid var(--border);
+    max-height: 220px;
+    overflow-y: auto;
+  }
+
+  /* ===== CONTEXT WEIGHT BREAKDOWN ===== */
+  .context-weight-breakdown {
+    margin-top: 24px;
+    padding: 16px;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+  }
+  .context-weight-breakdown .context-weight-header {
+    font-weight: 600;
+    font-size: 13px;
+    margin-bottom: 4px;
+    color: var(--text);
+  }
+  .context-weight-desc {
+    font-size: 12px;
+    color: var(--muted);
+    margin: 0 0 12px 0;
+  }
+  .context-stacked-bar {
+    height: 24px;
+    background: var(--bg);
+    border-radius: 6px;
+    overflow: hidden;
+    display: flex;
+  }
+  .context-segment {
+    height: 100%;
+    transition: width 0.3s ease;
+  }
+  .context-segment.system {
+    background: #ff4d4d;
+  }
+  .context-segment.skills {
+    background: #8b5cf6;
+  }
+  .context-segment.tools {
+    background: #ec4899;
+  }
+  .context-segment.files {
+    background: #f59e0b;
+  }
+  .context-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 12px;
+  }
+  .context-total {
+    margin-top: 10px;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--muted);
+  }
+  .context-details {
+    margin-top: 12px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    overflow: hidden;
+  }
+  .context-details summary {
+    padding: 10px 14px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    background: var(--bg);
+    border-bottom: 1px solid var(--border);
+  }
+  .context-details[open] summary {
+    border-bottom: 1px solid var(--border);
+  }
+  .context-list {
+    max-height: 200px;
+    overflow-y: auto;
+  }
+  .context-list-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 14px;
+    font-size: 11px;
+    text-transform: uppercase;
+    color: var(--muted);
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border);
+  }
+  .context-list-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 14px;
+    font-size: 12px;
+    border-bottom: 1px solid var(--border);
+  }
+  .context-list-item:last-child {
+    border-bottom: none;
+  }
+  .context-list-item .mono {
+    font-family: var(--font-mono);
+    color: var(--text);
+  }
+  .context-list-item .muted {
+    color: var(--muted);
+    font-family: var(--font-mono);
+  }
+
+  /* ===== NO CONTEXT NOTE ===== */
+  .no-context-note {
+    margin-top: 24px;
+    padding: 16px;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    font-size: 13px;
+    color: var(--muted);
+    line-height: 1.5;
+  }
+
+  /* ===== TWO COLUMN LAYOUT ===== */
+  .usage-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 18px;
+    margin-top: 18px;
+    align-items: stretch;
+  }
+  .usage-grid-left {
+    display: flex;
+    flex-direction: column;
+  }
+  .usage-grid-right {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* ===== LEFT CARD (Daily + Breakdown) ===== */
+  .usage-left-card {
+    /* inherits background, border, shadow from .card */
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .usage-left-card .daily-chart-bars {
+    flex: 1;
+    min-height: 200px;
+  }
+  .usage-left-card .sessions-panel-title {
+    font-weight: 600;
+    font-size: 14px;
+    margin-bottom: 12px;
+  }
+`;