mirror of
https://github.com/whyour/qinglong.git
synced 2026-09-23 12:05:27 +08:00
feat(ql3): add explicit cluster observation console
This commit is contained in:
whyour
@@ -1,21 +1,18 @@
|
||||
:root {
|
||||
--paper: #f3f6f1;
|
||||
--paper-deep: #e7ede6;
|
||||
--ink: #17231d;
|
||||
--muted: #607067;
|
||||
--line: #cbd5cc;
|
||||
--moss: #2f654d;
|
||||
--moss-soft: #dce9df;
|
||||
--amber: #c98724;
|
||||
--plum: #69556d;
|
||||
--rust: #a84f38;
|
||||
--white: #fbfdf9;
|
||||
--shadow: 0 24px 70px rgba(31, 52, 40, 0.12);
|
||||
font-family:
|
||||
"Avenir Next", "Segoe UI Variable", "Segoe UI", "PingFang SC",
|
||||
"Hiragino Sans GB", sans-serif;
|
||||
--porcelain: #eef3f5;
|
||||
--paper: #f8faf9;
|
||||
--ink: #152329;
|
||||
--muted: #607079;
|
||||
--line: #bdcbd0;
|
||||
--cyan: #087f8c;
|
||||
--cyan-soft: #d7ecee;
|
||||
--signal: #df6538;
|
||||
--violet: #655f87;
|
||||
--error: #a13f32;
|
||||
--white: #ffffff;
|
||||
font-family: 'Avenir Next', 'Segoe UI Variable', 'PingFang SC', sans-serif;
|
||||
color: var(--ink);
|
||||
background: var(--paper);
|
||||
background: var(--porcelain);
|
||||
font-synthesis: none;
|
||||
}
|
||||
|
||||
@@ -23,19 +20,25 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html {
|
||||
min-width: 320px;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(47, 101, 77, 0.035) 1px, transparent 1px)
|
||||
0 0 / 24px 24px,
|
||||
var(--paper);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(8, 127, 140, 0.035) 1px,
|
||||
transparent 1px
|
||||
)
|
||||
0 0 / 28px 28px,
|
||||
var(--porcelain);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
font: inherit;
|
||||
@@ -43,15 +46,13 @@ input {
|
||||
|
||||
button {
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: 3px;
|
||||
padding: 0.78rem 1rem;
|
||||
border-radius: 2px;
|
||||
padding: 0.72rem 0.85rem;
|
||||
color: var(--ink);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 140ms ease,
|
||||
background-color 140ms ease,
|
||||
color 140ms ease;
|
||||
transition: transform 130ms ease, background-color 130ms ease,
|
||||
color 130ms ease;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
@@ -59,22 +60,19 @@ button:hover:not(:disabled) {
|
||||
background: var(--ink);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.42;
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: var(--moss);
|
||||
border-color: var(--moss);
|
||||
border-color: var(--cyan);
|
||||
background: var(--cyan);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
pre:focus-visible {
|
||||
outline: 3px solid color-mix(in srgb, var(--amber) 72%, white);
|
||||
outline: 3px solid color-mix(in srgb, var(--signal) 72%, white);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
@@ -83,15 +81,14 @@ input {
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--ink);
|
||||
border-radius: 0;
|
||||
padding: 0.72rem 0;
|
||||
padding: 0.64rem 0;
|
||||
color: var(--ink);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #91a097;
|
||||
color: #8a9ba2;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
left: 1rem;
|
||||
@@ -102,477 +99,395 @@ input::placeholder {
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1440px, 100%);
|
||||
width: min(1500px, 100%);
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
padding: 2rem clamp(1rem, 3vw, 3.5rem) 1.25rem;
|
||||
padding: 1.6rem clamp(0.8rem, 3vw, 3rem) 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.masthead {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
padding-bottom: 1.6rem;
|
||||
padding-bottom: 1.4rem;
|
||||
border-bottom: 1px solid var(--ink);
|
||||
}
|
||||
|
||||
.brand-lockup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.2rem;
|
||||
gap: 1.1rem;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 3.15rem;
|
||||
height: 3.15rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: 50%;
|
||||
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
clip-path: polygon(0 0, 82% 0, 100% 18%, 100% 100%, 18% 100%, 0 82%);
|
||||
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.09em;
|
||||
letter-spacing: -0.08em;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 0.42rem;
|
||||
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
font-size: 0.69rem;
|
||||
margin: 0 0 0.38rem;
|
||||
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
|
||||
font-size: 0.67rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
max-width: 18ch;
|
||||
font-size: clamp(1.55rem, 3vw, 3rem);
|
||||
line-height: 0.98;
|
||||
letter-spacing: -0.055em;
|
||||
max-width: 20ch;
|
||||
font-size: clamp(1.5rem, 3vw, 2.85rem);
|
||||
line-height: 1;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.7rem;
|
||||
font-size: clamp(1.45rem, 2vw, 2.15rem);
|
||||
margin-bottom: 0.65rem;
|
||||
font-size: clamp(1.35rem, 2vw, 2rem);
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.boundary {
|
||||
min-width: 11rem;
|
||||
min-width: 13rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.22rem 0.52rem;
|
||||
gap: 0.2rem 0.5rem;
|
||||
align-items: center;
|
||||
font-size: 0.76rem;
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.boundary strong {
|
||||
grid-column: 2;
|
||||
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.boundary-dot {
|
||||
width: 0.65rem;
|
||||
height: 0.65rem;
|
||||
width: 0.62rem;
|
||||
height: 0.62rem;
|
||||
border-radius: 50%;
|
||||
background: var(--moss);
|
||||
box-shadow: 0 0 0 5px var(--moss-soft);
|
||||
background: var(--cyan);
|
||||
box-shadow: 0 0 0 5px var(--cyan-soft);
|
||||
}
|
||||
|
||||
.workspace {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(18rem, 0.82fr) minmax(28rem, 1.4fr);
|
||||
min-height: 680px;
|
||||
grid-template-columns: minmax(20rem, 0.8fr) minmax(30rem, 1.45fr);
|
||||
min-height: 720px;
|
||||
border-bottom: 1px solid var(--ink);
|
||||
}
|
||||
|
||||
.control-deck,
|
||||
.evidence-panel {
|
||||
padding: clamp(1.5rem, 3vw, 3.25rem);
|
||||
padding: clamp(1.35rem, 3vw, 2.8rem);
|
||||
}
|
||||
|
||||
.control-deck {
|
||||
border-right: 1px solid var(--ink);
|
||||
background: rgba(251, 253, 249, 0.72);
|
||||
background: rgba(248, 250, 249, 0.84);
|
||||
}
|
||||
|
||||
.section-heading > p:last-child {
|
||||
max-width: 44ch;
|
||||
line-height: 1.7;
|
||||
max-width: 46ch;
|
||||
line-height: 1.65;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.session-gate {
|
||||
margin: 2.5rem 0 2rem;
|
||||
padding: 1.1rem;
|
||||
border-left: 3px solid var(--plum);
|
||||
background: color-mix(in srgb, var(--plum) 8%, var(--white));
|
||||
margin: 2rem 0;
|
||||
padding: 1rem;
|
||||
border-left: 3px solid var(--violet);
|
||||
background: color-mix(in srgb, var(--violet) 7%, var(--white));
|
||||
}
|
||||
|
||||
.inline-control {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 0.8rem;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.field-note {
|
||||
margin: 0.75rem 0 0;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.55;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.target-form {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.target-form label,
|
||||
.field-label,
|
||||
.session-gate label {
|
||||
margin-top: 0.9rem;
|
||||
font-size: 0.78rem;
|
||||
display: block;
|
||||
margin-top: 0.8rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.actions {
|
||||
.field-note {
|
||||
margin: 0.65rem 0 0;
|
||||
font-size: 0.76rem;
|
||||
line-height: 1.5;
|
||||
color: var(--muted);
|
||||
}
|
||||
.mode-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
margin: 1.8rem 0 1.2rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.mode-tab {
|
||||
border: 0;
|
||||
border-bottom: 3px solid transparent;
|
||||
border-radius: 0;
|
||||
padding-inline: 0.3rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
.mode-tab.active {
|
||||
border-bottom-color: var(--cyan);
|
||||
color: var(--ink);
|
||||
font-weight: 760;
|
||||
}
|
||||
.mode-tab:hover:not(:disabled) {
|
||||
transform: none;
|
||||
background: var(--cyan-soft);
|
||||
color: var(--ink);
|
||||
}
|
||||
.mode-panel {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
.control-group {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
margin-top: 1.7rem;
|
||||
padding: 0.9rem 0 1.05rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.control-title {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
.control-title span {
|
||||
color: var(--cyan);
|
||||
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
|
||||
font-size: 0.67rem;
|
||||
}
|
||||
.button-pair,
|
||||
.button-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.55rem;
|
||||
}
|
||||
.button-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.trust-note {
|
||||
margin-top: 2.4rem;
|
||||
padding-top: 1rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 0.9rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.trust-note span {
|
||||
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
font-size: 0.68rem;
|
||||
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
|
||||
font-size: 0.66rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--plum);
|
||||
color: var(--violet);
|
||||
}
|
||||
|
||||
.trust-note p {
|
||||
margin: 0.45rem 0 0;
|
||||
font-size: 0.8rem;
|
||||
margin: 0.4rem 0 0;
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.55;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.evidence-panel {
|
||||
position: relative;
|
||||
background: var(--paper-deep);
|
||||
background: var(--paper);
|
||||
}
|
||||
|
||||
.evidence-header,
|
||||
.output-heading {
|
||||
.evidence-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.status-chip {
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.64rem;
|
||||
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
font-size: 0.68rem;
|
||||
padding: 0.33rem 0.62rem;
|
||||
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
|
||||
font-size: 0.66rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.status-chip[data-tone="running"] {
|
||||
color: var(--amber);
|
||||
.status-chip[data-tone='busy'] {
|
||||
color: var(--signal);
|
||||
}
|
||||
|
||||
.status-chip[data-tone="success"] {
|
||||
color: var(--moss);
|
||||
.status-chip[data-tone='success'] {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.status-chip[data-tone="failed"] {
|
||||
color: var(--rust);
|
||||
.status-chip[data-tone='failed'] {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
min-height: 450px;
|
||||
min-height: 480px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
max-width: 38ch;
|
||||
line-height: 1.65;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.empty-glyph {
|
||||
width: 12rem;
|
||||
height: 7rem;
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 1.3rem;
|
||||
border-bottom: 1px solid var(--ink);
|
||||
}
|
||||
|
||||
.empty-glyph span {
|
||||
width: 1px;
|
||||
background: var(--ink);
|
||||
transform-origin: bottom;
|
||||
animation: signal 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.empty-glyph span:nth-child(1) {
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.empty-glyph span:nth-child(2) {
|
||||
height: 82%;
|
||||
animation-delay: 180ms;
|
||||
}
|
||||
|
||||
.empty-glyph span:nth-child(3) {
|
||||
height: 54%;
|
||||
animation-delay: 360ms;
|
||||
}
|
||||
|
||||
@keyframes signal {
|
||||
0%,
|
||||
100% {
|
||||
transform: scaleY(0.55);
|
||||
opacity: 0.42;
|
||||
}
|
||||
45% {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.trace-rail {
|
||||
list-style: none;
|
||||
margin: 2.2rem 0;
|
||||
padding: 0;
|
||||
.evidence-rail {
|
||||
width: min(25rem, 80%);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
align-items: center;
|
||||
margin-bottom: 2.2rem;
|
||||
}
|
||||
|
||||
.trace-rail li {
|
||||
.evidence-rail i {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.75rem;
|
||||
min-height: 5rem;
|
||||
}
|
||||
|
||||
.trace-rail li:not(:last-child)::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0.42rem;
|
||||
left: 0.45rem;
|
||||
right: -0.45rem;
|
||||
height: 1px;
|
||||
background: var(--moss);
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
.trace-node {
|
||||
.evidence-rail i::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -0.35rem;
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
border: 1px solid var(--cyan);
|
||||
background: var(--paper);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.ledger {
|
||||
margin: 0;
|
||||
padding: 1rem 0 0;
|
||||
list-style: none;
|
||||
counter-reset: evidence;
|
||||
}
|
||||
.ledger-entry {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
border: 3px solid var(--paper-deep);
|
||||
border-radius: 50%;
|
||||
background: var(--moss);
|
||||
box-shadow: 0 0 0 1px var(--moss);
|
||||
padding: 1.1rem 0 1.2rem 3.5rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
counter-increment: evidence;
|
||||
}
|
||||
|
||||
.trace-rail small,
|
||||
.fact-grid dt,
|
||||
.output-meta dt {
|
||||
display: block;
|
||||
margin-bottom: 0.42rem;
|
||||
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
.ledger-entry::before {
|
||||
content: counter(evidence, decimal-leading-zero);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1.15rem;
|
||||
width: 2.3rem;
|
||||
color: var(--cyan);
|
||||
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.ledger-entry::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 2.35rem;
|
||||
top: 1.05rem;
|
||||
bottom: 1rem;
|
||||
width: 1px;
|
||||
background: var(--line);
|
||||
}
|
||||
.ledger-entry header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: baseline;
|
||||
}
|
||||
.ledger-entry h3 {
|
||||
margin-bottom: 0.35rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.ledger-entry time {
|
||||
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.11em;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.trace-rail strong {
|
||||
font-size: 0.9rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.fact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
margin: 0;
|
||||
border-top: 1px solid var(--ink);
|
||||
border-left: 1px solid var(--ink);
|
||||
}
|
||||
|
||||
.fact-grid div {
|
||||
min-height: 6.4rem;
|
||||
padding: 1rem;
|
||||
border-right: 1px solid var(--ink);
|
||||
border-bottom: 1px solid var(--ink);
|
||||
}
|
||||
|
||||
.fact-grid dd,
|
||||
.output-meta dd {
|
||||
margin: 0;
|
||||
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
font-size: 0.82rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.output-panel {
|
||||
margin-top: 2rem;
|
||||
padding: 1.2rem;
|
||||
border: 1px solid var(--plum);
|
||||
background: var(--white);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.output-heading span {
|
||||
border: 1px solid var(--plum);
|
||||
padding: 0.3rem 0.55rem;
|
||||
font-size: 0.66rem;
|
||||
color: var(--plum);
|
||||
}
|
||||
|
||||
.output-panel pre {
|
||||
.ledger-entry pre {
|
||||
max-height: 28rem;
|
||||
overflow: auto;
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
border-left: 3px solid var(--plum);
|
||||
margin: 0.65rem 0 0;
|
||||
padding: 0.9rem;
|
||||
border-left: 2px solid var(--cyan);
|
||||
background: #e9f0f1;
|
||||
color: #203138;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
font: 0.82rem/1.7 ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
background: #f1eef2;
|
||||
overflow-wrap: anywhere;
|
||||
font: 0.72rem/1.55 ui-monospace, 'SFMono-Regular', Consolas, monospace;
|
||||
}
|
||||
|
||||
.output-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 0.7fr 0.7fr 1.6fr;
|
||||
gap: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.message {
|
||||
min-height: 1.4rem;
|
||||
margin-top: 1.2rem;
|
||||
font-size: 0.82rem;
|
||||
margin-top: 1rem;
|
||||
font-size: 0.8rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.message[data-tone="error"] {
|
||||
color: var(--rust);
|
||||
.message[data-tone='error'] {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding-top: 1rem;
|
||||
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
|
||||
padding-top: 0.9rem;
|
||||
font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
|
||||
font-size: 0.65rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
@media (max-width: 900px) {
|
||||
.masthead,
|
||||
footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.boundary {
|
||||
align-self: flex-start;
|
||||
}
|
||||
.workspace {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.control-deck {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--ink);
|
||||
}
|
||||
|
||||
.trace-rail {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.trace-rail li {
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
||||
.trace-rail li:not(:last-child)::after {
|
||||
left: 0.42rem;
|
||||
right: auto;
|
||||
top: 0.8rem;
|
||||
bottom: -1.45rem;
|
||||
width: 1px;
|
||||
height: auto;
|
||||
.empty-state {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.shell {
|
||||
padding-inline: 0.75rem;
|
||||
padding-inline: 0.65rem;
|
||||
}
|
||||
|
||||
.brand-lockup {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
flex: 0 0 auto;
|
||||
width: 2.7rem;
|
||||
height: 2.7rem;
|
||||
display: none;
|
||||
}
|
||||
.inline-control,
|
||||
.button-pair,
|
||||
.button-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.mode-tabs {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.control-deck,
|
||||
.evidence-panel {
|
||||
padding: 1.25rem;
|
||||
padding: 1.1rem;
|
||||
}
|
||||
|
||||
.inline-control,
|
||||
.actions,
|
||||
.fact-grid,
|
||||
.output-meta {
|
||||
grid-template-columns: 1fr;
|
||||
.ledger-entry {
|
||||
padding-left: 2.8rem;
|
||||
}
|
||||
.ledger-entry::after {
|
||||
left: 1.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -582,7 +497,5 @@ footer {
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,190 +1,297 @@
|
||||
"use strict";
|
||||
'use strict';
|
||||
|
||||
(function () {
|
||||
const commandSchema = "qinglong/cluster-copilot-console-read-request@v1";
|
||||
const sessionForm = document.getElementById("session-form");
|
||||
const sessionInput = document.getElementById("session-token");
|
||||
const targetForm = document.getElementById("target-form");
|
||||
const inspectButton = document.getElementById("inspect-button");
|
||||
const outputButton = document.getElementById("output-button");
|
||||
const emptyState = document.getElementById("empty-state");
|
||||
const resultView = document.getElementById("result-view");
|
||||
const outputPanel = document.getElementById("output-panel");
|
||||
const outputText = document.getElementById("output-text");
|
||||
const message = document.getElementById("message");
|
||||
const statusChip = document.getElementById("status-chip");
|
||||
let sessionToken = "";
|
||||
let currentTarget = null;
|
||||
const schema = 'qinglong/cluster-copilot-console-read-request@v1';
|
||||
const routes = Object.freeze({
|
||||
inspect: '/api/v1/copilot/inspect',
|
||||
output: '/api/v1/copilot/output',
|
||||
run_list: '/api/v1/observe/run-list',
|
||||
run_read: '/api/v1/observe/run',
|
||||
run_event_list: '/api/v1/observe/run-events',
|
||||
run_step_list: '/api/v1/observe/run-steps',
|
||||
task_list: '/api/v1/observe/task-list',
|
||||
task_read: '/api/v1/observe/task',
|
||||
workflow_list: '/api/v1/observe/workflow-list',
|
||||
workflow_run_list: '/api/v1/observe/workflow-run-list',
|
||||
workflow_run_read: '/api/v1/observe/workflow-run',
|
||||
workflow_event_list: '/api/v1/observe/workflow-events',
|
||||
workflow_step_list: '/api/v1/observe/workflow-steps',
|
||||
});
|
||||
const labels = Object.freeze({
|
||||
inspect: 'Copilot 诊断状态',
|
||||
output: 'Copilot 诊断内容',
|
||||
run_list: 'Run 目录',
|
||||
run_read: 'Run 详情',
|
||||
run_event_list: 'Run Events',
|
||||
run_step_list: 'Run Steps',
|
||||
task_list: 'Task 目录',
|
||||
task_read: 'Task 当前修订',
|
||||
workflow_list: 'Workflow 目录',
|
||||
workflow_run_list: 'Workflow Run 目录',
|
||||
workflow_run_read: 'Workflow Run 详情',
|
||||
workflow_event_list: 'Workflow Run Events',
|
||||
workflow_step_list: 'Workflow Run Steps',
|
||||
});
|
||||
const sessionForm = document.getElementById('session-form');
|
||||
const sessionInput = document.getElementById('session-token');
|
||||
const controls = document.getElementById('console-controls');
|
||||
const ledger = document.getElementById('ledger');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
const message = document.getElementById('message');
|
||||
const statusChip = document.getElementById('status-chip');
|
||||
let sessionToken = '';
|
||||
let busy = false;
|
||||
|
||||
const setText = function (id, value) {
|
||||
document.getElementById(id).textContent =
|
||||
value === null || value === undefined || value === "" ? "—" : String(value);
|
||||
const value = function (id) {
|
||||
return document.getElementById(id).value.trim();
|
||||
};
|
||||
|
||||
const setMessage = function (value, tone) {
|
||||
message.textContent = value;
|
||||
message.dataset.tone = tone || "neutral";
|
||||
const requestId = function () {
|
||||
return 'console-' + crypto.randomUUID();
|
||||
};
|
||||
|
||||
const dateTime = function (value) {
|
||||
if (!Number.isSafeInteger(value)) return "—";
|
||||
return new Intl.DateTimeFormat("zh-CN", {
|
||||
dateStyle: "medium",
|
||||
timeStyle: "medium",
|
||||
}).format(new Date(value));
|
||||
const setMessage = function (text, tone) {
|
||||
message.textContent = text;
|
||||
message.dataset.tone = tone || 'neutral';
|
||||
};
|
||||
|
||||
const setBusy = function (busy) {
|
||||
inspectButton.disabled = busy;
|
||||
outputButton.disabled =
|
||||
busy || !currentTarget || currentTarget.outputAvailable !== true;
|
||||
};
|
||||
|
||||
const request = async function (operation, target) {
|
||||
const response = await fetch("/api/v1/copilot/" + operation, {
|
||||
method: "POST",
|
||||
cache: "no-store",
|
||||
credentials: "omit",
|
||||
redirect: "error",
|
||||
referrerPolicy: "no-referrer",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
Authorization: "QL3-Console " + sessionToken,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
schema: commandSchema,
|
||||
operation: operation,
|
||||
projectId: target.projectId,
|
||||
sourceRunId: target.sourceRunId,
|
||||
requestId: target.requestId,
|
||||
}),
|
||||
const setBusy = function (next) {
|
||||
busy = next;
|
||||
document.querySelectorAll('[data-read]').forEach(function (button) {
|
||||
button.disabled = next;
|
||||
});
|
||||
const body = await response.json();
|
||||
if (!response.ok) {
|
||||
const error = new Error(
|
||||
typeof body.code === "string" ? body.code : "console_request_failed",
|
||||
);
|
||||
error.code = typeof body.code === "string" ? body.code : "console_request_failed";
|
||||
throw error;
|
||||
if (next) {
|
||||
statusChip.textContent = '读取中';
|
||||
statusChip.dataset.tone = 'busy';
|
||||
} else if (statusChip.dataset.tone === 'busy') {
|
||||
statusChip.textContent = '只读就绪';
|
||||
statusChip.dataset.tone = 'success';
|
||||
}
|
||||
return body;
|
||||
};
|
||||
|
||||
const targetFromForm = function () {
|
||||
const form = new FormData(targetForm);
|
||||
const base = function (operation) {
|
||||
const projectId = value('project-id');
|
||||
if (!/^[A-Za-z0-9][A-Za-z0-9._:-]{0,127}$/.test(projectId)) {
|
||||
throw new Error('project_id_invalid');
|
||||
}
|
||||
return {
|
||||
projectId: String(form.get("projectId") || "").trim(),
|
||||
sourceRunId: String(form.get("sourceRunId") || "").trim(),
|
||||
requestId: String(form.get("requestId") || "").trim(),
|
||||
schema: schema,
|
||||
operation: operation,
|
||||
projectId: projectId,
|
||||
requestId: requestId(),
|
||||
};
|
||||
};
|
||||
|
||||
const renderInspection = function (response) {
|
||||
const result = response.result;
|
||||
const fact = result.result;
|
||||
currentTarget = {
|
||||
projectId: fact.projectId,
|
||||
sourceRunId: fact.sourceRunId,
|
||||
requestId: fact.requestId,
|
||||
outputAvailable: fact.outputAvailable,
|
||||
};
|
||||
emptyState.hidden = true;
|
||||
resultView.hidden = false;
|
||||
outputPanel.hidden = true;
|
||||
outputText.textContent = "";
|
||||
setText("admitted-at", dateTime(fact.admittedAtMs));
|
||||
setText("stage", fact.stage || (fact.status === "running" ? "processing" : null));
|
||||
setText("outcome", fact.outcome || fact.status);
|
||||
setText("diagnosis-run", fact.diagnosisRunId);
|
||||
setText("reason", fact.reason);
|
||||
setText(
|
||||
"tokens",
|
||||
fact.usage === null ? null : fact.usage.totalTokens,
|
||||
);
|
||||
setText(
|
||||
"cost",
|
||||
fact.usage === null || fact.usage.costMicros === null
|
||||
? null
|
||||
: "$" + (fact.usage.costMicros / 1000000).toFixed(6),
|
||||
);
|
||||
statusChip.textContent = fact.status === "running" ? "诊断进行中" : fact.outcome;
|
||||
statusChip.dataset.tone =
|
||||
fact.status === "running"
|
||||
? "running"
|
||||
: fact.outcome === "succeeded"
|
||||
? "success"
|
||||
: "failed";
|
||||
outputButton.disabled = fact.outputAvailable !== true;
|
||||
setMessage(
|
||||
fact.outputAvailable
|
||||
? "状态已验证。诊断内容仍未读取。"
|
||||
: "状态已验证；当前没有可读取的诊断内容。",
|
||||
);
|
||||
const payload = function (operation) {
|
||||
const result = base(operation);
|
||||
if (operation === 'inspect' || operation === 'output') {
|
||||
result.sourceRunId = value('source-run-id');
|
||||
result.requestId = value('diagnosis-request-id');
|
||||
} else if (operation === 'run_list') {
|
||||
result.afterCreatedAtMs = null;
|
||||
result.afterRunId = null;
|
||||
result.limit = 32;
|
||||
} else if (operation === 'run_read') {
|
||||
result.runId = value('run-id');
|
||||
} else if (operation === 'run_event_list') {
|
||||
result.runId = value('run-id');
|
||||
result.afterSequence = 0;
|
||||
result.limit = 32;
|
||||
} else if (operation === 'run_step_list') {
|
||||
result.runId = value('run-id');
|
||||
result.afterStepKey = null;
|
||||
result.afterStepRunId = null;
|
||||
result.limit = 32;
|
||||
} else if (operation === 'task_list') {
|
||||
result.afterTaskId = null;
|
||||
result.limit = 32;
|
||||
} else if (operation === 'task_read') {
|
||||
result.taskId = value('task-id');
|
||||
} else if (operation === 'workflow_list') {
|
||||
result.packageName = value('package-name');
|
||||
} else {
|
||||
result.packageName = value('package-name');
|
||||
result.workflowId = value('workflow-id');
|
||||
if (operation === 'workflow_run_list') {
|
||||
result.afterAdmittedAtMs = null;
|
||||
result.afterRunId = null;
|
||||
result.limit = 32;
|
||||
} else {
|
||||
result.runId = value('workflow-run-id');
|
||||
if (operation === 'workflow_event_list') {
|
||||
result.afterSequence = 0;
|
||||
result.limit = 32;
|
||||
} else if (operation === 'workflow_step_list') {
|
||||
result.afterStepKey = null;
|
||||
result.afterStepRunId = null;
|
||||
result.limit = 32;
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
const renderOutput = function (response) {
|
||||
const nextPage = function (operation, prior, fact) {
|
||||
const next = Object.assign({}, prior, { requestId: requestId() });
|
||||
if (operation === 'run_list' && fact.hasMore === true && fact.next) {
|
||||
next.afterCreatedAtMs = fact.next.createdAtMs;
|
||||
next.afterRunId = fact.next.runId;
|
||||
} else if (
|
||||
operation === 'task_list' &&
|
||||
fact.hasMore === true &&
|
||||
fact.next
|
||||
) {
|
||||
next.afterTaskId = fact.next.taskId;
|
||||
} else if (operation === 'run_event_list' && fact.hasMore === true) {
|
||||
next.afterSequence = fact.nextAfterSequence;
|
||||
} else if (
|
||||
operation === 'run_step_list' &&
|
||||
fact.hasMore === true &&
|
||||
fact.next
|
||||
) {
|
||||
next.afterStepKey = fact.next.stepKey;
|
||||
next.afterStepRunId = fact.next.stepRunId;
|
||||
} else if (
|
||||
operation === 'workflow_run_list' &&
|
||||
fact.truncated === true &&
|
||||
fact.next
|
||||
) {
|
||||
next.afterAdmittedAtMs = fact.next.admittedAtMs;
|
||||
next.afterRunId = fact.next.runId;
|
||||
} else if (
|
||||
operation === 'workflow_event_list' &&
|
||||
fact.truncated === true &&
|
||||
fact.nextAfterSequence !== null
|
||||
) {
|
||||
next.afterSequence = fact.nextAfterSequence;
|
||||
} else if (
|
||||
operation === 'workflow_step_list' &&
|
||||
fact.truncated === true &&
|
||||
fact.next
|
||||
) {
|
||||
next.afterStepKey = fact.next.stepKey;
|
||||
next.afterStepRunId = fact.next.id;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
return next;
|
||||
};
|
||||
|
||||
const appendEvidence = function (operation, request, response) {
|
||||
const fact = response.result.result;
|
||||
outputPanel.hidden = false;
|
||||
outputText.textContent = fact.result.text;
|
||||
setText("finish-reason", fact.result.finishReason);
|
||||
setText("output-bytes", fact.reference.outputBytes);
|
||||
setText("content-digest", fact.reference.contentDigest);
|
||||
setMessage("诊断内容已显式读取；请把它当作不可信建议进行复核。");
|
||||
outputPanel.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
||||
const entry = document.createElement('li');
|
||||
entry.className = 'ledger-entry';
|
||||
const header = document.createElement('header');
|
||||
const title = document.createElement('h3');
|
||||
const time = document.createElement('time');
|
||||
const output = document.createElement('pre');
|
||||
title.textContent = labels[operation];
|
||||
time.textContent = new Intl.DateTimeFormat('zh-CN', {
|
||||
dateStyle: 'short',
|
||||
timeStyle: 'medium',
|
||||
}).format(new Date());
|
||||
output.tabIndex = 0;
|
||||
output.textContent = JSON.stringify(fact, null, 2);
|
||||
header.append(title, time);
|
||||
entry.append(header, output);
|
||||
const next = nextPage(operation, request, fact);
|
||||
if (next) {
|
||||
const button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.textContent = '显式读取下一页';
|
||||
button.addEventListener('click', function () {
|
||||
void execute(operation, next);
|
||||
});
|
||||
entry.append(button);
|
||||
}
|
||||
ledger.prepend(entry);
|
||||
emptyState.hidden = true;
|
||||
ledger.hidden = false;
|
||||
};
|
||||
|
||||
sessionForm.addEventListener("submit", function (event) {
|
||||
const execute = async function (operation, prepared) {
|
||||
if (busy) return;
|
||||
setBusy(true);
|
||||
setMessage('正在读取 ' + labels[operation] + '…');
|
||||
try {
|
||||
const body = prepared || payload(operation);
|
||||
const response = await fetch(routes[operation], {
|
||||
method: 'POST',
|
||||
cache: 'no-store',
|
||||
credentials: 'omit',
|
||||
redirect: 'error',
|
||||
referrerPolicy: 'no-referrer',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json; charset=utf-8',
|
||||
Authorization: 'QL3-Console ' + sessionToken,
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
const responseBody = await response.json();
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
typeof responseBody.code === 'string'
|
||||
? responseBody.code
|
||||
: 'console_request_failed',
|
||||
);
|
||||
}
|
||||
appendEvidence(operation, body, responseBody);
|
||||
setMessage(
|
||||
labels[operation] + ' 已加入本页证据账本。刷新页面会清空。',
|
||||
'success',
|
||||
);
|
||||
} catch (error) {
|
||||
statusChip.textContent = '读取失败';
|
||||
statusChip.dataset.tone = 'failed';
|
||||
setMessage(
|
||||
'无法读取：' +
|
||||
(error instanceof Error ? error.message : 'console_request_failed'),
|
||||
'error',
|
||||
);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
sessionForm.addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
const candidate = sessionInput.value.trim();
|
||||
if (!/^[A-Za-z0-9_-]{43}$/.test(candidate)) {
|
||||
setMessage("浏览器访问密钥格式无效。", "error");
|
||||
setMessage('浏览器访问密钥格式无效。', 'error');
|
||||
return;
|
||||
}
|
||||
sessionToken = candidate;
|
||||
sessionInput.value = "";
|
||||
sessionInput.value = '';
|
||||
sessionForm.hidden = true;
|
||||
targetForm.hidden = false;
|
||||
setMessage("本次页面已解锁。访问密钥只保留在内存中。");
|
||||
document.getElementById("project-id").focus();
|
||||
controls.hidden = false;
|
||||
statusChip.textContent = '只读就绪';
|
||||
statusChip.dataset.tone = 'success';
|
||||
setMessage('本页已解锁；Cluster credential 仍只存在于服务端。', 'success');
|
||||
document.getElementById('project-id').focus();
|
||||
});
|
||||
|
||||
targetForm.addEventListener("submit", async function (event) {
|
||||
event.preventDefault();
|
||||
const target = targetFromForm();
|
||||
setBusy(true);
|
||||
setMessage("正在读取 durable status…");
|
||||
try {
|
||||
const response = await request("inspect", target);
|
||||
renderInspection(response);
|
||||
} catch (error) {
|
||||
currentTarget = null;
|
||||
outputPanel.hidden = true;
|
||||
statusChip.textContent = "读取失败";
|
||||
statusChip.dataset.tone = "failed";
|
||||
setMessage("无法读取诊断状态：" + error.code, "error");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
document.querySelectorAll('.mode-tab').forEach(function (tab) {
|
||||
tab.addEventListener('click', function () {
|
||||
document.querySelectorAll('.mode-tab').forEach(function (candidate) {
|
||||
const selected = candidate === tab;
|
||||
candidate.classList.toggle('active', selected);
|
||||
candidate.setAttribute('aria-pressed', String(selected));
|
||||
});
|
||||
document.querySelectorAll('.mode-panel').forEach(function (panel) {
|
||||
panel.hidden = panel.id !== tab.dataset.panel;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
outputButton.addEventListener("click", async function () {
|
||||
if (!currentTarget || currentTarget.outputAvailable !== true) return;
|
||||
setBusy(true);
|
||||
setMessage("正在显式读取诊断内容…");
|
||||
try {
|
||||
const response = await request("output", currentTarget);
|
||||
renderOutput(response);
|
||||
} catch (error) {
|
||||
setMessage("无法读取诊断内容：" + error.code, "error");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
document.querySelectorAll('[data-read]').forEach(function (button) {
|
||||
button.addEventListener('click', function () {
|
||||
void execute(button.dataset.read);
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener("pagehide", function () {
|
||||
sessionToken = "";
|
||||
currentTarget = null;
|
||||
outputText.textContent = "";
|
||||
window.addEventListener('pagehide', function () {
|
||||
sessionToken = '';
|
||||
ledger.textContent = '';
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -4,214 +4,136 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="color-scheme" content="light" />
|
||||
<meta
|
||||
name="description"
|
||||
content="QingLong 3.0 Cluster Copilot 只读诊断台"
|
||||
/>
|
||||
<title>QingLong 3.0 · Copilot 诊断台</title>
|
||||
<meta name="description" content="QingLong 3.0 Cluster 只读现场记录台" />
|
||||
<title>QingLong 3.0 · Cluster 现场记录台</title>
|
||||
<link rel="stylesheet" href="/app.css" />
|
||||
<script src="/app.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip-link" href="#workspace">跳到诊断工作区</a>
|
||||
<a class="skip-link" href="#workspace">跳到观察工作区</a>
|
||||
<div class="shell">
|
||||
<header class="masthead">
|
||||
<div class="brand-lockup" aria-label="QingLong 3.0 Cluster Console">
|
||||
<div class="brand-lockup">
|
||||
<span class="brand-mark" aria-hidden="true">QL</span>
|
||||
<div>
|
||||
<p class="eyebrow">QingLong 3.0 / Cluster field console</p>
|
||||
<h1>故障诊断，不替你执行。</h1>
|
||||
<p class="eyebrow">QingLong 3.0 / Cluster field ledger</p>
|
||||
<h1>沿着证据读，不替集群做决定。</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boundary" aria-label="当前权限边界">
|
||||
<span class="boundary-dot" aria-hidden="true"></span>
|
||||
<span>只读边界</span>
|
||||
<strong>inspect · output</strong>
|
||||
<span>本机只读 BFF</span>
|
||||
<strong>Run · Task · Workflow · Copilot</strong>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="workspace" class="workspace">
|
||||
<section class="control-deck" aria-labelledby="target-title">
|
||||
<aside class="control-deck" aria-labelledby="control-title">
|
||||
<div class="section-heading">
|
||||
<p class="eyebrow">Target coordinates</p>
|
||||
<h2 id="target-title">定位一次诊断</h2>
|
||||
<p>
|
||||
输入已存在的 Project、源 Run 和诊断请求。页面不会创建、取消或重试任何任务。
|
||||
</p>
|
||||
<p class="eyebrow">Observation coordinates</p>
|
||||
<h2 id="control-title">选择要读取的事实</h2>
|
||||
<p>每次按钮点击只发起一次有界 GET。页面不创建、取消、重试、轮询或缓存任何任务。</p>
|
||||
</div>
|
||||
|
||||
<form id="session-form" class="session-gate" autocomplete="off">
|
||||
<label for="session-token">浏览器访问密钥</label>
|
||||
<div class="inline-control">
|
||||
<input
|
||||
id="session-token"
|
||||
name="sessionToken"
|
||||
type="password"
|
||||
inputmode="text"
|
||||
spellcheck="false"
|
||||
autocomplete="off"
|
||||
required
|
||||
pattern="[A-Za-z0-9_\-]{43}"
|
||||
aria-describedby="session-note"
|
||||
/>
|
||||
<button type="submit">解锁本次页面</button>
|
||||
<input id="session-token" name="sessionToken" type="password" autocomplete="off" spellcheck="false" required pattern="[A-Za-z0-9_\-]{43}" />
|
||||
<button type="submit">解锁本页</button>
|
||||
</div>
|
||||
<p id="session-note" class="field-note">
|
||||
从独立的 0600 session 文件读取并粘贴；仅保留在当前页面内存，不会发送到 Cluster API。
|
||||
</p>
|
||||
<p class="field-note">从独立的 0600 session 文件粘贴；密钥只存在于当前页面内存。</p>
|
||||
</form>
|
||||
|
||||
<form id="target-form" class="target-form" autocomplete="off" hidden>
|
||||
<label for="project-id">Project</label>
|
||||
<input
|
||||
id="project-id"
|
||||
name="projectId"
|
||||
type="text"
|
||||
maxlength="128"
|
||||
spellcheck="false"
|
||||
autocomplete="off"
|
||||
placeholder="project-main"
|
||||
required
|
||||
/>
|
||||
<div id="console-controls" hidden>
|
||||
<label class="field-label" for="project-id">Project</label>
|
||||
<input id="project-id" type="text" maxlength="128" autocomplete="off" spellcheck="false" placeholder="project-main" required />
|
||||
|
||||
<label for="run-id">源 Run</label>
|
||||
<input
|
||||
id="run-id"
|
||||
name="sourceRunId"
|
||||
type="text"
|
||||
maxlength="36"
|
||||
spellcheck="false"
|
||||
autocomplete="off"
|
||||
placeholder="run_..."
|
||||
required
|
||||
/>
|
||||
<nav class="mode-tabs" aria-label="观察面">
|
||||
<button type="button" class="mode-tab active" data-panel="runtime-panel" aria-pressed="true">运行态</button>
|
||||
<button type="button" class="mode-tab" data-panel="workflow-panel" aria-pressed="false">工作流</button>
|
||||
<button type="button" class="mode-tab" data-panel="copilot-panel" aria-pressed="false">Copilot</button>
|
||||
</nav>
|
||||
|
||||
<label for="request-id">诊断请求</label>
|
||||
<input
|
||||
id="request-id"
|
||||
name="requestId"
|
||||
type="text"
|
||||
maxlength="128"
|
||||
spellcheck="false"
|
||||
autocomplete="off"
|
||||
placeholder="diag-request-..."
|
||||
required
|
||||
/>
|
||||
<section id="runtime-panel" class="mode-panel">
|
||||
<div class="control-group">
|
||||
<div class="control-title"><span>01</span><strong>目录</strong></div>
|
||||
<div class="button-pair">
|
||||
<button type="button" data-read="task_list">读取 Task 列表</button>
|
||||
<button type="button" data-read="run_list">读取 Run 列表</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="control-title"><span>02</span><strong>Task 详情</strong></div>
|
||||
<input id="task-id" type="text" maxlength="128" autocomplete="off" spellcheck="false" placeholder="task-id" />
|
||||
<button type="button" data-read="task_read">读取当前修订</button>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<div class="control-title"><span>03</span><strong>Run 证据链</strong></div>
|
||||
<input id="run-id" type="text" maxlength="128" autocomplete="off" spellcheck="false" placeholder="run-id" />
|
||||
<div class="button-grid">
|
||||
<button type="button" data-read="run_read">读取 Run</button>
|
||||
<button type="button" data-read="run_step_list">读取 Steps</button>
|
||||
<button type="button" data-read="run_event_list">读取 Events</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="actions">
|
||||
<button id="inspect-button" class="primary" type="submit">
|
||||
读取诊断状态
|
||||
</button>
|
||||
<button id="output-button" type="button" disabled>
|
||||
显式读取诊断内容
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<section id="workflow-panel" class="mode-panel" hidden>
|
||||
<label class="field-label" for="package-name">Package</label>
|
||||
<input id="package-name" type="text" maxlength="63" autocomplete="off" spellcheck="false" placeholder="ops-package" />
|
||||
<button type="button" data-read="workflow_list">读取 Workflow 列表</button>
|
||||
<label class="field-label" for="workflow-id">Workflow</label>
|
||||
<input id="workflow-id" type="text" maxlength="63" autocomplete="off" spellcheck="false" placeholder="daily-maintenance" />
|
||||
<button type="button" data-read="workflow_run_list">读取 Workflow Runs</button>
|
||||
<label class="field-label" for="workflow-run-id">Workflow Run UUID</label>
|
||||
<input id="workflow-run-id" type="text" maxlength="36" autocomplete="off" spellcheck="false" placeholder="00000000-0000-4000-8000-000000000000" />
|
||||
<div class="button-grid">
|
||||
<button type="button" data-read="workflow_run_read">读取 Run</button>
|
||||
<button type="button" data-read="workflow_step_list">读取 Steps</button>
|
||||
<button type="button" data-read="workflow_event_list">读取 Events</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="copilot-panel" class="mode-panel" hidden>
|
||||
<label class="field-label" for="source-run-id">源 Run</label>
|
||||
<input id="source-run-id" type="text" maxlength="36" autocomplete="off" spellcheck="false" placeholder="run-source-1" />
|
||||
<label class="field-label" for="diagnosis-request-id">诊断请求</label>
|
||||
<input id="diagnosis-request-id" type="text" maxlength="128" autocomplete="off" spellcheck="false" placeholder="diagnosis-request-1" />
|
||||
<div class="button-pair">
|
||||
<button type="button" class="primary" data-read="inspect">读取诊断状态</button>
|
||||
<button type="button" data-read="output">显式读取诊断内容</button>
|
||||
</div>
|
||||
<p class="field-note">模型文本是不可信内容，只会以纯文本进入证据账本。</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<aside class="trust-note">
|
||||
<span>Authority note</span>
|
||||
<p>
|
||||
Cluster credential 只存在于本机 BFF 的私有文件中。浏览器不能读取它，也不能调用 diagnose 或 cancel。
|
||||
</p>
|
||||
<span>Authority boundary</span>
|
||||
<p>Cluster credential 只由本机进程从私有文件读取。浏览器无法提交任意路径，也没有 start、cancel 或 diagnose 权限入口。</p>
|
||||
</aside>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<section class="evidence-panel" aria-labelledby="evidence-title">
|
||||
<div class="evidence-header">
|
||||
<div>
|
||||
<p class="eyebrow">Durable evidence</p>
|
||||
<h2 id="evidence-title">诊断轨迹</h2>
|
||||
<p class="eyebrow">Explicit read ledger</p>
|
||||
<h2 id="evidence-title">本页证据账本</h2>
|
||||
</div>
|
||||
<span id="status-chip" class="status-chip" data-tone="idle">等待目标</span>
|
||||
<span id="status-chip" class="status-chip" data-tone="idle">等待读取</span>
|
||||
</div>
|
||||
|
||||
<div id="empty-state" class="empty-state">
|
||||
<div class="empty-glyph" aria-hidden="true">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<h3>先读取状态，再决定是否查看内容</h3>
|
||||
<p>
|
||||
状态响应只包含有界、低敏的 durable facts。模型文本必须由你再次明确选择。
|
||||
</p>
|
||||
<div class="evidence-rail" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
|
||||
<h3>一次读取，一条可复核事实</h3>
|
||||
<p>先解锁页面并选择坐标。返回值按读取顺序保留在当前内存，reload 后清空。</p>
|
||||
</div>
|
||||
|
||||
<div id="result-view" hidden>
|
||||
<ol class="trace-rail" aria-label="诊断状态时间线">
|
||||
<li>
|
||||
<span class="trace-node"></span>
|
||||
<div>
|
||||
<small>ADMITTED</small>
|
||||
<strong id="admitted-at">—</strong>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="trace-node"></span>
|
||||
<div>
|
||||
<small>STAGE</small>
|
||||
<strong id="stage">—</strong>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<span class="trace-node"></span>
|
||||
<div>
|
||||
<small>OUTCOME</small>
|
||||
<strong id="outcome">—</strong>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<dl class="fact-grid">
|
||||
<div>
|
||||
<dt>Diagnosis Run</dt>
|
||||
<dd id="diagnosis-run">—</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Reason</dt>
|
||||
<dd id="reason">—</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Tokens</dt>
|
||||
<dd id="tokens">—</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Settled cost</dt>
|
||||
<dd id="cost">—</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<section id="output-panel" class="output-panel" hidden>
|
||||
<div class="output-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Explicit content read</p>
|
||||
<h3>诊断内容</h3>
|
||||
</div>
|
||||
<span>不可信模型输出</span>
|
||||
</div>
|
||||
<pre id="output-text" tabindex="0"></pre>
|
||||
<dl class="output-meta">
|
||||
<div>
|
||||
<dt>Finish reason</dt>
|
||||
<dd id="finish-reason">—</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Output bytes</dt>
|
||||
<dd id="output-bytes">—</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Content digest</dt>
|
||||
<dd id="content-digest">—</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<ol id="ledger" class="ledger" aria-live="polite" hidden></ol>
|
||||
<div id="message" class="message" role="status" aria-live="polite"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<span>Loopback only · no legacy session · no browser credential</span>
|
||||
<span>QingLong 3.0 incubation / D-327</span>
|
||||
<span>Loopback only · explicit reads · zero polling</span>
|
||||
<span>QingLong 3.0 incubation / D-329</span>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user