feat: add remote apply-patch passthrough and pipeline timeline polish
This commit is contained in:
Codex
@@ -412,8 +412,9 @@ h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
|
||||
}
|
||||
.status-badge.online, .status-badge.succeeded, .status-badge.public { color: var(--ok); border-color: rgba(113, 191, 120, 0.45); }
|
||||
.status-badge.offline, .status-badge.failed, .status-badge.canceled { color: var(--danger); border-color: rgba(207, 106, 84, 0.45); }
|
||||
.status-badge.running, .status-badge.dispatched, .status-badge.accepted, .status-badge.internal { color: var(--accent-2); border-color: rgba(78, 183, 168, 0.45); }
|
||||
.status-badge.running, .status-badge.dispatched, .status-badge.accepted, .status-badge.internal, .status-badge.delivered, .status-badge.applied { color: var(--accent-2); border-color: rgba(78, 183, 168, 0.45); }
|
||||
.status-badge.queued, .status-badge.staged, .status-badge.warn { color: var(--warn); border-color: rgba(215, 161, 58, 0.45); }
|
||||
.status-badge.ignored { color: var(--muted); border-color: rgba(129, 147, 159, 0.38); }
|
||||
.status-badge.private, .status-badge.p1, .status-badge.prioritized, .status-badge.verified { color: var(--accent-2); border-color: rgba(78, 183, 168, 0.45); }
|
||||
.status-badge.stale, .status-badge.invalid, .status-badge.abandoned { color: var(--warn); border-color: rgba(215, 161, 58, 0.45); }
|
||||
|
||||
@@ -1617,6 +1618,52 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
color: var(--muted);
|
||||
background: rgba(255,255,255,0.03);
|
||||
}
|
||||
.pipeline-gantt-scale {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(130px, 0.52fr) minmax(150px, 1fr);
|
||||
grid-template-areas: "label slider" "legend legend";
|
||||
align-items: center;
|
||||
gap: 3px 8px;
|
||||
min-width: min(340px, 72vw);
|
||||
padding: 6px 9px;
|
||||
border: 1px solid rgba(215, 161, 58, 0.22);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(215, 161, 58, 0.08), rgba(78, 183, 168, 0.045)),
|
||||
rgba(255,255,255,0.026);
|
||||
color: var(--muted);
|
||||
}
|
||||
.pipeline-gantt-scale > span:first-child {
|
||||
grid-area: label;
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
}
|
||||
.pipeline-gantt-scale b {
|
||||
color: var(--accent);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pipeline-gantt-scale em {
|
||||
color: var(--text);
|
||||
font-style: normal;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pipeline-gantt-scale input[type="range"] {
|
||||
grid-area: slider;
|
||||
width: 100%;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
.pipeline-gantt-scale small {
|
||||
grid-area: legend;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--faint);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pipeline-gantt-wrap {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
@@ -1653,6 +1700,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
.pipeline-gantt-board {
|
||||
display: grid;
|
||||
align-items: start;
|
||||
position: relative;
|
||||
}
|
||||
.pipeline-gantt-head {
|
||||
position: sticky;
|
||||
@@ -1733,6 +1781,36 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
linear-gradient(180deg, rgba(255,255,255,0.018), transparent),
|
||||
repeating-linear-gradient(0deg, rgba(255,255,255,0.032) 0, rgba(255,255,255,0.032) 1px, transparent 1px, transparent 96px);
|
||||
}
|
||||
.pipeline-gantt-arrow-layer {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
pointer-events: none;
|
||||
overflow: visible;
|
||||
}
|
||||
.pipeline-gantt-arrow {
|
||||
fill: none;
|
||||
stroke: #8aa0ad;
|
||||
stroke-width: 1.6;
|
||||
stroke-dasharray: 6 5;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
opacity: 0.82;
|
||||
}
|
||||
.pipeline-gantt-arrow.monitor,
|
||||
.pipeline-gantt-arrow.guide {
|
||||
stroke: var(--accent-2);
|
||||
}
|
||||
.pipeline-gantt-arrow.webui {
|
||||
stroke: #69aee8;
|
||||
}
|
||||
.pipeline-gantt-arrow.cli {
|
||||
stroke: #d7a13a;
|
||||
}
|
||||
.pipeline-gantt-arrow.control-command-ignored,
|
||||
.pipeline-gantt-arrow.ignored {
|
||||
stroke: var(--muted);
|
||||
opacity: 0.52;
|
||||
}
|
||||
.pipeline-gantt-empty-col {
|
||||
display: grid;
|
||||
place-items: start center;
|
||||
@@ -1788,6 +1866,82 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
border-color: rgba(255, 240, 198, 0.98);
|
||||
box-shadow: 0 0 0 2px rgba(8, 17, 24, 0.88), 0 0 22px rgba(246, 197, 91, 0.55);
|
||||
}
|
||||
.pipeline-gantt-marker {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(255,255,255,0.18);
|
||||
border-radius: 999px;
|
||||
background: #a7bac5;
|
||||
box-shadow: 0 0 0 2px rgba(8, 17, 24, 0.88);
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 6;
|
||||
}
|
||||
.pipeline-gantt-marker.prompt {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-color: rgba(78, 183, 168, 0.58);
|
||||
background: rgba(78, 183, 168, 0.98);
|
||||
}
|
||||
.pipeline-gantt-marker.prompt.initial {
|
||||
border-color: rgba(215, 161, 58, 0.62);
|
||||
background: rgba(215, 161, 58, 0.98);
|
||||
}
|
||||
.pipeline-gantt-marker.prompt.monitor {
|
||||
border-color: rgba(105, 174, 232, 0.78);
|
||||
background: rgba(105, 174, 232, 0.98);
|
||||
}
|
||||
.pipeline-gantt-marker.prompt.queued {
|
||||
background: #0b1319;
|
||||
border-color: rgba(105, 174, 232, 0.7);
|
||||
}
|
||||
.pipeline-gantt-marker.control-source {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 3px;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
background: rgba(138, 160, 173, 0.92);
|
||||
}
|
||||
.pipeline-gantt-marker.control-source.monitor {
|
||||
background: rgba(78, 183, 168, 0.98);
|
||||
border-color: rgba(78, 183, 168, 0.8);
|
||||
}
|
||||
.pipeline-gantt-marker.control-source.webui {
|
||||
background: rgba(105, 174, 232, 0.98);
|
||||
border-color: rgba(105, 174, 232, 0.82);
|
||||
}
|
||||
.pipeline-gantt-marker.control-source.cli {
|
||||
background: rgba(215, 161, 58, 0.98);
|
||||
border-color: rgba(215, 161, 58, 0.82);
|
||||
}
|
||||
.pipeline-gantt-marker.control-target {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-width: 2px;
|
||||
background: #081118;
|
||||
}
|
||||
.pipeline-gantt-marker.control-target.guide {
|
||||
border-color: rgba(78, 183, 168, 0.98);
|
||||
}
|
||||
.pipeline-gantt-marker.control-target.modify {
|
||||
border-color: rgba(224, 185, 90, 0.98);
|
||||
}
|
||||
.pipeline-gantt-marker.control-target.approve {
|
||||
border-color: rgba(78, 183, 168, 0.98);
|
||||
background: rgba(78, 183, 168, 0.22);
|
||||
}
|
||||
.pipeline-gantt-marker.control-target.restart {
|
||||
border-color: rgba(215, 161, 58, 0.98);
|
||||
}
|
||||
.pipeline-gantt-marker.control-target.ignored {
|
||||
border-color: rgba(129, 147, 159, 0.9);
|
||||
background: rgba(8, 17, 24, 0.62);
|
||||
}
|
||||
.pipeline-gantt-marker.selected {
|
||||
box-shadow: 0 0 0 2px rgba(8, 17, 24, 0.92), 0 0 0 4px rgba(246, 197, 91, 0.26), 0 0 18px rgba(246, 197, 91, 0.36);
|
||||
}
|
||||
.pipeline-gantt-detail-panel {
|
||||
position: sticky;
|
||||
top: 8px;
|
||||
@@ -1823,6 +1977,47 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.pipeline-event-card {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 9px;
|
||||
border: 1px solid rgba(105, 174, 232, 0.22);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(105, 174, 232, 0.08), transparent 42%),
|
||||
rgba(255,255,255,0.025);
|
||||
}
|
||||
.pipeline-event-card-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
align-items: start;
|
||||
}
|
||||
.pipeline-event-blocks {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
.pipeline-event-text-block {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(215, 161, 58, 0.2);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(215, 161, 58, 0.08), transparent 52%),
|
||||
rgba(0,0,0,0.14);
|
||||
}
|
||||
.pipeline-event-text-block b {
|
||||
color: var(--accent);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pipeline-event-text-block p {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.pipeline-kv-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -1847,6 +2042,8 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.pipeline-chip-row span {
|
||||
padding: 3px 6px;
|
||||
@@ -1854,6 +2051,8 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
background: rgba(78, 183, 168, 0.055);
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
max-width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.pipeline-attempt-card {
|
||||
display: grid;
|
||||
@@ -1862,27 +2061,472 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
border: 1px solid var(--line-soft);
|
||||
background: rgba(255,255,255,0.026);
|
||||
}
|
||||
.pipeline-attempt-card.matched {
|
||||
border-color: rgba(215, 161, 58, 0.46);
|
||||
background:
|
||||
linear-gradient(135deg, rgba(215, 161, 58, 0.08), transparent 48%),
|
||||
rgba(255,255,255,0.03);
|
||||
}
|
||||
.pipeline-attempt-head > div {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
.pipeline-attempt-head span {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
.pipeline-attempt-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 5px;
|
||||
}
|
||||
.pipeline-attempt-badges span {
|
||||
padding: 3px 6px;
|
||||
border: 1px solid rgba(78, 183, 168, 0.18);
|
||||
background: rgba(78, 183, 168, 0.055);
|
||||
color: #b8d7d3;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pipeline-attempt-badges .danger {
|
||||
border-color: rgba(207, 106, 84, 0.36);
|
||||
background: rgba(207, 106, 84, 0.12);
|
||||
color: #f0b7a8;
|
||||
}
|
||||
.pipeline-opencode-timeline {
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
max-height: min(76vh, 780px);
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 9px;
|
||||
border: 1px solid rgba(105, 174, 232, 0.2);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(105, 174, 232, 0.06), transparent 180px),
|
||||
rgba(3, 8, 12, 0.34);
|
||||
}
|
||||
.pipeline-opencode-timeline-head {
|
||||
position: sticky;
|
||||
top: -9px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
gap: 12px;
|
||||
padding: 8px 6px 9px;
|
||||
border-bottom: 1px solid rgba(105, 174, 232, 0.16);
|
||||
background: rgba(7, 14, 20, 0.94);
|
||||
backdrop-filter: blur(10px);
|
||||
min-width: 0;
|
||||
}
|
||||
.pipeline-opencode-timeline-head b {
|
||||
color: var(--text);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.pipeline-opencode-timeline-head span {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.pipeline-opencode-session-head {
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.pipeline-opencode-flow {
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 12px;
|
||||
min-width: 0;
|
||||
overflow-x: clip;
|
||||
}
|
||||
.pipeline-opencode-flow::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 6px;
|
||||
bottom: 8px;
|
||||
width: 1px;
|
||||
background: linear-gradient(180deg, rgba(78, 183, 168, 0.56), rgba(215, 161, 58, 0.34), rgba(105, 174, 232, 0.18));
|
||||
}
|
||||
.pipeline-opencode-step {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(255,255,255,0.085);
|
||||
background:
|
||||
linear-gradient(120deg, rgba(78, 183, 168, 0.06), transparent 42%),
|
||||
rgba(0,0,0,0.18);
|
||||
box-shadow: 0 10px 24px rgba(0,0,0,0.16);
|
||||
}
|
||||
.pipeline-opencode-step::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
top: 18px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border: 1px solid rgba(78, 183, 168, 0.7);
|
||||
background: #0a1517;
|
||||
box-shadow: 0 0 0 3px rgba(78, 183, 168, 0.12);
|
||||
}
|
||||
.pipeline-opencode-step.user {
|
||||
background:
|
||||
linear-gradient(120deg, rgba(105, 174, 232, 0.09), transparent 42%),
|
||||
rgba(0,0,0,0.18);
|
||||
}
|
||||
.pipeline-opencode-step.failed {
|
||||
border-color: rgba(207, 106, 84, 0.38);
|
||||
box-shadow: inset 2px 0 0 rgba(207, 106, 84, 0.7), 0 10px 24px rgba(0,0,0,0.16);
|
||||
}
|
||||
.pipeline-opencode-step.running {
|
||||
border-color: rgba(215, 161, 58, 0.38);
|
||||
box-shadow: inset 2px 0 0 rgba(215, 161, 58, 0.72), 0 10px 24px rgba(0,0,0,0.16);
|
||||
}
|
||||
.pipeline-opencode-step.matched {
|
||||
border-color: rgba(215, 161, 58, 0.48);
|
||||
box-shadow: inset 3px 0 0 rgba(215, 161, 58, 0.78), 0 0 0 1px rgba(215, 161, 58, 0.12), 0 12px 28px rgba(0,0,0,0.18);
|
||||
}
|
||||
.pipeline-opencode-step > summary {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
align-items: start;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
min-width: 0;
|
||||
}
|
||||
.pipeline-opencode-step > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.pipeline-opencode-step[open] > summary {
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
background: rgba(255,255,255,0.018);
|
||||
}
|
||||
.pipeline-opencode-step-body {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 9px;
|
||||
}
|
||||
.pipeline-step-role,
|
||||
.pipeline-tool-badge,
|
||||
.pipeline-part-kind {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
background: rgba(255,255,255,0.045);
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.11em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pipeline-step-role.user {
|
||||
border-color: rgba(105, 174, 232, 0.38);
|
||||
background: rgba(105, 174, 232, 0.12);
|
||||
color: #c7e5ff;
|
||||
}
|
||||
.pipeline-step-role.assistant {
|
||||
border-color: rgba(78, 183, 168, 0.34);
|
||||
background: rgba(78, 183, 168, 0.11);
|
||||
color: #bfe7dd;
|
||||
}
|
||||
.pipeline-step-role.system {
|
||||
border-color: rgba(215, 161, 58, 0.35);
|
||||
background: rgba(215, 161, 58, 0.11);
|
||||
color: #f0d499;
|
||||
}
|
||||
.pipeline-step-time-card {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 3px 8px;
|
||||
min-width: 0;
|
||||
padding: 0 0 5px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
background: none;
|
||||
}
|
||||
.pipeline-step-time-card strong {
|
||||
color: #d7e5e6;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.03em;
|
||||
min-width: 0;
|
||||
}
|
||||
.pipeline-step-time-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-left: auto;
|
||||
min-width: 0;
|
||||
}
|
||||
.pipeline-step-time-card span {
|
||||
color: var(--muted);
|
||||
font-size: 9px;
|
||||
min-width: 0;
|
||||
}
|
||||
.pipeline-step-message-card {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
padding: 7px 8px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(78, 183, 168, 0.05), transparent 62%),
|
||||
rgba(4, 9, 13, 0.54);
|
||||
}
|
||||
.pipeline-step-message-card.compact {
|
||||
gap: 4px;
|
||||
padding: 5px 6px;
|
||||
}
|
||||
.pipeline-step-message-card.user,
|
||||
.pipeline-step-message-card.system {
|
||||
background:
|
||||
linear-gradient(90deg, rgba(105, 174, 232, 0.07), transparent 62%),
|
||||
rgba(4, 9, 13, 0.56);
|
||||
}
|
||||
.pipeline-step-message-card-head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
.pipeline-step-message-rows {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
min-width: 0;
|
||||
}
|
||||
.pipeline-step-message-row.compact {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
.pipeline-step-message-row.compact p {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 4px 7px;
|
||||
}
|
||||
.pipeline-step-message-row.compact p {
|
||||
margin: 0;
|
||||
color: #d4e3e4;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.32;
|
||||
min-width: 0;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.pipeline-step-message-row.compact p b {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.pipeline-step-message-row.compact p span {
|
||||
min-width: 0;
|
||||
flex: 1 1 220px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.pipeline-step-message-row.compact.reasoning p {
|
||||
color: #ead8a9;
|
||||
}
|
||||
.pipeline-step-message-row.expanded .pipeline-step-text-stack {
|
||||
gap: 6px;
|
||||
}
|
||||
.pipeline-step-message-row.expanded .pipeline-step-text-block {
|
||||
background: rgba(255,255,255,0.02);
|
||||
}
|
||||
.pipeline-step-tool-summary {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
padding: 6px 7px;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(105, 174, 232, 0.06), transparent 60%),
|
||||
rgba(5, 10, 14, 0.52);
|
||||
}
|
||||
.pipeline-step-tool-summary.empty {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px 8px;
|
||||
}
|
||||
.pipeline-step-tool-summary-list {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
.pipeline-step-tool-summary-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 4px 7px;
|
||||
min-width: 0;
|
||||
}
|
||||
.pipeline-step-tool-summary-item span {
|
||||
color: var(--accent-2);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.pipeline-step-tool-summary-item p,
|
||||
.pipeline-step-tool-summary > p {
|
||||
margin: 0;
|
||||
color: #d4e3e4;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.32;
|
||||
min-width: 0;
|
||||
flex: 1 1 220px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.pipeline-step-tool-summary small {
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
.pipeline-step-factbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
.pipeline-step-token-line {
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
.pipeline-step-text-stack {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
.pipeline-opencode-step,
|
||||
.pipeline-step-text-block {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(255,255,255,0.07);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(78, 183, 168, 0.055), transparent 56%),
|
||||
rgba(4, 9, 13, 0.5);
|
||||
}
|
||||
.pipeline-step-text-block.user,
|
||||
.pipeline-step-text-block.user-text {
|
||||
border-color: rgba(105, 174, 232, 0.18);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(105, 174, 232, 0.08), transparent 56%),
|
||||
rgba(4, 9, 13, 0.52);
|
||||
}
|
||||
.pipeline-step-text-block.reasoning {
|
||||
border-color: rgba(215, 161, 58, 0.16);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(215, 161, 58, 0.07), transparent 56%),
|
||||
rgba(4, 9, 13, 0.44);
|
||||
}
|
||||
.pipeline-step-text-block.failed {
|
||||
border-color: rgba(207, 106, 84, 0.28);
|
||||
background: rgba(207, 106, 84, 0.08);
|
||||
}
|
||||
.pipeline-step-text-block b,
|
||||
.pipeline-tool-call-title b,
|
||||
.pipeline-opencode-part-body b {
|
||||
color: var(--accent);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pipeline-step-text-block p {
|
||||
margin: 0;
|
||||
color: #bfd3d4;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.pipeline-step-text-overflow {
|
||||
color: rgba(191, 211, 212, 0.72);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.pipeline-structured-payload {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(105, 174, 232, 0.18);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(105, 174, 232, 0.08), transparent 58%),
|
||||
rgba(8, 17, 24, 0.48);
|
||||
}
|
||||
.pipeline-structured-payload-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.pipeline-structured-payload-head b {
|
||||
color: var(--accent);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pipeline-structured-payload-head span {
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pipeline-tool-call-strip {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(78, 183, 168, 0.12);
|
||||
background: rgba(78, 183, 168, 0.035);
|
||||
}
|
||||
.pipeline-tool-call-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
.pipeline-tool-call-title span {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
.pipeline-opencode-part {
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
background: rgba(0,0,0,0.15);
|
||||
}
|
||||
.pipeline-opencode-step > summary,
|
||||
.pipeline-opencode-part.tool.failed {
|
||||
border-color: rgba(207, 106, 84, 0.34);
|
||||
}
|
||||
.pipeline-opencode-part.tool.succeeded {
|
||||
border-color: rgba(78, 183, 168, 0.2);
|
||||
}
|
||||
.pipeline-opencode-part > summary {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pipeline-opencode-step > summary::-webkit-details-marker,
|
||||
.pipeline-opencode-part > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
@@ -1892,10 +2536,17 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
letter-spacing: 0.13em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pipeline-opencode-step summary small {
|
||||
color: var(--muted);
|
||||
.pipeline-step-match-badge {
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid rgba(215, 161, 58, 0.46);
|
||||
color: #f2da9f;
|
||||
background: rgba(215, 161, 58, 0.12);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pipeline-opencode-step-body,
|
||||
.pipeline-opencode-part-body {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
@@ -1932,6 +2583,29 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent-2); }
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
.pipeline-opencode-part-list.reasoning-list {
|
||||
gap: 5px;
|
||||
}
|
||||
@media (max-width: 1120px) {
|
||||
.pipeline-step-time-meta {
|
||||
margin-left: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
@media (max-width: 760px) {
|
||||
.pipeline-opencode-timeline-head {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.pipeline-opencode-session-head {
|
||||
justify-items: start;
|
||||
min-width: 0;
|
||||
}
|
||||
.pipeline-step-tool-summary-item p,
|
||||
.pipeline-step-tool-summary > p {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
@keyframes ganttPulse {
|
||||
0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,0.32), 0 0 12px rgba(215, 161, 58, 0.28); }
|
||||
50% { box-shadow: 0 0 0 1px rgba(215, 161, 58, 0.52), 0 0 20px rgba(215, 161, 58, 0.48); }
|
||||
|
||||
Reference in New Issue
Block a user