feat: redesign agent configuration UI and add Codex session tab
- add localized core configuration and session management tabs - display action errors inline and streamline status feedback - refine responsive layouts, dialogs, action buttons, and default window size
This commit is contained in:
lzt404 committed
1 parent
82758d6681
commit
50b35ae6bd
6 files changed
+528
-318
No files matched your search
+210
-97
@@ -908,8 +908,7 @@ input:focus-visible {
|
||||
background: #f4f1ea;
|
||||
}
|
||||
|
||||
.button-row.control-action-row,
|
||||
.button-row.version-action-row {
|
||||
.button-row.control-action-row {
|
||||
--kernel-action-button-min: clamp(112px, 12ch, 156px);
|
||||
|
||||
grid-template-columns: repeat(
|
||||
@@ -923,11 +922,15 @@ input:focus-visible {
|
||||
}
|
||||
|
||||
.button-row.version-action-row {
|
||||
--kernel-action-button-min: clamp(120px, 15ch, 176px);
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-auto-flow: row;
|
||||
grid-auto-columns: unset;
|
||||
grid-auto-rows: 38px;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.control-action-row > button,
|
||||
.version-action-row > button {
|
||||
.control-action-row > button {
|
||||
width: 100%;
|
||||
min-height: 42px;
|
||||
height: auto;
|
||||
@@ -948,6 +951,20 @@ input:focus-visible {
|
||||
.software-update-actions {
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
|
||||
grid-auto-flow: row;
|
||||
grid-auto-rows: 38px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.software-update-actions > button,
|
||||
.version-action-row > button {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
min-height: 38px;
|
||||
padding: 0 10px;
|
||||
line-height: normal;
|
||||
overflow-wrap: normal;
|
||||
text-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.software-update-panel .panel-heading p {
|
||||
@@ -2796,7 +2813,7 @@ input:focus-visible {
|
||||
.real-provider-workbench + .config-dialog-backdrop .management-dialog {
|
||||
grid-template-rows: auto repeat(5, minmax(52px, auto)) auto;
|
||||
height: auto;
|
||||
max-height: min(600px, calc(100vh - 32px));
|
||||
max-height: min(720px, calc(100vh - 48px));
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -3710,24 +3727,47 @@ input:focus-visible {
|
||||
|
||||
.agent-client-list,
|
||||
.agent-config-panel {
|
||||
height: 540px;
|
||||
min-height: 540px;
|
||||
}
|
||||
|
||||
.agents-page {
|
||||
grid-template-rows: 54px 42px auto;
|
||||
grid-template-rows: minmax(54px, auto) auto;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.agent-feedback-slot {
|
||||
min-height: 42px;
|
||||
overflow: hidden;
|
||||
.agent-header-actions {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.agent-feedback-slot .management-alert {
|
||||
min-height: 42px;
|
||||
max-height: 42px;
|
||||
overflow: hidden;
|
||||
.agent-header-actions .agent-inline-message {
|
||||
max-width: 360px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.agent-header-actions .compact-button {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.agent-inline-message {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
color: #7a746c;
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.agent-inline-message.error,
|
||||
.agent-model-hint.error {
|
||||
color: #9f2d20;
|
||||
}
|
||||
|
||||
.agent-inline-message.warning {
|
||||
color: #805a24;
|
||||
}
|
||||
|
||||
.agent-client-list {
|
||||
@@ -3831,31 +3871,106 @@ input:focus-visible {
|
||||
|
||||
.agent-config-panel {
|
||||
display: grid;
|
||||
grid-template-rows: 44px 40px 70px 138px minmax(72px, auto) minmax(48px, 1fr);
|
||||
align-content: stretch;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
align-content: start;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.agent-config-message-slot {
|
||||
min-height: 40px;
|
||||
overflow: hidden;
|
||||
.agent-subpage-tabs {
|
||||
display: inline-grid;
|
||||
grid-auto-flow: column;
|
||||
justify-self: start;
|
||||
max-width: 100%;
|
||||
gap: 3px;
|
||||
padding: 3px;
|
||||
overflow-x: auto;
|
||||
border: 1px solid #d5d2cb;
|
||||
border-radius: 8px;
|
||||
background: #eeece6;
|
||||
}
|
||||
|
||||
.agent-config-message-slot .management-alert,
|
||||
.agent-config-message-slot .agent-warning-line {
|
||||
min-height: 40px;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
.agent-subpage-tabs button {
|
||||
display: inline-flex;
|
||||
min-width: 104px;
|
||||
height: 34px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #7a746c;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.agent-config-message-slot .agent-warning-line {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
.agent-subpage-tabs button:hover,
|
||||
.agent-subpage-tabs button.active {
|
||||
background: #fffdf8;
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.agent-subpage-tabs button.active {
|
||||
box-shadow: 0 1px 4px rgba(45, 42, 38, 0.14);
|
||||
}
|
||||
|
||||
.agent-core-config {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
align-content: start;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.agent-sessions-page {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-height: 360px;
|
||||
place-items: center;
|
||||
padding: 32px;
|
||||
border: 1px dashed #d5d2cb;
|
||||
border-radius: 8px;
|
||||
background: #faf9f5;
|
||||
}
|
||||
|
||||
.agent-sessions-empty {
|
||||
display: grid;
|
||||
grid-template-columns: 44px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: min(100%, 420px);
|
||||
}
|
||||
|
||||
.agent-sessions-icon {
|
||||
display: grid;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
place-items: center;
|
||||
border: 1px solid #e3e1db;
|
||||
border-radius: 9px;
|
||||
background: #fffdf8;
|
||||
color: #5f5a53;
|
||||
}
|
||||
|
||||
.agent-sessions-empty h3 {
|
||||
margin: 0 0 5px;
|
||||
color: #2d2a26;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.agent-sessions-empty p {
|
||||
margin: 0;
|
||||
color: #7a746c;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.agent-status-messages {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.agent-config-heading,
|
||||
.agent-config-title,
|
||||
.agent-config-footer,
|
||||
.agent-config-footer > div,
|
||||
.agent-status-grid span {
|
||||
@@ -3863,7 +3978,6 @@ input:focus-visible {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.agent-config-heading,
|
||||
.agent-config-footer {
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
@@ -3904,67 +4018,6 @@ input:focus-visible {
|
||||
box-shadow: 0 1px 3px rgba(45, 42, 38, 0.14);
|
||||
}
|
||||
|
||||
.agent-config-heading .state-pill {
|
||||
min-width: 92px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.agent-config-title {
|
||||
min-width: 0;
|
||||
gap: 11px;
|
||||
}
|
||||
|
||||
.agent-logo {
|
||||
display: grid;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
flex: none;
|
||||
place-items: center;
|
||||
border: 1px solid #e3e1db;
|
||||
border-radius: 8px;
|
||||
background: #fffdf8;
|
||||
}
|
||||
|
||||
.agent-logo img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.agent-logo svg {
|
||||
color: #5f5a53;
|
||||
}
|
||||
|
||||
.agent-config-title > div {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.agent-config-title h2 {
|
||||
margin: 0;
|
||||
color: #2d2a26;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.agent-config-title span {
|
||||
overflow: hidden;
|
||||
color: #7a746c;
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.agent-warning-line {
|
||||
padding: 9px 11px;
|
||||
border: 1px solid #e4d0af;
|
||||
border-radius: 7px;
|
||||
background: #fff8eb;
|
||||
color: #805a24;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.agent-status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -4002,11 +4055,11 @@ input:focus-visible {
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
min-width: 0;
|
||||
min-height: 138px;
|
||||
padding: 15px;
|
||||
border: 1px solid #e3e1db;
|
||||
border-radius: 8px;
|
||||
background: #faf9f5;
|
||||
height: 138px;
|
||||
}
|
||||
|
||||
.agent-section-heading {
|
||||
@@ -4034,6 +4087,11 @@ input:focus-visible {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.agent-model-hint {
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.agent-pending-badge {
|
||||
flex: none;
|
||||
padding: 4px 8px;
|
||||
@@ -4277,6 +4335,16 @@ input:focus-visible {
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.agent-modification-control {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.agent-modification-control > .agent-inline-message {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.agent-modification-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
@@ -4295,7 +4363,7 @@ input:focus-visible {
|
||||
}
|
||||
|
||||
.agent-restore-dialog {
|
||||
grid-template-rows: 40px minmax(58px, auto) 40px;
|
||||
grid-template-rows: auto;
|
||||
height: auto;
|
||||
min-height: 210px;
|
||||
}
|
||||
@@ -4313,6 +4381,10 @@ input:focus-visible {
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.agent-restore-dialog > .agent-inline-message {
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.agent-config-footer {
|
||||
min-height: 48px;
|
||||
padding-top: 14px;
|
||||
@@ -4326,12 +4398,23 @@ input:focus-visible {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.agent-config-footer > div span {
|
||||
.agent-config-summary > span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.agent-config-footer > .agent-launch-control {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.agent-launch-control > .agent-inline-message {
|
||||
max-width: 360px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.agent-config-footer .primary-button {
|
||||
min-width: 120px;
|
||||
}
|
||||
@@ -5602,6 +5685,22 @@ input:focus-visible {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.agent-header-actions {
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.agent-header-actions .agent-inline-message {
|
||||
max-width: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.agent-subpage-tabs {
|
||||
width: 100%;
|
||||
grid-auto-columns: minmax(104px, 1fr);
|
||||
}
|
||||
|
||||
.usage-tabs {
|
||||
width: 100%;
|
||||
grid-auto-columns: 1fr;
|
||||
@@ -5647,7 +5746,10 @@ input:focus-visible {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.agent-config-heading,
|
||||
.agent-status-grid {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.agent-config-footer,
|
||||
.agent-section-heading {
|
||||
align-items: stretch;
|
||||
@@ -5658,6 +5760,17 @@ input:focus-visible {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.agent-modification-control > .agent-inline-message,
|
||||
.agent-launch-control > .agent-inline-message {
|
||||
max-width: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.agent-config-footer > .agent-launch-control {
|
||||
width: 100%;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
.agent-launch-actions {
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
|
||||
Reference in new issue
Block a user