mirror of
https://github.com/razzant/ouroboros.git
synced 2026-08-26 11:31:48 +00:00
422150d3d8
The owner's ask, verbatim: «Хочу чтобы сразу была возможность подписки добавить и чтобы она была красивее и прозрачнее. Чтобы было понятно что достаточно одного любого API ключа и если хотя бы одну подписку добавить, то будет зашибись + если добавить несколько подписок, то ещё более зашибись и что они ротироваться будут.» A new SKIPPABLE step right after access, named for what it configures (D-10: "agents", never "coding agents" — these agents build presentations and run ordinary tasks too). It is a value ladder, not a form: one API key already runs Ouroboros, one agent plan moves delegated subagents and commit/scope review onto that plan, several accounts rotate. Two honesty constraints are load-bearing and tested: the rung that sells the subscription is the same rung that says a plan cannot run the main agent (D-1), and the footnote refuses both easy lies — riding a plan is not free, and plan review / task acceptance / skill review stay on the API key (D15). Rotation is drawn once, as a static inline SVG: no library, no animation (no comparable product animates this), currentColor strokes so it inherits the theme, aria-hidden because every fact it draws is in the ladder beside it — which is what survives when a short viewport drops the artwork. Login is not reimplemented: the step mounts harness_login_cards in `full` mode and reads accounts only through claudexor_status_store. `full` rather than `compact` because compact omits the paste-code entry, so a Claude login whose localhost callback cannot complete would dead-end at first run. What the step observed becomes the completion payload's subscriptionsConnected declaration — a request to look at the daemon, never an authority — with the endpoint's own "finish without agent defaults" escape offered beside Start Ouroboros. D-8 closed: POST /api/onboarding/complete is now the ONLY completion path. The /api/settings + /api/owner/runtime-mode pair and the desktop save_wizard bridge are gone, with the bridge method removed from the launcher rather than left as an uncalled settings authority; the endpoint authors the fresh-install light safety default on its own freshness proof, which is now proved end to end. A 2xx is no longer a completion by itself — only the exact success envelope is — and a plain browser tab shows a saved-but-restart-required screen instead of navigating into an app running a different runtime mode than the owner chose. The overlay's sandbox gains allow-popups + allow-popups-to-escape-sandbox. The step's primary action is the agent's own sign-in link in a new tab, and without those tokens the browser blocked that click silently. Reproduced live in both directions and pinned behaviourally from the login card's own markup. Also cleans up what this file owed: the retired "Coding-agent subscriptions" card and its direct /api/claudexor/status poll are gone, along with its four pointers at Settings → Providers → Harness Accounts, which the sibling phase has moved to Settings → Agents. Co-authored-by: Ouroboros <311266734+ouroboros-agent@users.noreply.github.com>
1212 lines
25 KiB
CSS
1212 lines
25 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
--bg: #0b0910;
|
|
--panel: rgba(20, 18, 28, 0.92);
|
|
--panel-2: rgba(255, 255, 255, 0.04);
|
|
--panel-3: rgba(255, 255, 255, 0.03);
|
|
--border: rgba(255, 255, 255, 0.10);
|
|
--ui-card-bg: var(--panel);
|
|
--ui-card-border: var(--border);
|
|
--ui-tone-ok: var(--green);
|
|
--ui-tone-danger: var(--red);
|
|
--border-strong: rgba(232, 93, 111, 0.35);
|
|
--text: #edf2f7;
|
|
/* Foregrounds mirrored by value (docs/DESIGN.md); --muted is now an alias so
|
|
the wizard has one secondary grey. --ghost stays placeholder-only. */
|
|
--text-meta: rgba(237, 242, 247, 0.68);
|
|
--text-disabled: rgba(237, 242, 247, 0.38);
|
|
--muted: var(--text-meta);
|
|
--ghost: rgba(237, 242, 247, 0.28);
|
|
--accent: #e85d6f;
|
|
--accent-2: #fb7185;
|
|
--green: #34d399;
|
|
--green-dim: rgba(52, 211, 153, 0.14);
|
|
--amber: #f59e0b;
|
|
--amber-dim: rgba(245, 158, 11, 0.12);
|
|
--red: #ef4444;
|
|
--red-dim: rgba(239, 68, 68, 0.12);
|
|
--shadow: 0 28px 64px rgba(0, 0, 0, 0.45);
|
|
/* Shared design-system vocabulary (C7.2): the onboarding page is inlined
|
|
standalone (it cannot import style.css), so it mirrors the same role tokens
|
|
by VALUE — project fuchsia and the owner-voice blue match style.css exactly,
|
|
and the role names (task/system/user/project, ok/warn/danger) read the same
|
|
on both surfaces. The base brand red/green stay as defined above. */
|
|
--project: #e879f9;
|
|
--user: #6e96d2;
|
|
--accent-task: var(--accent);
|
|
--accent-system: var(--amber);
|
|
--accent-user: var(--user);
|
|
--accent-project: var(--project);
|
|
--tone-ok: var(--green);
|
|
--tone-warn: var(--amber);
|
|
--tone-danger: var(--red);
|
|
/* Type scale — the same four sizes as style.css, no fifth. */
|
|
--type-meta: 12px;
|
|
--type-body: 14px;
|
|
--type-section: 16px;
|
|
--type-page: 24px;
|
|
--line-meta: 1.35;
|
|
--line-body: 1.5;
|
|
--line-title: 1.3;
|
|
/* Status pairs — same roles, same tints as style.css. */
|
|
--status-ok-fg: #6ee7b7;
|
|
--status-ok-bg: var(--green-dim);
|
|
--status-warn-fg: #fcd34d;
|
|
--status-warn-bg: var(--amber-dim);
|
|
--status-error-fg: #fca5a5;
|
|
--status-error-bg: var(--red-dim);
|
|
--status-neutral-fg: var(--text-meta);
|
|
--status-neutral-bg: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
padding: 16px;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(232, 93, 111, 0.12), transparent 35%),
|
|
radial-gradient(circle at top right, rgba(232, 121, 249, 0.12), transparent 30%),
|
|
var(--bg);
|
|
color: var(--text);
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--ghost);
|
|
}
|
|
|
|
.wizard-shell {
|
|
max-width: 1080px;
|
|
min-height: calc(100vh - 32px);
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
padding: 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02));
|
|
backdrop-filter: blur(18px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.wizard-header {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
/* Was a one-off 32px (plus a 28px compact variant); joins the scale. */
|
|
.wizard-title {
|
|
margin: 0 0 4px;
|
|
font-size: var(--type-page);
|
|
line-height: var(--line-title);
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.wizard-subtitle {
|
|
margin: 0;
|
|
max-width: 760px;
|
|
color: var(--muted);
|
|
font-size: var(--type-body);
|
|
line-height: var(--line-body);
|
|
}
|
|
|
|
.wizard-badge {
|
|
padding: 8px 12px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--border);
|
|
background: var(--panel-2);
|
|
color: var(--muted);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* One row of equal columns for HOWEVER many steps the setup contract declares.
|
|
A hardcoded column count wrapped the moment a step was added (the Agents step
|
|
pushed "Review before launch" onto a second row of its own). */
|
|
.wizard-steps {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: minmax(0, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.wizard-step {
|
|
min-width: 0;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border);
|
|
background: var(--panel-2);
|
|
transition: border-color 120ms ease, background 120ms ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.wizard-step.active {
|
|
border-color: var(--border-strong);
|
|
background: rgba(232, 93, 111, 0.09);
|
|
box-shadow: inset 0 0 0 1px rgba(232, 93, 111, 0.12);
|
|
}
|
|
|
|
.wizard-step.done {
|
|
border-color: rgba(52, 211, 153, 0.22);
|
|
}
|
|
|
|
.wizard-step-index {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 0;
|
|
padding: 4px 9px;
|
|
border-radius: 999px;
|
|
background: var(--status-neutral-bg);
|
|
color: var(--status-neutral-fg);
|
|
font-size: var(--type-meta);
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.wizard-step.active .wizard-step-index {
|
|
background: rgba(232, 93, 111, 0.18);
|
|
color: var(--text);
|
|
}
|
|
|
|
.wizard-step-title {
|
|
margin: 0;
|
|
font-size: var(--type-meta);
|
|
font-weight: 600;
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
.wizard-step-copy {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.wizard-steps {
|
|
display: flex;
|
|
gap: 10px;
|
|
overflow-x: auto;
|
|
padding: 0 2px 4px;
|
|
scroll-snap-type: x proximity;
|
|
}
|
|
|
|
.wizard-step {
|
|
flex: 0 0 min(180px, calc(45vw - 18px));
|
|
scroll-snap-align: start;
|
|
}
|
|
}
|
|
|
|
.wizard-content {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
border: 1px solid var(--border);
|
|
background: var(--panel);
|
|
}
|
|
|
|
.step-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.step-title {
|
|
margin: 0 0 6px;
|
|
font-size: var(--type-page);
|
|
line-height: var(--line-title);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.step-copy {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
max-width: 780px;
|
|
font-size: var(--type-body);
|
|
line-height: var(--line-body);
|
|
}
|
|
|
|
.panel-card,
|
|
.summary-card,
|
|
.wizard-choice,
|
|
.wizard-collapse,
|
|
.wizard-runtime-strip {
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
background: var(--panel-3);
|
|
}
|
|
|
|
.panel-card,
|
|
.summary-card,
|
|
.wizard-choice,
|
|
.wizard-runtime-strip {
|
|
padding: 14px;
|
|
}
|
|
|
|
.panel-card h3,
|
|
.summary-card h3,
|
|
.wizard-choice h3 {
|
|
margin: 0 0 8px;
|
|
font-size: var(--type-section);
|
|
line-height: var(--line-title);
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.panel-card p,
|
|
.wizard-choice p,
|
|
.wizard-inline-note,
|
|
.field-note {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
.wizard-inline-note code,
|
|
.field-note code {
|
|
padding: 1px 4px;
|
|
border-radius: 6px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.grid.two {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.grid.three {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.field-grid,
|
|
.wizard-choice-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.wizard-model-field {
|
|
position: relative;
|
|
}
|
|
|
|
.wizard-model-suggestions {
|
|
position: absolute;
|
|
z-index: 50;
|
|
left: 0;
|
|
right: 0;
|
|
top: 56px;
|
|
max-height: 220px;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
background: rgba(18, 20, 26, 0.98);
|
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
|
|
}
|
|
|
|
.wizard-model-suggestion {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--text);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
.wizard-model-suggestion:hover {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.field-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.field-label-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Uppercase micro-label retired (docs/DESIGN.md "Hierarchy rule"). */
|
|
.field label {
|
|
color: var(--text-meta);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
font-weight: 600;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
.field-clear {
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-meta);
|
|
cursor: pointer;
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
.field-clear:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
input,
|
|
select {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid var(--border);
|
|
background: rgba(11, 9, 16, 0.72);
|
|
color: var(--text);
|
|
font-size: var(--type-body);
|
|
outline: none;
|
|
}
|
|
|
|
.compatible-model-actions,
|
|
.compatible-model-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.compatible-model-actions {
|
|
align-items: center;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.compatible-model-list {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.compatible-load-status {
|
|
margin: 0;
|
|
}
|
|
|
|
input:focus,
|
|
select:focus {
|
|
border-color: var(--border-strong);
|
|
box-shadow: 0 0 0 3px rgba(232, 93, 111, 0.12);
|
|
}
|
|
|
|
.selection-row,
|
|
.footer-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.selection-pill {
|
|
border: 1px solid var(--border);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
color: var(--text);
|
|
padding: 10px 14px;
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.selection-pill:hover {
|
|
border-color: rgba(255, 255, 255, 0.24);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.selection-pill.active {
|
|
background: rgba(232, 93, 111, 0.16);
|
|
border-color: var(--border-strong);
|
|
}
|
|
|
|
.wizard-collapse {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wizard-collapse summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.wizard-collapse summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.wizard-collapse-body {
|
|
padding: 0 14px 14px;
|
|
}
|
|
|
|
.selection-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 5px 10px;
|
|
border-radius: 999px;
|
|
background: var(--status-neutral-bg);
|
|
color: var(--status-neutral-fg);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wizard-choice-grid.three {
|
|
/* Runtime-mode picker has three choices, not the default two. */
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.wizard-choice {
|
|
cursor: pointer;
|
|
transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.wizard-choice:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.wizard-choice.active {
|
|
border-color: var(--border-strong);
|
|
background: rgba(232, 93, 111, 0.09);
|
|
}
|
|
|
|
/* Choice-card chip. Only advisory/blocking declared a pair, so the three
|
|
runtime-mode chips rendered as bare white text; neutral is now the default. */
|
|
.wizard-choice .tone {
|
|
display: inline-flex;
|
|
margin-bottom: 10px;
|
|
padding: 4px 8px;
|
|
border-radius: 999px;
|
|
background: var(--status-neutral-bg);
|
|
color: var(--status-neutral-fg);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.wizard-choice.advisory .tone {
|
|
background: var(--status-warn-bg);
|
|
color: var(--status-warn-fg);
|
|
}
|
|
|
|
.wizard-choice.blocking .tone {
|
|
background: var(--status-ok-bg);
|
|
color: var(--status-ok-fg);
|
|
}
|
|
|
|
.wizard-runtime-strip {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.wizard-runtime-status {
|
|
color: var(--muted);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
.wizard-runtime-status[data-tone="muted"] {
|
|
color: var(--status-neutral-fg);
|
|
}
|
|
|
|
.wizard-runtime-status[data-tone="ok"] {
|
|
color: var(--status-ok-fg);
|
|
}
|
|
|
|
.wizard-runtime-status[data-tone="error"] {
|
|
color: var(--status-error-fg);
|
|
}
|
|
|
|
/* Status = dot + text, matching the settings shell. */
|
|
.wizard-runtime-status[data-tone]::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-right: 7px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.wizard-test-result {
|
|
display: none;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
color: var(--muted);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-body);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.wizard-test-result[data-tone="ok"] {
|
|
border-color: rgba(52, 211, 153, 0.22);
|
|
color: var(--status-ok-fg);
|
|
}
|
|
|
|
.wizard-test-result[data-tone="warn"] {
|
|
border-color: rgba(245, 158, 11, 0.18);
|
|
color: var(--status-warn-fg);
|
|
}
|
|
|
|
.wizard-test-result[data-tone="error"] {
|
|
border-color: rgba(239, 68, 68, 0.18);
|
|
color: var(--status-error-fg);
|
|
}
|
|
|
|
.summary-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Key at meta ink, value at primary (docs/DESIGN.md "Hierarchy rule"). */
|
|
.summary-kv {
|
|
display: grid;
|
|
grid-template-columns: 200px minmax(0, 1fr);
|
|
gap: 10px;
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
color: var(--text);
|
|
align-items: start;
|
|
}
|
|
|
|
.summary-kv strong {
|
|
color: var(--text-meta);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wizard-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.footer-copy {
|
|
max-width: 640px;
|
|
color: var(--muted);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
.btn {
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
padding: 10px 14px;
|
|
cursor: pointer;
|
|
font-size: var(--type-body);
|
|
transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
|
|
}
|
|
|
|
.btn:hover:not(:disabled) {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-primary {
|
|
min-width: 170px;
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
|
border-color: rgba(251, 113, 133, 0.55);
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.btn-secondary,
|
|
.btn-ghost {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
color: var(--text);
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.42;
|
|
cursor: default;
|
|
transform: none;
|
|
}
|
|
|
|
.wizard-error {
|
|
min-height: 22px;
|
|
color: var(--status-error-fg);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
Agents step (phase 3C). Semantics in docs/DESIGN.md §7 (onboarding density)
|
|
and §6 (row anatomy): one primary thing per row, meta ink for everything
|
|
else, and the artwork — not the ladder — is what a short viewport drops.
|
|
--------------------------------------------------------------------------- */
|
|
|
|
/* The figure column is sized to the diagram's own coordinate space, so its
|
|
labels render at the meta size instead of being scaled to illegibility. */
|
|
.agent-ladder-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
|
|
gap: 18px;
|
|
align-items: start;
|
|
}
|
|
|
|
.agent-ladder {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.agent-rung {
|
|
display: grid;
|
|
grid-template-columns: 62px minmax(0, 1fr);
|
|
gap: 10px;
|
|
align-items: start;
|
|
}
|
|
|
|
.agent-rung-tone {
|
|
justify-self: start;
|
|
padding: 2px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--border);
|
|
background: var(--status-neutral-bg);
|
|
color: var(--status-neutral-fg);
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
}
|
|
|
|
/* The last rung is the destination the owner is being shown, so it is the one
|
|
place on this step that carries the connected colour. */
|
|
.agent-rung:last-child .agent-rung-tone {
|
|
border-color: rgba(52, 211, 153, 0.32);
|
|
background: var(--status-ok-bg);
|
|
color: var(--status-ok-fg);
|
|
}
|
|
|
|
.agent-rung-text,
|
|
.agent-rung-title,
|
|
.agent-rung-body,
|
|
.agent-family-identity,
|
|
.agent-family-name,
|
|
.agent-family-status {
|
|
display: block;
|
|
}
|
|
|
|
.agent-rung-title {
|
|
font-size: var(--type-body);
|
|
line-height: var(--line-title);
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.agent-rung-body {
|
|
margin-top: 2px;
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-body);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.agent-ladder-note {
|
|
margin-top: 10px;
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-body);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
/* The rotation diagram. Every stroke is currentColor so the figure inherits the
|
|
wizard's ink; the accent is spent once, on the thing everything points at. */
|
|
.agents-rotation-figure {
|
|
margin: 0;
|
|
}
|
|
|
|
.agents-rotation-svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.agents-rotation-ink {
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.agents-rotation-ink text {
|
|
fill: currentColor;
|
|
stroke: none;
|
|
font-family: inherit;
|
|
font-size: var(--type-meta);
|
|
}
|
|
|
|
.agents-rotation-sub {
|
|
opacity: 0.62;
|
|
}
|
|
|
|
.agents-rotation-group {
|
|
stroke-dasharray: 4 4;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.agents-rotation-more {
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.agents-rotation-fill {
|
|
fill: currentColor;
|
|
stroke: none;
|
|
}
|
|
|
|
.agents-rotation-core {
|
|
stroke: var(--accent);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.agents-rotation-core-label {
|
|
font-weight: 600;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
/* One equivalent row per agent family: name + status on the left, its own
|
|
Connect on the right. No family is laid out differently for being first. */
|
|
.agent-family-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.agent-family-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 7px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: var(--panel-3);
|
|
}
|
|
|
|
.agent-family-name {
|
|
font-size: var(--type-body);
|
|
line-height: var(--line-title);
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.agent-family-status {
|
|
margin-top: 2px;
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
color: var(--status-neutral-fg);
|
|
}
|
|
|
|
.agent-family-status[data-tone="ok"] { color: var(--status-ok-fg); }
|
|
.agent-family-status[data-tone="warn"] { color: var(--status-warn-fg); }
|
|
.agent-family-status[data-tone="error"] { color: var(--status-error-fg); }
|
|
|
|
.agent-family-status[data-tone]::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-right: 7px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.agent-service-note,
|
|
.agent-outcome {
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-body);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.agent-service-note {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.agent-service-note[data-tone="warn"] { color: var(--status-warn-fg); }
|
|
.agent-service-note[data-tone="error"] { color: var(--status-error-fg); }
|
|
|
|
.agent-outcome {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* The shared login card (harness_login_cards.js) renders the same markup here
|
|
as in Settings, but Settings' stylesheets are never loaded by this page — so
|
|
its classes are given the same anatomy against the wizard's own tokens. */
|
|
.harness-login-card {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
background: var(--panel-2);
|
|
}
|
|
|
|
.harness-login-card h4 {
|
|
margin: 0;
|
|
font-size: var(--type-body);
|
|
line-height: var(--line-title);
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.harness-login-card p {
|
|
margin: 0;
|
|
font-size: var(--type-body);
|
|
line-height: var(--line-body);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.harness-signin-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.harness-signin-actions a.btn {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.harness-device-code p {
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.harness-code {
|
|
display: inline-block;
|
|
padding: 8px 12px;
|
|
border: 1px dashed var(--border);
|
|
border-radius: 8px;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: var(--type-page);
|
|
letter-spacing: 0.18em;
|
|
user-select: all;
|
|
}
|
|
|
|
.harness-code-entry {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
width: 100%;
|
|
}
|
|
|
|
.harness-code-entry label {
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.harness-code-entry-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.harness-code-entry-row input {
|
|
min-width: 220px;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
.harness-advanced {
|
|
align-self: stretch;
|
|
border-top: 1px solid var(--border);
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.harness-advanced summary {
|
|
cursor: pointer;
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.harness-advanced[open] summary {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.harness-advanced p {
|
|
margin: 4px 0;
|
|
font-size: var(--type-meta);
|
|
}
|
|
|
|
.harness-attach-command {
|
|
margin: 0;
|
|
padding: 8px 10px;
|
|
border-radius: 8px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
font-size: var(--type-meta);
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
user-select: all;
|
|
}
|
|
|
|
.settings-inline-note {
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-body);
|
|
color: var(--text-meta);
|
|
}
|
|
|
|
.settings-inline-note[data-tone="ok"] { color: var(--status-ok-fg); }
|
|
.settings-inline-note[data-tone="warn"] { color: var(--status-warn-fg); }
|
|
.settings-inline-note[data-tone="error"] { color: var(--status-error-fg); }
|
|
|
|
.settings-inline-status {
|
|
font-size: var(--type-meta);
|
|
line-height: var(--line-meta);
|
|
color: var(--status-neutral-fg);
|
|
}
|
|
|
|
.settings-inline-status[data-tone="ok"] { color: var(--status-ok-fg); }
|
|
.settings-inline-status[data-tone="warn"] { color: var(--status-warn-fg); }
|
|
.settings-inline-status[data-tone="error"] { color: var(--status-error-fg); }
|
|
|
|
.settings-inline-status[data-tone]::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-right: 7px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.settings-ghost-btn {
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 10px;
|
|
padding: 8px 14px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--text);
|
|
font-size: var(--type-body);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.settings-ghost-btn:hover {
|
|
border-color: var(--border-strong);
|
|
}
|
|
|
|
@media (max-height: 820px), (max-width: 900px) {
|
|
.wizard-shell {
|
|
gap: 10px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.wizard-header {
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Title shrinks dropped with the one-off sizes they adjusted; hiding the
|
|
copy below reclaims far more height. */
|
|
.wizard-subtitle,
|
|
.wizard-step-copy,
|
|
.step-copy,
|
|
.panel-card p,
|
|
.field-note,
|
|
.footer-copy {
|
|
display: none;
|
|
}
|
|
|
|
/* Agents step: the ARTWORK is what a short viewport drops, never the ladder.
|
|
Everything the diagram draws is stated in the text beside it, so hiding it
|
|
costs nothing and buys back ~180px. The login card's own sentences are
|
|
re-exempted from the blanket `.panel-card p` rule above: they are the live
|
|
sign-in instructions, not explanatory prose. */
|
|
.agents-rotation-figure {
|
|
display: none;
|
|
}
|
|
|
|
.agent-ladder-layout {
|
|
grid-template-columns: 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
/* Compact row anatomy: name and status share one line instead of stacking.
|
|
Three rows at two lines each was the single largest block of reclaimable
|
|
height on this step, and nothing is dropped — only re-flowed. */
|
|
.agent-family-identity {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
|
|
.agent-family-status {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.agent-family-row {
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.agent-family-list {
|
|
gap: 5px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.agent-ladder {
|
|
gap: 6px;
|
|
}
|
|
|
|
.agent-ladder-note,
|
|
.agent-outcome {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.harness-login-card p {
|
|
display: block;
|
|
}
|
|
|
|
.wizard-steps {
|
|
gap: 8px;
|
|
}
|
|
|
|
.wizard-step {
|
|
padding: 8px 10px;
|
|
gap: 4px;
|
|
}
|
|
|
|
.wizard-content {
|
|
gap: 12px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.step-title {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.panel-card,
|
|
.summary-card,
|
|
.wizard-choice,
|
|
.wizard-runtime-strip {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
.btn {
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.wizard-footer {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.wizard-error {
|
|
min-height: 16px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
body {
|
|
padding: 16px;
|
|
}
|
|
|
|
.wizard-shell {
|
|
min-height: calc(100vh - 32px);
|
|
padding: 14px;
|
|
}
|
|
|
|
.field-grid,
|
|
.grid.two,
|
|
.grid.three,
|
|
.wizard-choice-grid,
|
|
.agent-ladder-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.wizard-step {
|
|
flex-basis: 138px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.wizard-step-copy {
|
|
display: none;
|
|
}
|
|
|
|
.summary-kv {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.wizard-step {
|
|
flex-basis: 92px;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.wizard-step-title {
|
|
display: none;
|
|
}
|
|
}
|