2863 lines
49 KiB
CSS
2863 lines
49 KiB
CSS
@import 'tailwindcss';
|
|
@import "theme.css";
|
|
@import '../../../packages/shared/src/theme.css';
|
|
|
|
:root {
|
|
color: #18202f;
|
|
background: #f5f7fb;
|
|
font-family: Inter, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
.client-auth-shell {
|
|
display: grid;
|
|
min-height: 100vh;
|
|
padding: 24px;
|
|
background: #f8fafc;
|
|
color: #111827;
|
|
place-items: center;
|
|
}
|
|
|
|
.client-auth-panel {
|
|
display: grid;
|
|
width: min(360px, 100%);
|
|
gap: 16px;
|
|
padding: 28px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
box-shadow: 0 18px 52px rgb(15 23 42 / 12%);
|
|
}
|
|
|
|
.client-auth-logo {
|
|
display: grid;
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 50%;
|
|
background: #101010;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
place-items: center;
|
|
}
|
|
|
|
.client-auth-panel h1 {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.client-auth-panel p {
|
|
margin: 6px 0 0;
|
|
color: #6b7280;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.client-auth-panel label {
|
|
display: grid;
|
|
gap: 7px;
|
|
color: #374151;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.client-auth-panel input {
|
|
height: 38px;
|
|
min-width: 0;
|
|
padding: 0 11px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
color: #111827;
|
|
font: inherit;
|
|
}
|
|
|
|
.client-auth-panel input:focus {
|
|
border-color: #111827;
|
|
outline: 2px solid rgb(17 24 39 / 10%);
|
|
}
|
|
|
|
.client-auth-panel button {
|
|
height: 38px;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: #111827;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.client-auth-panel button:disabled {
|
|
cursor: default;
|
|
opacity: 0.62;
|
|
}
|
|
|
|
.client-auth-tabs {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 6px;
|
|
padding: 4px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.client-auth-tabs button {
|
|
background: transparent;
|
|
color: #4b5563;
|
|
}
|
|
|
|
.client-auth-tabs button.is-active {
|
|
background: #111827;
|
|
color: #fff;
|
|
}
|
|
|
|
.client-auth-code-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 104px;
|
|
gap: 10px;
|
|
align-items: end;
|
|
}
|
|
|
|
.client-auth-code-row button {
|
|
padding: 0 10px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.client-auth-status {
|
|
min-height: 18px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.launcher-shell {
|
|
display: grid;
|
|
grid-template-columns: 48px minmax(0, 1fr);
|
|
min-height: 100vh;
|
|
background: #fff;
|
|
color: #171717;
|
|
}
|
|
|
|
.launcher-shell.platform-theme {
|
|
background: var(--platform-body-fill);
|
|
color: var(--platform-text-strong);
|
|
}
|
|
|
|
.launcher-shell.platform-theme .launcher-main {
|
|
background: var(--platform-body-fill);
|
|
}
|
|
|
|
.launcher-shell.platform-theme .launcher-promo {
|
|
background: var(--platform-warm-bg);
|
|
color: var(--platform-warm-text);
|
|
}
|
|
|
|
.launcher-shell.platform-theme .launcher-promo button {
|
|
color: var(--platform-warm-text);
|
|
}
|
|
|
|
.launcher-shell.platform-theme .launcher-countdown,
|
|
.launcher-shell.platform-theme .launcher-account-bar button,
|
|
.launcher-shell.platform-theme .launcher-wallet-group,
|
|
.launcher-shell.platform-theme .launcher-wallet-popover {
|
|
border-color: var(--platform-subpanel-border);
|
|
background: var(--platform-subpanel-fill);
|
|
color: var(--platform-text-strong);
|
|
}
|
|
|
|
.launcher-shell.platform-theme .launcher-account-bar button,
|
|
.launcher-shell.platform-theme .launcher-wallet-popover button,
|
|
.launcher-shell.platform-theme .launcher-wallet-ledger div span {
|
|
color: var(--platform-text-strong);
|
|
}
|
|
|
|
.launcher-shell.platform-theme .launcher-wallet-group > button {
|
|
border-left-color: var(--platform-subpanel-border);
|
|
}
|
|
|
|
.launcher-shell.platform-theme .launcher-wallet-popover span,
|
|
.launcher-shell.platform-theme .launcher-wallet-popover small {
|
|
color: var(--platform-text-soft);
|
|
}
|
|
|
|
.launcher-promo button,
|
|
.launcher-account-bar button {
|
|
border: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.launcher-main {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
grid-template-rows: auto auto auto;
|
|
align-content: start;
|
|
min-width: 0;
|
|
min-height: 100vh;
|
|
padding: 0 0 42px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.launcher-promo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
min-height: 32px;
|
|
padding: 0 220px 0 24px;
|
|
background: #dfff4b;
|
|
color: #111;
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.launcher-promo strong {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.launcher-promo button {
|
|
padding: 0;
|
|
background: transparent;
|
|
color: #111;
|
|
font-weight: 700;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.launcher-countdown {
|
|
display: grid;
|
|
min-width: 18px;
|
|
height: 20px;
|
|
padding: 0 5px;
|
|
border-radius: 7px;
|
|
background: #fff;
|
|
place-items: center;
|
|
}
|
|
|
|
.launcher-account-bar {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.launcher-main-with-promo .launcher-account-bar {
|
|
top: 44px;
|
|
}
|
|
|
|
.launcher-account-bar button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
height: 26px;
|
|
padding: 0 9px;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: #fff;
|
|
color: #1f2937;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.launcher-wallet-group {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
overflow: visible;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
box-shadow: 0 1px 2px rgb(15 23 42 / 5%);
|
|
}
|
|
|
|
.launcher-wallet-group > button,
|
|
.launcher-wallet-group .launcher-wallet-anchor > button {
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.launcher-wallet-group .launcher-wallet-anchor > button {
|
|
border-radius: 8px 0 0 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.launcher-wallet-group > button {
|
|
border-left: 1px solid #e5e7eb;
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
.launcher-wallet-anchor {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.launcher-wallet-popover {
|
|
position: absolute;
|
|
top: 34px;
|
|
right: 0;
|
|
display: grid;
|
|
width: 220px;
|
|
gap: 7px;
|
|
padding: 12px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
box-shadow: 0 16px 38px rgb(15 23 42 / 14%);
|
|
color: #111827;
|
|
z-index: 90;
|
|
}
|
|
|
|
.launcher-wallet-popover strong {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.launcher-wallet-popover span,
|
|
.launcher-wallet-popover small {
|
|
color: #6b7280;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.launcher-wallet-popover button {
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
height: 30px;
|
|
padding: 0 8px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #111827;
|
|
}
|
|
|
|
.launcher-wallet-popover p {
|
|
margin: 2px 0 4px;
|
|
font-size: 20px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.launcher-wallet-ledger {
|
|
display: grid;
|
|
gap: 5px;
|
|
max-height: 132px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.launcher-wallet-ledger div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.launcher-wallet-ledger div span {
|
|
color: #111827;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.launcher-project-list-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.launcher-project-create > button {
|
|
display: grid;
|
|
border-style: dashed;
|
|
color: #777;
|
|
place-items: center;
|
|
}
|
|
|
|
.launcher-project-thumb {
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.launcher-project-thumb span {
|
|
display: grid;
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 14px;
|
|
background: #fff;
|
|
color: #f26d2d;
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
place-items: center;
|
|
box-shadow: 0 8px 22px rgb(242 109 45 / 16%);
|
|
}
|
|
|
|
.launcher-page {
|
|
display: grid;
|
|
gap: 22px;
|
|
width: min(1054px, calc(100vw - 122px));
|
|
margin: 0 auto;
|
|
padding: 118px 0 0;
|
|
}
|
|
|
|
.launcher-page header {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
}
|
|
|
|
.launcher-page h1 {
|
|
margin: 0;
|
|
color: #111827;
|
|
font-size: 28px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.launcher-page p {
|
|
margin: 8px 0 0;
|
|
color: #8b8b8b;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.launcher-project-runtime-summary {
|
|
display: block;
|
|
margin-top: 5px;
|
|
color: #687386;
|
|
font-size: 11px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.launcher-page-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.launcher-project-form {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: end;
|
|
gap: 10px;
|
|
margin: 16px 0 14px;
|
|
padding: 12px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.launcher-project-form label {
|
|
display: grid;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
color: #6b7280;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.launcher-project-form input {
|
|
min-width: 0;
|
|
height: 34px;
|
|
padding: 0 10px;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 8px;
|
|
color: #111827;
|
|
background: #fff;
|
|
}
|
|
|
|
.launcher-page-actions button,
|
|
.launcher-page .launcher-project-list-actions button,
|
|
.launcher-project-table article > button,
|
|
.launcher-empty-projects button {
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
color: #111827;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.launcher-page .launcher-project-list-actions button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.launcher-page-actions button:last-child {
|
|
border-color: #111827;
|
|
background: #111827;
|
|
color: #fff;
|
|
}
|
|
|
|
.launcher-project-table {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.launcher-project-table article {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto auto auto auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 62px;
|
|
padding: 10px 12px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.launcher-project-table article > .launcher-project-row-main {
|
|
display: grid;
|
|
justify-items: start;
|
|
height: auto;
|
|
min-width: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
text-align: left;
|
|
}
|
|
|
|
.launcher-project-table article strong {
|
|
display: block;
|
|
color: #111827;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.launcher-project-table article small {
|
|
display: block;
|
|
margin-top: 4px;
|
|
color: #8b8b8b;
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.launcher-project-table article span {
|
|
color: #6b7280;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.launcher-empty-projects {
|
|
display: grid;
|
|
justify-items: center;
|
|
gap: 12px;
|
|
min-height: 220px;
|
|
padding: 44px;
|
|
border: 1px dashed #d8dde5;
|
|
border-radius: 8px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.launcher-empty-projects strong {
|
|
color: #111827;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.launcher-help-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.launcher-help-cards article {
|
|
display: grid;
|
|
min-height: 118px;
|
|
padding: 18px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
color: #111827;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
align-content: end;
|
|
}
|
|
|
|
.launcher-agent-chat-page {
|
|
padding-top: 92px;
|
|
}
|
|
|
|
.launcher-agent-chat-page > header .launcher-project-list-actions button {
|
|
height: 34px;
|
|
padding: 0 12px;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
color: #111827;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.launcher-agent-chat-page
|
|
> header
|
|
.launcher-project-list-actions
|
|
button:last-child {
|
|
border-color: #111827;
|
|
background: #111827;
|
|
color: #fff;
|
|
}
|
|
|
|
.launcher-agent-chat-layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 0.3fr) minmax(0, 1fr);
|
|
align-items: start;
|
|
gap: 12px;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: min(620px, calc(100vh - 168px));
|
|
}
|
|
|
|
.launcher-agent-chat-sidebar,
|
|
.launcher-agent-chat-main {
|
|
min-width: 0;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.launcher-agent-chat-sidebar {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
}
|
|
|
|
.launcher-agent-chat-project {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.launcher-agent-chat-project label {
|
|
display: grid;
|
|
gap: 6px;
|
|
color: #6b7280;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.launcher-agent-chat-project input {
|
|
min-width: 0;
|
|
height: 34px;
|
|
padding: 0 10px;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 8px;
|
|
color: #111827;
|
|
background: #fff;
|
|
}
|
|
|
|
.launcher-agent-picker {
|
|
display: grid;
|
|
gap: 8px;
|
|
max-height: 450px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.launcher-agent-picker button {
|
|
display: grid;
|
|
justify-items: start;
|
|
gap: 5px;
|
|
min-width: 0;
|
|
padding: 10px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
color: #111827;
|
|
text-align: left;
|
|
}
|
|
|
|
.launcher-agent-picker .launcher-agent-active {
|
|
border-color: #8b5cf6;
|
|
background: #f8f2ff;
|
|
}
|
|
|
|
.launcher-agent-picker strong,
|
|
.launcher-agent-picker span,
|
|
.launcher-agent-picker small {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.launcher-agent-picker strong {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.launcher-agent-picker span,
|
|
.launcher-agent-picker small {
|
|
color: #6b7280;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.launcher-agent-chat-main {
|
|
display: grid;
|
|
grid-template-rows: auto auto auto auto clamp(260px, 40vh, 380px) auto;
|
|
align-content: start;
|
|
width: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
.launcher-agent-chat-main > header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.launcher-agent-chat-main h2,
|
|
.launcher-agent-chat-main p {
|
|
margin: 0;
|
|
}
|
|
|
|
.launcher-agent-chat-main h2 {
|
|
color: #111827;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.launcher-agent-chat-main p,
|
|
.launcher-agent-chat-main small {
|
|
color: #6b7280;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.launcher-agent-session-bar {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.launcher-agent-session-actions,
|
|
.launcher-agent-session-list {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.launcher-agent-session-actions button {
|
|
display: grid;
|
|
width: 30px;
|
|
height: 30px;
|
|
padding: 0;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
color: #374151;
|
|
place-items: center;
|
|
}
|
|
|
|
.launcher-agent-session-list {
|
|
min-width: 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.launcher-agent-session-list button {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: 7px;
|
|
max-width: 190px;
|
|
height: 30px;
|
|
padding: 0 9px;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
color: #374151;
|
|
}
|
|
|
|
.launcher-agent-session-list button span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.launcher-agent-session-list button small {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.launcher-agent-session-list .launcher-agent-session-active {
|
|
border-color: #7c3aed;
|
|
background: #f5f0ff;
|
|
color: #5b21b6;
|
|
}
|
|
|
|
.launcher-agent-session-list .launcher-agent-session-archived {
|
|
border-style: dashed;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.launcher-agent-session-status {
|
|
max-width: 180px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.launcher-agent-chat-messages {
|
|
grid-row: 5;
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 10px;
|
|
height: clamp(260px, 40vh, 380px);
|
|
min-height: 260px;
|
|
max-height: 380px;
|
|
padding: 14px;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.launcher-agent-chat-messages .message {
|
|
max-width: min(720px, 88%);
|
|
margin: 0;
|
|
}
|
|
|
|
.launcher-agent-chat-messages .message--user {
|
|
justify-self: end;
|
|
}
|
|
|
|
.launcher-agent-chat-waiting {
|
|
position: sticky;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
padding: 9px 11px;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
box-shadow: 0 4px 12px rgb(15 23 42 / 8%);
|
|
color: #374151;
|
|
}
|
|
|
|
.launcher-agent-chat-waiting > span {
|
|
width: 14px;
|
|
height: 14px;
|
|
flex: 0 0 auto;
|
|
border: 2px solid #cbd5e1;
|
|
border-top-color: #111827;
|
|
border-radius: 50%;
|
|
animation: launcher-agent-chat-spin 0.8s linear infinite;
|
|
}
|
|
|
|
.launcher-agent-chat-waiting strong {
|
|
display: block;
|
|
min-width: 0;
|
|
font-size: 12px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.launcher-agent-chat-waiting small {
|
|
display: block;
|
|
margin-top: 2px;
|
|
color: #6b7280;
|
|
font-size: 11px;
|
|
}
|
|
|
|
@keyframes launcher-agent-chat-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.launcher-agent-chat-waiting > span {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
.launcher-agent-chat-composer {
|
|
grid-row: 6;
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
border-top: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.launcher-agent-chat-composer input {
|
|
min-width: 0;
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 8px;
|
|
color: #111827;
|
|
background: #fff;
|
|
}
|
|
|
|
.launcher-agent-chat-composer button {
|
|
height: 36px;
|
|
padding: 0 14px;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: #111827;
|
|
color: #fff;
|
|
}
|
|
|
|
.launcher-agent-chat-mode {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, auto);
|
|
gap: 2px;
|
|
padding: 2px;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 8px;
|
|
background: #f3f4f6;
|
|
}
|
|
|
|
.launcher-agent-chat-mode button {
|
|
height: 30px;
|
|
padding: 0 9px;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: #6b7280;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.launcher-agent-chat-mode button.is-active {
|
|
background: #fff;
|
|
box-shadow: 0 1px 2px rgb(15 23 42 / 10%);
|
|
color: #111827;
|
|
}
|
|
|
|
.launcher-agent-goal-composer-summary {
|
|
min-width: 0;
|
|
height: 36px;
|
|
padding: 0 12px;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
color: #44536a;
|
|
font-size: 12px;
|
|
line-height: 34px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.launcher-agent-runtime-stack {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.launcher-agent-runtime-stack .agent-runtime-status {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.launcher-agent-goal-status {
|
|
display: grid;
|
|
gap: 7px;
|
|
margin: 12px 14px 0;
|
|
padding: 10px 12px;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
color: #111827;
|
|
}
|
|
|
|
.launcher-agent-goal-status header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.launcher-agent-goal-status header > div:first-child,
|
|
.launcher-agent-goal-copy {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 3px;
|
|
}
|
|
|
|
.launcher-agent-goal-status strong {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.launcher-agent-goal-status p,
|
|
.launcher-agent-goal-status small {
|
|
margin: 0;
|
|
color: #647084;
|
|
font-size: 12px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.launcher-agent-goal-actions {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
}
|
|
|
|
.launcher-agent-goal-actions button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
height: 28px;
|
|
padding: 0 9px;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 7px;
|
|
background: #fff;
|
|
color: #111827;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.launcher-agent-goal-actions button:disabled {
|
|
background: #eef2f7;
|
|
color: #9aa3b2;
|
|
}
|
|
|
|
.agent-llm-warning {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin: 12px 14px 0;
|
|
padding: 10px 12px;
|
|
border: 1px solid #f4c7a1;
|
|
border-radius: 8px;
|
|
background: #fff7ed;
|
|
color: #8a3b12;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.agent-llm-warning strong {
|
|
min-width: 0;
|
|
font-weight: 700;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.agent-llm-warning button {
|
|
flex: 0 0 auto;
|
|
height: 30px;
|
|
padding: 0 10px;
|
|
border: 1px solid #f4c7a1;
|
|
border-radius: 7px;
|
|
background: #fff;
|
|
color: #8a3b12;
|
|
}
|
|
|
|
.agent-runtime-status {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin: 12px 14px 0;
|
|
padding: 10px 12px;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 8px;
|
|
background: #f8fafd;
|
|
color: #111827;
|
|
}
|
|
|
|
.agent-conversation-panel > .agent-runtime-status {
|
|
margin: 0;
|
|
}
|
|
|
|
.agent-runtime-status header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.agent-runtime-status .agent-runtime-status-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.agent-runtime-status-header-actions small {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.agent-runtime-status .agent-runtime-collapse-toggle {
|
|
display: grid;
|
|
width: 28px;
|
|
height: 28px;
|
|
flex: 0 0 auto;
|
|
padding: 0;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 7px;
|
|
background: #fff;
|
|
color: #44536a;
|
|
cursor: pointer;
|
|
place-items: center;
|
|
}
|
|
|
|
.agent-runtime-status .agent-runtime-collapse-toggle:hover,
|
|
.agent-runtime-status .agent-runtime-collapse-toggle:focus-visible {
|
|
border-color: #aeb8c7;
|
|
background: #f3f6fa;
|
|
}
|
|
|
|
.agent-runtime-status .agent-runtime-status-details {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.agent-runtime-status .agent-runtime-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.agent-runtime-status .agent-runtime-actions button {
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 7px;
|
|
background: #fff;
|
|
color: #111827;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.agent-runtime-status .agent-runtime-actions button:disabled {
|
|
color: #9aa3b2;
|
|
background: #eef2f7;
|
|
}
|
|
|
|
.agent-runtime-status strong {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.agent-runtime-status p,
|
|
.agent-runtime-status ol {
|
|
margin: 0;
|
|
}
|
|
|
|
.agent-runtime-status p,
|
|
.agent-runtime-status li,
|
|
.agent-runtime-status small {
|
|
color: #647084;
|
|
font-size: 12px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.agent-runtime-status ol {
|
|
display: grid;
|
|
gap: 3px;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.agent-runtime-status div {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.agent-runtime-status .agent-runtime-event-toggle {
|
|
justify-self: start;
|
|
min-height: 24px;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: #44536a;
|
|
font-size: 12px;
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.agent-runtime-status .agent-runtime-user-input {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid #d8dde5;
|
|
}
|
|
|
|
.agent-runtime-user-input header small {
|
|
color: #8a3b12;
|
|
}
|
|
|
|
.agent-runtime-user-input fieldset {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 8px;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.agent-runtime-user-input legend {
|
|
padding: 0;
|
|
color: #111827;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.agent-runtime-user-input-options {
|
|
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.agent-runtime-user-input-options button {
|
|
display: grid;
|
|
min-height: 56px;
|
|
gap: 3px;
|
|
padding: 8px 10px;
|
|
border: 1px solid #cfd6e1;
|
|
border-radius: 7px;
|
|
background: #fff;
|
|
color: #111827;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.agent-runtime-user-input-options button:hover,
|
|
.agent-runtime-user-input-options button:focus-visible {
|
|
border-color: #9da8b8;
|
|
background: #f5f7fa;
|
|
}
|
|
|
|
.agent-runtime-user-input-options button[aria-pressed='true'] {
|
|
border-color: #e46f2c;
|
|
background: #fff7ed;
|
|
box-shadow: inset 0 0 0 1px #e46f2c;
|
|
}
|
|
|
|
.agent-runtime-user-input-options button:disabled {
|
|
cursor: default;
|
|
opacity: 0.68;
|
|
}
|
|
|
|
.agent-runtime-user-input textarea {
|
|
width: 100%;
|
|
min-height: 58px;
|
|
padding: 8px 10px;
|
|
border: 1px solid #cfd6e1;
|
|
border-radius: 7px;
|
|
background: #fff;
|
|
color: #111827;
|
|
font: inherit;
|
|
line-height: 1.45;
|
|
resize: vertical;
|
|
}
|
|
|
|
.agent-runtime-user-input textarea:focus-visible {
|
|
border-color: #e46f2c;
|
|
outline: 2px solid rgb(228 111 44 / 16%);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.agent-runtime-user-input .agent-runtime-user-input-submit {
|
|
justify-self: end;
|
|
min-height: 32px;
|
|
padding: 0 12px;
|
|
border: 1px solid #cf5f22;
|
|
border-radius: 7px;
|
|
background: #e46f2c;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.agent-runtime-user-input .agent-runtime-user-input-submit:disabled {
|
|
border-color: #cfd6e1;
|
|
background: #e8ecf2;
|
|
color: #8b95a5;
|
|
}
|
|
|
|
.agent-runtime-status .agent-runtime-user-input-missing {
|
|
padding-top: 8px;
|
|
border-top: 1px solid #d8dde5;
|
|
color: #9a3412;
|
|
}
|
|
|
|
.launcher-project-development {
|
|
padding-top: 92px;
|
|
}
|
|
|
|
.launcher-development-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.launcher-development-grid article,
|
|
.launcher-development-canvas,
|
|
.launcher-development-assets {
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.launcher-development-grid article {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 8px;
|
|
min-height: 108px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.launcher-development-grid span,
|
|
.launcher-development-assets h2 {
|
|
color: #6b7280;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.launcher-development-grid strong {
|
|
min-width: 0;
|
|
color: #111827;
|
|
font-size: 15px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.launcher-development-grid small {
|
|
color: #8b8b8b;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.launcher-development-canvas {
|
|
display: grid;
|
|
min-height: 300px;
|
|
background: linear-gradient(#f3f4f6 1px, transparent 1px),
|
|
linear-gradient(90deg, #f3f4f6 1px, transparent 1px), #fff;
|
|
background-size: 24px 24px;
|
|
place-items: center;
|
|
}
|
|
|
|
.launcher-development-canvas > div {
|
|
display: grid;
|
|
justify-items: center;
|
|
gap: 8px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.launcher-development-canvas strong {
|
|
color: #111827;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.launcher-development-assets {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.launcher-development-assets h2,
|
|
.launcher-development-assets p {
|
|
margin: 0;
|
|
}
|
|
|
|
.launcher-development-assets div {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr);
|
|
gap: 12px;
|
|
min-height: 32px;
|
|
align-items: center;
|
|
}
|
|
|
|
.launcher-development-assets span,
|
|
.launcher-development-assets small {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.launcher-development-assets span {
|
|
color: #111827;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.launcher-development-assets small,
|
|
.launcher-development-assets p {
|
|
color: #6b7280;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.project-supervisor-surface {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
|
|
gap: 18px;
|
|
min-width: 0;
|
|
min-height: 560px;
|
|
}
|
|
|
|
.project-supervisor-conversation {
|
|
display: grid;
|
|
grid-template-rows: minmax(340px, 1fr) auto auto auto;
|
|
align-content: stretch;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.project-supervisor-message-list {
|
|
min-height: 340px;
|
|
max-height: calc(100vh - 330px);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.project-supervisor-surface .agent-runtime-status {
|
|
margin: 0;
|
|
}
|
|
|
|
.project-supervisor-surface .agent-runtime-status header,
|
|
.project-supervisor-collaboration header {
|
|
align-items: center;
|
|
}
|
|
|
|
.project-supervisor-composer {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.project-supervisor-composer textarea {
|
|
min-width: 0;
|
|
min-height: 72px;
|
|
max-height: 180px;
|
|
padding: 10px 12px;
|
|
resize: vertical;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
color: #111827;
|
|
font: inherit;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.project-supervisor-composer button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
min-width: 84px;
|
|
height: 40px;
|
|
padding: 0 16px;
|
|
border: 1px solid #1f6feb;
|
|
border-radius: 8px;
|
|
background: #1f6feb;
|
|
color: #fff;
|
|
}
|
|
|
|
.project-supervisor-composer button:disabled {
|
|
border-color: #cfd6e1;
|
|
background: #e8ecf2;
|
|
color: #8b95a5;
|
|
}
|
|
|
|
.project-supervisor-workspace-status {
|
|
color: #7b8492;
|
|
font-size: 11px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.project-supervisor-collaboration {
|
|
min-width: 0;
|
|
padding-left: 18px;
|
|
border-left: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.project-supervisor-collaboration header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.project-supervisor-collaboration h2,
|
|
.project-supervisor-collaboration p {
|
|
margin: 0;
|
|
}
|
|
|
|
.project-supervisor-collaboration h2 {
|
|
color: #111827;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.project-supervisor-collaboration header small,
|
|
.project-supervisor-collaboration p {
|
|
color: #8b8b8b;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.project-supervisor-collaboration > div {
|
|
display: grid;
|
|
}
|
|
|
|
.project-supervisor-collaboration article {
|
|
display: grid;
|
|
gap: 5px;
|
|
min-width: 0;
|
|
padding: 10px 0;
|
|
border-top: 1px solid #eef0f3;
|
|
}
|
|
|
|
.project-supervisor-collaboration article strong {
|
|
color: #111827;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.project-supervisor-collaboration article span,
|
|
.project-supervisor-collaboration article small {
|
|
color: #647084;
|
|
font-size: 11px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.launcher-card-collage {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
gap: 2px;
|
|
}
|
|
|
|
.launcher-card-collage span:nth-child(1) {
|
|
background: radial-gradient(circle at 45% 38%, #6b5c43 0 18%, transparent 19%),
|
|
radial-gradient(circle at 62% 54%, #2f2a23 0 25%, transparent 26%),
|
|
linear-gradient(135deg, #91a17e, #2c3327);
|
|
}
|
|
|
|
.launcher-card-collage span:nth-child(2) {
|
|
background: radial-gradient(circle at 58% 45%, #b28b5a 0 16%, transparent 17%),
|
|
radial-gradient(circle at 48% 55%, #302114 0 24%, transparent 25%),
|
|
linear-gradient(135deg, #d9e8ef, #9fb0a0);
|
|
}
|
|
|
|
.launcher-card-collage span:nth-child(3) {
|
|
background: radial-gradient(circle at 50% 54%, #eac9c0 0 22%, transparent 23%),
|
|
linear-gradient(135deg, #f7d9d5, #dab6aa);
|
|
}
|
|
|
|
.launcher-card-collage span:nth-child(4) {
|
|
background: radial-gradient(circle at 56% 50%, #32271b 0 22%, transparent 23%),
|
|
linear-gradient(135deg, #8e6c4e, #2b211b);
|
|
}
|
|
|
|
.launcher-card-ui > div {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 8px;
|
|
padding: 16px;
|
|
background: #fff7f2;
|
|
}
|
|
|
|
.launcher-card-ui span {
|
|
border-radius: 4px;
|
|
background:
|
|
linear-gradient(#ff8d5c 0 0) 12px 12px / 40px 4px no-repeat,
|
|
linear-gradient(#ffd4c2 0 0) 12px 24px / 70px 4px no-repeat,
|
|
linear-gradient(#fee4d8, #fff);
|
|
box-shadow: inset 0 0 0 1px #fed7c8;
|
|
}
|
|
|
|
.launcher-card-pattern > div {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
background: linear-gradient(
|
|
45deg,
|
|
transparent 46%,
|
|
#fff 46% 54%,
|
|
transparent 54%
|
|
),
|
|
linear-gradient(135deg, #55405a, #e4b2a7);
|
|
}
|
|
|
|
.launcher-card-pattern span {
|
|
display: grid;
|
|
color: #fff;
|
|
font-size: 38px;
|
|
place-items: center;
|
|
text-shadow: 0 2px 8px rgb(0 0 0 / 18%);
|
|
}
|
|
|
|
.launcher-card-orange > div {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 1fr;
|
|
background: #fff8ee;
|
|
}
|
|
|
|
.launcher-card-orange span:first-child {
|
|
display: grid;
|
|
color: #ff7a1a;
|
|
font-size: 32px;
|
|
font-weight: 900;
|
|
place-items: start;
|
|
padding: 18px;
|
|
}
|
|
|
|
.launcher-card-orange span:last-child {
|
|
display: grid;
|
|
color: #f06d3d;
|
|
font-size: 96px;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
place-items: center;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.launcher-shell {
|
|
grid-template-columns: 48px minmax(0, 1fr);
|
|
}
|
|
|
|
.launcher-main {
|
|
grid-template-rows: auto auto auto;
|
|
overflow: visible;
|
|
}
|
|
|
|
.launcher-promo {
|
|
justify-content: flex-start;
|
|
min-height: 38px;
|
|
padding: 7px 10px;
|
|
overflow: hidden;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.launcher-promo
|
|
span:not(.launcher-countdown):not(:nth-child(3)):not(:nth-child(6)):not(
|
|
:nth-child(9)
|
|
) {
|
|
display: none;
|
|
}
|
|
|
|
.launcher-promo strong {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.launcher-account-bar {
|
|
position: static;
|
|
justify-content: flex-end;
|
|
padding: 18px 14px 0;
|
|
}
|
|
|
|
.launcher-account-bar span {
|
|
max-width: 148px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.launcher-project-form {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.launcher-page {
|
|
width: min(100%, calc(100vw - 76px));
|
|
}
|
|
|
|
.launcher-agent-chat-page > header,
|
|
.launcher-agent-chat-main > header {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.launcher-agent-chat-main > header > small {
|
|
max-width: 100%;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.launcher-development-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.launcher-agent-chat-layout {
|
|
grid-template-columns: 1fr;
|
|
min-height: auto;
|
|
}
|
|
|
|
.launcher-agent-picker {
|
|
max-height: 240px;
|
|
}
|
|
|
|
.launcher-agent-chat-main {
|
|
min-height: 620px;
|
|
}
|
|
|
|
.launcher-agent-chat-composer {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.launcher-agent-chat-mode {
|
|
grid-column: 1 / -1;
|
|
justify-self: start;
|
|
}
|
|
|
|
.launcher-agent-goal-status header {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.launcher-agent-goal-actions {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.agent-runtime-user-input-options {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.agent-runtime-user-input .agent-runtime-user-input-submit {
|
|
width: 100%;
|
|
justify-self: stretch;
|
|
}
|
|
|
|
.launcher-agent-session-bar {
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.launcher-agent-session-status {
|
|
display: none;
|
|
}
|
|
|
|
.launcher-development-assets div {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.project-supervisor-surface {
|
|
grid-template-columns: 1fr;
|
|
min-height: auto;
|
|
}
|
|
|
|
.project-supervisor-conversation {
|
|
grid-template-rows: minmax(320px, auto) auto auto auto;
|
|
}
|
|
|
|
.project-supervisor-message-list {
|
|
max-height: 52vh;
|
|
}
|
|
|
|
.project-supervisor-composer {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.project-supervisor-composer button {
|
|
width: 100%;
|
|
}
|
|
|
|
.project-supervisor-collaboration {
|
|
padding: 14px 0 0;
|
|
border-top: 1px solid #e5e7eb;
|
|
border-left: 0;
|
|
}
|
|
}
|
|
|
|
.launcher-dialog-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 200;
|
|
display: grid;
|
|
padding: 24px;
|
|
background: rgb(0 0 0 / 56%);
|
|
place-items: center;
|
|
}
|
|
|
|
.launcher-dialog {
|
|
width: min(420px, 100%);
|
|
padding: 20px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
color: #171717;
|
|
box-shadow: 0 18px 52px rgb(0 0 0 / 18%);
|
|
}
|
|
|
|
.launcher-dialog h2 {
|
|
margin: 0 0 10px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.launcher-dialog p {
|
|
margin: 0;
|
|
color: #6b7280;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.launcher-agent-goal-dialog {
|
|
width: min(560px, 100%);
|
|
max-height: min(760px, calc(100vh - 48px));
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.launcher-agent-goal-fields {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.launcher-agent-goal-fields label {
|
|
display: grid;
|
|
gap: 6px;
|
|
color: #44536a;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.launcher-agent-goal-fields textarea {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 9px 10px;
|
|
border: 1px solid #d8dde5;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
color: #111827;
|
|
font: inherit;
|
|
line-height: 1.5;
|
|
resize: vertical;
|
|
}
|
|
|
|
.launcher-agent-goal-fields textarea:focus-visible {
|
|
border-color: #64748b;
|
|
outline: 2px solid rgb(100 116 139 / 18%);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.launcher-dialog .launcher-agent-goal-dialog-error {
|
|
margin-top: 10px;
|
|
color: #b42318;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.launcher-dialog-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.launcher-dialog-actions button {
|
|
height: 34px;
|
|
padding: 0 14px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
color: #171717;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.launcher-dialog-actions button:last-child {
|
|
border-color: #111827;
|
|
background: #111827;
|
|
color: #fff;
|
|
}
|
|
|
|
.app-shell {
|
|
min-height: 100vh;
|
|
background: #f5f7fb;
|
|
}
|
|
|
|
.app-shell--user {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
}
|
|
|
|
.app-shell--dev {
|
|
display: grid;
|
|
grid-template-columns: minmax(360px, 0.85fr) minmax(520px, 1.15fr);
|
|
gap: 1px;
|
|
background: #d9dee8;
|
|
}
|
|
|
|
.chat-pane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
min-width: 0;
|
|
padding: 18px;
|
|
background: #fff;
|
|
}
|
|
|
|
.app-shell--user .chat-pane {
|
|
width: min(900px, 100%);
|
|
min-height: calc(100vh - 48px);
|
|
border: 1px solid #d9dee8;
|
|
}
|
|
|
|
.app-shell--dev .chat-pane {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.chat-header,
|
|
.panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.chat-header-title {
|
|
display: grid;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.chat-header-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.chat-quick-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.panel-header {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.panel-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.panel-header button,
|
|
.chat-header button,
|
|
.chat-quick-actions button,
|
|
.local-project-form button,
|
|
.panel-actions select {
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.panel-header button,
|
|
.chat-header button,
|
|
.chat-quick-actions button,
|
|
.local-project-form button {
|
|
color: #fff;
|
|
background: #1f6feb;
|
|
}
|
|
|
|
.panel-actions select {
|
|
background: #fff;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 14px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.chat-header span,
|
|
.chat-header small,
|
|
.task-pane span,
|
|
.log-pane p {
|
|
color: #647084;
|
|
}
|
|
|
|
.chat-header small {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.run-history {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
max-height: 190px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.run-history button {
|
|
display: grid;
|
|
gap: 2px;
|
|
min-width: 150px;
|
|
max-width: 100%;
|
|
padding: 7px 9px;
|
|
border: 1px solid #dce3ee;
|
|
border-radius: 6px;
|
|
background: #f8fafc;
|
|
color: #18202f;
|
|
text-align: left;
|
|
}
|
|
|
|
.run-history button[aria-current='true'],
|
|
.trace-history button[aria-current='true'] {
|
|
border-color: #1f6feb;
|
|
background: #eef5ff;
|
|
}
|
|
|
|
.run-history small {
|
|
color: #647084;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.run-history-more {
|
|
align-self: center;
|
|
}
|
|
|
|
.settings-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 220;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 18px;
|
|
background: rgb(24 32 47 / 36%);
|
|
}
|
|
|
|
.settings-panel {
|
|
display: grid;
|
|
gap: 10px;
|
|
width: min(920px, 100%);
|
|
max-height: calc(100vh - 36px);
|
|
padding: 18px;
|
|
overflow: auto;
|
|
border: 1px solid #cfd7e6;
|
|
background: #fff;
|
|
}
|
|
|
|
.settings-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.settings-grid label {
|
|
display: grid;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
color: #647084;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.settings-grid input,
|
|
.settings-grid select {
|
|
min-width: 0;
|
|
height: 36px;
|
|
padding: 0 10px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
color: #18202f;
|
|
background: #fff;
|
|
}
|
|
|
|
.settings-checkbox {
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
align-self: end;
|
|
}
|
|
|
|
.settings-checkbox input {
|
|
width: 18px;
|
|
height: 18px;
|
|
padding: 0;
|
|
}
|
|
|
|
.runtime-mcp-section {
|
|
grid-column: 1 / -1;
|
|
display: grid;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
padding-top: 14px;
|
|
border-top: 1px solid #e2e7ef;
|
|
}
|
|
|
|
.runtime-mcp-header,
|
|
.runtime-mcp-server > header,
|
|
.runtime-mcp-catalog > header,
|
|
.runtime-mcp-tools article > div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.runtime-mcp-header > div,
|
|
.runtime-mcp-server > header > div {
|
|
display: grid;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.runtime-mcp-header h3 {
|
|
margin: 0;
|
|
color: #18202f;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.runtime-mcp-header span,
|
|
.runtime-mcp-server span,
|
|
.runtime-mcp-catalog span {
|
|
color: #647084;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.runtime-mcp-header button,
|
|
.runtime-mcp-add button,
|
|
.runtime-mcp-server > header button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
height: 32px;
|
|
padding: 0 10px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
color: #18202f;
|
|
background: #fff;
|
|
}
|
|
|
|
.runtime-mcp-header button:disabled,
|
|
.runtime-mcp-add button:disabled,
|
|
.runtime-mcp-server > header button:disabled {
|
|
color: #97a1b1;
|
|
background: #f5f7fa;
|
|
}
|
|
|
|
.runtime-mcp-add {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 36px;
|
|
align-items: end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.runtime-mcp-add label {
|
|
display: grid;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
color: #647084;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.runtime-mcp-add input {
|
|
min-width: 0;
|
|
height: 36px;
|
|
padding: 0 10px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
color: #18202f;
|
|
background: #fff;
|
|
}
|
|
|
|
.runtime-mcp-add button {
|
|
width: 36px;
|
|
padding: 0;
|
|
}
|
|
|
|
.runtime-mcp-list,
|
|
.runtime-mcp-tools {
|
|
display: grid;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.runtime-mcp-server {
|
|
min-width: 0;
|
|
padding: 10px 12px;
|
|
border: 1px solid #dce3ee;
|
|
border-radius: 7px;
|
|
background: #fbfcfe;
|
|
}
|
|
|
|
.runtime-mcp-server > header strong,
|
|
.runtime-mcp-catalog strong,
|
|
.runtime-mcp-tools strong {
|
|
min-width: 0;
|
|
color: #18202f;
|
|
font-size: 13px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.runtime-mcp-server > header button {
|
|
width: 30px;
|
|
height: 30px;
|
|
padding: 0;
|
|
color: #a13737;
|
|
}
|
|
|
|
.runtime-mcp-state.is-connected {
|
|
color: #157347;
|
|
}
|
|
|
|
.runtime-mcp-server details {
|
|
margin-top: 8px;
|
|
border-top: 1px solid #e2e7ef;
|
|
}
|
|
|
|
.runtime-mcp-server summary {
|
|
padding: 9px 0 1px;
|
|
color: #475569;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.runtime-mcp-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.runtime-mcp-grid label {
|
|
display: grid;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
color: #647084;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.runtime-mcp-grid input,
|
|
.runtime-mcp-grid select,
|
|
.runtime-mcp-grid textarea {
|
|
min-width: 0;
|
|
width: 100%;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
color: #18202f;
|
|
background: #fff;
|
|
}
|
|
|
|
.runtime-mcp-grid input,
|
|
.runtime-mcp-grid select {
|
|
height: 36px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.runtime-mcp-grid textarea {
|
|
min-height: 84px;
|
|
padding: 8px 10px;
|
|
resize: vertical;
|
|
font:
|
|
12px/1.5 ui-monospace,
|
|
SFMono-Regular,
|
|
Consolas,
|
|
monospace;
|
|
}
|
|
|
|
.runtime-mcp-grid .settings-checkbox {
|
|
grid-template-columns: 18px minmax(0, 1fr);
|
|
align-self: end;
|
|
min-height: 36px;
|
|
}
|
|
|
|
.runtime-mcp-grid .settings-checkbox input {
|
|
width: 18px;
|
|
height: 18px;
|
|
padding: 0;
|
|
}
|
|
|
|
.runtime-mcp-field-wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.runtime-mcp-empty {
|
|
padding: 12px;
|
|
border: 1px dashed #cfd7e6;
|
|
border-radius: 6px;
|
|
color: #647084;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.runtime-mcp-catalog {
|
|
display: grid;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
padding: 10px 12px;
|
|
border: 1px solid #d7e3da;
|
|
border-radius: 7px;
|
|
background: #f8fcf9;
|
|
}
|
|
|
|
.runtime-mcp-tools article {
|
|
display: grid;
|
|
gap: 7px;
|
|
min-width: 0;
|
|
padding-top: 8px;
|
|
border-top: 1px solid #dce8df;
|
|
}
|
|
|
|
.runtime-mcp-tools pre {
|
|
max-height: 180px;
|
|
margin: 0;
|
|
padding: 8px;
|
|
overflow: auto;
|
|
border: 1px solid #dce3ee;
|
|
border-radius: 6px;
|
|
color: #263142;
|
|
background: #fff;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.message-list {
|
|
flex: 1;
|
|
border: 1px solid #dde3ee;
|
|
padding: 14px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.message + .message {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.message-history-more {
|
|
width: 100%;
|
|
min-height: 32px;
|
|
margin-bottom: 10px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
color: #647084;
|
|
background: #f8fafd;
|
|
}
|
|
|
|
.message {
|
|
overflow-wrap: anywhere;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.message--user {
|
|
color: #1f6feb;
|
|
}
|
|
|
|
.message-action {
|
|
min-height: 32px;
|
|
margin-top: 6px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
color: #334155;
|
|
background: #f8fafd;
|
|
}
|
|
|
|
.pending-command {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
border: 1px solid #dde3ee;
|
|
background: #f8fafd;
|
|
}
|
|
|
|
.pending-command span {
|
|
display: grid;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
margin-right: auto;
|
|
color: #647084;
|
|
}
|
|
|
|
.pending-command small {
|
|
overflow-wrap: anywhere;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.pending-command button {
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
background: #1f6feb;
|
|
}
|
|
|
|
.composer {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
gap: 10px;
|
|
}
|
|
|
|
.composer input,
|
|
.composer button,
|
|
.composer-upload-button {
|
|
height: 40px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.composer input {
|
|
min-width: 0;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.composer button,
|
|
.composer-upload-button {
|
|
display: inline-grid;
|
|
padding: 0 18px;
|
|
place-items: center;
|
|
color: #fff;
|
|
background: #1f6feb;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.composer-upload-button input {
|
|
display: none;
|
|
}
|
|
|
|
.agent-status-pane {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.agent-status-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 8px;
|
|
max-height: 220px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.agent-status-list button {
|
|
display: grid;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
padding: 9px;
|
|
border: 1px solid #dce3ee;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
color: #18202f;
|
|
text-align: left;
|
|
}
|
|
|
|
.agent-status-list span,
|
|
.agent-status-list small {
|
|
color: #647084;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.agent-status-list small {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.agent-conversation-panel {
|
|
display: grid;
|
|
gap: 10px;
|
|
width: min(640px, 100%);
|
|
max-height: calc(100vh - 36px);
|
|
padding: 18px;
|
|
overflow: auto;
|
|
border: 1px solid #cfd7e6;
|
|
background: #fff;
|
|
}
|
|
|
|
.agent-conversation-list {
|
|
min-height: 220px;
|
|
max-height: 420px;
|
|
padding: 12px;
|
|
overflow: auto;
|
|
border: 1px solid #dde3ee;
|
|
}
|
|
|
|
.agent-memory-box {
|
|
display: grid;
|
|
gap: 6px;
|
|
max-height: 180px;
|
|
padding: 10px;
|
|
overflow: auto;
|
|
border: 1px solid #dde3ee;
|
|
background: #f8fafd;
|
|
}
|
|
|
|
.agent-memory-box pre {
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.agent-memory-box small button {
|
|
height: 24px;
|
|
margin-left: 8px;
|
|
padding: 0 8px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
color: #1f6feb;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.agent-conversation-panel .composer {
|
|
grid-template-columns: minmax(0, 1fr) auto auto auto;
|
|
}
|
|
|
|
.workspace-panel {
|
|
display: grid;
|
|
gap: 12px;
|
|
width: min(680px, 100%);
|
|
max-height: calc(100vh - 36px);
|
|
padding: 18px;
|
|
overflow: auto;
|
|
border: 1px solid #cfd7e6;
|
|
background: #fff;
|
|
}
|
|
|
|
.workspace-picker {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: 8px;
|
|
}
|
|
|
|
.workspace-picker input,
|
|
.workspace-picker button,
|
|
.workspace-list button {
|
|
min-width: 0;
|
|
height: 36px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.workspace-picker input {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.workspace-picker button {
|
|
padding: 0 14px;
|
|
color: #fff;
|
|
background: #1f6feb;
|
|
}
|
|
|
|
.workspace-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.workspace-list button {
|
|
padding: 0 10px;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
color: #18202f;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.developer-pane {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
align-content: start;
|
|
gap: 1px;
|
|
min-width: 0;
|
|
background: #d9dee8;
|
|
}
|
|
|
|
.developer-panel {
|
|
min-width: 0;
|
|
padding: 18px;
|
|
background: #fff;
|
|
}
|
|
|
|
.developer-panel--wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.task-pane article {
|
|
display: grid;
|
|
grid-template-columns: 84px 1fr;
|
|
gap: 12px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #edf1f7;
|
|
}
|
|
|
|
.capability-pane article {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 12px;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #edf1f7;
|
|
}
|
|
|
|
.capability-pane span {
|
|
color: #647084;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.trace-pane article {
|
|
display: grid;
|
|
gap: 4px;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #edf1f7;
|
|
}
|
|
|
|
.trace-pane span,
|
|
.trace-pane small {
|
|
color: #647084;
|
|
}
|
|
|
|
.trace-pane small {
|
|
overflow-wrap: anywhere;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.trace-error {
|
|
margin-bottom: 10px;
|
|
padding: 8px;
|
|
border: 1px solid #efb3b3;
|
|
border-radius: 6px;
|
|
color: #8a1f1f;
|
|
background: #fff5f5;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.trace-artifacts {
|
|
display: grid;
|
|
gap: 4px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.trace-task-graph {
|
|
display: grid;
|
|
gap: 4px;
|
|
margin-bottom: 10px;
|
|
padding: 8px;
|
|
border: 1px solid #dce3ee;
|
|
border-radius: 6px;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.trace-history {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
max-height: 180px;
|
|
margin-bottom: 10px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.trace-history button {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
padding: 5px 8px;
|
|
overflow-wrap: anywhere;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
color: #18202f;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.asset-pane code {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
padding: 9px 10px;
|
|
border: 1px solid #e1e7f0;
|
|
background: #f8fafd;
|
|
}
|
|
|
|
.local-project-form {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.local-project-form input,
|
|
.local-project-form button {
|
|
min-width: 0;
|
|
height: 36px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.local-project-form input {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.asset-register-form {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.asset-register-form input,
|
|
.asset-register-form select,
|
|
.asset-register-form button {
|
|
min-width: 0;
|
|
height: 34px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.asset-register-form input,
|
|
.asset-register-form select {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.asset-register-form button {
|
|
color: #fff;
|
|
background: #1f6feb;
|
|
}
|
|
|
|
.status-line,
|
|
.manifest-path {
|
|
margin-bottom: 10px;
|
|
color: #647084;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.manifest-path {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.file-pane input,
|
|
.file-pane textarea,
|
|
.memory-pane textarea {
|
|
display: block;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.file-pane input {
|
|
height: 36px;
|
|
}
|
|
|
|
.file-pane textarea,
|
|
.memory-pane textarea {
|
|
min-height: 150px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.file-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.file-list button {
|
|
display: grid;
|
|
gap: 2px;
|
|
padding: 6px 10px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
text-align: left;
|
|
}
|
|
|
|
.file-list button small {
|
|
color: #647084;
|
|
}
|
|
|
|
.checkpoint-list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
}
|
|
|
|
.checkpoint-summary {
|
|
display: inline-flex;
|
|
min-width: 160px;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.checkpoint-summary small {
|
|
color: #64748b;
|
|
}
|
|
|
|
.limited-command-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.limited-command-list button {
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
border: 1px solid #cfd7e6;
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
background: #1f6feb;
|
|
}
|
|
|
|
.project-log-content {
|
|
max-height: 180px;
|
|
margin: 0 0 10px;
|
|
padding: 10px;
|
|
overflow: auto;
|
|
border: 1px solid #dde3ee;
|
|
background: #f8fafd;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.preview-frame {
|
|
display: grid;
|
|
width: 100%;
|
|
min-height: 180px;
|
|
place-items: center;
|
|
border: 1px solid #cfd7e6;
|
|
background: #101827;
|
|
color: #d9e7ff;
|
|
}
|
|
|
|
iframe.preview-frame {
|
|
display: block;
|
|
height: 180px;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.app-shell--user {
|
|
padding: 0;
|
|
}
|
|
|
|
.app-shell--user .chat-pane {
|
|
min-height: 100vh;
|
|
border: 0;
|
|
}
|
|
|
|
.app-shell--dev {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.developer-pane {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.developer-panel--wide {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.settings-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.runtime-mcp-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.runtime-mcp-field-wide {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.composer {
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
|
|
.composer-upload-button {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|