lyon
2470 lines
40 KiB
CSS
2470 lines
40 KiB
CSS
.platform-shell {
|
|
display: grid;
|
|
height: 100dvh;
|
|
min-height: 100vh;
|
|
grid-template-columns: 248px minmax(0, 1fr);
|
|
overflow: hidden;
|
|
background: #eef3f8;
|
|
}
|
|
|
|
.platform-shell.is-sidebar-collapsed {
|
|
grid-template-columns: 76px minmax(0, 1fr);
|
|
}
|
|
|
|
.platform-sidebar {
|
|
position: sticky;
|
|
top: 0;
|
|
display: flex;
|
|
height: 100vh;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
border-right: 1px solid #d8e1eb;
|
|
background: #f8fafc;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
padding: 18px 14px;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.platform-sidebar::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.platform-sidebar[data-collapsed="true"] {
|
|
width: auto;
|
|
align-items: center;
|
|
overflow-x: hidden;
|
|
padding-right: 8px;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.platform-main {
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
grid-template-rows: 44px minmax(0, 1fr);
|
|
}
|
|
|
|
.platform-topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border-bottom: 1px solid #d8e1eb;
|
|
background: rgba(248, 250, 252, 0.92);
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.platform-content {
|
|
min-height: 0;
|
|
min-width: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
padding: 12px;
|
|
}
|
|
|
|
.platform-content > * {
|
|
min-height: 0;
|
|
}
|
|
|
|
.brand-lockup {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.brand-lockup.centered {
|
|
justify-content: center;
|
|
}
|
|
|
|
.brand-mark {
|
|
display: inline-flex;
|
|
width: 36px;
|
|
height: 36px;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
background: #111827;
|
|
color: #67e8f9;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.brand-lockup strong,
|
|
.brand-lockup small {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.brand-lockup small,
|
|
.topbar-status span {
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.nav-groups,
|
|
.nav-section,
|
|
.route-stack,
|
|
.workbench-route {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.route-stack {
|
|
align-content: start;
|
|
overflow: visible;
|
|
}
|
|
|
|
.workbench-route {
|
|
height: 100%;
|
|
min-height: 0;
|
|
grid-template-rows: minmax(0, 1fr);
|
|
gap: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-section h2 {
|
|
margin: 0 0 4px;
|
|
color: #94a3b8;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
padding: 9px 10px;
|
|
color: #334155;
|
|
text-align: left;
|
|
}
|
|
|
|
.nav-icon {
|
|
display: inline-flex;
|
|
width: 24px;
|
|
height: 24px;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 7px;
|
|
background: #e2e8f0;
|
|
color: #334155;
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.nav-item[data-active="true"] .nav-icon {
|
|
background: #bae6fd;
|
|
color: #075985;
|
|
}
|
|
|
|
.platform-sidebar[data-collapsed="true"] .brand-lockup div,
|
|
.platform-sidebar[data-collapsed="true"] .nav-section h2,
|
|
.platform-sidebar[data-collapsed="true"] .nav-label {
|
|
display: none;
|
|
}
|
|
|
|
.platform-sidebar[data-collapsed="true"] .nav-item {
|
|
justify-content: center;
|
|
padding: 9px;
|
|
}
|
|
|
|
.nav-item[data-active="true"] {
|
|
background: #e0f2fe;
|
|
color: #0c4a6e;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.nav-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
flex: 0 0 auto;
|
|
border-radius: 999px;
|
|
background: #94a3b8;
|
|
}
|
|
|
|
.nav-item[data-active="true"] .nav-dot {
|
|
background: #0891b2;
|
|
}
|
|
|
|
.topbar-status {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex: 1;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.topbar-actions {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.topbar-progress {
|
|
display: inline-flex;
|
|
width: 18px;
|
|
height: 18px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.topbar-progress span {
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 2px solid #bae6fd;
|
|
border-top-color: #0e7490;
|
|
border-radius: 999px;
|
|
animation: workbench-spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes workbench-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.auth-main,
|
|
.login-shell {
|
|
display: grid;
|
|
min-height: 100vh;
|
|
place-items: center;
|
|
background: #eef3f8;
|
|
padding: 20px;
|
|
}
|
|
|
|
.login-card {
|
|
display: grid;
|
|
width: min(420px, 100%);
|
|
gap: 14px;
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
background: white;
|
|
padding: 22px;
|
|
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
|
|
}
|
|
|
|
.register-card {
|
|
width: min(520px, 100%);
|
|
}
|
|
|
|
.auth-link {
|
|
color: #0e7490;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.login-card label,
|
|
.settings-grid label {
|
|
display: grid;
|
|
gap: 6px;
|
|
color: #475569;
|
|
font-size: 13px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.login-note,
|
|
.form-error {
|
|
margin: 0;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.form-error {
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.workbench-diagnostics-toggle {
|
|
display: inline-flex;
|
|
min-height: 32px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
background: white;
|
|
color: #334155;
|
|
padding: 4px 8px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.workbench-diagnostics-toggle > span:first-child,
|
|
.message-detail-button {
|
|
display: inline-flex;
|
|
width: 22px;
|
|
height: 22px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 999px;
|
|
background: #e0f2fe;
|
|
color: #0c4a6e;
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.workbench-diagnostics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.workbench-diagnostics-summary {
|
|
display: grid;
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 8px;
|
|
margin: 0;
|
|
}
|
|
|
|
.workbench-diagnostics-summary div {
|
|
min-width: 0;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
padding: 8px;
|
|
}
|
|
|
|
.workbench-diagnostics-summary dt,
|
|
.workbench-diagnostics-summary dd {
|
|
min-width: 0;
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.workbench-diagnostics-summary dt {
|
|
color: #64748b;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.workbench-diagnostics-summary dd {
|
|
color: #0f172a;
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.probe-card,
|
|
.live-build-summary {
|
|
min-width: min(320px, 100%);
|
|
flex: 1 1 320px;
|
|
}
|
|
|
|
.status-chip-button {
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: 42px;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
background: white;
|
|
padding: 8px 10px;
|
|
color: #334155;
|
|
text-align: left;
|
|
}
|
|
|
|
.status-chip-label,
|
|
.status-chip-meta {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.status-chip-label {
|
|
color: #0f172a;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.status-chip-meta {
|
|
margin-left: auto;
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.workbench-dialog-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 80;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgba(15, 23, 42, 0.34);
|
|
padding: 18px;
|
|
}
|
|
|
|
.workbench-dialog {
|
|
display: grid;
|
|
width: min(720px, 100%);
|
|
max-height: min(760px, calc(100vh - 36px));
|
|
gap: 12px;
|
|
overflow: auto;
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
background: white;
|
|
padding: 16px;
|
|
box-shadow: 0 20px 45px rgba(15, 23, 42, 0.2);
|
|
}
|
|
|
|
.workbench-dialog.wide {
|
|
width: min(920px, 100%);
|
|
}
|
|
|
|
.workbench-dialog header,
|
|
.hwpod-event-panel header {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.dialog-close {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
color: #334155;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.dialog-title-stack {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 3px;
|
|
}
|
|
|
|
.dialog-title-stack h2,
|
|
.dialog-title-stack p {
|
|
margin: 0;
|
|
}
|
|
|
|
.dialog-title-stack p {
|
|
color: #64748b;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.probe-list,
|
|
.live-build-list,
|
|
.hwpod-errors ul {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.probe-row,
|
|
.live-build-row,
|
|
.hwpod-errors {
|
|
display: grid;
|
|
gap: 8px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
padding: 10px;
|
|
}
|
|
|
|
.probe-row-head,
|
|
.live-build-row-head {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.probe-row-label,
|
|
.live-build-row strong {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.probe-row-meta,
|
|
.live-build-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.probe-row p,
|
|
.live-build-dialog-summary p,
|
|
.live-build-reason {
|
|
margin: 0;
|
|
color: #475569;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.workbench-grid {
|
|
display: grid;
|
|
min-height: 0;
|
|
height: 100%;
|
|
grid-template-columns: auto minmax(0, 1fr) minmax(280px, 360px);
|
|
gap: 8px;
|
|
}
|
|
|
|
.workbench-center,
|
|
.session-rail,
|
|
.hwpod-panel,
|
|
.data-panel,
|
|
.empty-state,
|
|
.metric-card,
|
|
.message-card {
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
background: white;
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
}
|
|
|
|
.workbench-center {
|
|
display: grid;
|
|
height: 100%;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
grid-template-rows: minmax(0, 1fr) auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.session-rail,
|
|
.hwpod-panel {
|
|
position: relative;
|
|
display: grid;
|
|
height: 100%;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
align-content: start;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.session-rail {
|
|
grid-template-rows: auto auto minmax(0, 1fr) auto auto;
|
|
}
|
|
|
|
.hwpod-panel {
|
|
align-content: stretch;
|
|
grid-template-rows: auto minmax(220px, 1fr);
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.panel-header h2 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.session-list {
|
|
display: grid;
|
|
min-height: 0;
|
|
gap: 6px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.conversation-panel {
|
|
display: flex;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 6px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.session-tab {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
min-height: 34px;
|
|
width: 100%;
|
|
gap: 10px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 6px;
|
|
background: #f8fafc;
|
|
padding: 7px 9px;
|
|
color: #334155;
|
|
text-align: left;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.session-tab > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.session-tab[data-active="true"] {
|
|
border-color: #38bdf8;
|
|
background: #f0f9ff;
|
|
}
|
|
|
|
.session-tab[data-running="true"]::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 8px;
|
|
bottom: 3px;
|
|
left: 8px;
|
|
height: 2px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg, rgba(8, 145, 178, 0), rgba(8, 145, 178, 0.82), rgba(8, 145, 178, 0));
|
|
background-size: 220% 100%;
|
|
opacity: 0.82;
|
|
pointer-events: none;
|
|
animation: session-tab-running 1100ms linear infinite;
|
|
}
|
|
|
|
@keyframes session-tab-running {
|
|
from { background-position: 220% 0; }
|
|
to { background-position: -220% 0; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.session-tab[data-running="true"]::after {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.session-tab-title {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
color: #0f172a;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.session-tab-time {
|
|
flex: 0 0 auto;
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.muted-box {
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.muted-box,
|
|
.empty-state {
|
|
padding: 14px;
|
|
}
|
|
|
|
.conversation-panel {
|
|
padding: 8px;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.conversation-empty-hint {
|
|
align-self: center;
|
|
margin-top: 24px;
|
|
color: #64748b;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.message-card {
|
|
position: relative;
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: max-content;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
align-self: stretch;
|
|
gap: 5px;
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.message-card[data-role="agent"] {
|
|
align-self: stretch;
|
|
width: 100%;
|
|
}
|
|
|
|
.message-card[data-role="agent"][data-status="running"] {
|
|
border-color: #7dd3fc;
|
|
background:
|
|
linear-gradient(90deg, transparent, #0891b2, #22c55e, transparent) no-repeat -180px 0 / 180px 2px,
|
|
linear-gradient(180deg, #ffffff 0%, #f8fdff 100%);
|
|
animation: agent-run-scan 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
.message-card[data-role="user"] {
|
|
align-self: flex-end;
|
|
width: max-content;
|
|
min-width: min(120px, 100%);
|
|
max-width: min(720px, 100%);
|
|
margin-left: auto;
|
|
border-color: #bfdbfe;
|
|
background: #eff6ff;
|
|
padding: 8px 10px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.message-card[data-role="user"] .message-text {
|
|
max-width: 100%;
|
|
overflow-wrap: anywhere;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.message-card header,
|
|
.trace-timeline header {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.message-header-actions {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.message-detail-button {
|
|
display: inline-flex;
|
|
width: 22px;
|
|
height: 22px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 999px;
|
|
background: white;
|
|
color: #475569;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
line-height: 1;
|
|
}
|
|
|
|
.agent-running-indicator {
|
|
display: inline-flex;
|
|
width: 28px;
|
|
height: 18px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
.agent-running-indicator span {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 999px;
|
|
background: #0891b2;
|
|
animation: agent-run-dot 900ms ease-in-out infinite;
|
|
}
|
|
|
|
.agent-running-indicator span:nth-child(2) {
|
|
animation-delay: 120ms;
|
|
}
|
|
|
|
.agent-running-indicator span:nth-child(3) {
|
|
animation-delay: 240ms;
|
|
}
|
|
|
|
.message-text,
|
|
.message-markdown {
|
|
margin: 0;
|
|
color: #1f2937;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.message-markdown {
|
|
display: grid;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.message-markdown > * {
|
|
margin: 0;
|
|
}
|
|
|
|
.message-markdown ul,
|
|
.message-markdown ol {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.message-markdown code {
|
|
border-radius: 3px;
|
|
background: rgba(175, 184, 193, 0.2);
|
|
color: #24292f;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 85%;
|
|
}
|
|
|
|
.message-markdown pre {
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
border: 1px solid #d0d7de;
|
|
border-radius: 6px;
|
|
background: #f6f8fa;
|
|
color: #24292f;
|
|
padding: 10px;
|
|
}
|
|
|
|
.message-markdown code {
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
.message-markdown pre code {
|
|
padding: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font-size: 100%;
|
|
}
|
|
|
|
.message-markdown table {
|
|
display: block;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.message-markdown th,
|
|
.message-markdown td {
|
|
border: 1px solid #d0d7de;
|
|
padding: 6px 13px;
|
|
color: #24292f;
|
|
text-align: left;
|
|
}
|
|
|
|
.message-markdown th {
|
|
background: #f6f8fa;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.message-markdown tr {
|
|
background: white;
|
|
}
|
|
|
|
.message-markdown tr:nth-child(2n) {
|
|
background: #f6f8fa;
|
|
}
|
|
|
|
.message-markdown a {
|
|
color: #0e7490;
|
|
font-weight: 700;
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.trace-timeline {
|
|
display: grid;
|
|
gap: 4px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 3px;
|
|
background: #f8fafc;
|
|
padding: 4px;
|
|
}
|
|
|
|
.trace-disclosure {
|
|
display: grid;
|
|
gap: 5px;
|
|
}
|
|
|
|
.trace-disclosure summary::-webkit-details-marker,
|
|
.trace-tool-details summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.trace-disclosure-summary {
|
|
display: inline-flex;
|
|
width: max-content;
|
|
min-height: 22px;
|
|
align-items: center;
|
|
gap: 5px;
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 3px;
|
|
background: white;
|
|
color: #475569;
|
|
cursor: pointer;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
list-style: none;
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
.trace-disclosure-caret {
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 4px solid transparent;
|
|
border-bottom: 4px solid transparent;
|
|
border-left: 6px solid #0f766e;
|
|
transition: transform 120ms ease;
|
|
}
|
|
|
|
.trace-disclosure[open] > .trace-disclosure-summary .trace-disclosure-caret {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.trace-disclosure-label {
|
|
line-height: 1;
|
|
}
|
|
|
|
.trace-disclosure-body {
|
|
display: grid;
|
|
gap: 5px;
|
|
}
|
|
|
|
.trace-meta-panel {
|
|
display: grid;
|
|
gap: 6px;
|
|
width: 100%;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 3px;
|
|
background: white;
|
|
padding: 6px;
|
|
}
|
|
|
|
.trace-meta-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
gap: 4px 8px;
|
|
margin: 0;
|
|
}
|
|
|
|
.trace-meta-grid div {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 2px;
|
|
}
|
|
|
|
.trace-meta-grid dt {
|
|
color: #64748b;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.trace-meta-grid dd {
|
|
min-width: 0;
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
color: #334155;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.trace-meta-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.message-trace-debug-panel {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.trace-raw-list {
|
|
display: grid;
|
|
max-height: min(340px, 42vh);
|
|
gap: 4px;
|
|
margin: 0;
|
|
overflow: auto;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.trace-raw-list li {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 3px;
|
|
border-top: 1px solid #e2e8f0;
|
|
padding: 5px 0 0;
|
|
color: #475569;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.trace-raw-list li:first-child {
|
|
border-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.trace-raw-list li span,
|
|
.trace-raw-list li small {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.trace-summary-strip {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.trace-summary-chip {
|
|
display: inline-flex;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 3px;
|
|
background: white;
|
|
color: #334155;
|
|
padding: 4px 6px;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.trace-summary-chip b {
|
|
color: #64748b;
|
|
font-family: inherit;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.trace-id {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.trace-id {
|
|
max-width: 220px;
|
|
color: #475569;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.trace-warning,
|
|
.trace-empty {
|
|
margin: 0;
|
|
border-radius: 3px;
|
|
padding: 6px 8px;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.trace-warning {
|
|
border: 1px solid #fde68a;
|
|
background: #fffbeb;
|
|
color: #92400e;
|
|
}
|
|
|
|
.trace-empty {
|
|
border: 1px solid #d8e1eb;
|
|
background: white;
|
|
color: #64748b;
|
|
}
|
|
|
|
.trace-timeline ol {
|
|
display: grid;
|
|
max-height: 320px;
|
|
gap: 4px;
|
|
margin: 0;
|
|
overflow: auto;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.trace-tool-details {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 5px;
|
|
}
|
|
|
|
.trace-tool-details > summary {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 6px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.trace-tool-details > summary::before {
|
|
width: 0;
|
|
height: 0;
|
|
flex: 0 0 auto;
|
|
border-top: 4px solid transparent;
|
|
border-bottom: 4px solid transparent;
|
|
border-left: 6px solid #64748b;
|
|
content: "";
|
|
transition: transform 120ms ease;
|
|
}
|
|
|
|
.trace-tool-details[open] > summary::before {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.trace-tool-details > summary code {
|
|
min-width: 0;
|
|
max-width: 42%;
|
|
flex: 0 1 auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.trace-tool-command-preview {
|
|
min-width: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
color: #334155;
|
|
font-family: "SFMono-Regular", Consolas, monospace;
|
|
font-size: 11px;
|
|
font-weight: 650;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.trace-timeline li {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 3px;
|
|
border-top: 1px solid #e2e8f0;
|
|
padding: 5px 0 0;
|
|
color: #475569;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.trace-timeline li:first-child {
|
|
border-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.trace-timeline li[data-terminal="true"] {
|
|
border-left: 3px solid #22c55e;
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.trace-render-row .trace-row-body {
|
|
width: 100%;
|
|
min-width: 0;
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.trace-render-row .trace-row-markdown {
|
|
display: grid;
|
|
gap: 6px;
|
|
white-space: normal;
|
|
}
|
|
|
|
.trace-render-row .muted {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.trace-render-row pre.trace-row-body {
|
|
max-height: 220px;
|
|
overflow: auto;
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 3px;
|
|
background: white;
|
|
color: #334155;
|
|
padding: 6px;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 11px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.trace-timeline li span,
|
|
.trace-timeline li small {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.message-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-top: 1px solid #e2e8f0;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.message-actions a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.message-action-status {
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.code-agent-status-summary {
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.code-agent-status-summary summary {
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 9px 10px;
|
|
color: #334155;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.code-agent-status-summary dl {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0;
|
|
margin: 0;
|
|
border-top: 1px solid #d8e1eb;
|
|
}
|
|
|
|
.code-agent-error-summary {
|
|
display: grid;
|
|
gap: 4px;
|
|
border-top: 1px solid #d8e1eb;
|
|
background: #fff7ed;
|
|
padding: 9px 10px;
|
|
color: #7c2d12;
|
|
}
|
|
|
|
.code-agent-error-summary strong {
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.code-agent-error-summary p {
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
color: #7f1d1d;
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.code-agent-status-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
|
|
gap: 8px;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
padding: 7px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.code-agent-status-row dt,
|
|
.code-agent-status-row dd {
|
|
min-width: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.code-agent-status-row dt {
|
|
color: #64748b;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.code-agent-status-row dd {
|
|
overflow-wrap: anywhere;
|
|
color: #1f2937;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
}
|
|
|
|
.trace-timeline code,
|
|
.mini-log,
|
|
.json-panel,
|
|
.help-body {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.trace-timeline code {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
@keyframes agent-run-scan {
|
|
0% { background-position: -180px 0, 0 0; }
|
|
55%, 100% { background-position: calc(100% + 180px) 0, 0 0; }
|
|
}
|
|
|
|
@keyframes agent-run-dot {
|
|
0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
|
|
40% { opacity: 1; transform: translateY(-3px); }
|
|
}
|
|
|
|
.command-composer {
|
|
display: grid;
|
|
gap: 10px;
|
|
border-top: 1px solid #d8e1eb;
|
|
padding: 12px;
|
|
}
|
|
|
|
.composer-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.composer-field {
|
|
display: grid;
|
|
min-width: min(260px, 100%);
|
|
gap: 4px;
|
|
color: #475569;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.composer-field select {
|
|
min-height: 34px;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
background: white;
|
|
padding: 0 10px;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.command-composer textarea {
|
|
width: 100%;
|
|
min-height: 84px;
|
|
resize: vertical;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.composer-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.composer-warning {
|
|
margin-right: auto;
|
|
color: #b45309;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.composer-mode {
|
|
margin-right: auto;
|
|
color: #0e7490;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.composer-mode[data-mode="steer"] {
|
|
color: #7c2d12;
|
|
}
|
|
|
|
.drafts-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
padding: 10px;
|
|
}
|
|
|
|
.drafts-list-head,
|
|
.session-rail-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.drafts-list-items {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.draft-chip {
|
|
max-width: 100%;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
background: white;
|
|
padding: 6px 8px;
|
|
color: #334155;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.session-model-channel,
|
|
.session-active-metadata {
|
|
display: grid;
|
|
gap: 3px;
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
padding: 8px;
|
|
color: #475569;
|
|
font-size: 12px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.session-active-metadata span {
|
|
color: #0f172a;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.session-active-metadata small {
|
|
color: #64748b;
|
|
}
|
|
|
|
.session-resize-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -7px;
|
|
width: 12px;
|
|
height: 100%;
|
|
cursor: col-resize;
|
|
}
|
|
|
|
.session-resize-handle:focus-visible {
|
|
outline: 2px solid #0891b2;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.session-rail.is-resizing {
|
|
user-select: none;
|
|
}
|
|
|
|
.evidence-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 6px;
|
|
}
|
|
|
|
.evidence-grid span {
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
padding: 7px 8px;
|
|
color: #334155;
|
|
font-size: 11px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.hwpod-panel-actions {
|
|
display: inline-flex;
|
|
min-width: 0;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hwpod-diagnostics-button {
|
|
display: inline-flex;
|
|
width: 28px;
|
|
height: 28px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 999px;
|
|
background: white;
|
|
color: #0c4a6e;
|
|
font-size: 13px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.hwpod-node-status,
|
|
.hwpod-event-panel {
|
|
display: grid;
|
|
min-height: 0;
|
|
gap: 10px;
|
|
}
|
|
|
|
.hwpod-node-status {
|
|
overflow: auto;
|
|
}
|
|
|
|
.hwpod-event-panel {
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
min-height: 0;
|
|
}
|
|
|
|
.hwpod-node-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.summary-tile {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 4px;
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
padding: 9px;
|
|
color: #334155;
|
|
text-align: left;
|
|
}
|
|
|
|
.summary-tile span,
|
|
.summary-tile strong {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.summary-tile span {
|
|
color: #64748b;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.summary-tile strong {
|
|
color: #0f172a;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.hwpod-node-meta {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0;
|
|
margin: 0;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hwpod-node-meta div {
|
|
display: grid;
|
|
gap: 3px;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
padding: 7px 8px;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.hwpod-node-meta dt,
|
|
.hwpod-node-meta dd {
|
|
min-width: 0;
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.hwpod-node-meta dt {
|
|
color: #64748b;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.hwpod-node-meta dd {
|
|
color: #0f172a;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hwpod-errors li {
|
|
display: grid;
|
|
gap: 4px;
|
|
color: #475569;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hwpod-errors code {
|
|
color: #991b1b;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hwpod-event-panel header button {
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
background: white;
|
|
color: #334155;
|
|
padding: 5px 8px;
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.hwpod-event-panel header div {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.hwpod-event-scroll {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
background: #0f172a;
|
|
color: #dbeafe;
|
|
}
|
|
|
|
.hwpod-event-scroll pre,
|
|
#hwpod-detail-body {
|
|
margin: 0;
|
|
padding: 12px;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.mini-log,
|
|
.json-panel,
|
|
.help-body {
|
|
max-height: 420px;
|
|
overflow: auto;
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
background: #0f172a;
|
|
color: #dbeafe;
|
|
padding: 12px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.empty-state {
|
|
display: grid;
|
|
align-self: start;
|
|
justify-items: start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.empty-state h2,
|
|
.empty-state p {
|
|
margin: 0;
|
|
}
|
|
|
|
.empty-state-mark {
|
|
display: inline-flex;
|
|
width: 34px;
|
|
height: 34px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
background: #e0f2fe;
|
|
color: #075985;
|
|
font-weight: 850;
|
|
}
|
|
|
|
.overview-grid,
|
|
.settings-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.metric-card {
|
|
display: grid;
|
|
gap: 6px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.metric-card span {
|
|
color: #64748b;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.usage-metrics .metric-card strong {
|
|
color: #0f172a;
|
|
font-size: 28px;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.usage-panels {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.usage-panel {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.admin-crud-panel,
|
|
.table-page-layout {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.table-page-layout {
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
background: white;
|
|
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
}
|
|
|
|
.table-page-header small,
|
|
.panel-header small {
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.table-page-actions,
|
|
.table-actions-inline,
|
|
.table-pagination,
|
|
.table-pagination div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.table-pagination {
|
|
justify-content: space-between;
|
|
color: #64748b;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.data-table-wrap {
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.data-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: white;
|
|
}
|
|
|
|
.data-table th,
|
|
.data-table td {
|
|
border-bottom: 1px solid #e2e8f0;
|
|
padding: 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
.data-table th[data-align="right"],
|
|
.data-table td[data-align="right"] {
|
|
text-align: right;
|
|
}
|
|
|
|
.crud-table td {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.crud-table small,
|
|
.provider-admin-page small,
|
|
.access-admin-page small {
|
|
display: block;
|
|
margin-top: 3px;
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.link-button {
|
|
display: grid;
|
|
width: 100%;
|
|
min-width: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #0f172a;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.link-button[data-selected="true"] strong {
|
|
color: #0f766e;
|
|
}
|
|
|
|
.usage-table th,
|
|
.usage-table td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.usage-table code {
|
|
color: #0f766e;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.admin-billing-panel {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.admin-billing-table td {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.admin-billing-table td > strong,
|
|
.admin-billing-table td > small {
|
|
display: block;
|
|
}
|
|
|
|
.admin-billing-table td > small {
|
|
margin-top: 3px;
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.admin-action-error {
|
|
margin: 0;
|
|
}
|
|
|
|
.inline-form-row,
|
|
.inline-edit-row,
|
|
.admin-users-filters,
|
|
.pagination-row {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.inline-form-row .input,
|
|
.admin-users-filters .input {
|
|
min-width: 180px;
|
|
flex: 1;
|
|
}
|
|
|
|
.secret-once-box,
|
|
.detail-subpanel {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 10px;
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
padding: 12px;
|
|
}
|
|
|
|
.secret-once-box code {
|
|
overflow-wrap: anywhere;
|
|
color: #0f766e;
|
|
}
|
|
|
|
.admin-users-layout,
|
|
.admin-detail-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.85fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.admin-users-list-panel,
|
|
.admin-user-create-panel,
|
|
.admin-user-detail-panel,
|
|
.admin-users-toolbar {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 10px;
|
|
}
|
|
|
|
.form-grid.two-col {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.form-grid label {
|
|
display: grid;
|
|
gap: 6px;
|
|
color: #475569;
|
|
font-size: 13px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.span-2 {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.admin-billing-table tr[data-selected="true"] td {
|
|
background: #f0fdfa;
|
|
}
|
|
|
|
.table-action {
|
|
min-width: 64px;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
color: #0f172a;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
padding: 7px 10px;
|
|
}
|
|
|
|
.table-action:hover:not(:disabled) {
|
|
border-color: #0891b2;
|
|
color: #0c4a6e;
|
|
}
|
|
|
|
.table-action.danger:hover:not(:disabled) {
|
|
border-color: #ef4444;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.table-action:disabled {
|
|
cursor: wait;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.status-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 999px;
|
|
padding: 3px 8px;
|
|
background: #f8fafc;
|
|
color: #334155;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.status-pill[data-status="active"] {
|
|
border-color: #99f6e4;
|
|
background: #ccfbf1;
|
|
color: #0f766e;
|
|
}
|
|
|
|
.status-pill[data-status="disabled"] {
|
|
border-color: #fecaca;
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.status-pill[data-status="admin"],
|
|
.status-pill[data-status="completed"],
|
|
.status-pill[data-status="ready"] {
|
|
border-color: #bbf7d0;
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
}
|
|
|
|
.status-pill[data-status="failed"],
|
|
.status-pill[data-status="blocked"],
|
|
.status-pill[data-status="error"] {
|
|
border-color: #fecaca;
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.field-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 10px;
|
|
margin: 0;
|
|
}
|
|
|
|
.field-grid div {
|
|
min-width: 0;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
padding: 10px;
|
|
}
|
|
|
|
.field-grid dt,
|
|
.field-grid dd {
|
|
min-width: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.field-grid dt {
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.field-grid dd {
|
|
overflow-wrap: anywhere;
|
|
color: #0f172a;
|
|
font-size: 13px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.form-grid,
|
|
.admin-form {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.compact-form-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.form-grid label,
|
|
.admin-form label {
|
|
display: grid;
|
|
gap: 6px;
|
|
color: #475569;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.form-grid select,
|
|
.admin-form input,
|
|
.admin-form textarea {
|
|
min-width: 0;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
background: white;
|
|
color: #0f172a;
|
|
font: inherit;
|
|
padding: 9px 10px;
|
|
}
|
|
|
|
.admin-form textarea {
|
|
resize: vertical;
|
|
font-family: "SFMono-Regular", Consolas, monospace;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.form-notice {
|
|
margin: 0;
|
|
color: #0f766e;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.access-user-head,
|
|
.tool-toggle-grid,
|
|
.tuple-list,
|
|
.provider-validation-panel {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.tool-toggle-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
padding: 10px;
|
|
}
|
|
|
|
.tool-toggle-row input {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.tuple-list h3 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tuple-list ul {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.tuple-list li {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.3fr);
|
|
gap: 8px;
|
|
align-items: center;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.tuple-list code,
|
|
.provider-admin-page code {
|
|
overflow-wrap: anywhere;
|
|
color: #0f766e;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.toast-host {
|
|
position: fixed;
|
|
right: 16px;
|
|
bottom: 16px;
|
|
z-index: 50;
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.toast-item {
|
|
max-width: min(380px, calc(100vw - 32px));
|
|
border: 1px solid #d8e1eb;
|
|
border-radius: 8px;
|
|
background: white;
|
|
padding: 10px 12px;
|
|
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
|
|
text-align: left;
|
|
}
|
|
|
|
.system-page .data-table td small,
|
|
.provider-admin-page .data-table td small {
|
|
display: block;
|
|
margin-top: 3px;
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.system-summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.system-summary-grid .metric-card {
|
|
display: grid;
|
|
gap: 5px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.system-summary-grid .metric-card span,
|
|
.rum-bar-row span,
|
|
.skill-tree-list small {
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.system-summary-grid .metric-card strong {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
color: #0f172a;
|
|
font-size: 20px;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.system-summary-grid .metric-card small {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.system-filter-bar {
|
|
display: grid;
|
|
grid-template-columns: minmax(140px, 220px) minmax(240px, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.system-filter-bar label {
|
|
display: grid;
|
|
gap: 5px;
|
|
color: #475569;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.system-filter-bar select,
|
|
.system-filter-bar input {
|
|
min-height: 36px;
|
|
min-width: 0;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
background: white;
|
|
padding: 7px 10px;
|
|
}
|
|
|
|
.system-row-detail {
|
|
display: -webkit-box;
|
|
max-width: 520px;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.system-drilldown {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.system-drilldown h3,
|
|
.system-drilldown p {
|
|
margin: 0;
|
|
}
|
|
|
|
.system-drilldown h3 {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.system-drilldown ul,
|
|
.skill-tree-list {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.system-drilldown li,
|
|
.skill-tree-list li {
|
|
min-width: 0;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
padding: 8px;
|
|
}
|
|
|
|
.rum-chart-panel {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.rum-bar-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(100px, 160px) minmax(0, 1fr) 48px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.rum-bar-row div {
|
|
height: 10px;
|
|
overflow: hidden;
|
|
border-radius: 999px;
|
|
background: #e2e8f0;
|
|
}
|
|
|
|
.rum-bar-row i {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: #0e7490;
|
|
}
|
|
|
|
.rum-bar-row strong {
|
|
text-align: right;
|
|
}
|
|
|
|
.system-split-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.skills-tree-panel,
|
|
.skills-preview-panel {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.skill-tree-list {
|
|
max-height: 420px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.skill-tree-list li {
|
|
display: grid;
|
|
grid-template-columns: 48px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.skill-tree-list button {
|
|
min-height: 26px;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
background: white;
|
|
color: #334155;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.skill-tree-list button:disabled {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.skill-tree-list span {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.skills-preview-panel .mini-log {
|
|
max-height: 460px;
|
|
min-height: 240px;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.platform-shell {
|
|
grid-template-columns: 76px minmax(0, 1fr);
|
|
}
|
|
|
|
.platform-sidebar {
|
|
padding: 14px 8px;
|
|
}
|
|
|
|
.platform-sidebar .brand-lockup div,
|
|
.nav-section h2,
|
|
.nav-label {
|
|
display: none;
|
|
}
|
|
|
|
.workbench-grid,
|
|
.overview-grid,
|
|
.settings-grid,
|
|
.usage-panels,
|
|
.admin-users-layout,
|
|
.admin-detail-grid,
|
|
.system-summary-grid,
|
|
.system-split-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.workbench-route {
|
|
min-height: calc(100dvh - 102px);
|
|
overflow: auto;
|
|
}
|
|
|
|
.workbench-grid,
|
|
.session-rail,
|
|
.workbench-center,
|
|
.hwpod-panel {
|
|
min-height: 0;
|
|
}
|
|
|
|
.hwpod-event-scroll {
|
|
max-height: 260px;
|
|
}
|
|
|
|
.field-grid,
|
|
.form-grid.two-col,
|
|
.compact-form-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.platform-shell {
|
|
height: 100dvh;
|
|
min-height: 100dvh;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.platform-sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.platform-main {
|
|
height: 100dvh;
|
|
min-height: 0;
|
|
grid-template-rows: 44px minmax(0, 1fr);
|
|
}
|
|
|
|
.platform-content {
|
|
min-height: 0;
|
|
padding: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.platform-topbar {
|
|
min-width: 0;
|
|
gap: 8px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.topbar-status {
|
|
gap: 6px;
|
|
}
|
|
|
|
.topbar-status strong {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.workbench-route,
|
|
.workbench-grid,
|
|
.workbench-center {
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.workbench-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: minmax(0, 1fr);
|
|
}
|
|
|
|
.session-rail,
|
|
.hwpod-panel {
|
|
display: none;
|
|
}
|
|
|
|
.command-composer {
|
|
gap: 8px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.composer-toolbar {
|
|
gap: 6px;
|
|
}
|
|
|
|
.composer-field {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.command-composer textarea {
|
|
min-height: 72px;
|
|
}
|
|
|
|
.system-filter-bar,
|
|
.rum-bar-row,
|
|
.skill-tree-list li {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|