feat: improve Codex launch controls and add ChatGPT app shutdown
This commit is contained in:
lzt404 committed
1 parent
7f19f4bbc8
commit
a8a0d54d90
7 files changed
+526
-155
No files matched your search
+186
-62
@@ -391,8 +391,14 @@ input:focus-visible {
|
||||
}
|
||||
|
||||
.page {
|
||||
width: min(100%, 1180px);
|
||||
margin-inline: auto;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
min-width: 0;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.page > * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.kernel-page,
|
||||
@@ -403,6 +409,7 @@ input:focus-visible {
|
||||
}
|
||||
|
||||
.panel {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 20px;
|
||||
border: 1px solid #e3e1db;
|
||||
@@ -456,7 +463,7 @@ input:focus-visible {
|
||||
|
||||
.status-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@@ -1913,7 +1920,7 @@ input:focus-visible {
|
||||
|
||||
.oauth-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
@@ -3759,7 +3766,7 @@ input:focus-visible {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
color: #7a746c;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@@ -3799,14 +3806,14 @@ input:focus-visible {
|
||||
.agent-list-heading strong,
|
||||
.agent-list-items strong {
|
||||
color: #2d2a26;
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.agent-list-heading span,
|
||||
.agent-list-items small {
|
||||
overflow: hidden;
|
||||
color: #8a847c;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -3877,6 +3884,8 @@ input:focus-visible {
|
||||
grid-template-rows: auto auto;
|
||||
align-content: start;
|
||||
gap: 14px;
|
||||
container-type: inline-size;
|
||||
container-name: agent-panel;
|
||||
}
|
||||
|
||||
.agent-subpage-tabs {
|
||||
@@ -3903,7 +3912,7 @@ input:focus-visible {
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #7a746c;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -3944,7 +3953,7 @@ input:focus-visible {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 12px;
|
||||
padding: 15px;
|
||||
padding: 16px;
|
||||
border: 1px solid #e3e1db;
|
||||
border-radius: 8px;
|
||||
background: #faf9f5;
|
||||
@@ -3969,13 +3978,13 @@ input:focus-visible {
|
||||
.codex-session-overview-head strong,
|
||||
.codex-session-list-head strong {
|
||||
color: #2d2a26;
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.codex-session-overview-head span,
|
||||
.codex-session-list-head > div:first-child > span {
|
||||
color: #8a847c;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
@@ -3986,7 +3995,7 @@ input:focus-visible {
|
||||
min-height: 32px;
|
||||
margin-top: 0;
|
||||
padding: 0 10px;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.codex-session-metrics {
|
||||
@@ -4011,14 +4020,14 @@ input:focus-visible {
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: #8a847c;
|
||||
font-size: 9px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.codex-session-metrics strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: #2d2a26;
|
||||
font-size: 15px;
|
||||
font-size: 17px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -4026,7 +4035,7 @@ input:focus-visible {
|
||||
.codex-session-database-metric strong {
|
||||
direction: rtl;
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -4064,12 +4073,12 @@ input:focus-visible {
|
||||
|
||||
.codex-session-repair-copy strong {
|
||||
color: #2d2a26;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.codex-session-repair-copy span {
|
||||
color: #8a847c;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
@@ -4090,7 +4099,7 @@ input:focus-visible {
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
color: #7a746c;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.codex-session-progress-track {
|
||||
@@ -4117,7 +4126,7 @@ input:focus-visible {
|
||||
border-radius: 7px;
|
||||
background: #eef7f0;
|
||||
color: #2f6b3f;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -4177,7 +4186,7 @@ input:focus-visible {
|
||||
|
||||
.codex-session-selection-actions > span {
|
||||
color: #8a847c;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -4256,17 +4265,17 @@ input:focus-visible {
|
||||
|
||||
.codex-session-main strong {
|
||||
color: #2d2a26;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.codex-session-main code {
|
||||
color: #8a847c;
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.codex-session-main span {
|
||||
color: #5f5a53;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.codex-session-meta {
|
||||
@@ -4281,7 +4290,7 @@ input:focus-visible {
|
||||
border-radius: 999px;
|
||||
background: #eef7f0;
|
||||
color: #2f6b3f;
|
||||
font-size: 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@@ -4295,7 +4304,7 @@ input:focus-visible {
|
||||
.codex-session-meta time {
|
||||
max-width: 190px;
|
||||
color: #8a847c;
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.codex-session-delete-button {
|
||||
@@ -4313,7 +4322,7 @@ input:focus-visible {
|
||||
border-radius: 7px;
|
||||
background: #faf9f5;
|
||||
color: #8a847c;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -4332,7 +4341,7 @@ input:focus-visible {
|
||||
.codex-session-pagination span {
|
||||
min-width: 72px;
|
||||
color: #5f5a53;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -4358,7 +4367,7 @@ input:focus-visible {
|
||||
.codex-session-cleanup-dialog > p {
|
||||
margin: 0;
|
||||
color: #5f5a53;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
line-height: 1.65;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@@ -4375,7 +4384,7 @@ input:focus-visible {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #5f5a53;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -4423,13 +4432,13 @@ input:focus-visible {
|
||||
|
||||
.codex-session-cleanup-list strong {
|
||||
color: #2d2a26;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.codex-session-cleanup-list code,
|
||||
.codex-session-cleanup-list small {
|
||||
color: #8a847c;
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.agent-status-messages {
|
||||
@@ -4454,7 +4463,9 @@ input:focus-visible {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.agent-launch-targets {
|
||||
@@ -4475,7 +4486,7 @@ input:focus-visible {
|
||||
border-radius: 5px;
|
||||
background: transparent;
|
||||
color: #7a746c;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -4489,7 +4500,7 @@ input:focus-visible {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
height: 70px;
|
||||
min-height: 76px;
|
||||
}
|
||||
|
||||
.agent-status-grid > div {
|
||||
@@ -4505,14 +4516,14 @@ input:focus-visible {
|
||||
.agent-status-grid span {
|
||||
gap: 5px;
|
||||
color: #8a847c;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.agent-status-grid strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: #2d2a26;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -4522,15 +4533,15 @@ input:focus-visible {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
align-content: start;
|
||||
gap: 9px;
|
||||
padding: 15px;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid #e3e1db;
|
||||
border-radius: 8px;
|
||||
background: #faf9f5;
|
||||
}
|
||||
|
||||
.agent-model-section {
|
||||
min-height: 138px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.agent-section-heading {
|
||||
@@ -4549,13 +4560,13 @@ input:focus-visible {
|
||||
|
||||
.agent-section-heading strong {
|
||||
color: #2d2a26;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.agent-section-heading > div > span,
|
||||
.agent-model-hint {
|
||||
color: #8a847c;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.agent-model-hint {
|
||||
@@ -4570,7 +4581,7 @@ input:focus-visible {
|
||||
border-radius: 999px;
|
||||
background: #fff8eb;
|
||||
color: #805a24;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -4622,12 +4633,12 @@ input:focus-visible {
|
||||
|
||||
.agent-model-trigger strong {
|
||||
color: #2d2a26;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.agent-model-trigger small {
|
||||
color: #8a847c;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.agent-model-trigger > svg {
|
||||
@@ -4673,7 +4684,7 @@ input:focus-visible {
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
color: #2d2a26;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.agent-model-list {
|
||||
@@ -4725,12 +4736,12 @@ input:focus-visible {
|
||||
}
|
||||
|
||||
.agent-model-option strong {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.agent-model-option small {
|
||||
color: #8a847c;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.agent-model-option > svg {
|
||||
@@ -4745,13 +4756,13 @@ input:focus-visible {
|
||||
gap: 6px;
|
||||
padding: 16px;
|
||||
color: #8a847c;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.agent-model-empty strong {
|
||||
color: #5f5a53;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.agent-model-empty.error,
|
||||
@@ -4765,7 +4776,7 @@ input:focus-visible {
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
color: #8a847c;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.agent-model-dropdown-footer .error {
|
||||
@@ -4773,11 +4784,11 @@ input:focus-visible {
|
||||
}
|
||||
|
||||
.agent-modification-actions {
|
||||
min-height: 104px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.codex-auto-restore-card {
|
||||
min-height: 82px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.codex-auto-restore-toggle {
|
||||
@@ -4817,7 +4828,7 @@ input:focus-visible {
|
||||
.codex-auto-restore-toggle > strong {
|
||||
min-width: 42px;
|
||||
color: #5f5a53;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -4828,7 +4839,7 @@ input:focus-visible {
|
||||
.codex-auto-restore-message {
|
||||
max-width: 100%;
|
||||
color: #2f6b3f;
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@@ -4849,13 +4860,13 @@ input:focus-visible {
|
||||
|
||||
.agent-modification-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.agent-modification-buttons.codex {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
|
||||
}
|
||||
|
||||
.agent-modification-buttons button {
|
||||
@@ -4901,7 +4912,7 @@ input:focus-visible {
|
||||
min-width: 0;
|
||||
gap: 7px;
|
||||
color: #7a746c;
|
||||
font-size: 11px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.agent-config-summary > span {
|
||||
@@ -4914,6 +4925,7 @@ input:focus-visible {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 5px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.agent-launch-control > .agent-inline-message {
|
||||
@@ -4925,6 +4937,10 @@ input:focus-visible {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.agent-config-footer .agent-close-app-button {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.usage-records-page {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
@@ -5017,7 +5033,7 @@ input:focus-visible {
|
||||
|
||||
.usage-filter-panel {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(110px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
@@ -5064,7 +5080,7 @@ input:focus-visible {
|
||||
.usage-stat-grid {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@@ -5219,7 +5235,7 @@ input:focus-visible {
|
||||
|
||||
.usage-analysis-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@@ -5512,7 +5528,7 @@ input:focus-visible {
|
||||
|
||||
.real-quota-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@@ -5640,13 +5656,13 @@ input:focus-visible {
|
||||
|
||||
.quota-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.quota-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
@@ -5910,6 +5926,114 @@ input:focus-visible {
|
||||
}
|
||||
}
|
||||
|
||||
@container agent-panel (min-width: 900px) {
|
||||
.agent-core-config {
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.agent-status-grid,
|
||||
.agent-status-messages,
|
||||
.codex-auto-restore-card,
|
||||
.agent-config-footer {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.agent-model-section {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.agent-modification-actions {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@container agent-panel (max-width: 640px) {
|
||||
.agent-status-grid {
|
||||
grid-template-columns: 1fr;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.codex-session-metrics {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.codex-session-database-metric {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.codex-session-repair-panel {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.codex-session-repair-actions {
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.codex-session-row,
|
||||
.codex-session-row:has(.codex-session-checkbox) {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.codex-session-row:has(.codex-session-checkbox) {
|
||||
grid-template-columns: 20px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.codex-session-row:has(.codex-session-checkbox) .codex-session-main {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.codex-session-meta,
|
||||
.codex-session-row:has(.codex-session-checkbox) .codex-session-meta {
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: auto minmax(80px, 1fr) auto;
|
||||
align-items: center;
|
||||
justify-items: start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.codex-session-meta small,
|
||||
.codex-session-meta time {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.codex-session-meta time {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.agent-config-footer {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.agent-config-summary > span {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.agent-config-footer > .agent-launch-control {
|
||||
width: 100%;
|
||||
justify-items: stretch;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.agent-launch-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.agent-launch-targets {
|
||||
grid-column: 1 / -1;
|
||||
grid-auto-columns: 1fr;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.agent-launch-actions > .primary-button:last-child {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.app-shell {
|
||||
grid-template-columns: 204px minmax(0, 1fr);
|
||||
|
||||
Reference in new issue
Block a user