From 6fade82895cef7f4312da52f1edd535eaff0e6e6 Mon Sep 17 00:00:00 2001 From: murashit Date: Thu, 11 Jun 2026 18:14:01 +0900 Subject: [PATCH] Reorganize chat CSS modules --- src/styles/31-chat-messages.css | 276 +----------------- src/styles/32-chat-work-items.css | 209 +++++++++++++ ...input.css => 33-chat-pending-requests.css} | 61 ++++ ...chat-composer.css => 34-chat-composer.css} | 0 ...ff-view.css => 35-chat-turn-diff-view.css} | 0 src/styles/order.json | 7 +- 6 files changed, 276 insertions(+), 277 deletions(-) create mode 100644 src/styles/32-chat-work-items.css rename src/styles/{32-chat-user-input.css => 33-chat-pending-requests.css} (52%) rename src/styles/{33-chat-composer.css => 34-chat-composer.css} (100%) rename src/styles/{34-chat-turn-diff-view.css => 35-chat-turn-diff-view.css} (100%) diff --git a/src/styles/31-chat-messages.css b/src/styles/31-chat-messages.css index 40eaf1d6..d70a161a 100644 --- a/src/styles/31-chat-messages.css +++ b/src/styles/31-chat-messages.css @@ -144,7 +144,8 @@ .codex-panel__activity-group > summary { cursor: default; color: var(--text-muted); - font-size: var(--font-ui-small); + font-size: var(--codex-panel-secondary-label-size); + font-weight: var(--codex-panel-secondary-label-weight); } .codex-panel__activity-group > summary:hover { @@ -351,276 +352,3 @@ .codex-panel__wikilink { cursor: default; } - -.codex-panel__work-message { - min-width: 0; - max-width: 100%; - margin-bottom: var(--codex-panel-section-gap); - padding-left: var(--codex-panel-message-indent); - border: 0; - border-left: var(--codex-panel-rail); - border-radius: 0; - background: transparent; -} - -.codex-panel__work-message .codex-panel__message-role, -.codex-panel__activity-group > summary { - font-size: var(--codex-panel-secondary-label-size); - font-weight: var(--codex-panel-secondary-label-weight); -} - -.codex-panel__work-message--warning { - border-left-color: var(--codex-panel-color-warning); -} - -.codex-panel__work-message--warning > .codex-panel__message-role { - color: var(--codex-panel-color-warning); -} - -.codex-panel__pending-request-message { - display: flex; - flex-direction: column; - gap: var(--codex-panel-item-gap); - margin-bottom: var(--codex-panel-edge-padding-x); - background: transparent; - font-family: var(--font-interface); -} - -.codex-panel__pending-request-card { - display: flex; - flex-direction: column; - align-items: stretch; - gap: var(--codex-panel-control-gap); - padding: 0; - border: 0; - border-radius: 0; - background: transparent; -} - -.codex-panel__pending-request-card + .codex-panel__pending-request-card { - padding-top: var(--codex-panel-item-gap); - border-top: 1px solid var(--codex-panel-border-muted-color); -} - -.codex-panel__pending-request-info { - min-width: 0; - margin-right: 0; -} - -.codex-panel__pending-request-title { - color: var(--text-normal); - font-size: var(--font-ui-small); - line-height: var(--line-height-tight); -} - -.codex-panel__pending-request-body { - color: var(--text-muted); - font-size: var(--font-ui-small); - line-height: var(--line-height-tight); - white-space: pre-wrap; - overflow-wrap: anywhere; -} - -.codex-panel__approval-details { - margin-top: var(--codex-panel-control-gap); - color: var(--text-muted); - font-size: var(--font-ui-smaller); -} - -.codex-panel__pending-request-actions { - display: flex; - justify-content: flex-start; - flex-wrap: wrap; - gap: var(--codex-panel-control-gap); -} - -.codex-panel__user-input.codex-panel__pending-request-card .codex-panel__pending-request-actions { - margin-top: var(--codex-panel-section-gap); -} - -.codex-panel__tool-item, -.codex-panel__file-change { - min-width: 0; - max-width: 100%; - margin-bottom: var(--codex-panel-section-gap); - padding-left: var(--codex-panel-message-indent); - border: 0; - border-left: var(--codex-panel-rail); - border-radius: 0; - background: transparent; -} - -.codex-panel__tool-item .codex-panel__message-role, -.codex-panel__file-change .codex-panel__message-role, -.codex-panel__activity-group > summary { - font-size: var(--codex-panel-secondary-label-size); - font-weight: var(--codex-panel-secondary-label-weight); -} - -.codex-panel__execution--running { - border-left-color: var(--codex-panel-color-accent); -} - -.codex-panel__execution--completed { - border-left-color: var(--codex-panel-color-success); -} - -.codex-panel__execution--failed { - border-left-color: var(--codex-panel-color-danger); -} - -.codex-panel__tool-item--hook:not(.codex-panel__execution) { - border-left-color: var(--text-accent); -} - -.codex-panel__tool-result-header { - display: flex; - align-items: center; - min-width: 0; - color: var(--text-muted); - cursor: default; -} - -.codex-panel__tool-result--plain .codex-panel__tool-result-header { - cursor: text; -} - -.codex-panel__tool-result-details > .codex-panel__tool-result-header:hover, -.codex-panel__tool-result-details > .codex-panel__tool-result-header:hover .codex-panel__message-role { - color: var(--nav-item-color-hover, var(--text-normal)); -} - -.codex-panel__tool-result-header .codex-panel__message-role { - margin-bottom: 0; -} - -.codex-panel__tool-result > .codex-panel__output, -.codex-panel__tool-result > .codex-panel-diff-file, -.codex-panel__tool-result > .codex-panel__meta-grid, -.codex-panel__tool-result-details > .codex-panel__output, -.codex-panel__tool-result-details > .codex-panel-diff-file, -.codex-panel__tool-result-details > .codex-panel__meta-grid { - margin-left: 0; -} - -.codex-panel__tool-result-details { - cursor: text; - user-select: text; -} - -.codex-panel__tool-summary { - white-space: pre-wrap; - overflow-wrap: anywhere; - color: var(--text-muted); - font-size: var(--font-ui-small); - cursor: text; - user-select: text; -} - -.codex-panel__tool-result > .codex-panel__tool-summary { - min-width: 0; - max-width: 100%; - margin-top: var(--codex-panel-panel-gap); - overflow: hidden; - line-height: var(--line-height-tight); - text-overflow: ellipsis; - white-space: nowrap; -} - -.codex-panel__tool-result.is-open > .codex-panel__tool-summary { - display: none; -} - -.codex-panel__task-list, -.codex-panel__agent-list { - display: flex; - flex-direction: column; - gap: var(--codex-panel-panel-gap); - margin: var(--codex-panel-control-gap) 0 0; - padding: 0; - list-style: none; -} - -.codex-panel__task-step, -.codex-panel__agent-row { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - gap: var(--codex-panel-item-gap); - min-width: 0; - color: var(--text-muted); - font-size: var(--font-ui-small); -} - -.codex-panel__task-marker, -.codex-panel__agent-thread { - color: var(--text-faint); - font-family: var(--font-monospace); - font-size: var(--font-ui-smaller); -} - -.codex-panel__task-step--completed .codex-panel__task-text { - color: var(--text-faint); -} - -.codex-panel__task-step--inProgress .codex-panel__task-marker, -.codex-panel__task-step--inProgress .codex-panel__task-text { - color: var(--text-accent); -} - -.codex-panel__agent-status { - min-width: 0; - overflow-wrap: anywhere; -} - -.codex-panel__agent-activity > .codex-panel__agent-activity-summary { - min-width: 0; - max-width: 100%; - overflow: hidden; - line-height: var(--line-height-tight); - text-overflow: ellipsis; - white-space: nowrap; -} - -.codex-panel__agent-activity.is-open > .codex-panel__agent-activity-summary { - display: none; -} - -.codex-panel__agent-detail-section { - margin-top: var(--codex-panel-section-gap); -} - -.codex-panel__agent-detail-section > pre { - margin: var(--codex-panel-item-gap) 0 0; -} - -.codex-panel__agent-list--summary { - margin-top: var(--codex-panel-panel-gap); -} - -.codex-panel__agent-row--more .codex-panel__agent-status { - color: var(--text-faint); -} - -.codex-panel__output, -.codex-panel-diff-file { - margin-top: var(--codex-panel-section-gap); -} - -.codex-panel__output-title { - line-height: var(--line-height-tight); -} - -.codex-panel__output pre { - max-height: var(--codex-panel-size-output-max-height); - margin: var(--codex-panel-item-gap) 0 0; - padding: var(--codex-panel-section-gap); - overflow: auto; - border-radius: var(--codex-panel-code-radius); - background: var(--codex-panel-code-surface); - color: var(--code-normal, var(--codex-panel-text-muted)); - font-family: var(--font-monospace); - font-size: var(--font-smaller); - cursor: text; - user-select: text; - white-space: pre-wrap; -} diff --git a/src/styles/32-chat-work-items.css b/src/styles/32-chat-work-items.css new file mode 100644 index 00000000..5855df31 --- /dev/null +++ b/src/styles/32-chat-work-items.css @@ -0,0 +1,209 @@ +.codex-panel__work-message { + min-width: 0; + max-width: 100%; + margin-bottom: var(--codex-panel-section-gap); + padding-left: var(--codex-panel-message-indent); + border: 0; + border-left: var(--codex-panel-rail); + border-radius: 0; + background: transparent; +} + +.codex-panel__work-message .codex-panel__message-role { + font-size: var(--codex-panel-secondary-label-size); + font-weight: var(--codex-panel-secondary-label-weight); +} + +.codex-panel__work-message--warning { + border-left-color: var(--codex-panel-color-warning); +} + +.codex-panel__work-message--warning > .codex-panel__message-role { + color: var(--codex-panel-color-warning); +} + +.codex-panel__tool-item, +.codex-panel__file-change { + min-width: 0; + max-width: 100%; + margin-bottom: var(--codex-panel-section-gap); + padding-left: var(--codex-panel-message-indent); + border: 0; + border-left: var(--codex-panel-rail); + border-radius: 0; + background: transparent; +} + +.codex-panel__tool-item .codex-panel__message-role, +.codex-panel__file-change .codex-panel__message-role { + font-size: var(--codex-panel-secondary-label-size); + font-weight: var(--codex-panel-secondary-label-weight); +} + +.codex-panel__execution--running { + border-left-color: var(--codex-panel-color-accent); +} + +.codex-panel__execution--completed { + border-left-color: var(--codex-panel-color-success); +} + +.codex-panel__execution--failed { + border-left-color: var(--codex-panel-color-danger); +} + +.codex-panel__tool-item--hook:not(.codex-panel__execution) { + border-left-color: var(--text-accent); +} + +.codex-panel__tool-result-header { + display: flex; + align-items: center; + min-width: 0; + color: var(--text-muted); + cursor: default; +} + +.codex-panel__tool-result--plain .codex-panel__tool-result-header { + cursor: text; +} + +.codex-panel__tool-result-details > .codex-panel__tool-result-header:hover, +.codex-panel__tool-result-details > .codex-panel__tool-result-header:hover .codex-panel__message-role { + color: var(--nav-item-color-hover, var(--text-normal)); +} + +.codex-panel__tool-result-header .codex-panel__message-role { + margin-bottom: 0; +} + +.codex-panel__tool-result > .codex-panel__output, +.codex-panel__tool-result > .codex-panel-diff-file, +.codex-panel__tool-result > .codex-panel__meta-grid, +.codex-panel__tool-result-details > .codex-panel__output, +.codex-panel__tool-result-details > .codex-panel-diff-file, +.codex-panel__tool-result-details > .codex-panel__meta-grid { + margin-left: 0; +} + +.codex-panel__tool-result-details { + cursor: text; + user-select: text; +} + +.codex-panel__tool-summary { + white-space: pre-wrap; + overflow-wrap: anywhere; + color: var(--text-muted); + font-size: var(--font-ui-small); + cursor: text; + user-select: text; +} + +.codex-panel__tool-result > .codex-panel__tool-summary { + min-width: 0; + max-width: 100%; + margin-top: var(--codex-panel-panel-gap); + overflow: hidden; + line-height: var(--line-height-tight); + text-overflow: ellipsis; + white-space: nowrap; +} + +.codex-panel__tool-result.is-open > .codex-panel__tool-summary { + display: none; +} + +.codex-panel__task-list, +.codex-panel__agent-list { + display: flex; + flex-direction: column; + gap: var(--codex-panel-panel-gap); + margin: var(--codex-panel-control-gap) 0 0; + padding: 0; + list-style: none; +} + +.codex-panel__task-step, +.codex-panel__agent-row { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + gap: var(--codex-panel-item-gap); + min-width: 0; + color: var(--text-muted); + font-size: var(--font-ui-small); +} + +.codex-panel__task-marker, +.codex-panel__agent-thread { + color: var(--text-faint); + font-family: var(--font-monospace); + font-size: var(--font-ui-smaller); +} + +.codex-panel__task-step--completed .codex-panel__task-text { + color: var(--text-faint); +} + +.codex-panel__task-step--inProgress .codex-panel__task-marker, +.codex-panel__task-step--inProgress .codex-panel__task-text { + color: var(--text-accent); +} + +.codex-panel__agent-status { + min-width: 0; + overflow-wrap: anywhere; +} + +.codex-panel__agent-activity > .codex-panel__agent-activity-summary { + min-width: 0; + max-width: 100%; + overflow: hidden; + line-height: var(--line-height-tight); + text-overflow: ellipsis; + white-space: nowrap; +} + +.codex-panel__agent-activity.is-open > .codex-panel__agent-activity-summary { + display: none; +} + +.codex-panel__agent-detail-section { + margin-top: var(--codex-panel-section-gap); +} + +.codex-panel__agent-detail-section > pre { + margin: var(--codex-panel-item-gap) 0 0; +} + +.codex-panel__agent-list--summary { + margin-top: var(--codex-panel-panel-gap); +} + +.codex-panel__agent-row--more .codex-panel__agent-status { + color: var(--text-faint); +} + +.codex-panel__output, +.codex-panel-diff-file { + margin-top: var(--codex-panel-section-gap); +} + +.codex-panel__output-title { + line-height: var(--line-height-tight); +} + +.codex-panel__output pre { + max-height: var(--codex-panel-size-output-max-height); + margin: var(--codex-panel-item-gap) 0 0; + padding: var(--codex-panel-section-gap); + overflow: auto; + border-radius: var(--codex-panel-code-radius); + background: var(--codex-panel-code-surface); + color: var(--code-normal, var(--codex-panel-text-muted)); + font-family: var(--font-monospace); + font-size: var(--font-smaller); + cursor: text; + user-select: text; + white-space: pre-wrap; +} diff --git a/src/styles/32-chat-user-input.css b/src/styles/33-chat-pending-requests.css similarity index 52% rename from src/styles/32-chat-user-input.css rename to src/styles/33-chat-pending-requests.css index 45a4bd58..235ac692 100644 --- a/src/styles/32-chat-user-input.css +++ b/src/styles/33-chat-pending-requests.css @@ -1,3 +1,64 @@ +.codex-panel__pending-request-message { + display: flex; + flex-direction: column; + gap: var(--codex-panel-item-gap); + margin-bottom: var(--codex-panel-edge-padding-x); + background: transparent; + font-family: var(--font-interface); +} + +.codex-panel__pending-request-card { + display: flex; + flex-direction: column; + align-items: stretch; + gap: var(--codex-panel-control-gap); + padding: 0; + border: 0; + border-radius: 0; + background: transparent; +} + +.codex-panel__pending-request-card + .codex-panel__pending-request-card { + padding-top: var(--codex-panel-item-gap); + border-top: 1px solid var(--codex-panel-border-muted-color); +} + +.codex-panel__pending-request-info { + min-width: 0; + margin-right: 0; +} + +.codex-panel__pending-request-title { + color: var(--text-normal); + font-size: var(--font-ui-small); + line-height: var(--line-height-tight); +} + +.codex-panel__pending-request-body { + color: var(--text-muted); + font-size: var(--font-ui-small); + line-height: var(--line-height-tight); + white-space: pre-wrap; + overflow-wrap: anywhere; +} + +.codex-panel__approval-details { + margin-top: var(--codex-panel-control-gap); + color: var(--text-muted); + font-size: var(--font-ui-smaller); +} + +.codex-panel__pending-request-actions { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + gap: var(--codex-panel-control-gap); +} + +.codex-panel__user-input.codex-panel__pending-request-card .codex-panel__pending-request-actions { + margin-top: var(--codex-panel-section-gap); +} + .codex-panel__user-input-question { display: grid; gap: var(--codex-panel-control-gap); diff --git a/src/styles/33-chat-composer.css b/src/styles/34-chat-composer.css similarity index 100% rename from src/styles/33-chat-composer.css rename to src/styles/34-chat-composer.css diff --git a/src/styles/34-chat-turn-diff-view.css b/src/styles/35-chat-turn-diff-view.css similarity index 100% rename from src/styles/34-chat-turn-diff-view.css rename to src/styles/35-chat-turn-diff-view.css diff --git a/src/styles/order.json b/src/styles/order.json index 24c66893..501cd859 100644 --- a/src/styles/order.json +++ b/src/styles/order.json @@ -9,9 +9,10 @@ "23-chat-goal.css", "30-chat-layout.css", "31-chat-messages.css", - "32-chat-user-input.css", - "33-chat-composer.css", - "34-chat-turn-diff-view.css", + "32-chat-work-items.css", + "33-chat-pending-requests.css", + "34-chat-composer.css", + "35-chat-turn-diff-view.css", "40-threads-view.css", "50-selection-rewrite.css", "60-settings.css"