mirror of
https://github.com/deepseek-ai/deepseek-harness
synced 2026-08-15 21:04:50 +00:00
96076606df
fixing-accessibility: expandable rows expose aria-expanded/controls, user messages become keyboard-operable buttons, pane dividers and the composer gain accessible names, the live status row announces politely, the busy form sets aria-busy, feedback failures render inline next to the form, and the muted/faint text tiers rise to AA-viable contrast. fixing-motion-performance: composer autosize moves to CSS field-sizing (dropping the per-keystroke measure/write cycle) and streaming scroll writes coalesce per frame while direct user actions stay synchronous. baseline-ui: data columns use tabular numerals, headings balance and prose wraps pretty, and z-index joins the token scale. improve-ui: straggler radii and control heights land on the declared size scale (radius-xs joins the ramp). fixing-metadata: the document language follows the active locale.
2979 lines
53 KiB
CSS
2979 lines
53 KiB
CSS
/* Design tokens. Layering follows the Codex desktop recipe: a foreground color
|
|
plus mix ratios derives text tiers, borders, and interaction overlays, so the
|
|
relationships hold on any surface and a dark theme is a two-variable change. */
|
|
:root {
|
|
color-scheme: light;
|
|
|
|
/* Surfaces */
|
|
--bg: #f5f5f4;
|
|
--paper: #ffffff;
|
|
--paper-soft: #fafaf9;
|
|
--sidebar: rgba(238, 238, 236, 0.86);
|
|
--sidebar-strong: rgba(226, 226, 223, 0.92);
|
|
|
|
/* Foreground recipe: text tiers are opacity steps of one ink color. */
|
|
--fg: #20201f;
|
|
--ink: var(--fg);
|
|
--ink-soft: color-mix(in oklab, var(--fg) 72%, transparent);
|
|
--muted: color-mix(in oklab, var(--fg) 58%, transparent);
|
|
--faint: color-mix(in oklab, var(--fg) 44%, transparent);
|
|
|
|
/* Borders derive from the same foreground. */
|
|
--line: color-mix(in oklab, var(--fg) 11%, transparent);
|
|
--line-strong: color-mix(in oklab, var(--fg) 17%, transparent);
|
|
|
|
/* Interaction overlays: neutral gray works on light and dark surfaces. */
|
|
--hover-overlay: rgba(127, 127, 127, 0.08);
|
|
--active-overlay: rgba(127, 127, 127, 0.16);
|
|
|
|
/* Accents */
|
|
--accent: #1f6feb;
|
|
--selected-bg: color-mix(in oklab, var(--accent) 9%, transparent);
|
|
--focus-ring: color-mix(in oklab, var(--accent) 65%, transparent);
|
|
--green: #238454;
|
|
--amber: #9a6700;
|
|
--red: #c93c37;
|
|
|
|
/* Shadows: hairline ring plus low-alpha elevation steps. */
|
|
--shadow-hairline: 0 0 0 0.5px rgba(0, 0, 0, 0.1);
|
|
--shadow-sm: 0 1px 2px -1px rgba(0, 0, 0, 0.08);
|
|
--shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 4px 8px -2px rgba(0, 0, 0, 0.1);
|
|
--shadow: var(--shadow-lg);
|
|
|
|
/* Size scale: 4px base; control heights and rows come in fixed steps. */
|
|
--spacing: 4px;
|
|
--control-sm: 24px;
|
|
--control-md: 28px;
|
|
--control-lg: 32px;
|
|
--control-xl: 36px;
|
|
--row-table: 30px;
|
|
--row-list: 42px;
|
|
--radius-xs: 6px;
|
|
--radius-sm: 8px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 16px;
|
|
|
|
/* Z-index scale: sticky headers, floating controls, overlays, toast. */
|
|
--z-sticky: 2;
|
|
--z-floating: 3;
|
|
--z-overlay: 10;
|
|
--z-toast: 40;
|
|
|
|
/* Motion: one curve, three duration tiers. */
|
|
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
|
|
--duration-fast: 80ms;
|
|
--duration-basic: 150ms;
|
|
--duration-relaxed: 300ms;
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.45;
|
|
color: var(--ink);
|
|
background: var(--bg);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
overflow: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
textarea:focus-visible,
|
|
summary:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.harness-shell {
|
|
--left-w: 268px;
|
|
--inspector-w: 400px;
|
|
display: grid;
|
|
grid-template-columns: var(--left-w) 6px minmax(0, 1fr);
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: var(--bg);
|
|
}
|
|
|
|
/* The drawer never crushes the middle pane: it is capped to a viewport share
|
|
and the content column keeps a working minimum. */
|
|
.harness-shell.inspector-open {
|
|
grid-template-columns: var(--left-w) 6px minmax(360px, 1fr) 6px min(var(--inspector-w), 34vw);
|
|
}
|
|
|
|
.pane-divider {
|
|
width: 6px;
|
|
cursor: col-resize;
|
|
background: transparent;
|
|
transition: background 120ms var(--ease-out);
|
|
}
|
|
|
|
.pane-divider:hover,
|
|
.pane-divider.dragging {
|
|
background: rgba(31, 111, 235, 0.22);
|
|
}
|
|
|
|
.pane-divider[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.source-list {
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
/* Top padding clears the macOS traffic lights (hiddenInset title bar). */
|
|
padding: 40px 10px 12px;
|
|
border-right: 1px solid rgba(0, 0, 0, 0.08);
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)),
|
|
var(--sidebar);
|
|
backdrop-filter: blur(28px) saturate(160%);
|
|
}
|
|
|
|
.app-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 8px 12px;
|
|
}
|
|
|
|
.brand-title {
|
|
overflow: hidden;
|
|
font-size: 18px;
|
|
font-weight: 720;
|
|
letter-spacing: -0.035em;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.runtime-dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 999px;
|
|
background: var(--amber);
|
|
box-shadow: 0 0 0 4px rgba(154, 103, 0, 0.1);
|
|
}
|
|
|
|
.runtime-dot.running {
|
|
background: var(--green);
|
|
box-shadow: 0 0 0 4px rgba(35, 132, 84, 0.12);
|
|
}
|
|
|
|
.runtime-dot.error {
|
|
background: var(--red);
|
|
box-shadow: 0 0 0 4px rgba(201, 60, 55, 0.12);
|
|
}
|
|
|
|
.primary-actions {
|
|
padding: 0 4px 12px;
|
|
}
|
|
|
|
.primary-action {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: var(--control-lg);
|
|
padding: 0 10px;
|
|
border-radius: var(--radius-sm);
|
|
background: #20201f;
|
|
color: #fff;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.language-toggle {
|
|
height: var(--control-md);
|
|
padding: 0 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: rgba(255, 255, 255, 0.72);
|
|
color: var(--ink-soft);
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.language-toggle:hover {
|
|
background: #fff;
|
|
}
|
|
|
|
kbd {
|
|
font: inherit;
|
|
color: rgba(255, 255, 255, 0.62);
|
|
}
|
|
|
|
.product-nav,
|
|
.session-list {
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.product-nav {
|
|
padding-bottom: 14px;
|
|
}
|
|
|
|
.module-button,
|
|
.session-item {
|
|
width: 100%;
|
|
border-radius: var(--radius-md);
|
|
text-align: left;
|
|
transition: background 120ms var(--ease-out);
|
|
}
|
|
|
|
/* Module nav rows match the primary action exactly: one control height. */
|
|
.module-button {
|
|
display: flex;
|
|
align-items: center;
|
|
height: var(--control-lg);
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.module-button:not(.selected) {
|
|
opacity: 0.82;
|
|
}
|
|
|
|
.module-button:hover,
|
|
.session-item:hover,
|
|
.toolbar-actions button:hover,
|
|
.surface-switcher button:hover {
|
|
background: var(--hover-overlay);
|
|
}
|
|
|
|
.module-button.selected,
|
|
.session-item.selected {
|
|
background: var(--sidebar-strong);
|
|
}
|
|
|
|
.session-item.child {
|
|
width: calc(100% - 14px);
|
|
margin-left: 14px;
|
|
}
|
|
|
|
.session-item.child .session-glyph {
|
|
color: var(--faint);
|
|
}
|
|
|
|
.module-button span,
|
|
.session-copy {
|
|
display: grid;
|
|
min-width: 0;
|
|
}
|
|
|
|
.module-button strong,
|
|
.session-copy strong {
|
|
overflow: hidden;
|
|
color: #262624;
|
|
font-weight: 650;
|
|
line-height: 1.35;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.module-button small,
|
|
.session-copy small {
|
|
overflow: hidden;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
line-height: 1.3;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.session-search {
|
|
display: grid;
|
|
gap: 6px;
|
|
padding: 0 8px 10px;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.session-search input {
|
|
width: 100%;
|
|
height: var(--control-lg);
|
|
padding: 0 9px;
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
border-radius: var(--radius-sm);
|
|
background: rgba(255, 255, 255, 0.56);
|
|
outline: none;
|
|
}
|
|
|
|
.session-group {
|
|
min-height: 0;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.session-group:last-of-type {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
.group-title {
|
|
padding: 0 8px 5px;
|
|
color: var(--faint);
|
|
font-size: 11px;
|
|
font-weight: 720;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.session-item {
|
|
display: grid;
|
|
grid-template-columns: 18px minmax(0, 1fr);
|
|
align-items: center;
|
|
min-height: var(--row-list);
|
|
gap: 7px;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.session-glyph {
|
|
color: var(--green);
|
|
font-size: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-list {
|
|
padding: 8px;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.source-footer {
|
|
display: grid;
|
|
gap: 2px;
|
|
margin-top: auto;
|
|
padding: 10px 8px 0;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.source-footer strong {
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.harness-main {
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
grid-template-rows: 58px auto minmax(0, 1fr) auto;
|
|
background: var(--paper);
|
|
}
|
|
|
|
.topbar {
|
|
grid-row: 1;
|
|
}
|
|
|
|
.notice {
|
|
grid-row: 2;
|
|
}
|
|
|
|
.session-canvas,
|
|
.module-canvas {
|
|
grid-row: 3;
|
|
}
|
|
|
|
.composer {
|
|
grid-row: 4;
|
|
}
|
|
|
|
.topbar {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 1fr) auto auto;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 8px 16px 8px 20px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: rgba(255, 255, 255, 0.84);
|
|
backdrop-filter: blur(24px);
|
|
}
|
|
|
|
.chat-topbar {
|
|
background: rgba(255, 255, 255, 0.74);
|
|
}
|
|
|
|
.chat-topbar .title-area h1 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.title-area {
|
|
min-width: 0;
|
|
}
|
|
|
|
.crumb {
|
|
overflow: hidden;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.title-area h1 {
|
|
overflow: hidden;
|
|
margin: 1px 0 0;
|
|
font-size: 16px;
|
|
font-weight: 720;
|
|
letter-spacing: -0.025em;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.surface-switcher {
|
|
display: flex;
|
|
gap: 3px;
|
|
padding: 3px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
background: var(--paper-soft);
|
|
}
|
|
|
|
.surface-switcher button {
|
|
height: calc(var(--control-lg) - 6px);
|
|
padding: 0 10px;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.surface-switcher button.active {
|
|
background: #fff;
|
|
color: var(--ink);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.toolbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 1px;
|
|
}
|
|
|
|
.toolbar-actions button,
|
|
.module-card button {
|
|
height: var(--control-md);
|
|
padding: 0 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: #fff;
|
|
color: var(--ink-soft);
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.session-canvas,
|
|
.module-canvas {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 22px 34px 34px;
|
|
background:
|
|
linear-gradient(180deg, rgba(250, 250, 249, 0.86), rgba(255, 255, 255, 0) 160px),
|
|
var(--paper);
|
|
}
|
|
|
|
/* The session canvas hosts the three always-mounted views; each view is its
|
|
own scroll container so switching surfaces preserves scroll positions. */
|
|
.session-canvas {
|
|
display: grid;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
.session-canvas[hidden],
|
|
.module-canvas[hidden],
|
|
.composer[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.view {
|
|
display: none;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
grid-area: 1 / 1;
|
|
}
|
|
|
|
.view.active {
|
|
display: block;
|
|
}
|
|
|
|
.view.chat-view {
|
|
position: relative;
|
|
overflow: auto;
|
|
padding: 22px 34px 12px;
|
|
}
|
|
|
|
.view.wf-view {
|
|
overflow: auto;
|
|
padding: 22px 34px 34px;
|
|
}
|
|
|
|
.view.traj-view.active {
|
|
display: grid;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.develop-canvas {
|
|
overflow: hidden;
|
|
padding: 0;
|
|
background: var(--paper);
|
|
}
|
|
|
|
.notice {
|
|
display: grid;
|
|
gap: 4px;
|
|
max-width: 920px;
|
|
margin: 0 auto 16px;
|
|
padding: 11px 13px;
|
|
border: 1px solid #f1b8b4;
|
|
border-radius: var(--radius-lg);
|
|
background: #fff8f7;
|
|
color: var(--red);
|
|
}
|
|
|
|
.run-strip {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
max-width: 1020px;
|
|
gap: 14px;
|
|
margin: 0 auto 18px;
|
|
padding: 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-xl);
|
|
background: rgba(255, 255, 255, 0.82);
|
|
}
|
|
|
|
.run-identity {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 2px;
|
|
text-align: left;
|
|
}
|
|
|
|
.run-identity.is-selected,
|
|
.chat-row.is-selected .message-bubble,
|
|
.chat-row.is-selected .assistant-message,
|
|
.fold-row.is-selected summary,
|
|
.tree-row.is-selected,
|
|
.span-row.is-selected,
|
|
.context-card.is-selected {
|
|
outline: 2px solid rgba(31, 111, 235, 0.22);
|
|
outline-offset: 2px;
|
|
background: rgba(31, 111, 235, 0.06);
|
|
}
|
|
|
|
.run-identity strong {
|
|
font-weight: 720;
|
|
}
|
|
|
|
.run-identity span {
|
|
overflow: hidden;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.run-metrics {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.run-metrics span {
|
|
display: grid;
|
|
min-width: 52px;
|
|
padding: 6px 8px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--paper-soft);
|
|
text-align: center;
|
|
}
|
|
|
|
.run-metrics strong {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.run-metrics small {
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.surface {
|
|
max-width: 980px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.chat-surface {
|
|
display: grid;
|
|
gap: 22px;
|
|
width: min(920px, 100%);
|
|
max-width: 920px;
|
|
padding: 26px 0 22px;
|
|
}
|
|
|
|
.message {
|
|
display: grid;
|
|
grid-template-columns: 36px minmax(0, 1fr);
|
|
gap: 11px;
|
|
text-align: left;
|
|
}
|
|
|
|
.avatar {
|
|
display: grid;
|
|
width: 36px;
|
|
height: 36px;
|
|
place-items: center;
|
|
border-radius: var(--radius-lg);
|
|
background: #eef1f6;
|
|
color: #455064;
|
|
font-size: 12px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.message.assistant .avatar {
|
|
background: rgba(154, 103, 0, 0.12);
|
|
color: var(--amber);
|
|
}
|
|
|
|
.message-card {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 0;
|
|
}
|
|
|
|
#conversation .message {
|
|
margin: -6px -12px;
|
|
padding: 6px 12px;
|
|
border-radius: var(--radius-lg);
|
|
cursor: pointer;
|
|
transition: background 120ms var(--ease-out);
|
|
}
|
|
|
|
#conversation .message:hover {
|
|
background: #f6f8fb;
|
|
}
|
|
|
|
.message.user {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
justify-items: stretch;
|
|
}
|
|
|
|
.message.user .avatar {
|
|
display: none;
|
|
}
|
|
|
|
.message.is-selected .message-card {
|
|
outline: 2px solid rgba(31, 111, 235, 0.22);
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
.user-bubble {
|
|
justify-self: end;
|
|
max-width: min(680px, 76%);
|
|
padding: 10px 13px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-xl);
|
|
background: #f2f2f0;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.assistant-prose {
|
|
max-width: 760px;
|
|
color: #2f3137;
|
|
font-size: 14px;
|
|
line-height: 1.64;
|
|
}
|
|
|
|
.user-bubble p,
|
|
.assistant-prose p {
|
|
margin: 0 0 9px;
|
|
}
|
|
|
|
.user-bubble p:last-child,
|
|
.assistant-prose p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.activity-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin: 2px 0 14px;
|
|
}
|
|
|
|
.chat-activity {
|
|
width: 100%;
|
|
max-width: 760px;
|
|
color: #8d9199;
|
|
}
|
|
|
|
.chat-activity.standalone {
|
|
margin-left: 47px;
|
|
}
|
|
|
|
.chat-activity summary {
|
|
display: grid;
|
|
grid-template-columns: 78px minmax(0, 1fr) 18px;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
list-style: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.activity-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 28px;
|
|
align-items: center;
|
|
gap: 4px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.activity-select {
|
|
display: grid;
|
|
grid-template-columns: 78px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
padding: 2px 0;
|
|
color: var(--muted);
|
|
text-align: left;
|
|
}
|
|
|
|
.activity-select span {
|
|
font-weight: 650;
|
|
}
|
|
|
|
.activity-select strong {
|
|
overflow: hidden;
|
|
color: #7d8189;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.activity-toggle {
|
|
display: grid;
|
|
width: 28px;
|
|
height: var(--control-md);
|
|
place-items: center;
|
|
padding: 0;
|
|
border-radius: var(--radius-xs);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.activity-row:hover,
|
|
.activity-row:has(.activity-select:focus-visible) {
|
|
background: var(--hover-overlay);
|
|
}
|
|
|
|
.chat-activity.is-selected .activity-row,
|
|
.assistant-segment.is-selected {
|
|
outline: 2px solid rgba(31, 111, 235, 0.22);
|
|
outline-offset: 2px;
|
|
background: rgba(31, 111, 235, 0.06);
|
|
}
|
|
|
|
.assistant-segment {
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chat-activity summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.chat-activity summary::after {
|
|
content: "⌄";
|
|
color: #9a9ca1;
|
|
text-align: right;
|
|
}
|
|
|
|
.chat-activity[open] summary::after {
|
|
content: "⌃";
|
|
}
|
|
|
|
.chat-activity summary:hover {
|
|
color: var(--ink-soft);
|
|
background: var(--hover-overlay);
|
|
}
|
|
|
|
.chat-activity.is-selected summary {
|
|
outline: 2px solid rgba(31, 111, 235, 0.22);
|
|
outline-offset: 2px;
|
|
background: rgba(31, 111, 235, 0.06);
|
|
}
|
|
|
|
.chat-activity summary span {
|
|
font-weight: 650;
|
|
}
|
|
|
|
.chat-activity summary strong {
|
|
overflow: hidden;
|
|
color: #7d8189;
|
|
font-weight: 650;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.activity-preview {
|
|
color: #9aa0aa;
|
|
font-weight: 520;
|
|
}
|
|
|
|
.activity-body {
|
|
margin: 7px 0 2px 88px;
|
|
padding: 7px 10px;
|
|
border-left: 2px solid #d8dde6;
|
|
background: rgba(246, 247, 249, 0.86);
|
|
color: #6a6d73;
|
|
font-size: 12px;
|
|
line-height: 1.55;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.activity-body pre {
|
|
margin: 0 0 8px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.activity-section-title {
|
|
margin: 8px 0 4px;
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
font-weight: 750;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.activity-section-title:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.activity-open-inspector,
|
|
.fold-inspect {
|
|
height: var(--control-sm);
|
|
margin-top: 4px;
|
|
padding: 0 8px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: #fff;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.activity-open-inspector:hover,
|
|
.fold-inspect:hover {
|
|
background: #fff;
|
|
}
|
|
|
|
.spawn-list {
|
|
display: grid;
|
|
gap: 5px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.spawn-list > strong {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.spawn-link {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 7px 9px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--paper-soft);
|
|
text-align: left;
|
|
}
|
|
|
|
.spawn-link small {
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.activity-section {
|
|
display: grid;
|
|
gap: 5px;
|
|
}
|
|
|
|
.activity-section strong {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 720;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
pre {
|
|
margin: 0;
|
|
overflow: auto;
|
|
font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 11px;
|
|
line-height: 1.55;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.surface-intro {
|
|
display: grid;
|
|
gap: 3px;
|
|
margin: 8px 0 14px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.surface-intro strong {
|
|
color: var(--ink);
|
|
font-size: 15px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.tree-view,
|
|
.waterfall,
|
|
.context-grid {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.tree-item {
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.tree-item summary {
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
|
|
.tree-item summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.tree-row {
|
|
display: grid;
|
|
grid-template-columns: 12px 76px minmax(0, 1fr) 64px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
min-height: var(--row-table);
|
|
padding: 6px 8px;
|
|
border-radius: var(--radius-md);
|
|
text-align: left;
|
|
}
|
|
|
|
.tree-item .tree-row {
|
|
grid-template-columns: 12px 76px minmax(0, 1fr) 64px 14px;
|
|
}
|
|
|
|
.tree-item .tree-row::after {
|
|
content: "⌄";
|
|
color: var(--faint);
|
|
}
|
|
|
|
.tree-item[open] .tree-row::after {
|
|
content: "⌃";
|
|
}
|
|
|
|
.tree-row:hover,
|
|
.span-row:hover,
|
|
.context-card:hover {
|
|
background: var(--paper-soft);
|
|
}
|
|
|
|
.tree-row.depth-1 {
|
|
padding-left: 28px;
|
|
}
|
|
|
|
.tree-row.depth-2 {
|
|
padding-left: 50px;
|
|
}
|
|
|
|
.tree-row.depth-3 {
|
|
padding-left: 72px;
|
|
}
|
|
|
|
.tree-rail {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 999px;
|
|
background: var(--line-strong);
|
|
}
|
|
|
|
.tree-row.blue .tree-rail,
|
|
.span-row.blue .span-track span {
|
|
background: var(--accent);
|
|
}
|
|
|
|
.tree-row.green .tree-rail,
|
|
.span-row.green .span-track span {
|
|
background: var(--green);
|
|
}
|
|
|
|
.tree-row.amber .tree-rail,
|
|
.span-row.amber .span-track span {
|
|
background: var(--amber);
|
|
}
|
|
|
|
.tree-row.red .tree-rail {
|
|
background: var(--red);
|
|
}
|
|
|
|
.tree-kind {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 720;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tree-copy {
|
|
display: grid;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tree-copy strong,
|
|
.tree-copy small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tree-copy strong {
|
|
font-weight: 650;
|
|
}
|
|
|
|
.tree-copy small,
|
|
.tree-row em {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.traj-body {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin: 0 12px 10px 72px;
|
|
padding: 9px 0 2px 12px;
|
|
border-left: 2px solid var(--line);
|
|
}
|
|
|
|
.traj-card {
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: #fff;
|
|
}
|
|
|
|
.traj-card header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
background: #f4f4f2;
|
|
}
|
|
|
|
.traj-card header strong {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.traj-card header span {
|
|
overflow: hidden;
|
|
color: var(--muted);
|
|
font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 11px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.traj-card pre,
|
|
.metadata-line pre {
|
|
max-height: 320px;
|
|
padding: 10px 12px;
|
|
background: #fbfbfa;
|
|
}
|
|
|
|
.metadata-line summary {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.thinking-card,
|
|
.assistant-text,
|
|
.user-body {
|
|
display: grid;
|
|
gap: 6px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: #fff;
|
|
color: #424851;
|
|
font-size: 12.5px;
|
|
line-height: 1.58;
|
|
}
|
|
|
|
.thinking-card {
|
|
background: #fbfbfa;
|
|
color: #6f737b;
|
|
}
|
|
|
|
.thinking-card strong {
|
|
color: var(--muted);
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.thinking-card p,
|
|
.assistant-text p,
|
|
.user-body p {
|
|
margin: 0;
|
|
}
|
|
|
|
.span-row {
|
|
display: grid;
|
|
grid-template-columns: 172px minmax(0, 1fr) 72px;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
min-height: var(--row-list);
|
|
padding: 7px 9px;
|
|
border-radius: var(--radius-md);
|
|
text-align: left;
|
|
}
|
|
|
|
.wf-summary {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.wf-stat {
|
|
display: grid;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
padding: 9px 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: rgba(255, 255, 255, 0.78);
|
|
}
|
|
|
|
.wf-stat span {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.wf-stat strong {
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.span-title {
|
|
display: grid;
|
|
min-width: 0;
|
|
}
|
|
|
|
.span-title strong,
|
|
.span-title small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.span-title small,
|
|
.span-row em {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.span-track {
|
|
position: relative;
|
|
height: 18px;
|
|
overflow: hidden;
|
|
border-radius: 999px;
|
|
background: #ececea;
|
|
}
|
|
|
|
.span-track span {
|
|
position: absolute;
|
|
top: 3px;
|
|
height: 12px;
|
|
border-radius: 999px;
|
|
background: #51514d;
|
|
}
|
|
|
|
.trajectory-table {
|
|
display: grid;
|
|
gap: 6px;
|
|
width: 100%;
|
|
}
|
|
|
|
.traj-group-head {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: var(--z-sticky);
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
padding: 7px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
background: #f5f6f8;
|
|
color: #4c5868;
|
|
font-size: 11px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.traj-group-head:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.traj-group-head.error {
|
|
border-left: 3px solid var(--red);
|
|
}
|
|
|
|
.traj-group-head .g-dur,
|
|
.traj-group-head .g-meta {
|
|
color: var(--muted);
|
|
font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 10.5px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.traj-head-row {
|
|
display: grid;
|
|
grid-template-columns: 36px 118px minmax(0, 1fr) 52px 52px 52px 68px 28px;
|
|
gap: 8px;
|
|
padding: 4px 12px 7px;
|
|
white-space: nowrap;
|
|
color: var(--faint);
|
|
font-size: 10px;
|
|
font-weight: 760;
|
|
letter-spacing: 0.07em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.traj-head-row .num {
|
|
text-align: right;
|
|
}
|
|
|
|
.traj-row {
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: rgba(255, 255, 255, 0.86);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.025);
|
|
}
|
|
|
|
.traj-row.is-selected,
|
|
.traj-row.traj-summary.is-selected {
|
|
border-color: rgba(31, 111, 235, 0.32);
|
|
box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.12);
|
|
}
|
|
|
|
.traj-row.error,
|
|
.traj-row.red {
|
|
border-left: 4px solid var(--red);
|
|
}
|
|
|
|
.traj-row.assistant.expanded,
|
|
.traj-row.tool,
|
|
.traj-row.green {
|
|
border-left: 4px solid rgba(35, 132, 84, 0.7);
|
|
}
|
|
|
|
.traj-summary {
|
|
display: grid;
|
|
grid-template-columns: 36px 118px minmax(0, 1fr) 52px 52px 52px 68px 28px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
min-height: var(--row-table);
|
|
padding: 4px 12px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #465268;
|
|
text-align: left;
|
|
list-style: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.traj-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.traj-summary:hover {
|
|
background: var(--hover-overlay);
|
|
}
|
|
|
|
.traj-expand {
|
|
display: grid;
|
|
width: 26px;
|
|
height: var(--control-sm);
|
|
place-items: center;
|
|
padding: 0;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.traj-expand:hover {
|
|
background: rgba(0, 0, 0, 0.055);
|
|
}
|
|
|
|
.traj-content {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
gap: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.traj-title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.traj-title {
|
|
color: var(--ink);
|
|
font-weight: 650;
|
|
}
|
|
|
|
.traj-index,
|
|
.token-cell,
|
|
.chevron {
|
|
color: var(--faint);
|
|
font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 11px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.token-cell {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.role-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
padding: 3px 8px;
|
|
border-radius: var(--radius-sm);
|
|
background: #f0f1f2;
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
font-weight: 760;
|
|
letter-spacing: 0.05em;
|
|
text-overflow: ellipsis;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.role-chip.user,
|
|
.role-chip.session,
|
|
.role-chip.turn {
|
|
background: rgba(31, 111, 235, 0.09);
|
|
color: #2456b3;
|
|
}
|
|
|
|
.role-chip.assistant,
|
|
.role-chip.reasoning,
|
|
.role-chip.message {
|
|
background: rgba(35, 132, 84, 0.1);
|
|
color: var(--green);
|
|
}
|
|
|
|
.role-chip.tool {
|
|
background: rgba(154, 103, 0, 0.12);
|
|
color: var(--amber);
|
|
}
|
|
|
|
.role-chip.request {
|
|
background: rgba(154, 103, 0, 0.12);
|
|
color: var(--amber);
|
|
}
|
|
|
|
.role-chip.context,
|
|
.role-chip.event,
|
|
.role-chip.step {
|
|
background: #eef1f6;
|
|
color: #556070;
|
|
}
|
|
|
|
.role-chip.error {
|
|
background: rgba(201, 60, 55, 0.1);
|
|
color: var(--red);
|
|
}
|
|
|
|
.event-chip,
|
|
.tool-chip,
|
|
.result-chip {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
max-width: 160px;
|
|
overflow: hidden;
|
|
padding: 3px 7px;
|
|
border-radius: 999px;
|
|
background: #f0f1f3;
|
|
color: var(--muted);
|
|
font-size: 10.5px;
|
|
font-weight: 720;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tool-chip {
|
|
background: rgba(154, 103, 0, 0.11);
|
|
color: var(--amber);
|
|
}
|
|
|
|
.result-chip {
|
|
background: rgba(35, 132, 84, 0.1);
|
|
color: var(--green);
|
|
}
|
|
|
|
.result-chip.error {
|
|
background: rgba(201, 60, 55, 0.1);
|
|
color: var(--red);
|
|
}
|
|
|
|
.traj-inspect {
|
|
height: var(--control-sm);
|
|
padding: 0 7px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: #fff;
|
|
color: var(--muted);
|
|
font-size: 10px;
|
|
font-weight: 650;
|
|
opacity: 0;
|
|
}
|
|
|
|
.traj-summary:hover .traj-inspect,
|
|
.traj-inspect:focus-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.waterfall {
|
|
display: grid;
|
|
gap: 0;
|
|
overflow: auto;
|
|
padding: 12px 16px 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: #fff;
|
|
}
|
|
|
|
.wf-row {
|
|
display: grid;
|
|
grid-template-columns: 280px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 680px;
|
|
}
|
|
|
|
.wf-head-row {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: var(--z-sticky);
|
|
margin-bottom: 6px;
|
|
padding-bottom: 6px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: #fff;
|
|
}
|
|
|
|
.wf-axis {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: var(--muted);
|
|
font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.wf-label-col {
|
|
display: grid;
|
|
grid-template-columns: 22px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: var(--row-table);
|
|
padding: 4px 6px 4px calc(6px + var(--depth, 0) * 15px);
|
|
border-radius: var(--radius-sm);
|
|
text-align: left;
|
|
}
|
|
|
|
.wf-label-col:hover,
|
|
.wf-label-col.is-selected,
|
|
.wf-bar.is-selected {
|
|
background: rgba(31, 111, 235, 0.08);
|
|
}
|
|
|
|
.wf-glyph {
|
|
display: grid;
|
|
width: 22px;
|
|
height: 17px;
|
|
place-items: center;
|
|
border-radius: var(--radius-xs);
|
|
background: #eef1f6;
|
|
color: #4b5565;
|
|
font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 8.5px;
|
|
font-weight: 760;
|
|
}
|
|
|
|
.wf-glyph.turn { background: rgba(31, 111, 235, 0.1); color: #2456b3; }
|
|
.wf-glyph.step { background: #eceff4; color: #4c586c; }
|
|
.wf-glyph.tool { background: rgba(35, 132, 84, 0.1); color: var(--green); }
|
|
.wf-glyph.assistant { background: rgba(31, 111, 235, 0.1); color: var(--accent); }
|
|
.wf-glyph.request { background: rgba(154, 103, 0, 0.13); color: var(--amber); }
|
|
.wf-glyph.error { background: rgba(201, 60, 55, 0.1); color: var(--red); }
|
|
|
|
.wf-name {
|
|
display: grid;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wf-name span,
|
|
.wf-name small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.wf-name span {
|
|
color: #3a4356;
|
|
font-size: 11.5px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.wf-name small,
|
|
.wf-dur {
|
|
color: var(--muted);
|
|
font-size: 10.5px;
|
|
}
|
|
|
|
.wf-dur {
|
|
font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.wf-track {
|
|
position: relative;
|
|
height: 22px;
|
|
border-radius: var(--radius-xs);
|
|
background-image: linear-gradient(90deg, rgba(135, 145, 160, 0.18) 1px, transparent 1px);
|
|
background-repeat: repeat-x;
|
|
background-size: 25% 100%;
|
|
}
|
|
|
|
.wf-bar {
|
|
position: absolute;
|
|
top: 4px;
|
|
height: 14px;
|
|
min-width: 2px;
|
|
border-radius: 4px;
|
|
background: #657084;
|
|
}
|
|
|
|
.wf-bar.turn { background: var(--accent); }
|
|
.wf-bar.step { background: #657084; }
|
|
.wf-bar.tool { background: var(--green); }
|
|
.wf-bar.assistant { background: rgba(31, 111, 235, 0.68); }
|
|
.wf-bar.request { background: var(--amber); }
|
|
.wf-bar.red,
|
|
.wf-bar.error {
|
|
background: var(--red);
|
|
}
|
|
|
|
.context-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.context-grid.single {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.context-card,
|
|
.module-card,
|
|
.compare-column {
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: rgba(255, 255, 255, 0.78);
|
|
}
|
|
|
|
.context-card {
|
|
display: grid;
|
|
min-height: 142px;
|
|
gap: 10px;
|
|
padding: 14px;
|
|
text-align: left;
|
|
}
|
|
|
|
.context-card-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.context-card-head strong {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.context-card-head em {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.context-preview {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
color: var(--ink-soft);
|
|
font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 5;
|
|
}
|
|
|
|
.composer {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: end;
|
|
gap: 10px;
|
|
width: min(920px, calc(100% - 68px));
|
|
margin: 0 auto 24px;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-xl);
|
|
background: rgba(255, 255, 255, 0.94);
|
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.composer textarea {
|
|
field-sizing: content;
|
|
min-height: var(--row-list);
|
|
max-height: 132px;
|
|
resize: none;
|
|
overflow: auto;
|
|
border: 0;
|
|
background: transparent;
|
|
outline: none;
|
|
}
|
|
|
|
.composer-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.composer-hint {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.composer.busy .composer-hint {
|
|
color: var(--amber);
|
|
}
|
|
|
|
.cancel-button {
|
|
height: var(--control-md);
|
|
padding: 0 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: #fff;
|
|
color: var(--ink-soft);
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.cancel-button[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.composer-meta button {
|
|
display: grid;
|
|
width: 36px;
|
|
height: 36px;
|
|
place-items: center;
|
|
padding: 0;
|
|
border-radius: 999px;
|
|
background: var(--ink);
|
|
color: #fff;
|
|
font-size: 18px;
|
|
font-weight: 690;
|
|
transition: transform 120ms var(--ease-out), background 120ms var(--ease-out);
|
|
}
|
|
|
|
.primary-action:active,
|
|
.composer-meta button:active,
|
|
.fold-inspect:active,
|
|
.module-card button:active,
|
|
.inspector-head button:active,
|
|
.feedback-form button:active {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
.status-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 14px;
|
|
border-top: 1px solid var(--line);
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.inspector {
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
grid-template-rows: auto auto minmax(0, 1fr);
|
|
border-left: 1px solid var(--line);
|
|
background: #fbfbfa;
|
|
}
|
|
|
|
.inspector-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 16px 16px 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.inspector-head div {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 2px;
|
|
}
|
|
|
|
.inspector-head > div:first-child {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.inspector-head span {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 720;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.inspector-head strong {
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.inspector-head small {
|
|
overflow: hidden;
|
|
color: var(--muted);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.inspector-head button {
|
|
align-self: start;
|
|
height: var(--control-md);
|
|
padding: 0 9px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: #fff;
|
|
color: var(--ink-soft);
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.inspector-tabs {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 3px;
|
|
padding: 8px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.inspector-tabs button {
|
|
min-width: 0;
|
|
height: var(--control-md);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 680;
|
|
}
|
|
|
|
.inspector-tabs button.active {
|
|
background: #fff;
|
|
color: var(--ink);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.inspector-body {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 12px;
|
|
}
|
|
|
|
.inspector-body pre {
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: #fff;
|
|
}
|
|
|
|
.feedback-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.feedback-entry {
|
|
padding: 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: #fff;
|
|
}
|
|
|
|
.feedback-entry header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.feedback-entry header strong {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.feedback-entry p {
|
|
margin: 8px 0 0;
|
|
}
|
|
|
|
.feedback-form {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.feedback-form input,
|
|
.feedback-form textarea {
|
|
width: 100%;
|
|
padding: 9px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
background: #fff;
|
|
outline: none;
|
|
}
|
|
|
|
.feedback-form button {
|
|
justify-self: end;
|
|
height: var(--control-md);
|
|
padding: 0 12px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--ink);
|
|
color: #fff;
|
|
font-weight: 680;
|
|
}
|
|
|
|
.empty-state,
|
|
.empty-thread {
|
|
max-width: 560px;
|
|
margin: 120px auto;
|
|
color: var(--muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-thread.compact {
|
|
margin: 60px auto;
|
|
}
|
|
|
|
.empty-state h2,
|
|
.empty-thread h2 {
|
|
margin: 0 0 8px;
|
|
color: var(--ink);
|
|
font-size: 22px;
|
|
letter-spacing: -0.035em;
|
|
}
|
|
|
|
.empty-state button {
|
|
margin-top: 12px;
|
|
height: var(--control-lg);
|
|
padding: 0 14px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--ink);
|
|
color: #fff;
|
|
font-weight: 680;
|
|
}
|
|
|
|
.module-hero {
|
|
max-width: 760px;
|
|
margin: 8px auto 18px;
|
|
}
|
|
|
|
.module-hero span {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 760;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.module-hero h2 {
|
|
margin: 6px 0 6px;
|
|
font-size: 28px;
|
|
letter-spacing: -0.055em;
|
|
}
|
|
|
|
.module-hero p {
|
|
margin: 0;
|
|
color: var(--ink-soft);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.develop-browser {
|
|
display: grid;
|
|
grid-template-columns: 324px minmax(0, 1fr);
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
background: var(--paper);
|
|
}
|
|
|
|
.develop-artifact-rail {
|
|
display: grid;
|
|
min-height: 0;
|
|
align-content: start;
|
|
gap: 14px;
|
|
overflow: auto;
|
|
padding: 18px 12px 24px;
|
|
border-right: 1px solid var(--line);
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)),
|
|
var(--paper-soft);
|
|
}
|
|
|
|
.dev-artifact-group {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.dev-artifact-group h3 {
|
|
margin: 0;
|
|
padding: 0 7px;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 720;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.dev-artifact-group > div {
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.dev-artifact-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: var(--row-list);
|
|
padding: 7px 8px;
|
|
border-radius: var(--radius-md);
|
|
text-align: left;
|
|
transition:
|
|
background 120ms var(--ease-out),
|
|
transform 120ms var(--ease-out);
|
|
}
|
|
|
|
.dev-artifact-row:hover {
|
|
background: rgba(255, 255, 255, 0.62);
|
|
}
|
|
|
|
.dev-artifact-row:active {
|
|
transform: scale(0.99);
|
|
}
|
|
|
|
.dev-artifact-row.selected {
|
|
background: #fff;
|
|
box-shadow:
|
|
inset 0 0 0 1px rgba(0, 0, 0, 0.04),
|
|
0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.dev-artifact-row div {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 1px;
|
|
}
|
|
|
|
.dev-artifact-row strong {
|
|
overflow: hidden;
|
|
font-size: 13px;
|
|
font-weight: 680;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dev-artifact-row span {
|
|
overflow: hidden;
|
|
color: var(--ink-soft);
|
|
font-size: 11px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dev-artifact-row em,
|
|
.dev-detail-head em {
|
|
align-self: center;
|
|
padding: 2px 7px;
|
|
border-radius: 999px;
|
|
background: var(--paper-soft);
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-style: normal;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.dev-artifact-row.tool em,
|
|
.dev-artifact-row.source em,
|
|
.dev-detail-card.tool .dev-detail-head em,
|
|
.dev-detail-card.source .dev-detail-head em {
|
|
background: rgba(35, 132, 84, 0.1);
|
|
color: var(--green);
|
|
}
|
|
|
|
.develop-artifact-detail {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 28px 34px 42px;
|
|
}
|
|
|
|
.dev-detail-card {
|
|
display: grid;
|
|
gap: 16px;
|
|
max-width: 1120px;
|
|
}
|
|
|
|
.dev-detail-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 2px 0 0;
|
|
}
|
|
|
|
.dev-detail-head span {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
font-weight: 760;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.dev-detail-head h3 {
|
|
margin: 3px 0 4px;
|
|
font-size: 22px;
|
|
letter-spacing: -0.045em;
|
|
}
|
|
|
|
.dev-detail-head p {
|
|
margin: 0;
|
|
color: var(--ink-soft);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.dev-detail-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 0;
|
|
border-top: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.dev-fact {
|
|
display: grid;
|
|
grid-template-columns: 112px minmax(0, 1fr);
|
|
gap: 12px;
|
|
min-width: 0;
|
|
padding: 7px 0;
|
|
}
|
|
|
|
.dev-fact + .dev-fact {
|
|
border-top: 1px solid rgba(227, 226, 222, 0.7);
|
|
}
|
|
|
|
.dev-fact span {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.dev-fact strong {
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dev-registry-snapshot {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
padding: 12px 0;
|
|
border-top: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.dev-registry-snapshot > div {
|
|
min-width: 0;
|
|
}
|
|
|
|
.dev-registry-snapshot h4 {
|
|
margin: 0 0 8px;
|
|
font-size: 12px;
|
|
font-weight: 720;
|
|
}
|
|
|
|
.dev-registry-snapshot ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.dev-registry-snapshot li {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
max-width: 100%;
|
|
padding: 4px 7px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.76);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.dev-registry-snapshot li strong {
|
|
overflow: hidden;
|
|
max-width: 180px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dev-registry-snapshot li span,
|
|
.dev-registry-snapshot p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.dev-relationship-strip {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.dev-relationship-strip span {
|
|
padding: 4px 8px;
|
|
border-radius: 999px;
|
|
background: #f1f3f5;
|
|
color: var(--ink-soft);
|
|
font-size: 11px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.dev-section-head p {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.dev-section {
|
|
overflow: hidden;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.dev-section-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
padding: 0 0 8px;
|
|
}
|
|
|
|
.dev-section-head h3 {
|
|
margin: 0 0 3px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.dev-section-head p {
|
|
margin: 0;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.dev-code {
|
|
max-height: 420px;
|
|
margin: 0;
|
|
overflow: auto;
|
|
padding: 12px 13px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.48)),
|
|
#fbfbfa;
|
|
color: #242422;
|
|
font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 11px;
|
|
line-height: 1.55;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.dev-loop-card {
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: rgba(255, 255, 255, 0.82);
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.025);
|
|
}
|
|
|
|
.dev-loop-card strong {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.dev-loop-card ol {
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.dev-loop-card li + li {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.module-card {
|
|
padding: 14px;
|
|
}
|
|
|
|
.module-card h3 {
|
|
margin: 0 0 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.module-card p {
|
|
margin: 0 0 12px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
dl {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin: 0;
|
|
}
|
|
|
|
dl div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
dt {
|
|
color: var(--muted);
|
|
}
|
|
|
|
dd {
|
|
margin: 0;
|
|
color: var(--ink);
|
|
font-weight: 640;
|
|
}
|
|
|
|
.dev-status {
|
|
margin: 0;
|
|
}
|
|
|
|
.empty-panel {
|
|
color: var(--muted);
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.harness-shell,
|
|
.harness-shell.inspector-open {
|
|
position: relative;
|
|
grid-template-columns: 236px 6px minmax(0, 1fr);
|
|
}
|
|
|
|
#dividerInspector {
|
|
display: none;
|
|
}
|
|
|
|
.inspector {
|
|
position: absolute;
|
|
top: 58px;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: var(--z-overlay);
|
|
width: 360px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.run-strip,
|
|
.develop-browser {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.develop-artifact-rail {
|
|
max-height: 260px;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.dev-detail-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.context-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ── Renderer rework additions: drag regions, trees, live turn, drawer ───── */
|
|
|
|
.app-brand,
|
|
.topbar {
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
.app-brand button,
|
|
.topbar button {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
.view .chat-surface {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#conversation,
|
|
#liveTurn {
|
|
display: contents;
|
|
}
|
|
|
|
.chat-live-jump {
|
|
position: sticky;
|
|
bottom: 12px;
|
|
z-index: var(--z-floating);
|
|
display: block;
|
|
width: fit-content;
|
|
margin: 0 auto;
|
|
padding: 7px 12px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
color: var(--ink-soft);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
|
font-size: 12px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.chat-live-jump[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.live-status {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
animation: live-pulse 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
.live-status.error {
|
|
color: var(--red);
|
|
animation: none;
|
|
}
|
|
|
|
@keyframes live-pulse {
|
|
0%, 100% { opacity: 0.45; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
.muted-text {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Trajectory split: structure tree + step-grouped table, both scroll alone. */
|
|
.traj-split {
|
|
display: grid;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
grid-template-columns: clamp(150px, 17vw, 220px) minmax(0, 1fr);
|
|
height: 100%;
|
|
}
|
|
|
|
.traj-tree {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 14px 8px 20px 14px;
|
|
border-right: 1px solid var(--line);
|
|
background: rgba(250, 250, 249, 0.7);
|
|
}
|
|
|
|
.tree-turn {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.tree-turn-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--ink-soft);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
list-style: none;
|
|
}
|
|
|
|
.tree-turn-head::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.tree-turn-head.active {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.tree-steps {
|
|
display: grid;
|
|
gap: 2px;
|
|
margin: 2px 0 6px 8px;
|
|
}
|
|
|
|
.tree-step {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 2px 8px;
|
|
padding: 5px 8px;
|
|
border-left: 2px solid transparent;
|
|
border-radius: 0 8px 8px 0;
|
|
text-align: left;
|
|
font-size: 11.5px;
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.tree-step:hover {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.tree-step.active {
|
|
border-left-color: var(--accent);
|
|
background: rgba(31, 111, 235, 0.08);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.tree-step.error {
|
|
border-left-color: var(--red);
|
|
}
|
|
|
|
.tree-step .t-dur {
|
|
color: var(--muted);
|
|
font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.tree-step .t-sub {
|
|
grid-column: 1 / -1;
|
|
overflow: hidden;
|
|
color: var(--muted);
|
|
font-size: 10.5px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.traj-main {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: 14px 22px 30px;
|
|
}
|
|
|
|
.trajectory-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
color: var(--ink-soft);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.trajectory-toolbar button {
|
|
height: var(--control-sm);
|
|
margin-left: 6px;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: #fff;
|
|
color: var(--ink-soft);
|
|
font-size: 11px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
/* Inline row utilities in expanded trajectory rows. */
|
|
.row-tools {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.row-tools button {
|
|
height: var(--control-sm);
|
|
padding: 0 9px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: #fff;
|
|
color: var(--ink-soft);
|
|
font-size: 11px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.fb-chip {
|
|
margin-left: 6px;
|
|
padding: 1px 6px;
|
|
border-radius: 999px;
|
|
background: rgba(154, 103, 0, 0.12);
|
|
color: var(--amber);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.inline-fb {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
padding: 10px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
background: #fff;
|
|
}
|
|
|
|
.inline-fb textarea {
|
|
min-height: 56px;
|
|
padding: 8px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
resize: vertical;
|
|
}
|
|
|
|
.inline-fb-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.inline-fb-row input {
|
|
width: 130px;
|
|
height: var(--control-sm);
|
|
padding: 0 8px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.inline-fb-row .fb-hint {
|
|
flex: 1;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.inline-fb-row .fb-send {
|
|
height: var(--control-sm);
|
|
padding: 0 10px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--ink);
|
|
color: #fff;
|
|
font-size: 11px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.inline-fb-list {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.more-note {
|
|
margin-top: 6px;
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.error-text {
|
|
color: var(--red);
|
|
}
|
|
|
|
/* Flash highlight for cross-view jumps. */
|
|
@keyframes jump-flash {
|
|
0% { background: rgba(31, 111, 235, 0.2); }
|
|
100% { background: transparent; }
|
|
}
|
|
|
|
.flash {
|
|
animation: jump-flash 1.2s var(--ease-out);
|
|
}
|
|
|
|
/* Waterfall stat links. */
|
|
.wf-stat.link {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.wf-stat.link:hover strong {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.wf-stat.is-selected,
|
|
.wf-label-col.is-selected,
|
|
.wf-bar.is-selected {
|
|
outline: 2px solid rgba(31, 111, 235, 0.28);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.wf-stat.error strong {
|
|
color: var(--red);
|
|
}
|
|
|
|
.wf-bar.llm {
|
|
background: rgba(31, 111, 235, 0.65);
|
|
}
|
|
|
|
.wf-bar.error,
|
|
.wf-glyph.error {
|
|
background: var(--red);
|
|
color: #fff;
|
|
}
|
|
|
|
/* Inspector format row. */
|
|
.format-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.format-row select {
|
|
height: var(--control-sm);
|
|
padding: 0 6px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: #fff;
|
|
color: var(--ink-soft);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.inspector-head .inspector-head-actions {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
gap: 6px;
|
|
}
|
|
|
|
.code-block {
|
|
overflow: auto;
|
|
max-height: none;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* Chat user bubble: plain prose, never clamped. */
|
|
.user-bubble {
|
|
display: block;
|
|
overflow: visible;
|
|
color: var(--ink);
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
white-space: pre-wrap;
|
|
-webkit-line-clamp: none;
|
|
}
|
|
|
|
/* Markdown rendered in chat prose and trajectory assistant text. */
|
|
.assistant-prose p,
|
|
.assistant-text p {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.assistant-prose ul,
|
|
.assistant-prose ol,
|
|
.assistant-text ul,
|
|
.assistant-text ol {
|
|
margin: 0 0 10px;
|
|
padding-left: 22px;
|
|
}
|
|
|
|
.assistant-prose li,
|
|
.assistant-text li {
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.assistant-prose code,
|
|
.assistant-text code {
|
|
padding: 1px 5px;
|
|
border-radius: var(--radius-xs);
|
|
background: rgba(0, 0, 0, 0.055);
|
|
font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 0.88em;
|
|
}
|
|
|
|
.assistant-prose .md-code,
|
|
.assistant-text .md-code {
|
|
margin: 0 0 10px;
|
|
padding: 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-md);
|
|
background: #fbfbfa;
|
|
overflow: auto;
|
|
font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 11.5px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.assistant-prose .md-code code,
|
|
.assistant-text .md-code code {
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.assistant-prose .md-h,
|
|
.assistant-text .md-h {
|
|
margin: 14px 0 6px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.assistant-prose blockquote,
|
|
.assistant-text blockquote {
|
|
margin: 0 0 10px;
|
|
padding: 6px 12px;
|
|
border-left: 3px solid var(--line);
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
.assistant-prose hr,
|
|
.assistant-text hr {
|
|
margin: 12px 0;
|
|
border: 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.md-table-wrap {
|
|
margin: 0 0 10px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.md-table {
|
|
border-collapse: collapse;
|
|
font-size: 12.5px;
|
|
}
|
|
|
|
.md-table th,
|
|
.md-table td {
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--line);
|
|
text-align: left;
|
|
}
|
|
|
|
.md-table th {
|
|
background: rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
/* Toast. */
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 26px;
|
|
left: 50%;
|
|
z-index: var(--z-toast);
|
|
padding: 8px 14px;
|
|
border-radius: 999px;
|
|
background: var(--ink);
|
|
color: #fff;
|
|
font-size: 12px;
|
|
opacity: 0;
|
|
transform: translate(-50%, 8px);
|
|
transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toast.show {
|
|
opacity: 1;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
.inspector[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.notice[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* ── Design-system mechanics: adaptivity, motion discipline, scroll polish ── */
|
|
|
|
/* Trajectory table adapts to its pane: token columns collapse when the drawer
|
|
squeezes the middle pane instead of clipping the content column. */
|
|
.traj-main {
|
|
container-type: inline-size;
|
|
container-name: traj-main;
|
|
}
|
|
|
|
@container traj-main (max-width: 640px) {
|
|
.traj-head-row,
|
|
.traj-summary {
|
|
grid-template-columns: 36px 118px minmax(0, 1fr) 68px 28px;
|
|
}
|
|
|
|
.traj-head-row span:nth-child(4),
|
|
.traj-head-row span:nth-child(5),
|
|
.traj-head-row span:nth-child(6),
|
|
.traj-summary .token-cell:not(.offset) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Long trajectory tables skip offscreen row layout. */
|
|
.traj-row {
|
|
content-visibility: auto;
|
|
contain-intrinsic-size: auto 30px;
|
|
}
|
|
|
|
/* Waterfall stat cards keep their numbers readable when squeezed. */
|
|
.wf-stat {
|
|
min-width: 96px;
|
|
}
|
|
|
|
/* Scroll containers reserve the gutter so scrollbars never shift layout, and
|
|
thumbs stay invisible until the pane is hovered. */
|
|
.view.chat-view,
|
|
.view.wf-view,
|
|
.traj-main,
|
|
.traj-tree,
|
|
.session-list,
|
|
.inspector-body,
|
|
.module-canvas {
|
|
scrollbar-gutter: stable;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: transparent transparent;
|
|
transition: scrollbar-color var(--duration-basic) ease;
|
|
}
|
|
|
|
.view.chat-view:hover,
|
|
.view.wf-view:hover,
|
|
.traj-main:hover,
|
|
.traj-tree:hover,
|
|
.session-list:hover,
|
|
.inspector-body:hover,
|
|
.module-canvas:hover {
|
|
scrollbar-color: color-mix(in oklab, var(--fg) 24%, transparent) transparent;
|
|
}
|
|
|
|
/* Motion honors the OS setting: everything collapses to an instant state
|
|
change; opacity-only pulses are kept subtle but static. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0ms !important;
|
|
}
|
|
|
|
.live-status {
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
|
|
/* The structure tree yields to the drawer: with the inspector open the middle
|
|
pane cannot fit map, table, and payload columns, and a squeezed three-column
|
|
layout reads worse than a temporarily hidden map. */
|
|
.inspector-open .traj-split {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.inspector-open .traj-tree {
|
|
display: none;
|
|
}
|
|
|
|
/* ── ui-skills pass: numerics, inline form errors ─────────────────────────── */
|
|
|
|
/* Data columns and metrics read as columns of digits: keep them tabular. */
|
|
.token-cell,
|
|
.wf-dur,
|
|
.g-dur,
|
|
.t-dur,
|
|
.wf-summary strong,
|
|
.session-copy small,
|
|
.run-metrics strong {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Inline form errors live next to the action, not only in a toast. */
|
|
.form-error {
|
|
margin: 6px 0 0;
|
|
color: var(--red);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Headings balance; prose avoids awkward last lines. */
|
|
.empty-thread h2,
|
|
.empty-state h2 {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.assistant-prose p,
|
|
.empty-thread p,
|
|
.empty-state p {
|
|
text-wrap: pretty;
|
|
}
|